bfg-common 1.4.331 → 1.4.333

package/assets/localization/local_be.json

@@ -2763,5 +2763,8 @@
     "noSelectedSession": "Калі ласка, не забудзьцеся выбраць сеанс, каб праглядзець яго дэталі.",
     "endTime": "Час заканчэння",
     "channels": "Каналы ({0})"
+  },
+  "vmWizard": {
+    "devices": "Прылады ({0})"
   }
 }

package/assets/localization/local_en.json

@@ -2767,5 +2767,8 @@
     "noSelectedSession": "Please make sure to select a session to view its details.",
     "endTime": "End time",
     "channels": "Channels ({0})"
+  },
+  "vmWizard": {
+    "devices": "Devices ({0})"
   }
 }

package/assets/localization/local_hy.json

@@ -2767,5 +2767,8 @@
     "noSelectedSession": "Խնդրում ենք համոզվեք, որ ընտրել եք նիստ՝ դրա մանրամասները դիտելու համար:",
     "endTime": "Ավարտի ժամանակը",
     "channels": "Ալիքներ ({0})"
+  },
+  "vmWizard": {
+    "devices": "Սարքեր ({0})"
   }
 }

package/assets/localization/local_kk.json

@@ -2766,5 +2766,8 @@
     "noSelectedSession": "Мәліметтерін көру үшін сеансты таңдағаныңызға көз жеткізіңіз.",
     "endTime": "Аяқталу уақыты",
     "channels": "Арналар ({0})"
+  },
+  "vmWizard": {
+    "devices": "Құрылғылар ({0})"
   }
 }

package/assets/localization/local_ru.json

@@ -2769,5 +2769,8 @@
     "noSelectedSession": "Обязательно выберите сеанс, чтобы просмотреть его подробности.",
     "endTime": "Время окончания",
     "channels": "Каналы ({0})"
+  },
+  "vmWizard": {
+    "devices": "Устройства ({0})"
   }
 }

package/assets/localization/local_zh.json

@@ -2765,5 +2765,8 @@
     "noSelectedSession": "请确保选择一个会话以查看其详细信息。",
     "endTime": "结束时间",
     "channels": "频道 ({0})"
+  },
+  "vmWizard": {
+    "devices": "设备 ({0})"
   }
 }

package/components/common/layout/theHeader/feedback/Feedback.vue

@@ -1,11 +1,11 @@
 <template>
   <common-layout-the-header-feedback-new
-    v-if="isNewView"
+    v-if="props.isShowFeedback && isNewView"
     @hide="onHide"
     @submit="onSubmit"
   />
   <common-layout-the-header-feedback-old
-    v-else
+    v-if="!isNewView"
     :is-show-feedback="props.isShowFeedback"
     :title="localization.common.sendFeedback"
     @show="emits('show')"

package/components/common/layout/theHeader/feedback/new/New.vue

@@ -0,0 +1,79 @@
+<template>
+  <Teleport to="body">
+    <ui-modal
+      show
+      width="560px"
+      test-id="feedback-modal"
+      :title="localization.common.sendFeedback"
+      :texts="texts"
+      class="feedback"
+      @submit="onSubmit"
+      @hide="onHideModal"
+    >
+      <template #content>
+        <ui-modal-block-standard>
+          <common-layout-the-header-feedback-new-subtitle />
+
+          <common-layout-the-header-feedback-new-tabs
+            v-model="selectedTab"
+            class="metrics-tabs"
+          />
+
+          <common-layout-the-header-feedback-new-description
+            v-model="form.description"
+          />
+
+          <common-layout-the-header-feedback-new-email v-model="form.email" />
+        </ui-modal-block-standard>
+      </template>
+
+      <template #footerLeftContent><span /></template>
+    </ui-modal>
+  </Teleport>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+// import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
+
+// const props = defineProps<{
+//   title: string
+// }>()
+// console.log(props)
+const emits = defineEmits<{
+  (event: 'hide'): void
+  // (event: 'submit', value: UI_I_FeedbackForm): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const form = ref({
+  description: '',
+  email: '',
+})
+const selectedTab = ref<any>('memory')
+
+const texts = {
+  button1: localization.value.common.send,
+}
+
+const onHideModal = (): void => {
+  emits('hide')
+}
+const onSubmit = (): void => {}
+</script>
+
+<style lang="scss">
+:root {
+  --description-color: #414b57;
+  --link-visited-color: #5659b8;
+}
+
+:root.dark-theme {
+  --description-color: #adbbc4;
+  --link-visited-color: #49afd9;
+}
+
+.feedback {
+}
+</style>

package/components/common/layout/theHeader/feedback/new/description/Description.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="description">
+    <h4 class="description__title">{{ localization.common.description }}</h4>
+
+    <ui-textarea
+      v-model="descriptionModelLocal"
+      test-id="feedback-description"
+      :disabled="!selectedTab"
+      :placeholder="descriptionTextPlaceholder"
+      :error="descriptionErrorText"
+    >
+    </ui-textarea>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+
+const props = defineProps<{
+  selectedTab: UI_T_FeedbackTab
+}>()
+const descriptionModelLocal = defineModel<string>({ required: true })
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const descriptionTextPlaceholder = computed<string>(() => {
+  if (props.selectedTab === 'warning-outline')
+    return localization.value.common.whatIsTheProblemHowCan
+  if (props.selectedTab === 'heart-outline')
+    return localization.value.common.tellUsWhatYouEnjoyedSo
+  return localization.value.common.selectFeedbackType
+})
+
+const descriptionErrorText = computed<boolean>(() => {
+  return !descriptionModelLocal.value
+    ? localization.value.common.fieldRequired
+    : ''
+})
+</script>
+
+<style lang="scss" scoped>
+.description {
+  margin-top: 32px;
+  &__title {
+    line-height: 38px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #4d5d69;
+  }
+  :deep(.ui-main-textarea) {
+    resize: none;
+    height: 68px;
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/new/email/Email.vue

@@ -0,0 +1,33 @@
+<template>
+  <div class="email">
+    <h4 class="email__title">{{ localization.common.emailAddress }}</h4>
+
+    <ui-input
+      v-model="emailModelLocal"
+      type="text"
+      placeholder="placeholder"
+      test-id="feedback-email"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emailModelLocal = defineModel<string>({ required: true })
+</script>
+
+<style scoped lang="scss">
+.email {
+  margin-top: 32px;
+  &__title {
+    line-height: 38px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #4d5d69;
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/{FeedbackNew/description/Description.vue → new/subtitle/Subtitle.vue}

@@ -1,6 +1,6 @@
 <template>
-  <div class="description">
-    <span class="description-label text-ellipsis">
+  <div class="subtitle">
+    <span class="subtitle__label">
       {{ localization.common.helpUsImprove }}
     </span>
     <ui-icon
@@ -21,7 +21,7 @@
         <div class="headline justify-between flex-align-center">
           <div class="flex-align-center">
             <ui-icon-icon3 name="info-2" width="16px" height="16px" />
-            <span class="title">Feedback Help</span>
+            <span class="title">{{ localization.common.feedbackHelp }}</span>
           </div>
           <ui-icon
             name="close"
@@ -33,7 +33,7 @@
         </div>
 
         <div class="common-widget-info-description">
-          {{ infoDescription }}
+          {{ localization.common.anyFeedbackYouProvideMay }}
         </div>
       </div>
     </ui-popup-window>
@@ -46,8 +46,38 @@ import type { UI_I_Localization } from '~/lib/models/interfaces'
 const localization = computed<UI_I_Localization>(() => useLocal())
 
 const isShowInfo = ref<boolean>(false)
-
-const infoDescription = ref('')
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.subtitle {
+  display: flex;
+  justify-content: space-between;
+  border-bottom: 1px solid #e9ebed;
+  padding-bottom: 12px;
+
+  &__label {
+    font-size: 12px;
+    font-weight: 400;
+    line-height: 14.52px;
+    color: #9da6ad;
+  }
+  .common-widget-info {
+    padding: 16px;
+
+    .title {
+      font-size: 14px;
+      font-weight: 500;
+      line-height: 16.94px;
+      color: var(--zabbix-text-color);
+      margin-left: 8px;
+    }
+
+    .common-widget-info-description {
+      font-size: 13px;
+      line-height: 15.73px;
+      color: var(--zabbix-text-color);
+      margin-top: 12px;
+    }
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/new/tabs/Tabs.vue

@@ -0,0 +1,79 @@
+<template>
+  <div class="tabs">
+    <h4 class="tabs__title">{{ localization.common.selectType }}</h4>
+
+    <div class="tabs__container">
+      <ui-block
+        v-for="item in tabs"
+        :key="item.iconName"
+        :class="{ selected: item.isSelected }"
+        @click="selectedTab = item.iconName"
+      >
+        <div class="main-info">
+          <ui-icon :name="item.iconName" width="18" height="18" />
+          <span class="main-info-label">{{ item.label }}</span>
+        </div>
+      </ui-block>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+// import type { I_Metric } from '~/components/layout/new/tabs/lib/models/interfaces'
+import { tabsFunc } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const selectedTab = defineModel<T_FeedbackTab>({ required: true })
+const tabs = computed<any[]>(() =>
+  tabsFunc(localization.value, selectedTab.value)
+)
+</script>
+
+<style scoped lang="scss">
+.tabs {
+  margin-top: 16px;
+  &__title {
+    line-height: 38px;
+    margin-bottom: 16px;
+    font-size: 16px;
+    font-weight: 500;
+    color: #4d5d69;
+  }
+  &__container {
+    display: flex;
+    gap: 12px;
+  }
+
+  :deep(.block) {
+    width: max-content;
+    padding: 10px 12px;
+    color: #4d5d69;
+    cursor: pointer;
+  }
+  :deep(.block.selected) {
+    border: 1.5px solid #008fd6;
+    color: #008fd6;
+    cursor: default;
+
+    .main-info,
+    .main-info-label {
+      color: #008fd6;
+    }
+  }
+
+  .main-info {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+
+    &-label {
+      font-size: 16px;
+      font-weight: 500;
+      line-height: 19.36px;
+    }
+  }
+}
+</style>

package/components/common/layout/theHeader/feedback/new/tabs/lib/config/tabs.ts

@@ -0,0 +1,25 @@
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+
+export const tabsFunc = (
+  localization: UI_I_Localization,
+  selectedTab: T_FeedbackTab
+): any[] => {
+  return [
+    {
+      iconName: 'warning-outline',
+      label: localization.common.problem,
+      isSelected: selectedTab === 'warning-outline',
+    },
+    {
+      iconName: 'heart-outline',
+      label: localization.common.complement,
+      isSelected: selectedTab === 'heart-outline',
+    },
+    {
+      iconName: 'light-bulb',
+      label: localization.common.idea,
+      isSelected: selectedTab === 'light-bulb',
+    },
+  ]
+}

package/components/common/layout/theHeader/feedback/new/tabs/lib/models/interfaces.ts

@@ -0,0 +1,17 @@
+import type {
+  T_MetricTab
+} from '~/components/common/pages/integration/zabbix/content/hosts/details/metrics/lib/models/types'
+
+export interface I_Metric {
+  iconName: T_MetricTab
+  label: string
+  isSelected: boolean
+  on: {
+    label: string
+    color: '#239332' | '#BDC3C7'
+  }
+  off: {
+    label: string
+    color: '#EA3223' | '#BDC3C7'
+  }
+}

package/components/common/layout/theHeader/feedback/new/tabs/lib/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_FeedbackTab = 'warning-outline' | 'heart-outline' | 'light-bulb'

package/components/common/pages/scheduledTasks/modals/common/frequency/on/On.vue

@@ -63,13 +63,19 @@
         <common-select-input
           v-model="model.frq_ordinal_number"
           :data="frequencyOnOrdinalNumber"
-          :class="['radio__select', !isDisabledMonthlyDayField && 'disabled']"
+          :class="[
+            'radio__select ordinary-day',
+            !isDisabledMonthlyDayField && 'disabled',
+          ]"
         />
 
         <common-select-input
           v-model="model.frq_week_day"
           :data="frequencyOnWeeksDays"
-          :class="['radio__select', !isDisabledMonthlyDayField && 'disabled']"
+          :class="[
+            'radio__select week-days',
+            !isDisabledMonthlyDayField && 'disabled',
+          ]"
         />
       </div>
     </div>
@@ -191,6 +197,18 @@ const setDefaultDateTime = () => {
   &__select {
     width: 100%;
     margin-top: 10px;
+    :deep(.select-input__inner) {
+      max-width: 100% !important;
+    }
+    &.ordinary-day :deep(select) {
+      min-width: 80px;
+    }
+    &.week-days {
+      margin-left: 15px;
+      :deep(select) {
+        min-width: 110px;
+      }
+    }
     select {
       width: 80px;
     }

package/components/common/pages/scheduledTasks/modals/common/newTaskForm/lib/utils.ts

@@ -25,7 +25,7 @@ export const generateWeeklyCronExpression = (
   const daysOfWeek = frg_on_week_days.join(',')
 
   return endTimestamp
-    ? `* * * * ${daysOfWeek} ${startTimestamp}-${endTimestamp}:0-0-0-${data.frg_interval}`
+    ? `* * * * ${daysOfWeek} ${startTimestamp}-${endTimestamp}:0-0-${data.frg_interval}-0`
     : `* * * * ${daysOfWeek} ${startTimestamp}:0-0-0-${data.frg_interval}`
 }
 
@@ -54,7 +54,7 @@ export const generateMonthlyCronExpression = (
   )
   const endTimestamp = Math.floor(new Date(data.frg_end_time).getTime() / 1000)
 
-  const daysOfWeek = `${frq_week_day}#${frq_ordinal_number}`
+  const ordinaryDaysOfMonth = `${frg_interval}#${frq_ordinal_number}`
 
   const timestamp = endTimestamp
     ? `${startTimestamp}-${endTimestamp}`
@@ -62,6 +62,6 @@ export const generateMonthlyCronExpression = (
 
   // Генерируем cron-выражение
   return data.frg_monthly_mode === 'week'
-    ? `* * * * * ${timestamp}:0-0-${frg_interval}-${daysOfWeek}`
-    : `* * ${frg_monthly_day} */${frg_interval} * ${timestamp}:0-0-0-0`
+    ? `* * * * ${frq_week_day} ${timestamp}:0-0-0-${ordinaryDaysOfMonth}`
+    : `* * ${frg_monthly_day} * * ${timestamp}:0-0-0-${frg_interval}`
 }

package/lib/models/interfaces.ts

@@ -37,6 +37,7 @@ export interface UI_I_Localization {
   events: UI_I_ArbitraryObject<string>
   zabbix: UI_I_ArbitraryObject<string>
   remoteConsole: UI_I_ArbitraryObject<string>
+  vmWizard: UI_I_ArbitraryObject<string>
 }
 export interface UI_I_SendTaskParams {
   method: string

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.331",
+  "version": "1.4.333",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",

package/components/common/layout/theHeader/feedback/FeedbackNew/FeedbackNew.vue

@@ -1,61 +0,0 @@
-<template>
-  <ui-modal
-    show
-    width="560px"
-    test-id="feedback-modal"
-    :title="localization.common.sendFeedback"
-    :texts="texts"
-    class="feedback"
-    @submit="onSubmit"
-    @hide="onHideModal"
-  >
-    <template #content>
-      <ui-modal-block-standard>
-        <common-layout-the-header-feedback-new-description />
-
-      </ui-modal-block-standard>
-    </template>
-
-    <template #footerLeftContent><span /></template>
-  </ui-modal>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-// import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
-
-// const props = defineProps<{
-//   title: string
-// }>()
-// console.log(props)
-// const emits = defineEmits<{
-//   (event: 'hide'): void
-//   (event: 'submit', value: UI_I_FeedbackForm): void
-// }>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const texts = {
-  button1: localization.value.common.send,
-}
-
-const onHideModal = (): void => {
-  // emits('hide')
-}
-const onSubmit = (): void => {}
-</script>
-
-<style lang="scss">
-:root {
-  --description-color: #414b57;
-  --link-visited-color: #5659b8;
-}
-
-:root.dark-theme {
-  --description-color: #adbbc4;
-  --link-visited-color: #49afd9;
-}
-
-.feedback {
-}
-</style>