Adopt WalkRemoveForm.vue page to vuetify 2 #248

knutschsoft · Jan 9, 2025 · 1f32567 · 1f32567
1 parent add7c6a
commit 1f32567
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 62 deletions.
diff --git a/web/assets/js/components/PasswordChangeRequest.vue b/web/assets/js/components/PasswordChangeRequest.vue
@@ -66,8 +66,7 @@
     "use strict";
 
     import GeneralErrorAlert from './Common/GeneralErrorAlert.vue';
-    import { useUserStore } from '../stores/user';
-    import { useAuthStore } from '../stores/auth';
+    import { useAuthStore, useUserStore } from '../stores';
     export default {
         name: "PasswordChangeRequest",
         components: { GeneralErrorAlert },

diff --git a/web/assets/js/components/Walk/WalkRemoveForm.vue b/web/assets/js/components/Walk/WalkRemoveForm.vue
@@ -28,7 +28,7 @@
             <v-alert
                 type="warning"
             >
-                Unerwarte Dinge können passieren, wenn du dies nicht liest.
+                Unerwartete Dinge können passieren, wenn du dies nicht liest.
             </v-alert>
             <p>
                 Diese Aktion kann <b>nicht</b> rückgängig gemacht werden.

diff --git a/web/assets/js/components/WayPoint/WayPointForm.vue b/web/assets/js/components/WayPoint/WayPointForm.vue
@@ -558,7 +558,7 @@ export default {
             return this.authStore.isSuperAdmin;
         },
         isSubmitDisabled() {
-            return this.isLoading || !this.visitedAtState;
+            return this.isLoading || !this.visitedAtState || !this.wayPoint.locationName;
         },
         globalErrors() {
             let keys = ['oneOnOneInterview', 'note', 'locationName', 'decodedImageData', 'imageFileData', 'imageFileName'];

diff --git a/web/assets/js/components/WayPoint/WayPointRemoveForm.vue b/web/assets/js/components/WayPoint/WayPointRemoveForm.vue
@@ -1,82 +1,77 @@
 <template>
-    <b-form
+    <v-form
         @submit.prevent.stop="handleRemove"
         class="p-1 p-sm-2 p-lg-3"
     >
         Wenn der Wegpunkt gelöscht wurde, kann dies nicht wieder rückgängig gemacht werden. Bitte sei dir sicher.
-        <b-form-group>
-            <b-button
-                variant="danger"
-                v-b-modal.modal-remove
-                data-test="button-way-point-remove"
-                :disabled="isLoading"
-                block
-                class="col-12"
-            >
-                Wegpunkt löschen und zur Runde zurückkehren
-            </b-button>
-        </b-form-group>
+        <v-btn
+            color="error"
+            data-test="button-way-point-remove"
+            :disabled="isLoading"
+            block
+            @click="dialog = true"
+        >
+            Wegpunkt löschen und zur Runde zurückkehren
+        </v-btn>
         <global-form-error
             :error="globalErrors"
         />
-        <b-modal
-            id="modal-remove"
-            title="Bist du dir absolut sicher?"
-            hide-footer
-            centered
-            size="lg"
+        <v-dialog
+            v-model="dialog"
         >
-            <v-alert
-                type="warning"
-            >
-                Unerwarte Dinge können passieren, wenn du dies nicht liest.
-            </v-alert>
-            <p>
-            Diese Aktion kann <b>nicht</b> rückgängig gemacht werden.
-            Dies wird permanent den Wegpunkt <b>{{ initialWayPoint.locationName }}</b> und der an ihm gespeicherten Tags löschen. Die Runde {{ initialWalk.name }} bleibt erhalten.
-            </p>
-            <p>
-                Bitte gib <b>{{ initialWayPoint.locationName }}</b> ein um das Löschen zu bestätigen.
-            </p>
-            <b-form-group
-                label=""
-                :state="wayPointNameState"
-                :invalid-feedback="invalidWayPointNameFeedback"
-            >
-                <b-input-group>
-                    <b-input
+            <v-card>
+                <v-card-title>Bist du dir absolut sicher?</v-card-title>
+                <v-card-text>
+                    <v-alert
+                        type="warning"
+                    >
+                        Unerwartete Dinge können passieren, wenn du dies nicht liest.
+                    </v-alert>
+                    <p>
+                        Diese Aktion kann <b>nicht</b> rückgängig gemacht werden.
+                        Dies wird permanent den Wegpunkt <b>{{ initialWayPoint.locationName }}</b> und der an ihm gespeicherten Tags löschen. Die Runde {{ initialWalk.name }} bleibt erhalten.
+                    </p>
+                    <p>
+                        Bitte gib <b>{{ initialWayPoint.locationName }}</b> ein um das Löschen zu bestätigen.
+                    </p>
+                    <v-text-field
                         v-model="wayPointName"
                         type="text"
+                        dense
+                        outlined
+                        label="Name des Wegpunktes"
+                        clearable
                         data-test="wayPointName"
                         autocomplete="off"
                         :disabled="isLoading"
                     />
-                </b-input-group>
-            </b-form-group>
-            <b-button
-                type="submit"
-                variant="danger"
-                :disabled="isSubmitDisabled"
-                data-test="button-way-point-remove-modal"
-                @click="handleRemove"
-                block
-                class="col-12"
-            >
-                Ich verstehe die Auswirkungen; Wegpunkt löschen und zur Runde zurückkehren
-            </b-button>
-        </b-modal>
-    </b-form>
+                    <v-alert
+                        v-if="false === wayPointNameState"
+                        type="error"
+                    >
+                        {{ invalidWayPointNameFeedback }}
+                    </v-alert>
+                    <v-btn
+                        type="submit"
+                        color="error"
+                        :disabled="isSubmitDisabled"
+                        data-test="button-way-point-remove-modal"
+                        @click="handleRemove"
+                        block
+                    >
+                        Ich verstehe die Auswirkungen; Wegpunkt löschen und zur Runde zurückkehren
+                    </v-btn>
+                </v-card-text>
+            </v-card>
+        </v-dialog>
+    </v-form>
 </template>
 
 <script>
 'use strict';
 import GlobalFormError from '../Common/GlobalFormError.vue';
 import { getViolationsFeedback } from '../../utils';
-import { useTagStore } from '../../stores/tag';
-import { useTeamStore } from '../../stores/team';
-import { useWayPointStore } from '../../stores/way-point';
-import { useWalkStore } from '../../stores/walk';
-import { useAuthStore } from '../../stores/auth';
+import { useAuthStore, useTagStore, useTeamStore, useWalkStore, useWayPointStore } from '../../stores';
 
 export default {
     name: 'WayPointRemoveForm',
@@ -105,6 +100,7 @@ export default {
             wayPointStore: useWayPointStore(),
             walkStore: useWalkStore(),
             wayPointName: '',
+            dialog: false,
         };
     },
     computed: {

diff --git a/web/components.d.ts b/web/components.d.ts
@@ -14,6 +14,7 @@ declare module 'vue' {
     VAvatar: typeof import('vuetify/lib')['VAvatar']
     VBtn: typeof import('vuetify/lib')['VBtn']
     VCard: typeof import('vuetify/lib')['VCard']
+    VCardActions: typeof import('vuetify/lib')['VCardActions']
     VCardSubtitle: typeof import('vuetify/lib')['VCardSubtitle']
     VCardText: typeof import('vuetify/lib')['VCardText']
     VCardTitle: typeof import('vuetify/lib')['VCardTitle']