bfg-common 1.5.151 → 1.5.153

package/components/common/monitor/overview/filters/customIntervalModal/customIntervalModalNew/CustomIntervalModalNew.vue

@@ -1,240 +1,240 @@
-<template>
-  <ui-modal
-    :title="titleLocal"
-    :subtitle="props.selectedNodeName"
-    :texts="modalTexts"
-    width="560px"
-    test-id="overview-custom-interval-modal"
-    show
-    @hide="onHide"
-    @submit="onSubmit"
-  >
-    <template #content>
-      <div class="time-range">
-        <ui-alert
-          v-show="alertShow"
-          :messages="props.alertItems"
-          status="alert-danger"
-          class="overview-alert"
-          test-id="overview-alert"
-          size="md"
-          hide-close-button
-          @remove="alertShow = false"
-        />
-
-        <p class="date-time-format-description">
-          {{ localization.inventoryMonitor.dateTimeIsoFormat }}
-        </p>
-
-        <div class="filed-wrap from">
-          <lable for="date-from" class="filed-lable">{{
-            localization.inventoryMonitor.from
-          }}</lable>
-          <ui-input-with-datepicker
-            id="date-from"
-            v-model="currentDateFromLocal"
-            :format="datepickerFormat"
-            :local="props.currentLang"
-            :datepicker-texts="datepickerTexts"
-            :placeholder="datepickerTexts.ddMmYyyy"
-            :error="errorDateFrom"
-            :error-timepicker="errorTimeFrom"
-            test-id="date-from"
-            time-format="12"
-          />
-        </div>
-
-        <div class="filed-wrap">
-          <lable for="date-to" class="filed-lable">{{
-            localization.common.on2
-          }}</lable>
-          <ui-input-with-datepicker
-            id="date-to"
-            v-model="currentDateToLocal"
-            :format="datepickerFormat"
-            :local="props.currentLang"
-            :datepicker-texts="datepickerTexts"
-            :placeholder="datepickerTexts.ddMmYyyy"
-            :error="errorDateTo"
-            :error-timepicker="errorTimeTo"
-            :max="maxDateTo"
-            test-id="date-to"
-            time-format="12"
-          />
-        </div>
-      </div>
-    </template>
-
-    <template #footerLeftContent><span></span></template>
-  </ui-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
-import type { UI_I_DatepickerTexts } from '~/node_modules/bfg-uikit/components/ui/datepicker/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
-import { getUnixDate } from '~/components/common/monitor/overview/filters/customIntervalModal/customIntervalModalNew/lib/utils/date'
-
-const alertShow = defineModel<boolean>('alert-show')
-const currentDateFrom = defineModel<string>('current-date-from')
-// const dateFrom = defineModel<string>('date-from')
-const currentTimeFrom = defineModel<string>('current-time-from')
-const currentDateTo = defineModel<string>('current-date-to')
-// const dateTo = defineModel<string>('date-to')
-const currentTimeTo = defineModel<string>('current-time-to')
-
-const props = defineProps<{
-  titleIntervalModal: string
-  selectedNodeName: string
-  currentLang: string
-  alertItems: any[]
-  formatDate: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit'): void
-  (event: 'update-date-from', value: any): void
-  (event: 'update-date-to', value: any): void
-}>()
-
-const { $formattedDate, $formattedTime } = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const datepickerTexts = computed<UI_I_DatepickerTexts>(() => {
-  return {
-    thisYear: localization.value.common.thisYear,
-    thisMonth: localization.value.common.thisMonth,
-    today: localization.value.common.today,
-    now: localization.value.common.now,
-    hhMmSs: localization.value.common.hhMmSs,
-    ddMmYyyy: localization.value.common.ddMmYyyy,
-  }
-})
-
-const datepickerFormat = computed<string>(() =>
-  getUiDatepickerFormatByLanguage(props.currentLang)
-)
-
-const titleLocal = computed<string>(() =>
-  props.titleIntervalModal.replace(':', '')
-)
-const modalTexts = computed<UI_I_ModalTexts>(() => ({
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.save,
-}))
-
-const currentDateFromLocal = computed<number>({
-  get() {
-    // TODO fix PM
-    // return $isDate(currentDateFrom.value)
-    //   ? $getUnixByDate(currentDateFrom.value + ' ' + currentTimeFrom.value)
-    //   : 0
-    return getUnixDate(currentDateFrom.value, currentTimeFrom.value)
-  },
-  set(newValue) {
-    currentDateFrom.value = $formattedDate(new Date(newValue), props.formatDate)
-    currentTimeFrom.value = $formattedTime(newValue, '', true)
-  },
-})
-const currentDateToLocal = computed<number>({
-  get() {
-    // TODO fix PM
-    // return $isDate(currentDateTo.value)
-    //   ? $getUnixByDate(currentDateTo.value + ' ' + currentTimeTo.value)
-    //   : 0
-    return getUnixDate(currentDateTo.value, currentTimeTo.value)
-  },
-  set(newValue) {
-    currentDateTo.value = $formattedDate(new Date(newValue), props.formatDate)
-    currentTimeTo.value = $formattedTime(newValue, '', true)
-  },
-})
-
-const maxDateTo = ref<number>(new Date().getTime())
-
-// const onUpdateDateFrom = (event: any): void => {
-//   emits('update-date-from', event)
-// }
-// const onUpdateDateTo = (event: any): void => {
-//   emits('update-date-to', event)
-// }
-
-const errorDateFrom = ref<string>('')
-const errorTimeFrom = ref<string>('')
-const errorDateTo = ref<string>('')
-const errorTimeTo = ref<string>('')
-const checkErrorMessageText = (): void => {
-  errorDateFrom.value = ''
-  errorTimeFrom.value = ''
-  errorDateTo.value = ''
-  errorTimeTo.value = ''
-
-  const dateFromValue = document.getElementById('date-from-date-input').value
-  const timeFromValue = document.getElementById('date-from-time-input').value
-  const dateToValue = document.getElementById('date-to-date-input').value
-  const timeToValue = document.getElementById('date-to-time-input').value
-
-  if (!dateFromValue)
-    errorDateFrom.value = localization.value.common.fieldRequired
-
-  if (!timeFromValue)
-    errorTimeFrom.value = localization.value.common.fieldRequired
-
-  if (!dateToValue) errorDateTo.value = localization.value.common.fieldRequired
-
-  if (!timeToValue) errorTimeTo.value = localization.value.common.fieldRequired
-}
-const onSubmit = (): void => {
-  checkErrorMessageText()
-  emits('submit')
-}
-const onHide = (): void => {
-  emits('hide')
-}
-</script>
-
-<style>
-:root {
-  --overview-time-range-lable-color: #4d5d69;
-  --overview-time-range-border-color: rgba(233, 235, 237, 0.64);
-}
-:root.dark-theme {
-  --overview-time-range-lable-color: #e9eaec;
-  --overview-time-range-border-color: #e9ebed1f;
-}
-</style>
-<style scoped lang="scss">
-.time-range {
-  padding: 16px 32px 0;
-
-  .overview-alert {
-    margin-bottom: 16px;
-  }
-
-  .date-time-format-description {
-    font-size: 12px;
-    color: #9da6ad;
-    padding-bottom: 12px;
-    border-bottom: 1px solid var(--overview-time-range-border-color);
-  }
-
-  .filed-wrap {
-    margin-bottom: 16px;
-
-    &.from {
-      margin-bottom: 24px;
-    }
-    .filed-lable {
-      display: block;
-      font-size: 16px;
-      font-weight: 500;
-      color: var(--overview-time-range-lable-color);
-      margin: 16px 0;
-      text-transform: capitalize;
-    }
-  }
-}
-</style>
+<template>
+  <ui-modal
+    :title="titleLocal"
+    :subtitle="props.selectedNodeName"
+    :texts="modalTexts"
+    width="560px"
+    test-id="overview-custom-interval-modal"
+    show
+    @hide="onHide"
+    @submit="onSubmit"
+  >
+    <template #content>
+      <div class="time-range">
+        <ui-alert
+          v-show="alertShow"
+          :messages="props.alertItems"
+          status="alert-danger"
+          class="overview-alert"
+          test-id="overview-alert"
+          size="md"
+          hide-close-button
+          @remove="alertShow = false"
+        />
+
+        <p class="date-time-format-description">
+          {{ localization.inventoryMonitor.dateTimeIsoFormat }}
+        </p>
+
+        <div class="filed-wrap from">
+          <lable for="date-from" class="filed-lable">{{
+            localization.inventoryMonitor.from
+          }}</lable>
+          <ui-input-with-datepicker
+            id="date-from"
+            v-model="currentDateFromLocal"
+            :format="datepickerFormat"
+            :local="props.currentLang"
+            :datepicker-texts="datepickerTexts"
+            :placeholder="datepickerTexts.ddMmYyyy"
+            :error="errorDateFrom"
+            :error-timepicker="errorTimeFrom"
+            test-id="date-from"
+            time-format="12"
+          />
+        </div>
+
+        <div class="filed-wrap">
+          <lable for="date-to" class="filed-lable">{{
+            localization.common.on2
+          }}</lable>
+          <ui-input-with-datepicker
+            id="date-to"
+            v-model="currentDateToLocal"
+            :format="datepickerFormat"
+            :local="props.currentLang"
+            :datepicker-texts="datepickerTexts"
+            :placeholder="datepickerTexts.ddMmYyyy"
+            :error="errorDateTo"
+            :error-timepicker="errorTimeTo"
+            :max="maxDateTo"
+            test-id="date-to"
+            time-format="12"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #footerLeftContent><span></span></template>
+  </ui-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from '~/node_modules/bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_DatepickerTexts } from '~/node_modules/bfg-uikit/components/ui/datepicker/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
+import { getUnixDate } from '~/components/common/monitor/overview/filters/customIntervalModal/customIntervalModalNew/lib/utils/date'
+
+const alertShow = defineModel<boolean>('alert-show')
+const currentDateFrom = defineModel<string>('current-date-from')
+// const dateFrom = defineModel<string>('date-from')
+const currentTimeFrom = defineModel<string>('current-time-from')
+const currentDateTo = defineModel<string>('current-date-to')
+// const dateTo = defineModel<string>('date-to')
+const currentTimeTo = defineModel<string>('current-time-to')
+
+const props = defineProps<{
+  titleIntervalModal: string
+  selectedNodeName: string
+  currentLang: string
+  alertItems: any[]
+  formatDate: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'hide'): void
+  (event: 'submit'): void
+  (event: 'update-date-from', value: any): void
+  (event: 'update-date-to', value: any): void
+}>()
+
+const { $formattedDate, $formattedTime } = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const datepickerTexts = computed<UI_I_DatepickerTexts>(() => {
+  return {
+    thisYear: localization.value.common.thisYear,
+    thisMonth: localization.value.common.thisMonth,
+    today: localization.value.common.today,
+    now: localization.value.common.now,
+    hhMmSs: localization.value.common.hhMmSs,
+    ddMmYyyy: localization.value.common.ddMmYyyy,
+  }
+})
+
+const datepickerFormat = computed<string>(() =>
+  getUiDatepickerFormatByLanguage(props.currentLang)
+)
+
+const titleLocal = computed<string>(() =>
+  props.titleIntervalModal.replace(':', '')
+)
+const modalTexts = computed<UI_I_ModalTexts>(() => ({
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.save,
+}))
+
+const currentDateFromLocal = computed<number>({
+  get() {
+    // TODO fix PM
+    // return $isDate(currentDateFrom.value)
+    //   ? $getUnixByDate(currentDateFrom.value + ' ' + currentTimeFrom.value)
+    //   : 0
+    return getUnixDate(currentDateFrom.value, currentTimeFrom.value)
+  },
+  set(newValue) {
+    currentDateFrom.value = $formattedDate(new Date(newValue), props.formatDate)
+    currentTimeFrom.value = $formattedTime(newValue, '', true)
+  },
+})
+const currentDateToLocal = computed<number>({
+  get() {
+    // TODO fix PM
+    // return $isDate(currentDateTo.value)
+    //   ? $getUnixByDate(currentDateTo.value + ' ' + currentTimeTo.value)
+    //   : 0
+    return getUnixDate(currentDateTo.value, currentTimeTo.value)
+  },
+  set(newValue) {
+    currentDateTo.value = $formattedDate(new Date(newValue), props.formatDate)
+    currentTimeTo.value = $formattedTime(newValue, '', true)
+  },
+})
+
+const maxDateTo = ref<number>(new Date().getTime())
+
+// const onUpdateDateFrom = (event: any): void => {
+//   emits('update-date-from', event)
+// }
+// const onUpdateDateTo = (event: any): void => {
+//   emits('update-date-to', event)
+// }
+
+const errorDateFrom = ref<string>('')
+const errorTimeFrom = ref<string>('')
+const errorDateTo = ref<string>('')
+const errorTimeTo = ref<string>('')
+const checkErrorMessageText = (): void => {
+  errorDateFrom.value = ''
+  errorTimeFrom.value = ''
+  errorDateTo.value = ''
+  errorTimeTo.value = ''
+
+  const dateFromValue = document.getElementById('date-from-date-input').value
+  const timeFromValue = document.getElementById('date-from-time-input').value
+  const dateToValue = document.getElementById('date-to-date-input').value
+  const timeToValue = document.getElementById('date-to-time-input').value
+
+  if (!dateFromValue)
+    errorDateFrom.value = localization.value.common.fieldRequired
+
+  if (!timeFromValue)
+    errorTimeFrom.value = localization.value.common.fieldRequired
+
+  if (!dateToValue) errorDateTo.value = localization.value.common.fieldRequired
+
+  if (!timeToValue) errorTimeTo.value = localization.value.common.fieldRequired
+}
+const onSubmit = (): void => {
+  checkErrorMessageText()
+  emits('submit')
+}
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style>
+:root {
+  --overview-time-range-lable-color: #4d5d69;
+  --overview-time-range-border-color: rgba(233, 235, 237, 0.64);
+}
+:root.dark-theme {
+  --overview-time-range-lable-color: #e9eaec;
+  --overview-time-range-border-color: #e9ebed1f;
+}
+</style>
+<style scoped lang="scss">
+.time-range {
+  padding: 16px 32px 0;
+
+  .overview-alert {
+    margin-bottom: 16px;
+  }
+
+  .date-time-format-description {
+    font-size: 12px;
+    color: #9da6ad;
+    padding-bottom: 12px;
+    border-bottom: 1px solid var(--overview-time-range-border-color);
+  }
+
+  .filed-wrap {
+    margin-bottom: 16px;
+
+    &.from {
+      margin-bottom: 24px;
+    }
+    .filed-lable {
+      display: block;
+      font-size: 16px;
+      font-weight: 500;
+      color: var(--overview-time-range-lable-color);
+      margin: 16px 0;
+      text-transform: capitalize;
+    }
+  }
+}
+</style>

package/components/common/monitor/overview/filters/customIntervalModal/customIntervalModalNew/lib/utils/date.ts

@@ -1,11 +1,11 @@
-export const getUnixDate = (dateFrom: string, timeFrom: string): number => {
-  let result = 0
-
-  if (dateFrom && timeFrom) {
-    const { $getUnixByDate } = useNuxtApp()
-
-    result = $getUnixByDate(dateFrom + ' ' + timeFrom)
-  }
-
-  return result
-}
+export const getUnixDate = (dateFrom: string, timeFrom: string): number => {
+  let result = 0
+
+  if (dateFrom && timeFrom) {
+    const { $getUnixByDate } = useNuxtApp()
+
+    result = $getUnixByDate(dateFrom + ' ' + timeFrom)
+  }
+
+  return result
+}

package/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker.ts

@@ -1,62 +1,62 @@
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const isMoreThanOneMonth = (startDate: number, endDate: number): boolean => {
-  const date1 = new Date(startDate)
-  const date2 = new Date(endDate)
-
-  const nextMonth = new Date(date1)
-  nextMonth.setMonth(date1.getMonth() + 1)
-
-  return nextMonth < date2
-}
-
-export const checkDateFunc = (
-  localization: UI_I_Localization,
-  dateFrom: string,
-  dateTo: string,
-  timeFrom: string,
-  timeTo: string,
-  unixValidEnd: number,
-  formatDate: string
-): string | number[] => {
-  const { $isDate, $getUnixByDate } = useNuxtApp()
-
-  let result = ''
-  const startDate = dateFrom + ' ' + timeFrom
-  const unixStartDate = $getUnixByDate(startDate)
-  const endDate = dateTo + ' ' + timeTo
-  const unixEndDate = $getUnixByDate(endDate)
-
-  if (
-    !$isDate(unixStartDate) ||
-    !$isDate(unixEndDate) ||
-    !timeFrom ||
-    !timeTo
-  ) {
-    result = localization.inventoryMonitor.invalidTimeEntry
-    return result
-  }
-
-  if (unixEndDate > unixValidEnd) {
-    const { $formattedDatetime } = useNuxtApp()
-
-    const currentShowValidEnd = $formattedDatetime(
-      new Date(unixValidEnd),
-      formatDate,
-      true
-    )
-    result =
-      localization.inventoryMonitor.timeRangeShouldNotBeMoreThanValidTo.replace(
-        '{0}',
-        currentShowValidEnd
-      )
-  } else if (unixEndDate === unixStartDate)
-    result = localization.inventoryMonitor.timeToShouldBeLaterTimeFrom
-  else if (unixEndDate - unixStartDate <= 3600000)
-    result = localization.inventoryMonitor.timeRangeShouldNotBeSmallerThanHour
-  else if (isMoreThanOneMonth(unixStartDate, unixEndDate))
-    result = localization.inventoryMonitor.timeRangeShouldNotBeMoreThanMonth
-  else return [unixStartDate, unixEndDate]
-
-  return result
-}
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const isMoreThanOneMonth = (startDate: number, endDate: number): boolean => {
+  const date1 = new Date(startDate)
+  const date2 = new Date(endDate)
+
+  const nextMonth = new Date(date1)
+  nextMonth.setMonth(date1.getMonth() + 1)
+
+  return nextMonth < date2
+}
+
+export const checkDateFunc = (
+  localization: UI_I_Localization,
+  dateFrom: string,
+  dateTo: string,
+  timeFrom: string,
+  timeTo: string,
+  unixValidEnd: number,
+  formatDate: string
+): string | number[] => {
+  const { $isDate, $getUnixByDate } = useNuxtApp()
+
+  let result = ''
+  const startDate = dateFrom + ' ' + timeFrom
+  const unixStartDate = $getUnixByDate(startDate)
+  const endDate = dateTo + ' ' + timeTo
+  const unixEndDate = $getUnixByDate(endDate)
+
+  if (
+    !$isDate(unixStartDate) ||
+    !$isDate(unixEndDate) ||
+    !timeFrom ||
+    !timeTo
+  ) {
+    result = localization.inventoryMonitor.invalidTimeEntry
+    return result
+  }
+
+  if (unixEndDate > unixValidEnd) {
+    const { $formattedDatetime } = useNuxtApp()
+
+    const currentShowValidEnd = $formattedDatetime(
+      new Date(unixValidEnd),
+      formatDate,
+      true
+    )
+    result =
+      localization.inventoryMonitor.timeRangeShouldNotBeMoreThanValidTo.replace(
+        '{0}',
+        currentShowValidEnd
+      )
+  } else if (unixEndDate === unixStartDate)
+    result = localization.inventoryMonitor.timeToShouldBeLaterTimeFrom
+  else if (unixEndDate - unixStartDate <= 3600000)
+    result = localization.inventoryMonitor.timeRangeShouldNotBeSmallerThanHour
+  else if (isMoreThanOneMonth(unixStartDate, unixEndDate))
+    result = localization.inventoryMonitor.timeRangeShouldNotBeMoreThanMonth
+  else return [unixStartDate, unixEndDate]
+
+  return result
+}