@dative-gpi/foundation-shared-components 1.0.65 → 1.0.67-map-edit

package/components/agenda/FSAgendaHoursRow.vue

@@ -3,6 +3,7 @@
     gap="0"
   >
     <FSRow
+      :padding="`0 ${paddingRightHours} 0 ${paddingLeftHours}`"
       class="fs-agenda-hours-row"
       :wrap="false"
       gap="0"
@@ -36,14 +37,15 @@
       </FSRow>
     </FSRow>
     <FSRow
-      class="fs-agenda-hours-row"
+      :padding="`0 ${paddingRightMarkers} 0 ${paddingLeftMarkers}`"
+      class="fs-agenda-hours-row-markers"
       :wrap="false"
       gap="0"
     >
       <FSRow
-        v-for="hour in hours"
-        :key="hour"
-        :style="getMarkerStyle(displayNow && hour === modelValue)"
+        v-for="hour in 24"
+        :key="hour-1"
+        :style="getMarkerStyle(displayNow && hour-1 === modelValue)"
         width="100%"
         height="0"
         align="center-center"
@@ -59,7 +61,7 @@
 <script lang="ts">
 import { defineComponent, computed, type StyleValue } from 'vue';
 
-import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { useBreakpoints, useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSText from '../FSText.vue';
@@ -87,18 +89,51 @@ export default defineComponent({
       required: false,
       default: false,
     },
+    firstColumnWidth: {
+      type: String,
+      required: true,
+    },
   },
-  setup() {
+  setup(props) {
     const { getColors } = useColors();
+    const { isMobileSized } = useBreakpoints();
 
     const lightColors = getColors(ColorEnum.Light);
     const primaryColors = getColors(ColorEnum.Primary);
     const fontColor = lightColors.dark;
 
+    const hoursToShow = computed(() => {
+      if(isMobileSized.value) {
+        return 12;
+      }
+      return 24;
+    });
+
     const hours = computed(() => {
-      return Array.from({ length: 24 }, (_, i) => i);
+      return Array.from({ length: hoursToShow.value }, (_, i) => i * (24 / hoursToShow.value));
+    });
+
+    const paddingLeftHours = computed(() => {
+      // ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}) is the width of each hour slot (2 hour if 12 hours are shown, 1 hour if 24 hours are shown)
+      // 0.5 * ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}) is half of the width of each hour slot
+      // So we have : ${props.firstColumnWidth} - Half of the width of each hour slot
+      return `calc(${props.firstColumnWidth} - 0.5 * ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}))`;
     });
 
+    const paddingRightHours = computed(() => {
+      return `calc(0.5 * ((100% - ${props.firstColumnWidth}) / ${hoursToShow.value}))`;
+    });
+
+    const paddingLeftMarkers = computed(() => {
+      return `calc(${props.firstColumnWidth} - 0.5 * ((100% - ${props.firstColumnWidth}) / 24))`;
+    });
+
+    const paddingRightMarkers = computed(() => {
+      return `calc(0.5 * ((100% - ${props.firstColumnWidth}) / 24))`;
+    });
+
+
+
     const getMarkerStyle = (isNowHour: boolean): StyleValue => {
       if(isNowHour) {
         return {
@@ -113,8 +148,13 @@ export default defineComponent({
     const to2Digits = (value: number) => value.toString().padStart(2, '0');
 
     return {
-      fontColor,
       hours,
+      fontColor,
+      hoursToShow,
+      paddingLeftHours,
+      paddingRightHours,
+      paddingLeftMarkers,
+      paddingRightMarkers,
       getMarkerStyle,
       to2Digits
     };

package/components/agenda/FSAgendaVerticalEvent.vue

@@ -131,7 +131,7 @@ export default defineComponent({
     const height = computed(() => {
       let start = props.start - dayDurationOffset.value;
       let end = props.end - dayDurationOffset.value;
-      if (props.variant === 'current') {
+      if (props.variant === 'current' && dayEnd.value > props.now) {
         end = props.now;
       } else if (props.end > dayEnd.value) {
         end = dayEnd.value - dayDurationOffset.value;

package/components/agenda/FSDayAgenda.vue

@@ -2,7 +2,6 @@
   <FSRow
     class="fs-day-agenda"
     height="100%"
-    padding="8px 0 0 0"
     :wrap="false"
     gap="0px"
     :style="style"

package/components/agenda/FSMonthAgenda.vue

@@ -9,13 +9,8 @@
       gap="0"
       :wrap="false"
     >
-      <FSCol
-        height="100%"
-        :width="$props.firstColumnWidth"
-      >
-      </FSCol>
-    
       <FSAgendaHoursRow
+        :firstColumnWidth="$props.firstColumnWidth"
         :displayNow="$props.nowIsInSelectedRange"
         :modelValue="nowHour"
       />

package/components/agenda/FSSelectAgendaMode.vue

@@ -42,8 +42,8 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
 
     const items = [
-      { id: AgendaMode.Week, label: $tr('ui.agenda.week', 'Week'), icon: 'mdi-calendar-week' },
-      { id: AgendaMode.Month, label: $tr('ui.agenda.month', 'Month'), icon: 'mdi-calendar-month' },
+      { id: AgendaMode.Week, label: $tr('ui.common.week', 'Week'), icon: 'mdi-calendar-week' },
+      { id: AgendaMode.Month, label: $tr('ui.common.month', 'Month'), icon: 'mdi-calendar-month' },
     ];
 
     return {

package/components/agenda/FSWeekAgenda.vue

@@ -9,13 +9,8 @@
       gap="0"
       :wrap="false"
     >
-      <FSCol
-        height="100%"
-        :width="$props.firstColumnWidth"
-      >
-      </FSCol>
-    
       <FSAgendaHoursRow
+        :firstColumnWidth="$props.firstColumnWidth"
         :displayNow="$props.nowIsInSelectedRange"
         :modelValue="nowHour"
       />
@@ -75,7 +70,7 @@
                 class="fs-agenda-week-number-label"
                 :color="weekTextColor"
               >
-                {{ $tr('ui.common.agenda.week-short', 'W{0}',day.weekNumber) }}
+                {{ $tr('ui.common.week-short', 'W{0}',day.weekNumber) }}
               </FSText>
             </FSCol>
           </FSCard>
@@ -125,7 +120,7 @@
               @click="() => $emit('click:eventId', event.id)"
             >
               <template
-                #default="{ label, icon, timeStart, timeEnd, iconBis, variant }"
+                #default="{ label, icon, timeStart, timeEnd, iconBis, variant, width }"
               >
                 <FSRow
                   align="center-left"
@@ -158,7 +153,7 @@
                     </FSRow>
                   </FSCol>
                   <FSCol
-                    v-if="iconBis && variant !== 'current'"
+                    v-if="iconBis && variant !== 'current' && width > 13"
                     align="center-right"
                     padding="8px 8px 8px 0" 
                     width="hug"
@@ -259,7 +254,7 @@ export default defineComponent({
         $tr('ui.common.monday-short', 'MON'),
         $tr('ui.common.tuesday-short', 'TUE'),
         $tr('ui.common.wednesday-short', 'WED'),
-        $tr('uui.common.thursday-short', 'THU'),
+        $tr('ui.common.thursday-short', 'THU'),
         $tr('ui.common.friday-short', 'FRI'),
         $tr('ui.common.saturday-short', 'SAT')
       ];

package/components/autocompletes/FSAutoCompleteAddress.vue

@@ -1,10 +1,14 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.address', 'Address')"
     :clearable="false"
     :toggleSet="false"
     :multiple="false"
-    :items="places"
-    :modelValue="modelValuePlace"
+    :items="items"
+    :customFilter="(_label: string, _query: string, item: any) => {
+      return item.value !== $props.modelValue?.placeId;
+    }"
+    :modelValue="$props.modelValue?.placeId"
     @update:modelValue="onUpdate"
     v-model:search="search"
     v-bind="$attrs"
@@ -12,7 +16,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, onMounted, ref, watch } from "vue";
+import { computed, defineComponent, ref } from "vue";
 
 import { type Address, type Place } from "@dative-gpi/foundation-shared-domain/models";
 import { useAutocomplete } from "@dative-gpi/foundation-shared-components/composables";
@@ -32,13 +36,26 @@ export default defineComponent({
       required: false,
       default: null
     },
+    label: {
+      type: String,
+      required: false,
+      default: null
+    }
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
     const { search: searchAddress, get: getAddress  } = useAddress();
 
     const places = ref<Place[]>([]);
-    const modelValuePlace = ref<Place | null>(null);
+
+    const items = computed(() => {
+      if(props.modelValue) {
+        const currentPlace = addressToPlace(props.modelValue);
+        const searchedPlaces = places.value.filter((place) => place.id !== currentPlace.id);
+        return [currentPlace, ...searchedPlaces];
+      }
+      return places.value;
+    });
 
     const fetch = async (search: string | null) => {
       if (search === null) {
@@ -69,7 +86,9 @@ export default defineComponent({
       (item) => (item).id,
       (item) => (item).label,
       true,
-      false
+      false,
+      0,
+      500
     );
 
     const addressToPlace = (address: Address): Place => {
@@ -79,23 +98,9 @@ export default defineComponent({
       };
     };
 
-    onMounted(() => {
-      if(!props.modelValue) {
-        return;
-      }
-      modelValuePlace.value = addressToPlace(props.modelValue);
-    });
-
-    watch(() => props.modelValue, (newValue) => {
-      if(!newValue) {
-        return;
-      }
-      modelValuePlace.value = addressToPlace(newValue);
-    });
-
     return {
-      modelValuePlace,
       places,
+      items,
       search,
       onUpdate
     };

package/components/autocompletes/FSAutocompleteLanguage.vue

@@ -1,5 +1,6 @@
 <template>
   <FSAutocompleteField
+    :label="$tr('ui.common.language', 'Language')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -58,6 +59,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -71,7 +77,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-language.placeholder", "{0} language(s) selected", props.modelValue.length);
+        return $tr("autocomplete.language.placeholder", "{0} language(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/autocompletes/FSAutocompleteTimeZone.vue

@@ -1,6 +1,7 @@
 <template>
   <FSAutocompleteField
     itemTitle="id"
+    :label="$tr('ui.common.time-zone', 'Time zone')"
     :toggleSet="!$props.toggleSetDisabled && toggleSet"
     :multiple="$props.multiple"
     :placeholder="placeholder"
@@ -81,6 +82,11 @@ export default defineComponent({
       type: Boolean,
       required: false,
       default: false
+    },
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
     }
   },
   emits: ["update:modelValue"],
@@ -94,7 +100,7 @@ export default defineComponent({
 
     const placeholder = computed((): string | null => {
       if (props.multiple && props.modelValue) {
-        return $tr("ui.autocomplete-time-zone.placeholder", "{0} time zone(s) selected", props.modelValue.length);
+        return $tr("autocomplete.time-zone.placeholder", "{0} time zone(s) selected", props.modelValue.length);
       }
       return null;
     });

package/components/buttons/FSButtonAdd.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-plus-circle-outline"
-    :label="$tr('ui.button.add', 'Add')"
+    :label="$tr('ui.common.add', 'Add')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonAddLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.add', 'Add')"
+    :label="$tr('ui.common.add', 'Add')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonCancel.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-cancel"
-    :label="$tr('ui.button.cancel', 'Cancel')"
+    :label="$tr('ui.common.cancel', 'Cancel')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonCancelLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.cancel', 'Cancel')"
+    :label="$tr('ui.common.cancel', 'Cancel')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonCheckbox.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :prependIcon="prependIcon"
     :load="$props.load"
     :variant="variant"
@@ -40,10 +40,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -57,7 +57,7 @@ export default defineComponent({
     });
 
     const onClick = (): void => {
-      if (props.editable && !props.load) {
+      if (!props.disabled && !props.load) {
         emit("update:modelValue", !props.modelValue);
       }
     };

package/components/buttons/FSButtonCopy.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-copy"
-    :label="$tr('ui.button.copy', 'Copy')"
+    :label="$tr('ui.common.copy', 'Copy')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonCopyLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.copy', 'Copy')"
+    :label="$tr('ui.common.copy', 'Copy')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonDuplicate.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-copy"
-    :label="$tr('ui.button.duplicate', 'Duplicate')"
+    :label="$tr('ui.common.duplicate', 'Duplicate')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonDuplicateLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.duplicate', 'Duplicate')"
+    :label="$tr('ui.common.duplicate', 'Duplicate')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonEdit.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-pencil-outline"
-    :label="$tr('ui.button.edit', 'Edit')"
+    :label="$tr('ui.common.edit', 'Edit')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonEditLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.edit', 'Edit')"
+    :label="$tr('ui.common.edit', 'Edit')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonFile.vue

@@ -2,7 +2,7 @@
   <div>
     <FSButton
       prependIcon="mdi-upload-outline"
-      :label="$tr('ui.button.import-file', 'Import file')"
+      :label="$tr('ui.common.import-file', 'Import file')"
       :color="ColorEnum.Light"
       @click="onClick"
       v-bind="$attrs"

package/components/buttons/FSButtonFileLabel.vue

@@ -1,7 +1,7 @@
 <template>
   <div>
     <FSButton
-      :label="$tr('ui.button.import-file', 'Import file')"
+      :label="$tr('ui.common.import-file', 'Import file')"
       :color="ColorEnum.Light"
       @click="onClick"
       v-bind="$attrs"

package/components/buttons/FSButtonNext.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     appendIcon="mdi-chevron-right"
-    :label="$tr('ui.button.next', 'Next')"
+    :label="$tr('ui.common.next', 'Next')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonNextLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.next', 'Next')"
+    :label="$tr('ui.common.next', 'Next')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonPrevious.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-chevron-left"
-    :label="$tr('ui.button.previous', 'Previous')"
+    :label="$tr('ui.common.previous', 'Previous')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonPreviousLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.previous', 'Previous')"
+    :label="$tr('ui.common.previous', 'Previous')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRedo.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-redo-variant"
-    :label="$tr('ui.button.redo', 'Redo')"
+    :label="$tr('ui.common.redo', 'Redo')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRedoLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.redo', 'Redo')"
+    :label="$tr('ui.common.redo', 'Redo')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRemove.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-delete-outline"
-    :label="$tr('ui.button.remove', 'Remove')"
+    :label="$tr('ui.common.remove', 'Remove')"
     :color="ColorEnum.Error"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRemoveLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.remove', 'Remove')"
+    :label="$tr('ui.common.remove', 'Remove')"
     :color="ColorEnum.Error"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSave.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-save-outline"
-    :label="$tr('ui.button.save', 'Save')"
+    :label="$tr('ui.common.save', 'Save')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSaveLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.save', 'Save')"
+    :label="$tr('ui.common.save', 'Save')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSearch.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-magnify"
-    :label="$tr('ui.button.search', 'Search')"
+    :label="$tr('ui.common.search', 'Search')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSearchLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.search', 'Search')"
+    :label="$tr('ui.common.search', 'Search')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUndo.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-undo-variant"
-    :label="$tr('ui.button.undo', 'Undo')"
+    :label="$tr('ui.common.undo', 'Undo')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUndoLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.undo', 'Undo')"
+    :label="$tr('ui.common.undo', 'Undo')"
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUpdate.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-pencil-outline"
-    :label="$tr('ui.button.update', 'Update')"
+    :label="$tr('ui.common.update', 'Update')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUpdateLabel.vue

@@ -1,6 +1,6 @@
 <template>
   <FSButton
-    :label="$tr('ui.button.update', 'Update')"
+    :label="$tr('ui.common.update', 'Update')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonValidate.vue

@@ -1,7 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-check"
-    :label="$tr('ui.button.validate', 'Validate')"
+    :label="$tr('ui.common.validate', 'Validate')"
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />