bfg-common 1.4.340 → 1.4.341

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

@@ -1,13 +1,12 @@
 <template>
   <common-layout-the-header-feedback-new
-    v-if="isNewView"
-    :is-show-feedback="props.isShowFeedback"
-    :title="localization.common.sendFeedback"
+    v-if="props.isShowFeedback && isNewView"
+    v-model="feedbackForm"
     @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')"
@@ -23,6 +22,7 @@ import type {
   UI_I_Localization,
   UI_I_NotifyBodyMessage,
 } from '~/lib/models/interfaces'
+import { feedbackDefaultFormFunc } from '~/components/common/layout/theHeader/feedback/lib/config/sendFeedback'
 
 const props = defineProps<{
   isShowFeedback: boolean
@@ -33,12 +33,15 @@ const emits = defineEmits<{
   (event: 'hide'): void
 }>()
 
-const { $store }: any = useNuxtApp()
-
 const localization = computed<UI_I_Localization>(() => useLocal())
+const { $store }: any = useNuxtApp()
 
 const isNewView = computed<boolean>(() => $store.getters['main/getIsNewView'])
 
+const feedbackForm = ref<UI_I_FeedbackForm>(
+  useDeepCopy(feedbackDefaultFormFunc())
+)
+
 const handleRequest = async (data: UI_I_FeedbackForm): Promise<boolean> => {
   const { error } = await useMyFetch<never, API_UI_I_Error>(
     'https://customer.aobfg.ru/api/v1/feedback',

package/components/common/layout/theHeader/feedback/lib/config/sendFeedback.ts

@@ -0,0 +1,9 @@
+import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
+export const feedbackDefaultFormFunc = (): UI_I_FeedbackForm => {
+  return {
+    description: '',
+    type: 0,
+    email: '',
+    image: '', // base64
+  }
+}

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

@@ -0,0 +1,84 @@
+<template>
+  <Teleport to="body">
+    <ui-modal
+      show
+      width="560px"
+      test-id="feedback-modal"
+      :title="localization.common.sendFeedback"
+      :texts="modalFooterButtonNames"
+      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="feedbackForm.description"
+            v-model:is-valid="isValidForm"
+            :selected-tab="selectedTab"
+          />
+
+          <common-layout-the-header-feedback-new-email
+            v-model="feedbackForm.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'
+import type { UI_T_FeedbackTab } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/types'
+
+// const props = defineProps<{
+//   title: string
+// }>()
+// console.log(props)
+const feedbackForm = defineModel<UI_I_FeedbackForm>({ required: true })
+const emits = defineEmits<{
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const modalFooterButtonNames = {
+  button2: localization.value.common.send,
+}
+const isValidForm = ref<boolean>(true)
+const selectedTab = ref<UI_T_FeedbackTab>()
+
+const onHideModal = (): void => {
+  emits('hide')
+}
+const onSubmit = (): void => {
+  isValidForm.value = !!feedbackForm.value.description
+
+  if (!isValidForm.value) return
+}
+</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,58 @@
+<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 isValidModel = defineModel<boolean>('isValid', { 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 !isValidModel.value && !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/new/subtitle/Subtitle.vue

@@ -0,0 +1,83 @@
+<template>
+  <div class="subtitle">
+    <span class="subtitle__label">
+      {{ localization.common.helpUsImprove }}
+    </span>
+    <ui-icon
+      id="feedback-description-info-icon"
+      name="info"
+      width="18"
+      height="18"
+      :color="isShowInfo ? '#008FD6' : '#9DA6AD'"
+      class="info-icon pointer"
+      @click="isShowInfo = !isShowInfo"
+    />
+    <ui-popup-window
+      v-model="isShowInfo"
+      width="232px"
+      :elem-id="'feedback-description-info-icon'"
+    >
+      <div class="common-widget-info">
+        <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">{{ localization.common.feedbackHelp }}</span>
+          </div>
+          <ui-icon
+            name="close"
+            class="pointer hide-icon"
+            width="16px"
+            height="16px"
+            @click="isShowInfo = false"
+          />
+        </div>
+
+        <div class="common-widget-info-description">
+          {{ localization.common.anyFeedbackYouProvideMay }}
+        </div>
+      </div>
+    </ui-popup-window>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const isShowInfo = ref<boolean>(false)
+</script>
+
+<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/package.json

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

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

@@ -1,63 +0,0 @@
-<template>
-  <Teleport to="body">
-    <common-feedback
-      width="576px"
-      :show="props.isShowFeedback"
-      :title="props.title"
-      @hide="emits('hide')"
-      @submit="emits('submit', $event)"
-    />
-  </Teleport>
-</template>
-
-<script setup lang="ts">
-import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
-
-const props = defineProps<{
-  isShowFeedback: boolean
-  title: string
-}>()
-
-const emits = defineEmits<{
-  (event: 'hide'): void
-  (event: 'submit', value: UI_I_FeedbackForm): void
-}>()
-</script>
-
-<style lang="scss">
-:root {
-  --description-color: #414b57;
-  --link-visited-color: #5659b8;
-}
-
-:root.dark-theme {
-  --description-color: #adbbc4;
-  --link-visited-color: #49afd9;
-}
-
-.feedback {
-  width: 60px;
-  height: 60px;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  fill: #fafafa;
-
-  &-icon {
-    width: 24px;
-    height: 24px;
-    opacity: 0.65;
-    cursor: pointer;
-  }
-  &-icon:hover {
-    opacity: 1;
-  }
-}
-.about-vsphere-dialog-legal-section {
-  color: var(--description-color);
-  a {
-    color: var(--link-visited-color);
-  }
-}
-</style>