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

package/components/fields/FSDateTimeRangeDialog.vue

@@ -0,0 +1,160 @@
+<template>
+  <FSDialogSubmit
+    :title="$props.label"
+    :submitButtonColor="$props.color"
+    :modelValue="$props.dialog"
+    :disabled="!valid"
+    @update:modelValue="$emit('cancel')"
+    @click:submitButton="onSubmit"
+  >
+    <template
+      #body
+    >
+      <FSCol>
+        <FSCalendarTwin
+          :color="$props.color"
+          v-model="innerDateRange"
+        />
+        <FSRow>
+          <FSCol>
+            <FSClock
+              :color="$props.color"
+              :date="innerDateLeft"
+              v-model="innerTimeLeft"
+            />
+          </FSCol>
+          <FSCol>
+            <FSClock
+              :color="$props.color"
+              :date="innerDateRight"
+              v-model="innerTimeRight"
+            />
+          </FSCol>
+        </FSRow>
+      </FSCol>
+    </template>
+  </FSDialogSubmit>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, watch } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useAppTimeZone } from "@dative-gpi/foundation-shared-services/composables";
+
+import FSDialogSubmit from "../FSDialogSubmit.vue";
+import FSCalendarTwin from "../FSCalendarTwin.vue";
+import FSClock from "../FSClock.vue";
+import FSCol from "../FSCol.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSDateTimeRangeDialog",
+  components: {
+    FSDialogSubmit,
+    FSCalendarTwin,
+    FSClock,
+    FSCol,
+    FSRow
+  },
+  props: {
+    label: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    modelValue: {
+      type: Array as PropType<number[] | null>,
+      required: false,
+      default: () => null
+    },
+    color: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    dialog: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+  emits: ["update:modelValue", "cancel"],
+  setup(props, { emit }) {
+    const { getUserOffset } = useAppTimeZone();
+
+    const innerDateRange = ref<number[] | null>(null);
+    const innerTimeRight = ref(0);
+    const innerTimeLeft = ref(0);
+
+    const innerDateLeft = computed((): number | null => {
+      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length) {
+        return innerDateRange.value[0];
+      }
+      return null;
+    });
+
+    const innerDateRight= computed((): number | null => {
+      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length > 1) {
+        return innerDateRange.value[1];
+      }
+      return null;
+    });
+
+    const valid = computed((): boolean => {
+      return !!innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length > 1 &&
+        innerDateRange.value[0] + innerTimeLeft.value < innerDateRange.value[1] + innerTimeRight.value;
+    });
+
+    const reset = (): void => {
+      if (props.modelValue && Array.isArray(props.modelValue)) {
+        // FSClock just gives two numbers without consideration for the time zone
+        // We must adjust the time to the user's time zone
+        switch (props.modelValue.length) {
+          case 0: {
+            break;
+          }
+          case 1: {
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
+            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
+            break;
+          }
+          default: {
+            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset(props.modelValue[0])) % (24 * 60 * 60 * 1000));
+            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset(props.modelValue[1])) % (24 * 60 * 60 * 1000));
+            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
+            break;
+          }
+        }
+      }
+      else {
+        innerDateRange.value = null;
+        innerTimeLeft.value = 0;
+        innerTimeRight.value = 0;
+      }
+    };
+
+    watch(() => props.modelValue, () => {
+      reset();
+    }, { immediate: true });
+
+    const onSubmit = (): void => {
+      if (valid.value) {
+        emit("update:modelValue", [innerDateRange.value![0] + innerTimeLeft.value, innerDateRange.value![1] + innerTimeRight.value]);
+        return;
+      }
+    };
+
+    return {
+      valid,
+      innerDateLeft,
+      innerTimeLeft,
+      innerDateRight,
+      innerTimeRight,
+      innerDateRange,
+      ColorEnum,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/fields/FSDateTimeRangeField.vue

@@ -6,7 +6,7 @@
     :color="$props.color"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :readonly="true"
     :rules="$props.rules"
     :messages="messages"
@@ -15,6 +15,7 @@
     :modelValue="toShortTimeFormat"
     @click="onClick"
     @update:modelValue="onClear"
+    v-bind="$attrs"
   >
     <template
       #prepend-inner
@@ -25,7 +26,7 @@
         <FSButton
           variant="icon"
           icon="mdi-calendar"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :color="ColorEnum.Dark"
         />
       </slot>
@@ -40,66 +41,34 @@
       />
     </template>
   </FSTextField>
-  <FSDialogSubmit
+  <FSDateTimeRangeDialog
     :title="$props.label"
     :submitButtonColor="$props.color"
-    @click:submitButton="onSubmit"
-    v-model="dialog"
-  >
-    <template
-      #body
-    >
-      <FSCol>
-        <FSCalendarTwin
-          :color="$props.color"
-          v-model="innerDateRange"
-        />
-        <FSRow>
-          <FSCol>
-            <FSClock
-              :color="$props.color"
-              :date="innerDateLeft"
-              v-model="innerTimeLeft"
-            />
-          </FSCol>
-          <FSCol>
-            <FSClock
-              :color="$props.color"
-              :date="innerDateRight"
-              v-model="innerTimeRight"
-            />
-          </FSCol>
-        </FSRow>
-      </FSCol>
-    </template>
-  </FSDialogSubmit>
+    :dialog="dialog"
+    :modelValue="$props.modelValue"
+    :color="$props.color"
+    @cancel="dialog = false"
+    @update:modelValue="onSubmit($event)"
+  />
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, watch } from "vue";
+import { computed, defineComponent, type PropType, ref } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
-import { useAppTimeZone, useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
+import { useDateFormat } from "@dative-gpi/foundation-shared-services/composables";
 import { useRules } from "@dative-gpi/foundation-shared-components/composables";
 
-import FSDialogSubmit from "../FSDialogSubmit.vue";
-import FSCalendarTwin from "../FSCalendarTwin.vue";
+import FSDateTimeRangeDialog from "./FSDateTimeRangeDialog.vue";
 import FSTextField from "./FSTextField.vue";
 import FSButton from "../FSButton.vue";
-import FSClock from "../FSClock.vue";
-import FSCol from "../FSCol.vue";
-import FSRow from "../FSRow.vue";
 
 export default defineComponent({
   name: "FSDateTimeRangeField",
   components: {
-    FSDialogSubmit,
-    FSCalendarTwin,
+    FSDateTimeRangeDialog,
     FSTextField,
-    FSButton,
-    FSClock,
-    FSCol,
-    FSRow
+    FSButton
   },
   props: {
     label: {
@@ -137,24 +106,19 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { getUserOffset } = useAppTimeZone();
     const { epochToShortTimeFormat } = useDateFormat();
     const { validateOn, getMessages } = useRules();
 
     const dialog = ref(false);
 
-    const innerDateRange = ref<number[] | null>(null);
-    const innerTimeRight = ref(0);
-    const innerTimeLeft = ref(0);
-
     const toShortTimeFormat = computed((): string => {
       if (!props.modelValue || !Array.isArray(props.modelValue) || !props.modelValue.length) {
         return "";
@@ -162,88 +126,32 @@ export default defineComponent({
       return props.modelValue.map((epoch) => epochToShortTimeFormat(epoch)).join(" - ");
     });
 
-    const innerDateLeft = computed((): number | null => {
-      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length) {
-        return innerDateRange.value[0];
-      }
-      return null;
-    });
-
-    const innerDateRight= computed((): number | null => {
-      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length > 1) {
-        return innerDateRange.value[1];
-      }
-      return null;
-    });
-
     const messages = computed((): string[] => getMessages(props.modelValue, props.rules, true));
 
     const onClick = (): void => {
-      if (props.editable) {
+      if (!props.disabled) {
         dialog.value = true;
       }
     };
 
-    const onClear = (): void => {
-      emit("update:modelValue", null);
-      innerTimeLeft.value = 0;
-      innerTimeRight.value = 0;
-      innerDateRange.value = null;
-    };
-
-    const onSubmit = (): void => {
-      if (innerDateRange.value && Array.isArray(innerDateRange.value) && innerDateRange.value.length > 1) {
-        emit("update:modelValue", [innerDateRange.value[0] + innerTimeLeft.value, innerDateRange.value[1] + innerTimeRight.value]);
-      }
+    const onSubmit = (value: number[]): void => {
+      emit("update:modelValue", value);
       dialog.value = false;
     };
 
-    const reset = (): void => {
-      if (props.modelValue && Array.isArray(props.modelValue)) {
-        // FSClock just gives two numbers without consideration for the time zone
-        // We must adjust the time to the user's time zone
-        switch (props.modelValue.length) {
-          case 0: {
-            break;
-          }
-          case 1: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset()) % (24 * 60 * 60 * 1000));
-            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value];
-            break;
-          }
-          default: {
-            innerTimeLeft.value = Math.floor((props.modelValue[0] + getUserOffset()) % (24 * 60 * 60 * 1000));
-            innerTimeRight.value = Math.floor((props.modelValue[1] + getUserOffset()) % (24 * 60 * 60 * 1000));
-            innerDateRange.value = [props.modelValue[0] - innerTimeLeft.value, props.modelValue[1] - innerTimeRight.value];
-            break;
-          }
-        }
-      }
-      else {
-        innerDateRange.value = null;
-        innerTimeLeft.value = 0;
-        innerTimeRight.value = 0;
-      }
+    const onClear = (): void => {
+      emit("update:modelValue", null);
     };
 
-    watch(() => props.modelValue, () => {
-      reset();
-    }, { immediate: true });
-
     return {
       toShortTimeFormat,
-      innerDateLeft,
-      innerTimeLeft,
-      innerDateRight,
-      innerTimeRight,
-      innerDateRange,
       validateOn,
       ColorEnum,
       messages,
       dialog,
       onSubmit,
       onClear,
-      onClick
+      onClick,
     };
   }
 });

package/components/fields/FSEntityFieldUI.vue

@@ -3,27 +3,31 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
   >
     <FSCol
       gap="12px"
     >
-      <FSRow>
+      <FSRow
+        :wrap="false"
+      >
         <FSSelectField
+          :disabled="$props.disabled"
+          :items="actualEntityTypes"
           :hideHeader="true"
+          :clearable="false"
           :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"
+            :label="$tr('ui.common.edit', 'Edit')"
+            :disabled="$props.disabled"
             @click="$emit('click:select')"
           />
         </template>
@@ -31,13 +35,16 @@
           v-else
         >
           <FSButton
-            :label="$tr('ui.entity-field.select', 'Select')"
             icon="mdi-plus-circle-multiple-outline"
+            :label="$tr('ui.common.select', 'Select')"
+            :disabled="$props.disabled"
             @click="$emit('click:select')"
           />
         </template>
       </FSRow>
-      <FSRow>
+      <FSRow
+        v-if="$props.showCount"
+      >
         <template
           v-if="itemsCount > 0"
         >
@@ -56,7 +63,7 @@
               <FSSpan
                 font="text-overline"
               >
-                {{ $tr('ui.entity-field.selected', '{0} selected(s)', itemsCount) }}
+                {{ $tr('entity-field.selected', '{0} selected(s)', itemsCount) }}
               </FSSpan>
             </FSRow>
           </FSColor>
@@ -80,7 +87,7 @@
               <FSSpan
                 font="text-overline"
               >
-                {{ $tr('ui.entity-field.no-entity-selected', 'No entity selected') }}
+                {{ $tr('entity-field.no-entity-selected', 'No entity selected') }}
               </FSSpan>
             </FSRow>
           </FSColor>
@@ -89,7 +96,7 @@
 
       <FSFadeOut
         v-if="$props.showEntities && itemsCount > 0"
-        maxHeight="220px"
+        :maxHeight="$props.listMaxHeight"
         width="100%"
       >
         <slot
@@ -163,10 +170,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     entityType: {
       type: Number as PropType<EntityType>,
@@ -181,6 +188,16 @@ export default defineComponent({
       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"],
@@ -191,31 +208,31 @@ export default defineComponent({
       const items = [
         {
           id: EntityType.Model,
-          label: $tr("ui.entity-type.models", "Models")
+          label: $tr("ui.common.models", "Model(s)")
         },
         {
           id: EntityType.Group,
-          label: $tr("ui.entity-type.groups", "Groups")
+          label: $tr("ui.common.groups", "Groups")
         },
         {
           id: EntityType.Location,
-          label: $tr("ui.entity-type.locations", "Locations")
+          label: $tr("ui.common.locations", "Locations")
         },
         {
           id: EntityType.Device,
-          label: $tr("ui.entity-type.devices", "Devices")
+          label: $tr("ui.common.devices", "Devices")
         },
         {
           id: EntityType.User,
-          label: $tr("ui.entity-type.users", "Users")
+          label: $tr("ui.common.users", "Users")
         },
         {
           id: EntityType.Dashboard,
-          label: $tr("ui.entity-type.dashboards", "Dashboards")
+          label: $tr("ui.common.dashboards", "Dashboards")
         },
         {
           id: EntityType.Folder,
-          label: $tr("ui.entity-type.folders", "Folders")
+          label: $tr("ui.common.folders", "Folders")
         }
       ];
 

package/components/fields/FSGradientField.vue

@@ -6,7 +6,7 @@
       :label="$props.label"
       :description="$props.description"
       :required="$props.required"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       v-bind="$attrs"
     >
       <FSRow>
@@ -15,14 +15,14 @@
           :allowOpacity="$props.allowOpacity"
           :modelValue="$props.modelValue[colorIndex - 1]"
           :required="$props.required"
-          :editable="$props.editable"
+          :disabled="$props.disabled"
           :key="colorIndex"
           @update:modelValue="$emit('update:modelValue', $props.modelValue.map((color, i) => colorIndex === i + 1 ? $event : color))"
         />
       </FSRow>
       <FSSelectField
         class="fs-gradient-field-select"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :clearable="false"
         :items="items"
         modelValue="custom"
@@ -92,10 +92,10 @@ export default defineComponent({
       required: false,
       default: false
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     },
     allowOpacity: {
       type: Boolean,

package/components/fields/FSIconField.vue

@@ -1,15 +1,18 @@
 <template>
-  <FSCol>
+  <FSCol
+    :maxWidth="$props.maxWidth"
+  >
     <FSTextField
       :label="$props.label"
       :description="$props.description"
       :hideHeader="$props.hideHeader"
       :required="$props.required"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :rules="$props.rules"
       :messages="messages"
       :validateOn="validateOn"
       :validationValue="$props.modelValue"
+      :maxWidth="null"
       v-model="innerValue"
       v-bind="$attrs"
     >
@@ -28,14 +31,13 @@
       </template>
     </FSTextField>
     <FSToggleSet
-      class="fs-icon-field-set"
       ref="toggleSetRef"
       variant="slide"
       :buttonColor="$props.buttonColor"
       :activeColor="$props.activeColor"
       :modelValue="$props.modelValue"
       :required="$props.required"
-      :editable="$props.editable"
+      :disabled="$props.disabled"
       :values="icons"
       @update:modelValue="$emit('update:modelValue', $event)"
     />
@@ -43,7 +45,7 @@
 </template>
 
 <script lang="ts">
-import type { PropType} from "vue";
+import type { PropType, StyleValue } from "vue";
 import { computed, defineComponent, ref, watch } from "vue";
 
 import { Icons, sortByLevenshteinDistance } from "@dative-gpi/foundation-shared-components/utils";
@@ -120,11 +122,16 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
-    }
+      default: false
+    },
+    maxWidth: {
+      type: [Array, String, Number] as PropType<string[] | number[] | string | number | null>,
+      required: false,
+      default: "600px"
+    },
   },
   emits: ["update:modelValue"],
   setup(props) {
@@ -139,7 +146,7 @@ export default defineComponent({
     const innerValue = ref<string | null>(null);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-icon-field-color": lights.dark
         };