bfg-common 1.5.907 → 1.5.909

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

@@ -1,7 +1,7 @@
 <template>
   <div class="frequency-end-time">
-    <div>
-      <h2>{{ localization.scheduledTasks.end }}</h2>
+    <h2>{{ localization.scheduledTasks.end }}</h2>
+    <div class="frequency-end-time__radios">
       <ui-radio
         v-for="(option, key) in props.endOptions"
         :key="key"
@@ -15,6 +15,7 @@
     </div>
 
     <ui-input-with-datepicker
+      v-if="endTimeModeLocal === 'on'"
       id="frequency-end-date"
       v-model="modelFrequencyLocal.frg_end_time"
       :format="datepickerFormat"
@@ -52,5 +53,21 @@ const datepickerFormat = computed<string>(
 
 <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;
+  }
 }
 </style>

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

@@ -3,7 +3,7 @@
     :is="currentComponent"
     v-model="modelFrequencyLocal.frg_interval"
     :time-interval-error-text="timeIntervalErrorText"
-    :time-interval-suffix-label="intervalSuffixLabel"
+    :interval-suffix-label="intervalSuffixLabel"
     @init-validation="onInitValidation"
   />
 </template>

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

@@ -2,15 +2,20 @@
   <div class="frequency-interval">
     <h2>{{ localization.scheduledTasks.repeatEvery }}</h2>
     <ui-input
-      id="ip-address"
+      id="frequency-time-interval"
       v-model="intervalModel"
       :error="props.timeIntervalErrorText"
       :placeholder="localization.common.value"
       test-id="frequency-time-interval-input"
       autocomplete="off"
-      type="number"
       @input="onInitValidation"
-    ></ui-input>
+    >
+      <template #icon>
+        <span>
+          {{ props.intervalSuffixLabel }}
+        </span>
+      </template>
+    </ui-input>
   </div>
 </template>
 

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

@@ -1,17 +1,22 @@
 <template>
   <div class="frequency-on-date">
-    <div>
-      <h2>{{ localization.common.on }}</h2>
-      <ui-input-with-datepicker
-        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>
+    <h2>{{ localization.common.on }}</h2>
+
+    <common-pages-scheduled-tasks-modals-common-frequency-on-select-week
+      v-if="props.type === 'week'"
+      v-model="scheduledTaskFormLocal"
+    />
+
+    <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>
 
@@ -19,10 +24,16 @@
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 import type { UI_I_ScheduleNewTasksForm } from '~/components/common/pages/scheduledTasks/modals/lib/models/interfaces'
 import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
+import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/models/interfaces'
 
 const scheduledTaskFormLocal = defineModel<UI_I_ScheduleNewTasksForm>({
   required: true,
 })
+const props = defineProps<{
+  type: string
+  frequencyOnWeeksDays: UI_I_SelectInputItem[]
+  frequencyOnOrdinalNumber: UI_I_SelectInputItem[]
+}>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 

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

@@ -6,14 +6,14 @@
 
     <common-pages-scheduled-tasks-modals-common-frequency-on-select-week
       v-if="props.type === 'week'"
-      v-model="model"
+      v-model="scheduledTaskFormLocal"
     />
 
     <div v-if="props.type === 'month'">
       <div class="on-time__radio radio">
         <input
           id="on-time-monthly-by-day"
-          v-model="model.frg_monthly_mode"
+          v-model="scheduledTaskFormLocal.frg_monthly_mode"
           data-id="on-time-monthly-by-day"
           type="radio"
           value="day"
@@ -33,7 +33,7 @@
         >
           <input
             id="monthly-by-day-field"
-            v-model="model.frg_monthly_day"
+            v-model="scheduledTaskFormLocal.frg_monthly_day"
             :disabled="isDisabledMonthlyDayField"
             data-id="edit-lockout-policy-time-interval-input"
             type="text"
@@ -51,7 +51,7 @@
       <div class="on-time__radio radio">
         <input
           id="on-time-monthly-by-week"
-          v-model="model.frg_monthly_mode"
+          v-model="scheduledTaskFormLocal.frg_monthly_mode"
           data-id="on-time-monthly-by-week"
           type="radio"
           value="week"
@@ -63,8 +63,8 @@
           {{ localization.scheduledTasks.the }}
         </label>
         <common-select-input
-          v-model="model.frq_ordinal_number"
-          :data="frequencyOnOrdinalNumber"
+          v-model="scheduledTaskFormLocal.frq_ordinal_number"
+          :data="props.frequencyOnOrdinalNumber"
           :class="[
             'radio__select ordinary-day',
             !isDisabledMonthlyDayField && 'disabled',
@@ -72,8 +72,8 @@
         />
 
         <common-select-input
-          v-model="model.frq_week_day"
-          :data="frequencyOnWeeksDays"
+          v-model="scheduledTaskFormLocal.frq_week_day"
+          :data="props.frequencyOnWeeksDays"
           :class="[
             'radio__select week-days',
             !isDisabledMonthlyDayField && 'disabled',
@@ -92,7 +92,7 @@
     >
       <input
         id="frequency-on-date"
-        v-model.lazy="model.frg_on_time"
+        v-model.lazy="scheduledTaskFormLocal.frg_on_time"
         data-id="frequency-on-date-input"
         type="datetime-local"
       />
@@ -108,34 +108,26 @@
 import type { UI_I_SelectInputItem } from '~/components/common/select/input/lib/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 {
-  frequencyOnOrdinalNumberFunc,
-  frequencyOnWeeksDaysFunc,
-} from '~/components/common/pages/scheduledTasks/modals/common/frequency/on/lib/config/options'
 import {
   validateDate,
   validateField,
 } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/utils'
 
-const model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
+const scheduledTaskFormLocal = defineModel<UI_I_ScheduleNewTasksForm>({
+  required: true,
+})
 const props = defineProps<{
   type: string
+  frequencyOnWeeksDays: UI_I_SelectInputItem[]
+  frequencyOnOrdinalNumber: UI_I_SelectInputItem[]
 }>()
 
 const { $formattedDatetime }: any = useNuxtApp()
 
-
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const frequencyOnWeeksDays = computed<UI_I_SelectInputItem[]>(() => {
-  return frequencyOnWeeksDaysFunc(localization.value)
-})
-const frequencyOnOrdinalNumber = computed<UI_I_SelectInputItem[]>(() => {
-  return frequencyOnOrdinalNumberFunc(localization.value)
-})
-
 const isDisabledMonthlyDayField = computed<boolean>(
-  () => model.value.frg_monthly_mode === 'week'
+  () => scheduledTaskFormLocal.value.frg_monthly_mode === 'week'
 )
 
 const isInitTimeIntervalValidation = ref<boolean>(false)
@@ -148,7 +140,7 @@ const schedulerOnDayErrorText = computed<string>(() => {
 
   return validateField(
     localization.value,
-    model.value.frg_monthly_day,
+    scheduledTaskFormLocal.value.frg_monthly_day,
     true,
     true
   )
@@ -156,20 +148,20 @@ const schedulerOnDayErrorText = computed<string>(() => {
 watch(
   schedulerOnDayErrorText,
   (newValue: string) => {
-    model.value.isValid = !!newValue
+    scheduledTaskFormLocal.value.isValid = !!newValue
   },
   { immediate: true }
 )
 
 const schedulerAtOnceErrorText = computed<string>(() => {
-  return !model.value.frg_on_time
+  return !scheduledTaskFormLocal.value.frg_on_time
     ? localization.value.common.fieldRequired
-    : validateDate(localization.value, model.value.frg_on_time)
+    : validateDate(localization.value, scheduledTaskFormLocal.value.frg_on_time)
 })
 watch(
   schedulerAtOnceErrorText,
   (newValue: string) => {
-    model.value.isValid = !!newValue
+    scheduledTaskFormLocal.value.isValid = !!newValue
   },
   { immediate: true }
 )
@@ -178,7 +170,7 @@ onMounted(() => {
   props.type === 'once' && setDefaultDateTime()
 })
 const setDefaultDateTime = () => {
-  model.value.frg_on_time = $formattedDatetime(new Date(), {
+  scheduledTaskFormLocal.value.frg_on_time = $formattedDatetime(new Date(), {
     formatDate: 'yyyy-MM-dd',
     separator: ' ',
     formatTime: 'HH:mm',

package/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/New.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="frequency-week-days">
+    <ui-block
+      v-for="item in props.tabs"
+      :key="item.value"
+      :class="{ selected: item.isSelected }"
+      @click="onSelectDay(item.value)"
+    >
+      <div class="main-info">
+        <span class="main-info-label">{{ item.label }}</span>
+      </div>
+    </ui-block>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_SelectWeekDayTab } from '~/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/lib/models/interfaces'
+
+const props = defineProps<{
+  tabs: UI_I_SelectWeekDayTab[]
+}>()
+const emits = defineEmits<{
+  (event: 'select-day', value: number): void
+}>()
+
+const onSelectDay = (value: number): void => {
+  emits('select-day', value)
+}
+</script>
+
+<style lang="scss" scoped>
+.frequency-week-days {
+  display: flex;
+  gap: 12px;
+
+  :deep(.block) {
+    width: max-content;
+    padding: 8px 12px;
+    color: var(--feedback-text-color);
+    background: var(--feedback-tab-bg-color);
+    box-shadow: inset 0 0 0 1px var(--feedback-tab-border-color);
+    //border: 1px solid var();
+    //box-shadow: none;
+    cursor: pointer;
+
+    &.selected {
+      //border: 1.5px solid var(--feedback-tab-active-text-color);
+      box-shadow: inset 0 0 0 1.5px
+      var(--feedback-tab-active-text-color);
+      background: var(--feedback-tab-active-bg-color);
+      color: var(--feedback-tab-active-text-color);
+      cursor: default;
+    }
+    &:not(.selected):hover {
+      background: var(--feedback-tab-hover-bg-color);
+    }
+  }
+
+  .main-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &-label {
+      font-size: 13px;
+      font-weight: 500;
+      line-height: 15.73px;
+    }
+  }
+}
+</style>

package/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/Old.vue

@@ -0,0 +1,44 @@
+<template>
+  <!--  TODO это компонент уже есть надо сделат одну но не ламать функционалность -->
+  <div class="flex-align-center">
+    <div class="btn-group">
+      <button
+        v-for="item in props.tabs"
+        :key="item"
+        :data-id="item.testId"
+        :class="['btn btn-sm btn-secondary', { 'btn-primary': item.isActive }]"
+        @click="onSelectDay(item.value)"
+      >
+        {{ item.name }}
+      </button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_SelectWeekDayTab } from '~/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/lib/models/interfaces'
+
+const props = defineProps<{
+  tabs: UI_I_SelectWeekDayTab[]
+}>()
+const emits = defineEmits<{
+  (event: 'select-day', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onSelectDay = (value: number): void => {
+  emits('select-day', value)
+}
+</script>
+
+<style lang="scss" scoped>
+.btn-group {
+  margin-right: 0;
+  button {
+    padding: 0 0.5rem;
+    min-width: 24px;
+  }
+}
+</style>

package/components/common/pages/scheduledTasks/modals/common/frequency/on/selectWeek/SelectWeek.vue

@@ -1,18 +1,5 @@
 <template>
-  <!--  TODO это компонент уже есть надо сделат одну но не ламать функционалность -->
-  <div class="flex-align-center">
-    <div class="btn-group">
-      <button
-        v-for="item in tabs"
-        :key="item"
-        :data-id="item.testId"
-        :class="['btn btn-sm btn-secondary', { 'btn-primary': item.isActive }]"
-        @click="onSelectDay(item.value)"
-      >
-        {{ item.name }}
-      </button>
-    </div>
-  </div>
+  <component :is="currentComponent" :tabs="tabs" @select-day="onSelectDay" />
 </template>
 
 <script lang="ts" setup>
@@ -26,6 +13,18 @@ const modelFrequency = defineModel<UI_I_ScheduleNewTasksForm>({
 })
 
 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 tabs = computed<UI_I_SelectWeekDayTab[]>(() =>
+  weekDaysFunc(localization.value, modelFrequency.value.frg_on_week_days)
+)
 
 const onSelectDay = (value: number): void => {
   const index = modelFrequency.value?.frg_on_week_days.indexOf(value)
@@ -41,10 +40,6 @@ const onSelectDay = (value: number): void => {
   }
 }
 
-const tabs = computed<UI_I_SelectWeekDayTab[]>(() =>
-  weekDaysFunc(localization.value, modelFrequency.value.frg_on_week_days)
-)
-
 watch(
   modelFrequency,
   (newValue: UI_I_ScheduleNewTasksForm) => {
@@ -56,13 +51,3 @@ watch(
   }
 )
 </script>
-
-<style lang="scss" scoped>
-.btn-group {
-  margin-right: 0;
-  button {
-    padding: 0 0.5rem;
-    min-width: 24px;
-  }
-}
-</style>

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

@@ -1,17 +1,15 @@
 <template>
   <div class="frequency-start-on">
-    <div>
-      <h2>{{ localization.common.start }}</h2>
-      <ui-input-with-datepicker
-        id="frequency-start-on-date"
-        v-model="modelFrequencyLocal.frg_start_on_time"
-        :format="datepickerFormat"
-        test-id="frequency-start-on-date-input"
-        time-format="12"
-        :error="''"
-        :error-timepicker="''"
-      />
-    </div>
+    <h2>{{ localization.common.start }}</h2>
+    <ui-input-with-datepicker
+      id="frequency-start-on-date"
+      v-model="modelFrequencyLocal.frg_start_on_time"
+      :format="datepickerFormat"
+      test-id="frequency-start-on-date-input"
+      time-format="12"
+      :error="''"
+      :error-timepicker="''"
+    />
   </div>
 </template>
 
@@ -34,6 +32,8 @@ const datepickerFormat = computed<string>(
 <style lang="scss" scoped>
 .frequency-start-on {
   grid-column: span 2;
+  border-top: 1px solid var(--horizontal-line);
+  padding-top: 16px;
   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.907",
+  "version": "1.5.909",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",