bfg-common 1.4.884 → 1.4.901

package/components/common/browse/blocks/contents/filesNew/FilesNew.vue

@@ -1,96 +1,96 @@
-<template>
-  <common-browse-blocks-contents-files-new-skeleton v-if="props.browseLoading" />
-
-  <ul
-    v-else-if="props.selectedFolderFiles.length"
-    class="file-view__container"
-  >
-    <template v-for="file in props.selectedFolderFiles" :key="file.name">
-      <li
-        :data-id="file.testId"
-        :class="[
-          'file-view',
-          { active: file.name === props.selectedFile?.name },
-        ]"
-        @click="onSelectFile(file)"
-      >
-        <span class="file-view__icon" :class="file.iconClassName"></span>
-        <span class="file-view__text">{{ file.name }}</span>
-      </li>
-    </template>
-  </ul>
-
-  <div v-else class="not-found-wrap">
-    <ui-not-found :text="localization.common.noItemsFound" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  selectedFolderFiles: any[]
-  selectedFile: any
-  browseLoading: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-file', file: any): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const onSelectFile = (file: any): void => {
-  emits('select-file', file)
-}
-</script>
-
-<style scoped lang="scss">
-.file-view__container {
-  list-style-position: inside;
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-
-  .file-view {
-    display: flex;
-    align-items: center;
-    padding: 4px 8px;
-    cursor: pointer;
-    border-radius: 4px;
-    height: 26px;
-    margin-bottom: 2px;
-    color: var(--select-file-text-color);
-
-    &:hover {
-      background-color: var(--select-file-hover-bg);
-    }
-    &.active {
-      background-color: var(--select-file-selected-bg);
-      color: var(--select-file-selected-text-color);
-    }
-    span {
-      font-size: 12px;
-      font-weight: 400;
-      line-height: 14.52px;
-
-      overflow: hidden;
-      white-space: nowrap;
-      text-overflow: ellipsis;
-    }
-    span:first-of-type {
-      width: 16px;
-      height: 16px;
-      margin-right: 8px;
-    }
-  }
-}
-.not-found-wrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-}
-</style>
+<template>
+  <common-browse-blocks-contents-files-new-skeleton v-if="props.browseLoading" />
+
+  <ul
+    v-else-if="props.selectedFolderFiles.length"
+    class="file-view__container"
+  >
+    <template v-for="file in props.selectedFolderFiles" :key="file.name">
+      <li
+        :data-id="file.testId"
+        :class="[
+          'file-view',
+          { active: file.name === props.selectedFile?.name },
+        ]"
+        @click="onSelectFile(file)"
+      >
+        <span class="file-view__icon" :class="file.iconClassName"></span>
+        <span class="file-view__text">{{ file.name }}</span>
+      </li>
+    </template>
+  </ul>
+
+  <div v-else class="not-found-wrap">
+    <ui-not-found :text="localization.common.noItemsFound" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  selectedFolderFiles: any[]
+  selectedFile: any
+  browseLoading: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-file', file: any): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const onSelectFile = (file: any): void => {
+  emits('select-file', file)
+}
+</script>
+
+<style scoped lang="scss">
+.file-view__container {
+  list-style-position: inside;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+
+  .file-view {
+    display: flex;
+    align-items: center;
+    padding: 4px 8px;
+    cursor: pointer;
+    border-radius: 4px;
+    height: 26px;
+    margin-bottom: 2px;
+    color: var(--select-file-text-color);
+
+    &:hover {
+      background-color: var(--select-file-hover-bg);
+    }
+    &.active {
+      background-color: var(--select-file-selected-bg);
+      color: var(--select-file-selected-text-color);
+    }
+    span {
+      font-size: 12px;
+      font-weight: 400;
+      line-height: 14.52px;
+
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+    span:first-of-type {
+      width: 16px;
+      height: 16px;
+      margin-right: 8px;
+    }
+  }
+}
+.not-found-wrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+}
+</style>

package/components/common/browse/blocks/contents/filesNew/Skeleton.vue

@@ -1,18 +1,18 @@
-<template>
-  <div class="skeleton-wrap">
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-    <ui-skeleton-item height="18px" />
-  </div>
-</template>
-
-<script setup lang="ts"></script>
-
-<style scoped lang="scss">
-.skeleton-wrap {
-  display: grid;
-  grid-gap: 12px;
-}
-</style>
+<template>
+  <div class="skeleton-wrap">
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+    <ui-skeleton-item height="18px" />
+  </div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="scss">
+.skeleton-wrap {
+  display: grid;
+  grid-gap: 12px;
+}
+</style>

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

@@ -1,43 +1,38 @@
 <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"
+    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"
   />
   <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"
+    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>
 
@@ -63,11 +58,6 @@ const props = defineProps<{
   customTimeFrom: string
   customTimeTo: string
   validDateEnd: number
-  errorLastInput?: string
-  errorDateFrom?: string
-  errorTimeFrom?: string
-  errorDateTo?: string
-  errorTimeTo?: string
 }>()
 
 const emits = defineEmits<{
@@ -83,64 +73,64 @@ const emits = defineEmits<{
 }>()
 
 const { $store, $formattedDate, $isDate, $getTimeFormat, $getUnixByDate }: any =
-    useNuxtApp()
+  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)
+  timespanFunc(localization.value)
 )
 const localSelectedTimespan = ref<string>(
-    props.selectedTimespanType || timespanOptions.value[0].value
+  props.selectedTimespanType || timespanOptions.value[0].value
 )
 watch(
-    () => props.selectedTimespanType,
-    (newValue) => {
-      localSelectedTimespan.value = newValue || timespanOptions.value[0].value
-    }
+  () => 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 }
+  () => props.periodType,
+  (newValue) => {
+    localPeriodType.value = newValue || 'last'
+  },
+  { immediate: true }
 )
 
 watch(
-    localSelectedTimespan,
-    (newValue) => {
-      emits('update-timespan-type', newValue)
-    },
-    { immediate: true }
+  localSelectedTimespan,
+  (newValue) => {
+    emits('update-timespan-type', newValue)
+  },
+  { immediate: true }
 )
 
 watch(
-    localPeriodType,
-    (newValue) => {
-      const currentValue = newValue || 'period'
-      emits('update-period-type', currentValue)
-    },
-    { immediate: true }
+  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 }
+  localLast,
+  (newValue) => {
+    emits('update-unit-count', newValue)
+  },
+  { immediate: true }
 )
 watch(
-    () => props.unitsCount,
-    (newValue) => {
-      localLast.value = newValue > 0 ? newValue : 1
-    },
-    { immediate: true }
+  () => props.unitsCount,
+  (newValue) => {
+    localLast.value = newValue > 0 ? newValue : 1
+  },
+  { immediate: true }
 )
 
 const localSelectedCustomTime = ref<string>('hours')
@@ -150,23 +140,23 @@ const customTimeOptions = computed<UI_I_OptionItem[]>(() => {
   return customTimeFunc(localization.value, localLast.value, lang)
 })
 watch(
-    () => props.selectedCustomTime,
-    (newValue) => {
-      localSelectedCustomTime.value = newValue || 'hours'
-    },
-    { immediate: true }
+  () => props.selectedCustomTime,
+  (newValue) => {
+    localSelectedCustomTime.value = newValue || 'hours'
+  },
+  { immediate: true }
 )
 watch(
-    localSelectedCustomTime,
-    (newValue) => {
-      emits('update-custom-time', newValue)
-    },
-    { immediate: true }
+  localSelectedCustomTime,
+  (newValue) => {
+    emits('update-custom-time', newValue)
+  },
+  { immediate: true }
 )
 
 const chartType = ref<string>('line_graph')
 const chartTypeOptions = computed<UI_I_OptionItem[]>(() =>
-    chartTypeFunc(localization.value)
+  chartTypeFunc(localization.value)
 )
 
 const periodTypeText = computed<string>(() => {
@@ -202,24 +192,24 @@ const setCurrentChartType = (): void => {
 }
 
 watch(
-    () => props.selectedChartType,
-    () => {
-      setCurrentChartType()
-    },
-    { immediate: true }
+  () => props.selectedChartType,
+  () => {
+    setCurrentChartType()
+  },
+  { immediate: true }
 )
 
 watch(
-    chartType,
-    (newValue) => {
-      let currentValue = 'spline'
+  chartType,
+  (newValue) => {
+    let currentValue = 'spline'
 
-      if (newValue === 'line_graph') currentValue = 'spline'
-      else if (newValue === 'stacked_graph') currentValue = 'area'
+    if (newValue === 'line_graph') currentValue = 'spline'
+    else if (newValue === 'stacked_graph') currentValue = 'area'
 
-      emits('update-chart-type', currentValue)
-    },
-    { immediate: true }
+    emits('update-chart-type', currentValue)
+  },
+  { immediate: true }
 )
 
 const yesterday = new Date().setDate(new Date().getDate() - 1)
@@ -233,14 +223,14 @@ const currentTimeTo = ref<string>('')
 
 const getCurrentTime = (): void => {
   localCurrentDateFrom.value =
-      props.customDateFrom || $formattedDate(yesterday, '')
+    props.customDateFrom || $formattedDate(yesterday, '')
   currentDateTo.value =
-      props.customDateTo || $formattedDate(props.validDateEnd, '')
+    props.customDateTo || $formattedDate(props.validDateEnd, '')
 
   currentTimeFrom.value =
-      props.customTimeFrom || format(new Date(), $getTimeFormat(true))
+    props.customTimeFrom || format(new Date(), $getTimeFormat(true))
   currentTimeTo.value =
-      props.customTimeTo || format(props.validDateEnd, $getTimeFormat(true))
+    props.customTimeTo || format(props.validDateEnd, $getTimeFormat(true))
 }
 
 const onUpdateDateFrom = (value: number): void => {

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

@@ -7,26 +7,21 @@
       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>
+      <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"
-          :placeholder="localization.common.last"
-          :error="props.errorLastInput"
           test-id="local-last"
         />
         <ui-select
@@ -36,42 +31,35 @@
           test-id="custom-time"
           select-width="100%"
           size="md"
-          :margin-between-trigger="4"
         />
       </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-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"
-        :disabled="isDisabledCustomFormRange"
-        :error="props.errorDateFrom"
-        :error-timepicker="props.errorTimeFrom"
         test-id="date-from"
         time-format="12"
+        :disabled="isDisabledCustomFormRange"
       />
 
       <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"
+        :disabled="isDisabledCustomFormRange"
       />
     </div>
     <p class="date-time-info">
@@ -119,11 +107,6 @@ const props = defineProps<{
   timespanOptions: UI_I_OptionItem[]
   customTimeOptions: UI_I_OptionItem[]
   language: string
-  errorLastInput?: string
-  errorDateFrom?: string
-  errorTimeFrom?: string
-  errorDateTo?: string
-  errorTimeTo?: string
 }>()
 
 const {
@@ -234,10 +217,6 @@ const constructedDateToLocal = computed<number>({
     grid-gap: 12px;
     margin-top: 16px;
 
-    .ui-radio-block {
-      height: 20px;
-      display: flex;
-    }
     .row-container {
       display: grid;
       grid-template-columns: 1fr 1fr;