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

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() {

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>
@@ -62,24 +40,18 @@ import { useDateFormat } from "@dative-gpi/foundation-shared-services/composable
 
 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: {

package/components/deviceOrganisations/FSStatus.vue

@@ -1,15 +1,17 @@
 <template>
-  <v-menu
+  <FSMenu
     :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"
       >
@@ -21,7 +23,7 @@
       :statusGroup="$props.statusGroup"
       @close="menu = false"
     />
-  </v-menu>
+  </FSMenu>
 </template>
 
 <script lang="ts">
@@ -32,12 +34,14 @@ import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-
 
 import FSStatusCard from "./FSStatusCard.vue";
 import FSColorIcon from "../FSColorIcon.vue";
+import FSMenu from '../FSMenu.vue';
 
 export default defineComponent({
   name: "FSStatus",
   components: {
     FSStatusCard,
-    FSColorIcon
+    FSColorIcon,
+    FSMenu
   },
   props: {
     modelStatus: {
@@ -47,6 +51,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>
@@ -73,24 +47,18 @@ import { computed, defineComponent, type PropType } from "vue";
 import type { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
 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: {
@@ -110,8 +78,14 @@ export default defineComponent({
   setup(props) {
     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/FSStatusRichCard.vue

@@ -0,0 +1,171 @@
+<template>
+  <component
+    v-if="$props.modelStatus"
+    class="fs-status-rich-card"
+    topRightPadding="2px"
+    variant="standard"
+    :is="$attrs.onClick ? FSClickable : FSCard"
+    :padding="$props.padding"
+    :height="$props.height"
+    :width="$props.width"
+    :color="color"
+    :style="style"
+  >
+    <FSCol
+      align="center-center"
+      :gap="$props.gap"
+    >
+      <FSRow
+        align="top-center"
+      >
+        <FSIcon
+          v-if="icon"
+        >
+          {{ icon }}
+        </FSIcon>
+        <FSText
+          v-if="value"
+          font="text-button"
+        >
+          {{ value }}
+        </FSText>
+      </FSRow>
+      <FSText
+        font="text-overline"
+        align="center"
+        :lineClamp="$props.titleClamp"
+      >
+        {{ title }}
+      </FSText>
+      <slot
+        name="footer"
+        v-bind="{ color }"
+      />
+    </FSCol>
+    <template
+      #top-right
+    >
+      <slot
+        name="corner"
+        v-bind="{ color }"
+      />
+    </template>
+  </component>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, type StyleValue } from "vue";
+
+import { ColorEnum, type FSDeviceStatusGroup, type FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { useColors } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSClickable from "../FSClickable.vue";
+import FSCard from "../FSCard.vue";
+import FSIcon from "../FSChip.vue";
+import FSText from "../FSText.vue";
+import FSCol from "../FSCol.vue";
+
+export default defineComponent({
+  name: "FSStatusRichCard",
+  components: {
+    FSClickable,
+    FSCard,
+    FSIcon,
+    FSText,
+    FSCol
+  },
+  props: {
+    height: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "100px"
+    },
+    width: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "160px"
+    },
+    padding: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "12px"
+    },
+    gap: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "8px"
+    },
+    title: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    titleClamp: {
+      type: Number,
+      required: false,
+      default: 2
+    },
+    color: {
+      type: [String, null] as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    fillBackground: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    modelStatus: {
+      type: Object as PropType<FSModelStatus | undefined>,
+      required: true
+    },
+    statusGroup: {
+      type: Object as PropType<FSDeviceStatusGroup | undefined>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { getColors } = useColors();
+
+    const color = computed((): string => {
+      return props.color ?? props.statusGroup?.color ?? props.modelStatus?.colorDefault ?? ColorEnum.Primary;
+    });
+
+    const icon = computed((): string | null => {
+      return props.statusGroup?.icon ?? props.modelStatus?.iconDefault ?? null;
+    });
+
+    const title = computed((): string => {
+      return props.title ?? props.modelStatus?.label ?? "";
+    });
+
+    const value = computed((): string | null => {
+      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}`;
+      }
+      if (props.statusGroup?.value) {
+        return `${props.statusGroup?.value} ${props.statusGroup?.unit}`;
+      }
+      return null;
+    });
+
+    const style = computed((): StyleValue => ({
+      "--fs-status-rich-card-background-color": props.fillBackground ? getColors(color.value).light : "transparent",
+      "--fs-status-rich-card-border-color": props.fillBackground ? getColors(color.value).base : getColors(ColorEnum.Light).dark
+    }));
+
+    return {
+      FSClickable,
+      FSCard,
+      color,
+      style,
+      title,
+      value,
+      icon
+    };
+  }
+});
+</script>

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"
@@ -68,6 +69,11 @@ export default defineComponent({
     deviceStatuses: {
       type: Array as PropType<FSDeviceStatus[]>,
       required: true
+    },
+    alertTo: {
+      type: Function,
+      required: false,
+      default: null
     }
   },
   setup(props) {