@dative-gpi/foundation-shared-components 0.0.7 → 0.0.9

package/components/deviceOrganisations/FSStatus.vue

@@ -0,0 +1,117 @@
+<template>
+  <v-menu
+    :closeOnContentClick="false"
+    v-model="menu"
+  >
+    <template #activator="{ props }">
+      <FSColorIcon
+        size="m"
+        variant="fill"
+        :color="$props.statusGroup.color"
+        v-bind="props"
+      >
+        {{ $props.statusGroup.icon }}
+      </FSColorIcon>
+    </template>
+    <FSCard
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        align="center-center"
+        padding="6px 24px"
+      >
+        <FSCol
+          align="center-center"
+          gap="12px"
+        >
+          <FSChip
+            :color="$props.statusGroup.color"
+            :prependIcon="$props.statusGroup.icon"
+            :label="$props.statusGroup.label"
+          />
+          <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>
+        <FSRow
+          v-if="deviceTimestamp"
+          width="hug"
+        >
+          <FSSpan
+            font="text-overline"
+          >
+            {{ deviceTimestamp }}
+          </FSSpan>
+        </FSRow>
+      </FSCol>
+    </FSCard>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { useTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSColorIcon from "../FSColorIcon.vue";
+import FSCard from "../FSCard.vue";
+import FSChip from "../FSChip.vue";
+import FSText from "../FSText.vue";
+import FSSpan from "../FSSpan.vue";
+
+export default defineComponent({
+  name: "FSStatus",
+  components: {
+    FSColorIcon,
+    FSCard,
+    FSChip,
+    FSText,
+    FSSpan
+  },
+  props: {
+    modelStatus: {
+      type: Object as PropType<FSModelStatus>,
+      required: true
+    },
+    statusGroup: {
+      type: Object as PropType<FSDeviceStatusGroup>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { epochToLongTimeFormat } = useTimeZone();
+
+    const menu = ref(false);
+
+    const deviceTimestamp = computed((): string => {
+      if (props.statusGroup.sourceTimestamp) {
+        return epochToLongTimeFormat(props.statusGroup.sourceTimestamp);
+      }
+      return "";
+    });
+
+    return {
+      deviceTimestamp,
+      menu
+    };
+  }
+});
+</script>

package/components/deviceOrganisations/FSStatusesCarousel.vue

@@ -0,0 +1,105 @@
+<template>
+  <FSCarousel
+    :height="height"
+  >
+    <template #prev="{ props }">
+      <FSButton
+        v-if="$props.modelStatuses.length > 1"
+        variant="icon"
+        icon="mdi-chevron-left"
+        :color="ColorEnum.Dark"
+        @click="props.onClick"
+      />
+    </template>
+    <template #next="{ props }">
+      <FSButton
+        v-if="$props.modelStatuses.length > 1"
+        variant="icon"
+        icon="mdi-chevron-right"
+        :color="ColorEnum.Dark"
+        @click="props.onClick"
+      />
+    </template>
+    <FSRow
+      v-for="(modelStatus, index) in $props.modelStatuses"
+      align="center-center"
+      width="hug"
+      gap="4px"
+      :key="index"
+      :wrap="false"
+    >
+      <FSStatus
+        v-for="(statusGroup, index) in deviceStatus(modelStatus)"
+        :modelStatus="modelStatus"
+        :statusGroup="statusGroup"
+        :key="index"
+      />
+    </FSRow>
+  </FSCarousel>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+import { useBreakpoints } from "@dative-gpi/foundation-shared-components/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSCarousel from "../FSCarousel.vue";
+import FSButton from "../FSButton.vue";
+import FSStatus from "./FSStatus.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSStatusesCarousel",
+  components: {
+    FSCarousel,
+    FSButton,
+    FSStatus,
+    FSRow
+  },
+  props: {
+    modelStatuses: {
+      type: Array as PropType<FSModelStatus[]>,
+      required: true
+    },
+    deviceStatuses: {
+      type: Array as PropType<FSDeviceStatus[]>,
+      required: true
+    }
+  },
+  setup(props) {
+    const { isMobileSized } = useBreakpoints();
+
+    const tab = ref(0);
+
+    const height = computed((): number => {
+      return isMobileSized.value ? 20 : 26;
+    });
+
+    const deviceStatus = (modelStatus: FSModelStatus): FSDeviceStatusGroup[] => {
+      const deviceStatus = props.deviceStatuses
+        .find((deviceStatus: FSDeviceStatus) => deviceStatus.modelStatusId === modelStatus.id);
+      if (deviceStatus != null) {
+        return deviceStatus.statusGroups;
+      }
+      if (modelStatus.showDefault) {
+        return [{
+          label: modelStatus.label,
+          value: null,
+          icon: modelStatus.iconDefault,
+          color: modelStatus.colorDefault
+        }];
+      }
+      return [];
+    }
+
+    return {
+      ColorEnum,
+      height,
+      tab,
+      deviceStatus
+    };
+  }
+});
+</script>

package/components/deviceOrganisations/FSStatusesRow.vue

@@ -0,0 +1,66 @@
+<template>
+  <FSRow
+    v-for="(modelStatus, index) in $props.modelStatuses"
+    align="center-center"
+    width="hug"
+    gap="4px"
+    :key="index"
+    :wrap="false"
+  >
+    <FSStatus
+      v-for="(statusGroup, index) in deviceStatus(modelStatus)"
+      :modelStatus="modelStatus"
+      :statusGroup="statusGroup"
+      :key="index"
+    />
+  </FSRow>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { FSDeviceStatus, FSDeviceStatusGroup, FSModelStatus } from "@dative-gpi/foundation-shared-components/models";
+
+import FSStatus from "./FSStatus.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSStatusesRow",
+  components: {
+    FSStatus,
+    FSRow
+  },
+  props: {
+    modelStatuses: {
+      type: Array as PropType<FSModelStatus[]>,
+      required: true
+    },
+    deviceStatuses: {
+      type: Array as PropType<FSDeviceStatus[]>,
+      required: true
+    }
+  },
+  setup(props) {
+    const deviceStatus = (modelStatus: FSModelStatus): FSDeviceStatusGroup[] => {
+      const deviceStatus = props.deviceStatuses
+        .find((deviceStatus: FSDeviceStatus) => deviceStatus.modelStatusId === modelStatus.id);
+      if (deviceStatus != null) {
+        return deviceStatus.statusGroups;
+      }
+      if (modelStatus.showDefault) {
+        return [{
+          label: modelStatus.label,
+          value: null,
+          icon: modelStatus.iconDefault,
+          color: modelStatus.colorDefault
+        }];
+      }
+      return [];
+    }
+
+    return {
+      deviceStatus
+    };
+  }
+});
+</script>

package/components/deviceOrganisations/FSWorstAlert.vue

@@ -0,0 +1,165 @@
+<template>
+  <v-menu
+    v-if="$props.deviceAlert"
+    :closeOnContentClick="false"
+    v-model="menu"
+  >
+    <template #activator="{ props }">
+      <FSBadge
+        :content="badgeLabel"
+        :color="criticityColor"
+      >
+        <FSColorIcon
+          size="m"
+          variant="fill"
+          :color="criticityColor"
+          v-bind="props"
+        >
+          {{ statusIcon }}
+        </FSColorIcon>
+      </FSBadge>
+    </template>
+    <FSCard
+      :elevation="true"
+      :border="false"
+    >
+      <FSCol
+        align="center-center"
+        padding="6px 24px"
+      >
+        <FSCol
+          align="center-center"
+          gap="12px"
+        >
+          <FSChip
+            :color="criticityColor"
+            :prependIcon="statusIcon"
+            :label="$props.deviceAlert.label"
+          />
+          <FSRow
+            width="hug"
+          >
+            <FSText>
+              {{ statusLabel }}
+            </FSText>
+          </FSRow>
+        </FSCol>
+        <FSRow
+          v-if="deviceTimestamp"
+          width="hug"
+        >
+          <FSSpan
+            font="text-overline"
+          >
+            {{ deviceTimestamp }}
+          </FSSpan>
+        </FSRow>
+      </FSCol>
+    </FSCard>
+  </v-menu>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, PropType, ref } from "vue";
+
+import { useTimeZone, useTranslationsProvider } from "@dative-gpi/foundation-shared-services/composables";
+import { AlertStatus, Criticity } from "@dative-gpi/foundation-shared-domain/models";
+import { FSDeviceAlert } from "@dative-gpi/foundation-shared-components/models";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSColorIcon from "../FSColorIcon.vue";
+import FSBadge from "../FSBadge.vue";
+import FSCard from "../FSCard.vue";
+import FSChip from "../FSChip.vue";
+import FSText from "../FSText.vue";
+import FSSpan from "../FSSpan.vue";
+
+export default defineComponent({
+  name: "FSWorstAlert",
+  components: {
+    FSColorIcon,
+    FSBadge,
+    FSCard,
+    FSChip,
+    FSText,
+    FSSpan
+  },
+  props: {
+    deviceAlert: {
+      type: Object as PropType<FSDeviceAlert>,
+      required: true
+    },
+    deviceAlerts: {
+      type: Number,
+      required: false,
+      default: 0
+    }
+  },
+  setup(props) {
+    const { epochToLongTimeFormat } = useTimeZone();
+    const { $tr } = useTranslationsProvider();
+
+    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 statusLabel = computed(() => {
+      switch (props.deviceAlert?.status) {
+        case AlertStatus.Pending:     return $tr("ui.alert-status.pending", "Pending");
+        case AlertStatus.Untriggered: return $tr("ui.alert-status.untriggered", "Untriggered");
+        case AlertStatus.Unresolved:  return $tr("ui.alert-status.unresolved", "Unresolved");
+        case AlertStatus.Resolved:    return $tr("ui.alert-status.resolved", "Resolved");
+        case AlertStatus.Expired:     return $tr("ui.alert-status.expired", "Expired");
+        case AlertStatus.Triggered:   return $tr("ui.alert-status.triggered", "Triggered");
+        case AlertStatus.Abandoned:   return $tr("ui.alert-status.abandoned", "Abandoned");
+        default:                      return "";
+      }
+    });
+
+    const badgeLabel = computed((): string | null => {
+      if (props.deviceAlerts < 1) {
+        return null;
+      }
+      if (props.deviceAlerts > 8) {
+        return "9+";
+      }
+      return (props.deviceAlerts + 1).toString();
+    });
+
+    const deviceTimestamp = computed((): string => {
+      if (props.deviceAlert.sourceTimestamp) {
+        return epochToLongTimeFormat(props.deviceAlert.sourceTimestamp);
+      }
+      return "";
+    });
+
+    return {
+      deviceTimestamp,
+      criticityColor,
+      statusLabel,
+      statusIcon,
+      badgeLabel,
+      menu
+    };
+  }
+});
+</script>

package/components/lists/FSDataIteratorGroup.vue

@@ -0,0 +1,7 @@
+<template>
+  
+</template>
+
+<script lang="ts">
+
+</script>

package/components/lists/FSDataIteratorItem.vue

@@ -0,0 +1,103 @@
+<template>
+  <FSCard
+    class="fs-data-iterator-item"
+    padding="12px"
+    width="50%"
+  >
+    <FSCol>
+      <slot name="item.top" v-bind="{ item: $props.item }" />
+      <FSRow
+        v-for="(header, index) in $props.headers"
+        align="center-left"
+        :wrap="false"
+        :key="index"
+      >
+        <slot :name="`header.${header.value}`" v-bind="{ header }">
+          <FSRow
+            align="center-left"
+          >
+            <FSText
+              font="text-button"
+            >
+              {{ header.text }}
+            </FSText>
+          </FSRow>
+        </slot>
+        <slot :name="`item.${header.value}`" v-bind="{ item: $props.item }">
+          <FSRow
+            align="center-left"
+          >
+            <FSText>
+              {{ $props.item[header.value] }}
+            </FSText>
+          </FSRow>
+        </slot>
+      </FSRow>
+      <slot name="item.bottom" v-bind="{ item: $props.item }" />
+    </FSCol>
+    <FSContainer
+      v-if="$props.showSelect"
+      class="fs-data-iterator-item-checkbox"
+      :border="false"
+    >
+      <FSCheckbox
+        :color="$props.color"
+        :modelValue="$props.modelValue"
+        @update:modelValue="() => $emit('update:modelValue', $props.item)"
+      />
+    </FSContainer>
+  </FSCard>
+</template>
+
+<script lang="ts">
+import { defineComponent, PropType } from "vue";
+
+import { ColorEnum, FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
+
+import FSContainer from "../FSContainer.vue";
+import FSCheckbox from "../FSCheckbox.vue";
+import FSCard from "../FSCard.vue";
+import FSText from "../FSText.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSIteratorCard",
+  components: {
+    FSContainer,
+    FSCheckbox,
+    FSCard,
+    FSText,
+    FSRow
+  },
+  props: {
+    headers: {
+      type: Array as PropType<FSDataTableColumn[]>,
+      required: true
+    },
+    item: {
+      type: Object,
+      required: true
+    },
+    itemTo: {
+      type: Function,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    color: {
+      type: String as PropType<ColorEnum>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    showSelect: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  }
+});
+</script>