bfg-common 1.5.92 → 1.5.94

package/components/common/chartOptionsModal/counters/timespan/form/FormNew.vue

@@ -1,262 +1,262 @@
-<template>
-  <div class="timespan-form-container">
-    <p class="block-title">{{ localization.inventoryMonitor.timespan }}</p>
-    <ui-select
-      v-model="localSelectedTimespanLocal"
-      :items="constructedTimespanOptions"
-      test-id="timespan-local"
-      select-width="100%"
-      size="md"
-      :margin-between-trigger="4"
-    />
-
-    <div class="radio-container">
-      <div class="ui-radio-block">
-        <ui-radio
-          v-model="localPeriodTypeLocal"
-          :label="localization.common.last"
-          :disabled="isDisabledCustomForm"
-          test-id="last-from"
-          value="last"
-          size="md"
-        />
-      </div>
-      <div class="row-container">
-        <ui-input
-          v-model="localLastLocal"
-          :disabled="isDisabledCustomFormLast"
-          :placeholder="localization.common.last"
-          :error="props.errorLastInput"
-          test-id="local-last"
-        />
-        <ui-select
-          v-model="localSelectedCustomTimeLocal"
-          :items="constructedCustomTimeOptions"
-          :disabled="isDisabledCustomFormLast"
-          :margin-between-trigger="4"
-          test-id="custom-time"
-          select-width="100%"
-          size="md"
-        />
-      </div>
-    </div>
-    <div class="radio-container">
-      <div class="ui-radio-block">
-        <ui-radio
-          v-model="localPeriodTypeLocal"
-          :label="localization.common.timeRange"
-          :disabled="isDisabledCustomForm"
-          test-id="last-from"
-          value="period"
-          size="md"
-        />
-      </div>
-
-      <ui-input-with-datepicker
-        id="date-from"
-        v-model="constructedDateFromLocal"
-        :format="datepickerFormat"
-        :disabled="isDisabledCustomFormRange"
-        :error="props.errorDateFrom"
-        :error-timepicker="props.errorTimeFrom"
-        test-id="date-from"
-        time-format="12"
-      />
-
-      <ui-input-with-datepicker
-        id="date-to"
-        v-model="constructedDateToLocal"
-        :format="datepickerFormat"
-        :disabled="isDisabledCustomFormRange"
-        :error="props.errorDateTo"
-        :error-timepicker="props.errorTimeTo"
-        test-id="date-to"
-        time-format="12"
-      />
-    </div>
-    <p class="date-time-info">
-      {{ localization.inventoryMonitor.dateTimeIsoFormat }}
-    </p>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
-import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
-
-const localSelectedTimespanLocal = defineModel<string>(
-  'localSelectedTimespan',
-  { required: true }
-)
-const localPeriodTypeLocal = defineModel<string>('localPeriodType', {
-  required: true,
-})
-const localLastLocal = defineModel<number>('localLast', {
-  required: true,
-})
-const localSelectedCustomTimeLocal = defineModel<string>(
-  'localSelectedCustomTime',
-  {
-    required: true,
-  }
-)
-const localCurrentDateFromLocal = defineModel<string>('localCurrentDateFrom', {
-  required: true,
-})
-const currentTimeFromLocal = defineModel<string>('currentTimeFrom', {
-  required: true,
-})
-const currentTimeToLocal = defineModel<string>('currentTimeTo', {
-  required: true,
-})
-const currentDateToLocal = defineModel<string>('currentDateTo', {
-  required: true,
-})
-
-const props = defineProps<{
-  timespanOptions: UI_I_OptionItem[]
-  customTimeOptions: UI_I_OptionItem[]
-  language: string
-  errorLastInput?: string
-  errorDateFrom?: string
-  errorTimeFrom?: string
-  errorDateTo?: string
-  errorTimeTo?: string
-}>()
-
-const {
-  $isDate,
-  $getUnixByDate,
-  $formattedDate,
-  $formattedTime,
-  $getDateFormat,
-} = useNuxtApp()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const isDisabledCustomForm = computed<boolean>(
-  () => localSelectedTimespanLocal.value !== 'custom_interval'
-)
-const isDisabledCustomFormLast = computed<boolean>(
-  () => isDisabledCustomForm.value || localPeriodTypeLocal.value !== 'last'
-)
-const isDisabledCustomFormRange = computed<boolean>(
-  () => isDisabledCustomForm.value || localPeriodTypeLocal.value !== 'period'
-)
-
-const constructedTimespanOptions = computed<UI_I_Dropdown[]>(() =>
-  props.timespanOptions.map((item) => {
-    return {
-      text: item.text,
-      value: item.value,
-    }
-  })
-)
-
-const constructedCustomTimeOptions = computed<UI_I_Dropdown[]>(() =>
-  props.customTimeOptions.map((item) => {
-    return {
-      text: item.text,
-      value: item.value,
-    }
-  })
-)
-
-const datepickerFormat = computed<string>(() =>
-  getUiDatepickerFormatByLanguage(props.language)
-)
-const dateFormatForUpdate = ref<string>($getDateFormat(props.language))
-const constructedDateFromLocal = computed<number>({
-  get() {
-    // TODO fix PM
-    return $isDate(localCurrentDateFromLocal.value)
-      ? $getUnixByDate(
-          localCurrentDateFromLocal.value + ' ' + currentTimeFromLocal.value
-        )
-      : 0
-  },
-  set(newValue) {
-    localCurrentDateFromLocal.value = $formattedDate(
-      new Date(newValue),
-      dateFormatForUpdate.value
-    )
-    currentTimeFromLocal.value = $formattedTime(newValue, '', true)
-  },
-})
-
-const constructedDateToLocal = computed<number>({
-  get() {
-    // TODO fix PM
-    return $isDate(currentDateToLocal.value)
-      ? $getUnixByDate(
-          currentDateToLocal.value + ' ' + currentTimeToLocal.value
-        )
-      : 0
-  },
-  set(newValue) {
-    currentDateToLocal.value = $formattedDate(
-      new Date(newValue),
-      dateFormatForUpdate.value
-    )
-    currentTimeToLocal.value = $formattedTime(newValue, '', true)
-  },
-})
-</script>
-
-<style>
-:root {
-  --chart-options-timespan-blocks-bg: #ffffff;
-  --chart-options-timespan-blocks-title-color: #4d5d69;
-}
-:root.dark-theme {
-  --chart-options-timespan-blocks-bg: #334453;
-  --chart-options-timespan-blocks-title-color: #e9eaec;
-}
-</style>
-<style scoped lang="scss">
-.timespan-form-container {
-  padding: 12px;
-  background: var(--chart-options-timespan-blocks-bg);
-  box-shadow: 0 1px 4px 0 #00000014;
-  border-radius: 8px;
-
-  .block-title {
-    color: var(--chart-options-timespan-blocks-title-color);
-    font-size: 14px;
-    font-weight: 500;
-    margin-bottom: 16px;
-  }
-  .radio-container {
-    display: flex;
-    flex-direction: column;
-    grid-gap: 12px;
-    margin-top: 16px;
-
-    .ui-radio-block {
-      height: 20px;
-      display: flex;
-    }
-    .row-container {
-      display: grid;
-      grid-template-columns: 1fr 1fr;
-      grid-gap: 12px;
-
-      :deep(.ui-input-with-datepicker) {
-        grid-gap: 12px;
-      }
-    }
-    :deep(.ui-input-with-datepicker) {
-      grid-gap: 12px;
-    }
-  }
-
-  .date-time-info {
-    font-weight: 400;
-    font-size: 12px;
-    color: #9da6ad;
-    margin-top: 16px;
-  }
-}
-</style>
+<template>
+  <div class="timespan-form-container">
+    <p class="block-title">{{ localization.inventoryMonitor.timespan }}</p>
+    <ui-select
+      v-model="localSelectedTimespanLocal"
+      :items="constructedTimespanOptions"
+      test-id="timespan-local"
+      select-width="100%"
+      size="md"
+      :margin-between-trigger="4"
+    />
+
+    <div class="radio-container">
+      <div class="ui-radio-block">
+        <ui-radio
+          v-model="localPeriodTypeLocal"
+          :label="localization.common.last"
+          :disabled="isDisabledCustomForm"
+          test-id="last-from"
+          value="last"
+          size="md"
+        />
+      </div>
+      <div class="row-container">
+        <ui-input
+          v-model="localLastLocal"
+          :disabled="isDisabledCustomFormLast"
+          :placeholder="localization.common.last"
+          :error="props.errorLastInput"
+          test-id="local-last"
+        />
+        <ui-select
+          v-model="localSelectedCustomTimeLocal"
+          :items="constructedCustomTimeOptions"
+          :disabled="isDisabledCustomFormLast"
+          :margin-between-trigger="4"
+          test-id="custom-time"
+          select-width="100%"
+          size="md"
+        />
+      </div>
+    </div>
+    <div class="radio-container">
+      <div class="ui-radio-block">
+        <ui-radio
+          v-model="localPeriodTypeLocal"
+          :label="localization.common.timeRange"
+          :disabled="isDisabledCustomForm"
+          test-id="last-from"
+          value="period"
+          size="md"
+        />
+      </div>
+
+      <ui-input-with-datepicker
+        id="date-from"
+        v-model="constructedDateFromLocal"
+        :format="datepickerFormat"
+        :disabled="isDisabledCustomFormRange"
+        :error="props.errorDateFrom"
+        :error-timepicker="props.errorTimeFrom"
+        test-id="date-from"
+        time-format="12"
+      />
+
+      <ui-input-with-datepicker
+        id="date-to"
+        v-model="constructedDateToLocal"
+        :format="datepickerFormat"
+        :disabled="isDisabledCustomFormRange"
+        :error="props.errorDateTo"
+        :error-timepicker="props.errorTimeTo"
+        test-id="date-to"
+        time-format="12"
+      />
+    </div>
+    <p class="date-time-info">
+      {{ localization.inventoryMonitor.dateTimeIsoFormat }}
+    </p>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Dropdown } from '~/node_modules/bfg-uikit/components/ui/dropdown/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import { getUiDatepickerFormatByLanguage } from '~/lib/utils/date'
+
+const localSelectedTimespanLocal = defineModel<string>(
+  'localSelectedTimespan',
+  { required: true }
+)
+const localPeriodTypeLocal = defineModel<string>('localPeriodType', {
+  required: true,
+})
+const localLastLocal = defineModel<number>('localLast', {
+  required: true,
+})
+const localSelectedCustomTimeLocal = defineModel<string>(
+  'localSelectedCustomTime',
+  {
+    required: true,
+  }
+)
+const localCurrentDateFromLocal = defineModel<string>('localCurrentDateFrom', {
+  required: true,
+})
+const currentTimeFromLocal = defineModel<string>('currentTimeFrom', {
+  required: true,
+})
+const currentTimeToLocal = defineModel<string>('currentTimeTo', {
+  required: true,
+})
+const currentDateToLocal = defineModel<string>('currentDateTo', {
+  required: true,
+})
+
+const props = defineProps<{
+  timespanOptions: UI_I_OptionItem[]
+  customTimeOptions: UI_I_OptionItem[]
+  language: string
+  errorLastInput?: string
+  errorDateFrom?: string
+  errorTimeFrom?: string
+  errorDateTo?: string
+  errorTimeTo?: string
+}>()
+
+const {
+  $isDate,
+  $getUnixByDate,
+  $formattedDate,
+  $formattedTime,
+  $getDateFormat,
+} = useNuxtApp()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isDisabledCustomForm = computed<boolean>(
+  () => localSelectedTimespanLocal.value !== 'custom_interval'
+)
+const isDisabledCustomFormLast = computed<boolean>(
+  () => isDisabledCustomForm.value || localPeriodTypeLocal.value !== 'last'
+)
+const isDisabledCustomFormRange = computed<boolean>(
+  () => isDisabledCustomForm.value || localPeriodTypeLocal.value !== 'period'
+)
+
+const constructedTimespanOptions = computed<UI_I_Dropdown[]>(() =>
+  props.timespanOptions.map((item) => {
+    return {
+      text: item.text,
+      value: item.value,
+    }
+  })
+)
+
+const constructedCustomTimeOptions = computed<UI_I_Dropdown[]>(() =>
+  props.customTimeOptions.map((item) => {
+    return {
+      text: item.text,
+      value: item.value,
+    }
+  })
+)
+
+const datepickerFormat = computed<string>(() =>
+  getUiDatepickerFormatByLanguage(props.language)
+)
+const dateFormatForUpdate = ref<string>($getDateFormat(props.language))
+const constructedDateFromLocal = computed<number>({
+  get() {
+    // TODO fix PM
+    return $isDate(localCurrentDateFromLocal.value)
+      ? $getUnixByDate(
+          localCurrentDateFromLocal.value + ' ' + currentTimeFromLocal.value
+        )
+      : 0
+  },
+  set(newValue) {
+    localCurrentDateFromLocal.value = $formattedDate(
+      new Date(newValue),
+      dateFormatForUpdate.value
+    )
+    currentTimeFromLocal.value = $formattedTime(newValue, '', true)
+  },
+})
+
+const constructedDateToLocal = computed<number>({
+  get() {
+    // TODO fix PM
+    return $isDate(currentDateToLocal.value)
+      ? $getUnixByDate(
+          currentDateToLocal.value + ' ' + currentTimeToLocal.value
+        )
+      : 0
+  },
+  set(newValue) {
+    currentDateToLocal.value = $formattedDate(
+      new Date(newValue),
+      dateFormatForUpdate.value
+    )
+    currentTimeToLocal.value = $formattedTime(newValue, '', true)
+  },
+})
+</script>
+
+<style>
+:root {
+  --chart-options-timespan-blocks-bg: #ffffff;
+  --chart-options-timespan-blocks-title-color: #4d5d69;
+}
+:root.dark-theme {
+  --chart-options-timespan-blocks-bg: #334453;
+  --chart-options-timespan-blocks-title-color: #e9eaec;
+}
+</style>
+<style scoped lang="scss">
+.timespan-form-container {
+  padding: 12px;
+  background: var(--chart-options-timespan-blocks-bg);
+  box-shadow: 0 1px 4px 0 #00000014;
+  border-radius: 8px;
+
+  .block-title {
+    color: var(--chart-options-timespan-blocks-title-color);
+    font-size: 14px;
+    font-weight: 500;
+    margin-bottom: 16px;
+  }
+  .radio-container {
+    display: flex;
+    flex-direction: column;
+    grid-gap: 12px;
+    margin-top: 16px;
+
+    .ui-radio-block {
+      height: 20px;
+      display: flex;
+    }
+    .row-container {
+      display: grid;
+      grid-template-columns: 1fr 1fr;
+      grid-gap: 12px;
+
+      :deep(.ui-input-with-datepicker) {
+        grid-gap: 12px;
+      }
+    }
+    :deep(.ui-input-with-datepicker) {
+      grid-gap: 12px;
+    }
+  }
+
+  .date-time-info {
+    font-weight: 400;
+    font-size: 12px;
+    color: #9da6ad;
+    margin-top: 16px;
+  }
+}
+</style>