@dative-gpi/foundation-shared-components 1.0.26 → 1.0.28-remove-deprecated2

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

@@ -2,13 +2,15 @@
   <v-menu
     :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"
@@ -42,6 +44,14 @@ export default defineComponent({
     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() {

package/components/deviceOrganisations/FSConnectivityCard.vue

@@ -1,55 +1,33 @@
 <template>
   <FSCard
-    padding="2px 2px 8px 2px"
+    padding="12px 24px"
     :elevation="true"
-    :border="false"
   >
     <FSCol
       align="center-center"
+      gap="12px"
     >
+      <FSChip
+        :prependIcon="$props.deviceConnectivity.icon"
+        :color="$props.deviceConnectivity.color"
+        :label="connectivityLabel($props.deviceConnectivity.status)"
+      />
       <FSCol
         align="center-center"
         gap="0px"
       >
-        <FSRow
-          align="center-right"
-        >
-          <FSButton
-            icon="mdi-close"
-            variant="icon"
-            @click="$emit('close')"
-          />
-        </FSRow>
-        <FSCol
-          align="center-center"
-          padding="0px 24px"
-          gap="12px"
-        >
-          <FSChip
-            :prependIcon="$props.deviceConnectivity.icon"
-            :color="$props.deviceConnectivity.color"
-            :label="connectivityLabel($props.deviceConnectivity.status)"
-          />
-          <FSRow
-            width="hug"
-          >
-            <FSText>
-              {{ $tr("ui.shared.device-connectivity.last-message", "Last message") }}
-            </FSText>
-          </FSRow>
-        </FSCol>
-      </FSCol>
-      <FSRow
-        v-if="deviceTimestamp"
-        padding="0px 24px"
-        width="hug"
-      >
-        <FSSpan
-          font="text-overline"
+        <FSText>
+          {{ $tr("ui.device.last-message-received", "Last message received") }}
+        </FSText>
+        <FSText
+          v-if="deviceTimestamp"
+          font="text-button"
+          :color="$props.deviceConnectivity.color"
+          variant="soft"
         >
           {{ deviceTimestamp }}
-        </FSSpan>
-      </FSRow>
+        </FSText>
+      </FSCol>
     </FSCol>
   </FSCard>
 </template>
@@ -58,28 +36,22 @@
 import { computed, defineComponent, type PropType } from "vue";
 
 import type { FSDeviceConnectivity } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import { connectivityLabel } from "../../utils";
 
-import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSText from "../FSText.vue";
-import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSConnectivityCard",
   components: {
-    FSButton,
     FSCard,
     FSChip,
     FSText,
-    FSSpan,
     FSCol,
-    FSRow
   },
   props: {
     deviceConnectivity: {
@@ -89,7 +61,7 @@ export default defineComponent({
   },
   emit: ["close"],
   setup(props) {
-    const { epochToLongTimeFormat } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
 
     const deviceTimestamp = computed((): string => {
       if (props.deviceConnectivity.sourceTimestamp) {

package/components/deviceOrganisations/FSStatus.vue

@@ -2,14 +2,16 @@
   <v-menu
     :closeOnContentClick="false"
     v-model="menu"
+    location="bottom center"
   >
     <template
       #activator="{ props }"
     >
       <FSColorIcon
         class="fs-stopclick"
-        size="m"
+        :size="$props.size"
         :color="$props.statusGroup.color"
+        :padding="$props.padding"
         @click.prevent.stop
         v-bind="props"
       >
@@ -47,6 +49,14 @@ export default defineComponent({
     statusGroup: {
       type: Object as PropType<FSDeviceStatusGroup>,
       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() {

package/components/deviceOrganisations/FSStatusCard.vue

@@ -1,68 +1,42 @@
 <template>
   <FSCard
-    padding="2px 2px 8px 2px"
+    padding="12px 24px"
     :elevation="true"
-    :border="false"
   >
     <FSCol
       align="center-center"
+      gap="12px"
     >
+      <FSChip
+        :prependIcon="$props.statusGroup.icon"
+        :color="$props.statusGroup.color"
+        :label="$props.modelStatus.label"
+      />
       <FSCol
+        v-if="$props.statusGroup.value"
         align="center-center"
         gap="0px"
       >
-        <FSRow
-          v-if="$props.closable"
-          align="center-right"
+        <FSText
+          v-if="$props.statusGroup.value && $props.modelStatus.groupById && $props.statusGroup.groupByValue"
         >
-          <FSButton
-            icon="mdi-close"
-            variant="icon"
-            @click="$emit('close')"
-          />
-        </FSRow>
-        <FSCol
-          align="center-center"
-          padding="0px 24px"
-          gap="12px"
+          {{ $props.modelStatus.groupByLabel }} {{ $props.statusGroup.groupByValue }}
+        </FSText>
+        <FSText
+          v-if="$props.statusGroup.value"
+          font="text-button"
+          :color="$props.statusGroup.color"
         >
-          <FSChip
-            :prependIcon="$props.statusGroup.icon"
-            :color="$props.statusGroup.color"
-            :label="statusLabel"
-          />
-          <FSRow
-            v-if="$props.statusGroup.value"
-            width="hug"
-          >
-            <FSText
-              font="text-button"
-              :color="$props.statusGroup.color"
-            >
-              {{ $props.statusGroup.value }} {{ $props.statusGroup.unit }}
-            </FSText>
-          </FSRow>
-          <FSRow
-            v-if="$props.statusGroup.value && $props.modelStatus.groupById && $props.statusGroup.groupByValue"
-            width="hug"
-          >
-            <FSSpan>
-              {{ $props.modelStatus.groupByLabel }} {{ $props.statusGroup.groupByValue }}
-            </FSSpan>
-          </FSRow>
-        </FSCol>
+          {{ statusValue }}
+        </FSText>
       </FSCol>
-      <FSRow
+      <FSText
         v-if="deviceTimestamp"
-        padding="0px 24px"
-        width="hug"
+        font="text-overline"
+        variant="soft"
       >
-        <FSSpan
-          font="text-overline"
-        >
-          {{ deviceTimestamp }}
-        </FSSpan>
-      </FSRow>
+        {{ deviceTimestamp }}
+      </FSText>
     </FSCol>
   </FSCard>
 </template>
@@ -71,26 +45,20 @@
 import { computed, defineComponent, type PropType } from "vue";
 
 import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
-import FSButton from "../FSButton.vue";
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSText from "../FSText.vue";
-import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSStatusCard",
   components: {
-    FSButton,
     FSCard,
     FSChip,
     FSText,
-    FSSpan,
-    FSCol,
-    FSRow
+    FSCol
   },
   props: {
     closable: {
@@ -108,10 +76,16 @@ export default defineComponent({
   },
   emits: ["close"],
   setup(props) {
-    const { epochToLongTimeFormat } = useAppTimeZone();
+    const { epochToLongTimeFormat } = useDateFormat();
 
-    const statusLabel = computed((): string => {
-      return props.statusGroup.label || props.modelStatus.label;
+    const statusValue = computed((): string => {
+      if (props.statusGroup.label) {
+        return props.statusGroup.label;
+      }
+      if (props.statusGroup.value && !isNaN(parseFloat(props.statusGroup.value))) {
+        return `${parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 })} ${props.statusGroup.unit}`;
+      }
+      return `${props.statusGroup.value} ${props.statusGroup.unit}`;
     });
 
     const deviceTimestamp = computed((): string => {
@@ -123,7 +97,7 @@ export default defineComponent({
 
     return {
       deviceTimestamp,
-      statusLabel
+      statusValue
     };
   }
 });

package/components/deviceOrganisations/FSStatusesCarousel.vue

@@ -1,6 +1,7 @@
 <template>
   <FSRow
     :wrap="false"
+    align="center-center"
   >
     <FSButton
       v-if="$props.modelStatuses.length > 1"

package/components/deviceOrganisations/FSStatusesRow.vue

@@ -10,8 +10,9 @@
     />
     <FSWorstAlert
       v-if="$props.deviceWorstAlert"
-      :deviceAlerts="$props.deviceAlerts.length"
-      :deviceAlert="$props.deviceWorstAlert"
+      :deviceWorstAlert="$props.deviceWorstAlert"
+      :deviceAlerts="$props.deviceAlerts"
+      :alertTo="$props.alertTo"
     />
     <template
       v-for="(modelStatus, index) in $props.modelStatuses"
@@ -30,7 +31,7 @@
 import { defineComponent, type PropType } from "vue";
 
 import type { FSDeviceAlert, FSDeviceConnectivity, FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
-import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/models";
+import { ConnectivityStatus } from "@dative-gpi/foundation-shared-domain/enums";
 
 import FSConnectivity from "./FSConnectivity.vue";
 import FSWorstAlert from "./FSWorstAlert.vue";
@@ -68,6 +69,11 @@ export default defineComponent({
     deviceStatuses: {
       type: Array as PropType<FSDeviceStatus[]>,
       required: true
+    },
+    alertTo: {
+      type: Function,
+      required: false,
+      default: null
     }
   },
   setup(props) {

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -2,27 +2,30 @@
   <v-menu
     :closeOnContentClick="false"
     v-model="menu"
+    location="bottom center"
   >
     <template
       #activator="{ props }"
     >
       <FSBadge
         :content="badgeLabel"
-        :color="criticityColor"
+        :color="AlertTools.criticityColor($props.deviceWorstAlert?.criticity)"
       >
         <FSColorIcon
           class="fs-stopclick"
-          size="m"
-          :color="criticityColor"
+          :padding="$props.padding"
+          :color="AlertTools.criticityColor($props.deviceWorstAlert?.criticity)"
+          :size="$props.size"
           @click.prevent.stop
           v-bind="props"
         >
-          {{ statusIcon }}
+          {{ AlertTools.statusIcon($props.deviceWorstAlert?.status) }}
         </FSColorIcon>
       </FSBadge>
     </template>
     <FSWorstAlertCard
-      :deviceAlert="deviceAlert"
+      :deviceAlert="deviceWorstAlert"
+      :alertTo="$props.alertTo"
       @close="menu = false"
     />
   </v-menu>
@@ -31,9 +34,8 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
-import type { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
+import { AlertTools } from "@dative-gpi/foundation-shared-components/tools";
 
 import FSWorstAlertCard from "./FSWorstAlertCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
@@ -47,53 +49,44 @@ export default defineComponent({
     FSBadge
   },
   props: {
-    deviceAlert: {
+    deviceWorstAlert: {
       type: Object as PropType<FSDeviceAlert>,
       required: true
     },
     deviceAlerts: {
-      type: Number,
+      type: Array as PropType<FSDeviceAlert[]>,
       required: false,
-      default: 0
+      default: () => []
+    },
+    alertTo: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    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(props) {
     const menu = ref(false);
 
-    const criticityColor = computed(() => {
-      switch (props.deviceAlert?.criticity) {
-        case Criticity.Error: return ColorEnum.Error;
-        case Criticity.Warning: return ColorEnum.Warning;
-        default: return ColorEnum.Primary;
-      }
-    });
-
-    const statusIcon = computed(() => {
-      switch (props.deviceAlert?.status) {
-        case AlertStatus.Pending:     return "mdi-timer-outline";
-        case AlertStatus.Untriggered: return "mdi-timer-off-outline";
-        case AlertStatus.Unresolved:  return "mdi-alert-circle-outline";
-        case AlertStatus.Resolved:    return "mdi-check-circle-outline";
-        case AlertStatus.Expired:     return "mdi-clock-outline";
-        case AlertStatus.Triggered:   return "mdi-alert-circle-outline";
-        case AlertStatus.Abandoned:   return "mdi-cancel"
-        default:                      return "";
-      }
-    });
-
     const badgeLabel = computed((): string | null => {
-      if (props.deviceAlerts < 1) {
+      if (!props.deviceAlerts || props.deviceAlerts.length < 1) {
         return null;
       }
-      if (props.deviceAlerts > 9) {
+      if (props.deviceAlerts.length > 9) {
         return "9+";
       }
-      return (props.deviceAlerts).toString();
+      return props.deviceAlerts.length.toString();
     });
 
     return {
-      criticityColor,
-      statusIcon,
+      AlertTools,
       badgeLabel,
       menu
     };