From 522f02466c62aa544dcb8362fbf70eb50f08f583 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Tue, 16 May 2023 05:43:55 +0200
Subject: [PATCH 01/11] feat: fixed routing and parsing

---
 web/src/router/index.ts                   |   2 +-
 web/src/views/building/BuildingScreen.vue |  15 ++--
 web/src/views/contact/ContactSyndicus.vue | 105 +++++++++++++---------
 web/src/views/contact/TemplateBuilder.vue |  19 ++++
 4 files changed, 89 insertions(+), 52 deletions(-)

diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index b121e688c..07f797347 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -184,7 +184,7 @@ const routes: any[] = [
         },
       },
       {
-        path: "/contact",
+        path: "/contact/:id",
         name: "contact_syndicus",
         component: ContactSyndicus,
         meta: {
diff --git a/web/src/views/building/BuildingScreen.vue b/web/src/views/building/BuildingScreen.vue
index da306cedc..c4bd13b9e 100644
--- a/web/src/views/building/BuildingScreen.vue
+++ b/web/src/views/building/BuildingScreen.vue
@@ -83,7 +83,14 @@
           <RoundedButton
             icon="mdi-mail"
             value="E-mail"
-            @click="mail(building?.syndicus?.user.email)"
+            @click="
+              () => {
+                router.push({
+                  name: 'contact_syndicus',
+                  params: { id: building?.id },
+                });
+              }
+            "
           />
         </div>
       </CardLayout>
@@ -207,12 +214,6 @@ function call(number: string | undefined) {
   }
 }
 
-function mail(address: string | undefined) {
-  if (address) {
-    location.href = "mailto:" + address;
-  }
-}
-
 function tomaps() {
   window.open(
     `https://maps.google.com/maps?q=${building.value?.address.number}+${building.value?.address.street},+${building.value?.address.city},+${building.value?.address.zip_code}`,
diff --git a/web/src/views/contact/ContactSyndicus.vue b/web/src/views/contact/ContactSyndicus.vue
index bd1adf3c3..deb4963f0 100644
--- a/web/src/views/contact/ContactSyndicus.vue
+++ b/web/src/views/contact/ContactSyndicus.vue
@@ -41,16 +41,17 @@
           </v-select>
         </v-col>
 
-        <v-col cols="3" class="flex-grow-0 flex-shrink-0 py-0 my-0">
+        <v-col cols="5" class="flex-grow-1 flex-shrink-0 py-0 my-0">
           <v-select
             label="Sjabloon"
             v-model="selected_template"
-            :items="templates"
+            :items="allTemplates"
             :item-value="'name'"
             :item-title="'name'"
             return-object
             prepend-inner-icon="mdi-list-box"
             :disabled="building === null"
+            @update:model-value="updateFields()"
           >
           </v-select>
         </v-col>
@@ -63,9 +64,9 @@
           class="flex-grow-1 flex-shrink-0 py-0 my-0"
         >
           <v-text-field
+            v-model="subject"
             prepend-inner-icon="mdi-text-short"
             label="Onderwerp"
-            :model-value="selected_template.subject"
           >
           </v-text-field>
         </v-col>
@@ -87,11 +88,7 @@
           style="min-width: 100px; max-width: 100%"
           class="flex-grow-1 flex-shrink-0 py-0 my-0"
         >
-          <v-textarea
-            rows="17"
-            label="Inhoud"
-            :model-value="selected_template.content"
-          ></v-textarea
+          <v-textarea v-model="content" rows="17" label="Inhoud"></v-textarea
         ></v-col>
       </v-row>
       <v-btn
@@ -99,6 +96,7 @@
         prepend-icon="mdi-send"
         variant="tonal"
         class="mb-6 ml-6"
+        @click="sendMail()"
         >Versturen</v-btn
       >
     </BorderCard>
@@ -106,47 +104,66 @@
 </template>
 
 <script lang="ts" setup>
-import Template from "@/components/models/Template";
-import { ref, computed, reactive, Ref } from "vue";
+import { ref, onMounted } from "vue";
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
 import BorderCard from "@/layouts/CardLayout.vue";
 import { tryOrAlertAsync } from "@/try";
-import { Result, BuildingQuery } from "@selab-2/groep-1-query";
+import {
+  Result,
+  BuildingQuery,
+  MailTemplateQuery,
+  MailQuery,
+} from "@selab-2/groep-1-query";
+import { parseTemplate } from "@/assets/scripts/templateParser";
+import { useRoute } from "vue-router";
 
-const building: Ref<Result<BuildingQuery> | null> = ref(null);
+const allTemplates = ref<Result<MailTemplateQuery>[]>([]);
+const selected_template = ref<Result<MailTemplateQuery>>();
 
-const buildings =
-  (await tryOrAlertAsync<Array<Result<BuildingQuery>>>(async () => {
-    return await new BuildingQuery().getAll({});
-  })) ?? [];
+const buildings = ref<Result<BuildingQuery>[]>();
+const building = ref<Result<BuildingQuery>>();
 
-const templates: Template[] = reactive([
-  { name: "Andere", subject: "", content: "" },
-  {
-    name: "Opmerking",
-    subject: computed(() => `Opmerking: ${building.value?.name}`),
-    content: computed(
-      () =>
-        `Beste ${building?.value?.syndicus?.user.first_name},\n\nWij hebben een opmerking ontvangen..\n\nMet vriendelijke groeten,\nDr Trottoir team`,
-    ),
-  },
-  {
-    name: "Klacht",
-    subject: computed(() => `Klacht: ${building.value?.name}`),
-    content: computed(
-      () =>
-        `Beste ${building?.value?.syndicus?.user.first_name},\n\nWij zijn ontevreden met..\n\nMet vriendelijke groeten,\nDr Trottoir team`,
-    ),
-  },
-  {
-    name: "Schade",
-    subject: computed(() => `Schade: ${building.value?.name}`),
-    content: computed(
-      () =>
-        `Beste ${building?.value?.syndicus?.user.first_name},Wij hebben schade vastgesteld..\n\nMet vriendelijke groeten,\nDr Trottoir team`,
-    ),
-  },
-]);
+const subject = ref<string>("");
+const content = ref<string>("");
 
-const selected_template = ref<Template>(templates[0]);
+const route = useRoute();
+const buildingId: number = Number(route.params.id);
+
+onMounted(() => {
+  tryOrAlertAsync(async () => {
+    allTemplates.value = await new MailTemplateQuery().getAll();
+    console.log(allTemplates.value);
+  });
+
+  tryOrAlertAsync(async () => {
+    buildings.value = await new BuildingQuery().getAll();
+  });
+
+  tryOrAlertAsync(async () => {
+    building.value = await new BuildingQuery().getOne(buildingId);
+  });
+});
+
+function parseString(str: string | undefined): string {
+  if (building.value && str) {
+    return parseTemplate(building.value, str);
+  }
+  return "";
+}
+function updateFields() {
+  subject.value = parseString(selected_template?.value?.mail_subject);
+  content.value = parseString(selected_template?.value?.content);
+}
+function sendMail() {
+  tryOrAlertAsync(async () => {
+    await new MailQuery().createOne({
+      to: building.value?.syndicus.user.email,
+      subject: subject.value,
+      content: content.value,
+    });
+
+    subject.value = "";
+    content.value = "";
+  });
+}
 </script>
diff --git a/web/src/views/contact/TemplateBuilder.vue b/web/src/views/contact/TemplateBuilder.vue
index b059d0a0a..bc15ccf4f 100644
--- a/web/src/views/contact/TemplateBuilder.vue
+++ b/web/src/views/contact/TemplateBuilder.vue
@@ -24,6 +24,7 @@
               style="min-width: 100px; max-width: 100%"
               class="flex-grow-1 flex-shrink-0 py-0 my-0 mx-3"
               ><v-text-field
+                v-model="templateName"
                 prepend-inner-icon="mdi-file-document-outline"
                 label="Template naam"
               >
@@ -64,6 +65,7 @@
             prepend-icon="mdi-content-save"
             variant="tonal"
             class="mb-6 ml-6"
+            @click="saveTemplate()"
             >Opslaan</v-btn
           >
         </BorderCard> </v-col
@@ -96,7 +98,10 @@
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
 import BorderCard from "@/layouts/CardLayout.vue";
 import { ref } from "vue";
+import { MailTemplateQuery } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
 
+const templateName = ref<string>("");
 const subject = ref<string>("");
 const body = ref<string>("");
 
@@ -111,6 +116,20 @@ const variables: { name: string; description: string }[] = [
   { name: "$(gebouw_adres)", description: "Adres van het gebouw" },
   { name: "$(ivago_id)", description: "Ivago ID van het gebouw" },
 ];
+
+function saveTemplate() {
+  tryOrAlertAsync(async () => {
+    await new MailTemplateQuery().createOne({
+      name: templateName.value,
+      mail_subject: subject.value,
+      content: body.value,
+    });
+
+    templateName.value = "";
+    subject.value = "";
+    body.value = "";
+  });
+}
 </script>
 
 <style scoped>

From c7625affce9f2b19dc7cfe06e967682e8b081ce5 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Tue, 16 May 2023 05:46:32 +0200
Subject: [PATCH 02/11] fix: lint

---
 web/src/views/contact/ContactSyndicus.vue | 1 -
 1 file changed, 1 deletion(-)

diff --git a/web/src/views/contact/ContactSyndicus.vue b/web/src/views/contact/ContactSyndicus.vue
index deb4963f0..5c1210a1a 100644
--- a/web/src/views/contact/ContactSyndicus.vue
+++ b/web/src/views/contact/ContactSyndicus.vue
@@ -132,7 +132,6 @@ const buildingId: number = Number(route.params.id);
 onMounted(() => {
   tryOrAlertAsync(async () => {
     allTemplates.value = await new MailTemplateQuery().getAll();
-    console.log(allTemplates.value);
   });
 
   tryOrAlertAsync(async () => {

From ca435ddc1371ba00d33d63890d5d6dfa420870a2 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Tue, 16 May 2023 06:16:21 +0200
Subject: [PATCH 03/11] feat: extra admin table for overview of the email
 templates

---
 web/src/layouts/MainLayout.vue       |  6 +++++
 web/src/router/index.ts              | 17 +++++++++++-
 web/src/types/Template.ts            | 40 ++++++++++++++++++++++++++++
 web/src/views/dashboard/Template.vue | 27 +++++++++++++++++++
 4 files changed, 89 insertions(+), 1 deletion(-)
 create mode 100644 web/src/types/Template.ts
 create mode 100644 web/src/views/dashboard/Template.vue

diff --git a/web/src/layouts/MainLayout.vue b/web/src/layouts/MainLayout.vue
index 52978f004..a75b67eb6 100644
--- a/web/src/layouts/MainLayout.vue
+++ b/web/src/layouts/MainLayout.vue
@@ -136,6 +136,12 @@
               title="Rondes"
               value="rounds"
             ></v-list-item>
+            <v-list-item
+              :to="{ name: 'template_overview' }"
+              prepend-icon="mdi-email"
+              title="Templates"
+              value="templates"
+            ></v-list-item>
           </div>
         </v-list>
 
diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index 07f797347..d1c3854d4 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -14,6 +14,7 @@ import BuildingScreen from "@/views/building/BuildingScreen.vue";
 import BuildingFollowup from "@/views/building/BuildingFollowup.vue";
 import GarbageMaker from "@/views/building/GarbageMaker.vue";
 import UserOverview from "@/views/dashboard/Users.vue";
+import TemplateOverview from "@/views/dashboard/Template.vue";
 import BuildingOverview from "@/views/dashboard/Buildings.vue";
 import RoundOverview from "@/views/dashboard/Round.vue";
 import ContactSyndicus from "@/views/contact/ContactSyndicus.vue";
@@ -184,7 +185,7 @@ const routes: any[] = [
         },
       },
       {
-        path: "/contact/:id",
+        path: "/contact/:id?",
         name: "contact_syndicus",
         component: ContactSyndicus,
         meta: {
@@ -281,6 +282,20 @@ const routes: any[] = [
           ) => superstudent || admin,
         },
       },
+      {
+        path: "/template",
+        component: TemplateOverview,
+        name: "template_overview",
+        meta: {
+          title: "Templates",
+          auth: (
+            student: boolean,
+            superstudent: boolean,
+            syndicus: boolean,
+            admin: boolean,
+          ) => superstudent || admin,
+        },
+      },
     ],
   },
 ];
diff --git a/web/src/types/Template.ts b/web/src/types/Template.ts
new file mode 100644
index 000000000..76a9e375f
--- /dev/null
+++ b/web/src/types/Template.ts
@@ -0,0 +1,40 @@
+import { Header } from "@/components/table/Header";
+import { TableEntity } from "@/components/table/TableEntity";
+import { RowType } from "@/components/table/RowType";
+import { MailTemplateQuery, Result } from "@selab-2/groep-1-query";
+
+export class Template implements TableEntity<Result<MailTemplateQuery>> {
+  headers(): Array<Header<Result<MailTemplateQuery>>> {
+    return Template.headers();
+  }
+
+  static headers(): Array<Header<Result<MailTemplateQuery>>> {
+    return [
+      {
+        id: 0,
+        name: "Template naam",
+        fit: false,
+        get: (e: Result<MailTemplateQuery>) => e.name,
+        type: RowType.TEXT,
+        sortable: true,
+      },
+    ].map((e) => new Header<Result<MailTemplateQuery>>(e));
+  }
+
+  route(item: Result<MailTemplateQuery>): {
+    name: string;
+    params: { id: number };
+  } {
+    return Template.route(item);
+  }
+
+  static route(item: Result<MailTemplateQuery>): {
+    name: string;
+    params: { id: number };
+  } {
+    return {
+      name: "building_id",
+      params: { id: item.id },
+    };
+  }
+}
diff --git a/web/src/views/dashboard/Template.vue b/web/src/views/dashboard/Template.vue
new file mode 100644
index 000000000..abef5791c
--- /dev/null
+++ b/web/src/views/dashboard/Template.vue
@@ -0,0 +1,27 @@
+<template>
+  <div class="d-flex flex-row-reverse">
+    <v-btn
+      v-if="useAuthStore().auth?.admin"
+      prepend-icon="mdi-plus"
+      color="primary"
+      class="mr-3 text-none"
+      :to="{ name: 'template_new' }"
+    >
+      Nieuwe template
+    </v-btn>
+  </div>
+  <Table :entries="templates" :headers="Template.headers()"></Table>
+</template>
+
+<script setup lang="ts">
+import Table from "@/components/table/Table.vue";
+import { useAuthStore } from "@/stores/auth";
+import { Template } from "@/types/Template";
+import { MailTemplateQuery, Result } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
+
+const templates: Array<Result<MailTemplateQuery>> =
+  (await tryOrAlertAsync<Array<Result<MailTemplateQuery>>>(async () => {
+    return await new MailTemplateQuery().getAll({});
+  })) ?? [];
+</script>

From a8e57fb8195c8e12c0c8a6f4e0603b837eb72a3c Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Tue, 16 May 2023 16:39:06 +0200
Subject: [PATCH 04/11] feat: possible to delete templates now

---
 web/src/types/Template.ts          | 19 ++++++++
 web/src/views/contact/Template.vue | 76 ++++++++++++++++++++++++++++++
 2 files changed, 95 insertions(+)
 create mode 100644 web/src/views/contact/Template.vue

diff --git a/web/src/types/Template.ts b/web/src/types/Template.ts
index 76a9e375f..822fd1701 100644
--- a/web/src/types/Template.ts
+++ b/web/src/types/Template.ts
@@ -2,6 +2,7 @@ import { Header } from "@/components/table/Header";
 import { TableEntity } from "@/components/table/TableEntity";
 import { RowType } from "@/components/table/RowType";
 import { MailTemplateQuery, Result } from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
 
 export class Template implements TableEntity<Result<MailTemplateQuery>> {
   headers(): Array<Header<Result<MailTemplateQuery>>> {
@@ -18,6 +19,24 @@ export class Template implements TableEntity<Result<MailTemplateQuery>> {
         type: RowType.TEXT,
         sortable: true,
       },
+      {
+        id: 4,
+        name: "",
+        fit: true,
+        get: () => "mdi-close",
+        type: RowType.ICONBUTTON,
+        sortable: false,
+        onClick: (
+          e: Result<MailTemplateQuery>,
+          list: Array<Result<MailTemplateQuery> | null>,
+        ) => {
+          tryOrAlertAsync(async () => {
+            await new MailTemplateQuery().deleteOne({ id: e.id });
+            const index = list.findIndex((x) => x === e);
+            list[index] = null;
+          });
+        },
+      },
     ].map((e) => new Header<Result<MailTemplateQuery>>(e));
   }
 
diff --git a/web/src/views/contact/Template.vue b/web/src/views/contact/Template.vue
new file mode 100644
index 000000000..c140365c1
--- /dev/null
+++ b/web/src/views/contact/Template.vue
@@ -0,0 +1,76 @@
+<template>
+  <HFillWrapper margin="mx-4">
+    <BorderCard>
+      <template v-slot:title
+        ><div class="ml-2">Sjabloon: {{ template?.name }}</div></template
+      >
+
+      <template v-slot:append>
+        <div class="d-flex">
+          <v-btn class="text-none mr-1" prepend-icon="mdi-pencil" @click="">
+            {{ "Bewerk template" }}
+          </v-btn>
+          <v-btn class="text-none ml-1" prepend-icon="mdi-close" @click="">
+            {{ "Verwijder template" }}
+          </v-btn>
+        </div>
+      </template>
+      <v-row class="py-0 my-0 mx-3">
+        <v-col
+          cols="1"
+          style="min-width: 100px; max-width: 100%"
+          class="flex-grow-1 flex-shrink-0 py-0 my-0"
+        >
+          <v-text-field
+            readonly
+            prepend-inner-icon="mdi-text-short"
+            label="Template onderwerp"
+            :model-value="template?.mail_subject"
+          >
+          </v-text-field>
+        </v-col>
+      </v-row>
+
+      <v-row class="py-0 my-0 mx-3"
+        ><v-col
+          cols="1"
+          style="min-width: 100px; max-width: 100%"
+          class="flex-grow-1 flex-shrink-0 py-0 my-0"
+        >
+          <v-textarea
+            rows="17"
+            readonly
+            label="Template inhoud"
+            prepend-inner-icon="mdi-text"
+            :model-value="template?.content"
+          ></v-textarea
+        ></v-col>
+      </v-row>
+    </BorderCard>
+  </HFillWrapper>
+</template>
+
+<script lang="ts" setup>
+import HFillWrapper from "@/layouts/HFillWrapper.vue";
+import BorderCard from "@/layouts/CardLayout.vue";
+import { ref, onMounted } from "vue";
+import {
+  Result,
+  MailTemplateQuery,
+  BuildingQuery,
+} from "@selab-2/groep-1-query";
+import { tryOrAlertAsync } from "@/try";
+import { useRoute } from "vue-router";
+
+const route = useRoute();
+const templateId: number = Number(route.params.id);
+const template = ref<Result<MailTemplateQuery>>();
+
+const exampleBuilding = ref<Result<BuildingQuery>>();
+
+onMounted(() => {
+  tryOrAlertAsync(async () => {
+    template.value = await new MailTemplateQuery().getOne(templateId);
+  });
+});
+</script>

From 86257018abb4e1eae9bc1f52b36f83c6e781975c Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Tue, 16 May 2023 16:58:51 +0200
Subject: [PATCH 05/11] feat: now able to patch templates aswell

---
 web/src/router/index.ts                   |  6 +-
 web/src/types/Template.ts                 | 14 ++++-
 web/src/views/contact/Template.vue        | 76 -----------------------
 web/src/views/contact/TemplateBuilder.vue | 50 ++++++++++++---
 4 files changed, 56 insertions(+), 90 deletions(-)
 delete mode 100644 web/src/views/contact/Template.vue

diff --git a/web/src/router/index.ts b/web/src/router/index.ts
index d1c3854d4..22b2acc27 100644
--- a/web/src/router/index.ts
+++ b/web/src/router/index.ts
@@ -269,7 +269,7 @@ const routes: any[] = [
         },
       },
       {
-        path: "/template/nieuw",
+        path: "/sjabloon/nieuw/:id?",
         component: TemplateBuilder,
         name: "template_new",
         meta: {
@@ -283,11 +283,11 @@ const routes: any[] = [
         },
       },
       {
-        path: "/template",
+        path: "/sjabloon",
         component: TemplateOverview,
         name: "template_overview",
         meta: {
-          title: "Templates",
+          title: "Sjablonen",
           auth: (
             student: boolean,
             superstudent: boolean,
diff --git a/web/src/types/Template.ts b/web/src/types/Template.ts
index 822fd1701..9c01a72c2 100644
--- a/web/src/types/Template.ts
+++ b/web/src/types/Template.ts
@@ -3,6 +3,7 @@ import { TableEntity } from "@/components/table/TableEntity";
 import { RowType } from "@/components/table/RowType";
 import { MailTemplateQuery, Result } from "@selab-2/groep-1-query";
 import { tryOrAlertAsync } from "@/try";
+import router from "@/router";
 
 export class Template implements TableEntity<Result<MailTemplateQuery>> {
   headers(): Array<Header<Result<MailTemplateQuery>>> {
@@ -20,7 +21,18 @@ export class Template implements TableEntity<Result<MailTemplateQuery>> {
         sortable: true,
       },
       {
-        id: 4,
+        id: 1,
+        name: "",
+        fit: true,
+        get: () => "mdi-pencil",
+        type: RowType.ICONBUTTON,
+        sortable: false,
+        onClick: (e: Result<MailTemplateQuery>) => {
+          router.push({ name: "template_new", params: { id: e.id } });
+        },
+      },
+      {
+        id: 2,
         name: "",
         fit: true,
         get: () => "mdi-close",
diff --git a/web/src/views/contact/Template.vue b/web/src/views/contact/Template.vue
deleted file mode 100644
index c140365c1..000000000
--- a/web/src/views/contact/Template.vue
+++ /dev/null
@@ -1,76 +0,0 @@
-<template>
-  <HFillWrapper margin="mx-4">
-    <BorderCard>
-      <template v-slot:title
-        ><div class="ml-2">Sjabloon: {{ template?.name }}</div></template
-      >
-
-      <template v-slot:append>
-        <div class="d-flex">
-          <v-btn class="text-none mr-1" prepend-icon="mdi-pencil" @click="">
-            {{ "Bewerk template" }}
-          </v-btn>
-          <v-btn class="text-none ml-1" prepend-icon="mdi-close" @click="">
-            {{ "Verwijder template" }}
-          </v-btn>
-        </div>
-      </template>
-      <v-row class="py-0 my-0 mx-3">
-        <v-col
-          cols="1"
-          style="min-width: 100px; max-width: 100%"
-          class="flex-grow-1 flex-shrink-0 py-0 my-0"
-        >
-          <v-text-field
-            readonly
-            prepend-inner-icon="mdi-text-short"
-            label="Template onderwerp"
-            :model-value="template?.mail_subject"
-          >
-          </v-text-field>
-        </v-col>
-      </v-row>
-
-      <v-row class="py-0 my-0 mx-3"
-        ><v-col
-          cols="1"
-          style="min-width: 100px; max-width: 100%"
-          class="flex-grow-1 flex-shrink-0 py-0 my-0"
-        >
-          <v-textarea
-            rows="17"
-            readonly
-            label="Template inhoud"
-            prepend-inner-icon="mdi-text"
-            :model-value="template?.content"
-          ></v-textarea
-        ></v-col>
-      </v-row>
-    </BorderCard>
-  </HFillWrapper>
-</template>
-
-<script lang="ts" setup>
-import HFillWrapper from "@/layouts/HFillWrapper.vue";
-import BorderCard from "@/layouts/CardLayout.vue";
-import { ref, onMounted } from "vue";
-import {
-  Result,
-  MailTemplateQuery,
-  BuildingQuery,
-} from "@selab-2/groep-1-query";
-import { tryOrAlertAsync } from "@/try";
-import { useRoute } from "vue-router";
-
-const route = useRoute();
-const templateId: number = Number(route.params.id);
-const template = ref<Result<MailTemplateQuery>>();
-
-const exampleBuilding = ref<Result<BuildingQuery>>();
-
-onMounted(() => {
-  tryOrAlertAsync(async () => {
-    template.value = await new MailTemplateQuery().getOne(templateId);
-  });
-});
-</script>
diff --git a/web/src/views/contact/TemplateBuilder.vue b/web/src/views/contact/TemplateBuilder.vue
index bc15ccf4f..80e8497e3 100644
--- a/web/src/views/contact/TemplateBuilder.vue
+++ b/web/src/views/contact/TemplateBuilder.vue
@@ -98,13 +98,28 @@
 import HFillWrapper from "@/layouts/HFillWrapper.vue";
 import BorderCard from "@/layouts/CardLayout.vue";
 import { ref } from "vue";
-import { MailTemplateQuery } from "@selab-2/groep-1-query";
+import { Result, MailTemplateQuery } from "@selab-2/groep-1-query";
 import { tryOrAlertAsync } from "@/try";
+import { useRoute } from "vue-router";
 
 const templateName = ref<string>("");
 const subject = ref<string>("");
 const body = ref<string>("");
 
+const route = useRoute();
+const templateId: number = Number(route.params.id);
+
+if (templateId) {
+  tryOrAlertAsync(async () => {
+    const thisTemplate: Result<MailTemplateQuery> =
+      await new MailTemplateQuery().getOne(templateId);
+
+    templateName.value = thisTemplate.name;
+    subject.value = thisTemplate.mail_subject;
+    body.value = thisTemplate.content;
+  });
+}
+
 const variables: { name: string; description: string }[] = [
   { name: "$(syndicus_voornaam)", description: "Voornaam van een syndicus" },
   {
@@ -118,17 +133,32 @@ const variables: { name: string; description: string }[] = [
 ];
 
 function saveTemplate() {
-  tryOrAlertAsync(async () => {
-    await new MailTemplateQuery().createOne({
-      name: templateName.value,
-      mail_subject: subject.value,
-      content: body.value,
+  if (!templateId) {
+    tryOrAlertAsync(async () => {
+      await new MailTemplateQuery().createOne({
+        name: templateName.value,
+        mail_subject: subject.value,
+        content: body.value,
+      });
+    });
+    clearForm();
+  } else {
+    tryOrAlertAsync(async () => {
+      await new MailTemplateQuery().updateOne({
+        id: templateId,
+        name: templateName.value,
+        mail_subject: subject.value,
+        content: body.value,
+      });
     });
+    clearForm();
+  }
+}
 
-    templateName.value = "";
-    subject.value = "";
-    body.value = "";
-  });
+function clearForm() {
+  templateName.value = "";
+  subject.value = "";
+  body.value = "";
 }
 </script>
 

From f5a5d784efcc0c6adb9e51a6124dadb73c6c025f Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Tue, 16 May 2023 17:11:56 +0200
Subject: [PATCH 06/11] fix: removed file uploader (temporary?)

---
 web/src/views/contact/ContactSyndicus.vue | 11 -----------
 1 file changed, 11 deletions(-)

diff --git a/web/src/views/contact/ContactSyndicus.vue b/web/src/views/contact/ContactSyndicus.vue
index 5c1210a1a..714107485 100644
--- a/web/src/views/contact/ContactSyndicus.vue
+++ b/web/src/views/contact/ContactSyndicus.vue
@@ -71,17 +71,6 @@
           </v-text-field>
         </v-col>
       </v-row>
-      <v-row class="py-0 my-0 mx-3"
-        ><v-col
-          cols="1"
-          style="min-width: 100px; max-width: 100%"
-          class="flex-grow-1 flex-shrink-0 py-0 my-0"
-          ><v-file-input
-            prepend-icon=""
-            prepend-inner-icon="mdi-upload"
-            label="Bestanden"
-          ></v-file-input></v-col
-      ></v-row>
       <v-row class="py-0 my-0 mx-3"
         ><v-col
           cols="1"

From 699dcbdabf1adbb4e5152680e14b66ceb4a7f698 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Wed, 17 May 2023 23:05:53 +0200
Subject: [PATCH 07/11] fix: changed icon

---
 web/src/types/Template.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/web/src/types/Template.ts b/web/src/types/Template.ts
index 9c01a72c2..596233fb9 100644
--- a/web/src/types/Template.ts
+++ b/web/src/types/Template.ts
@@ -35,7 +35,7 @@ export class Template implements TableEntity<Result<MailTemplateQuery>> {
         id: 2,
         name: "",
         fit: true,
-        get: () => "mdi-close",
+        get: () => "mdi-delete",
         type: RowType.ICONBUTTON,
         sortable: false,
         onClick: (

From fd824fc4849fe69a71ba25c3a96529579ba20136 Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Fri, 19 May 2023 16:31:36 +0200
Subject: [PATCH 08/11] fix: outdated mockdata

---
 api/__tests__/mock/mail_template.ts | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/api/__tests__/mock/mail_template.ts b/api/__tests__/mock/mail_template.ts
index 7313c3bff..849b51a99 100644
--- a/api/__tests__/mock/mail_template.ts
+++ b/api/__tests__/mock/mail_template.ts
@@ -3,20 +3,20 @@ import { prisma } from "./prisma";
 export async function initialiseMailTemplate() {
     const mailTemplate1 = {
         name: "Vuilnis",
-        mail_subject: "Vuilnis in $(building)",
-        content: "In $(building) ligt er vuilnis op de grond",
+        mail_subject: "Vuilnis in $(gebouw_naam)",
+        content: "In $(gebouw_naam) ligt er vuilnis op de grond",
     };
 
     const mailTemplate2 = {
         name: "Code",
-        mail_subject: "Code werkt niet in $(building)",
-        content: "In $(building) werkt $(code) niet meer",
+        mail_subject: "Code werkt niet in $(gebouw_naam)",
+        content: "In $(gebouw_naam) werkt de code niet meer",
     };
 
     const mailTemplate3 = {
         name: "Ivago",
-        mail_subject: "Ivago is niet langs $(building) gekomen",
-        content: "Ivago heeft $(garbage_type) niet meegenomen bij $(building)",
+        mail_subject: "Ivago is niet langs $(gebouw_naam) gekomen",
+        content: "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
     };
     await prisma.mailTemplate.createMany({
         data: [mailTemplate1, mailTemplate2, mailTemplate3],

From 9b9f458138efe87ec9d3a437c91be4740e0d739e Mon Sep 17 00:00:00 2001
From: arne <vanheule.arne@ugent.be>
Date: Fri, 19 May 2023 16:34:37 +0200
Subject: [PATCH 09/11] chore: lint

---
 api/__tests__/mock/mail_template.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/api/__tests__/mock/mail_template.ts b/api/__tests__/mock/mail_template.ts
index 849b51a99..a08da1af5 100644
--- a/api/__tests__/mock/mail_template.ts
+++ b/api/__tests__/mock/mail_template.ts
@@ -16,7 +16,8 @@ export async function initialiseMailTemplate() {
     const mailTemplate3 = {
         name: "Ivago",
         mail_subject: "Ivago is niet langs $(gebouw_naam) gekomen",
-        content: "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
+        content:
+            "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
     };
     await prisma.mailTemplate.createMany({
         data: [mailTemplate1, mailTemplate2, mailTemplate3],

From 10c4e47b35ec9489b6d5740e85e752a85823001f Mon Sep 17 00:00:00 2001
From: Ludovic <ludovic.verstraete@ugent.be>
Date: Fri, 19 May 2023 16:45:00 +0200
Subject: [PATCH 10/11] chore: change tests

---
 api/__tests__/routes/mail_template.test.ts | 30 +++++++++++-----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/api/__tests__/routes/mail_template.test.ts b/api/__tests__/routes/mail_template.test.ts
index 9dc68f14a..a2946d4e8 100644
--- a/api/__tests__/routes/mail_template.test.ts
+++ b/api/__tests__/routes/mail_template.test.ts
@@ -34,8 +34,8 @@ describe("Mail Template tests", () => {
         test("POST /mail_template", async () => {
             const newMailTemplate = {
                 name: "new mail template",
-                mail_subject: "new mail template subject $(building)",
-                content: "new content for $(building)",
+                mail_subject: "new mail template subject $(gebouw_naam)",
+                content: "new content for $(gebouw_naam)",
             };
 
             await runner.post({
@@ -48,20 +48,20 @@ describe("Mail Template tests", () => {
         test("GET /mail_template", async () => {
             const expected = [
                 {
-                    content: "In $(building) ligt er vuilnis op de grond",
+                    content: "In $(gebouw_naam) ligt er vuilnis op de grond",
                     id: 1,
-                    mail_subject: "Vuilnis in $(building)",
+                    mail_subject: "Vuilnis in $(gebouw_naam)",
                     name: "Vuilnis",
                 },
                 {
-                    content: "In $(building) werkt $(code) niet meer",
+                    content: "In $(gebouw_naam) werkt de code niet meer",
                     id: 2,
-                    mail_subject: "Code werkt niet in $(building)",
+                    mail_subject: "Code werkt niet in $(gebouw_naam)",
                     name: "Code",
                 },
                 {
                     content:
-                        "Ivago heeft $(garbage_type) niet meegenomen bij $(building)",
+                        "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
                     id: 3,
                     mail_subject: "Ivago is niet langs $(building) gekomen",
                     name: "Ivago",
@@ -74,16 +74,16 @@ describe("Mail Template tests", () => {
         test("GET /mail_template with filter", async () => {
             const expected = [
                 {
-                    content: "In $(building) werkt $(code) niet meer",
+                    content: "In $(gebouw_naam) werkt de code niet meer",
                     id: 2,
-                    mail_subject: "Code werkt niet in $(building)",
+                    mail_subject: "Code werkt niet in $(gebouw_naam)",
                     name: "Code",
                 },
                 {
                     content:
-                        "Ivago heeft $(garbage_type) niet meegenomen bij $(building)",
+                        "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
                     id: 3,
-                    mail_subject: "Ivago is niet langs $(building) gekomen",
+                    mail_subject: "Ivago is niet langs $(gebouw_naam) gekomen",
                     name: "Ivago",
                 },
             ];
@@ -99,8 +99,8 @@ describe("Mail Template tests", () => {
                 {
                     id: 1,
                     name: "Vuilnis",
-                    mail_subject: "Vuilnis in $(building)",
-                    content: "In $(building) ligt er vuilnis op de grond",
+                    mail_subject: "Vuilnis in $(gebouw_naam)",
+                    content: "In $(gebouw_naam) ligt er vuilnis op de grond",
                 },
             ];
 
@@ -138,14 +138,14 @@ describe("Mail Template tests", () => {
                     id: 2,
                     name: "Code",
                     mail_subject: "Code werkt niet in $(building)",
-                    content: "In $(building) werkt $(code) niet meer",
+                    content: "In $(gebouw_naam) werkt de code niet meer",
                 },
                 {
                     id: 3,
                     name: "Ivago",
                     mail_subject: "Ivago is niet langs $(building) gekomen",
                     content:
-                        "Ivago heeft $(garbage_type) niet meegenomen bij $(building)",
+                        "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
                 },
             ];
             await runner.get({

From cf8b9e89d50530c11a9c314fd9b8383e92b43d54 Mon Sep 17 00:00:00 2001
From: Ludovic <ludovic.verstraete@ugent.be>
Date: Fri, 19 May 2023 16:54:46 +0200
Subject: [PATCH 11/11] fix: var

---
 api/__tests__/routes/mail_template.test.ts | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/api/__tests__/routes/mail_template.test.ts b/api/__tests__/routes/mail_template.test.ts
index a2946d4e8..a2fa6e804 100644
--- a/api/__tests__/routes/mail_template.test.ts
+++ b/api/__tests__/routes/mail_template.test.ts
@@ -63,7 +63,7 @@ describe("Mail Template tests", () => {
                     content:
                         "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
                     id: 3,
-                    mail_subject: "Ivago is niet langs $(building) gekomen",
+                    mail_subject: "Ivago is niet langs $(gebouw_naam) gekomen",
                     name: "Ivago",
                 },
             ];
@@ -118,8 +118,8 @@ describe("Mail Template tests", () => {
             const expected = {
                 id: 1,
                 name: "Updated name mail template",
-                mail_subject: "Vuilnis in $(building)",
-                content: "In $(building) ligt er vuilnis op de grond",
+                mail_subject: "Vuilnis in $(gebouw_naam)",
+                content: "In $(gebouw_naam) ligt er vuilnis op de grond",
             };
 
             await runner.patch({
@@ -137,13 +137,13 @@ describe("Mail Template tests", () => {
                 {
                     id: 2,
                     name: "Code",
-                    mail_subject: "Code werkt niet in $(building)",
+                    mail_subject: "Code werkt niet in $(gebouw_naam)",
                     content: "In $(gebouw_naam) werkt de code niet meer",
                 },
                 {
                     id: 3,
                     name: "Ivago",
-                    mail_subject: "Ivago is niet langs $(building) gekomen",
+                    mail_subject: "Ivago is niet langs $(gebouw_naam) gekomen",
                     content:
                         "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
                 },