bfg-common 1.4.823 → 1.4.825

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

@@ -1,181 +1,181 @@
-<template>
-  <ui-modal
-    show
-    :title="titleLocal"
-    :subtitle="props.selectedItemName"
-    :texts="modalTexts"
-    test-id="overview-custom-interval-modal"
-    @hide="onHide"
-    @submit="onSubmit"
-  >
-    <template #content>
-      <div class="time-range">
-        <ui-alert
-          v-show="alertShow"
-          status="alert-danger"
-          :messages="props.alertItems"
-          class="overview-alert"
-          test-id="overview-alert"
-          @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.common.from
-          }}</lable>
-          <ui-input-with-datepicker
-            id="date-from"
-            v-model="currentDateFromLocal"
-            test-id="date-from"
-            format="mm-dd-yyyy"
-            time-format="12"
-          />
-        </div>
-
-        <div class="filed-wrap">
-          <lable for="date-to" class="filed-lable">{{
-            localization.common.to
-          }}</lable>
-          <ui-input-with-datepicker
-            id="date-to"
-            v-model="currentDateToLocal"
-            test-id="date-to"
-            format="mm-dd-yyyy"
-            time-format="12"
-          />
-        </div>
-      </div>
-    </template>
-
-    <template #footerLeftContent><span></span></template>
-  </ui-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
-
-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
-  selectedItemName: 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 { $isDate, $getUnixByDate, $formattedDate, $formattedTime } = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-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() {
-    // console.log(currentDateFrom.value, 11111, currentTimeFrom.value)
-    // TODO fix PM
-    return $isDate(currentDateFrom.value)
-      ? $getUnixByDate(currentDateFrom.value + ' ' + currentTimeFrom.value)
-      : 0
-  },
-  set(newValue) {
-    // console.log($formattedDate(new Date(newValue), props.formatDate), 22222)
-    // console.log($formattedTime(newValue, '', true), 33333)
-    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
-  },
-  set(newValue) {
-    currentDateTo.value = $formattedDate(new Date(newValue), props.formatDate)
-    currentTimeTo.value = $formattedTime(newValue, '', true)
-  },
-})
-
-// const onUpdateDateFrom = (event: any): void => {
-//   emits('update-date-from', event)
-// }
-// const onUpdateDateTo = (event: any): void => {
-//   emits('update-date-to', event)
-// }
-
-const onSubmit = (): void => {
-  emits('submit')
-}
-const onHide = (): void => {
-  emits('hide')
-}
-</script>
-
-<style>
-:root {
-  --overview-time-range-lable-color: #4d5d69;
-  --overview-time-range-border-color: #e9ebed;
-}
-:root.dark-theme {
-  --overview-time-range-lable-color: #e9eaec;
-  --overview-time-range-border-color: #e9ebed1f;
-}
-</style>
-<style scoped lang="scss">
-.time-range {
-  padding: 0 32px;
-
-  .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
+    show
+    :title="titleLocal"
+    :subtitle="props.selectedItemName"
+    :texts="modalTexts"
+    test-id="overview-custom-interval-modal"
+    @hide="onHide"
+    @submit="onSubmit"
+  >
+    <template #content>
+      <div class="time-range">
+        <ui-alert
+          v-show="alertShow"
+          status="alert-danger"
+          :messages="props.alertItems"
+          class="overview-alert"
+          test-id="overview-alert"
+          @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.common.from
+          }}</lable>
+          <ui-input-with-datepicker
+            id="date-from"
+            v-model="currentDateFromLocal"
+            test-id="date-from"
+            format="mm-dd-yyyy"
+            time-format="12"
+          />
+        </div>
+
+        <div class="filed-wrap">
+          <lable for="date-to" class="filed-lable">{{
+            localization.common.to
+          }}</lable>
+          <ui-input-with-datepicker
+            id="date-to"
+            v-model="currentDateToLocal"
+            test-id="date-to"
+            format="mm-dd-yyyy"
+            time-format="12"
+          />
+        </div>
+      </div>
+    </template>
+
+    <template #footerLeftContent><span></span></template>
+  </ui-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
+
+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
+  selectedItemName: 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 { $isDate, $getUnixByDate, $formattedDate, $formattedTime } = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+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() {
+    // console.log(currentDateFrom.value, 11111, currentTimeFrom.value)
+    // TODO fix PM
+    return $isDate(currentDateFrom.value)
+      ? $getUnixByDate(currentDateFrom.value + ' ' + currentTimeFrom.value)
+      : 0
+  },
+  set(newValue) {
+    // console.log($formattedDate(new Date(newValue), props.formatDate), 22222)
+    // console.log($formattedTime(newValue, '', true), 33333)
+    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
+  },
+  set(newValue) {
+    currentDateTo.value = $formattedDate(new Date(newValue), props.formatDate)
+    currentTimeTo.value = $formattedTime(newValue, '', true)
+  },
+})
+
+// const onUpdateDateFrom = (event: any): void => {
+//   emits('update-date-from', event)
+// }
+// const onUpdateDateTo = (event: any): void => {
+//   emits('update-date-to', event)
+// }
+
+const onSubmit = (): void => {
+  emits('submit')
+}
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style>
+:root {
+  --overview-time-range-lable-color: #4d5d69;
+  --overview-time-range-border-color: #e9ebed;
+}
+:root.dark-theme {
+  --overview-time-range-lable-color: #e9eaec;
+  --overview-time-range-border-color: #e9ebed1f;
+}
+</style>
+<style scoped lang="scss">
+.time-range {
+  padding: 0 32px;
+
+  .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>