Squashed commit of the following:
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
parent
ab0b3bb4f3
commit
62fc7055dd
13 changed files with 925 additions and 254 deletions
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ export default {
|
|||
success: 'Success',
|
||||
taxNo: 'Legal Person',
|
||||
contactName: 'Contact Name',
|
||||
image: 'Image of ',
|
||||
apply: 'Apply',
|
||||
},
|
||||
|
||||
menu: {
|
||||
|
|
|
|||
|
|
@ -60,6 +60,8 @@ export default {
|
|||
success: 'สำเร็จ',
|
||||
taxNo: 'ทะเบียนนิติบุคคล',
|
||||
contactName: 'ติดต่อ',
|
||||
image: 'รูปภาพ',
|
||||
apply: 'นำไปใช้',
|
||||
},
|
||||
|
||||
menu: {
|
||||
|
|
|
|||
|
|
@ -47,7 +47,6 @@ import {
|
|||
UndoButton,
|
||||
} from 'components/button';
|
||||
|
||||
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
|
||||
const $q = useQuasar();
|
||||
const { t } = useI18n();
|
||||
const utilsStore = useUtilsStore();
|
||||
|
|
@ -160,12 +159,18 @@ const refQrCodeUpload = ref();
|
|||
const refImageUpload = ref();
|
||||
const isImageEdit = ref(false);
|
||||
const isQrCodeEdit = ref(false);
|
||||
const profileFile = ref<File | undefined>(undefined);
|
||||
const profileFile = ref<File | null>(null);
|
||||
const qrCodeFile = ref<File | undefined>(undefined);
|
||||
const imageUrl = ref<string>('');
|
||||
const prevImageUrl = ref<string>('');
|
||||
const currentNode = ref<BranchWithChildren>();
|
||||
const imageDialog = ref(false);
|
||||
const refreshImageState = ref(false);
|
||||
const imageList = ref<{ selectedImage: string; list: string[] }>();
|
||||
const onCreateImageList = ref<{
|
||||
selectedImage: string;
|
||||
list: { url: string; imgFile: File | null; name: string }[];
|
||||
}>({ selectedImage: '', list: [] });
|
||||
const qrCodeDialog = ref(false);
|
||||
|
||||
const qrCodeimageUrl = ref<string>('');
|
||||
|
|
@ -335,6 +340,7 @@ const defaultFormData = {
|
|||
lineId: '',
|
||||
webUrl: '',
|
||||
virtual: false,
|
||||
selectedImage: '',
|
||||
};
|
||||
|
||||
const formDialogRef = ref();
|
||||
|
|
@ -350,11 +356,11 @@ const currentEdit = ref<{ id: string; code: string }>({
|
|||
code: '',
|
||||
});
|
||||
const formData = ref<
|
||||
Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
|
||||
Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage'>
|
||||
>(structuredClone(defaultFormData));
|
||||
|
||||
const prevFormData = ref<
|
||||
Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage' | 'imageUrl'>
|
||||
Omit<BranchCreate & { codeHeadOffice?: string }, 'qrCodeImage'>
|
||||
>(structuredClone(defaultFormData));
|
||||
|
||||
const modalDrawer = ref<boolean>(false);
|
||||
|
|
@ -383,8 +389,8 @@ async function selectedSubBranche(id: string) {
|
|||
async function fetchBranchById(id: string) {
|
||||
const res = await branchStore.fetchById(id, { includeContact: true });
|
||||
if (res) {
|
||||
qrCodeimageUrl.value = `${apiBaseUrl}/branch/${res.id}/line-image?ts=${Date.now()}`;
|
||||
imageUrl.value = `${apiBaseUrl}/branch/${res.id}/branch-image`;
|
||||
qrCodeimageUrl.value = `${baseUrl}/branch/${res.id}/image?ts=${Date.now()}`;
|
||||
imageUrl.value = `${baseUrl}/branch/${res.id}/image/${res.selectedImage}`;
|
||||
prevImageUrl.value = res.imageUrl;
|
||||
formBankBook.value = res.bank;
|
||||
|
||||
|
|
@ -417,6 +423,7 @@ async function fetchBranchById(id: string) {
|
|||
status: res.status,
|
||||
webUrl: res.webUrl,
|
||||
virtual: res.virtual,
|
||||
selectedImage: res.selectedImage,
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -447,8 +454,9 @@ async function undo() {
|
|||
isQrCodeEdit.value = false;
|
||||
isImageEdit.value = false;
|
||||
formType.value = 'view';
|
||||
imageUrl.value = prevImageUrl.value;
|
||||
formData.value = prevFormData.value;
|
||||
const tempSelectedImage = formData.value.selectedImage;
|
||||
formData.value = JSON.parse(JSON.stringify(prevFormData.value));
|
||||
formData.value.selectedImage = tempSelectedImage;
|
||||
}
|
||||
|
||||
watch(expandedTree, async () => {
|
||||
|
|
@ -501,9 +509,7 @@ function drawerEdit() {
|
|||
isQrCodeEdit.value = true;
|
||||
isImageEdit.value = true;
|
||||
formType.value = 'edit';
|
||||
prevFormData.value = {
|
||||
...formData.value,
|
||||
};
|
||||
prevFormData.value = JSON.parse(JSON.stringify(formData.value));
|
||||
}
|
||||
|
||||
const currentBranchAdmin = ref<User | null>(null);
|
||||
|
|
@ -514,6 +520,8 @@ async function triggerEdit(
|
|||
code?: string,
|
||||
) {
|
||||
await fetchBranchById(id);
|
||||
await fetchImageList(id, formData.value.selectedImage || '');
|
||||
|
||||
if (openFormType === 'form') {
|
||||
formType.value = 'edit';
|
||||
openDialog();
|
||||
|
|
@ -675,12 +683,12 @@ async function triggerChangeStatus(
|
|||
});
|
||||
}
|
||||
|
||||
async function onSubmit() {
|
||||
if (formType.value === 'edit') {
|
||||
async function onSubmit(submitSelectedItem?: boolean) {
|
||||
if (formType.value === 'edit' || submitSelectedItem) {
|
||||
delete formData.value['codeHeadOffice'];
|
||||
delete formData.value['code'];
|
||||
|
||||
await branchStore.editById(
|
||||
const res = await branchStore.editById(
|
||||
currentEdit.value.id,
|
||||
{
|
||||
...formData.value,
|
||||
|
|
@ -695,8 +703,12 @@ async function onSubmit() {
|
|||
},
|
||||
);
|
||||
|
||||
formData.value.codeHeadOffice = formData.value.code = res.code;
|
||||
imageUrl.value = `${baseUrl}/branch/${res.id}/image/${res.selectedImage}`;
|
||||
|
||||
await fetchList({ pageSize: 99999 });
|
||||
if (!imageDialog.value) modalDrawer.value = false;
|
||||
|
||||
if (!imageDialog.value) modalDrawer.value = submitSelectedItem || false;
|
||||
modal.value = false;
|
||||
}
|
||||
|
||||
|
|
@ -709,6 +721,7 @@ async function onSubmit() {
|
|||
imageUrl: profileFile.value,
|
||||
},
|
||||
formBankBook.value,
|
||||
onCreateImageList.value,
|
||||
);
|
||||
|
||||
await fetchList({ pageSize: 99999 });
|
||||
|
|
@ -801,6 +814,15 @@ function handleHold(node: BranchWithChildren) {
|
|||
// };
|
||||
}
|
||||
|
||||
async function fetchImageList(id: string, selectedName: string) {
|
||||
const res = await branchStore.fetchImageListById(id);
|
||||
imageList.value = {
|
||||
selectedImage: selectedName,
|
||||
list: res.map((n: string) => `branch/${id}/image/${n}`),
|
||||
};
|
||||
return res;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => profileFile.value,
|
||||
() => {
|
||||
|
|
@ -1291,7 +1313,11 @@ watch(currentHq, () => {
|
|||
:ratio="1"
|
||||
:src="
|
||||
baseUrl +
|
||||
`/branch/${props.row.id}/branch-image?ts=${Date.now()}`
|
||||
`/branch/${props.row.id}/image/${props.row.selectedImage}`.concat(
|
||||
refreshImageState
|
||||
? `?ts=${Date.now()}`
|
||||
: '',
|
||||
)
|
||||
"
|
||||
>
|
||||
<template #error>
|
||||
|
|
@ -1392,6 +1418,7 @@ watch(currentHq, () => {
|
|||
'subBranch',
|
||||
);
|
||||
}
|
||||
await drawerEdit();
|
||||
formType = 'edit';
|
||||
}
|
||||
"
|
||||
|
|
@ -1465,7 +1492,7 @@ watch(currentHq, () => {
|
|||
$i18n.locale === 'eng'
|
||||
? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
|
||||
: `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
|
||||
branchImgUrl: `/branch/${props.row.id}/branch-image`,
|
||||
branchImgUrl: `/branch/${props.row.id}/branch`,
|
||||
}"
|
||||
:field-selected="fieldSelected"
|
||||
:badge-field="['branchLabelStatus']"
|
||||
|
|
@ -1517,6 +1544,7 @@ watch(currentHq, () => {
|
|||
'subBranch',
|
||||
);
|
||||
}
|
||||
await drawerEdit();
|
||||
formType = 'edit';
|
||||
}
|
||||
"
|
||||
|
|
@ -1556,13 +1584,15 @@ watch(currentHq, () => {
|
|||
}
|
||||
"
|
||||
:close="
|
||||
() => (
|
||||
(formLastSubBranch = 0),
|
||||
(modal = false),
|
||||
(profileFile = undefined),
|
||||
(isImageEdit = false),
|
||||
(isSubCreate = false)
|
||||
)
|
||||
() => {
|
||||
formLastSubBranch = 0;
|
||||
modal = false;
|
||||
profileFile = null;
|
||||
isImageEdit = false;
|
||||
isSubCreate = false;
|
||||
imageList = { selectedImage: '', list: [] };
|
||||
onCreateImageList = { selectedImage: '', list: [] };
|
||||
}
|
||||
"
|
||||
>
|
||||
<div class="q-mx-lg q-mt-lg">
|
||||
|
|
@ -1604,8 +1634,13 @@ watch(currentHq, () => {
|
|||
: '--violet-11'
|
||||
}-hsl)/${imageUrl ? '0' : '0.15'})`"
|
||||
:menu="formMenuIcon"
|
||||
@view="imageDialog = true"
|
||||
@edit="refImageUpload && refImageUpload.browse()"
|
||||
@view="
|
||||
() => {
|
||||
imageDialog = true;
|
||||
isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="imageDialog = isImageEdit = true"
|
||||
@update:toggle-status="
|
||||
() => {
|
||||
formData.status =
|
||||
|
|
@ -1769,21 +1804,18 @@ watch(currentHq, () => {
|
|||
<DrawerInfo
|
||||
ref="formDialogRef"
|
||||
v-model:drawer-open="modalDrawer"
|
||||
:submit="() => onSubmit()"
|
||||
:category="changeTitle(formType, formTypeBranch)"
|
||||
:title="$i18n.locale === 'eng' ? formData.nameEN : formData.name"
|
||||
:address-separator="true"
|
||||
:undo="() => undo()"
|
||||
:is-edit="formType === 'edit'"
|
||||
:edit-data="() => drawerEdit()"
|
||||
:submit="() => onSubmit()"
|
||||
:delete-data="() => triggerDelete(currentEdit.id)"
|
||||
:close="
|
||||
() => (
|
||||
(modalDrawer = false),
|
||||
flowStore.rotate(),
|
||||
(isImageEdit = false),
|
||||
resetScrollBar('branch-info')
|
||||
)
|
||||
() => {
|
||||
modalDrawer = false;
|
||||
isImageEdit = false;
|
||||
imageList = { selectedImage: '', list: [] };
|
||||
onCreateImageList = { selectedImage: '', list: [] };
|
||||
flowStore.rotate();
|
||||
resetScrollBar('branch-info');
|
||||
}
|
||||
"
|
||||
:statusBranch="formData.status"
|
||||
hide-action
|
||||
|
|
@ -1796,8 +1828,11 @@ watch(currentHq, () => {
|
|||
v-model:cover-url="imageUrl"
|
||||
:toggleTitle="$t('status.title')"
|
||||
:hideFade="imageUrl === '' || imageUrl === null"
|
||||
:img="imageUrl || null"
|
||||
:cover="imageUrl || null"
|
||||
:img="
|
||||
`${baseUrl}/branch/${currentId}/image/${formData.selectedImage}`.concat(
|
||||
refreshImageState ? `?ts=${Date.now()}` : '',
|
||||
) || null
|
||||
"
|
||||
:title="formData.name"
|
||||
:caption="formData.code"
|
||||
icon="mdi-office-building-outline"
|
||||
|
|
@ -1820,10 +1855,15 @@ watch(currentHq, () => {
|
|||
: $q.dark.isActive
|
||||
? '--violet-10'
|
||||
: '--violet-11'
|
||||
}-hsl)/${imageUrl ? '0' : '0.15'})`"
|
||||
}-hsl)/${imageUrl ? '0' : '0.1'})`"
|
||||
v-model:toggle-status="formData.status"
|
||||
@view="imageDialog = true"
|
||||
@edit="refImageUpload && refImageUpload.browse()"
|
||||
@view="
|
||||
() => {
|
||||
imageDialog = true;
|
||||
isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="imageDialog = isImageEdit = true"
|
||||
@update:toggle-status="
|
||||
async (v) => {
|
||||
const res = await triggerChangeStatus(currentId, v);
|
||||
|
|
@ -1836,7 +1876,6 @@ watch(currentHq, () => {
|
|||
await fetchList({ pageSize: 99999 });
|
||||
}
|
||||
"
|
||||
:readonly="formType === 'view'"
|
||||
:menu="formMenuIcon"
|
||||
/>
|
||||
</div>
|
||||
|
|
@ -2200,12 +2239,53 @@ watch(currentHq, () => {
|
|||
<ImageUploadDialog
|
||||
ref="refImageUpload"
|
||||
v-model:dialogState="imageDialog"
|
||||
v-model:file="profileFile as File"
|
||||
v-model:file="profileFile"
|
||||
v-model:image-url="imageUrl"
|
||||
:hiddenFooter="!isImageEdit && !modal"
|
||||
@save="imageDialog = false"
|
||||
clearButton
|
||||
v-model:data-list="imageList"
|
||||
v-model:on-create-data-list="onCreateImageList"
|
||||
:on-create="modal"
|
||||
:hiddenFooter="!isImageEdit"
|
||||
@add-image="
|
||||
async (v) => {
|
||||
if (!v) return;
|
||||
if (!currentId) return;
|
||||
await branchStore.addImageList(v, currentId, Date.now());
|
||||
await fetchImageList(currentId, formData.selectedImage || '');
|
||||
}
|
||||
"
|
||||
@remove-image="
|
||||
async (v) => {
|
||||
if (!v) return;
|
||||
if (!currentId) return;
|
||||
const name = v.split('/').pop() || '';
|
||||
await branchStore.deleteImageByName(currentId, name);
|
||||
await fetchImageList(currentId, name);
|
||||
}
|
||||
"
|
||||
@submit="
|
||||
async (v) => {
|
||||
if (modal) {
|
||||
imageUrl = v;
|
||||
imageDialog = false;
|
||||
} else {
|
||||
refreshImageState = true;
|
||||
formData.selectedImage = v;
|
||||
imageList ? (imageList.selectedImage = v) : '';
|
||||
imageUrl = `${baseUrl}/branch/${currentId && currentId}/image/${v}`;
|
||||
await onSubmit(true);
|
||||
imageDialog = false;
|
||||
refreshImageState = false;
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #title>
|
||||
<span v-if="!modal" class="justify-center flex text-bold">
|
||||
{{ $t('general.image') }}
|
||||
{{ changeTitle(formType, formTypeBranch) }}
|
||||
{{ $i18n.locale === 'eng' ? formData.nameEN : formData.name }}
|
||||
</span>
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="full-height full-width" style="background: white">
|
||||
<div
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script setup lang="ts">
|
||||
import { ref, onMounted, watch, computed } from 'vue';
|
||||
import useUtilsStore, { dialog } from 'stores/utils';
|
||||
import useUtilsStore, { dialog, baseUrl } from 'stores/utils';
|
||||
import { calculateAge } from 'src/utils/datetime';
|
||||
import { useQuasar, type QTableProps } from 'quasar';
|
||||
import { storeToRefs } from 'pinia';
|
||||
|
|
@ -59,7 +59,6 @@ const adrressStore = useAddressStore();
|
|||
const useMyBranchStore = useMyBranch();
|
||||
const { data: userData } = storeToRefs(userStore);
|
||||
const { myBranch } = storeToRefs(useMyBranchStore);
|
||||
const apiBaseUrl = import.meta.env.VITE_API_BASE_URL;
|
||||
|
||||
const defaultFormData = {
|
||||
provinceId: null,
|
||||
|
|
@ -87,7 +86,6 @@ const defaultFormData = {
|
|||
firstName: '',
|
||||
userRole: '',
|
||||
userType: '',
|
||||
profileImage: null,
|
||||
birthDate: null,
|
||||
responsibleArea: null,
|
||||
username: '',
|
||||
|
|
@ -178,7 +176,6 @@ const userCode = ref<string>();
|
|||
const currentUser = ref<User>();
|
||||
const infoDrawerEdit = ref(false);
|
||||
const infoPersonId = ref<string>('');
|
||||
const infoPersonCard = ref();
|
||||
const infoDrawer = ref(false);
|
||||
const profileSubmit = ref(false);
|
||||
const urlProfile = ref<string>();
|
||||
|
|
@ -198,6 +195,7 @@ const typeStats = ref<UserTypeStats>();
|
|||
const agencyFile = ref<File[]>([]);
|
||||
const agencyFileList = ref<{ name: string; url: string }[]>([]);
|
||||
const formData = ref<UserCreate>({
|
||||
selectedImage: '',
|
||||
branchId: '',
|
||||
provinceId: null,
|
||||
districtId: null,
|
||||
|
|
@ -227,7 +225,6 @@ const formData = ref<UserCreate>({
|
|||
namePrefix: null,
|
||||
userRole: '',
|
||||
userType: '',
|
||||
profileImage: null,
|
||||
birthDate: null,
|
||||
responsibleArea: null,
|
||||
checkpoint: null,
|
||||
|
|
@ -240,12 +237,18 @@ const isImageEdit = ref<boolean>(false);
|
|||
const imageUrl = ref<string>('');
|
||||
const profileFileImg = ref<File | null>(null);
|
||||
const imageDialog = ref(false);
|
||||
const refreshImageState = ref(false);
|
||||
const imageList = ref<{ selectedImage: string; list: string[] }>();
|
||||
const onCreateImageList = ref<{
|
||||
selectedImage: string;
|
||||
list: { url: string; imgFile: File | null; name: string }[];
|
||||
}>({ selectedImage: '', list: [] });
|
||||
|
||||
// const inputFile = document.createElement('input');
|
||||
// inputFile.type = 'file';
|
||||
// inputFile.accept = 'image/*';
|
||||
|
||||
const reader = new FileReader();
|
||||
// const reader = new FileReader();
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -357,23 +360,6 @@ async function openDialog(
|
|||
|
||||
infoDrawerEdit.value = isPersonEdit ? true : false;
|
||||
infoDrawer.value = true;
|
||||
const user = userData.value.result.find((x) => x.id === id);
|
||||
infoPersonCard.value = user
|
||||
? [
|
||||
{
|
||||
id: user.id,
|
||||
img: `${user.profileImageUrl}`,
|
||||
name:
|
||||
locale.value === 'eng'
|
||||
? `${user.firstNameEN} ${user.lastNameEN}`
|
||||
: `${user.firstName} ${user.lastName}`,
|
||||
male: user.gender === 'male',
|
||||
female: user.gender === 'female',
|
||||
badge: user.code,
|
||||
disabled: user.status === 'INACTIVE',
|
||||
},
|
||||
]
|
||||
: [];
|
||||
}
|
||||
|
||||
statusToggle.value = true;
|
||||
|
|
@ -387,7 +373,11 @@ function undo() {
|
|||
assignFormData(infoPersonId.value);
|
||||
}
|
||||
|
||||
function onClose() {
|
||||
function onClose(excludeDialog?: boolean) {
|
||||
if (excludeDialog) {
|
||||
infoDrawer.value = excludeDialog || false;
|
||||
return;
|
||||
}
|
||||
hqId.value = '';
|
||||
brId.value = '';
|
||||
userId.value = '';
|
||||
|
|
@ -398,17 +388,17 @@ function onClose() {
|
|||
agencyFile.value = [];
|
||||
modal.value = false;
|
||||
isEdit.value = false;
|
||||
infoDrawer.value = false;
|
||||
profileSubmit.value = false;
|
||||
statusToggle.value = true;
|
||||
isImageEdit.value = false;
|
||||
currentUser.value = undefined;
|
||||
Object.assign(formData.value, defaultFormData);
|
||||
mapUserType(selectorLabel.value);
|
||||
imageList.value = { selectedImage: '', list: [] };
|
||||
onCreateImageList.value = { selectedImage: '', list: [] };
|
||||
flowStore.rotate();
|
||||
}
|
||||
async function onSubmit() {
|
||||
formData.value.profileImage = profileFileImg.value as File;
|
||||
|
||||
async function onSubmit(excludeDialog?: boolean) {
|
||||
if (isEdit.value && userId.value) {
|
||||
if (!userId.value) return;
|
||||
|
||||
|
|
@ -441,7 +431,7 @@ async function onSubmit() {
|
|||
if (res) {
|
||||
userStats.value = res;
|
||||
}
|
||||
onClose();
|
||||
onClose(excludeDialog);
|
||||
} else {
|
||||
if (!hqId.value) return;
|
||||
|
||||
|
|
@ -456,7 +446,10 @@ async function onSubmit() {
|
|||
: hqId.value
|
||||
? hqId.value
|
||||
: '';
|
||||
const result = await userStore.create(formData.value);
|
||||
const result = await userStore.create(
|
||||
formData.value,
|
||||
onCreateImageList.value,
|
||||
);
|
||||
|
||||
if (result && formData.value.userType === 'AGENCY') {
|
||||
if (!agencyFile.value) return;
|
||||
|
|
@ -558,7 +551,6 @@ async function assignFormData(idEdit: string) {
|
|||
currentUser.value = foundUser;
|
||||
if (currentUser.value) {
|
||||
infoPersonId.value = currentUser.value.id;
|
||||
imageUrl.value = currentUser.value.profileImageUrl;
|
||||
}
|
||||
formData.value = {
|
||||
branchId: foundUser.branch[0]?.id,
|
||||
|
|
@ -591,6 +583,7 @@ async function assignFormData(idEdit: string) {
|
|||
checkpointEN: foundUser.checkpointEN,
|
||||
responsibleArea: foundUser.responsibleArea,
|
||||
status: foundUser.status,
|
||||
selectedImage: foundUser.selectedImage,
|
||||
licenseExpireDate:
|
||||
(foundUser.licenseExpireDate &&
|
||||
new Date(foundUser.licenseExpireDate)) ||
|
||||
|
|
@ -619,14 +612,14 @@ async function assignFormData(idEdit: string) {
|
|||
}
|
||||
|
||||
userCode.value = foundUser.code;
|
||||
urlProfile.value = `${apiBaseUrl}/user/${foundUser.id}/image`;
|
||||
urlProfile.value = `${baseUrl}/user/${foundUser.id}/profile-image/${foundUser.selectedImage}`;
|
||||
|
||||
isEdit.value = true;
|
||||
profileSubmit.value = true;
|
||||
hqId.value && (await userStore.fetchBrOption(hqId.value));
|
||||
if (infoPersonCard.value) {
|
||||
infoPersonCard.value[0].img = foundUser.profileImageUrl;
|
||||
}
|
||||
|
||||
await fetchImageList(foundUser.id, foundUser.selectedImage);
|
||||
|
||||
if (formData.value.districtId) {
|
||||
await adrressStore.fetchSubDistrictByProvinceId(
|
||||
formData.value.districtId,
|
||||
|
|
@ -635,10 +628,6 @@ async function assignFormData(idEdit: string) {
|
|||
}
|
||||
}
|
||||
|
||||
function openImageDialog() {
|
||||
imageDialog.value = true;
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
utilsStore.currentTitle.title = 'personnel.title';
|
||||
utilsStore.currentTitle.path = [{ text: 'personnel.caption', i18n: true }];
|
||||
|
|
@ -667,6 +656,15 @@ function mapRole(value: string) {
|
|||
return option ? option.label : '-';
|
||||
}
|
||||
|
||||
async function fetchImageList(id: string, selectedName: string) {
|
||||
const res = await userStore.fetchImageListById(id);
|
||||
imageList.value = {
|
||||
selectedImage: selectedName,
|
||||
list: res.map((n: string) => `user/${id}/profile-image/${n}`),
|
||||
};
|
||||
return res;
|
||||
}
|
||||
|
||||
watch(
|
||||
() => selectorLabel.value,
|
||||
async (label) => {
|
||||
|
|
@ -1145,7 +1143,7 @@ watch(
|
|||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${apiBaseUrl}/user/${props.row.id}/image?ts=${Date.now()}`"
|
||||
:src="`${baseUrl}/user/${props.row.id}/profile-image/${props.row.selectedImage}?ts=${Date.now()}`"
|
||||
>
|
||||
<template #error>
|
||||
<div
|
||||
|
|
@ -1314,7 +1312,6 @@ watch(
|
|||
:prefix-id="props.row.username"
|
||||
:data="{
|
||||
code: props.row.code,
|
||||
|
||||
name:
|
||||
$i18n.locale === 'eng'
|
||||
? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
|
||||
|
|
@ -1366,7 +1363,7 @@ watch(
|
|||
<q-img
|
||||
class="text-center"
|
||||
:ratio="1"
|
||||
:src="`${apiBaseUrl}/user/${props.row.id}/image?ts=${Date.now()}`"
|
||||
:src="`${baseUrl}/user/${props.row.id}/profile-image/${props.row.selectedImage}?ts=${Date.now()}`"
|
||||
style="
|
||||
object-fit: cover;
|
||||
width: 100%;
|
||||
|
|
@ -1532,12 +1529,13 @@ watch(
|
|||
v-model:toggle-status="formData.status"
|
||||
hideFade
|
||||
:menu="formMenuIcon"
|
||||
:readonly="!infoDrawerEdit"
|
||||
:toggleTitle="$t('status.title')"
|
||||
:title="`${$i18n.locale === 'eng' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
|
||||
:caption="userCode"
|
||||
:img="
|
||||
urlProfile ||
|
||||
`${baseUrl}/user/${currentUser.id}/profile-image/${formData.selectedImage}`.concat(
|
||||
refreshImageState ? `?ts=${Date.now()}` : '',
|
||||
) ||
|
||||
{
|
||||
male: '/no-img-man.png',
|
||||
female: '/no-img-female.png',
|
||||
|
|
@ -1549,8 +1547,13 @@ watch(
|
|||
female: '/no-img-female.png',
|
||||
}[formData.gender]
|
||||
"
|
||||
@view="openImageDialog"
|
||||
@edit="refImageUpload && refImageUpload.browse()"
|
||||
@view="
|
||||
() => {
|
||||
imageDialog = true;
|
||||
isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="imageDialog = isImageEdit = true"
|
||||
@update:toggle-status="
|
||||
async (v) => {
|
||||
await triggerChangeStatus(infoPersonId, v);
|
||||
|
|
@ -1779,8 +1782,13 @@ watch(
|
|||
}[formData.gender]
|
||||
"
|
||||
hideFade
|
||||
@view="imageDialog = true"
|
||||
@edit="refImageUpload && refImageUpload.browse()"
|
||||
@view="
|
||||
() => {
|
||||
imageDialog = true;
|
||||
isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="imageDialog = isImageEdit = true"
|
||||
@update:toggle-status="
|
||||
() => {
|
||||
formData.status =
|
||||
|
|
@ -1914,10 +1922,59 @@ watch(
|
|||
v-model:dialogState="imageDialog"
|
||||
v-model:file="profileFileImg"
|
||||
v-model:image-url="urlProfile"
|
||||
:hiddenFooter="!isImageEdit && !modal"
|
||||
@save="imageDialog = false"
|
||||
clearButton
|
||||
v-model:data-list="imageList"
|
||||
v-model:on-create-data-list="onCreateImageList"
|
||||
:on-create="modal"
|
||||
:hiddenFooter="!isImageEdit"
|
||||
@add-image="
|
||||
async (v) => {
|
||||
if (!v) return;
|
||||
if (!currentUser) return;
|
||||
const res = await userStore.addImageList(
|
||||
v,
|
||||
currentUser?.id,
|
||||
Date.now(),
|
||||
);
|
||||
await fetchImageList(currentUser?.id, res);
|
||||
}
|
||||
"
|
||||
@remove-image="
|
||||
async (v) => {
|
||||
if (!v) return;
|
||||
if (!currentUser) return;
|
||||
|
||||
const name = v.split('/').pop() || '';
|
||||
await userStore.deleteImageByName(currentUser?.id, name);
|
||||
await fetchImageList(currentUser?.id, name);
|
||||
}
|
||||
"
|
||||
@submit="
|
||||
async (v) => {
|
||||
if (modal) {
|
||||
urlProfile = v;
|
||||
imageDialog = false;
|
||||
} else {
|
||||
refreshImageState = true;
|
||||
formData.selectedImage = v;
|
||||
imageList ? (imageList.selectedImage = v) : '';
|
||||
urlProfile = `${baseUrl}/user/${currentUser && currentUser.id}/profile-image/${v}`;
|
||||
await onSubmit(true);
|
||||
imageDialog = false;
|
||||
refreshImageState = false;
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #title>
|
||||
<span v-if="!modal" class="justify-center flex text-bold">
|
||||
{{ $t('general.image') }}
|
||||
{{
|
||||
$i18n.locale === 'eng'
|
||||
? `${formData.firstNameEN} ${formData.lastNameEN}`
|
||||
: `${formData.firstName} ${formData.lastName}`
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="full-height full-width" style="background: white">
|
||||
<div
|
||||
|
|
@ -1938,7 +1995,7 @@ watch(
|
|||
/>
|
||||
<q-icon
|
||||
v-else
|
||||
size="7vw"
|
||||
size="3rem"
|
||||
:name="
|
||||
infoDrawer ? 'mdi-account-outline' : 'mdi-account-plus-outline'
|
||||
"
|
||||
|
|
|
|||
|
|
@ -178,6 +178,14 @@ const dialogCreateCustomerItem = [
|
|||
},
|
||||
];
|
||||
|
||||
// image
|
||||
const refreshImageState = ref(false);
|
||||
const imageList = ref<{ selectedImage: string; list: string[] }>();
|
||||
const onCreateImageList = ref<{
|
||||
selectedImage: string;
|
||||
list: { url: string; imgFile: File | null; name: string }[];
|
||||
}>({ selectedImage: '', list: [] });
|
||||
|
||||
watch(() => route.name, init);
|
||||
watch(
|
||||
[currentTab, currentStatus, inputSearch, customerTypeSelected],
|
||||
|
|
@ -475,6 +483,7 @@ async function openHistory(id: string) {
|
|||
async function editCustomerForm(id: string) {
|
||||
await customerFormStore.assignFormData(id);
|
||||
await fetchListOfOptionBranch();
|
||||
await fetchImageList(id, customerFormData.value.selectedImage || '');
|
||||
customerFormState.value.dialogType = 'edit';
|
||||
customerFormState.value.drawerModal = true;
|
||||
customerFormState.value.editCustomerId = id;
|
||||
|
|
@ -563,6 +572,15 @@ function returnCountryCode(country: string) {
|
|||
return tempValue?.value;
|
||||
}
|
||||
|
||||
async function fetchImageList(id: string, selectedName: string) {
|
||||
const res = await customerStore.fetchImageListById(id);
|
||||
imageList.value = {
|
||||
selectedImage: selectedName,
|
||||
list: res.map((n: string) => `customer/${id}/image/${n}`),
|
||||
};
|
||||
return res;
|
||||
}
|
||||
|
||||
// TODO: When in employee form, if select address same as customer then auto fill
|
||||
|
||||
watch(
|
||||
|
|
@ -705,6 +723,14 @@ watch(
|
|||
},
|
||||
);
|
||||
|
||||
watch(
|
||||
() => customerFormData.value.image,
|
||||
() => {
|
||||
if (customerFormData.value.image !== null)
|
||||
customerFormState.value.isImageEdit = true;
|
||||
},
|
||||
);
|
||||
|
||||
const emptyCreateDialog = ref(false);
|
||||
</script>
|
||||
|
||||
|
|
@ -1161,7 +1187,7 @@ const emptyCreateDialog = ref(false);
|
|||
<div class="branch-card__icon">
|
||||
<q-avatar size="md">
|
||||
<q-img
|
||||
:src="`${baseUrl}/customer/${props.row.id}/image`"
|
||||
:src="`${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`"
|
||||
class="full-height full-width"
|
||||
>
|
||||
<template #error>
|
||||
|
|
@ -1371,7 +1397,7 @@ const emptyCreateDialog = ref(false);
|
|||
$i18n.locale === 'eng'
|
||||
? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
|
||||
: `${props.row.firstName} ${props.row.lastName} `.trim(),
|
||||
img: `${baseUrl}/customer/${props.row.id}/image`,
|
||||
img: `${baseUrl}/customer/${props.row.id}/image/${props.row.selectedImage}`,
|
||||
fallbackImg: `/images/customer-${props.row.customerType}-avartar-${props.row.gender}.png`,
|
||||
male: undefined,
|
||||
female: undefined,
|
||||
|
|
@ -1750,8 +1776,15 @@ const emptyCreateDialog = ref(false);
|
|||
? 'mdi-account-plus-outline'
|
||||
: 'mdi-office-building-outline'
|
||||
"
|
||||
@view="customerFormState.imageDialog = true"
|
||||
@edit="dialogCustomerImageUpload?.browse()"
|
||||
@view="
|
||||
() => {
|
||||
customerFormState.imageDialog = true;
|
||||
customerFormState.isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
customerFormState.imageDialog = customerFormState.isImageEdit = true
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
|
|
@ -1804,7 +1837,7 @@ const emptyCreateDialog = ref(false);
|
|||
<q-form
|
||||
@submit.prevent="
|
||||
async () => {
|
||||
await customerFormStore.submitFormCustomer();
|
||||
await customerFormStore.submitFormCustomer(onCreateImageList);
|
||||
customerFormState.readonly = true;
|
||||
notify('create', $t('general.success'));
|
||||
await fetchListCustomer();
|
||||
|
|
@ -2629,18 +2662,69 @@ const emptyCreateDialog = ref(false);
|
|||
v-model:dialog-state="customerFormState.imageDialog"
|
||||
v-model:file="customerFormData.image"
|
||||
v-model:image-url="customerFormState.customerImageUrl"
|
||||
v-model:data-list="imageList"
|
||||
v-model:on-create-data-list="onCreateImageList"
|
||||
:on-create="customerFormState.dialogModal"
|
||||
:default-url="customerFormState.defaultCustomerImageUrl"
|
||||
clear-button
|
||||
@save="
|
||||
:hiddenFooter="!customerFormState.isImageEdit"
|
||||
@add-image="
|
||||
async (v) => {
|
||||
if (v && customerFormState.editCustomerId) {
|
||||
await customerStore.setImage(customerFormState.editCustomerId, v);
|
||||
await fetchListCustomer();
|
||||
if (!v) return;
|
||||
if (!customerFormState.editCustomerId) return;
|
||||
await customerStore.addImageList(
|
||||
v,
|
||||
customerFormState.editCustomerId,
|
||||
Date.now(),
|
||||
);
|
||||
await fetchImageList(
|
||||
customerFormState.editCustomerId,
|
||||
customerFormData.selectedImage || '',
|
||||
);
|
||||
}
|
||||
"
|
||||
@remove-image="
|
||||
async (v) => {
|
||||
if (!v) return;
|
||||
if (!customerFormState.editCustomerId) return;
|
||||
const name = v.split('/').pop() || '';
|
||||
await customerStore.deleteImageByName(
|
||||
customerFormState.editCustomerId,
|
||||
name,
|
||||
);
|
||||
await fetchImageList(customerFormState.editCustomerId, name);
|
||||
}
|
||||
"
|
||||
@submit="
|
||||
async (v) => {
|
||||
if (customerFormState.dialogModal) {
|
||||
customerFormState.customerImageUrl = v;
|
||||
customerFormState.imageDialog = false;
|
||||
} else {
|
||||
refreshImageState = true;
|
||||
customerFormData.selectedImage = v;
|
||||
imageList ? (imageList.selectedImage = v) : '';
|
||||
customerFormState.customerImageUrl = `${baseUrl}/customer/${customerFormState.editCustomerId && customerFormState.editCustomerId}/image/${v}`;
|
||||
customerFormStore.resetForm();
|
||||
await customerFormStore.submitFormCustomer();
|
||||
customerFormState.imageDialog = false;
|
||||
refreshImageState = false;
|
||||
}
|
||||
}
|
||||
"
|
||||
>
|
||||
<template #title>
|
||||
<span
|
||||
v-if="!customerFormState.dialogModal"
|
||||
class="justify-center flex text-bold"
|
||||
>
|
||||
{{ $t('general.image') }}
|
||||
{{
|
||||
$i18n.locale === 'eng'
|
||||
? `${customerFormData.firstNameEN} ${customerFormData.lastNameEN}`
|
||||
: `${customerFormData.firstName} ${customerFormData.lastName}`
|
||||
}}
|
||||
</span>
|
||||
</template>
|
||||
<template #error>
|
||||
<div class="full-height full-width" style="background: white">
|
||||
<div
|
||||
|
|
@ -2663,7 +2747,7 @@ const emptyCreateDialog = ref(false);
|
|||
class="full-width full-height column items-center justify-center"
|
||||
>
|
||||
<q-icon
|
||||
size="7vw"
|
||||
size="3rem"
|
||||
:name="
|
||||
customerFormData.customerType === 'PERS'
|
||||
? 'mdi-account-plus-outline'
|
||||
|
|
@ -2766,8 +2850,9 @@ const emptyCreateDialog = ref(false);
|
|||
hide-fade
|
||||
:fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
|
||||
:img="
|
||||
customerFormState.customerImageUrl ||
|
||||
`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`
|
||||
`${baseUrl}/customer/${customerFormState.editCustomerId}/image/${customerFormData.selectedImage}`.concat(
|
||||
refreshImageState ? `?ts=${Date.now()}` : '',
|
||||
) || null
|
||||
"
|
||||
:fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.gender}.png`"
|
||||
:color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
|
||||
|
|
@ -2777,8 +2862,15 @@ const emptyCreateDialog = ref(false);
|
|||
? 'mdi-account-plus-outline'
|
||||
: 'mdi-office-building-outline'
|
||||
"
|
||||
@view="customerFormState.imageDialog = true"
|
||||
@edit="dialogCustomerImageUpload?.browse()"
|
||||
@view="
|
||||
() => {
|
||||
customerFormState.imageDialog = true;
|
||||
customerFormState.isImageEdit = false;
|
||||
}
|
||||
"
|
||||
@edit="
|
||||
customerFormState.imageDialog = customerFormState.isImageEdit = true
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
registeredBranchId: branchStore.currentMyBranch?.id || '',
|
||||
customerBranch: [],
|
||||
image: null,
|
||||
selectedImage: '',
|
||||
};
|
||||
let resetFormData = structuredClone(defaultFormData);
|
||||
|
||||
|
|
@ -50,6 +51,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
editCustomerBranchId?: string;
|
||||
treeFile: { label: string; file: { label: string }[] }[];
|
||||
formDataOcr: Record<string, any>;
|
||||
isImageEdit: boolean;
|
||||
}>({
|
||||
dialogType: 'info',
|
||||
dialogOpen: false,
|
||||
|
|
@ -65,6 +67,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
defaultCustomerImageUrl: '',
|
||||
treeFile: [],
|
||||
formDataOcr: {},
|
||||
isImageEdit: false,
|
||||
});
|
||||
|
||||
watch(
|
||||
|
|
@ -110,8 +113,9 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
if (state.value.dialogType === 'create') {
|
||||
state.value.editCustomerId = '';
|
||||
}
|
||||
|
||||
const currentImg = currentFormData.value.selectedImage;
|
||||
currentFormData.value = structuredClone(resetFormData);
|
||||
currentFormData.value.selectedImage = currentImg;
|
||||
}
|
||||
|
||||
async function assignFormData(id?: string) {
|
||||
|
|
@ -129,8 +133,8 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
state.value.dialogType = 'edit';
|
||||
state.value.editCustomerId = id;
|
||||
state.value.editCustomerCode = data.code;
|
||||
state.value.customerImageUrl = `${apiBaseUrl}/customer/${id}/image`;
|
||||
state.value.defaultCustomerImageUrl = `${apiBaseUrl}/customer/${id}/image`;
|
||||
state.value.customerImageUrl = `${apiBaseUrl}/customer/${id}/image/${data.selectedImage}`;
|
||||
state.value.defaultCustomerImageUrl = `${apiBaseUrl}/customer/${id}/image/${data.selectedImage}`;
|
||||
|
||||
resetFormData.registeredBranchId = data.registeredBranchId;
|
||||
resetFormData.code = data.code || '';
|
||||
|
|
@ -144,6 +148,7 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
resetFormData.gender = data.gender;
|
||||
resetFormData.birthDate = new Date(data.birthDate);
|
||||
resetFormData.image = null;
|
||||
resetFormData.selectedImage = data.selectedImage;
|
||||
|
||||
resetFormData.customerBranch = await Promise.all(
|
||||
data.branch.map(async (v) => ({
|
||||
|
|
@ -259,11 +264,14 @@ export const useCustomerForm = defineStore('form-customer', () => {
|
|||
(currentFormData.value.customerBranch?.length || 0) - 1;
|
||||
}
|
||||
|
||||
async function submitFormCustomer() {
|
||||
async function submitFormCustomer(imgList?: {
|
||||
selectedImage: string;
|
||||
list: { url: string; imgFile: File | null; name: string }[];
|
||||
}) {
|
||||
if (state.value.dialogType === 'info') return;
|
||||
|
||||
if (state.value.dialogType === 'create') {
|
||||
const _data = await customerStore.create(currentFormData.value);
|
||||
const _data = await customerStore.create(currentFormData.value, imgList);
|
||||
|
||||
if (_data) await assignFormData(_data.id);
|
||||
|
||||
|
|
|
|||
|
|
@ -87,15 +87,80 @@ const useBranchStore = defineStore('api-branch', () => {
|
|||
return false;
|
||||
}
|
||||
|
||||
async function create(branch: BranchCreate, bank?: BankBook[]) {
|
||||
const { qrCodeImage, imageUrl, zipCode, ...payload } = branch;
|
||||
async function fetchImageListById(
|
||||
id: string,
|
||||
flow?: {
|
||||
sessionId?: string;
|
||||
refTransactionId?: string;
|
||||
transactionId?: string;
|
||||
},
|
||||
) {
|
||||
const res = await api.get(`/branch/${id}/image`, {
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
|
||||
'X-Tid': flow?.transactionId,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res) return false;
|
||||
if (res.status === 200) return res.data;
|
||||
if (res.status === 204) return null;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
async function addImageList(file: File, branchId: string, name: string) {
|
||||
await api
|
||||
.put(`/branch/${branchId}/image/${name}`, file, {
|
||||
headers: { 'Content-Type': file.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
|
||||
return name;
|
||||
}
|
||||
|
||||
async function deleteImageByName(
|
||||
id: string,
|
||||
name: string,
|
||||
flow?: {
|
||||
sessionId?: string;
|
||||
refTransactionId?: string;
|
||||
transactionId?: string;
|
||||
},
|
||||
) {
|
||||
const res = await api.delete(`/branch/${id}/image/${name}`, {
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
|
||||
'X-Tid': flow?.transactionId,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res) return false;
|
||||
}
|
||||
|
||||
async function create(
|
||||
branch: BranchCreate,
|
||||
bank?: BankBook[],
|
||||
imgList?: {
|
||||
selectedImage: string;
|
||||
list: { url: string; imgFile: File | null; name: string }[];
|
||||
},
|
||||
) {
|
||||
const { qrCodeImage, zipCode, ...payload } = branch;
|
||||
const bankPayload = bank?.map(({ bankUrl, bankQr, ...rest }) => ({
|
||||
...rest,
|
||||
}));
|
||||
|
||||
const res = await api.post<Branch>(
|
||||
'/branch',
|
||||
{ ...payload, bank: bankPayload },
|
||||
{
|
||||
...payload,
|
||||
selectedImage: (imgList && imgList.selectedImage) || '',
|
||||
bank: bankPayload,
|
||||
},
|
||||
{ headers: { 'X-Rtid': flowStore.rtid } },
|
||||
);
|
||||
|
||||
|
|
@ -108,15 +173,6 @@ const useBranchStore = defineStore('api-branch', () => {
|
|||
.catch((e) => console.error(e));
|
||||
}
|
||||
|
||||
if (imageUrl) {
|
||||
await api
|
||||
.put(`/branch/${res.data.id}/branch-image`, imageUrl, {
|
||||
headers: { 'Content-Type': imageUrl.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
}
|
||||
|
||||
if (res.data.bank && bank) {
|
||||
for (let i = 0; i < bank?.length; i++) {
|
||||
if (bank[i].bankQr) {
|
||||
|
|
@ -134,6 +190,14 @@ const useBranchStore = defineStore('api-branch', () => {
|
|||
}
|
||||
}
|
||||
|
||||
if (imgList && imgList.list.length > 0 && res.data.id) {
|
||||
for (let index = 0; index < imgList.list.length; index++) {
|
||||
const imgFile = imgList.list[index].imgFile;
|
||||
if (imgFile)
|
||||
await addImageList(imgFile, res.data.id, imgList.list[index].name);
|
||||
}
|
||||
}
|
||||
|
||||
if (!res) return false;
|
||||
|
||||
return res.data;
|
||||
|
|
@ -143,7 +207,6 @@ const useBranchStore = defineStore('api-branch', () => {
|
|||
id: string,
|
||||
data: Partial<BranchCreate & { status: 'ACTIVE' | 'INACTIVE' | 'CREATED' }>,
|
||||
qrCodeImage?: File | undefined,
|
||||
imageHq?: File | undefined,
|
||||
bank?: BankBook[],
|
||||
opts?: {
|
||||
deleteQrCodeImage?: boolean;
|
||||
|
|
@ -178,15 +241,6 @@ const useBranchStore = defineStore('api-branch', () => {
|
|||
.catch((e) => console.error(e));
|
||||
}
|
||||
|
||||
if (imageHq) {
|
||||
await api
|
||||
.put(`/branch/${res.data.id}/branch-image`, imageHq, {
|
||||
headers: { 'Content-Type': imageHq.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
}
|
||||
|
||||
if (!!res.data.bank && !!bank) {
|
||||
for (let i = 0; i < bank?.length; i++) {
|
||||
if (bank?.[i].bankQr) {
|
||||
|
|
@ -339,6 +393,10 @@ const useBranchStore = defineStore('api-branch', () => {
|
|||
fetchList,
|
||||
fetchById,
|
||||
|
||||
fetchImageListById,
|
||||
addImageList,
|
||||
deleteImageByName,
|
||||
|
||||
create,
|
||||
editById,
|
||||
deleteById,
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@ export type BankBook = {
|
|||
};
|
||||
|
||||
export type Branch = {
|
||||
selectedImage?: string;
|
||||
subDistrict: SubDistrict | null;
|
||||
district: District | null;
|
||||
province: Province | null;
|
||||
|
|
@ -30,7 +31,6 @@ export type Branch = {
|
|||
latitude: string;
|
||||
contactName: string;
|
||||
qrCodeImageUrl: string;
|
||||
imageUrl: string;
|
||||
email: string;
|
||||
zipCode: string;
|
||||
subDistrictId: string | null;
|
||||
|
|
@ -57,6 +57,7 @@ export type Branch = {
|
|||
export type BranchWithChildren = Branch & { branch: Branch[] };
|
||||
|
||||
export type BranchCreate = {
|
||||
selectedImage?: string;
|
||||
code?: string;
|
||||
taxNo: string;
|
||||
nameEN: string;
|
||||
|
|
@ -76,7 +77,6 @@ export type BranchCreate = {
|
|||
contactName: string;
|
||||
contact: string;
|
||||
qrCodeImage?: File;
|
||||
imageUrl?: File;
|
||||
lineId: string;
|
||||
webUrl?: string;
|
||||
virtual: boolean;
|
||||
|
|
|
|||
|
|
@ -256,7 +256,7 @@ const useCustomerStore = defineStore('api-customer', () => {
|
|||
fetch(res.data)
|
||||
.then(async (res) => await res.blob())
|
||||
.then((blob) => {
|
||||
let a = document.createElement('a');
|
||||
const a = document.createElement('a');
|
||||
a.download = filename;
|
||||
a.href = window.URL.createObjectURL(blob);
|
||||
a.click();
|
||||
|
|
@ -267,8 +267,66 @@ const useCustomerStore = defineStore('api-customer', () => {
|
|||
return res.data;
|
||||
}
|
||||
|
||||
async function fetchImageListById(
|
||||
id: string,
|
||||
flow?: {
|
||||
sessionId?: string;
|
||||
refTransactionId?: string;
|
||||
transactionId?: string;
|
||||
},
|
||||
) {
|
||||
const res = await api.get(`/customer/${id}/image`, {
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
|
||||
'X-Tid': flow?.transactionId,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res) return false;
|
||||
if (res.status === 200) return res.data;
|
||||
if (res.status === 204) return null;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
async function addImageList(file: File, customerId: string, name: string) {
|
||||
await api
|
||||
.put(`/customer/${customerId}/image/${name}`, file, {
|
||||
headers: { 'Content-Type': file.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
|
||||
return name;
|
||||
}
|
||||
|
||||
async function deleteImageByName(
|
||||
id: string,
|
||||
name: string,
|
||||
flow?: {
|
||||
sessionId?: string;
|
||||
refTransactionId?: string;
|
||||
transactionId?: string;
|
||||
},
|
||||
) {
|
||||
const res = await api.delete(`/customer/${id}/image/${name}`, {
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
|
||||
'X-Tid': flow?.transactionId,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res) return false;
|
||||
}
|
||||
|
||||
async function create(
|
||||
data: CustomerCreate,
|
||||
imgList: {
|
||||
selectedImage: string;
|
||||
list: { url: string; imgFile: File | null; name: string }[];
|
||||
},
|
||||
flow?: {
|
||||
sessionId?: string;
|
||||
refTransactionId?: string;
|
||||
|
|
@ -291,13 +349,17 @@ const useCustomerStore = defineStore('api-customer', () => {
|
|||
imageUrl: string;
|
||||
imageUploadUrl: string;
|
||||
}
|
||||
>('/customer', payload, {
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
|
||||
'X-Tid': flow?.transactionId,
|
||||
>(
|
||||
'/customer',
|
||||
{ ...payload, selectedImage: imgList.selectedImage },
|
||||
{
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
|
||||
'X-Tid': flow?.transactionId,
|
||||
},
|
||||
},
|
||||
});
|
||||
);
|
||||
|
||||
// await Promise.allSettled([
|
||||
// ...res.data.branch.map(async (v, i) => {
|
||||
|
|
@ -305,15 +367,23 @@ const useCustomerStore = defineStore('api-customer', () => {
|
|||
// if (fileList)
|
||||
// return await addBranchAttachment(v.id, { file: fileList });
|
||||
// }),
|
||||
image &&
|
||||
(await api
|
||||
.put(`/customer/${res.data.id}/image`, image, {
|
||||
headers: { 'Content-Type': image?.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.catch((e) => console.error(e)));
|
||||
// image &&
|
||||
// (await api
|
||||
// .put(`/customer/${res.data.id}/image`, image, {
|
||||
// headers: { 'Content-Type': image?.type },
|
||||
// onUploadProgress: (e) => console.log(e),
|
||||
// })
|
||||
// .catch((e) => console.error(e)));
|
||||
// ]);
|
||||
|
||||
if (imgList.list.length > 0 && res.data.id) {
|
||||
for (let index = 0; index < imgList.list.length; index++) {
|
||||
const imgFile = imgList.list[index].imgFile;
|
||||
if (imgFile)
|
||||
await addImageList(imgFile, res.data.id, imgList.list[index].name);
|
||||
}
|
||||
}
|
||||
|
||||
if (!res) return false;
|
||||
|
||||
return res.data;
|
||||
|
|
@ -362,13 +432,13 @@ const useCustomerStore = defineStore('api-customer', () => {
|
|||
// if (fileList)
|
||||
// return await addBranchAttachment(v.id, { file: fileList });
|
||||
// }),
|
||||
image &&
|
||||
(await axios
|
||||
.put(res.data.imageUploadUrl, image, {
|
||||
headers: { 'Content-Type': image.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.catch((e) => console.error(e)));
|
||||
// image &&
|
||||
// (await axios
|
||||
// .put(res.data.imageUploadUrl, image, {
|
||||
// headers: { 'Content-Type': image.type },
|
||||
// onUploadProgress: (e) => console.log(e),
|
||||
// })
|
||||
// .catch((e) => console.error(e)));
|
||||
// ]);
|
||||
|
||||
if (!res) return false;
|
||||
|
|
@ -563,6 +633,11 @@ const useCustomerStore = defineStore('api-customer', () => {
|
|||
fetchListCustomeBranch,
|
||||
fetchById,
|
||||
fetchList,
|
||||
|
||||
fetchImageListById,
|
||||
addImageList,
|
||||
deleteImageByName,
|
||||
|
||||
create,
|
||||
editById,
|
||||
deleteById,
|
||||
|
|
|
|||
|
|
@ -150,6 +150,7 @@ export type CustomerBranchCreate = {
|
|||
};
|
||||
|
||||
export type CustomerCreate = {
|
||||
selectedImage?: string;
|
||||
code: string;
|
||||
customerBranch?: (CustomerBranchCreate & { id?: string })[];
|
||||
customerType: CustomerType;
|
||||
|
|
@ -166,6 +167,7 @@ export type CustomerCreate = {
|
|||
};
|
||||
|
||||
export type CustomerUpdate = {
|
||||
selectedImage?: string;
|
||||
status?: Status;
|
||||
customerType?: CustomerType;
|
||||
customerBranch?: (CustomerBranchCreate & { id?: string })[];
|
||||
|
|
|
|||
|
|
@ -2,6 +2,7 @@ import { ref } from 'vue';
|
|||
import { defineStore } from 'pinia';
|
||||
import { Pagination, Status } from '../types';
|
||||
import { api } from 'src/boot/axios';
|
||||
|
||||
import {
|
||||
RoleData,
|
||||
User,
|
||||
|
|
@ -266,18 +267,83 @@ const useUserStore = defineStore('api-user', () => {
|
|||
return false;
|
||||
}
|
||||
|
||||
async function create(
|
||||
data: UserCreate,
|
||||
async function fetchImageListById(
|
||||
id: string,
|
||||
flow?: {
|
||||
sessionId?: string;
|
||||
refTransactionId?: string;
|
||||
transactionId?: string;
|
||||
},
|
||||
) {
|
||||
<<<<<<< HEAD
|
||||
const { profileImage, zipCode, ...payload } = data;
|
||||
const res = await api.post<User & { profileImageUploadUrl: string }>(
|
||||
=======
|
||||
const res = await api.get(`/user/${id}/profile-image`, {
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
|
||||
'X-Tid': flow?.transactionId,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res) return false;
|
||||
if (res.status === 200) return res.data;
|
||||
if (res.status === 204) return null;
|
||||
|
||||
return false;
|
||||
}
|
||||
|
||||
async function addImageList(file: File, userId: string, name: string) {
|
||||
await api
|
||||
.put(`/user/${userId}/profile-image/${name}`, file, {
|
||||
headers: { 'Content-Type': file.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
|
||||
return name;
|
||||
}
|
||||
|
||||
async function deleteImageByName(
|
||||
id: string,
|
||||
name: string,
|
||||
flow?: {
|
||||
sessionId?: string;
|
||||
refTransactionId?: string;
|
||||
transactionId?: string;
|
||||
},
|
||||
) {
|
||||
const res = await api.delete(`/user/${id}/profile-image/${name}`, {
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
|
||||
'X-Tid': flow?.transactionId,
|
||||
},
|
||||
});
|
||||
|
||||
if (!res) return false;
|
||||
}
|
||||
|
||||
async function create(
|
||||
data: UserCreate,
|
||||
imgList: {
|
||||
selectedImage: string;
|
||||
list: { url: string; imgFile: File | null; name: string }[];
|
||||
},
|
||||
flow?: {
|
||||
sessionId?: string;
|
||||
refTransactionId?: string;
|
||||
transactionId?: string;
|
||||
},
|
||||
) {
|
||||
const { zipCode, ...payload } = data;
|
||||
const res = await api.post<User & { profileImageUploadUrl: string }>(
|
||||
'/user',
|
||||
payload,
|
||||
{
|
||||
...payload,
|
||||
selectedImage: imgList.selectedImage || '',
|
||||
},
|
||||
{
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
|
|
@ -287,13 +353,12 @@ const useUserStore = defineStore('api-user', () => {
|
|||
},
|
||||
);
|
||||
|
||||
if (profileImage && res.data.id) {
|
||||
await api
|
||||
.put(`/user/${res.data.id}/image`, profileImage, {
|
||||
headers: { 'Content-Type': profileImage.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
if (imgList.list.length > 0 && res.data.id) {
|
||||
for (let index = 0; index < imgList.list.length; index++) {
|
||||
const imgFile = imgList.list[index].imgFile;
|
||||
if (imgFile)
|
||||
await addImageList(imgFile, res.data.id, imgList.list[index].name);
|
||||
}
|
||||
}
|
||||
|
||||
if (!res) return false;
|
||||
|
|
@ -310,26 +375,13 @@ const useUserStore = defineStore('api-user', () => {
|
|||
transactionId?: string;
|
||||
},
|
||||
) {
|
||||
const { profileImage, ...payload } = data;
|
||||
const res = await api.put<User & { profileImageUploadUrl: string }>(
|
||||
`/user/${id}`,
|
||||
payload,
|
||||
{
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
|
||||
'X-Tid': flow?.transactionId,
|
||||
},
|
||||
const res = await api.put<User>(`/user/${id}`, data, {
|
||||
headers: {
|
||||
'X-Session-Id': flow?.sessionId,
|
||||
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
|
||||
'X-Tid': flow?.transactionId,
|
||||
},
|
||||
);
|
||||
|
||||
if (profileImage)
|
||||
await axios
|
||||
.put(res.data.profileImageUploadUrl, profileImage, {
|
||||
headers: { 'Content-Type': profileImage.type },
|
||||
onUploadProgress: (e) => console.log(e),
|
||||
})
|
||||
.catch((e) => console.error(e));
|
||||
});
|
||||
|
||||
if (!res) return false;
|
||||
|
||||
|
|
@ -460,6 +512,10 @@ const useUserStore = defineStore('api-user', () => {
|
|||
fetchList,
|
||||
fetchById,
|
||||
|
||||
fetchImageListById,
|
||||
addImageList,
|
||||
deleteImageByName,
|
||||
|
||||
create,
|
||||
editById,
|
||||
deleteById,
|
||||
|
|
|
|||
|
|
@ -3,6 +3,7 @@ import { Branch } from '../branch/types';
|
|||
import { Status } from '../types';
|
||||
|
||||
export type User = {
|
||||
selectedImage?: string;
|
||||
subDistrict: SubDistrict | null;
|
||||
district: District | null;
|
||||
province: Province | null;
|
||||
|
|
@ -41,7 +42,6 @@ export type User = {
|
|||
firstName: string;
|
||||
namePrefix?: string | null;
|
||||
id: string;
|
||||
profileImageUrl: string;
|
||||
code: string;
|
||||
birthDate?: Date | null;
|
||||
responsibleArea: string;
|
||||
|
|
@ -51,6 +51,7 @@ export type User = {
|
|||
};
|
||||
|
||||
export type UserCreate = {
|
||||
selectedImage?: string;
|
||||
branchId: string;
|
||||
provinceId?: string | null;
|
||||
districtId?: string | null;
|
||||
|
|
@ -82,7 +83,6 @@ export type UserCreate = {
|
|||
userType: string;
|
||||
username: string;
|
||||
status?: Status;
|
||||
profileImage?: File | null; // required but not strict
|
||||
birthDate?: Date | null;
|
||||
responsibleArea?: string | null;
|
||||
checkpoint?: string | null;
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue