bfg-common 1.5.905 → 1.5.907

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/Frequency.vue

@@ -1,5 +1,4 @@
 <template>
-  <div class="frequency">
     <common-pages-scheduled-tasks-modals-common-frequency-after-startup
       v-if="props.type === 'after-startup'"
       v-model="model"
@@ -27,7 +26,6 @@
       v-model="model"
       :type="props.type"
     />
-  </div>
 </template>
 
 <script lang="ts" setup>
@@ -48,12 +46,3 @@ const showTimeOn = computed<boolean>(() => {
   return ['once', 'week', 'month'].includes(props.type)
 })
 </script>
-
-<style lang="scss" scoped>
-@import 'bfg-common/assets/scss/common/mixins.scss';
-.frequency {
-  width: 100%;
-  &__interval {
-  }
-}
-</style>

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

@@ -1,38 +1,11 @@
 <template>
-  <div class="end-time">
-    <common-select-input
-      v-model="selectedFrequencyEndMode"
-      :label="localization.scheduledTasks.end"
-      :data="frequencyEndTimeOptions"
-      :class="[
-        'end-time__select-input',
-        selectedFrequencyEndMode === 'on' && 'enabled',
-      ]"
-      test-id="frequency-ent-time"
-    >
-      <template #options>
-        <label
-          v-if="selectedFrequencyEndMode === '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>
+  <component
+    :is="currentComponent"
+    v-model="modelFrequencyLocal"
+    v-model:selected-end-mode="selectedFrequencyEndMode"
+    :end-options="frequencyEndTimeOptions"
+    :type="props.type"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -50,7 +23,14 @@ const props = defineProps<{
 }>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-// const { $store, $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
+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 frequencyEndTimeOptions = computed<UI_I_SelectInputItem[]>(() =>
   frequencyEndTimeFunc(localization.value)
@@ -79,37 +59,3 @@ watch(
   }
 )
 </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/end/New.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="frequency-end-time">
+    <div>
+      <h2>{{ localization.scheduledTasks.end }}</h2>
+      <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
+      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>
+</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
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const datepickerFormat = computed<string>(
+  () => getUiDatepickerFormatByLanguage('en_US') // TODO из пропс должен приходить язык
+)
+</script>
+
+<style lang="scss" scoped>
+.frequency-end-time {
+}
+</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/on/New.vue

@@ -3,7 +3,7 @@
     <div>
       <h2>{{ localization.common.on }}</h2>
       <ui-input-with-datepicker
-        id="events-filter-time-range-date-to"
+        id="frequency-on-date"
         v-model="scheduledTaskFormLocal.frg_on_time"
         :format="datepickerFormat"
         test-id="frequency-on-date-input"

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

@@ -0,0 +1,46 @@
+<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>
+  </div>
+</template>
+
+<script lang="ts" setup>
+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'
+
+const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
+  required: true,
+})
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const datepickerFormat = computed<string>(
+  () => getUiDatepickerFormatByLanguage('en_US') // TODO из пропс должен приходить язык
+)
+</script>
+
+<style lang="scss" scoped>
+.frequency-start-on {
+  grid-column: span 2;
+  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/startOn/Old.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="start-on">
+    <label class="clr-control-label clr-col-2 pl-0 start-on__label">
+      {{ localization.scheduledTasks.startOn }}
+    </label>
+
+    <label
+      :class="[
+        'tooltip tooltip-validation tooltip-xs tooltip-top-left',
+        schedulerStartOnErrorText && 'invalid',
+      ]"
+      for="frequency-start-on-date"
+    >
+      <input
+        id="frequency-start-on-date"
+        v-model.lazy="modelFrequencyLocal.frg_start_on_time"
+        data-id="frequency-start-on-date-input"
+        type="datetime-local"
+      />
+
+      <span class="tooltip-content">
+        {{ schedulerStartOnErrorText }}
+      </span>
+    </label>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/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 localization = computed<UI_I_Localization>(() => useLocal())
+// const { $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
+
+const schedulerStartOnErrorText = computed<string>(() => {
+  return !modelFrequencyLocal.value.frg_start_on_time
+    ? localization.value.common.fieldRequired
+    : validateDate(
+        localization.value,
+        modelFrequencyLocal.value.frg_start_on_time
+      )
+})
+watch(
+  schedulerStartOnErrorText,
+  (newValue: string) => {
+    modelFrequencyLocal.value.isValid = !!newValue
+  },
+  { immediate: true }
+)
+</script>
+
+<style lang="scss" scoped>
+@import 'bfg-common/assets/scss/common/mixins.scss';
+.start-on {
+  @include flex($align: center);
+  margin-top: 10px;
+  &__select-input {
+    :deep(.select-input__label) {
+      font-weight: 400;
+    }
+    :deep(.select) {
+      max-width: 80px !important;
+    }
+  }
+}
+.tooltip {
+  & > .tooltip-content {
+    width: 200px;
+  }
+}
+</style>

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

@@ -1,28 +1,9 @@
 <template>
-  <div class="start-on">
-    <label class="clr-control-label clr-col-2 pl-0 start-on__label">
-      {{ localization.scheduledTasks.startOn }}
-    </label>
-
-    <label
-      :class="[
-        'tooltip tooltip-validation tooltip-xs tooltip-top-left',
-        schedulerStartOnErrorText && 'invalid',
-      ]"
-      for="frequency-start-on-date"
-    >
-      <input
-        id="frequency-start-on-date"
-        v-model.lazy="modelFrequencyLocal.frg_start_on_time"
-        data-id="frequency-start-on-date-input"
-        type="datetime-local"
-      />
-
-      <span class="tooltip-content">
-        {{ schedulerStartOnErrorText }}
-      </span>
-    </label>
-  </div>
+  <component
+    :is="currentComponent"
+    v-model="modelFrequencyLocal"
+    @vue:mounted="onSetDefaultDateTime"
+  />
 </template>
 
 <script lang="ts" setup>
@@ -34,11 +15,18 @@ const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
   required: true,
 })
 
-const { $formattedDatetime }: any = useNuxtApp()
-
 const localization = computed<UI_I_Localization>(() => useLocal())
+const { $formattedDatetime }: any = useNuxtApp()
+const { $store }: any = useNuxtApp()
 // const { $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
 
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+const currentComponent = computed(() =>
+  isNewView.value
+    ? defineAsyncComponent(() => import('./New.vue'))
+    : defineAsyncComponent(() => import('./Old.vue'))
+)
+
 const schedulerStartOnErrorText = computed<string>(() => {
   return !modelFrequencyLocal.value.frg_start_on_time
     ? localization.value.common.fieldRequired
@@ -55,10 +43,7 @@ watch(
   { immediate: true }
 )
 
-onMounted(() => {
-  setDefaultDateTime()
-})
-const setDefaultDateTime = () => {
+const onSetDefaultDateTime = () => {
   modelFrequencyLocal.value.frg_start_on_time = $formattedDatetime(new Date(), {
     formatDate: 'yyyy-MM-dd',
     separator: ' ',
@@ -66,24 +51,3 @@ const setDefaultDateTime = () => {
   })
 }
 </script>
-
-<style lang="scss" scoped>
-@import 'bfg-common/assets/scss/common/mixins.scss';
-.start-on {
-  @include flex($align: center);
-  margin-top: 10px;
-  &__select-input {
-    :deep(.select-input__label) {
-      font-weight: 400;
-    }
-    :deep(.select) {
-      max-width: 80px !important;
-    }
-  }
-}
-.tooltip {
-  & > .tooltip-content {
-    width: 200px;
-  }
-}
-</style>

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

@@ -40,7 +40,9 @@
 
         <div
           class="form__run-frequency"
-          :class="model.frequency === 'once' && 'grid-single-col'"
+          :class="{
+            'grid-single-col': !model.frequency || model.frequency === 'once',
+          }"
         >
           <div>
             <h2 class="frequency">
@@ -166,7 +168,7 @@ const frequencyMethodOptionsLocal = computed<UI_I_Dropdown[]>(() =>
   &__run {
     &-frequency {
       display: grid;
-      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
+      grid-template-columns: 1fr 1fr;
       grid-gap: 16px;
       &.grid-single-col {
         grid-template-columns: 1fr;

package/package.json

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