bfg-common 1.5.19 → 1.5.21

package/components/common/chartOptionsModal/counters/timespan/form/Form.vue~

@@ -0,0 +1,281 @@
+<template>
+  <common-chart-options-modal-counters-timespan-form-new
+    v-if="isNewView"
+    v-model:local-selected-timespan="localSelectedTimespan"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-last="localLast"
+    v-model:local-selected-custom-time="localSelectedCustomTime"
+    v-model:local-current-date-from="localCurrentDateFrom"
+    v-model:current-time-from="currentTimeFrom"
+    v-model:current-time-to="currentTimeTo"
+    v-model:current-date-to="currentDateTo"
+    :timespan-options="timespanOptions"
+    :custom-time-options="customTimeOptions"
+    :language="props.language"
+    :error-last-input="props.errorLastInput"
+    :error-date-from="props.errorDateFrom"
+    :error-time-from="props.errorTimeFrom"
+    :error-date-to="props.errorDateTo"
+    :error-time-to="props.errorTimeTo"
+  />
+  <common-chart-options-modal-counters-timespan-form-old
+    v-else
+    v-model:local-selected-timespan="localSelectedTimespan"
+    v-model:local-period-type="localPeriodType"
+    v-model:local-last="localLast"
+    v-model:local-selected-custom-time="localSelectedCustomTime"
+    v-model:local-current-date-from="localCurrentDateFrom"
+    v-model:date-from="dateFrom"
+    v-model:current-date-to="currentDateTo"
+    v-model:date-to="dateTo"
+    v-model:current-time-to="currentTimeTo"
+    v-model:chart-type="chartType"
+    :timespan-options="timespanOptions"
+    :period-type-text="periodTypeText"
+    :custom-time-options="customTimeOptions"
+    :language="props.language"
+    :current-time-from="currentTimeFrom"
+    :chart-type-options="chartTypeOptions"
+    @update-date-from="onUpdateDateFrom"
+    @update-date-to="onUpdateDateTo"
+  />
+</template>
+
+<script setup lang="ts">
+import { format } from 'date-fns'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_OptionItem } from '~/components/atoms/lib/models/interfaces'
+import {
+  timespanFunc,
+  customTimeFunc,
+  chartTypeFunc,
+} from '~/components/common/chartOptionsModal/counters/timespan/form/lib/config/dateForm'
+
+const props = defineProps<{
+  language: string
+  selectedChartType: string
+  selectedTimespanType: string
+  unitsCount: number
+  periodType: string
+  selectedCustomTime: string
+  customDateFrom: string
+  customDateTo: string
+  customTimeFrom: string
+  customTimeTo: string
+  validDateEnd: number
+  errorLastInput?: string
+  errorDateFrom?: string
+  errorTimeFrom?: string
+  errorDateTo?: string
+  errorTimeTo?: string
+}>()
+
+const emits = defineEmits<{
+  (event: 'update-chart-type', value: string): void
+  (event: 'update-custom-time', 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-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
+}>()
+
+const { $store, $formattedDate, $isDate, $getTimeFormat, $getUnixByDate }: any =
+  useNuxtApp()
+
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const timespanOptions = computed<UI_I_OptionItem[]>(() =>
+  timespanFunc(localization.value)
+)
+const localSelectedTimespan = ref<string>(
+  props.selectedTimespanType || timespanOptions.value[0].value
+)
+watch(
+  () => props.selectedTimespanType,
+  (newValue) => {
+    localSelectedTimespan.value = newValue || timespanOptions.value[0].value
+  }
+)
+const localPeriodType = ref<string>('last')
+watch(
+  () => props.periodType,
+  (newValue) => {
+    localPeriodType.value = newValue || 'last'
+  },
+  { immediate: true }
+)
+
+watch(
+  localSelectedTimespan,
+  (newValue) => {
+    emits('update-timespan-type', newValue)
+  },
+  { immediate: true }
+)
+
+watch(
+  localPeriodType,
+  (newValue) => {
+    const currentValue = newValue || 'period'
+    emits('update-period-type', currentValue)
+  },
+  { immediate: true }
+)
+
+const localLast = ref<number>(1)
+watch(
+  localLast,
+  (newValue) => {
+    emits('update-unit-count', newValue)
+  },
+  { immediate: true }
+)
+watch(
+  () => props.unitsCount,
+  (newValue) => {
+    localLast.value = newValue > 0 ? newValue : 1
+  },
+  { immediate: true }
+)
+
+const localSelectedCustomTime = ref<string>('hours')
+const customTimeOptions = computed<UI_I_OptionItem[]>(() => {
+  const lang = useLocalStorage('lang')
+
+  return customTimeFunc(localization.value, localLast.value, lang)
+})
+watch(
+  () => props.selectedCustomTime,
+  (newValue) => {
+    localSelectedCustomTime.value = newValue || 'hours'
+  },
+  { immediate: true }
+)
+watch(
+  localSelectedCustomTime,
+  (newValue) => {
+    emits('update-custom-time', newValue)
+  },
+  { immediate: true }
+)
+
+const chartType = ref<string>('line_graph')
+const chartTypeOptions = computed<UI_I_OptionItem[]>(() =>
+  chartTypeFunc(localization.value)
+)
+
+const periodTypeText = computed<string>(() => {
+  let text = ''
+  const lang = useLocalStorage('lang')
+
+  if (lang !== 'ru_RU') text = localization.value.common.last
+  else text = getCorrectRuPeriodTypeText(localLast.value)
+
+  return text
+})
+
+const getCorrectRuPeriodTypeText = (hours: number): string => {
+  let prefix: string
+
+  if (!hours) return getCorrectRuPeriodTypeText.prefix
+
+  if (hours % 10 === 1 && hours % 100 !== 11) prefix = 'Последний'
+  else prefix = 'Последние'
+
+  getCorrectRuPeriodTypeText.prefix = prefix
+  return prefix
+}
+
+const setCurrentChartType = (): void => {
+  const selected = props.selectedChartType
+  let result = 'line_graph'
+
+  if (selected === 'spline') result = 'line_graph'
+  else if (selected === 'area') result = 'stacked_graph'
+
+  chartType.value = result
+}
+
+watch(
+  () => props.selectedChartType,
+  () => {
+    setCurrentChartType()
+  },
+  { immediate: true }
+)
+
+watch(
+  chartType,
+  (newValue) => {
+    let currentValue = 'spline'
+
+    if (newValue === 'line_graph') currentValue = 'spline'
+    else if (newValue === 'stacked_graph') currentValue = 'area'
+
+    emits('update-chart-type', currentValue)
+  },
+  { immediate: true }
+)
+
+const yesterday = new Date().setDate(new Date().getDate() - 1)
+const dateFrom = ref<number>(yesterday)
+const dateTo = ref<number>(new Date().getTime())
+
+const localCurrentDateFrom = ref<string>('')
+const currentDateTo = ref<string>('')
+const currentTimeFrom = ref<string>('')
+const currentTimeTo = ref<string>('')
+
+const getCurrentTime = (): void => {
+  localCurrentDateFrom.value =
+    props.customDateFrom || $formattedDate(yesterday, '')
+  currentDateTo.value =
+    props.customDateTo || $formattedDate(props.validDateEnd, '')
+
+  currentTimeFrom.value =
+    props.customTimeFrom || format(new Date(), $getTimeFormat(true))
+  currentTimeTo.value =
+    props.customTimeTo || format(props.validDateEnd, $getTimeFormat(true))
+}
+
+const onUpdateDateFrom = (value: number): void => {
+  if (!value) return
+
+  localCurrentDateFrom.value = $formattedDate(new Date(value), '')
+}
+watch(localCurrentDateFrom, (newValue) => {
+  emits('update-custom-date-from', newValue)
+  if (!newValue) return
+
+  if ($isDate(newValue)) dateFrom.value = $getUnixByDate(newValue)
+})
+
+const onUpdateDateTo = (value: number): void => {
+  if (!value) return
+
+  currentDateTo.value = $formattedDate(new Date(value), '')
+}
+watch(currentDateTo, (newValue) => {
+  emits('update-custom-date-to', newValue)
+  if (!newValue) return
+
+  if ($isDate(newValue)) dateTo.value = $getUnixByDate(newValue)
+})
+watch(currentTimeFrom, (newValue) => {
+  emits('update-custom-time-from', newValue)
+})
+watch(currentTimeTo, (newValue) => {
+  emits('update-custom-time-to', newValue)
+})
+
+onMounted(() => {
+  getCurrentTime()
+})
+</script>
+
+<style scoped lang="scss"></style>

package/components/common/context/Context.vue

@@ -1,111 +1,111 @@
-<template>
-  <div
-    :id="elementId"
-    class="context-popup"
-    :style="{
-      top: currentContextMenuY,
-      left: currentContextMenuX,
-    }"
-  >
-    <common-context-recursion
-      :action-loading="props.actionLoading"
-      :items="props.contextMenu.items"
-      @select-item="selectItem"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ContextMenuItem,
-  UI_I_ContextMenu,
-} from '~/components/common/context/lib/models/interfaces'
-
-const props = defineProps<{
-  contextMenu: UI_I_ContextMenu
-  actionLoading: string | null
-}>()
-const emits = defineEmits<{
-  (event: 'select-item', value: UI_I_ContextMenuItem): void
-  (event: 'hide'): void
-}>()
-
-const { $store }: any = useNuxtApp()
-const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
-
-const selectItem = (item: UI_I_ContextMenuItem): void => {
-  emits('select-item', item)
-}
-
-const elementId = ref<string>(`context-${useUniqueId()}`)
-
-const currentContextMenuY = ref<string>('')
-const currentContextMenuX = ref<string>('')
-const setCurrentPositionsPopup = (): void => {
-  let contextMenuY = props.contextMenu.y
-  const contextMenuX = props.contextMenu.x
-
-  const contextWrap: HTMLElement | null = document.querySelector(
-    `#${elementId.value} .context-wrap`
-  )
-  const contextW = contextWrap?.offsetWidth || 0
-  const contextH = contextWrap?.offsetHeight || 0
-
-  const windowW = window.innerWidth
-  const windowH = window.innerHeight
-
-  if (contextMenuY + contextH >= windowH) {
-    currentContextMenuY.value = 'auto'
-  } else {
-    if (isNewView.value) contextMenuY += 8
-    currentContextMenuY.value = `${contextMenuY}px`
-  }
-
-  if (contextMenuX + contextW >= windowW) {
-    let divisionW = windowW - contextW
-    if (isNewView.value) divisionW -= 16
-    currentContextMenuX.value = `${divisionW}px`
-  } else {
-    currentContextMenuX.value = `${contextMenuX}px`
-  }
-}
-
-const windowMousedown = (): void => {
-  emits('hide')
-}
-const windowResize = (): void => {
-  emits('hide')
-}
-watch(
-  () => props.contextMenu.y,
-  (newValue: number) => {
-    if (!newValue) return
-
-    if (newValue < 0) {
-      window.removeEventListener('mousedown', windowMousedown)
-      window.removeEventListener('resize', windowResize)
-    } else {
-      window.addEventListener('mousedown', windowMousedown)
-      window.addEventListener('resize', windowResize)
-    }
-
-    setTimeout(() => {
-      setCurrentPositionsPopup()
-    }, 0)
-  }
-)
-</script>
-
-<style scoped lang="scss">
-.context-popup {
-  top: -9999px;
-  left: -9999px;
-  bottom: 0;
-  border: none;
-  box-sizing: content-box;
-  overflow: visible;
-  display: block;
-  position: fixed;
-  z-index: 10002;
-}
-</style>
+<template>
+  <div
+    :id="elementId"
+    class="context-popup"
+    :style="{
+      top: currentContextMenuY,
+      left: currentContextMenuX,
+    }"
+  >
+    <common-context-recursion
+      :action-loading="props.actionLoading"
+      :items="props.contextMenu.items"
+      @select-item="selectItem"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ContextMenuItem,
+  UI_I_ContextMenu,
+} from '~/components/common/context/lib/models/interfaces'
+
+const props = defineProps<{
+  contextMenu: UI_I_ContextMenu
+  actionLoading: string | null
+}>()
+const emits = defineEmits<{
+  (event: 'select-item', value: UI_I_ContextMenuItem): void
+  (event: 'hide'): void
+}>()
+
+const { $store }: any = useNuxtApp()
+const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
+
+const selectItem = (item: UI_I_ContextMenuItem): void => {
+  emits('select-item', item)
+}
+
+const elementId = ref<string>(`context-${useUniqueId()}`)
+
+const currentContextMenuY = ref<string>('')
+const currentContextMenuX = ref<string>('')
+const setCurrentPositionsPopup = (): void => {
+  let contextMenuY = props.contextMenu.y
+  const contextMenuX = props.contextMenu.x
+
+  const contextWrap: HTMLElement | null = document.querySelector(
+    `#${elementId.value} .context-wrap`
+  )
+  const contextW = contextWrap?.offsetWidth || 0
+  const contextH = contextWrap?.offsetHeight || 0
+
+  const windowW = window.innerWidth
+  const windowH = window.innerHeight
+
+  if (contextMenuY + contextH >= windowH) {
+    currentContextMenuY.value = 'auto'
+  } else {
+    if (isNewView.value) contextMenuY += 8
+    currentContextMenuY.value = `${contextMenuY}px`
+  }
+
+  if (contextMenuX + contextW >= windowW) {
+    let divisionW = windowW - contextW
+    if (isNewView.value) divisionW -= 16
+    currentContextMenuX.value = `${divisionW}px`
+  } else {
+    currentContextMenuX.value = `${contextMenuX}px`
+  }
+}
+
+const windowMousedown = (): void => {
+  emits('hide')
+}
+const windowResize = (): void => {
+  emits('hide')
+}
+watch(
+  () => props.contextMenu.y,
+  (newValue: number) => {
+    if (!newValue) return
+
+    if (newValue < 0) {
+      window.removeEventListener('mousedown', windowMousedown)
+      window.removeEventListener('resize', windowResize)
+    } else {
+      window.addEventListener('mousedown', windowMousedown)
+      window.addEventListener('resize', windowResize)
+    }
+
+    setTimeout(() => {
+      setCurrentPositionsPopup()
+    }, 0)
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.context-popup {
+  top: -9999px;
+  left: -9999px;
+  bottom: 0;
+  border: none;
+  box-sizing: content-box;
+  overflow: visible;
+  display: block;
+  position: fixed;
+  z-index: var(--z-popover);
+}
+</style>

package/components/common/context/lib/models/interfaces.ts

@@ -1,31 +1,31 @@
-import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
-
-export interface UI_I_ContextMenuByEvent {
-  event: any
-  node: UI_I_TreeNode
-}
-export interface UI_I_ContextMenu<T = string> {
-  x: number
-  y: number
-  id: string | number
-  type: T
-  titleText: string
-  titleIconClassName: string
-  items: UI_I_ContextMenuItem[]
-}
-export interface UI_I_ContextMenuItem<T = string> {
-  name: string
-  actionType: T | ''
-  iconClassName: string
-  items: UI_I_ContextMenuItem<T>[]
-  shortcut?: string
-  hasBorderTop?: boolean
-  isHeader?: boolean
-  disabled?: boolean
-  development?: boolean
-  isShowItems?: boolean
-  testId?: string
-  style?: {
-    color: string
-  }
-}
+import type { UI_I_TreeNode } from '~/components/common/recursionTree/lib/models/interfaces'
+
+export interface UI_I_ContextMenuByEvent {
+  event: any
+  node: UI_I_TreeNode
+}
+export interface UI_I_ContextMenu<T = string> {
+  x: number
+  y: number
+  id: string | number
+  type: T
+  titleText: string
+  titleIconClassName: string
+  items: UI_I_ContextMenuItem[]
+}
+export interface UI_I_ContextMenuItem<T = string> {
+  name: string
+  actionType: T | ''
+  iconClassName: string
+  items: UI_I_ContextMenuItem<T>[]
+  shortcut?: string
+  hasBorderTop?: boolean
+  isHeader?: boolean
+  disabled?: boolean
+  development?: boolean
+  isShowItems?: boolean
+  testId?: string
+  style?: {
+    color: string
+  }
+}