From 6f166c7827ec993d09f8c2de9837f14167fe9dc7 Mon Sep 17 00:00:00 2001
From: Mirna Rodic <77114015+mirrodi@users.noreply.github.com>
Date: Fri, 1 Mar 2024 07:33:14 +0100
Subject: [PATCH] 395 Implementierung SST-Management Steuerung Ersterfassung
 (Frontend) (#28)

* :tada: Frontend API fro creating Schnittstelle

* :lipstick: Implemented dialog

* :lipstick: Added dialog to frontpage

* :children_crossing: Refreshing page after creating Schnittstelle

* :bug: Fixed deleting added Zuordnungen

* :bug: Fixed HTML form

* :bug: Explanation max length

* :bookmark: RELEASENOTES

* :recycle: Refactoring types

* :recycle: Removed unused parameters
---
 docs/src/dokumentation/RELEASENOTES.md        |   1 +
 .../frontend/components.d.ts                  |   7 +-
 .../frontend/src/api/SchnittstelleService.ts  |  27 +++
 .../src/components/AddPersonDialog.vue        |  21 +-
 .../src/components/AddSchnittstelleDialog.vue | 217 ++++++++++++++++++
 .../frontend/src/types/Schnittstelle.ts       |   2 +-
 .../src/types/SchnittstelleRequest.ts         |  30 +++
 .../frontend/src/views/MainView.vue           |  22 +-
 .../src/views/SchnittstelleDetail.vue         |  11 +-
 9 files changed, 319 insertions(+), 19 deletions(-)
 create mode 100644 mobidam-sst-management-frontend/frontend/src/components/AddSchnittstelleDialog.vue
 create mode 100644 mobidam-sst-management-frontend/frontend/src/types/SchnittstelleRequest.ts

diff --git a/docs/src/dokumentation/RELEASENOTES.md b/docs/src/dokumentation/RELEASENOTES.md
index afb71f86..5a570e4f 100644
--- a/docs/src/dokumentation/RELEASENOTES.md
+++ b/docs/src/dokumentation/RELEASENOTES.md
@@ -4,6 +4,7 @@
 ### Hinzugefügt
 - GET Endpoint zur Statusabfrage
 - POST Schnittstelle fürs Erstellen von Datentransferen
+- Ersterfassung von Schnittstellen (mit ggf. Zuordnungen)
 
 ## Sprint 6 (23.01.2024 - 13.02.2024)
 ### Hinzugefügt
diff --git a/mobidam-sst-management-frontend/frontend/components.d.ts b/mobidam-sst-management-frontend/frontend/components.d.ts
index 00716a71..0d900f00 100644
--- a/mobidam-sst-management-frontend/frontend/components.d.ts
+++ b/mobidam-sst-management-frontend/frontend/components.d.ts
@@ -8,6 +8,7 @@ export {}
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     AddPersonDialog: typeof import('./src/components/AddPersonDialog.vue')['default']
+    AddSchnittstelleDialog: typeof import('./src/components/AddSchnittstelleDialog.vue')['default']
     DatetimeInput: typeof import('./src/components/common/DatetimeInput.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
@@ -20,8 +21,9 @@ declare module '@vue/runtime-core' {
     VCardActions: typeof import('vuetify/lib')['VCardActions']
     VCardText: typeof import('vuetify/lib')['VCardText']
     VCardTitle: typeof import('vuetify/lib')['VCardTitle']
+    VChip: typeof import('vuetify/lib')['VChip']
+    VChipGroup: typeof import('vuetify/lib')['VChipGroup']
     VCol: typeof import('vuetify/lib')['VCol']
-    VColumn: typeof import('vuetify/lib')['VColumn']
     VContainer: typeof import('vuetify/lib')['VContainer']
     VDatePicker: typeof import('vuetify/lib')['VDatePicker']
     VDialog: typeof import('vuetify/lib')['VDialog']
@@ -40,8 +42,11 @@ declare module '@vue/runtime-core' {
     VMenu: typeof import('vuetify/lib')['VMenu']
     VNavigationDrawer: typeof import('vuetify/lib')['VNavigationDrawer']
     VRow: typeof import('vuetify/lib')['VRow']
+    VSheet: typeof import('vuetify/lib')['VSheet']
     VSnackbar: typeof import('vuetify/lib')['VSnackbar']
     VSpacer: typeof import('vuetify/lib')['VSpacer']
+    VSwitch: typeof import('vuetify/lib')['VSwitch']
+    VTextarea: typeof import('vuetify/lib')['VTextarea']
     VTextField: typeof import('vuetify/lib')['VTextField']
     VToolbarTitle: typeof import('vuetify/lib')['VToolbarTitle']
     VTooltip: typeof import('vuetify/lib')['VTooltip']
diff --git a/mobidam-sst-management-frontend/frontend/src/api/SchnittstelleService.ts b/mobidam-sst-management-frontend/frontend/src/api/SchnittstelleService.ts
index 02a88a3e..5395ee21 100644
--- a/mobidam-sst-management-frontend/frontend/src/api/SchnittstelleService.ts
+++ b/mobidam-sst-management-frontend/frontend/src/api/SchnittstelleService.ts
@@ -23,6 +23,9 @@
 
 import FetchUtils from "@/api/FetchUtils";
 import Schnittstelle from "@/types/Schnittstelle";
+import { useSnackbarStore } from "@/stores/snackbar";
+import { Levels } from "@/api/error";
+import SchnittstelleRequest from "@/types/SchnittstelleRequest";
 
 export default class SchnittstelleService {
     private static base: string | undefined = import.meta.env
@@ -42,4 +45,28 @@ export default class SchnittstelleService {
             return response.json();
         });
     }
+
+    public static create(
+        instance: SchnittstelleRequest
+    ): Promise<Schnittstelle> {
+        return fetch(
+            `${this.base}/api/schnittstelle`,
+            FetchUtils.getPOSTConfig(instance)
+        )
+            .then((response) => {
+                useSnackbarStore().showMessage({
+                    message: "Speichern erfolgreich.",
+                    level: Levels.SUCCESS,
+                });
+                FetchUtils.defaultResponseHandler(response);
+                return response.json();
+            })
+            .catch((err) => {
+                useSnackbarStore().showMessage({
+                    message: "Speichern der Schnittstelle fehlgeschlagen.",
+                    level: Levels.ERROR,
+                });
+                FetchUtils.defaultResponseHandler(err);
+            });
+    }
 }
diff --git a/mobidam-sst-management-frontend/frontend/src/components/AddPersonDialog.vue b/mobidam-sst-management-frontend/frontend/src/components/AddPersonDialog.vue
index 3e6ecc1e..78329c36 100644
--- a/mobidam-sst-management-frontend/frontend/src/components/AddPersonDialog.vue
+++ b/mobidam-sst-management-frontend/frontend/src/components/AddPersonDialog.vue
@@ -129,7 +129,7 @@
                     color="success"
                     @click="saveTask"
                 >
-                    Speichern
+                    {{ confirmButton }}
                 </v-btn>
             </v-card-actions>
         </v-card>
@@ -139,7 +139,6 @@
 <script setup lang="ts">
 import Zuordnung from "@/types/Zuordnung";
 import { ref } from "vue";
-import ZuordnungService from "@/api/ZuordnungService";
 import { useRules } from "@/composables/rules";
 
 const textMaxLength = ref<number>(255);
@@ -156,7 +155,7 @@ const textInputRules = [
 
 interface Props {
     showDialog: boolean;
-    schnittstelleID: string;
+    confirmButton: string;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -167,23 +166,17 @@ const zuordnung = ref<Zuordnung>(new Zuordnung("", "", "", "", "", ""));
 
 const emit = defineEmits<{
     (e: "update:showDialog", b: boolean): void;
-    (e: "zuordnung-saved"): void;
+    (e: "zuordnung-saved", b: Zuordnung): void;
 }>();
 
 const form = ref<HTMLFormElement>();
 
 function saveTask(): void {
     if (form.value?.validate()) {
-        zuordnung.value.schnittstelle = props.schnittstelleID;
-        ZuordnungService.create(zuordnung.value)
-            .then(() => {
-                closeDialog();
-                resetZuordnung();
-                emit("zuordnung-saved");
-            })
-            .finally(() => {
-                form.value?.resetValidation();
-            });
+        emit("zuordnung-saved", zuordnung.value);
+        closeDialog();
+        resetZuordnung();
+        form.value?.resetValidation();
     }
 }
 
diff --git a/mobidam-sst-management-frontend/frontend/src/components/AddSchnittstelleDialog.vue b/mobidam-sst-management-frontend/frontend/src/components/AddSchnittstelleDialog.vue
new file mode 100644
index 00000000..54c2b2c0
--- /dev/null
+++ b/mobidam-sst-management-frontend/frontend/src/components/AddSchnittstelleDialog.vue
@@ -0,0 +1,217 @@
+<!--
+
+    The MIT License
+     Copyright © 2023 Landeshauptstadt München | it@M
+
+     Permission is hereby granted, free of charge, to any person obtaining a copy
+     of this software and associated documentation files (the "Software"), to deal
+     in the Software without restriction, including without limitation the rights
+     to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+     copies of the Software, and to permit persons to whom the Software is
+     furnished to do so, subject to the following conditions:
+
+     The above copyright notice and this permission notice shall be included in
+     all copies or substantial portions of the Software.
+
+     THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+     IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+     FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+     AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+     LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+     OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+     THE SOFTWARE.
+
+-->
+<template>
+    <v-dialog
+        :value="props.showDialog"
+        max-width="60%"
+        @input="closeDialog"
+    >
+        <v-card :style="{ overflowX: 'hidden' }">
+            <v-card-title class="title-content">
+                <span class="text-h5 mb-2">Schnittstelle hinzufügen</span>
+            </v-card-title>
+
+            <v-divider class="divider"></v-divider>
+            <v-card-text>
+                <v-form ref="form">
+                    <v-text-field
+                        ref="name"
+                        v-model="schnittstelleRequest.name"
+                        label="Name der Schnittstelle"
+                        :rules="textInputRules"
+                    >
+                    </v-text-field>
+                    <v-text-field
+                        ref="creationDate"
+                        :value="today.toLocaleDateString()"
+                        label="Anlagedatum"
+                        hint="Als Anlagedatum wird automatisch der heutige Tag gesetzt."
+                        readonly
+                    ></v-text-field>
+                    &nbsp;
+                    <v-row>
+                        <v-col cols="3">
+                            <v-switch
+                                ref="status"
+                                v-model="schnittstelleRequest.status"
+                                :label="`Status der Schnittstelle: ${schnittstelleRequest.status}`"
+                                true-value="AKTIVIERT"
+                                false-value="DEAKTIVIERT"
+                                color="success"
+                            ></v-switch>
+                        </v-col>
+                        <v-col>
+                            <v-textarea
+                                ref="explanantion"
+                                v-model="schnittstelleRequest.explanation"
+                                label="Begründung der Statussetzung"
+                                outlined
+                                :maxlength="255"
+                            ></v-textarea>
+                        </v-col>
+                    </v-row>
+                    <v-row>
+                        <v-col cols="3">
+                            <v-tooltip right>
+                                <template #activator="{ on }">
+                                    <v-btn
+                                        small
+                                        outlined
+                                        @click="showAddPersonDialog = true"
+                                        v-on="on"
+                                    >
+                                        <v-icon>mdi-account-plus</v-icon>
+                                    </v-btn>
+                                </template>
+                                Fachverantwortliche hinzufügen
+                            </v-tooltip>
+                        </v-col>
+                        <v-col>
+                            <v-chip
+                                v-for="zuordnung in zuordnungen"
+                                :key="zuordnung"
+                                close
+                                style="margin-right: 1%"
+                                @click:close="removeZuordnung(zuordnung)"
+                            >
+                                {{ zuordnung.userID }}
+                            </v-chip>
+                            <br />
+                        </v-col>
+                    </v-row>
+                </v-form>
+            </v-card-text>
+            <v-divider class="divider"></v-divider>
+            <v-card-actions>
+                <v-btn @click="closeDialog">Schließen</v-btn>
+                <v-spacer></v-spacer>
+                <v-btn
+                    class="white--text"
+                    color="success"
+                    @click="saveSchnittstelle"
+                >
+                    Speichern
+                </v-btn>
+            </v-card-actions>
+        </v-card>
+        <add-person-dialog
+            :show-dialog.sync="showAddPersonDialog"
+            confirm-button="Übernehmen"
+            @zuordnung-saved="confirmZuordnung"
+        ></add-person-dialog>
+    </v-dialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import { useRules } from "@/composables/rules";
+import SchnittstelleService from "@/api/SchnittstelleService";
+import Schnittstelle from "@/types/Schnittstelle";
+import AddPersonDialog from "@/components/AddPersonDialog.vue";
+import Zuordnung from "@/types/Zuordnung";
+import ZuordnungService from "@/api/ZuordnungService";
+import SchnittstelleRequest from "@/types/SchnittstelleRequest";
+
+const textMaxLength = ref<number>(255);
+const validationRules = useRules();
+const textInputRules = [
+    validationRules.notEmptyRule("Das Feld darf nicht leer sein."),
+    validationRules.maxLengthRule(
+        textMaxLength.value,
+        "Die Eingabe darf maximal " + textMaxLength + " Zeichen lang sein."
+    ),
+];
+const today = ref<Date>(new Date());
+const showAddPersonDialog = ref(false);
+const zuordnungen = ref<Zuordnung[]>([]);
+
+interface Props {
+    showDialog: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    showDialog: false,
+});
+
+const schnittstelleRequest = ref<SchnittstelleRequest>(
+    new SchnittstelleRequest("", "DEAKTIVIERT")
+);
+
+const emit = defineEmits<{
+    (e: "update:showDialog", b: boolean): void;
+    (e: "schnittstelle-saved"): void;
+}>();
+
+const form = ref<HTMLFormElement>();
+
+function saveSchnittstelle(): void {
+    if (form.value?.validate()) {
+        SchnittstelleService.create(schnittstelleRequest.value)
+            .then((schnittstelle) => {
+                saveZuordnungen(schnittstelle);
+            })
+            .finally(() => {
+                emit("schnittstelle-saved");
+                resetSchnittstelle();
+                closeDialog();
+                form.value?.resetValidation();
+            });
+    }
+}
+
+function confirmZuordnung(zuordnung: Zuordnung): void {
+    zuordnungen.value.push(zuordnung);
+}
+
+function saveZuordnungen(schnittstelle: Schnittstelle) {
+    for (const zuordnung of zuordnungen.value) {
+        if (schnittstelle.id !== undefined)
+            zuordnung.schnittstelle = schnittstelle.id;
+        ZuordnungService.create(zuordnung);
+    }
+}
+
+function removeZuordnung(zuordnung: Zuordnung): void {
+    zuordnungen.value.splice(zuordnungen.value.indexOf(zuordnung), 1);
+}
+
+function resetSchnittstelle(): void {
+    schnittstelleRequest.value = new SchnittstelleRequest(
+        "",
+        "DEAKTIVIERT"
+    );
+    zuordnungen.value = [];
+    form.value?.resetValidation();
+}
+
+function closeDialog() {
+    emit("update:showDialog", false);
+    resetSchnittstelle();
+}
+</script>
+
+<style>
+@import "@/style/AddDialog.css";
+</style>
diff --git a/mobidam-sst-management-frontend/frontend/src/types/Schnittstelle.ts b/mobidam-sst-management-frontend/frontend/src/types/Schnittstelle.ts
index 084365ed..d6f3a07b 100644
--- a/mobidam-sst-management-frontend/frontend/src/types/Schnittstelle.ts
+++ b/mobidam-sst-management-frontend/frontend/src/types/Schnittstelle.ts
@@ -26,8 +26,8 @@ export default class Schnittstelle {
         public name: string,
         public creationDate: string,
         public id: string,
-        public editDate?: string,
         public status?: string,
+        public editDate?: string,
         public explanation?: string
     ) {}
 }
diff --git a/mobidam-sst-management-frontend/frontend/src/types/SchnittstelleRequest.ts b/mobidam-sst-management-frontend/frontend/src/types/SchnittstelleRequest.ts
new file mode 100644
index 00000000..f943cebf
--- /dev/null
+++ b/mobidam-sst-management-frontend/frontend/src/types/SchnittstelleRequest.ts
@@ -0,0 +1,30 @@
+///
+/// The MIT License
+///  Copyright © 2023 Landeshauptstadt München | it@M
+///
+///  Permission is hereby granted, free of charge, to any person obtaining a copy
+///  of this software and associated documentation files (the "Software"), to deal
+///  in the Software without restriction, including without limitation the rights
+///  to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+///  copies of the Software, and to permit persons to whom the Software is
+///  furnished to do so, subject to the following conditions:
+///
+///  The above copyright notice and this permission notice shall be included in
+///  all copies or substantial portions of the Software.
+///
+///  THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+///  IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+///  FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+///  AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+///  LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+///  OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
+///  THE SOFTWARE.
+///
+
+export default class SchnittstelleRequest {
+    constructor(
+        public name: string,
+        public status?: string,
+        public explanation?: string
+    ) {}
+}
diff --git a/mobidam-sst-management-frontend/frontend/src/views/MainView.vue b/mobidam-sst-management-frontend/frontend/src/views/MainView.vue
index 4d87325a..e8ebd806 100644
--- a/mobidam-sst-management-frontend/frontend/src/views/MainView.vue
+++ b/mobidam-sst-management-frontend/frontend/src/views/MainView.vue
@@ -32,7 +32,16 @@
             </v-col>
         </v-row>
         <v-row>
-            <h2>Schnittstellen</h2>
+            <h2>
+                Schnittstellen &nbsp;
+                <v-btn
+                    small
+                    outlined
+                    @click="showAddSchnittstelleDialog = true"
+                >
+                    <v-icon>mdi-plus</v-icon>
+                </v-btn>
+            </h2>
         </v-row>
         <br />
         <v-list>
@@ -119,6 +128,10 @@
                 </v-tooltip>
             </v-list-item>
         </v-list>
+        <add-schnittstelle-dialog
+            :show-dialog.sync="showAddSchnittstelleDialog"
+            @schnittstelle-saved="refreshList"
+        ></add-schnittstelle-dialog>
     </v-container>
 </template>
 
@@ -130,8 +143,10 @@ import SchnittstelleService from "@/api/SchnittstelleService";
 import Datentransfer from "@/types/Datentransfer";
 import DatentransferService from "@/api/DatentransferService";
 import SchnittstelleWithDatentransfer from "@/types/SchnittstelleWithDatentransfer";
+import AddSchnittstelleDialog from "@/components/AddSchnittstelleDialog.vue";
 
 const snackbarStore = useSnackbarStore();
+const showAddSchnittstelleDialog = ref(false);
 const schnittstellen = ref<SchnittstelleWithDatentransfer[]>([]);
 const sortedSchnittstellen = computed(() => {
     let sorted = ref<SchnittstelleWithDatentransfer[]>([]);
@@ -192,5 +207,10 @@ function getDatentransferZeitstempel(
         return schnittstelle.datentransfer.zeitstempel;
     return "";
 }
+
+function refreshList(): void {
+    schnittstellen.value = [];
+    getSchnittstellen();
+}
 </script>
 
diff --git a/mobidam-sst-management-frontend/frontend/src/views/SchnittstelleDetail.vue b/mobidam-sst-management-frontend/frontend/src/views/SchnittstelleDetail.vue
index 218ab7c8..d2379955 100644
--- a/mobidam-sst-management-frontend/frontend/src/views/SchnittstelleDetail.vue
+++ b/mobidam-sst-management-frontend/frontend/src/views/SchnittstelleDetail.vue
@@ -78,8 +78,8 @@
         </v-list>
         <add-person-dialog
             :show-dialog.sync="showAddPersonDialog"
-            :schnittstelle-i-d="schnittstelleID"
-            @zuordnung-saved="refreshTasks"
+            confirm-button="Speichern"
+            @zuordnung-saved="saveZuordnung"
         ></add-person-dialog>
         <yes-no-dialog
             dialogtext="Sicher, dass Du die Zuordnung löschen möchtest?"
@@ -138,6 +138,13 @@ function deleteZuordnung() {
         });
 }
 
+function saveZuordnung(zuordnung: Zuordnung) {
+    zuordnung.schnittstelle = schnittstelleID;
+    ZuordnungService.create(zuordnung).then(() => {
+        refreshTasks();
+    });
+}
+
 function refreshTasks() {
     ZuordnungService.getZuordnungenByID(schnittstelleID).then(
         (fetchedZuordnungen) => {