fix notifications

Author: LrxGaelle

src/components/specific/projects/project-notification-card/ProjectNotificationCard.vue

@@ -23,21 +23,21 @@
               class="m-t-12"
               @click="$emit('open-recipients-settings')"
             >
-              {{
-                $t("ProjectOverview.notifications.settings.activity.recipientsNotificationsButton")
-              }}
+              {{ $t("ProjectOverview.notifications.settings.activity.recipientsNotificationsButton") }}
               ({{ selectedRecipientsIds.length }})
             </BIMDataButton>
-            <div v-for="(options, section) in activityOptions" :key="section">
+
+            <div v-for="(labels, section) in activityOptions" :key="section">
               <h5>{{ section }}</h5>
               <BIMDataCheckbox
-                v-for="label in options"
-                :key="label"
+                v-for="(label, index) in labels"
+                :key="`${section}-${index}`"
                 :text="label"
-                v-model="modelActivity[label]"
+                v-model="modelActivity[getActivityKey(section, index)]"
                 margin="6px 0"
               />
             </div>
+
             <div class="separator"></div>
           </div>
 
@@ -61,15 +61,16 @@
 
           <!-- Days -->
           <BIMDataCheckbox
-            v-for="[day, isChecked] in Object.entries(modelDays)"
-            :key="`${type}-${day}`"
-            :text="day"
-            v-model="modelDays[day]"
+            v-for="(label, key) in daysLabels"
+            :key="`${type}-${key}`"
+            :text="label"
+            v-model="modelDays[key]"
             margin="6px 0 6px 23px"
           />
+
           <div class="flex items-center m-l-24 m-t-12">
             <span>À :</span>
-            <TimePicker v-model="selectedTime" class="m-x-12" />
+            <TimePicker v-model="notificationTime" class="m-x-12" />
             <BIMDataButton
               color="primary"
               outline
@@ -79,7 +80,7 @@
               style="flex:1;"
               class="justify-between"
             >
-              {{ selectedTimezone || "Timezone" }}
+              {{ currentTimezone }}
               <BIMDataIconChevron size="xxs" fill color="default" />
             </BIMDataButton>
           </div>
@@ -90,15 +91,16 @@
 </template>
 
 <script setup>
-import { ref, defineModel, watch } from "vue";
+import { ref, defineModel, computed, watch } from "vue";
 import { useI18n } from "vue-i18n";
-
 import { useNotificationSchedule } from "../../../../state/notifications.js";
-
+import {
+  getActivityOptions,
+  getDaysLabels,
+  RAW_ACTIVITY_OPTIONS,
+} from "../../../../utils/notifications.js";
 import TimePicker from "../../../generic/time-picker/TimePicker.vue";
 
-const { t } = useI18n();
-
 const props = defineProps({
   title: String,
   type: String,
@@ -107,23 +109,47 @@ const props = defineProps({
     type: Array,
     default: () => [],
   },
+  notification: {
+    type: Object,
+    default: () => ({}),
+  },
 });
 
 const emit = defineEmits([
   "update:notification-mode-value",
   "update:model-days",
   "update:model-activity",
+  "update:selected-time",
   "open-recipients-settings",
   "open-timezone-choice",
 ]);
 
 const open = ref(props.defaultOpen);
 const toggle = () => (open.value = !open.value);
 
-const { selectedTime, selectedTimezone } = useNotificationSchedule();
+const { t } = useI18n();
+const { selectedTimezone } = useNotificationSchedule();
+
 const notificationModeValue = defineModel("notificationModeValue");
 const modelDays = defineModel("modelDays");
 const modelActivity = defineModel("modelActivity");
+const selectedTime = defineModel("selectedTime");
+
+const daysLabels = computed(() => getDaysLabels(t));
+const activityOptions = computed(() => getActivityOptions(t));
+
+const getActivityKey = (section, index) => RAW_ACTIVITY_OPTIONS[section][index];
+
+const notificationTime = computed({
+  get: () => selectedTime.value,
+  set: (val) => {
+    selectedTime.value = val;
+  },
+});
+
+const currentTimezone = computed(() =>
+  props.notification?.schedule?.timezone || selectedTimezone.value || "Timezone"
+);
 
 watch(
   modelDays,
@@ -135,38 +161,14 @@ watch(
   },
   { deep: true }
 );
+
 watch(notificationModeValue, (newValue) => {
   if (newValue !== "scheduled") {
     Object.keys(modelDays.value).forEach((day) => {
       modelDays.value[day] = false;
     });
   }
 });
-const activityOptions = {
-  GED: [
-    t("ProjectOverview.notifications.settings.activity.ged.fileUpload"),
-    t("ProjectOverview.notifications.settings.activity.ged.fileDeletion"),
-    // t("ProjectOverview.notifications.settings.activity.ged.newVersion"),
-    t("ProjectOverview.notifications.settings.activity.ged.folderCreation"),
-    t("ProjectOverview.notifications.settings.activity.ged.folderDeletion"),
-  ],
-  Visa: [
-    t("ProjectOverview.notifications.settings.activity.visa.visaCreation"),
-    t("ProjectOverview.notifications.settings.activity.visa.visaDeletion"),
-    t("ProjectOverview.notifications.settings.activity.visa.visaValidation"),
-    t("ProjectOverview.notifications.settings.activity.visa.visaRejection"),
-  ],
-  BCF: [
-    t("ProjectOverview.notifications.settings.activity.bcf.bcfCreation"),
-    t("ProjectOverview.notifications.settings.activity.bcf.bcfDeletion"),
-  ],
-  "Autres évènements": [
-    t("ProjectOverview.notifications.settings.activity.otherEvents.acceptInvit"),
-    // t("ProjectOverview.notifications.settings.activity.otherEvents.removeModels"),
-    t("ProjectOverview.notifications.settings.activity.otherEvents.createMetaBuilding"),
-    t("ProjectOverview.notifications.settings.activity.otherEvents.deleteMetaBuilding"),
-  ],
-};
 </script>
 
 <style scoped src="./ProjectNotificationCard.css"></style>

src/components/specific/projects/project-notifications-recipients/ProjectNotificationsRecipients.vue

@@ -39,7 +39,7 @@
 </template>
 
 <script setup>
-import { ref } from "vue";
+import { ref, watch } from "vue";
 import { useGroups } from "../../../../state/groups.js";
 import GroupCard from "./group-card/GroupCard.vue";
 
@@ -69,6 +69,14 @@ const updateNotifications = () => {
   emit("update-recipients", selectedGroupIds.value);
   emit("back-to-settings");
 };
+
+watch(
+  () => props.selectedRecipientsIds,
+  (newVal) => {
+    selectedGroupIds.value = [...newVal];
+  },
+  { immediate: true }
+);
 </script>
 
 <style scoped src="./ProjectNotificationsRecipients.css"></style>

src/components/specific/projects/project-notifications-settings/ProjectNotificationsSettings.vue

@@ -13,14 +13,16 @@
         <BIMDataIconClose size="xxs" fill color="granite-light" />
       </BIMDataButton>
     </div>
+
     <div class="header m-t-12">
       <p class="text-center">
         {{ $t("ProjectOverview.notifications.headerText") }}
       </p>
     </div>
+
     <div class="m-t-18">
       <ProjectNotificationCard
-        :notification="notifications"
+        :notification="notification"
         :title="$t('ProjectOverview.notifications.settings.activity.title')"
         type="activity"
         :selectedRecipientsIds="selectedRecipientsIds"
@@ -38,7 +40,7 @@
       </ProjectNotificationCard>
     </div>
 
-    <div class="footer m-t-18">
+    <div class="footer m-t-6">
       <BIMDataButton
         color="primary"
         fill
@@ -54,7 +56,7 @@
 </template>
 
 <script setup>
-import { onMounted } from "vue";
+import { ref, onMounted } from "vue";
 import { useRoute } from "vue-router";
 import { useI18n } from "vue-i18n";
 
@@ -71,6 +73,7 @@ const props = defineProps({
     default: () => [],
   },
 });
+
 const notificationModeActivity = defineModel("notificationModeActivity");
 const checkedDaysActivity = defineModel("checkedDaysActivity");
 const checkedActivity = defineModel("checkedActivity");
@@ -79,23 +82,37 @@ defineEmits(["open-recipients-settings", "close", "open-timezone-choice"]);
 const { t, locale } = useI18n();
 const route = useRoute();
 const { pushNotification } = useAppNotification();
-const {
-  notifications,
-  fetchProjectNotification,
-  updateProjectNotification,
-  deleteProjectNotification,
-} = useProjects();
+const { fetchProjectNotification, updateProjectNotification, deleteProjectNotification } =
+  useProjects();
 
 const spaceID = +route.params.spaceID;
 const projectID = +route.params.projectID;
 const { selectedTime, selectedTimezone } = useNotificationSchedule();
 const activityMapping = getActivityMapping(t);
 
+const defaultDays = {
+  monday: false,
+  tuesday: false,
+  wednesday: false,
+  thursday: false,
+  friday: false,
+  saturday: false,
+  sunday: false,
+};
+const notification = ref({});
+
+if (
+  !checkedDaysActivity.value ||
+  Object.keys(checkedDaysActivity.value).some((k) => !defaultDays.hasOwnProperty(k))
+) {
+  checkedDaysActivity.value = { ...defaultDays };
+}
+
 onMounted(async () => {
   try {
-    const notification = await fetchProjectNotification(spaceID, projectID);
-    if (notification) {
-      initializeStateFromNotification(notification);
+    notification.value = await fetchProjectNotification(spaceID, projectID);
+    if (notification.value) {
+      initializeStateFromNotification(notification.value);
     }
   } catch (error) {
     console.log("Pas de notification configurée dans le projet");
@@ -126,13 +143,7 @@ const updateNotifications = async () => {
       ? {
           time: selectedTime.value,
           timezone: selectedTimezone.value,
-          monday: checkedDaysActivity.value["Lundi"],
-          tuesday: checkedDaysActivity.value["Mardi"],
-          wednesday: checkedDaysActivity.value["Mercredi"],
-          thursday: checkedDaysActivity.value["Jeudi"],
-          friday: checkedDaysActivity.value["Vendredi"],
-          saturday: checkedDaysActivity.value["Samedi"],
-          sunday: checkedDaysActivity.value["Dimanche"],
+          ...checkedDaysActivity.value,
         }
       : null;
 
@@ -152,17 +163,11 @@ const updateNotifications = async () => {
 
   if (notificationModeActivity.value === "disabled") {
     await handleDeleteNotification();
-
     Object.keys(checkedActivity.value).forEach((key) => {
       checkedActivity.value[key] = false;
     });
-
-    Object.keys(checkedDaysActivity.value).forEach((day) => {
-      checkedDaysActivity.value[day] = false;
-    });
-
+    Object.assign(checkedDaysActivity.value, { ...defaultDays });
     props.selectedRecipientsIds.splice(0);
-
     return;
   } else {
     try {
@@ -193,15 +198,18 @@ const initializeStateFromNotification = (notification) => {
 
   if (notification.schedule) {
     Object.assign(checkedDaysActivity.value, {
-      Lundi: notification.schedule.monday,
-      Mardi: notification.schedule.tuesday,
-      Mercredi: notification.schedule.wednesday,
-      Jeudi: notification.schedule.thursday,
-      Vendredi: notification.schedule.friday,
-      Samedi: notification.schedule.saturday,
-      Dimanche: notification.schedule.sunday,
+      monday: notification.schedule.monday,
+      tuesday: notification.schedule.tuesday,
+      wednesday: notification.schedule.wednesday,
+      thursday: notification.schedule.thursday,
+      friday: notification.schedule.friday,
+      saturday: notification.schedule.saturday,
+      sunday: notification.schedule.sunday,
     });
 
+    selectedTime.value = notification.schedule.time;
+    selectedTimezone.value = notification.schedule.timezone;
+
     notificationModeActivity.value = Object.values(checkedDaysActivity.value).some(Boolean)
       ? "scheduled"
       : "immediate";