bfg-common 1.4.882 → 1.4.884

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,38 +1,43 @@
 <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"
+      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"
+      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>
 
@@ -58,6 +63,11 @@ const props = defineProps<{
   customTimeFrom: string
   customTimeTo: string
   validDateEnd: number
+  errorLastInput?: string
+  errorDateFrom?: string
+  errorTimeFrom?: string
+  errorDateTo?: string
+  errorTimeTo?: string
 }>()
 
 const emits = defineEmits<{
@@ -73,64 +83,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')
@@ -140,23 +150,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>(() => {
@@ -192,24 +202,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)
@@ -223,14 +233,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,21 +7,26 @@
       test-id="timespan-local"
       select-width="100%"
       size="md"
+      :margin-between-trigger="4"
     />
 
     <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="ui-radio-block">
+        <ui-radio
+          v-model="localPeriodTypeLocal"
+          :label="localization.common.last"
+          :disabled="isDisabledCustomForm"
+          test-id="last-from"
+          value="last"
+          size="md"
+        />
+      </div>
       <div class="row-container">
         <ui-input
           v-model="localLastLocal"
           :disabled="isDisabledCustomFormLast"
+          :placeholder="localization.common.last"
+          :error="props.errorLastInput"
           test-id="local-last"
         />
         <ui-select
@@ -31,35 +36,42 @@
           test-id="custom-time"
           select-width="100%"
           size="md"
+          :margin-between-trigger="4"
         />
       </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"
-      />
+      <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-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">
@@ -107,6 +119,11 @@ const props = defineProps<{
   timespanOptions: UI_I_OptionItem[]
   customTimeOptions: UI_I_OptionItem[]
   language: string
+  errorLastInput?: string
+  errorDateFrom?: string
+  errorTimeFrom?: string
+  errorDateTo?: string
+  errorTimeTo?: string
 }>()
 
 const {
@@ -217,6 +234,10 @@ 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;