feat: add yes no colors properties

src/main/webapp/src/App.vue

@@ -7,12 +7,15 @@ import { errorHandler } from '@/utils/axiosUtils.ts';
 import { usePreferredDark } from '@vueuse/core';
 import { storeToRefs } from 'pinia';
 import { computed, onBeforeMount, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';
 import { useTheme } from 'vuetify';
 
+const { t } = useI18n();
+
 const configurationStore = useConfigurationStore();
 const { refresh, resetState } = configurationStore;
-const { lastNavigation, currentFile, isConfirmation } = storeToRefs(configurationStore);
+const { lastNavigation, currentFile, isConfirmation, confirmationTitle } = storeToRefs(configurationStore);
 
 const router = useRouter();
 
@@ -94,9 +97,12 @@ const deleteItem = async (result: Response): Promise<void> => {
       <router-view />
       <confirmation-dialog
         v-model="confirmationDelete"
-        title=""
+        :title="t('dialog.delete.title')"
+        :description="confirmationTitle"
         yes-value="button.delete"
         no-value="button.cancel"
+        yes-color="error"
+        no-color="secondary"
         @close="deleteItem"
       />
     </main>

src/main/webapp/src/components/dialogs/ConfirmationDialog.vue

@@ -12,6 +12,8 @@ const props = defineProps<{
   yesValue: string;
   noValue: string;
   cancelable?: boolean;
+  noColor?: string;
+  yesColor?: string;
 }>();
 
 const emit = defineEmits<{
@@ -52,8 +54,8 @@ const yes = (): void => {
       <v-card-actions>
         <v-btn v-if="cancelable" :text="t('button.cancel')" @click="cancel" />
         <v-spacer />
-        <v-btn :text="t(noValue)" @click="no" />
-        <v-btn :text="t(yesValue)" @click="yes" />
+        <v-btn :text="t(noValue)" :color="noColor" @click="no" />
+        <v-btn :text="t(yesValue)" :color="yesColor" @click="yes" />
       </v-card-actions>
     </v-card>
   </v-dialog>

src/main/webapp/src/locales/en/dialogs.json

@@ -6,6 +6,9 @@
     "file": {
       "title": "New File",
       "description": "File type"
+    },
+    "delete": {
+      "title": "Are you sure to delete?"
     }
   }
 }

src/main/webapp/src/locales/fr/dialogs.json

@@ -6,6 +6,9 @@
     "file": {
       "title": "Nouveau fichier",
       "description": "Type de fichier"
+    },
+    "delete": {
+      "title": "Êtes-vous sûr d'effecer ?"
     }
   }
 }

src/main/webapp/src/stores/configurationStore.ts

@@ -95,6 +95,9 @@ export const useConfigurationStore = defineStore('configuration', () => {
   const isInfo = ref<boolean>(false);
   const currentTab = ref<number>(Tabs.Information);
   const isConfirmation = ref<boolean>(false);
+  const confirmationTitle = computed<string | undefined>(() =>
+    currentFile.value ? `"${currentFile.value.title}"` : undefined,
+  );
   const isNew = ref<boolean>(false);
 
   const resetState = (): void => {
@@ -124,6 +127,7 @@ export const useConfigurationStore = defineStore('configuration', () => {
     isInfo,
     currentTab,
     isConfirmation,
+    confirmationTitle,
     isNew,
     resetState,
     isGrid,