@dative-gpi/foundation-shared-components 0.0.229 → 0.1.68

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/FSButtonDuplicateMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-copy"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonEditMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-pencil-outline"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonFileMini.vue

@@ -1,6 +1,7 @@
 <template>
   <div>
     <FSButton
+      
       :prependIcon="$props.icon"
       :color="ColorEnum.Light"
       @click="onClick"

package/components/buttons/FSButtonNextMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-chevron-right"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonPreviousMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-chevron-left"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRedoMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-redo-variant"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonRemoveMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-delete-outline"
+    
     :color="ColorEnum.Error"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSaveMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-content-save-outline"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonSearchMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-magnify"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUndoMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-undo-variant"
+    
     :color="ColorEnum.Light"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonUpdateMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-pencil-outline"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

package/components/buttons/FSButtonValidateMini.vue

@@ -1,6 +1,7 @@
 <template>
   <FSButton
     prependIcon="mdi-check"
+    
     :color="ColorEnum.Primary"
     v-bind="$attrs"
   />

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,86 +1,57 @@
 <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>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+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: {
@@ -90,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,98 +1,70 @@
 <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="statusLabel"
+      />
       <FSCol
+        v-if="$props.statusGroup.value"
         align="center-center"
         gap="0px"
       >
-        <FSRow
-          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 }} {{ $props.statusGroup.unit }}
+        </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>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+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: {
+      type: Boolean,
+      default: true
+    },
     modelStatus: {
       type: Object as PropType<FSModelStatus>,
       required: true
@@ -104,12 +76,19 @@ 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.value && !isNaN(parseFloat(props.statusGroup.value))) {
+        return parseFloat(props.statusGroup.value).toLocaleString("fullwide", { maximumFractionDigits: 2 });
+      }
+      return props.statusGroup.value || "";
+    });
+
     const deviceTimestamp = computed((): string => {
       if (props.statusGroup.sourceTimestamp) {
         return epochToLongTimeFormat(props.statusGroup.sourceTimestamp);
@@ -119,7 +98,8 @@ export default defineComponent({
 
     return {
       deviceTimestamp,
-      statusLabel
+      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"
@@ -27,11 +28,10 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+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";
@@ -69,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,6 +2,7 @@
   <v-menu
     :closeOnContentClick="false"
     v-model="menu"
+    location="bottom center"
   >
     <template
       #activator="{ props }"
@@ -22,18 +23,18 @@
       </FSBadge>
     </template>
     <FSWorstAlertCard
-      :deviceAlert="deviceAlert"
+      :deviceAlert="deviceWorstAlert"
+      :alertTo="$props.alertTo"
       @close="menu = false"
     />
   </v-menu>
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+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 { type FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
+import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/enums";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 
 import FSWorstAlertCard from "./FSWorstAlertCard.vue";
@@ -48,21 +49,26 @@ 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
     }
   },
   setup(props) {
     const menu = ref(false);
 
     const criticityColor = computed(() => {
-      switch (props.deviceAlert?.criticity) {
+      switch (props.deviceWorstAlert?.criticity) {
         case Criticity.Error: return ColorEnum.Error;
         case Criticity.Warning: return ColorEnum.Warning;
         default: return ColorEnum.Primary;
@@ -70,7 +76,7 @@ export default defineComponent({
     });
 
     const statusIcon = computed(() => {
-      switch (props.deviceAlert?.status) {
+      switch (props.deviceWorstAlert?.status) {
         case AlertStatus.Pending:     return "mdi-timer-outline";
         case AlertStatus.Untriggered: return "mdi-timer-off-outline";
         case AlertStatus.Unresolved:  return "mdi-alert-circle-outline";
@@ -83,13 +89,13 @@ export default defineComponent({
     });
 
     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 {