bfg-common 1.4.387 → 1.4.388

package/assets/localization/local_be.json

@@ -2248,7 +2248,8 @@
     "viewTarget": "Праглядзець мэта",
     "alarmDetails": "Дэталі сігналізацыі",
     "viewObject": "Прагляд аб'екта",
-    "eventDetails": "Падрабязнасці падзеі"
+    "eventDetails": "Падрабязнасці падзеі",
+    "noResultsFound": "Ніякіх вынікаў знойдзена не было"
   },
   "auth": {
     "welcomeTo": "Сардэчна запрашаем у",
@@ -2828,6 +2829,8 @@
   "feedback": {
     "additionalDetailsHelp": "Даведка па дадатковых звестках",
     "additionalDetailsTooltip": "Каб атрымаць дадатковую інфармацыю, вы можаце альбо зрабіць скрыншот экрана, альбо загрузіць выяву ў фармаце .png або .jpeg.",
-    "annotate": "Анатаваць"
+    "annotate": "Анатаваць",
+    "annotateScreenshot": "Анатаваць скрыншот",
+    "annotateImage": "Анатаваць малюнак"
   }
 }

package/assets/localization/local_en.json

@@ -2252,7 +2252,8 @@
     "viewTarget": "View Target",
     "alarmDetails": "Alarm Details",
     "viewObject": "View Object",
-    "eventDetails": "Event Details"
+    "eventDetails": "Event Details",
+    "noResultsFound": "No results found"
   },
   "auth": {
     "welcomeTo": "Welcome to",
@@ -2832,6 +2833,8 @@
   "feedback": {
     "additionalDetailsHelp": "Additional Details Help",
     "additionalDetailsTooltip": "For additional details, you can either take a screenshot of your screen or upload an image in .png or .jpeg format.",
-    "annotate": "Annotate"
+    "annotate": "Annotate",
+    "annotateScreenshot": "Annotate Screenshot",
+    "annotateImage": "Annotate Image"
   }
 }

package/assets/localization/local_hy.json

@@ -2252,7 +2252,8 @@
     "viewTarget": "Դիտել թիրախը",
     "alarmDetails": "Տագնապային մանրամասներ",
     "viewObject": "Դիտել օբյեկտը",
-    "eventDetails": "Միջոցառման մանրամասները"
+    "eventDetails": "Միջոցառման մանրամասները",
+    "noResultsFound": "Ոչ մի արդյունք չի գտնվել"
   },
   "auth": {
     "welcomeTo": "Բարի գալուստ",
@@ -2832,6 +2833,8 @@
   "feedback": {
     "additionalDetailsHelp": "Լրացուցիչ մանրամասներ Օգնություն",
     "additionalDetailsTooltip": "Լրացուցիչ մանրամասների համար կարող եք կամ լուսանկարել ձեր էկրանը կամ վերբեռնել պատկեր .png կամ .jpeg ձևաչափով:",
-    "annotate": "Նշում"
+    "annotate": "Նշում",
+    "annotateScreenshot": "Նշել սքրինշոթը",
+    "annotateImage": "Նշել պատկերը"
   }
 }

package/assets/localization/local_kk.json

@@ -2251,7 +2251,8 @@
     "viewTarget": "Мақсатты көру",
     "alarmDetails": "Дабыл мәліметтері",
     "viewObject": "Көру нысаны",
-    "eventDetails": "Оқиға мәліметтері"
+    "eventDetails": "Оқиға мәліметтері",
+    "noResultsFound": "Нәтижелер табылмады"
   },
   "auth": {
     "welcomeTo": "Қош келдіңіз",
@@ -2831,6 +2832,8 @@
   "feedback": {
     "additionalDetailsHelp": "Қосымша мәліметтер анықтамасы",
     "additionalDetailsTooltip": "Қосымша мәліметтер алу үшін экранның скриншотын түсіруге немесе суретті .png немесе .jpeg пішімінде жүктеп салуға болады.",
-    "annotate": "Аннотация жазу"
+    "annotate": "Аннотация жазу",
+    "annotateScreenshot": "Скриншотқа түсініктеме жазу",
+    "annotateImage": "Суретке түсініктеме жазу"
   }
 }

package/assets/localization/local_ru.json

@@ -2253,7 +2253,8 @@
     "viewTarget": "Посмотреть цель",
     "alarmDetails": "Детали тревоги",
     "viewObject": "Посмотреть объект",
-    "eventDetails": "Подробности о событии"
+    "eventDetails": "Подробности о событии",
+    "noResultsFound": "Никаких результатов найдено не было"
   },
   "auth": {
     "welcomeTo": "Добро пожаловать в",
@@ -2833,6 +2834,8 @@
   "feedback": {
     "additionalDetailsHelp": "Дополнительная информация Помощь",
     "additionalDetailsTooltip": "Для получения дополнительной информации вы можете сделать снимок экрана или загрузить изображение в формате .png или .jpeg.",
-    "annotate": "Аннотировать"
+    "annotate": "Аннотировать",
+    "annotateScreenshot": "Аннотировать снимок экрана",
+    "annotateImage": "Аннотировать изображение"
   }
 }

package/assets/localization/local_zh.json

@@ -2250,7 +2250,8 @@
     "viewTarget": "查看目标",
     "alarmDetails": "报警详情",
     "viewObject": "查看对象",
-    "eventDetails": "活动详情"
+    "eventDetails": "活动详情",
+    "noResultsFound": "未找到结果"
   },
   "auth": {
     "welcomeTo": "欢迎来到",
@@ -2830,6 +2831,8 @@
   "feedback": {
     "additionalDetailsHelp": "其他详细信息帮助",
     "additionalDetailsTooltip": "有关更多详细信息，您可以截取屏幕截图或上传 .png 或 .jpeg 格式的图像。",
-    "annotate": "注释"
+    "annotate": "注释",
+    "annotateScreenshot": "注释屏幕截图",
+    "annotateImage": "注释图像"
   }
 }

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

@@ -2,13 +2,22 @@
   <div class="additional-details">
     <common-layout-the-header-feedback-new-additional-details-headline />
 
-    <div class="flex gap-4 button-container">
+    <ui-alert
+      v-if="hasTakeScreenshot"
+      test-id="additional-details-info-alert"
+      :messages="[localization.common.screenshotQualityMayVary]"
+      type="info"
+      class="additional-details__alert"
+    ></ui-alert>
+
+    <div v-if="!hasTakeScreenshot" class="flex gap-4 button-container">
       <ui-button
         test-id="feedback-take-screenshot-btn"
         size="md"
         type="grey"
         min-width="96px"
         class="take-screenshot"
+        @click="onTakeScreenshot"
       >
         <ui-icon
           name="take-screenshot"
@@ -41,16 +50,210 @@
           type="file"
           accept=".png, .jpeg"
           data-id="feedback-file-load-input"
+          @change="onUploadFile"
         />
       </ui-button>
     </div>
+
+    <div
+      id="feedbackImgWrap"
+      ref="feedbackImgWrap"
+      class="preview-container"
+      :class="!hasTakeScreenshot && 'disabled'"
+    >
+      <div class="preview-container__backdrop">
+        <div>
+          <ui-button
+            test-id="feedback-image-annotate-btn"
+            size="md"
+            type="grey"
+            class=""
+          >
+            <ui-icon
+              name="annotate-icon"
+              width="16"
+              height="16"
+              class="feedback__btn-icon"
+            />
+            {{ localization.feedback.annotate }}
+          </ui-button>
+
+          <ui-button
+            test-id="feedback-image-remove-btn"
+            size="md"
+            type="grey"
+            class=""
+            @click="onRemoveScreenshot"
+          >
+            <ui-icon
+              name="delete"
+              width="16"
+              height="16"
+              class="feedback__btn-icon"
+            />
+            {{ localization.common.remove }}
+          </ui-button>
+        </div>
+      </div>
+      <canvas
+        id="feedbackImg"
+        ref="feedbackImg"
+        class="preview-container__image"
+      ></canvas>
+      <canvas id="feedbackImgBlank" style="display: none"></canvas>
+    </div>
   </div>
 </template>
 
 <script lang="ts" setup>
+import html2canvas from 'html2canvas'
 import type { UI_I_Localization } from '~/lib/models/interfaces'
 
 const localization = computed<UI_I_Localization>(() => useLocal())
+
+const emits = defineEmits<{
+  (event: 'screen-shot', value: any): void
+}>()
+
+const hasTakeScreenshot = ref<boolean>(false)
+const isFileLoad = ref(null)
+const feedbackImgWrap = ref()
+const feedbackImg = ref()
+const memoryParentModalDialog = ref<string>('')
+const memoryParentMain = ref<string>('')
+
+const drawingArray: any = []
+// const indexArray = 0 // index of feedbackImg itself
+const indexArray = ref<number>(0) // index of feedbackImg itself
+// let drawColor = ''
+// let drawWidth = ''
+
+const onTakeScreenshot = (): void => {
+  hasTakeScreenshot.value = true
+  const value = {
+    hasTakeScreenshot: true,
+    width: window.outerWidth + 'px',
+  }
+
+  emits('screen-shot', value)
+  const parentMain = document.getElementById('feedbackId')
+  const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
+  if (!parentMain || !parentModalDialog) return
+
+  console.log(4444)
+
+  const display = parentMain.style.display
+  memoryParentMain.value = parentMain.style.display
+  parentMain.style.display = 'none'
+  html2canvas(document.body).then(function (thisCanvas) {
+    parentMain.style.display = display
+    memoryParentMain.value = parentMain.style.width
+    memoryParentModalDialog.value = parentModalDialog.style.width
+    parentMain.style.width = window.outerWidth + 'px'
+    parentModalDialog.style.width = window.outerWidth + 'px'
+    parentModalDialog.style.margin = '20px'
+    const context = feedbackImg.value.getContext('2d')
+    feedbackImg.value.width = thisCanvas.width
+    feedbackImg.value.height = thisCanvas.height
+    context.drawImage(
+      thisCanvas,
+      0,
+      0,
+      feedbackImg.value.width,
+      feedbackImg.value.height
+    )
+    drawingArray.length = 0
+    indexArray.value = 0
+    drawingArray.push(
+      context.getImageData(
+        0,
+        0,
+        feedbackImg.value.width,
+        feedbackImg.value.height
+      )
+    )
+  })
+}
+const onUploadFile = (): void => {
+  hasTakeScreenshot.value = true
+  if (!isFileLoad.value) return
+
+  const isFileRead = new FileReader()
+  if (!isFileRead) return
+
+  isFileRead.readAsDataURL(isFileLoad.value.files[0])
+  isFileRead.onload = (): void => {
+    const img = new Image()
+    if (!feedbackImg.value) return
+
+    const context = feedbackImg.value.getContext('2d')
+    img.onload = (): void => {
+      feedbackImg.value.width = img.width
+      feedbackImg.value.height = img.height
+      context.drawImage(img, 0, 0, img.width, img.height)
+      drawingArray.length = 0
+      indexArray.value = 0
+      drawingArray.push(
+        context.getImageData(
+          0,
+          0,
+          feedbackImg.value.width,
+          feedbackImg.value.height
+        )
+      )
+      const value = {
+        hasTakeScreenshot: true,
+        width: window.outerWidth + 'px',
+      }
+      emits('screen-shot', value)
+      const parentMain = document.getElementById('feedbackId')
+      const parentModalDialog = document.getElementById(
+        'feedback-modal-dialog-Id'
+      )
+      if (!parentMain || !parentModalDialog) return
+
+      parentMain.style.width = window.outerWidth + 'px'
+      parentModalDialog.style.width = window.outerWidth + 'px'
+      parentModalDialog.style.margin = '20px'
+    }
+    img.src = isFileRead.result
+  }
+}
+
+const onRemoveScreenshot = (): void => {
+  hasTakeScreenshot.value = false
+  const parentMain = document.getElementById('feedbackId')
+  const parentModalDialog = document.getElementById('feedback-modal-dialog-Id')
+  if (!parentMain || !parentModalDialog) return
+
+  parentMain.style.width = memoryParentMain.value
+  parentModalDialog.style.width = memoryParentModalDialog.value
+  const context = feedbackImg.value.getContext('2d')
+  context.fillStyle = 'green'
+  context.fillRect(0, 0, feedbackImg.value.width, feedbackImg.value.height)
+  feedbackImg.value.width = 0
+  feedbackImg.value.height = 0
+  feedbackImgWrap.value.style.width = 0 + 'px'
+  feedbackImgWrap.value.style.height = 0 + 'px'
+  const value = {
+    hasTakeScreenshot: false,
+    width: memoryParentModalDialog.value,
+  }
+  emits('screen-shot', value)
+  clearAll()
+}
+
+const clearAll = (): void => {
+  const context = feedbackImg.value.getContext('2d')
+  // drawColor = ''
+  // drawWidth = ''
+  if (indexArray.value <= 0) return
+  while (indexArray.value > 0) {
+    drawingArray.pop()
+    indexArray.value -= 1
+    context.putImageData(drawingArray[indexArray.value], 0, 0)
+  }
+}
 </script>
 
 <style lang="scss" scoped>
@@ -79,5 +282,59 @@ const localization = computed<UI_I_Localization>(() => useLocal())
       }
     }
   }
+  &__alert {
+    margin-bottom: 16px;
+  }
+}
+.preview-container {
+  width: 500px;
+  height: 280px;
+  position: relative;
+  &.disabled {
+    display: none;
+  }
+
+  &__backdrop {
+    display: none;
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(27, 42, 55, 0.32);
+    backdrop-filter: blur(1.5px);
+    border-radius: 8px;
+    transition: opacity 0.3s ease;
+    opacity: 0;
+
+    & > div {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      .ui-btn {
+        width: initial;
+
+        &:last-child {
+          color: #ea3223;
+        }
+      }
+    }
+  }
+
+  &__image {
+    width: inherit;
+    height: inherit;
+    border-radius: 8px;
+    .disabled & {
+      display: none;
+    }
+  }
+
+  &:hover &__backdrop {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 1;
+  }
 }
 </style>

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

@@ -54,7 +54,7 @@ const isShowInfo = ref<boolean>(false)
 @import 'assets/scss/common/mixins.scss';
 .headline {
   @include flex($align: center);
-  margin: 16px 0;
+  margin: 32px 0 16px;
   &__label {
     line-height: 19.36px;
     font-size: 16px;

package/package.json

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