chamomind/jws-frontend
chamomind/jws-frontend
7
0
Fork 0
Code Issues Projects Releases Packages 1 Wiki Activity Actions

Squashed commit of the following:

Browse source 
commit eb6c7b164a9f182f8d1ce73cc5354866c6d6b10e
Author: puriphatt <puriphat@frappet.com>
Date:   Wed Sep 11 11:29:44 2024 +0700

    refactor: no img close to default on create

commit eae9eb26071cc2985624bb1c6ce551bf5eb6eb8b
Author: puriphatt <puriphat@frappet.com>
Date:   Wed Sep 11 11:04:04 2024 +0700

    refactor/feat: save => apply, disabled selected img, no img close to default

commit ccbf80fc53db3144873c049bd6dbd37b4e2e9ff3
Author: puriphatt <puriphat@frappet.com>
Date:   Wed Sep 11 09:31:32 2024 +0700

    fix(01): use submit function

commit 36b4f6ca15e5966f37dfefc9fdb744feec60dd27
Author: puriphatt <puriphat@frappet.com>
Date:   Tue Sep 10 17:45:19 2024 +0700

    fix: imgList error

commit bac0eaf3ab955672ae0c78d3295b4a839827c5f2
Author: puriphatt <puriphat@frappet.com>
Date:   Tue Sep 10 17:18:03 2024 +0700

    refactor(03): customer new upload img dialog

commit 9d7398e9613a738c33e265482cdb7d7bb250ea9f
Author: puriphatt <puriphat@frappet.com>
Date:   Tue Sep 10 15:40:39 2024 +0700

    refactor(02): new upload dialog

commit 8b91d43f41eae3ba2442f6c742d617c25ee180cb
Author: puriphatt <puriphat@frappet.com>
Date:   Tue Sep 10 15:25:21 2024 +0700

    refactor(01): new upload dialog, confirm remove, individual action

commit 61caf1919168bc5635568d7ca246574fdc43cd04
Author: puriphatt <puriphat@frappet.com>
Date:   Mon Sep 9 17:08:42 2024 +0700

    refactor(01): branch new img upload

commit e791b7316d001d839c8afb1950f7331c62d9e81a
Author: puriphatt <puriphat@frappet.com>
Date:   Mon Sep 9 17:08:42 2024 +0700

    refactor(02): personnel new img upload

commit af4d11312b9cb666338901efa9971117cb7738c4
Author: puriphatt <puriphat@frappet.com>
Date:   Mon Sep 9 17:08:42 2024 +0700

    feat(02): new image upload

commit e4d7afdb8c74d65a550644f2c60f70909d51d4a8
Author: puriphatt <puriphat@frappet.com>
Date:   Mon Sep 9 17:08:41 2024 +0700

    refactor: mock select image function

commit 5ab3f045b9c7d2c821920c12114da15eed09655a
Author: puriphatt <puriphat@frappet.com>
Date:   Mon Sep 9 17:08:41 2024 +0700

    refactor: mock new image preview
This commit is contained in:
puriphatt 2024-09-11 16:43:41 +07:00
parent ab0b3bb4f3
commit 62fc7055dd
13 changed files with 925 additions and 254 deletions
Download patch file Download diff file Expand all files Collapse all files

355
src/components/ImageUploadDialog.vue
View file

@ -1,17 +1,23 @@
<script lang="ts" setup>
import { ref, watch } from 'vue';
import AppBox from './app/AppBox.vue';
import { CancelButton, ClearButton, SaveButton } from './button';
import { dialog } from 'src/stores/utils';
defineExpose({ browse });
defineProps<{
const props = defineProps<{
changeDisabled?: boolean;
clearButtonDisabled?: boolean;
clearButton?: boolean;
hiddenFooter?: boolean;
defaultUrl?: string;
onCreate?: boolean;
}>();
const emit = defineEmits<{
(e: 'save', file: File | null, url: string | null): void;
(e: 'addImage', file: File | null): void;
(e: 'removeImage', name: string): void;
(e: 'submit', name: string): void;
}>();
const imageUrl = defineModel<string>('imageUrl', {
@ -29,7 +35,22 @@ const dialogState = defineModel<boolean>('dialogState', {
const file = defineModel<File | null>('file', {
required: true,
});
const dataList = defineModel<{ selectedImage: string; list: string[] }>(
'dataList',
{
required: false,
default: { selectedImage: '', list: [] },
},
);
const onCreateData = defineModel<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>('onCreateDataList', {
required: false,
default: { selectedImage: '', list: [] },
});
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
const reader = new FileReader();
const inputFile = (() => {
const _element = document.createElement('input');
@ -39,8 +60,25 @@ const inputFile = (() => {
return _element;
})();
const selectedImg = ref('');
const tempImage = ref<string | null>('');
reader.addEventListener('load', () => {
if (typeof reader.result === 'string') imageUrl.value = reader.result;
if (typeof reader.result === 'string') {
tempImage.value = reader.result;
if (props.onCreate) {
onCreateData.value.list.push({
url: reader.result,
imgFile: file.value,
name: Date.now().toString(),
});
onCreateData.value.selectedImage =
onCreateData.value.list[onCreateData.value.list.length - 1].name;
selectedImg.value = reader.result;
} else {
emit('addImage', file.value);
}
}
});
function browse() {
@ -55,12 +93,13 @@ function change(e: Event) {
file.value = _file;
reader.readAsDataURL(_file);
if (!dialogState.value) {
emit('save', _file, imageUrl.value);
emit('save', _file, tempImage.value);
}
}
}
async function downloadImage(url: string) {
async function downloadImage(url: string | null) {
if (!url) return;
const res = await fetch(url);
const blob = await res.blob();
@ -76,57 +115,235 @@ async function downloadImage(url: string) {
a.click();
a.remove();
}
function selectImg(name: string) {
if (props.onCreate) {
selectedImg.value = name;
tempImage.value = name;
onCreateData.value.selectedImage =
onCreateData.value.list.find((v) => v.url === name)?.name || '';
} else {
selectedImg.value = name.split('/').pop() || '';
tempImage.value = `${apiBaseUrl}/${name}`;
}
}
function closeCheckToDefault() {
let imgNameList: string[];
let currentSelected: string;
let inList: boolean;
if (props.onCreate) {
imgNameList = onCreateData.value.list.map((v) => v.url || '');
currentSelected = imageUrl.value;
} else {
imgNameList = dataList.value.list.map((v) => v.split('/').pop() || '');
currentSelected = dataList.value.selectedImage;
}
inList = imgNameList.includes(currentSelected);
if (!inList && currentSelected !== '') {
selectImg('');
emit('submit', selectedImg.value);
}
}
watch(
() => dialogState.value,
() => {
if (dialogState.value) {
if (props.onCreate) {
tempImage.value = imageUrl.value;
selectedImg.value = imageUrl.value;
} else {
tempImage.value = `${imageUrl.value}?ts=${Date.now()}`;
selectedImg.value = dataList.value.selectedImage;
}
} else {
tempImage.value = '';
selectedImg.value = '';
}
},
);
watch(
() => dataList.value.list,
(n, o) => {
if (n.length > o.length) {
selectImg(n[n.length - 1]);
}
},
{ deep: true },
);
</script>
<template>
<q-dialog v-model="dialogState">
<AppBox class="image-dialog-content">
<q-dialog v-model="dialogState" @before-hide="closeCheckToDefault">
<AppBox class="image-dialog-content column">
<!-- header -->
<div class="row items-center q-py-sm q-px-md bordered-b">
<div style="width: 38.61px" />
<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
<CancelButton v-close-popup icon-only @click="closeCheckToDefault" />
</div>
</div>
<!-- body -->
<div class="q-px-lg surface-2 col row full-width">
<div
class="image-dialog-body q-my-lg relative-position rounded surface-1 flex items-center"
>
<img
:src="tempImage || fallbackUrl"
v-if="tempImage || fallbackUrl"
style="object-fit: contain; width: 100%"
@error="
() => {
tempImage = '';
}
"
/>
<div
style="object-fit: contain; height: 100%; width: 100%"
v-if="!tempImage && !fallbackUrl"
>
<slot name="error"></slot>
</div>
<div class="absolute-top-left q-pa-md">
<q-btn
class="upload-image-btn q-mr-md"
icon="mdi-camera-plus-outline"
id="btn-add-img"
size="md"
unelevated
round
v-if="!changeDisabled"
@click="
() => {
inputFile?.click();
}
"
style="color: hsla(var(--stone-0-hsl) / 0.7)"
></q-btn>
<q-btn
v-if="!onCreate"
class="upload-image-btn"
icon="mdi-download-outline"
id="btn-download-img"
size="md"
unelevated
round
@click="downloadImage(tempImage)"
style="color: hsla(var(--stone-0-hsl) / 0.7)"
></q-btn>
</div>
</div>
<div
v-if="!hiddenFooter"
class="col q-ml-md q-pt-sm q-my-md"
style="width: 40em; height: 30em; overflow: auto"
>
<div class="row items-center q-gutter-sm">
<div
class="rounded surface-1 relative-position"
:class="{
'selected-img': selectedImg === '',
}"
style="
object-fit: cover;
height: 5vw;
width: 5vw;
overflow: hidden;
"
@click="selectImg('')"
>
<slot name="error"></slot>
</div>
<template v-if="dataList">
<div
v-for="(img, n) in onCreate
? onCreateData.list.map((item) => item.url)
: dataList.list"
:key="n"
class="rounded surface-1 relative-position"
:class="{
'selected-img':
selectedImg && onCreate
? selectedImg === img
: selectedImg === img.split('/').pop(),
}"
style="height: 5vw; width: 5vw"
@click="selectImg(img)"
>
<q-btn
icon="mdi-close"
class="absolute-top-right"
rounded
padding="0"
size="sm"
style="
z-index: 2;
top: -5px;
right: -5px;
background: var(--surface-1);
color: hsl(var(--negative-bg));
"
@click.stop="
() => {
if (onCreate) {
const v = onCreateData.list.splice(n, 1);
if (v[0].url === selectedImg) {
if (onCreateData.list.length === 0 || n === 0) {
selectImg('');
} else {
selectImg(onCreateData.list[n - 1].url);
}
}
} else {
dialog({
color: 'negative',
icon: 'mdi-alert',
title: $t('dialog.title.confirmDelete'),
actionText: $t('general.delete'),
message: $t('dialog.message.confirmDelete'),
action: async () => {
$emit('removeImage', img);
const index = dataList.list.indexOf(img);
if (img.split('/').pop() === selectedImg) {
if (dataList.list.length === 0 || index === 0) {
selectImg('');
} else {
selectImg(dataList.list[index - 1]);
}
}
},
cancel: () => {},
});
}
}
"
></q-btn>
<div
class="rounded full-width full-height surface-1"
style="overflow: hidden"
>
<img
v-if="img"
:src="onCreate ? img : `${apiBaseUrl}/${img}`"
class=""
style="object-fit: cover; height: 100%; width: 100%"
/>
</div>
</div>
</template>
</div>
</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>
<!-- footer -->
<div
class="row items-center justify-end q-py-sm q-px-md bordered-t"
v-if="!hiddenFooter"
@ -147,20 +364,25 @@ async function downloadImage(url: string) {
"
v-if="clearButton"
/>
<CancelButton
<!-- <CancelButton
id="btn-cancel-img"
outlined
class="q-px-md q-mr-sm"
@click="
inputFile && (inputFile.value = ''),
(imageUrl = defaultUrl || fallbackUrl || ''),
(tempImage = defaultUrl || fallbackUrl || ''),
(file = null)
"
v-close-popup
/>
/> -->
<SaveButton
id="btn-save-img"
outlined
@click="$emit('save', inputFile?.files?.[0] || null, imageUrl)"
:disabled="dataList.selectedImage === selectedImg"
:label="$t('general.apply')"
@click="$emit('submit', selectedImg)"
/>
<!-- @click="$emit('save', inputFile?.files?.[0] || null, tempImage)" -->
</div>
</AppBox>
</q-dialog>
@ -171,24 +393,24 @@ async function downloadImage(url: string) {
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%;
max-width: 70%;
}
}
.image-dialog-body {
overflow-y: auto;
background-color: var(--surface-2) !important;
/* overflow-y: auto;
background-color: var(--surface-1) !important;
position: relative;
display: flex;
flex-direction: column;
flex: 1;
height: calc(100vh - 200px);
flex: 1; */
overflow: hidden;
width: 30em;
height: 30em;
}
.upload-image-btn {
@ -227,4 +449,21 @@ async function downloadImage(url: string) {
border: 1px solid hsl(var(--negative-bg));
}
}
.selected-img {
position: relative;
border: 2px solid hsl(var(--info-bg));
}
.selected-img:before {
content: ' ';
position: absolute;
z-index: 1;
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
border: 2px solid var(--surface-1);
border-radius: 5px;
}
</style>