@dative-gpi/foundation-shared-components 1.0.66 → 1.0.67-map-carousel

package/components/fields/FSEntityFieldUI.vue

@@ -3,7 +3,7 @@
     :description="$props.description"
     :hideHeader="$props.hideHeader"
     :required="$props.required"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :label="$props.label"
     :messages="messages"
   >
@@ -14,18 +14,20 @@
         :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>
@@ -33,8 +35,9 @@
           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>
@@ -60,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>
@@ -84,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>
@@ -167,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>,
@@ -205,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
         };

package/components/fields/FSMagicConfigField.vue

@@ -3,10 +3,11 @@
     class="fs-magic-config-field"
   >
     <component
+      v-if="$props.type"
       class="fs-magic-config-field-value"
       :is="get($props.type)"
-      :label="$tr('ui.magic-config-field.value', 'Value')"
-      :editable="$props.editable"
+      :label="$tr('ui.common.value', 'Value')"
+      :disabled="$props.disabled"
       :required="true"
       :rules="rules"
       :modelValue="valueToInput"
@@ -16,8 +17,8 @@
       gap="24px"
     >
       <FSTranslateField
-        :label="$tr('ui.magic-config-field.label', 'Label')"
-        :editable="$props.editable"
+        :label="$tr('entity.common.label', 'Label')"
+        :disabled="$props.disabled"
         :modelValue="$props.labelDefault"
         :translations="$props.translations"
         @update:modelValue="$emit('update:labelDefault', $event)"
@@ -42,7 +43,7 @@
 <script lang="ts">
 import { computed, defineComponent, type PropType } from "vue";
 
-import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules } from "../../models";
+import { DateRules, IconRules, NumberRules, TextRules, TimeRules, TimeStepRules, AutocompleteRules } from "../../models";
 import { useMagicFieldProvider } from "../../composables";
 import { MagicFieldType } from "../../models/magicFields";
 
@@ -80,10 +81,10 @@ export default defineComponent({
       required: false,
       default: () => []
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["click:remove", "click:add", "update:modelValue", "update:labelDefault", "update:translations"],
@@ -104,6 +105,8 @@ export default defineComponent({
           return [TimeRules.required()];
         case MagicFieldType.TimeStepField:
           return [TimeStepRules.required()];
+        case MagicFieldType.PlotPerField:
+          return [AutocompleteRules.required()];
       }
       return [];
     });
@@ -125,6 +128,8 @@ export default defineComponent({
           return props.modelValue === "true";
         case MagicFieldType.TimeStepField:
           return JSON.parse(props.modelValue);
+        case MagicFieldType.PlotPerField:
+          return parseInt(props.modelValue);
         default:
           return props.modelValue;
       }
@@ -145,6 +150,9 @@ export default defineComponent({
         case MagicFieldType.TimeStepField:
           emit("update:modelValue", JSON.stringify(value));
           break;
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", value.toString());
+          break;
         default:
           emit("update:modelValue", value);
           break;

package/components/fields/FSMagicField.vue

@@ -131,6 +131,8 @@ export default defineComponent({
           return props.modelValue === "true";
         case MagicFieldType.TimeStepField:
           return JSON.parse(props.modelValue);
+        case MagicFieldType.PlotPerField:
+          return parseInt(props.modelValue);
         default:
           return props.modelValue;
       }
@@ -146,9 +148,9 @@ export default defineComponent({
           return value.toString();
         case MagicFieldType.Switch:
           if (value) {
-            return $tr("ui.magic-field.true", "True");
+            return $tr("magic-field.true", "True");
           }
-          return $tr("ui.magic-field.false", "False");
+          return $tr("magic-field.false", "False");
         case MagicFieldType.DateTimeField:
           return epochToShortTimeFormat(parseFloat(value));
         case MagicFieldType.TimeField:
@@ -175,6 +177,9 @@ export default defineComponent({
         case MagicFieldType.TimeStepField:
           emit("update:modelValue", JSON.stringify(value));
           break;
+        case MagicFieldType.PlotPerField:
+          emit("update:modelValue", value.toString());
+          break;
         default:
           emit("update:modelValue", value);
           break;

package/components/fields/FSMapAddressField.vue

@@ -0,0 +1,187 @@
+<template>
+  <FSCol>
+    <FSMap
+      :lockZoomOnFlyTo="true"
+      v-model:center="center"
+      :enableScrollWheelZoom="true"
+      :showMyLocation="true"
+      :zoom="5"
+      v-model:currentLayer="mapLayer"
+      @click:latlng="(latlng: any) => onNewLatLng(latlng.lat, latlng.lng, false)"
+      v-bind="$attrs"
+    >
+      <FSMapMarker
+        v-if="actualLatitude && actualLongitude"
+        :label="$props.label"
+        :icon="$props.icon"
+        :latlng="{ lat: actualLatitude, lng: actualLongitude }"
+        :selected="true"
+      />
+    </FSMap>
+    <FSCol>
+      <FSAutoCompleteAddress
+        :maxWidth="null"
+        :modelValue="$props.modelValue"
+        @update:modelValue="$emit('update:modelValue', $event)"
+      />
+      <FSRow>
+        <FSNumberField
+          :label="$tr('ui.location.latitude', 'Latitude')"
+          :modelValue="actualLatitude"
+          :clearable="false"
+          :rules="[NumberRules.max(90), NumberRules.min(-90), NumberRules.required()]"
+          @update:modelValue="onNewLatLng($event, actualLongitude ?? 0, true)"
+        />
+        <FSNumberField
+          :label="$tr('ui.location.longitude', 'Longitude')"
+          :modelValue="actualLongitude"
+          :clearable="false"
+          :rules="[NumberRules.max(180), NumberRules.min(-180), NumberRules.required()]"
+          @update:modelValue="onNewLatLng(actualLatitude ?? 0, $event, true)"
+        />
+      </FSRow>
+    </FSCol>
+  </FSCol>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, ref, watch, type PropType } from "vue";
+
+import type { Address } from "@dative-gpi/foundation-shared-domain";
+import { useAddress } from "@dative-gpi/foundation-shared-components/composables";
+import { MapLayers, NumberRules } from '@dative-gpi/foundation-shared-components/models';
+
+import FSAutoCompleteAddress from '@dative-gpi/foundation-shared-components/components/autocompletes/FSAutoCompleteAddress.vue';
+import FSNumberField from "@dative-gpi/foundation-shared-components/components/fields/FSNumberField.vue"
+import FSMapMarker from '@dative-gpi/foundation-shared-components/components/map/FSMapMarker.vue';
+import FSMap from "@dative-gpi/foundation-shared-components/components/map/FSMap.vue";
+import FSRow from '@dative-gpi/foundation-shared-components/components/FSRow.vue';
+import FSCol from '@dative-gpi/foundation-shared-components/components/FSCol.vue';
+
+
+export function debounceAsync<T, U extends any[]>(
+  callback: (...args: U) => Promise<T>,
+  wait: number,
+): (...args: U) => Promise<T> {
+  let timeoutId: number | null = null;
+  let rejectPromise: (((reason?: any) => void) | null) = null;
+
+  return (...args: U) => {
+    if (timeoutId) {
+      clearTimeout(timeoutId);
+      timeoutId = null;
+    }
+    if (rejectPromise) {
+      rejectPromise("debounced");
+      rejectPromise = null;
+    }
+
+    return new Promise<T>((resolve) => {
+      const timeoutPromise = new Promise<void>((resolve, reject) => {
+        timeoutId = setTimeout(resolve, wait);
+        rejectPromise = reject;
+      });
+      timeoutPromise.then(async () => {
+        resolve(await callback(...args));
+      });
+    });
+  };
+}
+
+export default defineComponent({
+  name: "FSMapAddressField",
+  components: {
+    FSAutoCompleteAddress,
+    FSNumberField,
+    FSMapMarker,
+    FSMap,
+    FSRow,
+    FSCol
+  },
+  emits: ["update:modelValue"],
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    icon: {
+      type: String,
+      required: true,
+    },
+    modelValue: {
+      type: Object as PropType<Address | null>,
+      required: false,
+    }
+  },
+  setup(props, { emit }) {
+    const { reverseSearch } = useAddress();
+
+    const loading = ref(false);
+    const actualLatitude = ref<number | null>(null);
+    const actualLongitude = ref<number | null>(null);
+    const mapLayer = ref(MapLayers.Map);
+
+    const center = computed(() => {
+      return props.modelValue ? [props.modelValue.latitude, props.modelValue.longitude] : null;
+    });
+
+    const reverseSearchDebounced = debounceAsync(reverseSearch, 500);
+    
+    const onNewLatLng = async (lat: number|string, lng: number|string, debounced: boolean) => {
+      if(typeof lat === 'string') {
+        lat = parseFloat(lat);
+        if(isNaN(lat)) {
+          return;
+        }
+      }
+
+      if(typeof lng === 'string') {
+        lng = parseFloat(lng);
+        if(isNaN(lng)) {
+          return;
+        }
+      }
+
+      actualLatitude.value = lat;
+      actualLongitude.value = lng;
+
+      let fullAddress;
+      loading.value = true;
+      if(debounced) {
+        try {
+          fullAddress = await reverseSearchDebounced(lat, lng);
+        } catch {
+          return;
+        }
+      } else {
+        fullAddress = await reverseSearch(lat, lng);
+      }
+
+      emit("update:modelValue", {
+        ...fullAddress,
+        latitude: actualLatitude.value,
+        longitude: actualLongitude.value,
+      });
+      loading.value = false;
+    }
+
+    watch(() => props.modelValue, (newValue) => {
+      if(newValue) {
+        actualLatitude.value = newValue.latitude;
+        actualLongitude.value = newValue.longitude;
+      }
+    }, { immediate: true });
+
+    return {
+      center, 
+      mapLayer,
+      NumberRules,
+      actualLatitude,
+      actualLongitude,
+      onNewLatLng
+    };
+  }
+});
+
+
+</script>

package/components/fields/FSNumberField.vue

@@ -2,7 +2,7 @@
   <FSTextField
     class="fs-number-field"
     minWidth="80px"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :modelValue="$props.modelValue?.toString()"
     @update:modelValue="onUpdate"
     v-bind="$attrs"
@@ -35,18 +35,22 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
   setup(_, { emit }) {
-    const onUpdate = (value: string) => {
+    const onUpdate = (value: string | null | undefined) => {
       if (value === "-") {
         return;
       }
+      if(value === null || value === undefined) {
+        emit("update:modelValue", null);
+        return;
+      }
       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(" ", "")));

package/components/fields/FSPasswordField.vue

@@ -1,7 +1,7 @@
 <template>
   <FSTextField
     :type="type"
-    :editable="$props.editable"
+    :disabled="$props.disabled"
     :modelValue="$props.modelValue"
     @update:modelValue="$emit('update:modelValue', $event)"
     v-bind="$attrs"
@@ -20,7 +20,7 @@
     >
       <FSButton
         variant="icon"
-        :editable="$props.editable"
+        :disabled="$props.disabled"
         :color="ColorEnum.Dark"
         :icon="icon"
         @click="onToggle"
@@ -33,7 +33,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref } from "vue";
+import { computed, defineComponent, ref, type PropType, type StyleValue } from "vue";
 
 import { useColors } from "@dative-gpi/foundation-shared-components/composables";
 import { ColorEnum } from "@dative-gpi/foundation-shared-components/models";
@@ -53,10 +53,10 @@ export default defineComponent({
       required: false,
       default: null
     },
-    editable: {
+    disabled: {
       type: Boolean,
       required: false,
-      default: true
+      default: false
     }
   },
   emits: ["update:modelValue"],
@@ -69,7 +69,7 @@ export default defineComponent({
     const stars = ref(true);
 
     const style = computed((): StyleValue => {
-      if (!props.editable) {
+      if (props.disabled) {
         return {
           "--fs-password-field-cursor"   : "default",
           "--fs-password-field-color": lights.dark,
@@ -88,7 +88,7 @@ export default defineComponent({
     const icon = computed((): string => stars.value ? "mdi-eye-off-outline" : "mdi-eye-outline");
 
     const onToggle = (): void => {
-      if (!props.editable) {
+      if (props.disabled) {
         return;
       }
       stars.value = !stars.value;