fix(confirm-dialog): add prop for accept label (#149)

fix(confirm-dialog): add accept label and refactor usage

Author: LarsvanDartel

src/components/audio/SpotifyUserDeleteButton.vue

@@ -5,6 +5,7 @@
     delete
     :loading="loading"
     :message="confirmMessage"
+    acceptLabel="Delete"
     :on-accept="
       () => {
         loading = true;

src/components/integrations/IntegrationDeleteButton.vue

@@ -9,6 +9,7 @@
     ref="confirmRef"
     :loading="loading"
     message="Are you sure you want to delete this integration?"
+    acceptLabel="Delete"
     :on-accept="
       () => {
         loading = true;

src/components/modes/time-trail-race/TimeTrailRaceStepper.vue

@@ -16,6 +16,7 @@
   <ConfirmWrapper
     ref="confirmRef"
     message="Are you sure you want to reset this trail race?"
+    acceptLabel="Reset"
     :on-accept="timeTrailStore.resetPlayer"
   />
 </template>

src/components/poster/StaticPosterButtonDelete.vue

@@ -4,6 +4,7 @@
     ref="confirmRef"
     :loading="loading"
     message="Are you sure you want to delete this poster?"
+    acceptLabel="Delete"
     :on-accept="
       async () => {
         loading = true;

src/components/prime/ConfirmWrapper.vue

@@ -7,6 +7,7 @@ import { useConfirm } from 'primevue/useconfirm';
 
 const props = defineProps<{
   message: string;
+  acceptLabel: string;
   loading?: boolean;
   onAccept?: () => void;
   onReject?: () => void;
@@ -19,7 +20,7 @@ const confirmDialog = () => {
     header: 'Confirm',
     rejectClass: 'p-button-secondary',
     rejectLabel: 'Cancel',
-    acceptLabel: 'Quit',
+    acceptLabel: props.acceptLabel,
     reject() {
       if (props.onReject) {
         props.onReject();

src/components/timed-events/TimedEventDeleteButton.vue

@@ -4,6 +4,7 @@
     ref="confirmRef"
     :loading="loading"
     message="Are you sure you want to delete this timed event?"
+    acceptLabel="Delete"
     :on-accept="
       () => {
         loading = true;

src/views/Modes/CenturionModeView.vue

@@ -8,6 +8,7 @@
           <ConfirmWrapper
             ref="confirmRef"
             message="Are you sure you want to quit this centurion?"
+            acceptLabel="Quit"
             :on-accept="centurionStore.quitCenturion"
           />
         </div>

src/views/Modes/TimeTrailRaceModeView.vue

@@ -9,9 +9,10 @@
       <template #header>
         <div v-if="timeTrailInitialized">
           <Button icon="pi pi-times" @click="confirmRef?.confirmDialog" />
-          <DialogWrapper
+          <ConfirmWrapper
             ref="confirmRef"
             message="Are you sure you want to quit this spoelbakkenrace?"
+            acceptLabel="Quit"
             :on-accept="timeTrailStore.quit"
           />
         </div>
@@ -36,7 +37,7 @@ import TimeTrailRaceInitialize from '@/components/modes/time-trail-race/TimeTrai
 import TimeTrailRaceStepper from '@/components/modes/time-trail-race/TimeTrailRaceStepper.vue';
 import TimeTrailRaceScoreboard from '@/components/modes/time-trail-race/TimeTrailRaceScoreboard.vue';
 import AppContainer from '@/layout/AppContainer.vue';
-import DialogWrapper from '@/components/prime/ConfirmWrapper.vue';
+import ConfirmWrapper from '@/components/prime/ConfirmWrapper.vue';
 import { useLayoutStore } from '@/stores/layout.store';
 
 const confirmRef = ref();