bfg-common 1.5.926 → 1.5.928

package/components/common/pages/scheduledTasks/modals/common/frequency/Frequency.vue

@@ -22,6 +22,7 @@
   <common-pages-scheduled-tasks-modals-common-frequency-start-on
     v-if="showTimeInterval"
     v-model="model"
+    :template-view-mode="props.templateViewMode"
   />
 
   <common-pages-scheduled-tasks-modals-common-frequency-end

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

@@ -4,29 +4,32 @@
     :class="props.templateViewMode === 'horizontal' && 'horizontal'"
   >
     <h2>{{ localization.scheduledTasks.end }}</h2>
-    <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 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>
 

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

@@ -10,7 +10,7 @@
       v-model="scheduledTaskFormLocal"
     />
 
-    <div v-if="props.type === 'month'" class="frequency-monthly-days">
+    <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"

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

@@ -1,5 +1,8 @@
 <template>
-  <div class="frequency-start-on">
+  <div
+    class="frequency-start-on"
+    :class="props.templateViewMode === 'horizontal' && 'horizontal'"
+  >
     <h2>{{ localization.common.start }}</h2>
     <ui-input-with-datepicker
       id="frequency-start-on-date"
@@ -17,10 +20,14 @@
 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 modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
   required: true,
 })
+const props = defineProps<{
+  templateViewMode: 'horizontal' | 'vertical'
+}>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
@@ -42,5 +49,35 @@ const datepickerFormat = computed<string>(
     line-height: 18px;
     margin-bottom: 12px;
   }
+
+  &.horizontal {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    column-gap: 16px;
+    border-top: 0;
+    padding-top: 0;
+
+    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>

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

@@ -1,7 +1,9 @@
 <template>
+  <!-- Аргумент (:template-view-mode) используется только для нового интерфейса -->
   <component
     :is="currentComponent"
     v-model="modelFrequencyLocal"
+    :template-view-mode="props.templateViewMode"
     @vue:mounted="onSetDefaultDateTime"
   />
 </template>
@@ -14,6 +16,9 @@ import { validateDate } from '~/components/common/pages/scheduledTasks/modals/co
 const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
   required: true,
 })
+const props = defineProps<{
+  templateViewMode: 'horizontal' | 'vertical'
+}>()
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 const { $formattedDatetime }: any = useNuxtApp()

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

@@ -79,7 +79,7 @@
           <!--          />-->
         </div>
       </div>
-      <div class="form__row">
+      <div class="form__row horizontal">
         <common-pages-scheduled-tasks-modals-common-frequency
           v-if="model.frequency"
           v-model="model"
@@ -366,6 +366,11 @@ const frequencyMethodOptionsLocal = computed<UI_I_Dropdown[]>(() =>
     &.horizontal {
       flex-direction: column;
       align-items: inherit;
+      row-gap: 16px;
+      & > :deep(div:not(:last-child)) {
+        border-bottom: 1px solid var(--wizard-content-line);
+        padding-bottom: 16px;
+      }
     }
 
     &-title {

package/package.json

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