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

package/components/selects/FSSelectMonths.vue

@@ -40,21 +40,21 @@ export default defineComponent({
 
     const months = computed((): { id: Months; label: string }[] => {
       const items = [
-        { id: Months.January, label: $tr("ui.months.january", "January") },
-        { id: Months.February, label: $tr("ui.months.february", "February") },
-        { id: Months.March, label: $tr("ui.months.march", "March") },
-        { id: Months.April, label: $tr("ui.months.april", "April") },
-        { id: Months.May, label: $tr("ui.months.may", "May") },
-        { id: Months.June, label: $tr("ui.months.june", "June") },
-        { id: Months.July, label: $tr("ui.months.july", "July") },
-        { id: Months.August, label: $tr("ui.months.august", "August") },
-        { id: Months.September, label: $tr("ui.months.september", "September") },
-        { id: Months.October, label: $tr("ui.months.october", "October") },
-        { id: Months.November, label: $tr("ui.months.november", "November") },
-        { id: Months.December, label: $tr("ui.months.december", "December") }
+        { id: Months.January, label: $tr("ui.common.january", "January") },
+        { id: Months.February, label: $tr("ui.common.february", "February") },
+        { id: Months.March, label: $tr("ui.common.march", "March") },
+        { id: Months.April, label: $tr("ui.common.april", "April") },
+        { id: Months.May, label: $tr("ui.common.may", "May") },
+        { id: Months.June, label: $tr("ui.common.june", "June") },
+        { id: Months.July, label: $tr("ui.common.july", "July") },
+        { id: Months.August, label: $tr("ui.common.august", "August") },
+        { id: Months.September, label: $tr("ui.common.september", "September") },
+        { id: Months.October, label: $tr("ui.common.october", "October") },
+        { id: Months.November, label: $tr("ui.common.november", "November") },
+        { id: Months.December, label: $tr("ui.common.december", "December") }
       ];
       if (props.useAllMonths) {
-        items.unshift({ id: Months.AllMonths, label: $tr("ui.months.all-months", "All months") });
+        items.unshift({ id: Months.AllMonths, label: $tr("ui.common.all-months", "All months") });
       }
       return items;
     });

package/components/selects/chartSelectors/FSAggregationSelector.vue

@@ -0,0 +1,52 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.aggregation.label','Aggregation')"
+    :items="aggregationTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { AggregationType } from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { aggregationTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue : {
+      type: Number as PropType<AggregationType>,
+      required: false
+    },
+    label : {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+
+    const aggregationTypeItems = computed(()=>{
+      return getEnumEntries(AggregationType).filter(f=>f.value != AggregationType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: aggregationTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      aggregationTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSAxisTypeSelector.vue

@@ -0,0 +1,49 @@
+<template>
+  <FSToggleSet
+    :hideHeader="true"
+    :values="axisTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import  {AxisType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { axisTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSToggleSet from "@dative-gpi/foundation-shared-components/components/FSToggleSet.vue";
+
+
+export default defineComponent({
+  components: {
+    FSToggleSet
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<AxisType>,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+
+    const axisTypeItems = computed(()=>{
+      return getEnumEntries(AxisType).map((f)=>{
+        return {
+          id: f.value,
+          label: axisTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      axisTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSDisplayAsSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.display-as.label','Display as')"
+    :items="displayAsItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {DisplayAs} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { displayAsLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<DisplayAs>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+    
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const displayAsItems = computed(()=>{
+      return getEnumEntries(DisplayAs).filter(f=>f.value != DisplayAs.None).map((f)=>{
+        return {
+          id: f.value,
+          label: displayAsLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      displayAsItems,
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSFilterTypeSelector.vue

@@ -0,0 +1,54 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.filter-type','Filter type')"
+    :toggleSet="true"
+    :items="filterTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {FilterType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { filterTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<FilterType>,
+      required: false,
+      default : FilterType.None
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+
+    const filterTypeItems = computed(()=>{
+      return getEnumEntries(FilterType).filter(f=>f.value != FilterType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: filterTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      filterTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSHeatmapRuleSelector.vue

@@ -0,0 +1,54 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.heat-rule.label','Heat rule')"
+    :items="heatmapRuleItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {HeatmapRule} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { heatmapRuleLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<HeatmapRule>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+    
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const heatmapRuleItems = computed(()=>{
+      return getEnumEntries(HeatmapRule).filter(f=>f.value != HeatmapRule.None).map((f)=>{
+        return {
+          id: f.value,
+          label: heatmapRuleLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      heatmapRuleItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSOperationOnSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.operation-on.label','Operation on')"
+    :items="operationOnItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {OperationOn} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { operationOnLabel} from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<OperationOn>,
+      required: false
+    },
+    label : {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const operationOnItems = computed(()=>{
+      return getEnumEntries(OperationOn).filter(f=>f.value != OperationOn.None).map((f)=>{
+        return {
+          id: f.value,
+          label: operationOnLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      operationOnItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSPlanningTypeSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.planning-type.label','Planning type')"
+    :items="planningTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {PlanningType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { planningTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<PlanningType>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const planningTypeItems = computed(()=>{
+      return getEnumEntries(PlanningType).filter(f=>f.value != PlanningType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: planningTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      planningTypeItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSPlotPerSelector.vue

@@ -0,0 +1,52 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('ui.common.plot-per','Plot per')"
+    :items="plotPerItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {PlotPer} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { plotPerLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<PlotPer>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const plotPerItems = computed(()=>{
+      return getEnumEntries(PlotPer).filter(f=>f.value != PlotPer.None).map((f)=>{
+        return {
+          id: f.value,
+          label: plotPerLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      plotPerItems
+    }
+  }
+})
+</script>

package/components/selects/chartSelectors/FSSelectEntityType.vue

@@ -0,0 +1,59 @@
+<template>
+  <FSSelectField
+    :items="entityTypes"
+    :clearable="false"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import type { PropType} from "vue";
+import { computed, defineComponent } from "vue";
+
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
+
+import FSSelectField from "@dative-gpi/foundation-shared-components/components/fields/FSSelectField.vue";
+
+export default defineComponent({
+  name: "FSSelectEntityType",
+  components: {
+    FSSelectField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<EntityType>,
+      required: false,
+      default: EntityType.Device
+    },
+    useNone: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props) {
+    const { $tr } = useTranslationsProvider();
+
+    const entityTypes = computed((): { id: EntityType; label: string }[] => {
+      const items = [
+        { id: EntityType.Model, label: $tr("ui.common.models", "Model(s)") },
+        { id: EntityType.Device, label: $tr("ui.common.devices", "Device(s)") },
+        { id: EntityType.Group, label: $tr("ui.common.groups", "Group(s)") },
+        { id: EntityType.Location, label: $tr("ui.common.locations", "Location(s)") }
+      ];
+      if (props.useNone) {
+        items.unshift({ id: EntityType.None, label: $tr("ui.common.none", "None") });
+      }
+      return items;
+    });
+
+    return {
+      entityTypes
+    };
+  }
+});
+</script>

package/components/selects/chartSelectors/FSSerieTypeSelector.vue

@@ -0,0 +1,53 @@
+<template>
+  <FSAutocompleteField
+    :label="label ?? $tr('autocomplete.serie-type.label','Serie type')"
+    :items="serieTypeItems"
+    :modelValue="modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  />
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import {SerieType} from "@dative-gpi/foundation-shared-domain/enums";
+
+import { getEnumEntries } from "@dative-gpi/foundation-shared-domain/tools";
+import { serieTypeLabel } from "@dative-gpi/foundation-shared-components/tools";
+
+import FSAutocompleteField from "@dative-gpi/foundation-shared-components/components/fields/FSAutocompleteField.vue";
+
+
+export default defineComponent({
+  components: {
+    FSAutocompleteField
+  },
+  props: {
+    modelValue: {
+      type: Number as PropType<SerieType>,
+      required: false
+    },
+    label: {
+      type: String,
+      required: false
+    }
+  },
+  emits: ['update:modelValue'],
+  setup() {
+    
+    const serieTypeItems = computed(()=>{
+      return getEnumEntries(SerieType).filter(f=>f.value != SerieType.None).map((f)=>{
+        return {
+          id: f.value,
+          label: serieTypeLabel(f.value)
+        }
+      })
+    });
+
+    return {
+      serieTypeItems
+    }
+  }
+})
+</script>

package/components/tiles/FSAlertTileUI.vue

@@ -0,0 +1,90 @@
+
+<template>
+  <FSTile
+    width="200px"
+    height="130px"
+    borderRadius="6px"
+    v-bind="$attrs"
+  >
+    <FSCol
+      align="center-center"
+      gap="6px"
+    >
+      <FSIcon
+        :icon="$props.icon"
+        size="24px"
+      />
+      <FSSpan
+        :lineClamp="1"
+      >
+        {{ $props.label }}
+      </FSSpan>
+      <FSSpan
+        font="text-overline"
+        :lineClamp="1"
+      >
+        {{ epochToShortTimeFormat($props.triggerProcessedTimestamp) }}
+      </FSSpan>
+      <FSSpan
+        font="text-overline"
+        :lineClamp="1"
+      >
+        {{ $props.deviceOrganisationLabel }}
+      </FSSpan>
+    </FSCol>
+  </FSTile>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+import type { PropType } from "vue";
+
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+
+import FSTile from "./FSTile.vue";
+import FSSpan from "../FSSpan.vue";
+import FSIcon from "../FSIcon.vue";
+import FSCol from "../FSCol.vue";
+
+
+export default defineComponent({
+  name: "FSAlertTileUI",
+  components: {
+    FSTile,
+    FSIcon,
+    FSSpan,
+    FSCol,
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    deviceOrganisationLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    icon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    triggerProcessedTimestamp: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: null
+    }
+  },
+  setup() {
+    const { epochToShortTimeFormat } = useDateFormat();
+
+    return {
+      ColorEnum,
+      epochToShortTimeFormat
+    };
+  }
+});
+</script>