bfg-common 1.4.814 → 1.4.816

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

@@ -1,155 +1,181 @@
-<template>
-  <atoms-modal
-    width="580px"
-    class="add-permission"
-    :show="true"
-    :title="props.titleIntervalModal"
-    :second-title="props.selectedItemName"
-    test-id="overview-custom-interval-modal"
-    @hide="onHide"
-    @submit="onSubmit"
-  >
-    <template #modalBody>
-      <atoms-alert
-        v-show="alertShow"
-        status="alert-danger"
-        :items="props.alertItems"
-        test-id="overview-alert"
-        @remove="alertShow = false"
-      />
-
-      <table>
-        <tbody>
-          <tr>
-            <td class="text-right">
-              <label class="custom-time-label">
-                <span class="custom-time-label-text text-capitalize">
-                  {{ localization.common.from }}:
-                </span>
-              </label>
-            </td>
-            <td>
-              <div class="flex-align-center input-row-container">
-                <input
-                  id="current-date-from"
-                  v-model.lazy="currentDateFrom"
-                  data-id="current-date-from-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input first-from"
-                />
-                <div class="section-datepicker">
-                  <atoms-datepicker
-                    v-model="dateFrom"
-                    :lang="props.currentLang"
-                    class="chart-option-setting-row custom-time-input"
-                    test-id="overview-first-date-datepicker"
-                    @update="onUpdateDateFrom"
-                  />
-                </div>
-                <input
-                  id="current-time-from"
-                  v-model="currentTimeFrom"
-                  data-id="current-time-from-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input"
-                />
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <td class="text-right">
-              <label class="custom-time-label">
-                <span class="custom-time-label-text text-capitalize">
-                  {{ localization.common.to }}:
-                </span>
-              </label>
-            </td>
-            <td>
-              <div class="flex-align-center input-row-container">
-                <input
-                  id="current-date-to"
-                  v-model.lazy="currentDateTo"
-                  data-id="current-date-to-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input first-from"
-                />
-                <div class="section-datepicker">
-                  <atoms-datepicker
-                    v-model="dateTo"
-                    :lang="props.currentLang"
-                    class="chart-option-setting-row custom-time-input"
-                    test-id="overview-first-date-to-datepicker"
-                    @update="onUpdateDateTo"
-                  />
-                </div>
-                <input
-                  id="current-time-to"
-                  v-model="currentTimeTo"
-                  data-id="current-time-to-input"
-                  type="text"
-                  class="chart-option-setting-row custom-time-input"
-                />
-              </div>
-            </td>
-          </tr>
-          <tr>
-            <td></td>
-            <td class="text-format-date">
-              ({{ localization.inventoryMonitor.dateTimeIsoFormat }})
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </template>
-  </atoms-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const alertShow = defineModel<boolean>('alert-show')
-const currentDateFrom = defineModel<boolean>('current-date-from')
-const dateFrom = defineModel<boolean>('date-from')
-const currentTimeFrom = defineModel<boolean>('current-time-from')
-const currentDateTo = defineModel<boolean>('current-date-to')
-const dateTo = defineModel<boolean>('date-to')
-const currentTimeTo = defineModel<boolean>('current-time-to')
-
-const props = defineProps<{
-  titleIntervalModal: string
-  selectedItemName: string
-  currentLang: string
-  alertItems: any[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit', value: number[]): void
-  (event: 'update-date-from', value: any): void
-  (event: 'update-date-to', value: any): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onUpdateDateFrom = (event: any): void => {
-  emits('update-date-from', event)
-}
-const onUpdateDateTo = (event: any): void => {
-  emits('update-date-to', event)
-}
-</script>
-
-<style scoped lang="scss">
-.input-row-container {
-  padding-left: 5px;
-
-  .custom-time-input {
-    max-width: 120px;
-    margin-right: 15px;
-  }
-}
-.text-format-date {
-  display: inline-block;
-  margin-top: 5px;
-}
-</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>