Migrate modal in SystemicQuestionList from bootstrap-vue to vuetify 2 #…

…248
knutschsoft · Jan 2, 2025 · a0c6f53 · a0c6f53
1 parent 75b5e93
commit a0c6f53
Show file tree

Hide file tree

Showing 3 changed files with 93 additions and 92 deletions.
diff --git a/web/assets/js/components/Clients/ClientList.vue b/web/assets/js/components/Clients/ClientList.vue
@@ -188,7 +188,7 @@ export default {
         const editClient = ref<Client|null>(null);
 
         const clients = computed(() => clientStore.getClients);
-        const isLoading = computed(() => clientStore.isLoading);
+        const isLoading = computed(() => clientStore.isLoadingChange || clientStore.isLoadingCreate);
         const error = computed(() => clientStore.getErrors);
 
         onMounted(async () => {

diff --git a/web/assets/js/components/SystemicQuestions/SystemicQuestionForm.vue b/web/assets/js/components/SystemicQuestions/SystemicQuestionForm.vue
@@ -124,11 +124,22 @@ export default {
             return this.clientStore.getClients;
         },
     },
-    async created() {
-        this.client = this.initialClient;
-        this.question = this.initialQuestion;
+    async mounted() {
+        await this.setInitialValues();
+    },
+    watch: {
+        initialQuestion: async function () {
+            await this.setInitialValues();
+        },
+        initialClient: async function () {
+            await this.setInitialValues();
+        },
     },
     methods: {
+        async setInitialValues() {
+            this.client = this.initialClient;
+            this.question = this.initialQuestion;
+        },
         async handleSubmit() {
             this.$emit('submit', {
                 client: this.client,

diff --git a/web/assets/js/components/SystemicQuestions/SystemicQuestionList.vue b/web/assets/js/components/SystemicQuestions/SystemicQuestionList.vue
@@ -1,12 +1,15 @@
 <template>
     <div>
-        <content-loading-spinner
-            :is-loading="isLoading"
-        />
         <v-data-table
-            v-show="!isLoading && systemicQuestions.length"
             :items="systemicQuestions"
             :headers="fields"
+            :loading="isLoading"
+            loading-text="Lade Daten..."
+            :items-per-page="itemsPerPage"
+            :items-per-page-options="itemsPerPageOptions"
+            :items-per-page-text="itemsPerPageText"
+            :no-data-text="noItemsText"
+            :no-results-text="noItemsText"
             small
             striped
             class="mb-0"
@@ -29,66 +32,89 @@
                     />
                 </span>
             </template>
+            <template v-slot:item.client="{item}">
+                {{ clientFormatter(item.client) }}
+            </template>
+            <template v-slot:item.createdAt="{item}">
+                {{ formatDateTime(item.createdAt) }}
+            </template>
+            <template v-slot:item.updatedAt="{item}">
+                {{ formatDateTime(item.updatedAt) }}
+            </template>
             <template v-slot:item.actions="{item}">
-                <v-btn
-                    small
-                    color="secondary"
-                    @click="editSystemicQuestion(item)"
-                >
-                    Systemische Frage<br>
-                    bearbeiten
-                    <v-icon
+                <v-row justify="center">
+                    <v-btn
                         small
+                        color="secondary"
+                        @click.stop="openSystemicQuestionEditDialog(item)"
                     >
-                        mdi-pencil-outline
-                    </v-icon>
-                </v-btn>
+                        Systemische Frage<br>
+                        bearbeiten
+                        <v-icon
+                            small
+                            class="ml-2"
+                        >
+                            mdi-pencil-outline
+                        </v-icon>
+                    </v-btn>
+                </v-row>
             </template>
         </v-data-table>
 
-        <b-modal
-            :id="editModalSystemicQuestion.id"
-            :title="editModalSystemicQuestion.title"
-            size="lg"
-            @hide="resetEditModalSystemicQuestion"
-            title="Systemische Frage ändern"
-            hide-footer
+        <v-dialog
+            v-model="dialog"
+            scrollable
+            max-width="800px"
         >
-            <systemic-question-form
-                v-if="editModalSystemicQuestion.selectedSystemicQuestion"
-                submit-button-text="Speichern"
-                :initial-client="editModalSystemicQuestion.selectedSystemicQuestion.client"
-                :initial-question="editModalSystemicQuestion.selectedSystemicQuestion.question"
-                @submit="handleSubmit"
-            />
-        </b-modal>
+            <v-card>
+                <v-card-title class="text-h5 grey lighten-2">
+                    Systemische Frage ändern
+                </v-card-title>
+                <v-card-text>
+                    <systemic-question-form
+                        v-if="editSystemicQuestion"
+                        submit-button-text="Speichern"
+                        :initial-client="editSystemicQuestion.client"
+                        :initial-question="editSystemicQuestion.question"
+                        @submit="handleSubmit"
+                    />
+                </v-card-text>
+            </v-card>
+        </v-dialog>
     </div>
 </template>
 
 <script>
 'use strict';
-import ContentLoadingSpinner from '../ContentLoadingSpinner.vue';
 import dayjs from 'dayjs';
 import SystemicQuestionForm from './SystemicQuestionForm.vue';
-import { useAuthStore, useClientStore, useSystemicQuestionStore, useTeamStore } from '../../stores';
+import { useAlertStore, useAuthStore, useClientStore, useSystemicQuestionStore, useTeamStore } from '../../stores';
+import {
+    formatDateTime,
+    itemsPerPageOptions,
+    itemsPerPageText,
+    loadingText,
+    noItemsText,
+} from '../../utils'
 
 export default {
     name: 'SystemicQuestionList',
     components: {
         SystemicQuestionForm,
-        ContentLoadingSpinner,
     },
     data: function () {
         return {
+            alertStore: useAlertStore(),
             authStore: useAuthStore(),
             clientStore: useClientStore(),
             teamStore: useTeamStore(),
             systemicQuestionStore: useSystemicQuestionStore(),
-            editModalSystemicQuestion: {
-                id: 'edit-modal-systemic-question',
-                title: '',
-                selectedSystemicQuestion: null,
-            },
+            editSystemicQuestion: {},
+            dialog: false,
+            itemsPerPageOptions,
+            itemsPerPage: -1,
+            loadingText,
+            noItemsText,
         };
     },
     computed: {
@@ -105,31 +131,21 @@ export default {
                     sortable: true,
                 },
             ];
-            if (this.isSuperAdmin) {
+            if (!this.isSuperAdmin) {
                 headers.push({
                     value: 'client',
                     text: 'Klient',
-                    sortable: true,
-                    sortByFormatted: true,
-                    formatter: this.clientFormatter,
+                    sortable: false,
                 });
                 headers.push({
                     value: 'createdAt',
                     text: 'Erstellt am',
                     sortable: true,
-                    sortByFormatted: false,
-                    formatter: (value) => {
-                        return dayjs(value).format('DD.MM.YYYY HH:mm:ss');
-                    },
                 });
                 headers.push({
                     value: 'updatedAt',
                     text: 'Geändert am',
                     sortable: true,
-                    sortByFormatted: false,
-                    formatter: (value) => {
-                        return dayjs(value).format('DD.MM.YYYY HH:mm:ss');
-                    },
                 })
             }
             headers.push({ value: 'actions', text: 'Aktionen' });
@@ -159,63 +175,37 @@ export default {
         clientFormatter(clientIri) {
             return this.clientStore.getClientByIri(clientIri)?.name;
         },
-        editSystemicQuestion(systemicQuestion) {
-            this.$root.$emit('bv::show::modal', this.editModalSystemicQuestion.id);
-            this.editModalSystemicQuestion.selectedSystemicQuestion = systemicQuestion;
+        formatDateTime(dateTime) {
+            return formatDateTime(dateTime);
+        },
+        openSystemicQuestionEditDialog(systemicQuestion) {
+            this.editSystemicQuestion = systemicQuestion;
+            this.dialog = true;
         },
         resetEditModalSystemicQuestion() {
-            this.$root.$emit('bv::hide::modal', this.editModalSystemicQuestion.id);
-            this.editModalSystemicQuestion.systemicQuestion = null;
+            this.dialog = false;
         },
         async toggleEnabled(iri, isEnabled) {
             if (isEnabled) {
                 const systemicQuestion = await this.systemicQuestionStore.disable({ systemicQuestion: iri });
                 const message = `Die systemische Frage "${systemicQuestion.question}" wurde erfolgreich deaktiviert. Sie wird nun nicht mehr automatisch für neue Runden verwendet.`;
-                this.$bvToast.toast(message, {
-                    title: 'Systemische Frage geändert',
-                    toaster: 'b-toaster-top-right',
-                    autoHideDelay: 10000,
-                    appendToast: true,
-                    variant: 'info',
-                    solid: true,
-                });
+                this.alertStore.info(message, 'Systemische Frage geändert');
             } else {
                 const systemicQuestion = await this.systemicQuestionStore.enable({ systemicQuestion: iri });
                 const message = `Die systemische Frage "${systemicQuestion.question}" wurde erfolgreich aktiviert. Sie wird nun automatisch für neue Runden verwendet.`;
-                this.$bvToast.toast(message, {
-                    title: 'Systemische Frage geändert',
-                    toaster: 'b-toaster-top-right',
-                    autoHideDelay: 10000,
-                    appendToast: true,
-                    variant: 'info',
-                    solid: true,
-                });
+                this.alertStore.info(message, 'Systemische Frage geändert');
             }
         },
         async handleSubmit(payload) {
-            payload.systemicQuestion = this.editModalSystemicQuestion.selectedSystemicQuestion['@id'];
+            payload.systemicQuestion = this.editSystemicQuestion['@id'];
             const systemicQuestion = await this.systemicQuestionStore.change(payload);
             if (systemicQuestion) {
                 const message = `Die systemische Frage "${systemicQuestion.question}" wurde erfolgreich geändert.`;
-                this.$bvToast.toast(message, {
-                    title: 'Systemische Frage geändert',
-                    toaster: 'b-toaster-top-right',
-                    autoHideDelay: 10000,
-                    variant: 'info',
-                    appendToast: true,
-                    solid: true,
-                });
+                this.alertStore.success(message, 'Systemische Frage geändert');
 
                 this.resetEditModalSystemicQuestion();
             } else {
-                this.$bvToast.toast('Upps! :-(', {
-                    title: 'Systemische Frage ändern fehlgeschlagen',
-                    toaster: 'b-toaster-top-right',
-                    autoHideDelay: 10000,
-                    variant: 'danger',
-                    appendToast: true,
-                    solid: true,
-                });
+                this.alertStore.error('Systemische Frage ändern fehlgeschlagen', 'Upps! :-(');
             }
         },
     },