bfg-common 1.4.858 → 1.4.860

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

@@ -1,241 +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>
+<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/context/recursion/RecursionNew.vue

@@ -215,7 +215,7 @@ const emits = defineEmits<{
       user-select: none;
       cursor: default;
       .context-icon {
-        opacity: 0.5;
+        opacity: 0.4;
       }
       .shortcut {
         color: var(--context-menu-text-disabled-color);

package/components/common/graph/GraphOld.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="graph-content">
+  <div :class="['graph-content', ...hiddenButtons]">
     <template v-if="props.chartOptions">
       <client-only>
         <highchart
@@ -16,6 +16,18 @@
 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">
@@ -24,6 +36,13 @@ const props = defineProps<{
   //height: inherit;
   height: 100%;
 
+  &.hide-new-window {
+    :deep(.highcharts-menu) {
+      .highcharts-menu-item:first-child {
+        display: none;
+      }
+    }
+  }
   .graph-block {
     height: 100%;
   }