From e5821e766cbffe71be3d28bfe6917e64bdf73591 Mon Sep 17 00:00:00 2001
From: Adam Bem <adam.bem@zoho.eu>
Date: Wed, 15 Nov 2023 13:35:21 +0100
Subject: [PATCH] Separated gui details into separated component

---
 .../src/components/man/ElementDescription.vue | 18 +++++++++++
 .../components/man/RestMockManComponent.vue   | 31 +++++++------------
 2 files changed, 29 insertions(+), 20 deletions(-)
 create mode 100644 Frontend/src/components/man/ElementDescription.vue

diff --git a/Frontend/src/components/man/ElementDescription.vue b/Frontend/src/components/man/ElementDescription.vue
new file mode 100644
index 0000000..1cd9c8e
--- /dev/null
+++ b/Frontend/src/components/man/ElementDescription.vue
@@ -0,0 +1,18 @@
+<script setup lang="ts">
+
+import { ref } from 'vue'
+
+
+
+const props = defineProps(
+    {
+        name: {type: String, required: true}
+    }
+)
+
+</script>
+
+<template>
+    <h3 class="text-lg font-medium mt-2">{{ name }}</h3>
+    <p><slot></slot></p>
+</template>
\ No newline at end of file
diff --git a/Frontend/src/components/man/RestMockManComponent.vue b/Frontend/src/components/man/RestMockManComponent.vue
index 2795bc1..82f6027 100644
--- a/Frontend/src/components/man/RestMockManComponent.vue
+++ b/Frontend/src/components/man/RestMockManComponent.vue
@@ -1,6 +1,8 @@
 <script setup lang="ts">
 
 import ImgMan from './ImgMan.vue';
+import ElementDescription from './ElementDescription.vue';
+
 
 </script>
 
@@ -15,7 +17,7 @@ import ImgMan from './ImgMan.vue';
       <br>
       <p>Its main functions are:</p>
       <ul class="list-disc ml-5">
-        <li>Generating random URL for each user, one per user, with persistence for 24h. {check}</li>
+        <li>Generating random URL for each user, one per user, with persistence for 24h.</li>
         <li>Customizable HTTP response status code</li>
         <li>Customizable response body and its content type</li>
         <li>Customizable response headers</li>
@@ -23,27 +25,16 @@ import ImgMan from './ImgMan.vue';
       </ul>
       <h2 class="text-2xl font-bold mt-4 mb-2">GUI elements</h2>
       
-      <h3 class="text-lg font-medium mt-2">URL field</h3>
-      <p>This field contains autogenerated URL for your REST Mock. All links are removed every 24h.{check}</p>
+      <h3 class="text-lg font-medium mt-2"></h3>
+      <ElementDescription name="URL field">This field contains autogenerated URL for your REST Mock. All links are removed every 24h.</ElementDescription>
+      <ElementDescription name="'Save' button">Applies every change made on this page and saves it between sessions.</ElementDescription>
+      <ElementDescription name="Response Content Type field">Its just convenient way to set "Content-Type" header in the response.</ElementDescription>
+      <ElementDescription name="Response HTTP Status field">This field sets HTTP status that will be sent to client. Any valid HTTP status can be used, by default it's 200 OK.</ElementDescription>
+      <ElementDescription name="Response Body field">Here you can set response body. This is sophisticated text editor with syntax-highlighting based on detected language. It works both with JSON and XML data.</ElementDescription>
+      <ElementDescription name="Response Headers section">This section contains three default and unremovable headers ("Connection", "Date", "Keep-Alive") as well as empty field used to adding custom header. Adding header with empty value is possible, but every header has to have a name. When adding new header is possible, the "Add" button becomes active. New header is added after "Add" button is clicked.</ElementDescription>
+      <ElementDescription name="History">This section allows to look into history of requests sent to current REST Mock. Entries are sorted by descending by date (newer are first). If request has body, "Show body" button appears in its entry. Also there is option to look into every request's headers by clicking "Show Headers" button. For now, History doesn't refresh automatically. To refresh it, click small refresh button on the right-hand side.</ElementDescription>
 
-      <h3 class="text-lg font-medium mt-2">"Save" button</h3>
-      <p>Applies every change made on this page and saves it between sessions. </p>
       
-      <h3 class="text-lg font-medium mt-2">Response Content Type field</h3>
-      <p>Its just convenient way to set "Content-Type" header in the response.</p>
-      
-      <h3 class="text-lg font-medium mt-2">Response HTTP Status field</h3>
-      <p>This field sets HTTP status that will be sent to client. Any valid HTTP status can be used, by default it's 200 OK.</p>
-      
-      <h3 class="text-lg font-medium mt-2">Response Body field</h3>
-      <p>Here you can set response body. This is sophisticated text editor with syntax-highlighting based on detected language. It works both with JSON and XML data.</p>
-
-      <h3 class="text-lg font-medium mt-2">Response Headers section</h3>
-      <p>This section contains three default and unremovable headers ("Connection", "Date", "Keep-Alive") as well as empty field used to adding custom header. Adding header with empty value is possible, but every header has to have a name. When adding new header is possible, the "Add" button becomes active. New header is added after "Add" button is clicked.</p>
-      
-      <h3 class="text-lg font-medium mt-2">History</h3>
-      <p>This section allows to look into history of requests sent to current REST Mock. Entries are sorted by descending by date (newer are first). If request has body, "Show body" button appears in its entry. Also there is option to look into every request's headers by clicking "Show Headers" button. For now, History doesn't refresh automatically. To refresh it, click small refresh button on the right-hand side.</p>
-
       <h2 class="text-2xl font-bold mt-4 mb-2">Example</h2>
       <p>Let's say we want to create temporary endpoint that returns code 200 with body:</p>
       <div class="w-fit p-2 my-2 bg-slate-200 dark:bg-slate-800 rounded-md self-center"><pre>{