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

package/components/fields/FSEntityFieldUI.vue

@@ -0,0 +1,271 @@
+<template>
+  <FSBaseField
+    :description="$props.description"
+    :hideHeader="$props.hideHeader"
+    :required="$props.required"
+    :editable="$props.editable"
+    :label="$props.label"
+    :messages="messages"
+  >
+    <FSCol
+      gap="12px"
+    >
+      <FSRow
+        :wrap="false"
+      >
+        <FSSelectField
+          :hideHeader="true"
+          :modelValue="$props.entityType"
+          @update:modelValue="$emit('update:entityType', $event)"
+          :items="actualEntityTypes"
+          :clearable="false"
+        />
+        <template
+          v-if="itemsCount > 0"
+        >
+          <FSButton
+            :label="$tr('ui.entity-field.edit', 'Edit')"
+            icon="mdi-pencil"
+            @click="$emit('click:select')"
+          />
+        </template>
+        <template
+          v-else
+        >
+          <FSButton
+            :label="$tr('ui.entity-field.select', 'Select')"
+            icon="mdi-plus-circle-multiple-outline"
+            @click="$emit('click:select')"
+          />
+        </template>
+      </FSRow>
+      <FSRow
+        v-if="$props.showCount"
+      >
+        <template
+          v-if="itemsCount > 0"
+        >
+          <FSColor
+            :color="ColorEnum.Primary"
+            :border="false"
+            width="100%"
+          >
+            <FSRow
+              padding="4px"
+              align="center-center"
+            >
+              <FSIcon
+                :icon="entityIcon"
+              />
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $tr('ui.entity-field.selected', '{0} selected(s)', itemsCount) }}
+              </FSSpan>
+            </FSRow>
+          </FSColor>
+        </template>
+
+        <template
+          v-else
+        >
+          <FSColor
+            :color="ColorEnum.Light"
+            :border="false"
+            width="100%"
+          >
+            <FSRow
+              padding="4px"
+              align="center-center"
+            >
+              <FSIcon
+                :icon="entityIcon"
+              />
+              <FSSpan
+                font="text-overline"
+              >
+                {{ $tr('ui.entity-field.no-entity-selected', 'No entity selected') }}
+              </FSSpan>
+            </FSRow>
+          </FSColor>
+        </template>
+      </FSRow>
+
+      <FSFadeOut
+        v-if="$props.showEntities && itemsCount > 0"
+        :maxHeight="$props.listMaxHeight"
+        width="100%"
+      >
+        <slot
+          name="items"
+        />
+      </FSFadeOut>
+    </FSCol>
+  </FSBaseField>
+</template>
+
+
+<script lang="ts">
+import { computed, defineComponent, type PropType } from "vue";
+
+import { EntityType } from "@dative-gpi/foundation-shared-domain/enums";
+import { ColorEnum } from "../../models";
+import { useTranslations } from "@dative-gpi/bones-ui";
+
+import FSRow from "../FSRow.vue";
+import FSCol from "../FSCol.vue";
+import FSBaseField from "./FSBaseField.vue";
+import FSSelectField from "./FSSelectField.vue";
+import FSButton from "../FSButton.vue";
+import FSIcon from "../FSIcon.vue";
+import FSColor from "../FSColor.vue";
+
+export default defineComponent({
+  name: "FSEntityFieldUI",
+  components: {
+    FSBaseField,
+    FSSelectField,
+    FSButton,
+    FSIcon,
+    FSColor,
+    FSRow,
+    FSCol
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    description: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    itemsCount: {
+      type: Number,
+      required: false,
+      default: 0
+    },
+    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
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    entityType: {
+      type: Number as PropType<EntityType>,
+      required: true
+    },
+    allowedEntityTypes: {
+      type: Array as PropType<EntityType[]>,
+      required: false,
+      default: () => []
+    },
+    showEntities: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    showCount: {
+      type: Boolean,
+      required: false,
+      default: true
+    },
+    listMaxHeight: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: "220px"
+    }
+  },
+  emits: ["update:entityType", "click:select"],
+  setup(props) {
+    const { $tr } = useTranslations();
+
+    const actualEntityTypes = computed(() => {
+      const items = [
+        {
+          id: EntityType.Model,
+          label: $tr("ui.entity-type.models", "Models")
+        },
+        {
+          id: EntityType.Group,
+          label: $tr("ui.entity-type.groups", "Groups")
+        },
+        {
+          id: EntityType.Location,
+          label: $tr("ui.entity-type.locations", "Locations")
+        },
+        {
+          id: EntityType.Device,
+          label: $tr("ui.entity-type.devices", "Devices")
+        },
+        {
+          id: EntityType.User,
+          label: $tr("ui.entity-type.users", "Users")
+        },
+        {
+          id: EntityType.Dashboard,
+          label: $tr("ui.entity-type.dashboards", "Dashboards")
+        },
+        {
+          id: EntityType.Folder,
+          label: $tr("ui.entity-type.folders", "Folders")
+        }
+      ];
+
+      if(props.allowedEntityTypes.length) {
+        return items.filter(item => props.allowedEntityTypes.includes(item.id));
+      } else {
+        return items;
+      }
+    });
+
+    const entityIcon = computed(() => {
+      switch(props.entityType) {
+        case EntityType.Model:
+          return "mdi-cube";
+        case EntityType.Group:
+          return "mdi-account-group";
+        case EntityType.Location:
+          return "mdi-map-marker";
+        case EntityType.Device:
+          return "mdi-cellphone";
+        case EntityType.User:
+          return "mdi-account";
+        case EntityType.Dashboard:
+          return "mdi-view-dashboard";
+        case EntityType.Folder:
+          return "mdi-folder";
+        default:
+          return "mdi-cube";
+      }
+    });
+
+    return {
+      ColorEnum,
+      entityIcon,
+      actualEntityTypes
+    };
+  }
+});
+</script>

package/components/fields/FSGradientField.vue

@@ -21,44 +21,25 @@
         />
       </FSRow>
       <FSSelectField
-        class="fs-gradient-select-field"
-        :clearable="false"
+        class="fs-gradient-field-select"
         :editable="$props.editable"
+        :clearable="false"
         :items="items"
-        :modelValue="JSON.stringify($props.modelValue)"
-        @update:modelValue="$emit('update:modelValue', presetGradients[$event])"
+        modelValue="custom"
+        @update:modelValue="$emit('update:modelValue', allGradients[$event])"
       >
         <template
-          v-slot:selection="{ item }"
+          #item-prepend="{ item }"
         >
           <FSRow
             class="fs-gradient-field-preview"
-            height="fill"
+            align="center-center"
+            height="12px"
             width="100%"
-            :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(JSON.parse(item.value))})` }"
-          >
-            <span />
-          </FSRow>
-        </template>
-        <template
-          v-slot:item="{ item, props }"
-        >
-          <v-list-item
-            v-bind="props"
-          >
-            <template
-              #title
-            >
-              <FSRow
-                class="fs-gradient-field-preview"
-                height="fill"
-                width="100%"
-                :style="{ '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(presetGradients[item.value])})` }"
-              >
-                <span />
-              </FSRow>
-            </template>
-          </v-list-item>
+            :style="{
+              '--fs-gradient-field-background': `linear-gradient(to right, ${encodeGradientCssColors(allGradients[item.id])})`
+            }"
+          />
         </template>
       </FSSelectField>
     </FSBaseField>
@@ -66,7 +47,7 @@
 </template>
 
 <script lang="ts">
-import { type PropType, defineComponent } from "vue";
+import { type PropType, defineComponent, computed } from "vue";
 
 import { groupedGradients } from "../../utils";
 import { useColors } from "../../composables";
@@ -127,14 +108,27 @@ export default defineComponent({
     const { getColors } = useColors();
 
     const presetGradients = groupedGradients[props.colorCount];
-    const items = Object.keys(presetGradients)
+
+    const allGradients = computed<Record<string, string[]>>(() => {
+      return {
+        'custom': [
+          ...props.modelValue
+        ],
+        ...presetGradients
+      }
+    });
+
+    const items = Object.keys(allGradients.value).map((key) => ({
+      id: key,
+      label: null
+    }));
 
     const encodeGradientCssColors = (colors: string[]) => {
       return colors.map((color) => getColors(color).base).join(", ");
     };
 
     return {
-      presetGradients,
+      allGradients,
       items,
       encodeGradientCssColors
     };

package/components/fields/FSIconField.vue

@@ -48,8 +48,7 @@ import { computed, defineComponent, ref, watch } from "vue";
 
 import { Icons, sortByLevenshteinDistance } from "@dative-gpi/foundation-shared-components/utils";
 import { useColors, useRules } from "@dative-gpi/foundation-shared-components/composables";
-import type { ColorBase} from "@dative-gpi/foundation-shared-components/models";
-import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import type { FSToggle } from "@dative-gpi/foundation-shared-components/models";
 
 import FSToggleSet from "../FSToggleSet.vue";
@@ -139,7 +138,7 @@ export default defineComponent({
     const toggleSetRef = ref<HTMLElement | null>(null);
     const innerValue = ref<string | null>(null);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-icon-field-color": lights.dark

package/components/fields/FSMagicConfigField.vue

@@ -1,5 +1,7 @@
 <template>
-  <FSRow>
+  <FSRow
+    class="fs-magic-config-field"
+  >
     <component
       class="fs-magic-config-field-value"
       :is="get($props.type)"
@@ -38,10 +40,9 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
-import { DateRules, IconRules, NumberRules, TextRules, TimeRules } from "../../models";
+import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules } from "../../models";
 import { useMagicFieldProvider } from "../../composables";
 import { MagicFieldType } from "../../models/magicFields";
 
@@ -69,7 +70,7 @@ export default defineComponent({
       required: false,
       default: null
     },
-    value: {
+    modelValue: {
       type: String as PropType<string | null>,
       required: false,
       default: null
@@ -85,7 +86,7 @@ export default defineComponent({
       default: true
     }
   },
-  emits: ["click:remove", "click:add", "update:value", "update:labelDefault", "update:translations"],
+  emits: ["click:remove", "click:add", "update:modelValue", "update:labelDefault", "update:translations"],
   setup(props, { emit }) {
     const { get } = useMagicFieldProvider();
 
@@ -101,43 +102,51 @@ export default defineComponent({
           return [IconRules.required()];
         case MagicFieldType.TimeField:
           return [TimeRules.required()];
+        case MagicFieldType.TimeStepField:
+          return [TimeStepRules.required()];
       }
       return [];
     });
 
     const valueToInput = computed((): any => {
+      if (!props.modelValue) {
+        return null;
+      }
+
       switch (props.type) {
         case MagicFieldType.NumberField:
         case MagicFieldType.DateTimeField:
         case MagicFieldType.TimeField:
-          if (props.value == null || isNaN(parseFloat(props.value))) {
+          if (isNaN(parseFloat(props.modelValue))) {
             return null;
           }
-          return parseFloat(props.value);
+          return parseFloat(props.modelValue);
         case MagicFieldType.Switch: 
-          if (props.value == null) {
-            return null;
-          }
-          return props.value === "true";
+          return props.modelValue === "true";
+        case MagicFieldType.TimeStepField:
+          return JSON.parse(props.modelValue);
         default:
-          return props.value;
+          return props.modelValue;
       }
     });
 
     const inputToValue = (value: any) => {
+      if (!value) {
+        emit("update:modelValue", null);
+      }
+
       switch (props.type) {
         case MagicFieldType.NumberField:
         case MagicFieldType.Switch: 
         case MagicFieldType.DateTimeField:
         case MagicFieldType.TimeField:
-          if (value == null) {
-            emit("update:value", null);
-            break;
-          }
-          emit("update:value", value.toString());
+          emit("update:modelValue", value.toString());
+          break;
+        case MagicFieldType.TimeStepField:
+          emit("update:modelValue", JSON.stringify(value));
           break;
         default:
-          emit("update:value", value);
+          emit("update:modelValue", value);
           break;
       }
     };

package/components/fields/FSMagicField.vue

@@ -58,16 +58,15 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { computed, defineComponent } from "vue";
+import { computed, defineComponent, type PropType } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
 
-import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 
 import { useMagicFieldProvider } from "../../composables";
 import { MagicFieldType } from "../../models/magicFields";
-import { getTimeBestString } from "../../utils";
+import { getTimeBestString, timeStepToString } from "../../utils";
 
 import FSSelectField from "./FSSelectField.vue";
 import FSIcon from "../FSIcon.vue";
@@ -106,7 +105,7 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { epochToShortTimeFormat } = useAppTimeZone();
+    const { epochToShortTimeFormat } = useDateFormat();
     const { $tr } = useTranslationsProvider();
     const { get } = useMagicFieldProvider();
 
@@ -116,28 +115,32 @@ export default defineComponent({
     })));
 
     const valueToInput = computed((): any => {
+      if (props.modelValue == null) {
+        return null;
+      }
+
       switch (props.type) {
         case MagicFieldType.NumberField:
         case MagicFieldType.DateTimeField:
         case MagicFieldType.TimeField:
-          if (props.modelValue == null || isNaN(parseFloat(props.modelValue))) {
+          if (isNaN(parseFloat(props.modelValue))) {
             return null;
           }
           return parseFloat(props.modelValue);
         case MagicFieldType.Switch: 
-          if (props.modelValue == null) {
-            return null;
-          }
           return props.modelValue === "true";
+        case MagicFieldType.TimeStepField:
+          return JSON.parse(props.modelValue);
         default:
           return props.modelValue;
       }
     });
 
-    const asString = (value: any): string | null => {
+    const asString = (value: string): string | null => {
       if (value == null) {
-        return null;
+        return "";
       }
+      
       switch (props.type) {
         case MagicFieldType.NumberField:
           return value.toString();
@@ -147,26 +150,31 @@ export default defineComponent({
           }
           return $tr("ui.magic-field.false", "False");
         case MagicFieldType.DateTimeField:
-          return epochToShortTimeFormat(value);
+          return epochToShortTimeFormat(parseFloat(value));
         case MagicFieldType.TimeField:
-          return getTimeBestString(value);
+          return getTimeBestString(parseFloat(value));
+        case MagicFieldType.TimeStepField:
+          return timeStepToString(JSON.parse(value));
         default:
           return value;
       }
     }
 
     const inputToValue = (value: any) => {
+      if (value == null) {
+        emit("update:modelValue", null);
+      }
+
       switch (props.type) {
         case MagicFieldType.NumberField:
         case MagicFieldType.Switch: 
         case MagicFieldType.DateTimeField:
         case MagicFieldType.TimeField:
-          if (value == null) {
-            emit("update:modelValue", null);
-            break;
-          }
           emit("update:modelValue", value.toString());
           break;
+        case MagicFieldType.TimeStepField:
+          emit("update:modelValue", JSON.stringify(value));
+          break;
         default:
           emit("update:modelValue", value);
           break;

package/components/fields/FSNumberField.vue

@@ -1,6 +1,7 @@
 <template>
   <FSTextField
     class="fs-number-field"
+    minWidth="80px"
     :editable="$props.editable"
     :modelValue="$props.modelValue?.toString()"
     @update:modelValue="onUpdate"
@@ -19,8 +20,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType } from "vue";
-import { defineComponent } from "vue";
+import { defineComponent, type PropType } from "vue";
 
 import FSTextField from "./FSTextField.vue";
 
@@ -44,13 +44,15 @@ export default defineComponent({
   emits: ["update:modelValue"],
   setup(_, { emit }) {
     const onUpdate = (value: string) => {
-      const match = /([0-9 ]*[,.]?)?[0-9]+/.exec(value);
-      if (match && !isNaN(parseFloat(match[0].replace(",", ".").replace(" ", "")))) {
-        emit("update:modelValue", parseFloat(match[0].replace(",", ".").replace(" ", "")));
+      if (value === "-") {
+        return;
       }
-      else {
-        emit("update:modelValue", 0);
+      const match = /[-]?([0-9 ]*[,.]?)?[0-9]*/.exec(value);
+      if (match != null && !isNaN(parseFloat(match[0].replace(",", ".").replace(" ", "")))) {
+        emit("update:modelValue", parseFloat(match[0].replace(",", ".").replace(" ", "")));
+        return;
       }
+      emit("update:modelValue", 0);
     };
 
     return {

package/components/fields/FSPasswordField.vue

@@ -33,8 +33,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
-import { computed, defineComponent, ref } from "vue";
+import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -69,7 +68,7 @@ export default defineComponent({
 
     const stars = ref(true);
 
-    const style = computed((): { [key: string] : string | null | undefined } => {
+    const style = computed((): StyleValue => {
       if (!props.editable) {
         return {
           "--fs-password-field-cursor"   : "default",