@dative-gpi/foundation-shared-components 1.0.36 → 1.0.37-report-v1

package/components/fields/FSTranslateRichTextField.vue

@@ -7,7 +7,7 @@
     >
       <FSRichTextField
         :editable="false"
-        :label="$tr('ui.translateRichTextField.defaultValue', 'Default value')"
+        :label="$tr('ui.common.default-value', 'Default value')"
         :modelValue="$props.modelValue"
         v-bind="$attrs"
       />
@@ -24,12 +24,13 @@
         >
           <FSRow
             :wrap="false"
+            align="center-left"
           >
             <FSSpan
               class="fs-translate-field-label"
               font="text-overline"
             >
-              {{ $tr('ui.translateRichTextField.translateIn', 'Translate in {0}', language.label) }}
+              {{ $tr('translate-rich-text-field.translate-in', 'Translate in {0}', language.label) }}
             </FSSpan>
             <FSIcon>{{ language.icon }}</FSIcon>
           </FSRow>
@@ -39,10 +40,9 @@
     <FSRow
       :wrap="false"
     >
-      <FSButton
+      <FSButtonCancelLabel
         prependIcon="mdi-cancel"
         width="100%"
-        :label="$tr('ui.translateRichTextField.cancelButton.label', 'Cancel')"
         @click="onCancelTranslations"
       />
       <FSButton
@@ -50,7 +50,7 @@
         prependIcon="mdi-check"
         color="primary"
         width="100%"
-        :label="$tr('ui.translateRichTextField.validateButton.label', 'Validate translations')"
+        :label="$tr('translate-rich-text-field.validate', 'Validate translations')"
         @click="onSubmitTranslations"
       />
     </FSRow>
@@ -69,7 +69,7 @@
         prependIcon="mdi-translate"
         color="primary"
         width="100%"
-        :label="$tr('ui.translateRichTextField.translateButton.label', 'Manage translations')"
+        :label="$tr('translate-rich-text-field.manage-translations', 'Manage translations')"
         @click="() => $emit('update:translationsExpanded', true)"
       />
     </template>
@@ -77,12 +77,13 @@
 </template>
 
 <script lang="ts">
-import { defineComponent, type PropType, ref } from 'vue';
+import { defineComponent, type PropType, ref, watch } from 'vue';
 
 import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
 
 import { emptyLexicalState } from '../../utils';
 
+import FSButtonCancelLabel from '../buttons/FSButtonCancelLabel.vue';
 import FSRichTextField from './FSRichTextField.vue';
 import FSButton from '../FSButton.vue';
 import FSIcon from '../FSIcon.vue';
@@ -93,6 +94,7 @@ import FSRow from '../FSRow.vue';
 export default defineComponent({
   name: 'FSTranslateRichTextField',
   components: {
+    FSButtonCancelLabel,
     FSRichTextField,
     FSButton,
     FSIcon,
@@ -110,12 +112,15 @@ export default defineComponent({
       default: true,
     },
     modelValue: {
-      type: String as PropType<string | null>,
+      type: [Object, String] as PropType<{ [key: string]: any } | string | null>,
       required: false,
       default: null
     },
     translations: {
-      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      type: Array as PropType<{
+        languageCode: string;
+        [key: string]: string | object | null;
+      }[]>,
       required: false,
       default: () => []
     },
@@ -129,9 +134,12 @@ export default defineComponent({
   setup(props, { emit }) {
     const { languages } = useAppLanguages();
 
-    const innerTranslations = ref(props.translations);
+    const innerTranslations = ref<{
+      languageCode: string;
+      [key: string]: string | object | null;
+    }[]>([]);
 
-    const getTranslation = (languageCode: string): string => {
+    const getTranslation = (languageCode: string): string | object => {
       if (!innerTranslations.value) {
         return emptyLexicalState;
       }
@@ -139,7 +147,7 @@ export default defineComponent({
       if (!translation || !translation[props.property]) {
         return emptyLexicalState;
       }
-      return translation[props.property].toString();
+      return translation[props.property]!;
     };
 
     const setTranslation = (languageCode: string, value: string): void => {
@@ -173,6 +181,18 @@ export default defineComponent({
       emit('update:translationsExpanded', false);
     };
 
+    watch(() => props.translations, (newTranslations) => {
+      innerTranslations.value = newTranslations.map((translation) => {
+        if(typeof translation[props.property] === 'string'){
+          return translation;
+        }
+        return {
+          ...translation,
+          [props.property]: JSON.stringify(translation[props.property])
+        }
+      });
+    }, { immediate: true, deep: true });
+
     return {
       languages,
       onCancelTranslations,

package/components/fields/FSTranslateTextArea.vue

@@ -0,0 +1,233 @@
+<template>
+  <FSTextArea
+    :editable="$props.editable"
+    :modelValue="$props.modelValue"
+    @update:modelValue="$emit('update:modelValue', $event)"
+    v-bind="$attrs"
+  >
+    <template
+      v-for="(_, name) in $slots"
+      v-slot:[name]="slotData"
+    >
+      <slot
+        :name="name"
+        v-bind="slotData"
+      />
+    </template>
+    <template
+      #append
+    >
+      <FSButton
+        height="100%"
+        style=""
+        :prependIcon="$props.buttonPrependIcon"
+        :appendIcon="$props.buttonAppendIcon"
+        :variant="$props.buttonVariant"
+        :color="$props.buttonColor"
+        @click="dialog = true"
+      /> 
+      <slot
+        name="append"
+      />
+    </template>
+  </FSTextArea>
+  <FSDialogSubmit
+    :title="$tr('translate-text-area.title', 'Handle translations')"
+    :submitButtonColor="$props.buttonColor"
+    @click:submitButton="onSubmit"
+    v-model="dialog"
+  >
+    <template
+      #body
+    >
+      <FSCol
+        gap="32px"
+      >
+        <FSTextArea
+          :label="$tr('ui.common.default-value', 'Default value')"
+          :editable="false"
+          :rows="($attrs.rows as number)"
+          :modelValue="$props.modelValue"
+        />
+        <FSCol
+          gap="20px"
+        >
+          <FSTextArea
+            v-for="(language, index) in languages"
+            :editable="$props.editable"
+            :key="index"
+            :modelValue="getTranslation(language.code)"
+            :rows="($attrs.rows as number)"
+            @update:modelValue="setTranslation(language.code, $event)"
+          >
+            <template
+              #label
+            >
+              <FSRow
+                :wrap="false"
+                align="center-left"
+              >
+                <FSSpan
+                  font="text-overline"
+                  :style="style"
+                >
+                  {{ $tr("translate-field.translate-in", "Translate in {0}", language.label) }}
+                </FSSpan>
+                <FSIcon>
+                  {{ language.icon }}
+                </FSIcon>
+              </FSRow> 
+            </template>
+          </FSTextArea>
+        </FSCol>
+      </FSCol>
+    </template>
+  </FSDialogSubmit>
+</template>
+
+<script lang="ts">
+import { computed, defineComponent, type PropType, ref, type StyleValue } from "vue";
+
+import { type ColorBase, ColorEnum } from "@dative-gpi/foundation-shared-components/models";
+import { useAppLanguages } from "@dative-gpi/foundation-shared-services/composables";
+
+import { useColors } from "../../composables";
+
+import FSDialogSubmit from "../FSDialogSubmit.vue";
+import FSTextArea from "./FSTextArea.vue";
+import FSButton from "../FSButton.vue";
+import FSIcon from "../FSIcon.vue";
+import FSSpan from "../FSSpan.vue";
+import FSRow from "../FSRow.vue";
+
+export default defineComponent({
+  name: "FSTranslateTextArea",
+  components: {
+    FSDialogSubmit,
+    FSTextArea,
+    FSButton,
+    FSIcon,
+    FSSpan,
+    FSRow
+  },
+  props: {
+    buttonPrependIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: "mdi-translate"
+    },
+    buttonLabel: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    buttonAppendIcon: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    buttonVariant: {
+      type: String as PropType<"standard" | "full" | "icon">,
+      required: false,
+      default: "standard"
+    },
+    modelValue: {
+      type: String as PropType<string | null>,
+      required: false,
+      default: null
+    },
+    property: {
+      type: String as PropType<string>,
+      required: false,
+      default: "label"
+    },
+    translations: {
+      type: Array as PropType<{ languageCode: string; [key: string]: string }[]>,
+      required: false,
+      default: () => []
+    },
+    buttonColor: {
+      type: String as PropType<ColorBase>,
+      required: false,
+      default: ColorEnum.Primary
+    },
+    editable: {
+      type: Boolean,
+      required: false,
+      default: true
+    }
+  },
+  emits: ["update:modelValue", "update:translations"],
+  setup(props, { emit }) {
+    const { languages } = useAppLanguages();
+    const { getColors } = useColors();
+    
+    const dialog = ref(false);
+
+    const innerTranslations = ref(props.translations);
+
+    const lights = getColors(ColorEnum.Light);
+    const darks = getColors(ColorEnum.Dark);
+
+    const style = computed((): StyleValue => {
+      if (!props.editable) {
+        return {
+          "--fs-translate-field-color": lights.dark
+        };
+      }
+      return {
+        "--fs-translate-field-color": darks.base
+      };
+    });
+
+    const getTranslation = (languageCode: string): string => {
+      if (!innerTranslations.value) {
+        return "";
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (!translation || !translation[props.property]) {
+        return "";
+      }
+      return translation[props.property];
+    };
+
+    const setTranslation = (languageCode: string, value: string): void => {
+      if (!innerTranslations.value) {
+        innerTranslations.value = [{
+          languageCode,
+          [props.property]: value
+        }]
+        return;
+      }
+      const translation = innerTranslations.value.find((t) => t.languageCode === languageCode);
+      if (translation) {
+        translation[props.property] = value;
+      }
+      else {
+        innerTranslations.value.push({
+          languageCode,
+          [props.property]: value
+        });
+      }
+    };
+
+    const onSubmit = (): void => {
+      dialog.value = false;
+      if (props.editable) {
+        emit("update:translations", innerTranslations.value);
+      }
+    };
+
+    return {
+      innerTranslations,
+      ColorEnum,
+      languages,
+      dialog,
+      style,
+      getTranslation,
+      setTranslation,
+      onSubmit
+    };
+  }
+});
+</script>

package/components/fields/periodicField/FSPeriodicDailyField.vue

@@ -14,7 +14,7 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr('ui.periodicfield.daily.every', 'Every') }}
+          {{ $tr('ui.common.every', 'Every') }}
         </FSSpan>
         <FSNumberField
           :editable="$props.editable"
@@ -26,7 +26,7 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr('ui.periodicfield.daily.daysat', 'day(s) at') }}
+          {{ $tr('periodic-field.daysat', 'day(s) at') }}
         </FSSpan>
         <FSClock
           :editable="$props.editable"

package/components/fields/periodicField/FSPeriodicField.vue

@@ -46,7 +46,7 @@
 </template>
 
 <script lang="ts">
-import { ref, defineComponent, onMounted, type PropType, watch } from "vue";
+import { ref, defineComponent, type PropType, watch } from "vue";
 
 import { useTranslations as useTranslationsProvider } from "@dative-gpi/bones-ui";
 
@@ -71,7 +71,7 @@ export default defineComponent({
   },
   props: {
     modelValue: {
-      type: String as PropType<"daily" | "weekly" | "monthly" | "yearly">,
+      type: String as PropType<string>,
       required: true
     },
     editable: {
@@ -85,10 +85,10 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
 
     const availablePeriod = [
-      { label: $tr("ui.periodicField.daily", "Daily")    , value: "daily"  , item: { default : "0 12 */1 * *"} },
-      { label: $tr("ui.periodicField.weekly", "Weekly")  , value: "weekly" , item: { default : "0 12 * * 1"} },
-      { label: $tr("ui.periodicField.monthly", "Monthly"), value: "monthly", item: { default : "0 12 1 * *"} },
-      { label: $tr("ui.periodicField.yearly", "Yearly")  , value: "yearly" , item: { default : "0 12 1 1 *"} }
+      { 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");
@@ -118,9 +118,9 @@ export default defineComponent({
       emit('update:modelValue', period.item.default);
     });
 
-    onMounted(() => {
+    watch(() => props.modelValue, () => {
       selectedPeriod.value = getPeriod(props.modelValue);
-    });
+    }, { immediate: true });
 
     return {
       availablePeriod,

package/components/fields/periodicField/FSPeriodicMonthlyField.vue

@@ -14,7 +14,7 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.monthly.day", "Day") }}
+          {{ $tr("ui.common.day", "Day") }}
         </FSSpan>
         <FSSelectField
           :editable="$props.editable"
@@ -27,7 +27,7 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.monthly.every-month-at", "every month at") }}
+          {{ $tr("periodic-monthly-field.every-month-at", "every month at") }}
         </FSSpan>
         <FSClock
           :editable="$props.editable"
@@ -45,7 +45,7 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.monthly.every", "Every") }}
+          {{ $tr("ui.common.every", "Every") }}
         </FSSpan>
         <FSSelectField
           :editable="$props.editable"
@@ -65,7 +65,7 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.monthly.at", "at") }}
+          {{ $tr("ui.common.at", "at") }}
         </FSSpan>
         <FSClock
           :editable="$props.editable"
@@ -119,10 +119,10 @@ export default defineComponent({
     const { $tr } = useTranslationsProvider();
 
     const dayWeekNumbers = [
-      { id: 1, label: $tr("ui.periodicfield.monthly.first" , "First") },
-      { id: 2, label: $tr("ui.periodicfield.monthly.second", "Second") },
-      { id: 3, label: $tr("ui.periodicfield.monthly.third" , "Third") },
-      { id: 4, label: $tr("ui.periodicfield.monthly.fourth", "Fourth") },
+      { id: 1, label: $tr("ui.common.first" , "First") },
+      { id: 2, label: $tr("ui.common.second", "Second") },
+      { id: 3, label: $tr("ui.common.third" , "Third") },
+      { id: 4, label: $tr("ui.common.fourth", "Fourth") },
     ];
 
     const availableConfigurations = [

package/components/fields/periodicField/FSPeriodicWeeklyField.vue

@@ -14,19 +14,22 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.weekly.every", "Every") }}
+          {{ $tr("ui.common.every", "Every") }}
         </FSSpan>
         <FSSelectDays
+          width="200px"
+          :placeholder="$tr('ui.common.selected-days', '{0} selected day(s)', days.length)"
           :editable="$props.editable"
+          :multiple="true"
           :useAllDays="false"
           :hideHeader="true"
-          :modelValue="day"
+          :modelValue="days"
           @update:modelValue="onUpdateDay($event)"
         />
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.weekly.at", "at") }}
+          {{ $tr("ui.common.at", "at") }}
         </FSSpan>
         <FSClock
           :editable="$props.editable"
@@ -80,11 +83,13 @@ export default defineComponent({
 
     const selectedConfiguration = ref("custom");
 
-    const day = computed((): number => {
-      if (isNaN(parseInt(props.modelValue[4]))) {
-        return 0;
+    const days = computed((): number[] => {
+      try {
+        return props.modelValue[4].split(",").map((day) => parseInt(day) - 1);
+      } catch (error) {
+        console.error("Error parsing days:", error);
+        return [];
       }
-      return parseInt(props.modelValue[4]) - 1;
     });
 
     const time = computed((): number => {
@@ -94,16 +99,21 @@ export default defineComponent({
       return ((parseInt(props.modelValue[0])) + (parseInt(props.modelValue[1]) * 60)) * 60 * 1000;
     });
 
-    const onUpdateDay = (value: number): void => {
-      const hours = Math.floor(value / (60 * 60 * 1000));
-      const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${value + 1}`]);
+    const onUpdateDay = (value: number[]): void => {
+      if(value.length === 0) {
+        return;
+      }
+      const hours = Math.floor(time.value / (60 * 60 * 1000));
+      const minutes = Math.floor(time.value / (60 * 1000) % 60);
+      const daysCron = value.map((day) => day + 1).join(",");
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${daysCron}`]);
     };
 
     const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${day.value + 1}`]);
+      const daysCron = days.value.map((day) => day + 1).join(",");
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `*`, `*`, `${daysCron}`]);
     };
 
     return {
@@ -111,7 +121,7 @@ export default defineComponent({
       selectedConfiguration,
       ColorEnum,
       time,
-      day,
+      days,
       onUpdateHours,
       onUpdateDay
     };

package/components/fields/periodicField/FSPeriodicYearlyField.vue

@@ -14,7 +14,7 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.yearly.everyyear", "Every year") }}
+          {{ $tr("ui.common.every-year", "Every year") }}
         </FSSpan>
         <FSSelectMonths
           :editable="$props.editable"
@@ -33,7 +33,7 @@
         <FSSpan
           :font="font"
         >
-          {{ $tr("ui.periodicfield.yearly.at", "at") }}
+          {{ $tr("ui.common.at", "at") }}
         </FSSpan>
         <FSClock
           :editable="$props.editable"
@@ -100,7 +100,7 @@ export default defineComponent({
       if (isNaN(parseInt(props.modelValue[3]))) {
         return 0;
       }
-      return parseInt(props.modelValue[3]) - 1;
+      return parseInt(props.modelValue[3]);
     });
 
     const time = computed((): number => {
@@ -113,19 +113,19 @@ export default defineComponent({
     const onUpdateDay = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${value}`, `${month.value}`, "*"]);
     };
 
     const onUpdateHours = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${month.value}`, "*"]);
     };
 
     const onUpdateMonth = (value: number): void => {
       const hours = Math.floor(value / (60 * 60 * 1000));
       const minutes = Math.floor(value / (60 * 1000) % 60);
-      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value + 1}`, "*"]);
+      emit("update:modelValue", [`${minutes}`, `${hours}`, `${day.value}`, `${value}`, "*"]);
     };
 
     return {