From 1f8d7fd76187e5906105ba01936760a02de3b658 Mon Sep 17 00:00:00 2001
From: Net <thanaphon@frappet.com>
Date: Wed, 11 Sep 2024 13:42:44 +0700
Subject: [PATCH] refactor: add new components

---
 src/components/ImageHover.vue         | 136 +++++++++++++++
 src/components/QrCodeUploadDialog.vue | 232 ++++++++++++++++++++++++++
 2 files changed, 368 insertions(+)
 create mode 100644 src/components/ImageHover.vue
 create mode 100644 src/components/QrCodeUploadDialog.vue

diff --git a/src/components/ImageHover.vue b/src/components/ImageHover.vue
new file mode 100644
index 00000000..e3c1f00c
--- /dev/null
+++ b/src/components/ImageHover.vue
@@ -0,0 +1,136 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+withDefaults(
+  defineProps<{
+    img?: string | null;
+    icon?: string;
+    title?: string;
+    caption?: string;
+    color?: string;
+    bgColor?: string;
+    toggleTitle?: string;
+    fallbackImg?: string;
+    fallbackCover?: string;
+
+    hideFade?: boolean;
+    hideActive?: boolean;
+    active?: boolean;
+    readonly?: boolean;
+    useToggle?: boolean;
+    labelAction?: string;
+
+    menu?: { icon: string; color: string; bgColor: string }[];
+    tabsList?: { name: string | number; label: string }[];
+  }>(),
+  {},
+);
+const showOverlay = ref(false);
+
+defineEmits<{
+  (e: 'view'): void;
+  (e: 'edit'): void;
+}>();
+</script>
+
+<template>
+  <div>
+    <div class="surface-1" style="border: 4px solid var(--surface-1)">
+      <q-avatar
+        square
+        size="10rem"
+        font-size="8rem"
+        class="relative-position"
+        style="z-index: 1; cursor: pointer"
+        @mouseover="showOverlay = true"
+        @mouseleave="showOverlay = false"
+        @click.stop="$emit('view')"
+      >
+        <div
+          v-if="img"
+          class="full-width full-height"
+          :style="{
+            background: `${bgColor || 'var(--brand-1)'}`,
+            color: `${color || 'white'}`,
+          }"
+        >
+          <q-img id="profile-view" :src="img" :ratio="1">
+            <template #error>
+              <q-img
+                v-if="fallbackImg"
+                :src="fallbackImg"
+                :ratio="1"
+                style="background-color: transparent"
+              >
+                <template #error>
+                  <div
+                    class="full-width full-height flex items-center justify-center"
+                    :style="{
+                      background: `${bgColor || 'var(--brand-1)'}`,
+                      color: `${color || 'white'}`,
+                    }"
+                  >
+                    <q-icon :name="icon || 'mdi-account'" />
+                  </div>
+                </template>
+              </q-img>
+              <div
+                v-else
+                class="full-width full-height flex items-center justify-center"
+                :style="{
+                  background: `${bgColor || 'var(--brand-1)'}`,
+                  color: `${color || 'white'}`,
+                }"
+              >
+                <q-icon :name="icon || 'mdi-account'" />
+              </div>
+            </template>
+          </q-img>
+        </div>
+
+        <div
+          v-else
+          class="full-width full-height flex items-center justify-center"
+          :style="{
+            background: `${bgColor || 'var(--brand-1)'}`,
+            color: `${color || 'white'}`,
+          }"
+        >
+          <q-icon :name="icon || 'mdi-account'" />
+        </div>
+
+        <Transition name="slide-fade">
+          <div
+            v-if="showOverlay && !readonly"
+            class="absolute text-caption full-width full-height"
+            style="overflow: hidden"
+            :class="{ dark: $q.dark.isActive }"
+          >
+            <div
+              class="upload-overlay absolute-bottom flex items-center justify-center"
+              @click.stop="$emit('edit')"
+            >
+              {{
+                labelAction === undefined
+                  ? $t('general.editImage')
+                  : labelAction
+              }}
+            </div>
+          </div>
+        </Transition>
+      </q-avatar>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.upload-overlay {
+  top: 60%;
+  background-color: hsla(var(--gray-10-hsl) / 0.5);
+  color: white;
+
+  &.dark {
+    background-color: rgba(255, 255, 255, 0.2);
+  }
+}
+</style>
diff --git a/src/components/QrCodeUploadDialog.vue b/src/components/QrCodeUploadDialog.vue
new file mode 100644
index 00000000..3625286a
--- /dev/null
+++ b/src/components/QrCodeUploadDialog.vue
@@ -0,0 +1,232 @@
+<script lang="ts" setup>
+import AppBox from './app/AppBox.vue';
+import { CancelButton, ClearButton, SaveButton } from './button';
+
+defineExpose({ browse });
+defineProps<{
+  changeDisabled?: boolean;
+  clearButtonDisabled?: boolean;
+  clearButton?: boolean;
+  hiddenFooter?: boolean;
+  defaultUrl?: string;
+}>();
+const emit = defineEmits<{
+  (e: 'save', file: File | null, url: string | null): void;
+  (e: 'clear'): void;
+}>();
+
+const imageUrl = defineModel<string>('imageUrl', {
+  required: false,
+  default: '',
+});
+const fallbackUrl = defineModel<string>('fallbackUrl', {
+  required: false,
+  default: '',
+});
+const dialogState = defineModel<boolean>('dialogState', {
+  required: false,
+  default: true,
+});
+const file = defineModel<File | null>('file', {
+  required: true,
+});
+
+const reader = new FileReader();
+const inputFile = (() => {
+  const _element = document.createElement('input');
+  _element.type = 'file';
+  _element.accept = 'image/*';
+  _element.addEventListener('change', change);
+  return _element;
+})();
+
+reader.addEventListener('load', () => {
+  if (typeof reader.result === 'string') imageUrl.value = reader.result;
+});
+
+function browse() {
+  inputFile?.click();
+}
+
+function change(e: Event) {
+  const _element = e.target as HTMLInputElement | null;
+  const _file = _element?.files?.[0];
+
+  if (_file) {
+    file.value = _file;
+    reader.readAsDataURL(_file);
+    if (!dialogState.value) {
+      emit('save', _file, imageUrl.value);
+    }
+  }
+}
+
+async function downloadImage(url: string) {
+  const res = await fetch(url);
+  const blob = await res.blob();
+
+  let extension = '';
+
+  if (blob.type === 'image/jpeg') extension = '.jpg';
+  else if (blob.type === 'image/png') extension = '.png';
+  else return;
+
+  let a = document.createElement('a');
+  a.download = `download${extension}`;
+  a.href = window.URL.createObjectURL(blob);
+  a.click();
+  a.remove();
+}
+</script>
+<template>
+  <q-dialog v-model="dialogState">
+    <AppBox class="image-dialog-content">
+      <div class="row items-center q-py-sm q-px-md bordered-b">
+        <div style="flex: 1"><slot name="title" /></div>
+        <div>
+          <q-btn
+            round
+            flat
+            icon="mdi-close"
+            padding="xs"
+            class="close-btn"
+            :class="{ dark: $q.dark.isActive }"
+            v-close-popup
+          />
+        </div>
+      </div>
+      <div class="image-dialog-body">
+        <img
+          :src="imageUrl || fallbackUrl"
+          v-if="imageUrl || fallbackUrl"
+          class="image-container"
+          style="object-fit: contain"
+          @error="imageUrl = ''"
+        />
+        <div class="image-container" v-if="!imageUrl && !fallbackUrl">
+          <slot name="error"></slot>
+        </div>
+        <div style="position: fixed; padding: var(--size-2)">
+          <q-btn
+            class="upload-image-btn q-mr-md"
+            icon="mdi-camera-outline"
+            size="md"
+            unelevated
+            round
+            v-if="!changeDisabled"
+            @click="inputFile?.click()"
+            style="color: hsla(var(--stone-0-hsl) / 0.7)"
+          ></q-btn>
+          <q-btn
+            class="upload-image-btn"
+            icon="mdi-download-outline"
+            size="md"
+            unelevated
+            round
+            @click="downloadImage(imageUrl)"
+            style="color: hsla(var(--stone-0-hsl) / 0.7)"
+          ></q-btn>
+        </div>
+      </div>
+      <div
+        class="row items-center justify-end q-py-sm q-px-md bordered-t"
+        v-if="!hiddenFooter"
+      >
+        <ClearButton
+          outlined
+          @click="
+            inputFile && (inputFile.value = ''),
+              (imageUrl = defaultUrl || fallbackUrl || ''),
+              (file = null),
+              $emit('clear')
+          "
+          class="q-px-md q-mr-auto"
+          :disabled="
+            clearButtonDisabled ||
+            imageUrl === fallbackUrl ||
+            imageUrl === defaultUrl ||
+            !imageUrl
+          "
+          v-if="clearButton"
+        />
+        <CancelButton
+          outlined
+          class="q-px-md q-mr-sm"
+          @click="
+            inputFile && (inputFile.value = ''),
+              (imageUrl = defaultUrl || fallbackUrl || ''),
+              (file = null)
+          "
+          v-close-popup
+        />
+        <SaveButton
+          outlined
+          @click="$emit('save', inputFile?.files?.[0] || null, imageUrl)"
+        />
+      </div>
+    </AppBox>
+  </q-dialog>
+</template>
+
+<style scoped>
+.image-dialog-content {
+  padding: 0;
+  border-radius: var(--radius-2);
+  flex-wrap: nowrap;
+  width: 100%;
+  max-width: 80%;
+}
+
+@media (min-width: 768px) {
+  .image-dialog-content {
+    max-width: 60%;
+  }
+}
+
+.image-dialog-body {
+  overflow-y: auto;
+  background-color: var(--surface-2) !important;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  height: calc(100vh - 200px);
+}
+
+.upload-image-btn {
+  transition: 0.3s background-color ease-in-out;
+  background-color: hsla(0 0% 0% / 0.2);
+
+  backdrop-filter: blur(1px);
+
+  &:not(:hover) {
+    color: hsla(0 0% 40% / 1);
+    background-color: hsla(0 0% 0% / 0.2);
+  }
+}
+
+.image-container {
+  width: 100%;
+  height: calc(100vh - 200px);
+  min-height: 480px;
+
+  & > :deep(*) {
+    height: 100%;
+    width: 100%;
+  }
+}
+
+.image-container > :deep(*:not(:first-child)) {
+  display: none;
+}
+
+.close-btn {
+  color: hsl(var(--negative-bg));
+  background-color: hsla(var(--negative-bg) / 0.1);
+
+  &.dark {
+    background-color: transparent;
+    border: 1px solid hsl(var(--negative-bg));
+  }
+}
+</style>