@dative-gpi/foundation-shared-components 1.0.57 → 1.0.58-groupings

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

package/components/buttons/FSButtonValidateLabel.vue

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

package/components/calendar/FSSimpleCalendar.vue

@@ -0,0 +1,145 @@
+<template>
+  <FSCol>
+    <FSRow
+      v-if="$props.showHeader"
+      :wrap="false"
+    >
+      <FSCol
+        v-for="i in 7"
+        :key="i"
+        :style="{
+          minWidth: `calc((100% - 8px * 7) / 7)`, 
+          maxWidth: `calc((100% - 8px * 7) / 7)`
+        }"
+        align="center-center"
+      >
+        {{ dayLabel(i - 1) }}
+      </FSCol>
+    </FSRow>
+    <FSRow>
+      <FSCol
+        v-for="date in days"
+        :key="$props.month + $props.year + date.date.toISOString()"
+        :style="{
+          minWidth: `calc((100% - 8px * 7) / 7)`, 
+          maxWidth: `calc((100% - 8px * 7) / 7)`
+        }"
+        align="center-center"
+        height="hug"
+      >
+        <slot
+          name="day"
+          v-bind="date"
+        />
+      </FSCol>
+    </FSRow>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { startOfWeek, endOfWeek, endOfMonth, isSameDay, isBefore, isAfter, isSameMonth, addDays } from "date-fns";
+import { defineComponent, computed } from "vue";
+
+import { dayLabel } from "../../tools";
+
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSCalendarHeader",
+  components: {
+    FSRow,
+    FSCol
+  },
+  props: {
+    year: {
+      type: Number,
+      required: true
+    },
+    month: {
+      type: Number,
+      required: true
+    },
+    showHeader: {
+      type: Boolean,
+      default: true
+    }
+  },
+  setup(props) {
+
+    const { getMachineOffset } = useAppTimeZone();
+
+    const firstDayOfMonth = computed(() => {
+      const date = new Date(props.year, props.month - 1, 1);
+      const offset = getMachineOffset(date.getTime());
+
+      date.setTime(date.getTime() + offset);
+
+      return date;
+    })
+
+    const firstMonday = computed(() => {
+      const day = new Date(firstDayOfMonth.value);
+      
+      const date = startOfWeek(day, { weekStartsOn: 1 });
+      const offset = getMachineOffset(date.getTime());
+
+      date.setTime(date.getTime() + offset);
+
+      return date;
+    });
+
+    const endDayOfMonth = computed(() => {
+      const day = new Date(firstDayOfMonth.value);
+
+      const date = endOfMonth(day);
+      const offset = getMachineOffset(date.getTime());
+
+      date.setTime(date.getTime() + offset);
+
+      return date;
+    });
+
+    const lastSunday = computed(() => {
+      const day = new Date(endDayOfMonth.value);
+
+      const date = endOfWeek(day, { weekStartsOn: 1 });
+      const offset = getMachineOffset(date.getTime());
+
+      date.setTime(date.getTime() + offset);
+
+      return date;
+    });
+
+    const days = computed(() => {
+      const result = [];
+
+      let currentDay = new Date(firstMonday.value);
+      const today = new Date();
+
+      while (currentDay <= lastSunday.value) {
+        result.push({
+          date: new Date(currentDay),
+          isToday: isSameDay(currentDay, today),
+          isPast: isBefore(currentDay, today) && !isSameDay(currentDay, today),
+          isFutur: isAfter(currentDay, today) && !isSameDay(currentDay, today),
+          isPreviousMonth: isBefore(currentDay, firstDayOfMonth.value),
+          isNextMonth: isAfter(currentDay, endDayOfMonth.value),
+          isCurrentMonth: isSameMonth(currentDay, firstDayOfMonth.value)
+        });
+
+        currentDay = addDays(currentDay, 1);
+      }
+
+      return result;
+    });
+
+    return {
+      dayLabel,
+      days
+    };
+  }
+});
+</script>

package/components/calendar/FSSimpleCalendarHeader.vue

@@ -0,0 +1,60 @@
+<template>
+  <FSRow>
+    <FSSimpleMonthSelector 
+      width="hug"
+      :year="$props.year"
+      :month="$props.month"
+      @update:year="$emit('update:year', $event)"
+      @update:month="$emit('update:month', $event)"
+      @update="$emit('update', $event)"
+    />
+    <FSButton
+      :label="$tr('ui.common.today', 'Today')"
+      icon="mdi-calendar-today"
+      @click="onToday"
+    />
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+import FSRow from "../FSRow.vue";
+import FSButton from "../FSButton.vue";
+
+import FSSimpleMonthSelector from "./FSSimpleMonthSelector.vue";
+
+export default defineComponent({
+  name: "FSCalendarHeader",
+  components: {
+    FSRow,
+    FSButton,
+    FSSimpleMonthSelector
+  },
+  props: {
+    year: {
+      type: Number,
+      required: true
+    },
+    month: {
+      type: Number,
+      required: true
+    }
+  },
+  setup(_props, { emit }) {
+    const onToday = () => {
+      const now = new Date();
+      emit("update:year", now.getFullYear());
+      emit("update:month", now.getMonth() + 1);
+      emit("update", {
+        year: now.getFullYear(),
+        month: now.getMonth() + 1
+      });
+    };
+
+    return {
+      onToday
+    };
+  }
+});
+</script>

package/components/calendar/FSSimpleMonthSelector.vue

@@ -0,0 +1,138 @@
+<template>
+  <FSRow
+    align="center-center"
+  >
+    <FSButtonPreviousIcon
+      @click="onPrevious"
+    />
+    <FSRow>
+      <!-- TODO : mettre un VMenu sur le FSColor pour pouvoir changer d'année plus vite -->
+      <FSColor
+        :border="false"
+        padding="0px 30px"
+        :color="$props.color"
+        width="100%"
+        :height="[40, 36]"
+        style="min-width: 210px;"
+      >
+        <FSRow
+          width="100%"
+          height="100%"
+          align="center-center"
+        >
+          <FSSpan
+            font="text-h3"
+          >
+            {{ monthToString($props.month) }}
+          </FSSpan>
+          <FSSpan
+            font="text-h3"
+          >
+            {{ $props.year }}
+          </FSSpan>
+        </FSRow>
+      </FSColor>
+    </FSRow>
+    <FSButtonNextIcon
+      @click="onNext"
+    />
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent, type PropType } from "vue";
+
+import { useTranslations } from "@dative-gpi/bones-ui";
+import { Months } from '@dative-gpi/foundation-shared-domain/enums';
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSRow from "../FSRow.vue";
+import FSSpan from "../FSSpan.vue";
+import FSColor from "../FSColor.vue";
+
+import FSButtonNextIcon from "../buttons/FSButtonNextIcon.vue";
+import FSButtonPreviousIcon from "../buttons/FSButtonPreviousIcon.vue";
+
+export default defineComponent({
+  name: "FSMonthSelector",
+  components: {
+    FSRow,
+    FSSpan,
+    FSColor,
+    FSButtonNextIcon,
+    FSButtonPreviousIcon
+  },
+  props: {
+    color: {
+      type: String,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    month: {
+      type: Number as PropType<Months>,
+      required: true
+    },
+    year: {
+      type: Number,
+      required: true
+    }
+  },
+  emits: ["update:month", "update:year", "update"],
+  setup(props, { emit }) {
+    const { $tr } = useTranslations();
+
+    const monthToString = (month: number) => {
+      switch(month) {
+        case Months.January:
+          return $tr("ui.common.january", "January");
+        case Months.February:
+          return $tr("ui.common.february", "February");
+        case Months.March:
+          return $tr("ui.common.march", "March");
+        case Months.April:
+          return $tr("ui.common.april", "April");
+        case Months.May:
+          return $tr("ui.common.may", "May");
+        case Months.June:
+          return $tr("ui.common.june", "June");
+        case Months.July:
+          return $tr("ui.common.july", "July");
+        case Months.August:
+          return $tr("ui.common.august", "August");
+        case Months.September:
+          return $tr("ui.common.september", "September");
+        case Months.October:
+          return $tr("ui.common.october", "October");
+        case Months.November:
+          return $tr("ui.common.november", "November");
+        case Months.December:
+          return $tr("ui.common.december", "December");
+      }
+    }
+
+    const onNext = () => {
+      emit("update:month", props.month === 12 ? 1 : props.month + 1);
+      emit("update:year", props.month === 12 ? props.year + 1 : props.year);
+      emit("update", {
+        month: props.month === 12 ? 1 : props.month + 1,
+        year: props.month === 12 ? props.year + 1 : props.year
+      })
+    }
+
+    const onPrevious = () => {
+      emit("update:month", props.month === 1 ? 12 : props.month - 1);
+      emit("update:year", props.month === 1 ? props.year - 1 : props.year);
+      emit("update", {
+        month: props.month === 1 ? 12 : props.month - 1,
+        year: props.month === 1 ? props.year - 1 : props.year
+      })
+    }
+
+    return {
+      monthToString,
+      onNext,
+      onPrevious
+    };
+  }
+});
+</script>

package/components/deviceOrganisations/FSConnectivity.vue

@@ -1,14 +1,16 @@
 <template>
-  <v-menu
+  <FSMenu
     :closeOnContentClick="false"
     v-model="menu"
+    location="bottom center"
   >
     <template
       #activator="{ props }"
     >
       <FSColorIcon
         class="fs-stopclick"
-        size="m"
+        :size="$props.size"
+        :padding="$props.padding"
         :color="$props.deviceConnectivity.color"
         @click.prevent.stop
         v-bind="props"
@@ -20,7 +22,7 @@
       :deviceConnectivity="$props.deviceConnectivity"
       @close="menu = false"
     />
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -31,17 +33,27 @@ import type { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-compone
 
 import FSConnectivityCard from "./FSConnectivityCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
+import FSMenu from '../FSMenu.vue';
 
 export default defineComponent({
   name: "FSConnectivity",
   components: {
     FSConnectivityCard,
-    FSColorIcon
+    FSColorIcon,
+    FSMenu
   },
   props: {
     deviceConnectivity: {
       type: Object as PropType<FSDeviceConnectivity>,
       required: true
+    },
+    size: {
+      type: [Array, String, Number] as PropType<"s" | "m" | "l" | string[] | number[] | string | number | null>,
+      default: "m"
+    },
+    padding: {
+      type: [String, Number] as PropType<string | number>,
+      default: "8px"
     }
   },
   setup() {