bfg-common 1.4.861 → 1.4.862

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

@@ -0,0 +1,241 @@
+<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"
+    />
+
+    <div class="radio-container">
+      <ui-radio
+        v-model="localPeriodTypeLocal"
+        :label="localization.common.last"
+        :disabled="isDisabledCustomForm"
+        test-id="last-from"
+        value="last"
+        size="sm"
+      />
+      <div class="row-container">
+        <ui-input
+          v-model="localLastLocal"
+          :disabled="isDisabledCustomFormLast"
+          test-id="local-last"
+        />
+        <ui-select
+          v-model="localSelectedCustomTimeLocal"
+          :items="constructedCustomTimeOptions"
+          :disabled="isDisabledCustomFormLast"
+          test-id="custom-time"
+          select-width="100%"
+          size="md"
+        />
+      </div>
+    </div>
+    <div class="radio-container">
+      <ui-radio
+        v-model="localPeriodTypeLocal"
+        :label="localization.common.timeRange"
+        :disabled="isDisabledCustomForm"
+        test-id="last-from"
+        value="period"
+        size="sm"
+      />
+
+      <ui-input-with-datepicker
+        id="date-from"
+        v-model="constructedDateFromLocal"
+        :format="datepickerFormat"
+        test-id="date-from"
+        time-format="12"
+        :disabled="isDisabledCustomFormRange"
+      />
+
+      <ui-input-with-datepicker
+        id="date-to"
+        v-model="constructedDateToLocal"
+        :format="datepickerFormat"
+        test-id="date-to"
+        time-format="12"
+        :disabled="isDisabledCustomFormRange"
+      />
+    </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
+}>()
+
+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;
+
+    .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>

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

@@ -0,0 +1,372 @@
+<template>
+  <div class="chart-option-timespan-split">
+    <div class="vertical-flex-container">
+      <div class="timespan-objects-section-direction">
+        <label for="chart-timespan-type-select"
+          >{{ localization.inventoryMonitor.timespan }}:</label
+        >
+        <div class="vertical-flex-container chart-option-timespan-settings">
+          <div class="timespan-select chart-option-setting-row">
+            <div class="view-select-label horizontal-flex-container">
+              <div class="select">
+                <select
+                  id="chart-timespan-type-select"
+                  v-model="localSelectedTimespanLocal"
+                  data-id="chart-timespan-type-select"
+                >
+                  <option
+                    v-for="(item, index) in props.timespanOptions"
+                    :key="index"
+                    :value="item.value"
+                  >
+                    {{ item.text }}
+                  </option>
+                </select>
+              </div>
+            </div>
+          </div>
+          <div
+            :class="[
+              'custom-timespan-settings-container',
+              { active: localSelectedTimespanLocal === 'custom_interval' },
+            ]"
+          >
+            <table>
+              <tbody>
+                <tr>
+                  <td class="relative">
+                    <input
+                      id="custom-time-lastInput"
+                      v-model="localPeriodTypeLocal"
+                      data-id="custom-time-lastInput"
+                      type="radio"
+                      value="last"
+                      class="custom-radio-button"
+                      name="lastFrom"
+                    />
+                    <label
+                      for="custom-time-lastInput"
+                      class="custom-radio-label"
+                    >
+                      {{ props.periodTypeText }}:
+                    </label>
+                  </td>
+                  <td>
+                    <div
+                      :class="[
+                        'custom-timespan-type-last-container',
+                        { active: localPeriodTypeLocal === 'last' },
+                      ]"
+                    >
+                      <input
+                        id="chart-option-setting-row"
+                        v-model="localLastLocal"
+                        data-id="chart-option-setting-row"
+                        type="number"
+                        class="chart-option-setting-row custom-time-input"
+                      />
+                      <div
+                        class="chart-option-setting-row custom-time-input inline-block"
+                      >
+                        <div
+                          class="view-select-label horizontal-flex-container"
+                        >
+                          <div class="select">
+                            <select
+                              id="chart-timespan-type-select"
+                              v-model="localSelectedCustomTimeLocal"
+                              data-id="chart-timespan-type-select"
+                            >
+                              <option
+                                v-for="(item, index) in props.customTimeOptions"
+                                :key="index"
+                                :value="item.value"
+                              >
+                                {{ item.text }}
+                              </option>
+                            </select>
+                          </div>
+                        </div>
+                      </div>
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="relative">
+                    <input
+                      id="custom-time-fromInput"
+                      v-model="localPeriodTypeLocal"
+                      data-id="custom-time-from-input"
+                      type="radio"
+                      value="period"
+                      class="custom-radio-button"
+                      name="lastFrom"
+                    />
+                    <label
+                      for="custom-time-fromInput"
+                      class="custom-radio-label text-capitalize text-right"
+                      >{{ localization.common.from2 }}:
+                    </label>
+                  </td>
+                  <td>
+                    <div
+                      :class="[
+                        'date-container-row disabled-container calendar-date-row',
+                        { active: localPeriodTypeLocal === 'period' },
+                      ]"
+                    >
+                      <input
+                        id="current-date-from"
+                        v-model.lazy="localCurrentDateFromLocal"
+                        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="dateFromLocal"
+                          :lang="props.language"
+                          class="calendar-from calendar-popup btn-show-hide-calendar"
+                          @update="emits('update-date-from', $event)"
+                        />
+                      </div>
+                      <input
+                        id="current-time-from"
+                        v-model="currentTimeFromLocal"
+                        data-id="current-time-from-input"
+                        type="text"
+                        class="chart-option-setting-row custom-time-input"
+                      />
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td class="custom-time-label-text text-right">
+                    {{ localization.common.to2 }}:
+                  </td>
+                  <td>
+                    <div
+                      :class="[
+                        'date-container-row disabled-container calendar-date-row',
+                        { active: localPeriodTypeLocal === 'period' },
+                      ]"
+                    >
+                      <input
+                        id="current-date-to"
+                        v-model.lazy="currentDateToLocal"
+                        data-id="current-date-to-input"
+                        type="text"
+                        class="chart-option-setting-row custom-time-input first-to"
+                      />
+                      <div class="section-datepicker">
+                        <atoms-datepicker
+                          v-model="dateToLocal"
+                          :lang="props.language"
+                          class="calendar-from calendar-popup btn-show-hide-calendar"
+                          @update="emits('update-date-to', $event)"
+                        />
+                      </div>
+                      <input
+                        id="current-time-to"
+                        v-model="currentTimeToLocal"
+                        data-id="current-time-to-input"
+                        type="text"
+                        class="chart-option-setting-row custom-time-input"
+                      />
+                    </div>
+                  </td>
+                </tr>
+                <tr>
+                  <td></td>
+                  <td
+                    :class="[
+                      'disabled-container',
+                      { active: localPeriodTypeLocal === 'period' },
+                    ]"
+                  >
+                    <span>
+                      ({{ localization.inventoryMonitor.isoTimeFormat }})
+                    </span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+      <div class="horizontal-flex-container chart-type-container">
+        <div class="view-select-label horizontal-flex-container">
+          <label for="chart-type-select" class="label-select"
+            >{{ localization.inventoryMonitor.chartType }}:</label
+          >
+          <div class="select">
+            <select
+              id="chart-type-select"
+              v-model="chartTypeLocal"
+              data-id="chart-type-select"
+            >
+              <option
+                v-for="(item, index) in props.chartTypeOptions"
+                :key="index"
+                :value="item.value"
+              >
+                {{ item.text }}
+              </option>
+            </select>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+
+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 dateFromLocal = defineModel<number>('dateFrom', {
+  required: true,
+})
+const currentDateToLocal = defineModel<string>('currentDateTo', {
+  required: true,
+})
+const dateToLocal = defineModel<number>('dateTo', {
+  required: true,
+})
+const currentTimeToLocal = defineModel<string>('currentTimeTo', {
+  required: true,
+})
+const currentTimeFromLocal = defineModel<string>('currentTimeFrom', {
+  required: true,
+})
+const chartTypeLocal = defineModel<string>('chartType', {
+  required: true,
+})
+
+const props = defineProps<{
+  timespanOptions: UI_I_OptionItem[]
+  periodTypeText: string
+  customTimeOptions: UI_I_OptionItem[]
+  language: string
+  chartTypeOptions: UI_I_OptionItem[]
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-date-from', value: number): void
+  (event: 'update-date-to', value: number): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+</script>
+
+<style scoped lang="scss">
+.chart-option-timespan-split {
+  overflow-x: auto;
+  padding: 5px;
+
+  .timespan-objects-section-direction {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+
+    .chart-option-timespan-settings {
+      margin-left: 15px;
+
+      .chart-option-setting-row {
+        width: 150px;
+        margin-bottom: 5px;
+      }
+
+      .custom-radio-button {
+        position: absolute;
+        opacity: 0;
+
+        &:checked + .custom-radio-label:before {
+          box-shadow: inset 0 0 0 6px #0079b8;
+          border: none;
+        }
+      }
+      .custom-radio-label {
+        display: block;
+        position: relative;
+        min-height: 19.2px;
+        padding-left: 23px;
+        cursor: pointer;
+        line-height: 19.2px;
+        //color: #454545;
+
+        &:before {
+          position: absolute;
+          top: 3px;
+          left: 0;
+          content: '';
+          display: inline-block;
+          height: 16px;
+          width: 16px;
+          border: 0.8px solid #565656;
+          border-radius: 50%;
+        }
+      }
+
+      .calendar-date-row {
+        display: flex;
+        align-items: center;
+
+        .custom-time-input.first-from,
+        .custom-time-input.first-to {
+          max-width: 114px;
+        }
+        .btn-show-hide-calendar {
+          margin: 0 9px;
+          cursor: pointer;
+        }
+      }
+
+      .custom-time-input {
+        margin-left: 8px;
+        margin-right: 8px;
+        max-width: 140px;
+      }
+    }
+
+    .custom-timespan-settings-container:not(.active),
+    .custom-timespan-type-last-container:not(.active),
+    .disabled-container:not(.active) {
+      opacity: 0.6;
+      pointer-events: none;
+    }
+  }
+
+  .chart-type-container {
+    margin-top: 15px;
+
+    .horizontal-flex-container {
+      display: flex;
+      flex-direction: row;
+
+      .select {
+        margin-left: 15px;
+      }
+    }
+  }
+}
+</style>

package/components/common/graph/GraphOld.vue

@@ -1,31 +1,50 @@
-<template>
-  <div class="graph-content">
-    <template v-if="props.chartOptions">
-      <client-only>
-        <highchart
-          :options="props.chartOptions"
-          :modules="['exporting', 'export-data']"
-          class="graph-block"
-        />
-      </client-only>
-    </template>
-  </div>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  chartOptions: any
-}>()
-</script>
-
-<style scoped lang="scss">
-.graph-content {
-  width: 100%;
-  //height: inherit;
-  height: 100%;
-
-  .graph-block {
-    height: 100%;
-  }
-}
-</style>
+<template>
+  <div :class="['graph-content', ...hiddenButtons]">
+    <template v-if="props.chartOptions">
+      <client-only>
+        <highchart
+          :options="props.chartOptions"
+          :modules="['exporting', 'export-data']"
+          class="graph-block"
+        />
+      </client-only>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  chartOptions: any
+}>()
+
+const hiddenButtons = computed<string[]>(() => {
+  const result = []
+  const chartOptions = props.chartOptions
+  if (chartOptions) {
+    const { openNewWindow } = chartOptions.exporting.menuItemDefinitions || {}
+
+    if (openNewWindow.isHide) result.push('hide-new-window')
+  }
+
+  return result
+})
+</script>
+
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  &.hide-new-window {
+    :deep(.highcharts-menu) {
+      .highcharts-menu-item:first-child {
+        display: none;
+      }
+    }
+  }
+  .graph-block {
+    height: 100%;
+  }
+}
+</style>