bfg-common 1.4.390 → 1.4.391

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

@@ -4,38 +4,44 @@
       show
       width="560px"
       test-id="feedback-modal"
-      :title="localization.common.sendFeedback"
+      :title="title"
       class="feedback"
       @hide="onHideModal"
     >
       <template #content>
         <ui-modal-block-standard>
-          <common-layout-the-header-feedback-new-subtitle />
+          <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 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-tabs
+              v-model="selectedTab"
+              class="metrics-tabs"
             />
 
-            <common-layout-the-header-feedback-new-email
-              v-model="feedbackForm.email"
-            />
+            <div
+              v-if="selectedTab === 'light-bulb'"
+              class="feedback__visit-portal"
+            >
+              {{ localization.common.useOurExternalIdeasPortal }}
+            </div>
+          </template>
 
-            <common-layout-the-header-feedback-new-additional-details />
+          <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>
@@ -57,7 +63,7 @@
           <ui-button
             test-id="feedback-modal-submit-btn"
             size="md"
-            :disabled="!selectedTab"
+            :disabled="isDisabledButton"
             min-width="96px"
             @click="onSubmit"
           >
@@ -80,6 +86,7 @@
 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'
 
 const feedbackForm = defineModel<UI_I_FeedbackForm>({ required: true })
 const emits = defineEmits<{
@@ -89,17 +96,40 @@ 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 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 modalFooterButtonNames = computed(() => {
-  return selectedTab.value === 'light-bulb'
-    ? localization.value.common.visitIdeasPortal
-    : localization.value.common.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 (selectedTab.value === 'light-bulb') {

package/components/common/layout/theHeader/feedback/new/additionalDetails/AdditionalDetails.vue

@@ -1,16 +1,21 @@
 <template>
   <div class="additional-details">
-    <common-layout-the-header-feedback-new-additional-details-headline />
+    <template v-if="!optionsModel.isAnnotateImage">
+      <common-layout-the-header-feedback-new-additional-details-headline />
 
-    <ui-alert
-      v-if="hasTakeScreenshot"
-      test-id="additional-details-info-alert"
-      :messages="[localization.common.screenshotQualityMayVary]"
-      type="info"
-      class="additional-details__alert"
-    ></ui-alert>
+      <ui-alert
+        v-if="optionsModel.hasTakeScreenshot"
+        test-id="additional-details-info-alert"
+        :messages="[localization.common.screenshotQualityMayVary]"
+        type="info"
+        class="additional-details__alert"
+      ></ui-alert>
+    </template>
 
-    <div v-if="!hasTakeScreenshot" class="flex gap-4 button-container">
+    <div
+      v-if="!optionsModel.hasTakeScreenshot"
+      class="flex gap-4 button-container"
+    >
       <ui-button
         test-id="feedback-take-screenshot-btn"
         size="md"
@@ -61,7 +66,10 @@
       id="feedbackImgWrap"
       ref="feedbackImgWrap"
       class="preview-container"
-      :class="!hasTakeScreenshot && 'disabled'"
+      :class="{
+        disabled: !optionsModel.hasTakeScreenshot,
+        annotate: optionsModel.isAnnotateImage,
+      }"
     >
       <div class="preview-container__backdrop">
         <div>
@@ -71,6 +79,7 @@
             type="default"
             variant="outline"
             class=""
+            @click="onAnnotateImage"
           >
             <ui-icon
               name="annotate-icon"
@@ -112,14 +121,15 @@
 <script lang="ts" setup>
 import html2canvas from 'html2canvas'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
+import type { UI_I_FeedbackCanvasOptions } from '~/components/common/layout/theHeader/feedback/new/lib/models/interfaces'
 
-const localization = computed<UI_I_Localization>(() => useLocal())
-
+const optionsModel = defineModel<UI_I_FeedbackCanvasOptions>({ required: true })
 const emits = defineEmits<{
   (event: 'screen-shot', value: any): void
 }>()
 
-const hasTakeScreenshot = ref<boolean>(false)
+const localization = computed<UI_I_Localization>(() => useLocal())
+
 const isFileLoad = ref(null)
 const feedbackImgWrap = ref()
 const feedbackImg = ref()
@@ -133,9 +143,8 @@ const indexArray = ref<number>(0) // index of feedbackImg itself
 // let drawWidth = ''
 
 const onTakeScreenshot = (): void => {
-  hasTakeScreenshot.value = true
+  optionsModel.value.hasTakeScreenshot = true
   const value = {
-    hasTakeScreenshot: true,
     width: window.outerWidth + 'px',
   }
 
@@ -177,7 +186,7 @@ const onTakeScreenshot = (): void => {
   })
 }
 const onUploadFile = (): void => {
-  hasTakeScreenshot.value = true
+  optionsModel.value.hasTakeScreenshot = true
   if (!isFileLoad.value) return
 
   const isFileRead = new FileReader()
@@ -204,7 +213,6 @@ const onUploadFile = (): void => {
         )
       )
       const value = {
-        hasTakeScreenshot: true,
         width: window.outerWidth + 'px',
       }
       emits('screen-shot', value)
@@ -223,7 +231,7 @@ const onUploadFile = (): void => {
 }
 
 const onRemoveScreenshot = (): void => {
-  hasTakeScreenshot.value = false
+  optionsModel.value.hasTakeScreenshot = false
   const parentMain = document.getElementById('feedbackId')
   const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
   if (!parentMain || !parentModalDialog) return
@@ -238,7 +246,6 @@ const onRemoveScreenshot = (): void => {
   feedbackImgWrap.value.style.width = 0 + 'px'
   feedbackImgWrap.value.style.height = 0 + 'px'
   const value = {
-    hasTakeScreenshot: false,
     width: memoryParentModalDialog.value,
   }
   emits('screen-shot', value)
@@ -256,6 +263,9 @@ const clearAll = (): void => {
     context.putImageData(drawingArray[indexArray.value], 0, 0)
   }
 }
+const onAnnotateImage = (): void => {
+  optionsModel.value.isAnnotateImage = true
+}
 </script>
 
 <style lang="scss" scoped>
@@ -325,7 +335,7 @@ const clearAll = (): void => {
     }
   }
 
-  &:hover &__backdrop {
+  &:hover:not(&.annotate) &__backdrop {
     display: flex;
     align-items: center;
     justify-content: center;

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

@@ -0,0 +1,4 @@
+export interface UI_I_FeedbackCanvasOptions {
+  isAnnotateImage: boolean
+  hasTakeScreenshot: boolean
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "bfg-common",
   "private": false,
-  "version": "1.4.390",
+  "version": "1.4.391",
   "scripts": {
     "build": "nuxt build",
     "dev": "nuxt dev --port=3002",
@@ -35,7 +35,7 @@
     "@vueuse/components": "^10.1.2",
     "date-fns": "^2.29.3",
     "bfg-nuxt-3-graph": "1.0.15",
-    "bfg-uikit": "1.0.192",
+    "bfg-uikit": "1.0.193",
     "html2canvas": "^1.4.1",
     "prettier-eslint": "^15.0.1"
   }