Frontend: emails opmaken en versturen

api/__tests__/mock/mail_template.ts

@@ -3,20 +3,21 @@ 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],

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,22 +48,22 @@ 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",
+                    mail_subject: "Ivago is niet langs $(gebouw_naam) 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",
                 },
             ];
 
@@ -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,15 +137,15 @@ describe("Mail Template tests", () => {
                 {
                     id: 2,
                     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",
                 },
                 {
                     id: 3,
                     name: "Ivago",
-                    mail_subject: "Ivago is niet langs $(building) gekomen",
+                    mail_subject: "Ivago is niet langs $(gebouw_naam) gekomen",
                     content:
-                        "Ivago heeft $(garbage_type) niet meegenomen bij $(building)",
+                        "Ivago heeft de ingeplande container niet meegenomen bij $(gebouw_naam)",
                 },
             ];
             await runner.get({

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>
 

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";
@@ -186,7 +187,7 @@ const routes: any[] = [
         },
       },
       {
-        path: "/contact",
+        path: "/contact/:id?",
         name: "contact_syndicus",
         component: ContactSyndicus,
         meta: {
@@ -270,7 +271,7 @@ const routes: any[] = [
         },
       },
       {
-        path: "/template/nieuw",
+        path: "/sjabloon/nieuw/:id?",
         component: TemplateBuilder,
         name: "template_new",
         meta: {
@@ -283,6 +284,20 @@ const routes: any[] = [
           ) => superstudent || admin,
         },
       },
+      {
+        path: "/sjabloon",
+        component: TemplateOverview,
+        name: "template_overview",
+        meta: {
+          title: "Sjablonen",
+          auth: (
+            student: boolean,
+            superstudent: boolean,
+            syndicus: boolean,
+            admin: boolean,
+          ) => superstudent || admin,
+        },
+      },
       {
         path: "/:pathMatch(.*)*",
         component: PageNotFound,

web/src/types/Template.ts

@@ -0,0 +1,71 @@
+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";
+import router from "@/router";
+
+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,
+      },
+      {
+        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-delete",
+        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));
+  }
+
+  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 },
+    };
+  }
+}

web/src/views/building/BuildingScreen.vue

@@ -222,6 +222,7 @@ import DateRange from "@/components/filter/DateRange.vue";
 import { daysFromDate } from "@/assets/scripts/date";
 import SyndicusButtons from "@/components/building/SyndicusButtons.vue";
 import CardPopup from "@/components/popups/CardPopup.vue";
+import router from "@/router";
 
 const showRemovePopup = ref(false);
 
@@ -245,18 +246,16 @@ function getBuildingDescription(): string {
   return castedBuilding.description;
 }
 
+function mail() {
+  router.push({ name: "contact_syndicus", params: { id: building.value?.id } });
+}
+
 function call(number: string | undefined) {
   if (number) {
     location.href = "tel:" + number;
   }
 }
 
-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}`,