From 09fb9b0e9bfa7e8623c99b39f06b453ece8d854b Mon Sep 17 00:00:00 2001
From: Christoph Walther <christoph.walther.1@stud.htwk-leipzig.de>
Date: Tue, 31 Oct 2023 22:37:47 +0100
Subject: [PATCH] 35 add template dialog component + info button

---
 .../src/components/ModuleTemplateDialog.vue   | 49 +++++++++++++++++++
 frontend/src/components/RenameModules.vue     | 31 ++----------
 .../components/editCalendar/EditModules.vue   |  7 ++-
 3 files changed, 58 insertions(+), 29 deletions(-)
 create mode 100644 frontend/src/components/ModuleTemplateDialog.vue

diff --git a/frontend/src/components/ModuleTemplateDialog.vue b/frontend/src/components/ModuleTemplateDialog.vue
new file mode 100644
index 0000000..cdb764b
--- /dev/null
+++ b/frontend/src/components/ModuleTemplateDialog.vue
@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { Ref, ref } from "vue";
+
+const helpVisible: Ref<boolean> = ref(false);
+
+const placeholders = ref([
+  { placeholder: "%t", description: "Event Type", examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung" },
+  { placeholder: "%p", description: "Mandatory", examples: "w = optional, p = mandatory" },
+]);
+</script>
+
+<template>
+  <Button 
+    icon="pi pi-info"
+    class="m-2 small-button"
+    severity="help"
+    rounded
+    outlined
+    size="large"
+    aria-label="Help"
+    @click="helpVisible = true" />
+  <Dialog
+    v-model:visible="helpVisible"
+    header="Module placeholders" 
+  >
+    <p>
+      Here you can rename your modules to your liking. This will be the name
+      of the event in your calendar.
+    </p>
+    <p>
+      You can use the following placeholders in your module names:
+    </p>
+    <DataTable
+      :value="placeholders"
+    > 
+      <Column field="placeholder" header="Placeholder"></Column>
+      <Column field="description" header="Description"></Column>
+      <Column field="examples" header="Examples"></Column>
+    </DataTable>
+  </Dialog>
+</template>
+
+<style scoped>
+  .small-button.p-button {
+    width: 2rem;
+    height: 2rem;
+    padding: 0;
+  }
+</style>
diff --git a/frontend/src/components/RenameModules.vue b/frontend/src/components/RenameModules.vue
index af333bf..10f3f0b 100644
--- a/frontend/src/components/RenameModules.vue
+++ b/frontend/src/components/RenameModules.vue
@@ -3,7 +3,8 @@ import moduleStore from "../store/moduleStore.ts";
 import { createIndividualFeed } from "../api/createFeed.ts";
 import router from "../router";
 import tokenStore from "../store/tokenStore.ts";
-import { Ref, ref } from "vue";
+import { ref } from "vue";
+import ModuleTemplateDialog from "./ModuleTemplateDialog.vue";
 
 const tableData = ref(
   moduleStore().modules.map((module) => {
@@ -19,13 +20,6 @@ const columns = ref([
   { field: "Module", header: "Module" },
 ]);
 
-const helpVisible: Ref<boolean> = ref(false);
-
-const placeholders = ref([
-  { placeholder: "%t", description: "Event Type", examples: "V = Vorlesung, S = Seminar, P = Praktikum/Prüfung" },
-  { placeholder: "%p", description: "Mandatory", examples: "w = optional, p = mandatory" },
-]);
-
 async function finalStep() {
   const token: string = await createIndividualFeed(moduleStore().modules);
   tokenStore().setToken(token);
@@ -37,26 +31,7 @@ async function finalStep() {
   <div class="flex flex-column">
     <div class="flex align-items-center justify-content-center h-4rem m-2">
       <h3>Rename your selected Modules to your liking.</h3>
-        <i class="shadow-3 hover:shadow-8 pi pi-info-circle m-2" style="font-size: 1.5rem; color: orange" @click="helpVisible = true"></i>
-      <Dialog
-        v-model:visible="helpVisible"
-        header="Module placeholders" 
-      >
-        <p>
-          Here you can rename your modules to your liking. This will be the name
-          of the event in your calendar.
-        </p>
-        <p>
-          You can use the following placeholders in your module names:
-        </p>
-        <DataTable
-          :value="placeholders"
-        > 
-          <Column field="placeholder" header="Placeholder"></Column>
-          <Column field="description" header="Description"></Column>
-          <Column field="examples" header="Examples"></Column>
-        </DataTable>
-      </Dialog>
+      <ModuleTemplateDialog />
     </div>
     <div class="card flex align-items-center justify-content-center m-2">
       <DataTable
diff --git a/frontend/src/components/editCalendar/EditModules.vue b/frontend/src/components/editCalendar/EditModules.vue
index ee2badf..8d234b5 100644
--- a/frontend/src/components/editCalendar/EditModules.vue
+++ b/frontend/src/components/editCalendar/EditModules.vue
@@ -6,6 +6,7 @@ import { fetchAllModules } from "../../api/fetchCourse";
 import { saveIndividualFeed } from "../../api/createFeed";
 import tokenStore from "../../store/tokenStore";
 import router from "../../router";
+import ModuleTemplateDialog from "../ModuleTemplateDialog.vue";
 
 const tableData = computed(() =>
   moduleStore().modules.map((module: Module) => {
@@ -47,8 +48,12 @@ async function finalStep() {
 
 <template>
   <div class="flex flex-column card-container mx-8 mt-2">
+    <div class="flex align-items-center justify-content-center h-4rem m-2">
+      <h3>Rename your selected Modules to your liking.</h3>
+      <ModuleTemplateDialog />
+    </div>
     <div
-      class="flex align-items-center justify-content-center border-round m-2"
+      class="card flex align-items-center justify-content-center border-round m-2"
     >
       <DataTable
         :value="tableData"