@dative-gpi/foundation-shared-components 1.1.24-unit-formatter → 1.1.24-unit-formatter-2

package/components/fields/FSDurationField.vue

@@ -0,0 +1,184 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :disabled="$props.disabled"
+    :label="$props.label"
+    :messages="messages"
+  >
+    <FSRow
+      :wrap="false"
+      align="center-left"
+    >
+      <FSNumberField
+        suffix="h"
+        :hideHeader="true"
+        :modelValue="innerHours"
+        :disabled="$props.disabled"
+        :rules="[() => messages.length === 0 || '']"
+        @update:modelValue="onChangeHours"
+      />
+      <FSSpan>:</FSSpan>
+      <FSNumberField
+        suffix="min"
+        :hideHeader="true"
+        :disabled="$props.disabled"
+        :rules="[() => messages.length === 0 || '']"
+        :modelValue="innerMinutes"
+        @update:modelValue="onChangeMinutes"
+      />
+    </FSRow>
+  </FSBaseField>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+
+import { NumberRules } from "@dative-gpi/foundation-shared-components/models";
+import { useRules } from "@dative-gpi/foundation-shared-components/composables";
+
+import FSNumberField from "./FSNumberField.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSDurationField",
+  components: {
+    FSNumberField,
+    FSBaseField,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: null
+    },
+    maxDuration: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: null
+    },
+    minDuration: {
+      type: Number as PropType<number | null>,
+      required: false,
+      default: null
+    },
+    hideHeader: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    required: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    rules: {
+      type: Array as PropType<any[]>,
+      required: false,
+      default: () => []
+    },
+    messages: {
+      type: Array as PropType<string[]>,
+      required: false,
+      default: null
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue"],
+  setup(props, { emit }) {
+    const { getMessages } = useRules();
+    const MS_PER_MINUTE = 60 * 1000;
+    const MS_PER_HOUR = 60 * MS_PER_MINUTE;
+
+    const innerHours = ref<number | null>(null);
+    const innerMinutes = ref<number | null>(null);
+
+    const durationRules = computed(() => {
+      const rules: any[] = [...props.rules];
+      if (props.required) {
+        rules.push(NumberRules.required());
+      }
+      if (props.minDuration != null) {
+        const minHours = Math.floor(props.minDuration / MS_PER_HOUR);
+        const minMinutes = Math.floor((props.minDuration % MS_PER_HOUR) / MS_PER_MINUTE);
+        const label = minHours > 0 ? `${minHours}h${minMinutes.toString().padStart(2, '0')}` : `${minMinutes}min`;
+        rules.push((v: any) => (v != null && v >= props.minDuration!) || `Min. ${label}`);
+      }
+      if (props.maxDuration != null) {
+        const maxHours = Math.floor(props.maxDuration / MS_PER_HOUR);
+        const maxMinutes = Math.floor((props.maxDuration % MS_PER_HOUR) / MS_PER_MINUTE);
+        const label = maxHours > 0 ? `${maxHours}h${maxMinutes.toString().padStart(2, '0')}` : `${maxMinutes}min`;
+        rules.push((v: any) => (v != null && v <= props.maxDuration!) || `Max. ${label}`);
+      }
+      return rules;
+    });
+
+    const messages = computed((): string[] => props.messages ?? getMessages(props.modelValue, durationRules.value));
+
+    const reset = (): void => {
+      if (props.modelValue == null) {
+        innerHours.value = null;
+        innerMinutes.value = null;
+        return;
+      }
+      innerHours.value = Math.floor(props.modelValue / MS_PER_HOUR);
+      innerMinutes.value = Math.floor((props.modelValue % MS_PER_HOUR) / MS_PER_MINUTE);
+    };
+
+    const emitValue = (): void => {
+      const hours = innerHours.value ?? 0;
+      const minutes = innerMinutes.value ?? 0;
+      emit("update:modelValue", (hours * MS_PER_HOUR) + (minutes * MS_PER_MINUTE));
+    };
+
+    const onChangeHours = (value: number | null): void => {
+      innerHours.value = value;
+      emitValue();
+    };
+
+    const onChangeMinutes = (value: number | null): void => {
+      value = Math.min(59, Math.max(0, value ?? 0));
+      innerMinutes.value = value;
+      emitValue();
+    };
+
+    watch(() => props.modelValue, () => {
+      const currentHours = innerHours.value ?? 0;
+      const currentMinutes = innerMinutes.value ?? 0;
+      const currentTotal = (currentHours * MS_PER_HOUR) + (currentMinutes * MS_PER_MINUTE);
+      if (currentTotal !== (props.modelValue ?? 0)) {
+        reset();
+      }
+    }, { immediate: true });
+
+    return {
+      NumberRules,
+      innerHours,
+      innerMinutes,
+      durationRules,
+      messages,
+      onChangeHours,
+      onChangeMinutes
+    };
+  }
+});
+</script>

package/components/fields/FSEntityFieldUI.vue

@@ -233,6 +233,14 @@ export default defineComponent({
         {
           id: EntityType.Folder,
           label: $tr("ui.common.folders", "Folders")
+        },
+        {
+          id: EntityType.Grouping,
+          label: $tr("ui.common.groupings", "Groupings")
+        },
+        {
+          id: EntityType.Subgrouping,
+          label: $tr("ui.common.subgroupings", "Categories")
         }
       ];
 
@@ -259,6 +267,10 @@ export default defineComponent({
           return "mdi-view-dashboard";
         case EntityType.Folder:
           return "mdi-folder";
+        case EntityType.Grouping:
+          return "mdi-chart-donut";
+        case EntityType.Subgrouping:
+          return "mdi-shape-outline";
         default:
           return "mdi-cube";
       }

package/components/fields/FSRichTextField.vue

@@ -246,6 +246,7 @@ import FSTextField from "./FSTextField.vue";
 import FSIcon from "../FSIcon.vue";
 import FSCard from "../FSCard.vue";
 import FSText from "../FSText.vue";
+import FSSpan from "../FSSpan.vue";
 import FSMenu from '../FSMenu.vue';
 import FSCol from "../FSCol.vue";
 import FSRow from "../FSRow.vue";
@@ -256,6 +257,7 @@ export default defineComponent({
     FSAutoCompleteField,
     FSTextField,
     FSText,
+    FSSpan,
     FSIcon,
     FSCard,
     FSMenu,

package/components/lists/FSDataIteratorItem.vue

@@ -63,6 +63,7 @@ import { defineComponent, type PropType } from "vue";
 import { type FSDataTableColumn } from "@dative-gpi/foundation-shared-components/models";
 
 import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
 import FSText from "../FSText.vue";
 import FSTile from '../tiles/FSTile.vue';
 
@@ -71,6 +72,7 @@ export default defineComponent({
   components: {
     FSTile,
     FSText,
+    FSCol,
     FSRow
   },
   props: {

package/components/lists/FSDataTableUI.vue

@@ -97,6 +97,14 @@
             :filters="filters[header.value]"
             @update:filter="(value) => toggleFilter(header.value, value)"
           >
+            <template
+              #custom="{ filter, toggle, variant }"
+            >
+              <slot
+                :name="`${filterSlot(header)}-custom`"
+                v-bind="{ filter, toggle, variant }"
+              />
+            </template>
             <template
               #default="{ filter }"
             >
@@ -741,10 +749,12 @@ import FSFilterButton from "./FSFilterButton.vue";
 import FSHiddenButton from "./FSHiddenButton.vue";
 import FSHeaderButton from "./FSHeaderButton.vue";
 import FSOptionGroup from "../FSOptionGroup.vue";
+import FSSlideGroup from "../FSSlideGroup.vue";
 import FSToggleSet from "../FSToggleSet.vue";
 import FSDraggable from "./FSDraggable.vue";
 import FSCheckbox from "../FSCheckbox.vue";
 import FSDivider from "../FSDivider.vue";
+import FSButton from '../FSButton.vue';
 import FSCard from "../FSCard.vue";
 import FSChip from "../FSChip.vue";
 import FSIcon from "../FSIcon.vue";
@@ -763,10 +773,12 @@ export default defineComponent({
     FSSearchField,
     FSSelectField,
     FSOptionGroup,
+    FSSlideGroup,
     FSDraggable,
     FSToggleSet,
     FSCheckbox,
     FSDivider,
+    FSButton,
     FSCard,
     FSChip,
     FSIcon,

package/components/lists/FSFilterButton.vue

@@ -40,6 +40,7 @@
             :height="['30px', '24px']"
             :variant="getAllVariant()"
             :color="$props.color"
+            align="center-left"
             :clickable="true"
             @click="onToggleAll"
           />
@@ -56,25 +57,35 @@
           <FSCol
             gap="6px"
           >
-            <FSChip
+            <template
               v-for="(filter, index) in searchedFilters"
-              class="fs-filter-button-chip"
-              :variant="getVariant(filter)"
-              :height="['30px', '24px']"
-              :color="$props.color"
-              :label="filter.text"
-              :clickable="true"
               :key="index"
-              @click="() => onToggle(filter)"
             >
-              <template
-                #default
+              <slot
+                name="custom"
+                v-bind="{ filter, toggle: () => onToggle(filter), variant: getVariant(filter) }"
               >
-                <slot
-                  v-bind="{ filter }"
-                />
-              </template>
-            </FSChip>
+                <FSChip
+                  class="fs-filter-button-chip"
+                  :variant="getVariant(filter)"
+                  :height="['30px', '24px']"
+                  :color="$props.color"
+                  :label="filter.text"
+                  align="center-left"
+                  :clickable="true"
+                  :border="false"
+                  @click="() => onToggle(filter)"
+                >
+                  <template
+                    #default
+                  >
+                    <slot
+                      v-bind="{ filter }"
+                    />
+                  </template>
+                </FSChip>
+              </slot>
+            </template>
           </FSCol>
         </FSFadeOut>
       </FSCol>
@@ -85,7 +96,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType, ref } from "vue";
 
-import { type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
+import { type CardVariant, CardVariants, type ColorBase, ColorEnum, type FSDataTableColumn, type FSDataTableFilter } from "@dative-gpi/foundation-shared-components/models";
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
 import FSSearchField from "../fields/FSSearchField.vue";
@@ -153,21 +164,21 @@ export default defineComponent({
       return props.filters;
     });
 
-    const getVariant = (filter: FSDataTableFilter): "standard" | "full" | "borderless" => {
+    const getVariant = (filter: FSDataTableFilter): CardVariant => {
       if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
         if (filter.hidden) {
-          return "borderless";
+          return CardVariants.Background;
         }
-        return "full";
+        return CardVariants.Full;
       }
-      return "borderless";
+      return CardVariants.Background;
     };
 
-    const getAllVariant = (): "standard" | "full" => {
+    const getAllVariant = (): CardVariant => {
       if (singlePick.value || props.filters.filter(f => f.hidden).length > 0) {
-        return "standard";
+        return CardVariants.Background;
       }
-      return "full";
+      return CardVariants.Full;
     };
 
     const onToggle = (filter: FSDataTableFilter): void => {

package/components/lists/FSHeaderButton.vue

@@ -32,7 +32,8 @@
           <FSChip
             prependIcon="mdi-eye-off-outline"
             class="fs-header-button-chip"
-            variant="borderless"
+            variant="background"
+            :border="false"
             :label="$tr('data-table.hide-column', 'Hide column')"
             :height="[30, 24]"
             :clickable="true"
@@ -41,7 +42,8 @@
           <FSChip
             v-if="!$props.first"
             class="fs-header-button-chip"
-            variant="borderless"
+            variant="background"
+            :border="false"
             prependIcon="mdi-chevron-left"
             :label="$tr('data-table.move-left', 'Move to the left')"
             :height="[30, 24]"
@@ -51,7 +53,8 @@
           <FSChip
             v-if="!$props.last"
             class="fs-header-button-chip"
-            variant="borderless"
+            variant="background"
+            :border="false"
             prependIcon="mdi-chevron-right"
             :label="$tr('data-table.move-right', 'Move to the right')"
             :height="[30, 24]"

package/components/lists/FSTileList.vue

@@ -2,12 +2,21 @@
   <FSCol
     gap="12px"
   >
-    <FSSearchField
-      v-if="$props.searchable"
-      :hideHeader="true"
-      :modelValue="actualSearch"
-      @update:modelValue="onSearch"
-    />
+    <FSRow
+      v-if="$props.searchable || $slots.action"
+      :wrap="false"
+      align="center-left"
+    >
+      <FSSearchField
+        v-if="$props.searchable"
+        :hideHeader="true"
+        :modelValue="actualSearch"
+        @update:modelValue="onSearch"
+      />
+      <slot
+        name="action"
+      />
+    </FSRow>
     <FSFadeOut
       v-if="$props.direction == ListDirections.Column"
       :maxHeight="$props.maxHeight"
@@ -109,11 +118,13 @@ import FSFadeOut from "../FSFadeOut.vue";
 import FSSlideGroup from "../FSSlideGroup.vue"
 import FSSearchField from "../fields/FSSearchField.vue";
 import FSSimpleTileUI from "../tiles/FSSimpleTileUI.vue";
+import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSTileList",
   components: {
     FSCol,
+    FSRow,
     FSFadeOut,
     FSLoader,
     FSSlideGroup,
@@ -223,6 +234,12 @@ export default defineComponent({
       actualSearch.value = value;
     });
 
+    watch(() => props.singleSelect, () => {
+      if(props.singleSelect && props.modelValue.length > 1) { 
+        emit("update:modelValue", []); 
+      } 
+    }, { immediate: true });
+
     return {
       actualSearch,
       filteredItems,

package/components/map/FSMap.vue

@@ -389,7 +389,7 @@ export default defineComponent({
       if(!map.value || !props.bounds) {
         return;
       }
-      fitBounds(props.bounds, { maxZoom: 14 });
+      fitBounds(props.bounds, { maxZoom: props.zoom });
     });
 
     watch(() => props.enableScrollWheelZoom, (newValue) => {

package/components/map/FSMapMarker.vue

@@ -11,8 +11,9 @@ import { type Map, divIcon, type LatLng, marker, type Marker, type MarkerCluster
 import { useColors } from "../../composables";
 import { useRouting } from '@dative-gpi/foundation-shared-services/composables';
 
-import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
 import { MAP, MARKERCLUSTERGROUP } from './keys';
+import { ColorEnum, type ColorBase } from '@dative-gpi/foundation-shared-components/models';
+import { gpsMarkerHtml, locationMarkerHtml, pinMarkerHtml } from '../../utils/leafletMarkers';
 
 export default {
   name: 'FSMapMarker',
@@ -23,8 +24,8 @@ export default {
       required: false
     },
     color: {
-      type: String,
-      default: 'primary',
+      type: String as PropType<ColorBase>,
+      default: ColorEnum.Primary,
       required: false
     },
     latlng: {

package/components/selects/FSSelectMapLayer.vue

@@ -48,6 +48,11 @@ export default defineComponent({
         icon: 'mdi-map',
         label: $tr("ui.map-layer.map", "Map")
       },
+      {
+        id: MapLayers.OpenStreetMap,
+        icon: 'mdi-map-plus',
+        label: $tr("ui.map-layer.open-street-map", "Open Street Map")
+      },
       {
         id: MapLayers.Imagery,
         icon: 'mdi-satellite',

package/components/tiles/FSChartTileUI.vue

@@ -68,6 +68,7 @@ import { ApplicationScope, ChartType } from "@dative-gpi/foundation-shared-domai
 import { chartIcon } from "@dative-gpi/foundation-shared-components/tools";
 
 import FSImage from "../FSImage.vue";
+import FSIcon from "../FSIcon.vue";
 import FSTile from "./FSTile.vue";
 import FSSpan from "../FSSpan.vue";
 import FSRow from "../FSRow.vue";
@@ -80,6 +81,7 @@ export default defineComponent({
   name: "FSChartTileUI",
   components: {
     FSImage,
+    FSIcon,
     FSTile,
     FSRow,
     FSCol,

package/components/tiles/FSFolderTileUI.vue

@@ -14,12 +14,12 @@
         gap="6px"
       >
         <FSEntityCountBadge
-          :label="$tr('ui.common.folders', 'Folder(s)')"
+          :label="$tr('ui.common.folders', 'Folders')"
           :count="$props.recursiveFoldersIds?.length ?? 0"
           :color="ColorEnum.Primary"
         />
         <FSEntityCountBadge
-          :label="$tr('ui.common.dashboards', 'Dashboard(s)')"
+          :label="$tr('ui.common.dashboards', 'Dashboards')"
           :count="dashboardCount"
           :color="ColorEnum.Success"
         />

package/components/tiles/FSLocationTileUI.vue

@@ -60,6 +60,7 @@ import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-compone
 
 import FSEntityCountBadge from './FSEntityCountBadge.vue';
 import FSSimpleTileUI from './FSSimpleTileUI.vue';
+import FSIcon from "../FSIcon.vue";
 import FSColor from "../FSColor.vue";
 import FSSpan from "../FSSpan.vue";
 import FSCol from "../FSCol.vue";
@@ -70,6 +71,7 @@ export default defineComponent({
   components: {
     FSEntityCountBadge,
     FSSimpleTileUI,
+    FSIcon,
     FSColor,
     FSSpan,
     FSCol,