bfg-common 1.5.904 → 1.5.905

package/assets/localization/local_en.json

@@ -3398,7 +3398,7 @@
     "once": "Once",
     "selectFrequency": "Select Frequency",
     "frequency": "Frequency",
-    "delayMinutes": "Delay (Minutes)"
+    "delayMinutes": "Delay (Minutes)",
   },
   "license": {
     "limits": "Limits",

package/components/common/pages/scheduledTasks/modals/common/frequency/interval/Interval.vue

@@ -1,34 +1,11 @@
 <template>
-  <div class="interval clr-col-6 pl-0">
-    <span class="interval__prefix">
-      {{ localization.scheduledTasks.repeatEvery }}
-    </span>
-
-    <label
-      :class="[
-        'tooltip tooltip-validation tooltip-xs tooltip-top-left',
-        timeIntervalErrorText && 'invalid',
-      ]"
-      for="frequency-time-interval"
-    >
-      <input
-        id="frequency-time-interval"
-        v-model="modelFrequencyLocal.frg_interval"
-        data-id="frequency-time-interval-input"
-        type="text"
-        @input="onInitTimeIntervalValidation"
-        @blur="onInitTimeIntervalValidation"
-      />
-
-      <span class="tooltip-content">
-        {{ timeIntervalErrorText }}
-      </span>
-    </label>
-
-    <span class="interval__suffix">
-      {{ intervalSuffixLabel }}
-    </span>
-  </div>
+  <component
+    :is="currentComponent"
+    v-model="modelFrequencyLocal.frg_interval"
+    :time-interval-error-text="timeIntervalErrorText"
+    :time-interval-suffix-label="intervalSuffixLabel"
+    @init-validation="onInitValidation"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -39,17 +16,25 @@ import {
   validateField,
 } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils'
 
-const props = defineProps<{
-  type: string
-}>()
 const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
   required: true,
 })
+const props = defineProps<{
+  type: string
+}>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
 
 const isInitTimeIntervalValidation = ref<boolean>(false)
-const onInitTimeIntervalValidation = (): void => {
+const onInitValidation = (): void => {
   isInitTimeIntervalValidation.value = true
 }
 
@@ -81,22 +66,3 @@ const intervalSuffixLabel = computed<string>(() => {
   )
 })
 </script>
-
-<style lang="scss" scoped>
-@import 'bfg-common/assets/scss/common/mixins.scss';
-.interval {
-  @include flex($align: center);
-  margin-top: 10px;
-  &__prefix {
-    white-space: nowrap;
-  }
-  .tooltip {
-    & > .tooltip-content {
-      width: 10rem;
-    }
-  }
-  input {
-    width: 70px;
-  }
-}
-</style>

package/components/common/pages/scheduledTasks/modals/common/frequency/interval/New.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="frequency-interval">
+    <h2>{{ localization.scheduledTasks.repeatEvery }}</h2>
+    <ui-input
+      id="ip-address"
+      v-model="intervalModel"
+      :error="props.timeIntervalErrorText"
+      :placeholder="localization.common.value"
+      test-id="frequency-time-interval-input"
+      autocomplete="off"
+      type="number"
+      @input="onInitValidation"
+    ></ui-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const intervalModel = defineModel<number>({ required: true })
+const props = defineProps<{
+  timeIntervalErrorText: string
+  intervalSuffixLabel: string
+}>()
+const emits = defineEmits<{
+  (event: 'init-validation'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onInitValidation = (): void => emits('init-validation')
+</script>
+
+<style lang="scss" scoped>
+.frequency-interval {
+  h2 {
+    font-family: 'Inter', sans-serif;
+    color: var(--title-form-first-color);
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 12px;
+  }
+}
+</style>

package/components/common/pages/scheduledTasks/modals/common/frequency/interval/Old.vue

@@ -0,0 +1,68 @@
+<template>
+  <div class="interval clr-col-6 pl-0">
+    <span class="interval__prefix">
+      {{ localization.scheduledTasks.repeatEvery }}
+    </span>
+
+    <label
+      :class="[
+        'tooltip tooltip-validation tooltip-xs tooltip-top-left',
+        props.timeIntervalErrorText && 'invalid',
+      ]"
+      for="frequency-time-interval"
+    >
+      <input
+        id="frequency-time-interval"
+        v-model="intervalModel"
+        data-id="frequency-time-interval-input"
+        type="text"
+        @input="onInitValidation"
+        @blur="onInitValidation"
+      />
+
+      <span class="tooltip-content">
+        {{ props.timeIntervalErrorText }}
+      </span>
+    </label>
+
+    <span class="interval__suffix">
+      {{ props.intervalSuffixLabel }}
+    </span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const intervalModel = defineModel<number>({ required: true })
+const props = defineProps<{
+  timeIntervalErrorText: string
+  intervalSuffixLabel: string
+}>()
+const emits = defineEmits<{
+  (event: 'init-validation'): void
+}>()
+
+const onInitValidation = (): void => emits('init-validation')
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style lang="scss" scoped>
+@import 'bfg-common/assets/scss/common/mixins.scss';
+.interval {
+  @include flex($align: center);
+  margin-top: 10px;
+  &__prefix {
+    white-space: nowrap;
+  }
+  .tooltip {
+    & > .tooltip-content {
+      width: 10rem;
+    }
+  }
+  input {
+    width: 70px;
+  }
+}
+</style>

package/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils.ts

@@ -74,7 +74,7 @@ export const validateField = (
     return localization.common.theValueTooSmall
   }
 
-  if (value.length > 3) {
+  if (String(value).length > 3) {
     return localization.common.theValueTooLarge
   }
   // Если значение не является цифрой

package/components/common/pages/scheduledTasks/modals/common/taskForm/New.vue

@@ -38,20 +38,31 @@
       <div class="form__run">
         <h2>{{ localization.common.run }}</h2>
 
-        <h2 class="frequency">{{ localization.scheduledTasks.frequency }}</h2>
-        <ui-select
-          v-model="model.frequency"
-          :items="frequencyMethodOptionsLocal"
-          test-id="schedule-task-frequency-select"
-          :placeholder="localization.scheduledTasks.selectFrequency"
-          size="md"
-          select-width="100%"
-          class="mt-3"
-        />
-        <common-pages-scheduled-tasks-modals-common-frequency
-          v-model="model"
-          :type="model.frequency"
-        />
+        <div
+          class="form__run-frequency"
+          :class="model.frequency === 'once' && 'grid-single-col'"
+        >
+          <div>
+            <h2 class="frequency">
+              {{ localization.scheduledTasks.frequency }}
+            </h2>
+            <ui-select
+              v-model="model.frequency"
+              :items="frequencyMethodOptionsLocal"
+              test-id="schedule-task-frequency-select"
+              :placeholder="localization.scheduledTasks.selectFrequency"
+              size="md"
+              select-width="100%"
+              class="mt-3"
+            />
+          </div>
+
+          <common-pages-scheduled-tasks-modals-common-frequency
+            v-if="model.frequency"
+            v-model="model"
+            :type="model.frequency"
+          />
+        </div>
       </div>
 
       <div class="form__email">
@@ -152,6 +163,17 @@ const frequencyMethodOptionsLocal = computed<UI_I_Dropdown[]>(() =>
     padding-top: 16px;
   }
 
+  &__run {
+    &-frequency {
+      display: grid;
+      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+      grid-gap: 16px;
+      &.grid-single-col {
+        grid-template-columns: 1fr;
+      }
+    }
+  }
+
   h2 {
     font-family: 'Inter', sans-serif;
     color: var(--title-form-first-color);

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.5.904",
+  "version": "1.5.905",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",