bfg-common 1.5.896 → 1.5.898

package/components/common/pages/scheduledTasks/modals/common/{newTaskForm → taskForm}/New.vue

@@ -1,9 +1,30 @@
 <template>
   <form class="form" @submit.prevent>
     <section>
-      <div class="form__target">
-        {{ localization.common.target }}
+      <div class="flex justify-between column-gap-4 form__target">
+        <div class="flex items-center column-gap-2 text-ellipsis">
+          <p class="text">{{ localization.common.target }}:</p>
+          <span class="icon vsphere-icon-vm"></span>
+          <span class="text">{{ props.target }}</span>
+        </div>
+        <div class="flex items-center column-gap-3">
+          <p class="text">{{ localization.common.active }}</p>
+          <ui-switch
+            v-model="model.toggle"
+            test-id="scheduled-task-active-switch-input"
+          />
+        </div>
       </div>
+
+      <ui-input
+        id="schedule-task-name-field"
+        v-model="model.task_name"
+        :label="localization.common.taskName"
+        :error="props.taskNameErrorText"
+        test-id="schedule-task-name-field"
+        class="form__user-name"
+        @input="onInitValidation(['taskName'])"
+      />
     </section>
   </form>
 </template>
@@ -12,31 +33,26 @@
 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 type { UI_I_InitialValidationFields } from '~/components/common/pages/scheduledTasks/modals/common/newTaskForm/lib/models/interfaces'
+import type { UI_I_InitialValidationFields } from '~/components/common/pages/scheduledTasks/modals/common/taskForm/lib/models/interfaces'
 import type { UI_T_FrequencyType } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/models/types'
-import * as cron from '~/components/common/pages/scheduledTasks/modals/common/newTaskForm/lib/utils'
+import * as cron from '~/components/common/pages/scheduledTasks/modals/common/taskForm/lib/utils'
 import { frequencyMethodFunc } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/config/frequencyOptions'
 
+const model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
 const props = defineProps<{
   target: string
+  formValidationFields: UI_I_InitialValidationFields
+  taskNameErrorText: string
+}>()
+const emits = defineEmits<{
+  (event: 'init-validation', value: string[]): void
 }>()
-const model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const initValidationFields = ref<UI_I_InitialValidationFields>({
-  taskName: false,
-})
 const onInitValidation = (types: string[]): void => {
-  types.forEach((type) => (initValidationFields.value[type] = true))
+  emits('init-validation', types)
 }
-const userNameErrorText = computed<string>(() => {
-  if (!initValidationFields.value.taskName) return ''
-
-  model.value.task_name = model.value.task_name.replace(/^\s+/, '')
-
-  return !model.value.task_name ? localization.value.common.fieldRequired : ''
-})
 
 const frequencyMethodOptions = computed<UI_I_SelectInputItem[]>(() =>
   frequencyMethodFunc(localization.value)
@@ -95,31 +111,29 @@ const generateCronExpression = (
     background-color: var(--info-block-bg);
     border-radius: 8px;
     padding: 12px;
-    & > p {
+    .text {
       font-family: 'Inter', sans-serif;
-      color: #9da6ad; // for light and dark theme
-      font-weight: 400;
       font-size: 13px;
-      line-height: 18px;
-      margin-bottom: 8px;
+      font-weight: 400;
+      color: var(--title-form-first-color);
+    }
+    /* Target */
+    > div:first-child p.text {
+      color: #9da6ad; // for dark and light theme
     }
+    /* Active */
+    > div:last-child p.text {
+      text-transform: Capitalize;
+    }
+
+    span.text {
+      color: var(--title-color);
+    }
+
     .icon {
       min-width: 20px;
       width: 20px;
       height: 20px;
-      margin-right: 6px;
-    }
-    .text {
-      font-family: 'Inter', sans-serif;
-      color: var(--title-form-first-color);
-      font-weight: 400;
-      font-size: 13px;
-      line-height: 18px;
-      word-break: break-word;
-
-      .highlight {
-        color: var(--text-red);
-      }
     }
   }
 }

package/components/common/pages/scheduledTasks/modals/common/{newTaskForm → taskForm}/Old.vue

@@ -9,7 +9,7 @@
         <label
           :class="[
             'clr-control-container tooltip tooltip-validation tooltip-xs tooltip-bottom-left clr-col-md-8',
-            userNameErrorText && 'invalid',
+            props.taskNameErrorText && 'invalid',
           ]"
         >
           <input
@@ -22,7 +22,7 @@
             @blur="onInitValidation(['taskName'])"
           />
           <span class="tooltip-content">
-            {{ userNameErrorText }}
+            {{ props.taskNameErrorText }}
           </span>
         </label>
       </div>
@@ -101,31 +101,26 @@
 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 type { UI_I_InitialValidationFields } from '~/components/common/pages/scheduledTasks/modals/common/newTaskForm/lib/models/interfaces'
+import type { UI_I_InitialValidationFields } from '~/components/common/pages/scheduledTasks/modals/common/taskForm/lib/models/interfaces'
 import type { UI_T_FrequencyType } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/models/types'
-import * as cron from '~/components/common/pages/scheduledTasks/modals/common/newTaskForm/lib/utils'
+import * as cron from '~/components/common/pages/scheduledTasks/modals/common/taskForm/lib/utils'
 import { frequencyMethodFunc } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/config/frequencyOptions'
 
+const model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
 const props = defineProps<{
   target: string
+  formValidationFields: UI_I_InitialValidationFields
+  taskNameErrorText: string
+}>()
+const emits = defineEmits<{
+  (event: 'init-validation', value: string[]): void
 }>()
-const model = defineModel<UI_I_ScheduleNewTasksForm>({ required: true })
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const initValidationFields = ref<UI_I_InitialValidationFields>({
-  taskName: false,
-})
 const onInitValidation = (types: string[]): void => {
-  types.forEach((type) => (initValidationFields.value[type] = true))
+  emits('init-validation', types)
 }
-const userNameErrorText = computed<string>(() => {
-  if (!initValidationFields.value.taskName) return ''
-
-  model.value.task_name = model.value.task_name.replace(/^\s+/, '')
-
-  return !model.value.task_name ? localization.value.common.fieldRequired : ''
-})
 
 const frequencyMethodOptions = computed<UI_I_SelectInputItem[]>(() =>
   frequencyMethodFunc(localization.value)

package/components/common/pages/scheduledTasks/modals/common/{newTaskForm → taskForm}/TaskForm.vue

@@ -3,6 +3,9 @@
     :is="currentComponent"
     v-model="scheduledTaskFormModel"
     :target="props.target"
+    :form-validation-fields="initValidationFields"
+    :task-name-error-text="taskNameErrorText"
+    @init-validation="onInitValidation"
   />
 </template>
 
@@ -10,9 +13,9 @@
 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 type { UI_I_InitialValidationFields } from '~/components/common/pages/scheduledTasks/modals/common/newTaskForm/lib/models/interfaces'
+import type { UI_I_InitialValidationFields } from '~/components/common/pages/scheduledTasks/modals/common/taskForm/lib/models/interfaces'
 import type { UI_T_FrequencyType } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/models/types'
-import * as cron from '~/components/common/pages/scheduledTasks/modals/common/newTaskForm/lib/utils'
+import * as cron from '~/components/common/pages/scheduledTasks/modals/common/taskForm/lib/utils'
 import { frequencyMethodFunc } from '~/components/common/pages/scheduledTasks/modals/common/frequency/lib/config/frequencyOptions'
 
 const scheduledTaskFormModel = defineModel<UI_I_ScheduleNewTasksForm>({
@@ -35,10 +38,13 @@ const currentComponent = computed(() =>
 const initValidationFields = ref<UI_I_InitialValidationFields>({
   taskName: false,
 })
-const onInitValidation = (types: string[]): void => {
+const onInitValidation = (
+  types: (keyof UI_I_InitialValidationFields)[]
+): void => {
   types.forEach((type) => (initValidationFields.value[type] = true))
 }
-const userNameErrorText = computed<string>(() => {
+
+const taskNameErrorText = computed<string>(() => {
   if (!initValidationFields.value.taskName) return ''
 
   scheduledTaskFormModel.value.task_name =
@@ -98,4 +104,18 @@ const generateCronExpression = (
 
   return cronExpression
 }
+
+// Используется только для нового интерфейса и вызывается в родительском компоненте
+// Запускаем валидацию всех полей
+const isValidateForm = (): boolean => {
+  onInitValidation(['taskName'])
+
+  const errorChecks = [userNameErrorText.value]
+
+  // если поле невалидно — значение будет непустым
+  return errorChecks.every((text) => !text?.length)
+}
+defineExpose({
+  isValidateForm,
+})
 </script>

package/package.json

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