bfg-common 1.4.730 → 1.4.732

package/components/common/modals/confirmByInput/ConfirmByInput.vue

@@ -1,206 +1,206 @@
-<template>
-  <atoms-modal
-    show
-    :test-id="`${props.testId}-modal`"
-    :width="props.width"
-    class="confirm-by-input"
-    :title="props.title"
-    :second-title="props.subTitle"
-    :loading="props.loading"
-    is-hide-close-icon
-    @submit="onConfirm"
-  >
-    <template #modalBody>
-      <div class="confirm-by-input__body">
-        <atoms-the-icon
-          name="exclamation-triangle"
-          class="confirm-by-input__icon"
-        />
-
-        <div>
-          <slot name="content"></slot>
-
-          <div class="form-group">
-            <label class="no-selection" for="confirmation">{{
-              confirmationText
-            }}</label>
-            <div class="form-group__input">
-              <input
-                id="confirmation"
-                v-model="confirmationForm"
-                data-id="confirmation-input"
-                type="text"
-                autocomplete="off"
-                @keyup.enter="onConfirm"
-              />
-              <div v-show="!isValid && confirmationForm" class="form-validate">
-                <atoms-tooltip :test-id="`${props.testId}-tooltip`">
-                  <template #elem>
-                    <atoms-the-icon
-                      class="is-error tooltip-trigger"
-                      name="info"
-                      width="28px"
-                      height="28px"
-                    />
-                  </template>
-                  <template #content>
-                    {{ confirmDeletionInputError }}
-                  </template>
-                </atoms-tooltip>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-    <template #modalFooter>
-      <button
-        id="confirm-by-input-modal-close-button"
-        :data-id="`${props.testId}-modal-close-button`"
-        class="btn btn-outline"
-        @click="onHide"
-      >
-        {{ localization.common.no }}
-      </button>
-      <button
-        id="confirm-by-input-modal-apply-button"
-        :data-id="`${props.testId}-modal-apply-button`"
-        class="btn btn-primary"
-        :class="props.loading && 'modal-dialog__loader'"
-        :disabled="!isValid || props.loading"
-        @click="onConfirm"
-      >
-        <atoms-loader-pre-loader
-          v-if="props.loading"
-          id="loader"
-          :show="props.loading"
-          class="button__loading"
-          :test-id="`${props.testId}-spinner`"
-        />
-        <span v-else>
-          {{ localization.common.yes }}
-        </span>
-      </button>
-    </template>
-  </atoms-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const props = defineProps<{
-  title: string
-  subTitle: string
-  testId: string
-  width: string
-  loading?: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'confirm'): void
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const confirmationForm = ref<string>('')
-const isValid = computed<boolean>(() => {
-  return confirmationForm.value === props.subTitle
-})
-
-const confirmationText = localization.value.common.confirmDeletionInput.replace(
-    '{title}',
-    props.subTitle
-)
-const confirmDeletionInputError =
-  localization.value.common.confirmDeletionInputError.replace(
-    '{title}',
-    props.subTitle
-  )
-
-const onConfirm = async (): Promise<void> => {
-  if (!isValid.value) return
-
-  emits('confirm')
-}
-
-const onHide = (): void => {
-  emits('hide')
-}
-</script>
-
-<style lang="scss" scoped>
-@import 'assets/scss/common/mixins.scss';
-.confirm-by-input {
-  :deep(.modal-header) {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-start;
-
-    .modal-title {
-      color: var(--main-color-mode);
-      font-size: 24px;
-      max-width: 65%;
-    }
-    .secondary-title {
-      color: var(--modal-secondary-title);
-      font-size: 0.75rem;
-      font-weight: lighter;
-      user-select: none;
-    }
-    .separator {
-      content: '';
-      border-left: 1px solid #ccc;
-      margin: 0 18px;
-      height: 22px;
-    }
-
-    .close-icon {
-      fill: var(--close-icon);
-      width: 24px;
-      height: 24px;
-    }
-  }
-
-  &__body {
-    @include flex($align: flex-start);
-
-    .form-group {
-      margin-top: 20px;
-
-      label {
-        font-weight: bold;
-        font-size: 0.6rem;
-        user-select: none;
-      }
-
-      &:not(:first-child) input {
-        width: 100%;
-      }
-      &__input {
-        display: flex;
-        width: 100%;
-        min-height: 30px;
-      }
-    }
-  }
-
-  &__icon {
-    min-width: 48px;
-    height: 48px;
-    margin-right: 20px;
-    fill: #c27b00;
-  }
-
-  .button {
-    &__loading {
-      :deep(.spinner) {
-        width: 25px;
-        height: 25px;
-        min-width: 25px;
-        min-height: 25px;
-        margin-top: 5px;
-      }
-    }
-  }
-}
-</style>
+<template>
+  <atoms-modal
+    show
+    :test-id="`${props.testId}-modal`"
+    :width="props.width"
+    class="confirm-by-input"
+    :title="props.title"
+    :second-title="props.subTitle"
+    :loading="props.loading"
+    is-hide-close-icon
+    @submit="onConfirm"
+  >
+    <template #modalBody>
+      <div class="confirm-by-input__body">
+        <atoms-the-icon
+          name="exclamation-triangle"
+          class="confirm-by-input__icon"
+        />
+
+        <div>
+          <slot name="content"></slot>
+
+          <div class="form-group">
+            <label class="no-selection" for="confirmation">{{
+              confirmationText
+            }}</label>
+            <div class="form-group__input">
+              <input
+                id="confirmation"
+                v-model="confirmationForm"
+                data-id="confirmation-input"
+                type="text"
+                autocomplete="off"
+                @keyup.enter="onConfirm"
+              />
+              <div v-show="!isValid && confirmationForm" class="form-validate">
+                <atoms-tooltip :test-id="`${props.testId}-tooltip`">
+                  <template #elem>
+                    <atoms-the-icon
+                      class="is-error tooltip-trigger"
+                      name="info"
+                      width="28px"
+                      height="28px"
+                    />
+                  </template>
+                  <template #content>
+                    {{ confirmDeletionInputError }}
+                  </template>
+                </atoms-tooltip>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template #modalFooter>
+      <button
+        id="confirm-by-input-modal-close-button"
+        :data-id="`${props.testId}-modal-close-button`"
+        class="btn btn-outline"
+        @click="onHide"
+      >
+        {{ localization.common.no }}
+      </button>
+      <button
+        id="confirm-by-input-modal-apply-button"
+        :data-id="`${props.testId}-modal-apply-button`"
+        class="btn btn-primary"
+        :class="props.loading && 'modal-dialog__loader'"
+        :disabled="!isValid || props.loading"
+        @click="onConfirm"
+      >
+        <atoms-loader-pre-loader
+          v-if="props.loading"
+          id="loader"
+          :show="props.loading"
+          class="button__loading"
+          :test-id="`${props.testId}-spinner`"
+        />
+        <span v-else>
+          {{ localization.common.yes }}
+        </span>
+      </button>
+    </template>
+  </atoms-modal>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const props = defineProps<{
+  title: string
+  subTitle: string
+  testId: string
+  width: string
+  loading?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'confirm'): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const confirmationForm = ref<string>('')
+const isValid = computed<boolean>(() => {
+  return confirmationForm.value === props.subTitle
+})
+
+const confirmationText = localization.value.common.confirmDeletionInput.replace(
+    '{title}',
+    props.subTitle
+)
+const confirmDeletionInputError =
+  localization.value.common.confirmDeletionInputError.replace(
+    '{title}',
+    props.subTitle
+  )
+
+const onConfirm = async (): Promise<void> => {
+  if (!isValid.value) return
+
+  emits('confirm')
+}
+
+const onHide = (): void => {
+  emits('hide')
+}
+</script>
+
+<style lang="scss" scoped>
+@import 'assets/scss/common/mixins.scss';
+.confirm-by-input {
+  :deep(.modal-header) {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-start;
+
+    .modal-title {
+      color: var(--main-color-mode);
+      font-size: 24px;
+      max-width: 65%;
+    }
+    .secondary-title {
+      color: var(--modal-secondary-title);
+      font-size: 0.75rem;
+      font-weight: lighter;
+      user-select: none;
+    }
+    .separator {
+      content: '';
+      border-left: 1px solid #ccc;
+      margin: 0 18px;
+      height: 22px;
+    }
+
+    .close-icon {
+      fill: var(--close-icon);
+      width: 24px;
+      height: 24px;
+    }
+  }
+
+  &__body {
+    @include flex($align: flex-start);
+
+    .form-group {
+      margin-top: 20px;
+
+      label {
+        font-weight: bold;
+        font-size: 0.6rem;
+        user-select: none;
+      }
+
+      &:not(:first-child) input {
+        width: 100%;
+      }
+      &__input {
+        display: flex;
+        width: 100%;
+        min-height: 30px;
+      }
+    }
+  }
+
+  &__icon {
+    min-width: 48px;
+    height: 48px;
+    margin-right: 20px;
+    fill: #c27b00;
+  }
+
+  .button {
+    &__loading {
+      :deep(.spinner) {
+        width: 25px;
+        height: 25px;
+        min-width: 25px;
+        min-height: 25px;
+        margin-top: 5px;
+      }
+    }
+  }
+}
+</style>

package/components/common/modals/unsavedChanges/UnsavedChanges.vue

@@ -1,56 +1,56 @@
-<template>
-  <div class="absolute">
-    <common-modals-confirmation
-      v-if="show"
-      is-new-view
-      :headline="localization.common.unsavedChanges"
-      :description="localization.common.unsavedChangesDescription"
-      :modal-texts="modalTexts"
-      @hide-modal="onHide"
-      @confirm="onLeave"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-
-const emits = defineEmits<{
-  (event: 'leave'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const modalTexts = ref<UI_I_ModalTexts>({
-  resetToDefault: '',
-  button1: localization.value.common.cancel,
-  button2: localization.value.common.leave,
-})
-
-const show = defineModel<boolean>('show', { required: true })
-
-const onHide = (): void => {
-  show.value = false
-}
-const onLeave = (): void => {
-  emits('leave')
-}
-</script>
-
-<style>
-:root {
-  --unsaved-changes-modal-bg-color: var(--modal-bg);
-}
-:root.dark-theme {
-  --unsaved-changes-modal-bg-color: #334453;
-}
-</style>
-<style scoped lang="scss">
-:deep(.ui-popup_content) {
-  background-color: var(--unsaved-changes-modal-bg-color);
-}
-:deep(.ui-popup_footer-transparent-block) {
-  display: none;
-}
-</style>
+<template>
+  <div class="absolute">
+    <common-modals-confirmation
+      v-if="show"
+      is-new-view
+      :headline="localization.common.unsavedChanges"
+      :description="localization.common.unsavedChangesDescription"
+      :modal-texts="modalTexts"
+      @hide-modal="onHide"
+      @confirm="onLeave"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_ModalTexts } from 'bfg-uikit/components/ui/modal/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const emits = defineEmits<{
+  (event: 'leave'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalTexts = ref<UI_I_ModalTexts>({
+  resetToDefault: '',
+  button1: localization.value.common.cancel,
+  button2: localization.value.common.leave,
+})
+
+const show = defineModel<boolean>('show', { required: true })
+
+const onHide = (): void => {
+  show.value = false
+}
+const onLeave = (): void => {
+  emits('leave')
+}
+</script>
+
+<style>
+:root {
+  --unsaved-changes-modal-bg-color: var(--modal-bg);
+}
+:root.dark-theme {
+  --unsaved-changes-modal-bg-color: #334453;
+}
+</style>
+<style scoped lang="scss">
+:deep(.ui-popup_content) {
+  background-color: var(--unsaved-changes-modal-bg-color);
+}
+:deep(.ui-popup_footer-transparent-block) {
+  display: none;
+}
+</style>

package/components/common/monitor/advanced/Advanced.vue

@@ -15,6 +15,7 @@
             v-model:selected-timespan-type="localSelectedTimespanType"
             :type="props.type"
             :start-date="props.data?.pointStart || 0"
+            :end-date="props.data?.pointEnd || 0"
             :chart-title="props.data?.groupName || ''"
             :language="props.language"
             :selected-counters-keys="props.selectedCountersKeys"
@@ -37,6 +38,8 @@
             :project="props.project"
             :objects-loading="props.objectsLoading"
             :objects-data="props.objectsData"
+            :valid-date-end="props.validDateEnd"
+            :format-date="props.formatDate"
             @update-tools="emits('update-tools', $event)"
             @exporting="onExporting"
             @open-advanced-page="onGetEmptyPage"
@@ -130,6 +133,8 @@ const props = defineProps<{
   project: UI_T_Project
   objectsLoading: boolean
   objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  formatDate: string
   disabledPeriod?: boolean
   disabledView?: boolean
   isEmpty?: boolean

package/components/common/monitor/advanced/tools/Tools.vue

@@ -114,6 +114,8 @@
     :project="props.project"
     :objects-loading="props.objectsLoading"
     :objects-data="props.objectsData"
+    :valid-date-end="props.validDateEnd"
+    :format-date="props.formatDate"
     @hide="isShowModal = false"
     @select-row="emits('select-row', $event)"
     @select-metric-local="emits('select-metric-local', $event)"
@@ -154,6 +156,7 @@ import { checkDateFunc } from '~/components/common/monitor/overview/filters/cust
 const props = defineProps<{
   type: UI_T_AdvancedType
   startDate: number
+  endDate: number
   chartTitle: string
   language: string
   selectedCountersKeys: number[]
@@ -175,6 +178,8 @@ const props = defineProps<{
   project: UI_T_Project
   objectsLoading: boolean
   objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  formatDate: string
   disabledPeriod?: boolean
   disabledView?: boolean
 }>()
@@ -278,7 +283,9 @@ const updateTools = (): void => {
       props.customDateFrom,
       props.customDateTo,
       props.customTimeFrom,
-      props.customTimeTo
+      props.customTimeTo,
+      props.validDateEnd,
+      props.formatDate
     )
     if (Array.isArray(checkDateResult)) {
       period[0] = Math.round(checkDateResult[0] / 1000)
@@ -310,7 +317,7 @@ const chartTitleDate = computed<string>(() => {
   if (!props.startDate) return ''
 
   const start = $formattedDatetime(props.startDate, '', true)
-  const end = $formattedDatetime(new Date(), '', true)
+  const end = $formattedDatetime(props.endDate, '', true)
   return `${start} - ${end}`
 })
 

package/components/common/monitor/advanced/tools/chartOptionsModal/ChartOptionsModal.vue

@@ -50,6 +50,7 @@
               :selected-objects="props.selectedObjects"
               :objects-loading="props.objectsLoading"
               :objects-data="props.objectsData"
+              :valid-date-end="props.validDateEnd"
               @select-row="selectedRows = $event"
               @update-chart-type="selectedChartTypeLocal = $event"
               @update-custom-time="localCustomTime = $event"
@@ -109,6 +110,8 @@ const props = defineProps<{
   project: UI_T_Project
   objectsLoading: boolean
   objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
+  formatDate: string
 }>()
 
 const emits = defineEmits<{
@@ -232,7 +235,9 @@ const checkValidations = (): boolean => {
     localCustomDateFrom.value,
     localCustomDateTo.value,
     localCustomTimeFrom.value,
-    localCustomTimeTo.value
+    localCustomTimeTo.value,
+    props.validDateEnd,
+    props.formatDate
   )
 
   if (isDisabledSubmit.value) {
@@ -315,7 +320,9 @@ const onSubmit = (): void => {
       localCustomDateFrom.value,
       localCustomDateTo.value,
       localCustomTimeFrom.value,
-      localCustomTimeTo.value
+      localCustomTimeTo.value,
+      props.validDateEnd,
+      props.formatDate
     )
     if (Array.isArray(checkDateResult)) {
       validPeriod[0] = Math.round(checkDateResult[0] / 1000)

package/components/common/monitor/advanced/tools/chartOptionsModal/counters/Counters.vue

@@ -28,6 +28,7 @@
       :selected-objects="props.selectedObjects"
       :objects-loading="props.objectsLoading"
       :objects-data="props.objectsData"
+      :valid-date-end="props.validDateEnd"
       @update-chart-type="emits('update-chart-type', $event)"
       @update-custom-time="emits('update-custom-time', $event)"
       @update-timespan-type="emits('update-timespan-type', $event)"
@@ -71,6 +72,7 @@ const props = defineProps<{
   selectedObjects: string
   objectsLoading: boolean
   objectsData: UI_I_ObjectItem[]
+  validDateEnd: number
 }>()
 
 const emits = defineEmits<{