bfg-common 1.6.95 → 1.6.97

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

@@ -0,0 +1,104 @@
+<template>
+  <div
+    class="frequency-end-time"
+    :class="props.templateViewMode === 'horizontal' && 'horizontal'"
+  >
+    <h2>{{ localization.scheduledTasks.end }}</h2>
+
+    <div class="w-full">
+      <div class="frequency-end-time__radios">
+        <ui-radio
+          v-for="(option, key) in props.endOptions"
+          :key="key"
+          v-model="endTimeModeLocal"
+          :label="option.label"
+          :test-id="option.testId"
+          :value="option.value"
+          size="md"
+        >
+        </ui-radio>
+      </div>
+
+      <ui-input-with-datepicker
+        v-if="endTimeModeLocal === 'on'"
+        id="frequency-end-date"
+        v-model="modelFrequencyLocal.frg_end_time"
+        :format="datepickerFormat"
+        test-id="frequency-end-date-input"
+        time-format="12"
+        :error="''"
+        :error-timepicker="''"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
+
+const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
+  required: true,
+})
+const endTimeModeLocal = defineModel<'never' | 'on'>('selectedEndMode', {
+  required: true,
+})
+const props = defineProps<{
+  endOptions: UI_I_SelectInputItem[]
+  type: string
+  templateViewMode: 'horizontal' | 'vertical'
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const datepickerFormat = computed<string>(
+  () => getUiDatepickerFormatByLanguage('en_US') // TODO из пропс должен приходить язык
+)
+</script>
+
+<style lang="scss" scoped>
+.frequency-end-time {
+  grid-column: span 2;
+  &__radios {
+    display: flex;
+    align-items: center;
+    column-gap: 32px;
+    margin-bottom: 12px;
+  }
+
+  h2 {
+    font-family: 'Inter', sans-serif;
+    color: var(--title-form-first-color);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 18px;
+    margin-bottom: 12px;
+  }
+
+  &.horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 16px;
+
+    h2 {
+      font-family: 'Inter', sans-serif;
+      width: 100%;
+      max-width: 240px;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      color: var(--wizard-content-title);
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 20px;
+      margin-bottom: 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,112 @@
+<template>
+  <div class="end-time">
+    <common-select-input
+      v-model="endTimeModeLocal"
+      :label="localization.scheduledTasks.end"
+      :data="props.endOptions"
+      :class="[
+        'end-time__select-input',
+        endTimeModeLocal === 'on' && 'enabled',
+      ]"
+      test-id="frequency-ent-time"
+    >
+      <template #options>
+        <label
+          v-if="endTimeModeLocal === 'on'"
+          :class="[
+            'tooltip tooltip-validation tooltip-xs tooltip-top-left frequency-end-date',
+            schedulerEndDateErrorText && 'invalid',
+          ]"
+          for="frequency-end-date"
+        >
+          <input
+            id="frequency-end-date"
+            v-model.lazy="modelFrequencyLocal.frg_end_time"
+            data-id="frequency-end-date-input"
+            type="datetime-local"
+          />
+
+          <span class="tooltip-content">
+            {{ schedulerEndDateErrorText }}
+          </span>
+        </label>
+      </template>
+    </common-select-input>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import { validateDate } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils'
+
+const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
+  required: true,
+})
+const endTimeModeLocal = defineModel<'never' | 'on'>('selectedEndMode', {
+  required: true,
+})
+const props = defineProps<{
+  endOptions: UI_I_SelectInputItem[]
+  type: string
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+// const { $store, $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
+
+const schedulerEndDateErrorText = computed<string>(() => {
+  const { frg_end_time, frg_start_on_time } = modelFrequencyLocal.value
+  return !frg_end_time
+    ? localization.value.common.fieldRequired
+    : validateDate(
+        localization.value,
+        frg_end_time,
+        frg_start_on_time,
+        props.type
+      )
+})
+watch(
+  [schedulerEndDateErrorText, endTimeModeLocal],
+  ([newValue1, newValue2]: [string, 'never' | 'on']) => {
+    modelFrequencyLocal.value.isValid =
+      newValue2 === 'never' ? false : !!newValue1
+
+    newValue2 === 'never' && (modelFrequencyLocal.value.frg_end_time = '')
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+@import 'bfg-common/assets/scss/common/mixins.scss';
+.end-time {
+  margin-top: 10px;
+  &__select-input {
+    &.enabled {
+      row-gap: 15px;
+      &.clr-flex-row {
+        flex-direction: column !important;
+        align-items: flex-start;
+      }
+      :deep(.select-input__inner) {
+        flex-direction: row;
+      }
+    }
+
+    :deep(.select-input__label) {
+      font-weight: 400;
+    }
+    :deep(.select) {
+      max-width: max-content !important;
+    }
+  }
+  .frequency-end-date {
+    margin-left: 15px;
+  }
+}
+.tooltip {
+  & > .tooltip-content {
+    width: 200px;
+  }
+}
+</style>

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

@@ -1,34 +1,13 @@
 <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>
+  <!-- Аргумент (:template-view-mode) используется только для нового интерфейса -->
+  <component
+    :is="currentComponent"
+    v-model="modelFrequencyLocal.frg_interval"
+    :time-interval-error-text="timeIntervalErrorText"
+    :interval-suffix-label="intervalSuffixLabel"
+    :template-view-mode="props.templateViewMode"
+    @init-validation="onInitValidation"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -39,17 +18,26 @@ 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
+  templateViewMode: 'horizontal' | 'vertical'
+}>()
 
 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 +69,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,79 @@
+<template>
+  <div
+    class="frequency-interval"
+    :class="props.templateViewMode === 'horizontal' && 'horizontal'"
+  >
+    <h2>{{ localization.scheduledTasks.repeatEvery }}</h2>
+    <ui-input
+      id="frequency-time-interval"
+      v-model="intervalModel"
+      :error="props.timeIntervalErrorText"
+      :placeholder="localization.common.value"
+      test-id="frequency-time-interval-input"
+      autocomplete="off"
+      @input="onInitValidation"
+    >
+      <template #icon>
+        <span>
+          {{ props.intervalSuffixLabel }}
+        </span>
+      </template>
+    </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
+  templateViewMode: 'horizontal' | 'vertical'
+}>()
+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;
+  }
+
+  // Когда форма scheduler используется в визарде,
+  // применяется горизонтальный режим отображения и меняются стили компонента.
+  &.horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 16px;
+
+    h2 {
+      font-family: 'Inter', sans-serif;
+      width: 100%;
+      max-width: 240px;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      color: var(--wizard-content-title);
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 20px;
+      margin-bottom: 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+  }
+}
+</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/frequency/on/New.vue

@@ -0,0 +1,170 @@
+<template>
+  <div
+    class="frequency-on-date w-full"
+    :class="props.templateViewMode === 'horizontal' && 'horizontal'"
+  >
+    <h2>{{ localization.common.on }}</h2>
+
+    <common-pages-scheduled-tasks-modals-common-frequency-on-select-week
+      v-if="props.type === 'week'"
+      v-model="scheduledTaskFormLocal"
+    />
+
+    <div v-if="props.type === 'month'" class="frequency-monthly-days w-full">
+      <div class="frequency-on-date__radios">
+        <ui-radio
+          v-for="(option, key) in props.frequencyMonthlyMode"
+          :key="key"
+          v-model="scheduledTaskFormLocal.frg_monthly_mode"
+          :label="option.label"
+          :test-id="option.testId"
+          :value="option.value"
+          size="md"
+        >
+        </ui-radio>
+      </div>
+
+      <ui-input
+        v-if="scheduledTaskFormLocal.frg_monthly_mode === 'day'"
+        id="frequency-monthly-by-day"
+        v-model="scheduledTaskFormLocal.frg_monthly_day"
+        :error="props.timeIntervalErrorText"
+        :placeholder="localization.scheduledTasks.day"
+        test-id="frequency-monthly-by-day-field"
+        autocomplete="off"
+        type="number"
+        @input="onInitValidation"
+      ></ui-input>
+
+      <div
+        v-if="scheduledTaskFormLocal.frg_monthly_mode === 'week'"
+        class="frequency-monthly-days__week"
+      >
+        <ui-select
+          v-model="scheduledTaskFormLocal.frq_ordinal_number"
+          :items="frequencyOrdinalNumberLocal"
+          test-id="frequency-monthly-ordinary-day"
+          :placeholder="localization.scheduledTasks.selectPosition"
+          size="md"
+          select-width="100%"
+        />
+        <ui-select
+          v-model="scheduledTaskFormLocal.frq_week_day"
+          :items="frequencyWeeksDaysLocal"
+          test-id="frequency-monthly-week-day"
+          :placeholder="localization.scheduledTasks.selectDay"
+          size="md"
+          select-width="100%"
+        />
+      </div>
+    </div>
+
+    <ui-input-with-datepicker
+      v-if="props.type === 'once'"
+      id="frequency-on-date"
+      v-model="scheduledTaskFormLocal.frg_on_time"
+      :format="datepickerFormat"
+      test-id="frequency-on-date-input"
+      time-format="12"
+      :error="''"
+      :error-timepicker="''"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
+import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
+
+const scheduledTaskFormLocal = defineModel<UI_I_ScheduleNewTasksForm>({
+  required: true,
+})
+const props = defineProps<{
+  type: string
+  frequencyMonthlyMode: UI_I_SelectInputItem[]
+  frequencyOnOrdinalNumber: UI_I_SelectInputItem[]
+  frequencyOnWeeksDays: UI_I_SelectInputItem[]
+  templateViewMode: 'horizontal' | 'vertical'
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const datepickerFormat = computed<string>(
+  () => getUiDatepickerFormatByLanguage('en_US') // TODO из пропс должен приходить язык
+)
+
+const frequencyOrdinalNumberLocal = computed<UI_I_Dropdown[]>(() =>
+  props.frequencyOnOrdinalNumber.map((item: UI_I_SelectInputItem) => ({
+    ...item,
+    text: item.label,
+  }))
+)
+
+const frequencyWeeksDaysLocal = computed<UI_I_Dropdown[]>(() =>
+  props.frequencyOnWeeksDays.map((item: UI_I_SelectInputItem) => ({
+    ...item,
+    text: item.label,
+  }))
+)
+</script>
+
+<style lang="scss" scoped>
+.frequency-on-date {
+  grid-column: span 2;
+  &__radios {
+    display: flex;
+    align-items: center;
+    column-gap: 32px;
+    margin-bottom: 12px;
+  }
+  h2 {
+    font-family: 'Inter', sans-serif;
+    color: var(--title-form-first-color);
+    font-size: 14px;
+    font-weight: 500;
+    line-height: 18px;
+    margin-bottom: 12px;
+  }
+
+  .frequency-monthly-days {
+    &__week {
+      display: grid;
+      grid-template-columns: repeat(2, 1fr);
+      column-gap: 16px;
+    }
+  }
+
+  // Когда форма scheduler используется в визарде,
+  // применяется горизонтальный режим отображения и меняются стили компонента.
+  &.horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 16px;
+
+    h2 {
+      font-family: 'Inter', sans-serif;
+      width: 100%;
+      max-width: 240px;
+      display: flex;
+      align-items: center;
+      column-gap: 8px;
+      color: var(--wizard-content-title);
+      font-size: 13px;
+      font-weight: 400;
+      line-height: 20px;
+      margin-bottom: 0;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+    }
+
+    :deep(.ui-input-with-datepicker) {
+      width: 100%;
+    }
+  }
+}
+</style>