bfg-common 1.4.530 → 1.4.532

package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter.ts

@@ -1,52 +1,52 @@
-import type { UI_I_SelectVmkernelAdapter } from '~/components/common/wizards/network/add/lib/models/interfaces'
-import type { UI_I_Localization } from '~/lib/models/interfaces'
-import type { UI_I_WizardStep, UI_I_ValidationReturn } from '~/components/atoms/wizard/lib/models/interfaces'
-import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/lib/models/enums'
-import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
-
-export const validateSelectedVmLocal = (
-  localization: UI_I_Localization,
-  data: UI_I_SelectVmkernelAdapter,
-  wizard: Wizard
-): void => {
-  wizard.validateFieldLocal(
-    0,
-    'vm',
-    data.vm === '',
-    '',
-    localization.common.noVmKernelNetworkAdapterSelectedForMigration
-  )
-}
-
-export const checkSelectedVmSync = (
-  localization: UI_I_Localization,
-  data: UI_I_SelectVmkernelAdapter,
-  wizard: Wizard,
-  value: UI_I_WizardStep[]
-): UI_I_ValidationReturn => {
-  let stepHasError = false
-
-  if (data.vm === '') {
-    stepHasError = wizard.setValidation(
-      0,
-      UI_E_MigrationValidationFields.SELECT_ADAPTER_VM,
-      {
-        fieldMessage: '',
-        alertMessage: localization.common.noVmKernelNetworkAdapterSelectedForMigration,
-      }
-    )
-  } else if (
-    wizard.hasMessage(0, UI_E_MigrationValidationFields.SELECT_ADAPTER_VM)
-  ) {
-    value = wizard.removeValidation(
-      0,
-      UI_E_MigrationValidationFields.SELECT_ADAPTER_VM,
-      value
-    )
-  }
-
-  return {
-    newValue: value,
-    stepHasError,
-  }
-}
+import type { UI_I_SelectVmkernelAdapter } from '~/components/common/wizards/network/add/lib/models/interfaces'
+import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_WizardStep, UI_I_ValidationReturn } from '~/components/atoms/wizard/lib/models/interfaces'
+import { UI_E_MigrationValidationFields } from '~/components/common/diagramMain/lib/models/enums'
+import type Wizard from '~/components/atoms/wizard/lib/utils/utils'
+
+export const validateSelectedVmLocal = (
+  localization: UI_I_Localization,
+  data: UI_I_SelectVmkernelAdapter,
+  wizard: Wizard
+): void => {
+  wizard.validateFieldLocal(
+    0,
+    'vm',
+    data.vm === '',
+    '',
+    localization.common.noVmKernelNetworkAdapterSelectedForMigration
+  )
+}
+
+export const checkSelectedVmSync = (
+  localization: UI_I_Localization,
+  data: UI_I_SelectVmkernelAdapter,
+  wizard: Wizard,
+  value: UI_I_WizardStep[]
+): UI_I_ValidationReturn => {
+  let stepHasError = false
+
+  if (data.vm === '') {
+    stepHasError = wizard.setValidation(
+      0,
+      UI_E_MigrationValidationFields.SELECT_ADAPTER_VM,
+      {
+        fieldMessage: '',
+        alertMessage: localization.common.noVmKernelNetworkAdapterSelectedForMigration,
+      }
+    )
+  } else if (
+    wizard.hasMessage(0, UI_E_MigrationValidationFields.SELECT_ADAPTER_VM)
+  ) {
+    value = wizard.removeValidation(
+      0,
+      UI_E_MigrationValidationFields.SELECT_ADAPTER_VM,
+      value
+    )
+  }
+
+  return {
+    newValue: value,
+    stepHasError,
+  }
+}

package/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/validations.ts

@@ -1,19 +1,19 @@
-import {
-  validateVlanIdConnectionSettingsLocal,
-  validateNetworkConnectionSettingsLocal,
-  checkConnectionSettingsSync,
-  checkNetworkAsync,
-} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings'
-import {
-  checkSelectedVmSync,
-  validateSelectedVmLocal,
-} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter'
-
-export {
-  validateVlanIdConnectionSettingsLocal,
-  validateNetworkConnectionSettingsLocal,
-  checkConnectionSettingsSync,
-  checkNetworkAsync,
-  checkSelectedVmSync,
-  validateSelectedVmLocal,
-}
+import {
+  validateVlanIdConnectionSettingsLocal,
+  validateNetworkConnectionSettingsLocal,
+  checkConnectionSettingsSync,
+  checkNetworkAsync,
+} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/connectionSettings'
+import {
+  checkSelectedVmSync,
+  validateSelectedVmLocal,
+} from '~/components/common/diagramMain/modals/migrateVmkernelAdapter/validations/selectVmkernelAdapter'
+
+export {
+  validateVlanIdConnectionSettingsLocal,
+  validateNetworkConnectionSettingsLocal,
+  checkConnectionSettingsSync,
+  checkNetworkAsync,
+  checkSelectedVmSync,
+  validateSelectedVmLocal,
+}

package/components/common/diagramMain/port/Ports.vue

@@ -1,47 +1,47 @@
-<template>
-  <g>
-    <template v-if="props.network.toggle">
-      <template v-for="port in props.network.ports" :key="port.id">
-        <common-diagram-main-port
-          :network="props.network"
-          :port="port"
-          :is-dark-mode="props.isDarkMode"
-          :selected-port="props.selectedPort"
-          :selected-adapter="props.selectedAdapter"
-          @select-port="onSelectPort"
-          @show-modal="onShowModal"
-        />
-      </template>
-    </template>
-  </g>
-</template>
-
-<script setup lang="ts">
-import type {
-  UI_I_ModalsInitialData,
-  UI_I_NetworkFullWithPositions,
-  UI_I_SelectedAdapter,
-  UI_I_SelectedPort,
-} from '~/components/common/diagramMain/lib/models/interfaces'
-
-const props = defineProps<{
-  network: UI_I_NetworkFullWithPositions
-  selectedPort: UI_I_SelectedPort
-  selectedAdapter: UI_I_SelectedAdapter
-  isDarkMode: boolean
-}>()
-
-const emits = defineEmits<{
-  (event: 'select-port', networkId: string, portId: string): void
-  (
-    event: 'show-modal',
-    value: string,
-    properties?: UI_I_ModalsInitialData
-  ): void
-}>()
-
-const onSelectPort = (networkId: string, portId: string) =>
-  emits('select-port', networkId, portId)
-const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
-  emits('show-modal', value, properties)
-</script>
+<template>
+  <g>
+    <template v-if="props.network.toggle">
+      <template v-for="port in props.network.ports" :key="port.id">
+        <common-diagram-main-port
+          :network="props.network"
+          :port="port"
+          :is-dark-mode="props.isDarkMode"
+          :selected-port="props.selectedPort"
+          :selected-adapter="props.selectedAdapter"
+          @select-port="onSelectPort"
+          @show-modal="onShowModal"
+        />
+      </template>
+    </template>
+  </g>
+</template>
+
+<script setup lang="ts">
+import type {
+  UI_I_ModalsInitialData,
+  UI_I_NetworkFullWithPositions,
+  UI_I_SelectedAdapter,
+  UI_I_SelectedPort,
+} from '~/components/common/diagramMain/lib/models/interfaces'
+
+const props = defineProps<{
+  network: UI_I_NetworkFullWithPositions
+  selectedPort: UI_I_SelectedPort
+  selectedAdapter: UI_I_SelectedAdapter
+  isDarkMode: boolean
+}>()
+
+const emits = defineEmits<{
+  (event: 'select-port', networkId: string, portId: string): void
+  (
+    event: 'show-modal',
+    value: string,
+    properties?: UI_I_ModalsInitialData
+  ): void
+}>()
+
+const onSelectPort = (networkId: string, portId: string) =>
+  emits('select-port', networkId, portId)
+const onShowModal = (value: string, properties?: UI_I_ModalsInitialData) =>
+  emits('show-modal', value, properties)
+</script>

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

@@ -96,7 +96,7 @@ const onHide = (): void => {
 const onSubmit = async (data: UI_I_FeedbackForm): Promise<void> => {
   onHide()
 
-  const sendForm: UI_I_FeedbackForm = isNewView ? feedbackForm.value : data
+  const sendForm: UI_I_FeedbackForm = isNewView.value ? feedbackForm.value : data
   const isValid = await handleRequest(sendForm)
 
   if (isValid) showNotification(msgSuccess.value)

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

@@ -1,4 +1,5 @@
 import type { UI_I_FeedbackForm } from '~/components/common/feedback/lib/models/interfaces'
+// import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
 export const feedbackDefaultFormFunc = (): UI_I_FeedbackForm => {
   return {
     description: '',
@@ -7,3 +8,10 @@ export const feedbackDefaultFormFunc = (): UI_I_FeedbackForm => {
     image: '', // base64
   }
 }
+
+// export const feedbackCanvasDefaultOptions = (): UI_I_FeedbackCanvasOptions => {
+//   return {
+//     isAnnotateImage: false,
+//     hasTakeScreenshot: false,
+//   }
+// }

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

@@ -1,78 +1,86 @@
 <template>
   <Teleport to="body">
-    <ui-modal
-      show
-      width="560px"
-      test-id="feedback-modal"
-      :title="localization.common.sendFeedback"
-      class="feedback"
-      @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"
-          />
-
-          <div
-            v-if="selectedTab === 'light-bulb'"
-            class="feedback__visit-portal"
-          >
-            {{ localization.common.useOurExternalIdeasPortal }}
+    <div id="feedback-dialog">
+      <ui-modal
+        show
+        :width="!options.isAnnotateImage ? '560px' : '880px'"
+        test-id="feedback-modal"
+        :title="title"
+        class="feedback"
+        @hide="onHideModal"
+      >
+        <template #content>
+          <ui-modal-block-standard>
+            <template v-if="!options.isAnnotateImage">
+              <common-layout-the-header-feedback-new-subtitle />
+
+              <common-layout-the-header-feedback-new-tabs
+                v-model="selectedTab"
+                class="metrics-tabs"
+              />
+
+              <div
+                v-if="selectedTab === 'light-bulb'"
+                class="feedback__visit-portal"
+              >
+                {{ localization.common.useOurExternalIdeasPortal }}
+              </div>
+            </template>
+
+            <template v-if="selectedTab !== 'light-bulb'">
+              <template v-if="!options.isAnnotateImage">
+                <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"
+                />
+              </template>
+
+              <common-layout-the-header-feedback-new-additional-details
+                v-model="options"
+              />
+            </template>
+          </ui-modal-block-standard>
+        </template>
+
+        <template #footerLeftContent><span /></template>
+
+        <template #footerContent>
+          <div class="flex gap-4">
+            <ui-button
+              v-if="selectedTab !== 'light-bulb'"
+              test-id="feedback-modal-hide-btn"
+              size="md"
+              variant="outline"
+              min-width="96px"
+              @click="onHideModal"
+            >
+              {{ localization.common.cancel }}
+            </ui-button>
+            <ui-button
+              test-id="feedback-modal-submit-btn"
+              size="md"
+              :disabled="isDisabledButton"
+              min-width="96px"
+              @click="onSubmit"
+            >
+              <ui-icon
+                v-if="selectedTab === 'light-bulb'"
+                name="new-tab"
+                width="20"
+                height="20"
+                class="feedback__btn-icon"
+              />
+              {{ modalFooterButtonNames }}
+            </ui-button>
           </div>
-
-          <template v-else>
-            <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"
-            />
-
-            <common-layout-the-header-feedback-new-additional-details />
-          </template>
-        </ui-modal-block-standard>
-      </template>
-
-      <template #footerLeftContent><span /></template>
-
-      <template #footerContent>
-        <div class="flex gap-4">
-          <ui-button
-            v-if="selectedTab !== 'light-bulb'"
-            test-id="feedback-modal-hide-btn"
-            size="md"
-            variant="outline"
-            min-width="96px"
-            @click="onHideModal"
-          >
-            {{ localization.common.cancel }}
-          </ui-button>
-          <ui-button
-            test-id="feedback-modal-submit-btn"
-            size="md"
-            :disabled="!selectedTab"
-            min-width="96px"
-            @click="onSubmit"
-          >
-            <ui-icon
-              v-if="selectedTab === 'light-bulb'"
-              name="new-tab"
-              width="20"
-              height="20"
-              class="feedback__btn-icon"
-            />
-            {{ modalFooterButtonNames }}
-          </ui-button>
-        </div>
-      </template>
-    </ui-modal>
+        </template>
+      </ui-modal>
+    </div>
   </Teleport>
 </template>
 
@@ -80,6 +88,8 @@
 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'
+import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
+import { UI_E_FeedbackType } from '~/components/common/layout/theHeader/feedback/new/tabs/lib/models/enums'
 
 const feedbackForm = defineModel<UI_I_FeedbackForm>({ required: true })
 const emits = defineEmits<{
@@ -89,19 +99,47 @@ const emits = defineEmits<{
 
 const localization = computed<UI_I_Localization>(() => useLocal())
 
-const isValidForm = ref<boolean>(true)
 const selectedTab = ref<UI_T_FeedbackTab>()
+const isValidForm = ref<boolean>(true)
+const options = ref<UI_I_FeedbackCanvasOptions>({
+  isAnnotateImage: false,
+  hasTakeScreenshot: false,
+})
 
-const modalFooterButtonNames = computed(() => {
-  return selectedTab.value === 'light-bulb'
-    ? localization.value.common.visitIdeasPortal
-    : localization.value.common.send
+const title = computed<string>(() => {
+  const { common, feedback } = localization.value
+
+  return !options.value.isAnnotateImage
+    ? common.sendFeedback
+    : options.value.hasTakeScreenshot
+    ? feedback.annotateScreenshot
+    : feedback.annotateImage
+})
+const modalFooterButtonNames = computed<string>(() => {
+  const { visitIdeasPortal, send, save } = localization.value.common
+
+  return options.value.isAnnotateImage
+    ? save
+    : selectedTab.value === 'light-bulb'
+    ? visitIdeasPortal
+    : send
+})
+
+const isDisabledButton = computed<boolean>(() => {
+  return !options.value.isAnnotateImage && !selectedTab.value
 })
 
 const onHideModal = (): void => {
-  emits('hide')
+  !options.value.isAnnotateImage
+    ? emits('hide')
+    : (options.value.isAnnotateImage = false)
 }
 const onSubmit = (): void => {
+  if (options.value.isAnnotateImage) {
+    options.value.isAnnotateImage = false
+    return
+  }
+
   if (selectedTab.value === 'light-bulb') {
     const targetUrl = 'https://customer.aobfg.ru/' // Ваш URL
     window.open(targetUrl, '_blank')
@@ -111,24 +149,25 @@ const onSubmit = (): void => {
   isValidForm.value = !!feedbackForm.value.description
 
   if (!isValidForm.value) return
-  emits('submit')
-}
-</script>
+  const canvasData = (
+    document.getElementById('feedbackImg') as HTMLCanvasElement
+  ).toDataURL()
+  const canvasBlankData = (
+    document.getElementById('feedbackImgBlank') as HTMLCanvasElement
+  ).toDataURL()
 
-<style lang="scss">
-:root {
-  --description-color: #414b57;
-  --link-visited-color: #5659b8;
-}
+  const image = canvasData.match(/base64,(.+)/)?.[1] || ''
+  feedbackForm.value.image = canvasData === canvasBlankData ? '' : image
+  feedbackForm.value.type = UI_E_FeedbackType[selectedTab.value]
 
-:root.dark-theme {
-  --description-color: #adbbc4;
-  --link-visited-color: #49afd9;
+  emits('submit')
 }
+</script>
 
+<style lang="scss" scoped>
 .feedback {
   &__visit-portal {
-    color: #4d5d69;
+    color: var(--feedback-text-color);
     font-size: 13px;
     font-weight: 400;
     line-height: 15.73px;
@@ -139,3 +178,15 @@ const onSubmit = (): void => {
   }
 }
 </style>
+<style lang="scss">
+:root {
+  --feedback-text-color: #4d5d69;
+  --feedback-tooltip-close-color: #213444;
+  --feedback-tab-active-bg-color: #008fd60f;
+}
+:root.dark-theme {
+  --feedback-text-color: #e9eaec;
+  --feedback-tooltip-close-color: #e9eaec;
+  --feedback-tab-active-bg-color: #2ba2de14;
+}
+</style>