bfg-common 1.0.0

package/components/common/feedback/Message.vue

@@ -0,0 +1,468 @@
+<template>
+  <div class="message">
+    <div class="main-block">
+      <span class="text">{{ localization.description }}</span>
+      <textarea
+        id="feedback-message-textarea"
+        v-model="descriptionTextMain"
+        :disabled="!props.selectedTab"
+        class="clr-textarea ng-pristine ng-invalid ng-touched textarea"
+        :placeholder="descriptionTextPlaceholder"
+      ></textarea>
+    </div>
+    <div class="main-block">
+      <span class="text">{{ localization.emailAddress }} </span>
+      <input
+        id="feedback-email-input"
+        type="email"
+        class="email"
+        :placeholder="localization.optionalInCaseWeNeed"
+      />
+    </div>
+    <div class="main-block">
+      <span class="text">{{ localization.additionalDetails }} </span>
+      <button
+        v-if="!hasTakeScreenshot"
+        id="feedback-take-screenshot-button"
+        class="btn btn-sm ng-star-inserted"
+        @click="takeScreenshot"
+      >
+        {{ localization.takeScreenshot }}
+      </button>
+
+      <button
+        v-else
+        id="feedback-remove-button"
+        class="btn btn-sm btn-warning-outline ng-star-inserted"
+        @click="removeScreenshot"
+      >
+        {{ localization.remove }}
+      </button>
+    </div>
+    <template v-if="hasTakeScreenshot">
+      <div class="main-block main-block__last">
+        <span class="text"></span>
+        {{ localization.clickAndDragTheMouseToAnnotate }}
+        <!-- <a
+        v-for="tab in drawingPanel"
+        :key="tab.function"
+        href="javascript:void(0)"
+        role="button"
+        class="content-padding"
+        @click="tab.function"
+      >
+        {{ tab.text }}</a
+      > -->
+        <a
+          id="feedback-use-red-marker-button"
+          href="javascript:void(0)"
+          role="button"
+          class="content-padding"
+          @click="useRedMarker"
+        >
+          {{ localization.useRedMarker }}</a
+        >
+        <a
+          id="feedback-use-grey-marker-button"
+          href="javascript:void(0)"
+          role="button"
+          class="content-padding"
+          @click="useGrayEraser"
+        >
+          {{ localization.useGrayEraser }}</a
+        >
+        <a
+          id="feedback-undo-button"
+          href="javascript:void(0)"
+          role="button"
+          class="content-padding"
+          @click="undoLast"
+        >
+          {{ localization.undo }}</a
+        >
+        <a
+          id="feedback-clear-all-button"
+          href="javascript:void(0)"
+          role="button"
+          class="content-padding"
+          @click="clearAll"
+        >
+          {{ localization.clearAll }}</a
+        >
+      </div>
+      <div class="main-block main-block__last">
+        <span class="text"></span>
+        <atoms-alert
+          v-show="true"
+          test-id="feedback-message"
+          status="alert-info"
+          :items="[localization.screenshotQualityMayVary]"
+        />
+      </div>
+    </template>
+    <div v-else class="main-block main-block__last">
+      <span class="text"></span>
+      <div>
+        <div class="btn btn-sm loadFile">
+          <label id="labelFileLoad" for="fileLoad">{{
+            localization.uploadImage
+          }}</label>
+          <input
+            id="fileLoad"
+            ref="isFileLoad"
+            type="file"
+            accept=".png, .jpeg"
+            @change="onChangeImgLoad"
+          />
+        </div>
+        <span>{{ localization.pngJpegFilesSupported }}</span>
+      </div>
+    </div>
+
+    <div id="feedbackImgWrap" ref="feedbackImgWrap">
+      <canvas
+        id="feedbackImg"
+        ref="feedbackImg"
+        :class="{ feedbackImg: !hasTakeScreenshot }"
+      ></canvas>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import html2canvas from 'html2canvas'
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_MessageImg } from '~/components/common/feedback/models/interfaces'
+
+const props = defineProps<{
+  selectedTab: number | null
+  descriptionTyped: string
+}>()
+const emits = defineEmits<{
+  (event: 'screen-shot', value: UI_I_MessageImg): void
+  (event: 'update:description-typed', value: string): void
+}>()
+
+const descriptionTextMain = computed<string>({
+  get() {
+    return props.descriptionTyped
+  },
+  set(value) {
+    emits('update:description-typed', value)
+  },
+})
+const localization = computed<UI_I_Localization>(() => useLocal())
+// const drawingPanel = computed(() => drawingPanelFunc(localization.value))
+
+const descriptionTextPlaceholder = computed<string>(() => {
+  if (props.selectedTab === 1) return localization.value.whatIsTheProblemHowCan
+  if (props.selectedTab === 2) return localization.value.tellUsWhatYouEnjoyedSo
+  return localization.value.selectFeedbackType
+})
+const hasTakeScreenshot = ref<boolean>(false)
+const feedbackImgWrap = ref()
+const feedbackImg = ref()
+const isFileLoad = ref(null)
+const memoryParentMain = ref<string>('')
+const memoryParentModalDialog = ref<string>('')
+
+const takeScreenshot = () => {
+  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
+
+  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 = 0
+    drawingArray.push(
+      context.getImageData(
+        0,
+        0,
+        feedbackImg.value.width,
+        feedbackImg.value.height
+      )
+    )
+  })
+}
+const removeScreenshot = () => {
+  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 onChangeImgLoad = () => {
+  hasTakeScreenshot.value = true
+  if (!isFileLoad.value) return
+
+  const isFileRead = new FileReader()
+  if (!isFileRead) return
+
+  isFileRead.readAsDataURL(isFileLoad.value.files[0])
+  isFileRead.onload = () => {
+    const img = new Image()
+    if (!feedbackImg.value) return
+
+    const context = feedbackImg.value.getContext('2d')
+    img.onload = () => {
+      feedbackImg.value.width = img.width
+      feedbackImg.value.height = img.height
+      context.drawImage(img, 0, 0, img.width, img.height)
+      drawingArray.length = 0
+      indexArray = 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 drawingArray: any = []
+let indexArray = 0 // index of feedbackImg itself
+let isDrawing = false
+let startDrawingX: number | null = null
+let startDrawingY: number | null = null
+let drawColor = ''
+let drawWidth = ''
+
+const useRedMarker = () => {
+  drawColor = '#f76945'
+  drawWidth = '5'
+}
+const useGrayEraser = () => {
+  drawColor = 'lightgray'
+  drawWidth = '14'
+}
+const undoLast = () => {
+  drawColor = ''
+  drawWidth = ''
+  const context = feedbackImg.value.getContext('2d')
+  if (indexArray > 0) {
+    indexArray -= 1
+    drawingArray.pop()
+    context.putImageData(drawingArray[indexArray], 0, 0)
+  }
+}
+const clearAll = () => {
+  const context = feedbackImg.value.getContext('2d')
+  drawColor = ''
+  drawWidth = ''
+  if (indexArray <= 0) return
+  while (indexArray > 0) {
+    drawingArray.pop()
+    indexArray -= 1
+    context.putImageData(drawingArray[indexArray], 0, 0)
+  }
+}
+const start = (event: MouseEvent) => {
+  if (!drawColor) return
+  const context = feedbackImg.value.getContext('2d')
+  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
+  startDrawingX = event.pageX - canvasCoordinates.left
+  startDrawingY = event.pageY - canvasCoordinates.top
+  isDrawing = true
+  context.beginPath()
+  context.moveTo(
+    event.pageX - canvasCoordinates.left,
+    event.pageY - canvasCoordinates.top
+  )
+  event.preventDefault()
+}
+const draw = (event: MouseEvent) => {
+  if (!drawColor) return
+  const context = feedbackImg.value.getContext('2d')
+  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
+  if (!isDrawing) return
+  context.lineTo(
+    event.pageX - canvasCoordinates.left,
+    event.pageY - canvasCoordinates.top
+  )
+  context.strokeStyle = drawColor
+  context.lineWidth = drawWidth
+  context.lineCap = 'round'
+  context.lineJoin = 'round'
+  context.stroke()
+  event.preventDefault()
+}
+
+const stop = (event: MouseEvent) => {
+  if (!drawColor) return
+
+  const context = feedbackImg.value.getContext('2d')
+  const canvasCoordinates = feedbackImg.value.getBoundingClientRect()
+  if (!isDrawing) return
+
+  context.stroke()
+  context.closePath()
+  isDrawing = false
+  event.preventDefault()
+  if (
+    startDrawingX !== event.pageX - canvasCoordinates.left &&
+    startDrawingY !== event.pageY - canvasCoordinates.top
+  ) {
+    drawingArray.push(
+      context.getImageData(
+        0,
+        0,
+        feedbackImg.value.width,
+        feedbackImg.value.height
+      )
+    )
+    indexArray += 1
+  }
+}
+onMounted(() => {
+  feedbackImg.value.addEventListener('touchstart', start, false)
+  feedbackImg.value.addEventListener('touchmove', draw, false)
+  feedbackImg.value.addEventListener('mousedown', start, false)
+  feedbackImg.value.addEventListener('mousemove', draw, false)
+  feedbackImg.value.addEventListener('touchend', stop, false)
+  feedbackImg.value.addEventListener('mouseup', stop, false)
+  feedbackImg.value.addEventListener('mouseout', stop, false)
+})
+
+onBeforeUnmount(() => {
+  removeScreenshot()
+  feedbackImg.value.removeEventListener('touchstart', start, false)
+  feedbackImg.value.removeEventListener('touchmove', draw, false)
+  feedbackImg.value.removeEventListener('mousedown', start, false)
+  feedbackImg.value.removeEventListener('mousemove', draw, false)
+  feedbackImg.value.removeEventListener('touchend', stop, false)
+  feedbackImg.value.removeEventListener('mouseup', stop, false)
+  feedbackImg.value.removeEventListener('mouseout', stop, false)
+})
+</script>
+
+<style scoped lang="scss">
+.message {
+  overflow-x: auto;
+  .main-block {
+    display: flex;
+    flex-direction: row;
+    align-items: flex-start;
+    margin-bottom: 20px;
+    .text {
+      padding-top: 0px;
+      min-width: 140px;
+      margin-right: 10px;
+    }
+    .textarea {
+      height: 150px;
+      width: 100%;
+      vertical-align: start;
+      background-color: var(--modal-bg-color);
+    }
+    .email {
+      width: 100%;
+    }
+
+    &__last {
+      margin-top: -20px;
+      width: 100%;
+      .content-padding {
+        padding-left: 4px;
+        color: var(--a-link-color);
+      }
+    }
+    :deep(.alert.alert-info) {
+      width: 100%;
+    }
+  }
+}
+.loadFile {
+  width: fit-content;
+  margin-right: 10px;
+  padding: 0;
+  z-index: 11;
+  label {
+    color: inherit;
+    cursor: pointer;
+    padding: 0 10px;
+    line-height: calc(1rem - 1px);
+    letter-spacing: 0.073em;
+    font-size: 0.458333rem;
+    font-weight: 500;
+    height: 1rem;
+    padding: 0 0.5rem;
+  }
+  input {
+    width: 0.01px;
+    height: 0.01px;
+    opacity: 0;
+    overflow: hidden;
+    z-index: -1;
+  }
+}
+.feedbackImg {
+  display: none;
+}
+</style>
+<style>
+:root {
+  --a-link-color: #0072a3;
+}
+:root.dark-theme {
+  --a-link-color: #4aaed9;
+}
+</style>

package/components/common/feedback/VisitPortal.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <div class="modal-body">
+      <div>
+        {{ localization.useOurExternalIdeasPortal }}
+      </div>
+      <a id="portal-link" :href="portalLink" target="_blank">
+        <button id="visit-ideas-portal-button" class="btn btn-outline wrap">
+          <span class="text"> {{ localization.visitIdeasPortal }} </span>
+          <atoms-the-icon2 class="btn-icon" name="pop-out" />
+        </button>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { UI_I_Localization } from '~/models/interfaces'
+const localization = computed<UI_I_Localization>(() => useLocal())
+const portalLink = ref<string>('#')
+</script>
+
+<style scoped lang="scss">
+.modal-body {
+  padding: 0;
+  a {
+    text-decoration: none;
+
+    .btn.btn-outline.wrap {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .text {
+        color: var(--icon-fill-hover-color);
+      }
+      & .btn-icon {
+        width: 16px;
+        height: 16px;
+        margin-left: 5px;
+        fill: var(--icon-fill-hover-color);
+      }
+    }
+  }
+}
+</style>
+<style>
+:root {
+  --icon-fill-hover-color: rgb(0, 121, 184);
+}
+:root.dark-theme {
+  --icon-fill-hover-color: rgb(73, 175, 217);
+}
+</style>

package/components/common/feedback/config/drawingPanel.ts

@@ -0,0 +1,31 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_DrawingItem } from '~/components/common/feedback/models/interfaces'
+export const drawingPanelFunc = (localization: UI_I_Localization) => {
+  const tabs: UI_I_DrawingItem[] = [
+    {
+      // id: 1,
+      function: 'useRedMarker',
+      text: localization.useRedMarker,
+      // current: false
+    },
+    {
+      // id: 2,
+      function: 'useGrayEraser',
+      text: localization.useGrayEraser,
+      // current: false
+    },
+    {
+      // id: 3,
+      function: 'undoLast',
+      text: localization.undo,
+      // current: false
+    },
+    {
+
+      function: 'clearAll',
+      text: localization.clearAll,
+      // current: false
+    },
+  ]
+  return tabs
+}

package/components/common/feedback/config/feedbackTabs.ts

@@ -0,0 +1,24 @@
+import { UI_I_Localization } from '~/models/interfaces'
+import { UI_I_FeedbackButtonsItem } from '~/components/common/feedback/models/interfaces'
+export const feedbackTabs = (
+  localization: UI_I_Localization
+
+): UI_I_FeedbackButtonsItem[] => {
+  return [
+    {
+      text: `${localization.problem}`,
+      key: 1,
+      iconName: 'warning-standart',
+    },
+    {
+      text: `${localization.complement}`,
+      key: 2,
+      iconName: 'heart',
+    },
+    {
+      text: `${localization.idea}`,
+      key: 3,
+      iconName: 'lightbulb',
+    },
+  ]
+}

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

@@ -0,0 +1,15 @@
+export interface UI_I_FeedbackButtonsItem {
+  text: string
+  key: number
+  iconName: string
+}
+export interface UI_I_MessageImg {
+  hasTakeScreenshot: boolean
+  width: string
+}
+export interface UI_I_DrawingItem {
+
+  function: string
+  text: string
+
+}

package/components/common/graph/Graph.vue

@@ -0,0 +1,107 @@
+<template>
+  <div class="graph-content">
+    <template v-if="chartOptions">
+      <client-only>
+        <highchart
+          :options="chartOptions"
+          :modules="['exporting', 'export-data']"
+          class="graph-block"
+        />
+      </client-only>
+    </template>
+  </div>
+</template>
+
+<script setup lang="ts">
+import {
+  I_LineGraph,
+  I_DiskGraph,
+} from 'bfg-nuxt-3-graph/graph/models/interfaces'
+
+const props = defineProps<{
+  chart?: any
+  data: I_LineGraph | I_DiskGraph
+  update: number
+  exportType?: string
+  selectedRow?: number[]
+}>()
+
+let chart: any = null
+const exportChart = (type: string): void => {
+  if (type === 'png') {
+    chart.exportChart({
+      type: 'image/png',
+    })
+  } else if (type === 'jpeg') {
+    chart.exportChart({
+      type: 'image/jpeg',
+    })
+  } else if (type === 'svg') {
+    chart.exportChart({
+      type: 'image/svg+xml',
+    })
+  } else if (type === 'csv') {
+    chart.downloadCSV()
+  }
+}
+
+const chartOptions = ref<I_LineGraph | I_DiskGraph | null>(null)
+const initGraph = () => {
+  if (!props.data) return
+  setTimeout(() => {
+    chartOptions.value = props.data
+  }, 500)
+}
+
+watch(
+  () => props.update,
+  (val) => {
+    val && initGraph()
+  },
+  { immediate: true }
+)
+
+watch(
+  () => props.exportType,
+  (val) => {
+    if (!val) return
+
+    exportChart(val)
+  }
+)
+
+watch(
+  () => props.chart,
+  (val) => {
+    if (val.series) chart = val
+  },
+  { deep: true }
+)
+
+const updateSeriesStrokeWidth = (data: number[]): void => {
+  if (!chart) return
+
+  chart.series.forEach((_: any, key: number) => {
+    chart.options.series[key].lineWidth = 1.5
+
+    if (data.includes(key)) chart.options.series[key].lineWidth = 3
+  })
+}
+
+watch(
+  () => props.selectedRow,
+  (val) => val && updateSeriesStrokeWidth(val)
+)
+</script>
+
+<style scoped lang="scss">
+.graph-content {
+  width: 100%;
+  //height: inherit;
+  height: 100%;
+
+  .graph-block {
+    height: 100%;
+  }
+}
+</style>