refactor: replace isAddMode with enum PersonneDialogState

Author: Quentin-Guillemin

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

@@ -18,12 +18,7 @@ import { useI18n } from 'vue-i18n';
 
 const configurationStore = useConfigurationStore();
 const { isEditAllowed } = configurationStore;
-const {
-  currentStructureId,
-  structureTab,
-  isAdditional,
-  // isAddMode
-} = storeToRefs(configurationStore);
+const { currentStructureId, structureTab, isAdditional } = storeToRefs(configurationStore);
 
 const fonctionStore = useFonctionStore();
 const { customMapping } = storeToRefs(fonctionStore);
@@ -54,7 +49,6 @@ const modelValue = computed<boolean>({
 const setSelectedUser = (id: number | undefined) => {
   currentPersonne.value = undefined;
   if (id) {
-    // isAddMode.value = true;
     initCurrentPersonne(id, false);
   } else currentPersonne.value = undefined;
 };

src/main/webapp/src/components/dialogs/personne/PersonneDialog.vue

@@ -4,6 +4,7 @@ import PersonneDialogInfo from '@/components/dialogs/personne/PersonneDialogInfo
 import { useConfigurationStore } from '@/stores/configurationStore.ts';
 import { useFonctionStore } from '@/stores/fonctionStore.ts';
 import { usePersonneStore } from '@/stores/personneStore.ts';
+import { PersonneDialogState } from '@/types/enums/PersonneDialogState';
 import { Tabs } from '@/types/enums/Tabs.ts';
 import debounce from 'lodash.debounce';
 import { storeToRefs } from 'pinia';
@@ -12,7 +13,7 @@ import { useI18n } from 'vue-i18n';
 
 const configurationStore = useConfigurationStore();
 const { isEditAllowed } = configurationStore;
-const { structureTab, isAddMode } = storeToRefs(configurationStore);
+const { structureTab, personneDialogState } = storeToRefs(configurationStore);
 
 const fonctionStore = useFonctionStore();
 const { customMapping, isCustomMapping } = storeToRefs(fonctionStore);
@@ -30,20 +31,23 @@ const modelValue = computed<boolean>({
 });
 
 const title = computed<string>(() => {
-  if (currentPersonne.value) {
-    return isAddMode.value
-      ? `${t('person.information.additionalFunction', 2)} - ${currentPersonne.value.cn}`
-      : currentPersonne.value.cn;
+  if (!currentPersonne.value) return '';
+  const { cn } = currentPersonne.value;
+  switch (personneDialogState.value) {
+    case PersonneDialogState.ManageAdditional:
+      return `${t('person.information.additionalFunction', 2)} - ${cn}`;
+    case PersonneDialogState.Info:
+    default:
+      return cn;
   }
-  return '';
 });
 
 // Reset modal on close
 watch(isCurrentPersonne, (newValue) => {
   if (!newValue) {
     const reset = debounce(() => {
       currentPersonne.value = undefined;
-      isAddMode.value = false;
+      personneDialogState.value = PersonneDialogState.Info;
     }, 200);
     reset();
   }
@@ -55,16 +59,16 @@ watch(isCurrentPersonne, (newValue) => {
     <v-card>
       <v-toolbar color="rgba(255, 255, 255, 0)">
         <v-toolbar-title class="text-h6">{{ title }}</v-toolbar-title>
-        <template v-if="!isAddMode" #append>
+        <template v-if="personneDialogState == PersonneDialogState.Info" #append>
           <v-btn icon="fas fa-xmark" color="default" variant="plain" @click="isCurrentPersonne = false" />
         </template>
       </v-toolbar>
 
-      <personne-dialog-info v-if="!isAddMode" :personne="currentPersonne" />
+      <personne-dialog-info v-if="personneDialogState == PersonneDialogState.Info" :personne="currentPersonne" />
 
       <personne-dialog-additional
         v-if="
-          isAddMode &&
+          personneDialogState == PersonneDialogState.ManageAdditional &&
           structureTab == Tabs.SchoolStaff &&
           isCustomMapping &&
           isEditAllowed(currentPersonne ? currentPersonne.etat : '')

src/main/webapp/src/components/dialogs/personne/PersonneDialogAdditional.vue

@@ -3,6 +3,7 @@ import CheckboxLayout from '@/components/layouts/CheckboxLayout.vue';
 import { setPersonneAdditional } from '@/services/personneService.ts';
 import { useConfigurationStore } from '@/stores/configurationStore.ts';
 import { usePersonneStore } from '@/stores/personneStore.ts';
+import { PersonneDialogState } from '@/types/enums/PersonneDialogState.ts';
 import type { Filiere } from '@/types/filiereType.ts';
 import type { Personne } from '@/types/personneType.ts';
 import { toIdentifier } from '@/utils/accountUtils.ts';
@@ -13,7 +14,7 @@ import { toast } from 'vue3-toastify';
 import { useI18n } from 'vue-i18n';
 
 const configurationStore = useConfigurationStore();
-const { currentStructureId, isAddMode } = storeToRefs(configurationStore);
+const { currentStructureId, personneDialogState } = storeToRefs(configurationStore);
 
 const personneStore = usePersonneStore();
 const { refreshCurrentPersonne } = personneStore;
@@ -68,7 +69,7 @@ const save = async () => {
 };
 
 const cancel = () => {
-  isAddMode.value = false;
+  personneDialogState.value = PersonneDialogState.Info;
 };
 
 const resetAddMode = (success?: boolean) => {
@@ -79,7 +80,7 @@ const resetAddMode = (success?: boolean) => {
   } else if (!success && success != undefined) {
     toast.error(t(`toast.additional.error.${title}`));
   }
-  isAddMode.value = false;
+  cancel();
 };
 
 onMounted(() => {

src/main/webapp/src/components/dialogs/personne/PersonneDialogInfo.vue

@@ -6,6 +6,7 @@ import { useFonctionStore } from '@/stores/fonctionStore.ts';
 import { usePersonneStore } from '@/stores/personneStore.ts';
 import type { enumValues } from '@/types/enumValuesType.ts';
 import { CategoriePersonne } from '@/types/enums/CategoriePersonne.ts';
+import { PersonneDialogState } from '@/types/enums/PersonneDialogState.ts';
 import { Tabs } from '@/types/enums/Tabs.ts';
 import type { Personne } from '@/types/personneType.ts';
 import { getCategoriePersonne, getEtat } from '@/utils/accountUtils.ts';
@@ -17,7 +18,7 @@ import { useI18n } from 'vue-i18n';
 
 const configurationStore = useConfigurationStore();
 const { isEditAllowed, getLoginOffice } = configurationStore;
-const { structureTab, isAddMode } = storeToRefs(configurationStore);
+const { structureTab, personneDialogState } = storeToRefs(configurationStore);
 
 const fonctionStore = useFonctionStore();
 const { allFilieres, isCustomMapping } = storeToRefs(fonctionStore);
@@ -141,7 +142,7 @@ const isInfo2 = useSessionStorage<boolean>(`${__APP_SLUG__}.is-info2`, true);
             density="compact"
             :text="t(hasStructureAdditionalFonctions ? 'button.edit' : 'button.add')"
             class="ml-2"
-            @click="isAddMode = true"
+            @click="personneDialogState = PersonneDialogState.ManageAdditional"
           >
             <template #prepend>
               <v-icon :icon="hasStructureAdditionalFonctions ? 'fas fa-pen' : 'fas fa-plus'" size="sm" />

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

@@ -1,6 +1,7 @@
 import { getConfiguration } from '@/services/configurationService.ts';
 import type { Configuration } from '@/types/configurationType.ts';
 import type { enumValues } from '@/types/enumValuesType.ts';
+import { PersonneDialogState } from '@/types/enums/PersonneDialogState.ts';
 import { Tabs } from '@/types/enums/Tabs.ts';
 import type { Identity } from '@/types/identityType.ts';
 import type { SimplePersonne } from '@/types/personneType.ts';
@@ -115,10 +116,13 @@ export const useConfigurationStore = defineStore('configuration', () => {
 
   const isLoading = ref<boolean>(false);
 
+  /* -- Gestion de la modale personne -- */
+
+  const personneDialogState = ref<PersonneDialogState>(PersonneDialogState.Info);
+
   /* -- Gestion de la modale des complémentaires -- */
 
   const isAdditional = ref<boolean>(false);
-  const isAddMode = ref<boolean>(false);
 
   const isQuickAdd = ref<boolean>(false);
   const requestAdd = ref<{
@@ -150,8 +154,8 @@ export const useConfigurationStore = defineStore('configuration', () => {
     setStructureTab,
     search,
     isLoading,
+    personneDialogState,
     isAdditional,
-    isAddMode,
     isQuickAdd,
     requestAdd,
     identity,

src/main/webapp/src/types/enums/PersonneDialogState.ts

@@ -0,0 +1,5 @@
+export enum PersonneDialogState {
+  Info,
+  ManageAdditional,
+  ManageFunctions,
+}