@dative-gpi/foundation-shared-components 1.0.177 → 1.0.179-edit-image

package/components/FSEditImage.vue

@@ -13,7 +13,7 @@ import { computed, defineComponent, type PropType } from "vue";
 
 import { IMAGE_RAW_URL } from "@dative-gpi/foundation-shared-services/config";
 
-import { useImage } from "@dative-gpi/foundation-shared-services/composables";
+import { useImage, useAppAuthToken } from "@dative-gpi/foundation-shared-services/composables";
 
 import FSEditImageUI from "./FSEditImageUI.vue";
 
@@ -32,10 +32,11 @@ export default defineComponent({
   emits: ["update:imageId"],
   setup(props) {
     const { get: getImage, entity: image } = useImage();
+    const { authToken } = useAppAuthToken();
     
     const source = computed(() => {
-      return props.imageId ? IMAGE_RAW_URL(props.imageId) : null;
-    })
+      return props.imageId ? IMAGE_RAW_URL(props.imageId, authToken.value) : null;
+    });
 
     const onError = (): void => {
       if (props.imageId) {

package/components/fields/FSTranslateField.vue

@@ -84,7 +84,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
@@ -165,7 +165,10 @@ export default defineComponent({
     
     const dialog = ref(false);
 
-    const innerTranslations = ref(props.translations);
+    const innerTranslations = ref<{
+      languageCode: string;
+      [key: string]: string | null;
+    }[]>(props.translations);
 
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -189,7 +192,8 @@ export default defineComponent({
       if (!translation || !translation[props.property]) {
         return "";
       }
-      return translation[props.property];
+      
+      return translation[props.property] ?? "";
     };
 
     const setTranslation = (languageCode: string, value: string): void => {
@@ -219,6 +223,10 @@ export default defineComponent({
       }
     };
 
+    watch(() => props.translations, (newVal) => {
+      innerTranslations.value = newVal;
+    }, { immediate: true, deep: true });
+
     return {
       innerTranslations,
       ColorEnum,

package/components/fields/FSTranslateTextArea.vue

@@ -86,7 +86,7 @@
 </template>
 
 <script lang="ts">
-import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+import { computed, defineComponent, type PropType, ref, type StyleValue, watch } from "vue";
 
 import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
@@ -164,7 +164,10 @@ export default defineComponent({
     
     const dialog = ref(false);
 
-    const innerTranslations = ref(props.translations);
+    const innerTranslations = ref<{
+      languageCode: string;
+      [key: string]: string | null;
+    }[]>(props.translations);
 
     const lights = getColors(ColorEnum.Light);
     const darks = getColors(ColorEnum.Dark);
@@ -188,7 +191,7 @@ export default defineComponent({
       if (!translation || !translation[props.property]) {
         return "";
       }
-      return translation[props.property];
+      return translation[props.property] ?? "";
     };
 
     const setTranslation = (languageCode: string, value: string): void => {
@@ -218,6 +221,10 @@ export default defineComponent({
       }
     };
 
+    watch(() => props.translations, (newVal) => {
+      innerTranslations.value = newVal;
+    }, { immediate: true, deep: true });
+
     return {
       innerTranslations,
       ColorEnum,

package/components/fields/periodicField/FSPeriodicField.vue

@@ -4,7 +4,7 @@
     :wrap="false"
   >
     <FSRadioGroup
-      :values="availablePeriod"
+      :values="availablePeriods"
       :disabled="disabled"
       v-model="selectedPeriod"
     />
@@ -18,25 +18,25 @@
         :vertical="true"
       />
       <FSPeriodicDailyField
-        v-if="selectedPeriod === 'daily'"
+        v-if="selectedPeriod === CronPeriod.Daily"
         :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicWeeklyField
-        v-else-if="selectedPeriod === 'weekly'"
+        v-else-if="selectedPeriod === CronPeriod.Weekly"
         :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicMonthlyField
-        v-else-if="selectedPeriod === 'monthly'"
+        v-else-if="selectedPeriod === CronPeriod.Monthly"
         :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
       />
       <FSPeriodicYearlyField
-        v-else-if="selectedPeriod === 'yearly'"
+        v-else-if="selectedPeriod === CronPeriod.Yearly"
         :disabled="disabled"
         :modelValue="$props.modelValue.split(' ')"
         @update:modelValue="$emit('update:modelValue', $event.join(' '))"
@@ -48,8 +48,8 @@
 <script lang="ts">
 import { ref, defineComponent, type PropType, watch } from "vue";
 
-import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
-import { getCronPeriod } from "@dative-gpi/foundation-shared-components/tools";
+import { CronPeriod } from "@dative-gpi/foundation-shared-domain/enums";
+import { availablePeriods, getCronPeriod } from "@dative-gpi/foundation-shared-components/tools";
 
 import FSPeriodicMonthlyField from "./FSPeriodicMonthlyField.vue";
 import FSPeriodicWeeklyField from "./FSPeriodicWeeklyField.vue";
@@ -59,6 +59,7 @@ import FSRadioGroup from "../../FSRadioGroup.vue";
 import FSDivider from "../../FSDivider.vue";
 import FSRow from "../../FSRow.vue";
 
+
 export default defineComponent({
   name: "FSPeriodicField",
   components: {
@@ -83,22 +84,14 @@ export default defineComponent({
   },
   emits: ["update:modelValue"],
   setup(props, { emit }) {
-    const { $tr } = useTranslationsProvider();
-
-    const availablePeriod = [
-      { label: $tr("ui.common.daily", "Daily")    , value: "daily"  , item: { default : "0 12 */1 * *"} },
-      { label: $tr("ui.common.weekly", "Weekly")  , value: "weekly" , item: { default : "0 12 * * 1"} },
-      { label: $tr("ui.common.monthly", "Monthly"), value: "monthly", item: { default : "0 12 1 * *"} },
-      { label: $tr("ui.common.yearly", "Yearly")  , value: "yearly" , item: { default : "0 12 1 1 *"} }
-    ];
     
-    const selectedPeriod = ref("daily");
+    const selectedPeriod = ref(CronPeriod.Daily);
 
     watch(() => selectedPeriod.value, () => {
-      if (getCronPeriod(props.modelValue) === selectedPeriod.value) {
+      if (getCronPeriod(props.modelValue).value == selectedPeriod.value) {
         return;
       }
-      const period = availablePeriod.find((item) => item.value === selectedPeriod.value);
+      const period = availablePeriods.find((item) => item.value == selectedPeriod.value);
       if (!period) {
         return;
       }
@@ -106,12 +99,13 @@ export default defineComponent({
     });
 
     watch(() => props.modelValue, () => {
-      selectedPeriod.value = getCronPeriod(props.modelValue);
+      selectedPeriod.value = getCronPeriod(props.modelValue).value;
     }, { immediate: true });
 
     return {
-      availablePeriod,
-      selectedPeriod
+      availablePeriods,
+      selectedPeriod,
+      CronPeriod
     };
   }
 });

package/components/timelines/FSTimeline.vue

@@ -0,0 +1,16 @@
+<template>
+  <v-timeline
+    v-bind="$attrs"
+  >
+    <slot/>
+  </v-timeline>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+
+export default defineComponent({
+  name: "FSTimeline",
+  inheritAttrs: false
+});
+</script>

package/components/timelines/FSTimelineItem.vue

@@ -0,0 +1,29 @@
+<template>
+  <v-timeline-item
+    v-bind="$attrs"
+  >
+    <template
+      v-slot:opposite
+    >
+      <slot
+        name="opposite"
+      />
+    </template>
+    <template
+      v-slot:icon
+    >
+      <slot
+        name="icon"
+      />
+    </template>
+    <slot/>
+  </v-timeline-item>
+</template>
+
+<script lang="ts">
+import { defineComponent } from "vue";
+export default defineComponent({
+  name: "FSTimelineItem",
+  inheritAttrs: false
+});
+</script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dative-gpi/foundation-shared-components",
   "sideEffects": false,
-  "version": "1.0.177",
+  "version": "1.0.179-edit-image",
   "description": "",
   "publishConfig": {
     "access": "public"
@@ -10,8 +10,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@dative-gpi/foundation-shared-domain": "1.0.177",
-    "@dative-gpi/foundation-shared-services": "1.0.177"
+    "@dative-gpi/foundation-shared-domain": "1.0.179-edit-image",
+    "@dative-gpi/foundation-shared-services": "1.0.179-edit-image"
   },
   "peerDependencies": {
     "@dative-gpi/bones-ui": "^1.0.0",
@@ -35,5 +35,5 @@
     "sass": "1.71.1",
     "sass-loader": "13.3.2"
   },
-  "gitHead": "0b54c0dddfdfcad69143175aae2c98a04eac9bca"
+  "gitHead": "72963582266af77cf47e4585c5540f61cf80958f"
 }

package/tools/cronTools.ts

@@ -0,0 +1,25 @@
+import { CronPeriod } from "@dative-gpi/foundation-shared-domain/enums";
+import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui/composables";
+
+const { $tr } = useTranslationsProvider();
+
+export const availablePeriods = [
+  { label: $tr("ui.common.daily", "Daily"), value: CronPeriod.Daily, item: { default: "0 12 */1 * *" } },
+  { label: $tr("ui.common.weekly", "Weekly"), value: CronPeriod.Weekly, item: { default: "0 12 * * 1" } },
+  { label: $tr("ui.common.monthly", "Monthly"), value: CronPeriod.Monthly, item: { default: "0 12 1 * *" } },
+  { label: $tr("ui.common.yearly", "Yearly"), value: CronPeriod.Yearly, item: { default: "0 12 1 1 *" } },
+];
+
+export const getCronPeriod = (value: string) => {
+  const cronArray = value.split(" ");
+  if (cronArray[3] !== "*") {
+    return availablePeriods.find(c => c.value == CronPeriod.Yearly)!;
+  }
+  else if (!cronArray[2].includes("*") || cronArray[2].includes("-")) {
+    return availablePeriods.find(c => c.value == CronPeriod.Monthly)!;
+  }
+  else if (cronArray[4] !== "*") {
+    return availablePeriods.find(c => c.value == CronPeriod.Weekly)!;
+  }
+  return availablePeriods.find(c => c.value == CronPeriod.Daily)!;
+}

package/tools/index.ts

@@ -1,4 +1,5 @@
 export * from "./alertsTools";
 export * from "./chartsTools";
+export * from "./cronTools";
 export * from "./reportsTools";
 export * from "./timeRangeTools";

package/tools/timeRangeTools.ts

@@ -122,18 +122,4 @@ export const dayLabel = (day: Days | number): string => {
     default:
       return $tr("ui.common.all-days", "All days");
   }
-}
-
-export const getCronPeriod = (value: string) => {
-  const cronArray = value.split(" ");
-  if (cronArray[3] !== "*") {
-    return $tr("ui.common.yearly", "Yearly");
-  }
-  else if (!cronArray[2].includes("*") || cronArray[2].includes("-")) {
-    return $tr("ui.common.monthly", "Monthly");
-  }
-  else if (cronArray[4] !== "*") {
-    return $tr("ui.common.weekly", "Weekly");
-  }
-  return $tr("ui.common.daily", "Daily");
-};
+}