#302 - Paramètres du calendrier (affichage uniquement) (#311)

* Petite correction de l'affichage

* Prise en charge de l'affichage sélectif dans les événements du calendrier

CHANGELOG.md

@@ -9,6 +9,7 @@ Ce projet adhère au principe du [Semantic Versioning](https://semver.org/spec/v
 - Enlève la limite de caractères du champ "lieu" des événements (#300).
 - Google Maps est maintenant utilisé à la place de OpenStreetMap pour ouvrir les adresses (#300).
 - Utilise une période plutôt qu'une simple date pour le calcul des quantités disponibles du matériel (#301).
+- Il est maintenant possible de choisir ce qui est affiché ou non dans les événements sur le calendrier (#302).
 
 ## 0.16.2 (2021-11-04)
 

client/src/components/EventBeneficiaries/Item/index.js

@@ -1,4 +1,5 @@
 import './index.scss';
+import { Fragment } from 'vue-fragment';
 
 // @vue/component
 export default {
@@ -15,12 +16,15 @@ export default {
                     {beneficiary.full_name}
                 </router-link>
                 {beneficiary.company && (
-                    <router-link
-                        to={`/companies/${beneficiary.company_id}`}
-                        title={__('action-edit')}
-                    >
-                        ({beneficiary.company.legal_name})
-                    </router-link>
+                    <Fragment>
+                        {' '}
+                        <router-link
+                            to={`/companies/${beneficiary.company_id}`}
+                            title={__('action-edit')}
+                        >
+                            ({beneficiary.company.legal_name})
+                        </router-link>
+                    </Fragment>
                 )}
             </div>
         );

client/src/index.js

@@ -100,8 +100,14 @@ Vue.use(Toasted, {
     },
 });
 
-store.dispatch('auth/fetch').then(() => {
-    /* eslint-disable no-new */
+const boot = async () => {
+    await store.dispatch('auth/fetch');
+
+    if (store.getters['auth/isLogged']) {
+        await store.dispatch('settings/fetch');
+    }
+
+    // eslint-disable-next-line no-new
     new Vue({
         el: '#app',
         store,
@@ -114,4 +120,5 @@ store.dispatch('auth/fetch').then(() => {
             );
         },
     });
-});
+};
+boot();

client/src/locale/en/common.js

@@ -51,6 +51,7 @@ export default {
     'locked': "locked",
     'clear-filters': "Clear filters",
     'optional': "Optional",
+    'and-n-others': ["and {count} other", "and {count} others"],
 
     'save': "Save",
     'save-draft': "Save draft",

client/src/locale/fr/common.js

@@ -51,6 +51,7 @@ export default {
     'locked': "verrouillé",
     'clear-filters': "Réinitialiser les filtres",
     'optional': "Optionnel",
+    'and-n-others': ["et {count} autre", "et {count} autres"],
 
     'save': "Sauvegarder",
     'save-draft': "Sauvegarder le brouillon",

client/src/pages/Calendar/_utils.js

@@ -3,11 +3,8 @@ import getMainIcon from '@/utils/timeline-event/getMainIcon';
 import getTimelineEventClassNames from '@/utils/timeline-event/getClassNames';
 import getTimelineEventI18nStatuses from '@/utils/timeline-event/getI18nStatuses';
 
-const formatEvent = (dataEvent, translate) => {
-    const withIcon = (iconName, text) => (
-        iconName ? `<i class="fas fa-${iconName}"></i> ${text}` : text
-    );
-
+const formatEvent = (dataEvent, __, options = {}) => {
+    const { showLocation = true, showBorrower = false } = options;
     const formattedEvent = formatTimelineEvent(dataEvent);
     const {
         title,
@@ -23,35 +20,72 @@ const formatEvent = (dataEvent, translate) => {
         technicians,
     } = formattedEvent;
 
-    let baseContent = title;
-    if (hasMissingMaterials || hasNotReturnedMaterials) {
-        baseContent = withIcon('exclamation-triangle', baseContent);
-    }
+    const withIcon = (iconName, text) => (
+        iconName ? `<i class="fas fa-${iconName}"></i> ${text}` : text
+    );
 
-    let content = withIcon(getMainIcon(formattedEvent), baseContent);
+    // - Période de l'événement
+    const dates = withIcon('clock', __('from-date-to-date', {
+        from: start.format('L'),
+        to: end.format('L'),
+    }));
 
+    // - Location
     const locationText = withIcon('map-marker-alt', location || '?');
-    if (location) {
-        content = `${content} − ${locationText}`;
+
+    // - Bénéficiaire
+    const hasBorrower = beneficiaries.length > 0;
+    let beneficiariesText = withIcon('exclamation-triangle', `<em>(${__('missing-beneficiary')})</em>`);
+    if (hasBorrower) {
+        const beneficiariesNames = beneficiaries.map((beneficiary) => {
+            if (!beneficiary.company) {
+                return beneficiary.full_name;
+            }
+            return `${beneficiary.full_name} (${beneficiary.company.legal_name})`;
+        });
+        beneficiariesText = withIcon('address-book', `${__('for')} ${beneficiariesNames.join(', ')}`);
     }
 
-    const dates = withIcon(
-        'clock',
-        translate('from-date-to-date', { from: start.format('L'), to: end.format('L') }),
-    );
+    // - Summary
+    const summaryParts = [title];
+    if (showLocation && location) {
+        summaryParts.push(locationText);
+    }
+    if (showBorrower && hasBorrower) {
+        const firstBeneficiary = beneficiaries[0];
+        const firstBeneficiaryIsCompany = !!firstBeneficiary.company;
 
-    let beneficiariesText = withIcon(
-        'exclamation-triangle',
-        `<em>(${translate('missing-beneficiary')})</em>`,
-    );
-    if (beneficiaries.length > 0) {
-        const beneficiariesNames = beneficiaries.map((beneficiary) => beneficiary.full_name);
-        beneficiariesText = withIcon(
-            'address-book',
-            `${translate('for')} ${beneficiariesNames.join(', ')}`,
-        );
+        let beneficiaryExcerpt = firstBeneficiaryIsCompany
+            ? firstBeneficiary.company.legal_name
+            : firstBeneficiary.full_name;
+
+        if (beneficiaries.length > 1) {
+            const countSecondaryBeneficiaries = beneficiaries.length - 1;
+            // eslint-disable-next-line prefer-template
+            beneficiaryExcerpt += ' ' + __(
+                'and-n-others',
+                { count: countSecondaryBeneficiaries },
+                countSecondaryBeneficiaries,
+            );
+
+            beneficiaryExcerpt = withIcon('users', beneficiaryExcerpt);
+        } else {
+            beneficiaryExcerpt = withIcon(
+                firstBeneficiaryIsCompany ? 'industry' : 'user',
+                beneficiaryExcerpt,
+            );
+        }
+        summaryParts.push(beneficiaryExcerpt);
     }
 
+    let summary;
+    summary = summaryParts.join(' - ');
+    summary = hasMissingMaterials || hasNotReturnedMaterials
+        ? withIcon('exclamation-triangle', summary)
+        : summary;
+    summary = withIcon(getMainIcon(formattedEvent), summary);
+
+    // - Techniciens
     let techniciansText = '';
     if (technicians.length > 0) {
         const techniciansNames = technicians
@@ -61,19 +95,18 @@ const formatEvent = (dataEvent, translate) => {
                 ) === index
             ))
             .map(({ technician }) => technician.full_name);
-        techniciansText = withIcon(
-            'people-carry',
-            `${translate('with')} ${techniciansNames.join(', ')}`,
-        );
+
+        techniciansText = withIcon('people-carry', `${__('with')} ${techniciansNames.join(', ')}`);
     }
 
+    // - Statut
     const statusesText = getTimelineEventI18nStatuses(formattedEvent)
-        .map(({ icon, i18nKey }) => withIcon(icon, translate(`page-calendar.${i18nKey}`)))
+        .map(({ icon, i18nKey }) => withIcon(icon, __(`page-calendar.${i18nKey}`)))
         .join('\n');
 
     return {
         ...formattedEvent,
-        content,
+        content: summary,
         start,
         end,
         editable: !isConfirmed || (isPast && !isConfirmed && !isInventoryDone),

client/src/pages/Calendar/index.js

@@ -44,7 +44,6 @@ export default {
             hasMissingMaterialFilter: false,
             parkId: parkFilter ? Number.parseInt(parkFilter, 10) : null,
             events: [],
-            allEvents: [],
             timelineOptions: {
                 start,
                 end,
@@ -54,25 +53,33 @@ export default {
             },
         };
     },
-    mounted() {
-        this.getEventsData();
-    },
-    methods: {
-        filterEvents() {
-            let events = [...this.allEvents];
+    computed: {
+        formattedEvents() {
+            const { $t: __, $store: { state: { settings } } } = this;
+            const { showLocation = true, showBorrower = false } = settings.calendar.event;
+            return this.events.map((event) => formatEvent(event, __, { showBorrower, showLocation }));
+        },
+
+        filteredEvents() {
+            let events = [...this.formattedEvents];
+
             if (this.parkId) {
-                events = events.filter(
-                    ({ parks: eventParks }) => eventParks?.includes(this.parkId),
-                );
+                events = events.filter(({ parks: eventParks }) => (
+                    eventParks?.includes(this.parkId)
+                ));
             }
 
             if (this.hasMissingMaterialFilter) {
                 events = events.filter(({ hasMissingMaterials }) => !!hasMissingMaterials);
             }
 
-            this.events = events;
+            return events;
         },
-
+    },
+    mounted() {
+        this.getEventsData();
+    },
+    methods: {
         getEventsData() {
             this.error = null;
             this.isLoading = true;
@@ -84,11 +91,7 @@ export default {
             };
             this.$http.get(this.$route.meta.resource, { params })
                 .then(({ data }) => {
-                    this.events = data.data.map((event) => formatEvent(event, this.$t));
-
-                    this.allEvents = [...this.events];
-                    this.filterEvents();
-
+                    this.events = data.data;
                     this.isLoading = false;
                 })
                 .catch((error) => {
@@ -217,14 +220,12 @@ export default {
         },
 
         handleUpdateEvent(newEventData) {
-            const events = [...this.events];
-            const toUpdateIndex = events.findIndex((event) => event.id === newEventData.id);
-            if (toUpdateIndex < 0) {
-                return;
+            const toUpdateIndex = this.events.findIndex(
+                (event) => event.id === newEventData.id,
+            );
+            if (toUpdateIndex >= 0) {
+                this.$set(this.events, toUpdateIndex, newEventData);
             }
-
-            events[toUpdateIndex] = formatEvent(newEventData, this.$t);
-            this.events = events;
         },
 
         handleDuplicateEvent(newEvent) {
@@ -258,12 +259,10 @@ export default {
 
         handleFilterMissingMaterial(hasMissingMaterialFilter) {
             this.hasMissingMaterialFilter = hasMissingMaterialFilter;
-            this.filterEvents();
         },
 
         handleFilterByPark(parkId) {
             this.parkId = parkId === '' ? null : Number.parseInt(parkId, 10);
-            this.filterEvents();
         },
     },
 };

client/src/pages/Calendar/index.vue

@@ -15,7 +15,7 @@
             <Timeline
                 ref="Timeline"
                 class="Calendar__timeline"
-                :items="events"
+                :items="filteredEvents"
                 :options="timelineOptions"
                 @itemOver="onItemOver"
                 @itemOut="onItemOut"

client/src/pages/Settings/EventSummary/Form/index.js

@@ -7,7 +7,6 @@ const LIST_MODES = ['categories', 'sub-categories', 'parks', 'flat'];
 export default {
     name: 'EventSummarySettingsForm',
     props: {
-        settings: Object,
         isSaving: Boolean,
         errors: Object,
     },
@@ -22,6 +21,10 @@ export default {
         };
     },
     computed: {
+        values() {
+            const { $store: { state: { settings } } } = this;
+            return settings.eventSummary;
+        },
         listModeOptions() {
             const parks = this.$store.state.parks.list;
 
@@ -44,7 +47,7 @@ export default {
     render() {
         const {
             $t: __,
-            settings,
+            values,
             listModeOptions,
             defaultListMode,
             handleSubmit,
@@ -59,27 +62,27 @@ export default {
                     <FormField
                         type="select"
                         label="page-settings.event-summary.display-mode"
-                        name="event_summary_material_display_mode"
+                        name="eventSummary.materialDisplayMode"
                         options={listModeOptions}
-                        value={settings?.event_summary_material_display_mode || defaultListMode}
-                        errors={errors?.event_summary_material_display_mode}
+                        value={values.materialDisplayMode || defaultListMode}
+                        errors={errors?.eventSummary.materialDisplayMode}
                     />
                 </section>
                 <section class="EventSummarySettingsForm__section">
                     <h3>{__('page-settings.event-summary.custom-text')}</h3>
                     <FormField
                         type="text"
                         label="page-settings.event-summary.custom-text-title"
-                        name="event_summary_custom_text_title"
-                        value={settings?.event_summary_custom_text_title || ''}
-                        errors={errors?.event_summary_custom_text_title}
+                        name="eventSummary.customText.title"
+                        value={values.customText.title || ''}
+                        errors={errors?.eventSummary.customText.title}
                     />
                     <FormField
                         type="textarea"
                         label="page-settings.event-summary.custom-text-content"
-                        name="event_summary_custom_text"
-                        value={settings?.event_summary_custom_text || ''}
-                        errors={errors?.event_summary_custom_text}
+                        name="eventSummary.customText.content"
+                        value={values.customText.content || ''}
+                        errors={errors?.eventSummary.customText.content}
                     />
                 </section>
                 <section class="EventSummarySettingsForm__actions">