bfg-common 1.4.9 → 1.4.10

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -1,469 +0,0 @@
-<template>
-  <div class="chart-options-modal">
-    <atoms-modal
-      width="1150px"
-      :show="true"
-      :title="localization.common.chartOptions"
-      :disabled-submit="isDisabledSubmit"
-      @hide="onHide"
-      @submit="onSubmit"
-    >
-      <template #modalBody>
-        <common-monitor-advanced-tools-chart-options-modal-notification
-          v-show="isShowAlerts"
-          :alerts="alerts"
-          @remove="onRemoveAlerts"
-        />
-        <div>
-          <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions
-            :is-disabled-save="!currentSelectedRows.length"
-            :options-names="optionsNames"
-            :selected-chart-option-name="localSelectedChartOptionName"
-            @save="onSaveOptions"
-            @check-validation="checkValidations"
-            @select-local-option-name="onSelectLocalOptionName"
-            @delete-chart-name="onDeleteChartName"
-          />
-
-          <div class="horizontal-flex-container chart-options-content">
-            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-metrics
-              v-model:selected-metric="selectedMetric"
-              :metrics-items="metricsItems"
-            />
-            <common-pages-hardware-health-history-testimony-tools-chart-options-modal-counters
-              :chart="selectedMetric"
-              :selected-power-keys="localSelectedPowerCountersKeys"
-              :selected-temperature-keys="localSelectedTemperatureCountersKeys"
-              :power-counters-table-data="props.powerCountersTableData"
-              :temperature-counters-table-data="
-                props.temperatureCountersTableData
-              "
-              :language="props.language"
-              :selected-chart-type="localSelectedChartType"
-              :selected-timespan-type="localSelectedTimespanType"
-              :units-count="localUnitsCount"
-              :period-type="localPeriodType"
-              :selected-custom-time="localCustomTime"
-              :custom-date-from="props.customDateFrom"
-              :custom-date-to="props.customDateTo"
-              :custom-time-from="props.customTimeFrom"
-              :custom-time-to="props.customTimeTo"
-              @select-power-row="onSelectPowerRow"
-              @select-temperature-row="onSelectTemperatureRow"
-              @update-chart-type="selectedChartTypeLocal = $event"
-              @update-custom-time="localCustomTime = $event"
-              @update-timespan-type="timespanType = $event"
-              @update-unit-count="unitCount = $event"
-              @update-period-type="localPeriodType = $event"
-              @update-custom-date-from="onUpdateCustomDateFrom"
-              @update-custom-date-to="onUpdateCustomDateTo"
-              @update-custom-time-from="onUpdateCustomTimeFrom"
-              @update-custom-time-to="onUpdateCustomTimeTo"
-            />
-          </div>
-        </div>
-      </template>
-    </atoms-modal>
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_VerticalTabs } from '~/components/atoms/tabs/lib/models/interfaces'
-import type { UI_T_Chart } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/types'
-import type { UI_I_OptionsForm } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/models/interfaces'
-import type { UI_I_HardwareHealthSensorsGraph } from '~/components/common/pages/hardwareHealth/historyTestimony/lib/models/interfaces'
-import { metricsFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/lib/config/optionsMetrics'
-import { checkDateFunc } from '~/components/common/monitor/overview/filters/customIntervalModal/lib/config/dateChecker'
-import { getValidDateByOptionFunc } from '~/components/common/monitor/lib/config/getValidDateByOption'
-import { getCurrentOptionsStorageFunc } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/lib/config/toolbar'
-
-const props = defineProps<{
-  selectedChartOptionName: string
-  selectedMetric: UI_T_Chart
-  selectedPowerCountersKeys: number[]
-  powerSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
-  selectedTemperatureCountersKeys: number[]
-  temperatureSelectedRowsLocal: UI_I_HardwareHealthSensorsGraph[]
-  unitsCount: number
-  powerCountersTableData: UI_I_HardwareHealthSensorsGraph[]
-  temperatureCountersTableData: UI_I_HardwareHealthSensorsGraph[]
-  language: string
-  selectedTimespanType: string
-  customDateFrom: string
-  customDateTo: string
-  customTimeFrom: string
-  customTimeTo: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'select-metric-local', value: string): void
-  (
-    event: 'power-selected-rows-local',
-    value: UI_I_HardwareHealthSensorsGraph[]
-  ): void
-  (
-    event: 'temperature-selected-rows-local',
-    value: UI_I_HardwareHealthSensorsGraph[]
-  ): void
-  (event: 'update-chart-type', value: string): void
-  (event: 'update-timespan-type', value: string): void
-  (event: 'update-unit-count', value: number): void
-  (event: 'update-period-type', value: string): void
-  (event: 'update-custom-time', value: string): void
-  (event: 'delete-option'): void
-  (event: 'save-option-name'): void
-  (event: 'update-custom-date-from', value: string): void
-  (event: 'update-custom-date-to', value: string): void
-  (event: 'update-custom-time-from', value: string): void
-  (event: 'update-custom-time-to', value: string): void
-  (event: 'submit-options', value: UI_I_OptionsForm): void
-}>()
-
-const routeType = '' + useRoute().params.type
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const localCustomDateFrom = ref<string>('')
-const onUpdateCustomDateFrom = (value: string): void => {
-  localCustomDateFrom.value = value
-}
-const localCustomDateTo = ref<string>('')
-const onUpdateCustomDateTo = (value: string): void => {
-  localCustomDateTo.value = value
-}
-const localCustomTimeFrom = ref<string>('')
-const onUpdateCustomTimeFrom = (value: string): void => {
-  localCustomTimeFrom.value = value
-}
-const localCustomTimeTo = ref<string>('')
-const onUpdateCustomTimeTo = (value: string): void => {
-  localCustomTimeTo.value = value
-}
-
-const metricsItems = computed<UI_I_VerticalTabs[]>(() =>
-  metricsFunc(localization.value)
-)
-const selectedMetric = ref<UI_T_Chart>(
-  props.selectedMetric || '' + metricsItems.value[0]?.value
-)
-
-const localSelectedPowerCountersKeys = ref<number[]>([])
-watch(
-  () => props.selectedPowerCountersKeys,
-  (newValue) => {
-    localSelectedPowerCountersKeys.value = newValue
-  },
-  { immediate: true, deep: true }
-)
-
-const localSelectedTemperatureCountersKeys = ref<number[]>([])
-watch(
-  () => props.selectedTemperatureCountersKeys,
-  (newValue) => {
-    localSelectedTemperatureCountersKeys.value = newValue
-  },
-  { immediate: true, deep: true }
-)
-
-const localSelectedChartType = ref<string>('')
-
-const localSelectedTimespanType = ref<string>('')
-watch(
-  () => props.selectedTimespanType,
-  (newValue) => {
-    localSelectedTimespanType.value = newValue
-  },
-  { immediate: true }
-)
-
-const localUnitsCount = ref<number>(0)
-watch(
-  () => props.unitsCount,
-  (newValue) => {
-    localUnitsCount.value = newValue
-  },
-  { immediate: true }
-)
-
-const localPeriodType = ref<string>('')
-watch(
-  () => props.periodType,
-  (newValue) => {
-    localPeriodType.value = newValue
-  },
-  { immediate: true }
-)
-
-const localCustomTime = ref<string>('')
-
-const isShowAlerts = ref<boolean>(false)
-const alerts = ref<string[]>([])
-
-const onRemoveAlerts = (): void => {
-  isShowAlerts.value = false
-  alerts.value = []
-}
-
-const onHide = (): void => {
-  emits('hide')
-}
-
-const onSelectPowerRow = (data: UI_I_HardwareHealthSensorsGraph[]): void => {
-  emits('power-selected-rows-local', data)
-}
-const onSelectTemperatureRow = (
-  data: UI_I_HardwareHealthSensorsGraph[]
-): void => {
-  emits('temperature-selected-rows-local', data)
-}
-
-const currentSelectedRows = computed<UI_I_HardwareHealthSensorsGraph[]>(() => {
-  let result: UI_I_HardwareHealthSensorsGraph[] = []
-
-  switch (selectedMetric.value) {
-    case 'power':
-      result = props.powerSelectedRowsLocal
-      break
-    case 'temperature':
-      result = props.temperatureSelectedRowsLocal
-      break
-  }
-
-  return result
-})
-
-const selectedChartTypeLocal = ref<string>('')
-
-const checkValidations = (): boolean => {
-  const checkDateResult = checkDateFunc(
-    localization.value,
-    localCustomDateFrom.value,
-    localCustomDateTo.value,
-    localCustomTimeFrom.value,
-    localCustomTimeTo.value
-  )
-
-  if (isDisabledSubmit.value) {
-    alerts.value = [localization.value.noCountersSelected]
-    isShowAlerts.value = true
-    return false
-  } else if (
-    timespanType.value === 'custom_interval' &&
-    localPeriodType.value === 'period' &&
-    checkDateResult !== '' &&
-    typeof checkDateResult === 'string'
-  ) {
-    alerts.value = [checkDateResult]
-    isShowAlerts.value = true
-    return false
-  }
-
-  return true
-}
-
-const localSelectedChartOptionName = ref<string>('')
-watch(
-  () => props.selectedChartOptionName,
-  (newValue) => {
-    localSelectedChartOptionName.value = newValue
-  },
-  { immediate: true }
-)
-
-const selectedLocalOptionName = ref<string>('')
-
-const currentFieldsByArray = (
-  data: UI_I_HardwareHealthSensorsGraph[]
-): string => {
-  const result: string[] = []
-  data.forEach((item) => {
-    result.push(item.nameEn)
-  })
-  return result.join('>>')
-}
-
-const onSubmit = (): void => {
-  if (!checkValidations()) return
-
-  if (['select_options', 'default'].includes(selectedLocalOptionName.value))
-    selectedLocalOptionName.value = 'custom'
-
-  onSaveOptions(selectedLocalOptionName.value)
-
-  const currentFields = currentFieldsByArray(currentSelectedRows.value)
-
-  const validPeriod = getValidDateByOptionFunc(
-    timespanType.value,
-    null,
-    unitCount.value,
-    localCustomTime.value
-  )
-
-  const savedObject = {
-    fields: currentFields,
-    optionName: selectedLocalOptionName.value,
-    metric: selectedMetric.value,
-    periodName: timespanType.value,
-    periodType: localPeriodType.value,
-    unitCount: unitCount.value,
-    localTimespanType: localCustomTime.value,
-    dateFrom: localCustomDateFrom.value,
-    timeFrom: localCustomTimeFrom.value,
-    dateTo: localCustomDateTo.value,
-    timeTo: localCustomTimeTo.value,
-    chartType: selectedChartTypeLocal.value,
-    period: validPeriod,
-  }
-
-  emits('submit-options', savedObject)
-  onHide()
-}
-
-const timespanType = ref<string>('')
-const unitCount = ref<number>(1)
-
-const optionsNames = ref<string[]>([])
-
-const onSaveOptions = (name: string): void => {
-  const counters = currentSelectedRows.value.map((item) => {
-    return {
-      id: item.id,
-      name: item.nameEn,
-    }
-  })
-  let chartType = 'line_graph'
-  if (selectedChartTypeLocal.value === 'spline') chartType = 'line_graph'
-  else if (selectedChartTypeLocal.value === 'area') chartType = 'stacked_graph'
-
-  const saveOptionsData = {
-    routeType,
-    chartType,
-    counters,
-    metric: selectedMetric.value,
-    timespan: {
-      periodType: localPeriodType.value,
-      units: localCustomTime.value,
-      unitsCount: unitCount.value,
-      type: timespanType.value,
-    },
-  }
-  useLocalStorage(`${name}ChartOptionsSensors`, saveOptionsData)
-  optionsNames.value = getCurrentOptionsStorageFunc()
-  localSelectedChartOptionName.value = name
-  emits('save-option-name')
-}
-
-const setSelectOptions = (): void => {
-  selectedMetric.value = props.selectedMetric || metricsItems.value[0]?.value
-}
-
-const setDefaultOptions = (): void => {
-  selectedMetric.value = metricsItems.value[0]?.value
-  localSelectedPowerCountersKeys.value = []
-  localSelectedTemperatureCountersKeys.value = []
-  localSelectedChartType.value = 'spline'
-  localSelectedTimespanType.value = ''
-  localUnitsCount.value = 0
-  localPeriodType.value = ''
-  localCustomTime.value = ''
-}
-
-const setCustomOptions = (name: string): void => {
-  const selectedValue = useLocalStorage(name + 'ChartOptionsSensors', undefined)
-
-  if (selectedValue.routeType !== routeType) return
-
-  let currentChartType = ''
-  if (selectedValue.chartType === 'line_graph') currentChartType = 'spline'
-  else if (selectedValue.chartType === 'stacked_graph')
-    currentChartType = 'area'
-
-  selectedMetric.value = selectedValue.metric
-  if (selectedMetric.value === 'power')
-    localSelectedPowerCountersKeys.value = selectedValue.counters.map(
-      (item) => item.id
-    )
-  if (selectedMetric.value === 'temperature')
-    localSelectedTemperatureCountersKeys.value = selectedValue.counters.map(
-      (item) => item.id
-    )
-  localSelectedChartType.value = currentChartType
-  localSelectedTimespanType.value = selectedValue.timespan.type
-  localUnitsCount.value = selectedValue.timespan.unitsCount
-  localPeriodType.value = selectedValue.timespan.periodType
-  localCustomTime.value = selectedValue.timespan.units
-}
-
-const onSelectLocalOptionName = (name: string): void => {
-  selectedLocalOptionName.value = name
-
-  if (optionsNames.value.includes(name)) setCustomOptions(name)
-  else if (name === 'default') setDefaultOptions()
-  else if (name === 'select_options') setSelectOptions()
-}
-
-watch(
-  localSelectedChartOptionName,
-  (newValue) => {
-    if (!newValue) return
-
-    setCustomOptions(newValue)
-  },
-  { immediate: true }
-)
-
-const onDeleteChartName = (name: string): void => {
-  window.localStorage.removeItem(name + 'ChartOptionsSensors')
-  optionsNames.value = getCurrentOptionsStorageFunc()
-  setSelectOptions()
-  emits('delete-option')
-}
-
-const isDisabledSubmit = computed<boolean>(
-  () => !currentSelectedRows.value.length
-)
-
-watch(
-  selectedMetric,
-  (newValue) => {
-    emits('select-metric-local', newValue)
-  },
-  { immediate: true }
-)
-
-onMounted(() => {
-  optionsNames.value = getCurrentOptionsStorageFunc(routeType)
-})
-</script>
-
-<style scoped lang="scss">
-.chart-options-modal {
-  .loader-on :deep(.modal-body) {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-  }
-  :deep(.modal-title) {
-    text-transform: capitalize;
-  }
-
-  #loader {
-    min-height: 90px;
-    text-align: center;
-  }
-
-  .chart-options-content {
-    display: flex;
-    flex-direction: row;
-    flex-basis: 90%;
-    overflow-y: hidden;
-  }
-}
-@media (max-width: 1024px) {
-  .chart-options-content {
-    flex-direction: column !important;
-  }
-}
-</style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/Notification.vue

@@ -1,30 +0,0 @@
-<template>
-  <atoms-alert
-    v-show="props.alerts.length"
-    status="alert-danger"
-    :items="props.alerts"
-    class="notification"
-    test-id="notification-alert"
-    @remove="emits('remove')"
-  >
-    <template #default="{ item }">
-      <div class="flex-space-between flex-1">
-        <div class="flex-align-center">
-          <span>{{ item }}</span>
-        </div>
-      </div>
-    </template>
-  </atoms-alert>
-</template>
-
-<script setup lang="ts">
-const props = defineProps<{
-  alerts: string[]
-}>()
-
-const emits = defineEmits<{
-  (event: 'remove'): void
-}>()
-</script>
-
-<style scoped lang="scss"></style>

package/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/actions/Actions.vue

@@ -1,157 +0,0 @@
-<template>
-  <div class="horizontal-flex-container">
-    <div class="horizontal-flex-container">
-      <label for="chartOptionsSelect" class="label-select"
-        >{{ localization.common.chartOptions }}:</label
-      >
-      <div class="select">
-        <select
-          id="chartOptionsSelect"
-          v-model="localSelectedChartOption"
-          data-id="chart-options-select"
-        >
-          <option
-            v-for="item in chartOptions"
-            :key="item.value"
-            :value="item.value"
-          >
-            {{ item.text }}
-          </option>
-        </select>
-      </div>
-    </div>
-    <div>
-      <button
-        class="btn chart-options-save-button"
-        data-id="chart-options-save-button"
-        @click="onShowSaveOptionsModal"
-      >
-        {{ localization.common.saveOptionsAs }}...
-      </button>
-      <common-pages-hardware-health-history-testimony-tools-chart-options-modal-actions-save-options-modal
-        v-if="isShowSaveOptionsModal"
-        @hide="onHideSaveOptionsModal"
-        @save="onSaveOptions"
-      />
-      <button
-        class="btn chart-options-delete-button"
-        :disabled="!disabledDeleteAction"
-        data-id="chart-options-delete-button"
-        @click="onDeleteAction"
-      >
-        {{ localization.common.deleteOptions }}
-      </button>
-    </div>
-  </div>
-
-  <common-modals-confirmation
-    v-if="isConfirmModal"
-    headline="localization.common.deletingSavedSettings"
-    :description="confirmModalDesc"
-    @hide-modal="isConfirmModal = false"
-    @confirm="onApplyDelete"
-  />
-</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'
-import { chartOptionItems } from '~/components/common/pages/hardwareHealth/historyTestimony/tools/chartOptionsModal/actions/lib/utils/optionsActions'
-
-const props = defineProps<{
-  isDisabledSave: boolean
-  optionsNames: string[]
-  selectedChartOptionName: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'save', value: string): void
-  (event: 'check-validation'): void
-  (event: 'select-local-option-name', value: string): void
-  (event: 'delete-chart-name', value: string): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const localSelectedChartOption = ref<string>('select_options')
-const disabledDeleteAction = computed<boolean>(() => {
-  const chartOptionName = localSelectedChartOption.value
-  let result = false
-
-  if (chartOptionName !== 'select_options' && chartOptionName !== 'default')
-    result = true
-
-  return result
-})
-const chartOptions = computed<UI_I_OptionItem[]>(() =>
-  chartOptionItems(localization.value, props.optionsNames)
-)
-watch(
-  () => props.selectedChartOptionName,
-  (newValue) => {
-    localSelectedChartOption.value =
-      newValue || localSelectedChartOption.value || 'select_options'
-  },
-  { immediate: true }
-)
-watch(
-  localSelectedChartOption,
-  (newValue) => {
-    emits('select-local-option-name', newValue)
-  },
-  { immediate: true }
-)
-
-const isShowSaveOptionsModal = ref<boolean>(false)
-const onShowSaveOptionsModal = (): void => {
-  if (!props.isDisabledSave) isShowSaveOptionsModal.value = true
-
-  emits('check-validation')
-}
-const onHideSaveOptionsModal = (): boolean =>
-  (isShowSaveOptionsModal.value = false)
-const onSaveOptions = (name: string): void => {
-  onHideSaveOptionsModal()
-  emits('save', name)
-}
-
-const isConfirmModal = ref<boolean>(false)
-const confirmModalDesc = ref<string>('')
-
-const onDeleteAction = (): void => {
-  confirmModalDesc.value =
-    localization.value.common.deletingSavedSettingsDesc.replace(
-      '{0}',
-      localSelectedChartOption.value
-    )
-  isConfirmModal.value = true
-}
-
-const onApplyDelete = (): void => {
-  isConfirmModal.value = false
-  emits('delete-chart-name', localSelectedChartOption.value)
-  localSelectedChartOption.value = 'select_options'
-}
-</script>
-
-<style scoped lang="scss">
-.horizontal-flex-container {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-
-  .chart-options-save-button,
-  .chart-options-delete-button {
-    border: none;
-    background: unset;
-    margin: 0;
-    font-size: 11px;
-    color: var(--action-icon-color);
-    box-shadow: unset;
-  }
-
-  .chart-options-delete-button {
-    text-transform: uppercase;
-  }
-}
-</style>