bfg-common 1.4.255 → 1.4.257

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

@@ -19,12 +19,12 @@
 
     <common-pages-scheduled-tasks-modals-common-frequency-start-on
       v-if="showTimeInterval"
-      v-model="model.frg_start_on_time"
+      v-model="model"
     />
 
     <common-pages-scheduled-tasks-modals-common-frequency-end
       v-if="showTimeInterval"
-      v-model="model.frg_end_time"
+      v-model="model"
     />
   </div>
 </template>

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

@@ -9,23 +9,23 @@
       :class="selectedFrequencyEndMode === 'on' && 'enabled'"
     >
       <template #options>
-        <div
+        <label
           v-if="selectedFrequencyEndMode === 'on'"
-          class="datepicker__input-inner"
+          for="frequency-end-date"
+          class="tooltip tooltip-validation tooltip-xs tooltip-top-left"
+          :class="schedulerEndDateErrorText && 'invalid'"
         >
           <input
-            id="current-date-to-input"
-            v-model.lazy="currentDateLocal"
-            data-id="current-date-to-input"
-            placeholder="mm.dd.yyyy, --:--"
-            type="text"
+            id="frequency-end-date"
+            v-model.lazy="modelFrequencyLocal.frg_end_time"
+            data-id="frequency-end-date-input"
+            type="datetime-local"
           />
-          <atoms-datepicker
-            v-model="calendarDefaultDate"
-            :lang="language"
-            @update="onUpdateDateTo"
-          />
-        </div>
+
+          <span class="tooltip-content">
+            {{ schedulerEndDateErrorText }}
+          </span>
+        </label>
       </template>
     </common-select-input>
   </div>
@@ -34,12 +34,15 @@
 <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 { frequencyEndTimeFunc } from '~/components/common/pages/scheduledTasks/modals/common/frequency/end/lib/config/endOptions'
 
-const modelTimeLocal = defineModel<number | null>({ required: true })
+const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
+  required: true,
+})
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store, $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
+// const { $store, $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
 
 const frequencyEndTimeOptions = computed<UI_I_SelectInputItem[]>(() =>
   frequencyEndTimeFunc(localization.value)
@@ -47,26 +50,18 @@ const frequencyEndTimeOptions = computed<UI_I_SelectInputItem[]>(() =>
 
 const selectedFrequencyEndMode = ref<'never' | 'on'>('never')
 
-const calendarDefaultDate = ref<number>(new Date().getTime())
-const currentDateLocal = ref<string>('')
-
-const language = computed<string>(() => $store.getters['main/getInterfaceLang'])
-const onUpdateDateTo = (milliseconds: number): void => {
-  if (!milliseconds) return
-
-  modelTimeLocal.value = milliseconds
-
-  currentDateLocal.value = $formattedDate(
-    new Date(milliseconds),
-    'MM.dd.yyyy, hh:mm'
-  )
-}
-
-watch(currentDateLocal, (newValue) => {
-  $isDate(newValue) &&
-    (calendarDefaultDate.value = modelTimeLocal.value =
-      $getUnixByDate(newValue))
+const schedulerEndDateErrorText = computed<string>(() => {
+  return !modelFrequencyLocal.value.frg_end_time
+    ? localization.value.common.fieldRequired
+    : ''
 })
+watch(
+  schedulerEndDateErrorText,
+  (newValue: string) => {
+    modelFrequencyLocal.value.isValid = !!newValue
+  },
+  { immediate: true }
+)
 </script>
 
 <style lang="scss" scoped>
@@ -93,10 +88,9 @@ watch(currentDateLocal, (newValue) => {
     }
   }
 }
-.datepicker {
-  &__input-inner {
-    @include flex($align: center);
-    margin-left: 15px;
+.tooltip {
+  & > .tooltip-content {
+    width: 200px;
   }
 }
 </style>

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

@@ -56,7 +56,8 @@ const timeIntervalErrorText = computed<string>(() => {
 
   return validateField(
     localization.value,
-    modelFrequencyLocal.value.frg_interval
+    modelFrequencyLocal.value.frg_interval,
+    true
   )
 })
 watch(

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

@@ -4,48 +4,62 @@
       {{ localization.scheduledTasks.startOn }}
     </label>
 
-    <div class="datepicker__input-inner">
+    <label
+      for="frequency-start-on-date"
+      class="tooltip tooltip-validation tooltip-xs tooltip-top-left"
+      :class="schedulerStartOnErrorText && 'invalid'"
+    >
       <input
         id="frequency-start-on-date"
-        v-model.lazy="currentDateLocal"
+        v-model.lazy="modelFrequencyLocal.frg_start_on_time"
         data-id="frequency-start-on-date-input"
-        placeholder="mm.dd.yyyy, --:--"
-        type="text"
+        type="datetime-local"
       />
-      <atoms-datepicker
-        v-model="calendarDefaultDate"
-        :lang="language"
-        @update="onUpdateDateTo"
-      />
-    </div>
+
+      <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'
 
-const modelTimeLocal = defineModel<number | null>({ required: true })
+const modelFrequencyLocal = defineModel<UI_I_ScheduleNewTasksForm>({
+  required: true,
+})
 
 const localization = computed<UI_I_Localization>(() => useLocal())
-const { $store, $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
-
-const calendarDefaultDate = ref<number>(new Date().getTime())
-const currentDateLocal = ref<string>('')
+// const { $formattedDate, $isDate, $getUnixByDate }: any = useNuxtApp()
 
-const language = computed<string>(() => $store.getters['main/getInterfaceLang'])
-const onUpdateDateTo = (val: number): void => {
-  if (!val) return
-
-  modelTimeLocal.value = val // milliseconds
-
-  currentDateLocal.value = $formattedDate(new Date(val), 'MM.dd.yyyy, hh:mm')
-}
-
-watch(currentDateLocal, (newValue) => {
-  $isDate(newValue) &&
-    (calendarDefaultDate.value = modelTimeLocal.value =
-      $getUnixByDate(newValue))
+const schedulerStartOnErrorText = computed<string>(() => {
+  return !modelFrequencyLocal.value.frg_start_on_time
+    ? localization.value.common.fieldRequired
+    : ''
 })
+watch(
+  schedulerStartOnErrorText,
+  (newValue: string) => {
+    modelFrequencyLocal.value.isValid = !!newValue
+  },
+  { immediate: true }
+)
+
+// const onUpdateDateTo = (val: number): void => {
+//   if (!val) return
+//
+//   modelTimeLocal.value = val // milliseconds
+//
+//   currentDateLocal.value = $formattedDate(new Date(val), 'MM.dd.yyyy, hh:mm')
+// }
+//
+// watch(currentDateLocal, (newValue) => {
+//   $isDate(newValue) &&
+//     (calendarDefaultDate.value = modelTimeLocal.value =
+//       $getUnixByDate(newValue))
+// })
 </script>
 
 <style lang="scss" scoped>
@@ -62,10 +76,9 @@ watch(currentDateLocal, (newValue) => {
     }
   }
 }
-.datepicker {
-  &__input-inner {
-    @include flex($align: center);
-    margin-left: 15px;
+.tooltip {
+  & > .tooltip-content {
+    width: 200px;
   }
 }
 </style>

package/package.json

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