@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/components/agenda/FSWeekAgenda.vue

@@ -0,0 +1,323 @@
+<template>
+  <FSCol
+    class="fs-agenda-month-container"
+    height="100%"
+    width="100%"
+    gap="0"
+  >
+    <FSRow
+      gap="0"
+      :wrap="false"
+    >
+      <FSAgendaHoursRow
+        :firstColumnWidth="$props.firstColumnWidth"
+        :displayNow="$props.nowIsInSelectedRange"
+        :modelValue="nowHour"
+      />
+    </FSRow>
+    <FSRow
+      class="fs-agenda-month"
+      height="100%"
+      :style="style"
+      :wrap="false"
+      gap="0px"
+    >
+      <FSCol
+        class="fs-agenda-label-day-container"
+        height="100%"
+        gap="0"
+        :width="$props.firstColumnWidth"
+      >
+        <FSCol
+          class="fs-agenda-label-day"
+          v-for="day in weekDays"
+          :style="getDayLabelStyle(day.isNowDay)"
+          :key="day.dayNumber"
+          height="100%"
+          width="100%"
+        >
+          <FSCard
+            height="100%"
+            width="100%"
+            :borderRadius="0"
+            :border="false"
+            variant="standard"
+            :color="day.isNowDay ? 'primary' : 'background'"
+          >
+            <FSCol
+              padding="6px"
+              height="100%"
+              width="100%"
+              gap="2px"
+              align="center-left"
+            >
+              <FSCol
+                gap="0px"
+              >
+                <FSSpan
+                  font="text-overline"
+                >
+                  {{ day.dayName }}
+                </FSSpan>
+                <FSSpan
+                  font="text-h3"
+                >
+                  {{ to2Digits(day.dayNumber) }}
+                </FSSpan>
+              </FSCol>
+              <FSText
+                font="text-overline"
+                class="fs-agenda-week-number-label"
+                :color="weekTextColor"
+              >
+                {{ $tr('ui.common.week-short', 'W{0}',day.weekNumber) }}
+              </FSText>
+            </FSCol>
+          </FSCard>
+        </FSCol>
+
+      </FSCol>
+      <FSCol
+        class="fs-agenda-body"
+        gap="0"
+        height="100%"
+        width="100%"
+      >
+        <slot />
+        <template
+          v-if="loading"
+        >
+          <FSLoader
+            height="100%"
+            width="100%"
+            padding="2px"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <FSRow
+            v-for="day in weekDays"
+            :key="day.dayNumber"
+            class="fs-agenda-row-day"
+            height="100%"
+            width="fill"
+            align="center-left"
+          >
+            <FSAgendaHorizontalEvent
+              v-for="event in getDayEvents(day.dayStartEpoch)"
+              :key="event.id"
+              :variant="event.end < now ? 'past' : event.start > now ? 'future' : 'current'"
+              :now="now"
+              :dayStart="day.dayStartEpoch"
+              :label="event.label"
+              :start="event.start"
+              :end="event.end"
+              :icon="event.icon"
+              :iconBis="event.iconBis"
+              :id="event.id"
+              :color="event.color"
+              @click="() => $emit('click:eventId', event.id)"
+            >
+              <template
+                #default="{ label, icon, timeStart, timeEnd, iconBis, variant, width }"
+              >
+                <FSRow
+                  align="center-left"
+                  gap="4px"
+                  :wrap="false"
+                >
+                  <FSCol
+                    height="100%"
+                    width="fill"
+                    align="center-left"
+                    padding="8px 0 8px 8px"
+                  >
+                    <FSSpan>
+                      {{ `${timeStart} - ${timeEnd}` }}
+                    </FSSpan>
+                    <FSRow
+                      align="center-left"
+                      :wrap="false"
+                    >
+                      <FSIcon
+                        v-if="icon"
+                        :icon="icon"
+                        size="24px"
+                      />
+                      <FSSpan
+                        font="text-button"
+                      >
+                        {{ label }}
+                      </FSSpan>
+                    </FSRow>
+                  </FSCol>
+                  <FSCol
+                    v-if="iconBis && variant !== 'current' && width > 13"
+                    align="center-right"
+                    padding="8px 8px 8px 0" 
+                    width="hug"
+                  >
+                    <FSIcon
+                      :icon="iconBis"
+                      size="20px"
+                    />
+                  </FSCol>
+                </FSRow>
+              </template>
+            </FSAgendaHorizontalEvent>
+          </FSRow>
+        </template>
+      </FSCol>
+    </FSRow>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { defineComponent, computed, type PropType, type StyleValue } from 'vue';
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum, type FSAgendaEvent } from "@dative-gpi/foundation-shared-components/models";
+
+import FSAgendaHorizontalEvent from './FSAgendaHorizontalEvent.vue';
+import FSAgendaHoursRow from './FSAgendaHoursRow.vue';
+import FSCard from '../FSCard.vue';
+import FSCol from '../FSCol.vue';
+import FSRow from '../FSRow.vue';
+import FSLoader from '../FSLoader.vue';
+import FSSpan from '../FSSpan.vue';
+import FSIcon from '../FSIcon.vue';
+import FSText from '../FSText.vue';
+
+export default defineComponent({
+  name: 'FSWeekAgenda',
+  components: {
+    FSAgendaHorizontalEvent,
+    FSAgendaHoursRow,
+    FSCard,
+    FSCol,
+    FSIcon,
+    FSLoader,
+    FSRow,
+    FSSpan,
+    FSText
+  },
+  props: {
+    now: {
+      type: Number,
+      required: true
+    },
+    start: {
+      type: Number,
+      required: true
+    },
+    end: {
+      type: Number,
+      required: true
+    },
+    nowIsInSelectedRange: {
+      type: Boolean,
+      required: true
+    },
+    firstColumnWidth: {
+      type: String,
+      required: true
+    },
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    events: {
+      type: Array as PropType<FSAgendaEvent[]>,
+      default: () => []
+    }
+  },
+  emits: ['click:eventId'],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+    const { getColors } = useColors();
+    const { epochToWeekNumber } = useDateFormat();
+
+    const primaryColors = getColors(ColorEnum.Primary);
+    const lightColors = getColors(ColorEnum.Light);
+
+    const weekTextColor = lightColors.dark;
+
+    const nowHour = computed(() => new Date(props.now).getHours());
+
+    const weekDays = computed(() => {
+      const daysOfWeek = [
+        $tr('ui.common.sunday-short', 'SUN'),
+        $tr('ui.common.monday-short', 'MON'),
+        $tr('ui.common.tuesday-short', 'TUE'),
+        $tr('ui.common.wednesday-short', 'WED'),
+        $tr('ui.common.thursday-short', 'THU'),
+        $tr('ui.common.friday-short', 'FRI'),
+        $tr('ui.common.saturday-short', 'SAT')
+      ];
+      const weekDaysArray = [];
+      const nowDate = new Date(props.now);
+
+      let currentDay = new Date(props.start); 
+      const endDate = new Date(props.end);
+
+      while (currentDay <= endDate) {
+        weekDaysArray.push({
+          dayNumber: currentDay.getDate(),
+          dayName: daysOfWeek[currentDay.getDay()],
+          dayStartEpoch: currentDay.getTime(),
+          weekNumber: epochToWeekNumber(currentDay.getTime()),
+          isNowDay: currentDay.toDateString() === nowDate.toDateString(),
+        });
+
+        currentDay.setDate(currentDay.getDate() + 1);
+      }
+
+      return weekDaysArray;
+    });
+
+    const style = computed((): StyleValue => {
+      return {
+        '--fs-agenda-row-day-border-bottom-color': lightColors.base,
+      };
+    });
+
+    const to2Digits = (value: number | string) => {
+      return value.toString().padStart(2, '0');
+    };
+
+    const getDayLabelStyle = (isNowDay: boolean = false) => {
+      if (isNowDay) {
+        return {
+          '--fs-agenda-label-day-border-bottom-color': primaryColors.base,
+          '--fs-agenda-label-day-border-right-color': lightColors.base,
+        };
+      }
+      return {
+        '--fs-agenda-label-day-border-bottom-color': lightColors.base,
+        '--fs-agenda-label-day-border-right-color': lightColors.base,
+      };
+    };
+
+    const getDayEvents = (dayStartEpoch: number) => {
+      return props.events.filter((event) => {
+        const dayEndEpoch = dayStartEpoch + 1000 * 60 * 60 * 24;
+        return event.start < dayEndEpoch && event.end > dayStartEpoch;
+      });
+    };
+
+    return {
+      style,
+      nowHour,
+      weekDays,
+      weekTextColor,
+      getDayEvents,
+      getDayLabelStyle,
+      to2Digits
+    };
+  },
+});
+</script>

package/components/autocompletes/FSAutoCompleteAddress.vue

@@ -1,10 +1,11 @@
 <template>
   <FSAutocompleteField
+    :label="$props.label ?? $tr('ui.common.address', 'Address')"
     :clearable="false"
     :toggleSet="false"
     :multiple="false"
-    :items="places"
-    :modelValue="modelValuePlace"
+    :items="items"
+    :modelValue="$props.modelValue?.placeId"
     @update:modelValue="onUpdate"
     v-model:search="search"
     v-bind="$attrs"
@@ -12,7 +13,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 +33,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 +83,9 @@ export default defineComponent({
       (item) => (item).id,
       (item) => (item).label,
       true,
-      false
+      false,
+      0,
+      500
     );
 
     const addressToPlace = (address: Address): Place => {
@@ -79,23 +95,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/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/FSButtonDragIcon.vue

@@ -0,0 +1,27 @@
+<template>
+  <FSButton
+    icon="mdi-drag"
+    variant="icon"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSButton from "../FSButton.vue";
+
+export default defineComponent({
+  name: "FSButtonCopyIcon",
+  components: {
+    FSButton
+  },
+  setup() {
+    return {
+      ColorEnum
+    }
+  }
+});
+</script>

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"
   />