bfg-common 1.2.56 → 1.2.58

package/components/common/feedback/Feedback.vue

@@ -1,247 +1,260 @@
-<template>
-  <div v-if="props.show" id="feedbackId" class="modal">
-    <div
-      id="feedback-modal-dialog-Id"
-      :class="['modal-dialog', { imageDrawn: isFeedbackImageDrawn }]"
-      :style="{
-        width: computeWidth,
-        height: computeHeight,
-      }"
-    >
-      <div class="modal-content">
-        <div class="modal-header">
-          <div class="flex-align-center">
-            <h3 class="modal-title">
-              {{ props.title }}
-            </h3>
-          </div>
-          <button v-if="!props.isHideCloseIcon" id="feedback-modal-close-icon" class="close" @click="hide">
-            <atoms-the-icon class="close-icon" name="close" />
-          </button>
-        </div>
-
-        <common-feedback-buttons
-          v-model:select="selectedTab"
-          :items="tabsItems"
-        />
-        <div class="modal-body">
-          <common-feedback-message
-            v-show="selectedTab !== 2"
-            v-model:description="description"
-            v-model:email="email"
-            :selected-tab="selectedTab"
-            @screen-shot="onScreenShot"
-          />
-          <common-feedback-visit-portal v-show="selectedTab === 2" />
-        </div>
-        <div
-          :class="{
-            'modal-footer': selectedTab !== 2,
-            'modal-no-footer': selectedTab === 2,
-          }"
-        >
-          <button id="feedback-modal-cancel-button" class="btn btn-outline" @click="hide">
-            {{ localization.cancel }}
-          </button>
-          <button
-            class="btn btn-outline"
-            :class="props.loading && 'modal-dialog__loader'"
-            :disabled="!description"
-            @click="submit"
-          >
-            <atoms-loader-pre-loader
-              v-if="props.loading"
-              id="loader"
-              class="absolute-center button__loading"
-              :show="props.loading"
-            />
-            <span v-else>
-              {{ localization.send }}
-            </span>
-          </button>
-        </div>
-      </div>
-    </div>
-    <div class="modal-backdrop" />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { UI_I_Localization } from '~/models/interfaces'
-import {
-  UI_I_FeedbackButtonsItem,
-  UI_I_MessageImg,
-} from '~/components/common/feedback/models/interfaces'
-import { feedbackTabs } from '~/components/common/feedback/config/feedbackTabs'
-
-const props = defineProps<{
-  show: boolean
-  title: string
-  width?: string
-  height?: string
-  submitText?: string
-  loading?: boolean
-  isHideCloseIcon?: boolean
-}>()
-const emits = defineEmits<{
-  (event: 'submit', value: any): void
-  (event: 'hide'): void
-}>()
-
-const localization = computed<UI_I_Localization>(() => useLocal())
-
-const tabsItems = computed<UI_I_FeedbackButtonsItem[]>(() =>
-  feedbackTabs(localization.value)
-)
-const hide = (): void => {
-  emits('hide')
-
-  email.value = ''
-  description.value = ''
-  selectedTab.value = null
-}
-
-const submit = (): void => {
-  const canvas = document.getElementById('feedbackImg') as HTMLCanvasElement
-
-  emits('submit', {
-    type: selectedTab.value,
-    description: description.value,
-    email: email.value,
-    image: canvas?.toDataURL() || ''
-  })
-  description.value = ''
-  selectedTab.value = null
-}
-const computeWidth = computed<string | undefined>(() =>
-  isFeedbackImageDrawn.value && selectedTab.value !== 2
-    ? feedbackImageDrawnWidth.value
-    : props.width
-)
-const computeHeight = computed<string>(() =>
-  !isFeedbackImageDrawn.value && selectedTab.value !== 2
-    ? ''
-    : selectedTab.value !== 2
-    ? '100%'
-    : '420px'
-)
-const isFeedbackImageDrawn = ref<boolean>(false)
-const feedbackImageDrawnWidth = ref<string>('')
-const selectedTab = ref<number | null>(null)
-const description = ref<string>('')
-const email = ref<string>('')
-
-const onScreenShot = (value: UI_I_MessageImg): void => {
-  isFeedbackImageDrawn.value = value.hasTakeScreenshot
-  feedbackImageDrawnWidth.value = value.width
-}
-
-</script>
-
-<style scoped lang="scss">
-.modal {
-  position: fixed;
-  top: 0;
-  bottom: 0;
-  right: 0;
-  left: 0;
-  z-index: 1050;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  padding: 48px;
-  overflow-y: auto;
-  overflow-x: auto;
-
-  .modal-dialog {
-    .modal-content {
-      position: relative;
-      display: flex;
-      flex-direction: column;
-      background-color: var(--modal-bg-color);
-      box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
-      border: 1px solid rgba(0, 0, 0, 0.2);
-      border-radius: 3px;
-      background-clip: padding-box;
-      padding: 24px;
-      height: 100%;
-      -webkit-animation-name: animateTop;
-      -webkit-animation-duration: 0.4s;
-      animation-name: animateTop;
-      animation-duration: 0.4s;
-      overflow-x: auto;
-
-      .modal-header {
-        display: flex;
-        justify-content: space-between;
-        align-items: flex-start;
-
-        .modal-title {
-          color: var(--main-color-mode);
-        }
-
-        .close-icon {
-          fill: var(--close-icon);
-          width: 24px;
-          height: 24px;
-        }
-      }
-      .modal-info {
-        display: flex;
-        flex-direction: row;
-        align-items: center;
-        margin-bottom: 20px;
-
-        :deep(.icon-info-standart) {
-          width: 20px !important;
-          min-width: 20px !important;
-          height: 20px;
-          min-height: 20px;
-        }
-        .info-icon {
-          height: 24px;
-        }
-        .info-text {
-          margin-left: 5px;
-        }
-      }
-      .modal-footer {
-        align-items: flex-end;
-        margin-top: auto;
-        .btn:last-child {
-          margin-left: 5px;
-        }
-      }
-      .modal-no-footer {
-        opacity: 0;
-        width: 200px;
-        height: 60px;
-      }
-    }
-    &__loader {
-      position: relative;
-      pointer-events: none;
-    }
-  }
-
-  .modal-backdrop {
-    opacity: 1;
-    background-color: rgba(0, 0, 0, 0.6);
-  }
-  .button {
-    &__loading {
-      display: flex;
-      :deep(.spinner) {
-        width: 25px;
-        height: 25px;
-        min-width: 25px;
-        min-height: 25px;
-      }
-    }
-  }
-}
-.imageDrawn {
-  width: auto;
-}
-</style>
+<template>
+  <div v-if="props.show" id="feedbackId" class="modal">
+    <div
+      id="feedback-modal-dialog-Id"
+      :class="['modal-dialog', { imageDrawn: isFeedbackImageDrawn }]"
+      :style="{
+        width: computeWidth,
+        height: computeHeight,
+      }"
+    >
+      <div class="modal-content">
+        <div class="modal-header">
+          <div class="flex-align-center">
+            <h3 class="modal-title">
+              {{ props.title }}
+            </h3>
+          </div>
+          <button
+            v-if="!props.isHideCloseIcon"
+            id="feedback-modal-close-icon"
+            class="close"
+            @click="hide"
+          >
+            <atoms-the-icon class="close-icon" name="close" />
+          </button>
+        </div>
+
+        <common-feedback-buttons v-model:select="type" :items="tabsItems" />
+        <div class="modal-body">
+          <common-feedback-message
+            v-show="type !== 2"
+            v-model:description="description"
+            v-model:email="email"
+            :selected-tab="type"
+            @screen-shot="onScreenShot"
+          />
+          <common-feedback-visit-portal v-show="type === 2" />
+        </div>
+        <div
+          :class="{
+            'modal-footer': type !== 2,
+            'modal-no-footer': type === 2,
+          }"
+        >
+          <button
+            id="feedback-modal-cancel-button"
+            class="btn btn-outline"
+            @click="hide"
+          >
+            {{ localization.cancel }}
+          </button>
+          <button
+            class="btn btn-outline"
+            :class="props.loading && 'modal-dialog__loader'"
+            :disabled="!description"
+            @click="submit"
+          >
+            <atoms-loader-pre-loader
+              v-if="props.loading"
+              id="loader"
+              class="absolute-center button__loading"
+              :show="props.loading"
+            />
+            <span v-else>
+              {{ localization.send }}
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
+    <div class="modal-backdrop" />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+import {
+  UI_I_FeedbackButtonsItem,
+  UI_I_FeedbackForm,
+  UI_I_MessageImg,
+} from '~/components/common/feedback/models/interfaces'
+import { UI_T_FeedbackType } from '~/components/common/feedback/models/types'
+import { feedbackTabs } from '~/components/common/feedback/config/feedbackTabs'
+
+const props = defineProps<{
+  show: boolean
+  title: string
+  width?: string
+  height?: string
+  submitText?: string
+  loading?: boolean
+  isHideCloseIcon?: boolean
+}>()
+const emits = defineEmits<{
+  (event: 'submit', value: UI_I_FeedbackForm): void
+  (event: 'hide'): void
+}>()
+
+const localization = computed<UI_I_Localization>(() => useLocal())
+
+const tabsItems = computed<UI_I_FeedbackButtonsItem[]>(() =>
+  feedbackTabs(localization.value)
+)
+const reset = (): void => {
+  email.value = ''
+  description.value = ''
+  type.value = undefined
+}
+const hide = (): void => {
+  emits('hide')
+
+  reset()
+}
+
+const submit = (): void => {
+  if (type.value !== 0 && type.value !== 1) return
+
+  const canvas = document.getElementById('feedbackImg') as HTMLCanvasElement
+
+  const image = canvas?.toDataURL().match(/base64,(.+)/)?.[1] || ''
+  emits('submit', {
+    image,
+    type: type.value,
+    description: description.value,
+    email: email.value,
+  })
+
+  reset()
+}
+const computeWidth = computed<string | undefined>(() =>
+  isFeedbackImageDrawn.value && type.value !== 2
+    ? feedbackImageDrawnWidth.value
+    : props.width
+)
+const computeHeight = computed<string>(() =>
+  !isFeedbackImageDrawn.value && type.value !== 2
+    ? ''
+    : type.value !== 2
+    ? '100%'
+    : '420px'
+)
+const isFeedbackImageDrawn = ref<boolean>(false)
+const feedbackImageDrawnWidth = ref<string>('')
+const type = ref<UI_T_FeedbackType>(undefined)
+const description = ref<string>('')
+const email = ref<string>('')
+
+const onScreenShot = (value: UI_I_MessageImg): void => {
+  isFeedbackImageDrawn.value = value.hasTakeScreenshot
+  feedbackImageDrawnWidth.value = value.width
+}
+</script>
+
+<style scoped lang="scss">
+.modal {
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  right: 0;
+  left: 0;
+  z-index: 1050;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 48px;
+  overflow-y: auto;
+  overflow-x: auto;
+
+  .modal-dialog {
+    .modal-content {
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      background-color: var(--modal-bg-color);
+      box-shadow: 0 5px 15px rgb(0 0 0 / 50%);
+      border: 1px solid rgba(0, 0, 0, 0.2);
+      border-radius: 3px;
+      background-clip: padding-box;
+      padding: 24px;
+      height: 100%;
+      -webkit-animation-name: animateTop;
+      -webkit-animation-duration: 0.4s;
+      animation-name: animateTop;
+      animation-duration: 0.4s;
+      overflow-x: auto;
+
+      .modal-header {
+        display: flex;
+        justify-content: space-between;
+        align-items: flex-start;
+
+        .modal-title {
+          color: var(--main-color-mode);
+        }
+
+        .close-icon {
+          fill: var(--close-icon);
+          width: 24px;
+          height: 24px;
+        }
+      }
+      .modal-info {
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        margin-bottom: 20px;
+
+        :deep(.icon-info-standart) {
+          width: 20px !important;
+          min-width: 20px !important;
+          height: 20px;
+          min-height: 20px;
+        }
+        .info-icon {
+          height: 24px;
+        }
+        .info-text {
+          margin-left: 5px;
+        }
+      }
+      .modal-footer {
+        align-items: flex-end;
+        margin-top: auto;
+        .btn:last-child {
+          margin-left: 5px;
+        }
+      }
+      .modal-no-footer {
+        opacity: 0;
+        width: 200px;
+        height: 60px;
+      }
+    }
+    &__loader {
+      position: relative;
+      pointer-events: none;
+    }
+  }
+
+  .modal-backdrop {
+    opacity: 1;
+    background-color: rgba(0, 0, 0, 0.6);
+  }
+  .button {
+    &__loading {
+      display: flex;
+      :deep(.spinner) {
+        width: 25px;
+        height: 25px;
+        min-width: 25px;
+        min-height: 25px;
+      }
+    }
+  }
+}
+.imageDrawn {
+  width: auto;
+}
+</style>

package/components/common/feedback/Message.vue

@@ -5,7 +5,7 @@
       <textarea
         id="feedback-message-textarea"
         v-model="descriptionLocal"
-        :disabled="!props.selectedTab"
+        :disabled="props.type === null"
         class="clr-textarea ng-pristine ng-invalid ng-touched textarea"
         :placeholder="descriptionTextPlaceholder"
       ></textarea>
@@ -14,7 +14,7 @@
       <span class="text">{{ localization.emailAddress }} </span>
       <input
         id="feedback-email-input"
-        v-model="email"
+        v-model="emailLocal"
         type="email"
         class="email"
         :placeholder="localization.optionalInCaseWeNeed"
@@ -136,7 +136,7 @@ import { UI_I_Localization } from '~/models/interfaces'
 import { UI_I_MessageImg } from '~/components/common/feedback/models/interfaces'
 
 const props = defineProps<{
-  selectedTab: number | null
+  type: 0 | 1 | 2 | null
   description: string
   email: string
 }>()
@@ -154,7 +154,7 @@ const descriptionLocal = computed<string>({
     emits('update:description', value)
   },
 })
-const email = computed<string>({
+const emailLocal = computed<string>({
   get() {
     return props.email
   },
@@ -166,8 +166,8 @@ const localization = computed<UI_I_Localization>(() => useLocal())
 // const drawingPanel = computed(() => drawingPanelFunc(localization.value))
 
 const descriptionTextPlaceholder = computed<string>(() => {
-  if (props.selectedTab === 0) return localization.value.whatIsTheProblemHowCan
-  if (props.selectedTab === 1) return localization.value.tellUsWhatYouEnjoyedSo
+  if (props.type === 0) return localization.value.whatIsTheProblemHowCan
+  if (props.type === 1) return localization.value.tellUsWhatYouEnjoyedSo
   return localization.value.selectFeedbackType
 })
 const hasTakeScreenshot = ref<boolean>(false)

package/components/common/feedback/models/interfaces.ts

@@ -8,8 +8,12 @@ export interface UI_I_MessageImg {
   width: string
 }
 export interface UI_I_DrawingItem {
-
   function: string
   text: string
-
+}
+export interface UI_I_FeedbackForm {
+  type: 0 | 1 // 0 problem, 1 complement
+  description: string
+  email: string
+  image: string // base64
 }

package/components/common/feedback/models/types.ts

@@ -0,0 +1 @@
+export type UI_T_FeedbackType = 0 | 1 | 2 | undefined // 0 problem, 1 complement, 2 idea

package/package.json

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