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

feat: agencies => image upload (#67)

Browse source
This commit is contained in:
puriphatt 2024-11-08 17:21:25 +07:00 • committed by GitHub
parent 86a3247732
commit 4e622153ac
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 346 additions and 50 deletions
Download patch file Download diff file Expand all files Collapse all files

201
src/pages/07_agencies-management/AgenciesDialog.vue
View file

@ -1,39 +1,70 @@
<script setup lang="ts">
import DialogForm from 'src/components/DialogForm.vue';
import { reactive, ref, watch } from 'vue';
import { InstitutionPayload } from 'src/stores/institution/types';
import { Icon } from '@iconify/vue/dist/iconify.js';
import { useInstitution } from 'src/stores/institution';
import { baseUrl } from 'src/stores/utils';
import DrawerInfo from 'src/components/DrawerInfo.vue';
import DialogForm from 'src/components/DialogForm.vue';
import ProfileBanner from 'src/components/ProfileBanner.vue';
import SideMenu from 'src/components/SideMenu.vue';
import FormBasicInfoAgencies from 'src/components/07_agencies-management/FormBasicInfoAgencies.vue';
import AddressForm from 'src/components/form/AddressForm.vue';
import {
UndoButton,
SaveButton,
EditButton,
DeleteButton,
} from 'src/components/button';
import { InstitutionPayload } from 'src/stores/institution/types';
import AddressForm from 'src/components/form/AddressForm.vue';
import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
const institutionStore = useInstitution();
const model = defineModel<boolean>({ required: true, default: false });
const drawerModel = defineModel<boolean>('drawerModel', {
required: true,
default: false,
});
const onCreateImageList = defineModel<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>('onCreateImageList', { default: { selectedImage: '', list: [] } });
withDefaults(
const imageState = reactive({
imageDialog: false,
isImageEdit: false,
refreshImageState: false,
imageUrl: '',
});
const imageFile = ref<File | null>(null);
const imageList = ref<{ selectedImage: string; list: string[] }>();
const props = withDefaults(
defineProps<{
readonly?: boolean;
isEdit?: boolean;
dataId?: string;
}>(),
{ readonly: false, isEdit: false },
{ readonly: false, isEdit: false, dataId: '' },
);
defineEmits<{
defineExpose({ clearImageState });
const emit = defineEmits<{
(e: 'submit'): void;
(e: 'close'): void;
(e: 'changeStatus'): void;
(e: 'drawerUndo'): void;
(e: 'drawerEdit'): void;
(e: 'drawerDelete'): void;
(e: 'addImage'): void;
(e: 'removeImage'): void;
(e: 'submitImage', name: string): void;
}>();
const data = defineModel<InstitutionPayload>('data', {
@ -54,8 +85,96 @@ const data = defineModel<InstitutionPayload>('data', {
subDistrictId: '',
districtId: '',
provinceId: '',
selectedImage: '',
},
});
function viewImage() {
imageState.imageDialog = true;
imageState.isImageEdit = false;
}
function editImage() {
imageState.imageDialog = imageState.isImageEdit = true;
}
async function fetchImageList(id: string, selectedName: string) {
const res = await institutionStore.fetchImageListById(id);
imageList.value = {
selectedImage: selectedName,
list: res.map((n: string) => `institution/${id}/image/${n}`),
};
return res;
}
async function addImage(file: File | null) {
if (!file) return;
if (!props.dataId) return;
await institutionStore.addImageList(
file,
props.dataId,
Date.now().toString(),
);
await fetchImageList(props.dataId, data.value.selectedImage || '');
}
async function removeImage(name: string) {
if (!name) return;
if (!props.dataId) return;
const targetName = name.split('/').pop() || '';
await institutionStore.deleteImageByName(props.dataId, targetName);
await fetchImageList(props.dataId, data.value.selectedImage || '');
}
async function submitImage(name: string) {
if (model.value) {
imageState.imageUrl = name;
imageState.imageDialog = false;
} else {
imageState.refreshImageState = true;
emit('submitImage', name);
}
}
function clearImageState() {
imageState.imageDialog = false;
imageFile.value = null;
onCreateImageList.value = { selectedImage: '', list: [] };
imageState.refreshImageState = false;
}
watch(
() => imageFile.value,
() => {
if (imageFile.value !== null) imageState.isImageEdit = true;
},
);
watch(
() => data.value.selectedImage,
() => {
imageState.imageUrl = `${baseUrl}/institution/${props.dataId}/image/${data.value.selectedImage}`;
imageList.value
? (imageList.value.selectedImage = data.value.selectedImage || '')
: '';
console.log(imageState.imageUrl);
imageState.refreshImageState = false;
},
);
watch(
() => drawerModel.value,
async () => {
if (drawerModel.value) {
await fetchImageList(props.dataId, data.value.selectedImage || '');
imageState.imageUrl = `${baseUrl}/institution/${props.dataId}/image/${data.value.selectedImage}`;
} else {
imageList.value = { selectedImage: '', list: [] };
}
},
);
</script>
<template>
<DialogForm
@ -63,7 +182,13 @@ const data = defineModel<InstitutionPayload>('data', {
:title="$t('general.add', { text: $t('agencies.title') })"
v-model:modal="model"
:submit="() => $emit('submit')"
:close="() => $emit('close')"
:close="
() => {
imageState.imageUrl = '';
clearImageState();
$emit('close');
}
"
>
<div
:class="{
@ -72,24 +197,18 @@ const data = defineModel<InstitutionPayload>('data', {
}"
>
<ProfileBanner
no-image-action
readonly
active
hide-fade
hide-active
:icon="'ph-building-office'"
:img="imageState.imageUrl || null"
:title="data.name"
:caption="data.code"
:color="`hsla(var(--green-8-hsl)/1)`"
:bg-color="`hsla(var(--green-8-hsl)/0.1)`"
@view="viewImage"
@edit="editImage"
/>
<!-- v-model:toggle-status="currentStatusGroupType"
@update:toggle-status="
() => {
currentStatusGroupType =
currentStatusGroupType === 'CREATED' ? 'INACTIVE' : 'CREATED';
}
" -->
</div>
<div
@ -177,7 +296,12 @@ const data = defineModel<InstitutionPayload>('data', {
:title="data.name"
v-model:drawerOpen="drawerModel"
:submit="() => $emit('submit')"
:close="() => $emit('close')"
:close="
() => {
clearImageState();
$emit('close');
}
"
>
<div class="col column full-height">
<div
@ -187,8 +311,6 @@ const data = defineModel<InstitutionPayload>('data', {
}"
>
<ProfileBanner
no-image-action
readonly
active
hide-fade
hide-active
@ -197,6 +319,13 @@ const data = defineModel<InstitutionPayload>('data', {
:caption="data.code"
:color="`hsla(var(${'--green-8'}-hsl)/1)`"
:bg-color="`hsla(var(${'--green-8'}-hsl)/0.1)`"
:img="
`${baseUrl}/institution/${dataId}/image/${data.selectedImage}`.concat(
imageState.refreshImageState ? `?ts=${Date.now()}` : '',
) || null
"
@view="viewImage"
@edit="editImage"
/>
</div>
@ -330,5 +459,39 @@ const data = defineModel<InstitutionPayload>('data', {
</div>
</div>
</DrawerInfo>
<ImageUploadDialog
v-model:dialog-state="imageState.imageDialog"
v-model:file="imageFile"
v-model:on-create-data-list="onCreateImageList"
v-model:image-url="imageState.imageUrl"
v-model:data-list="imageList"
:on-create="model"
:hiddenFooter="!imageState.isImageEdit"
@add-image="addImage"
@remove-image="removeImage"
@submit="submitImage"
>
<template #title>
<span v-if="!model" class="justify-center flex text-bold">
{{ $t('general.image') }}
{{ $i18n.locale === 'eng' ? data.nameEN : data.name }}
</span>
</template>
<template #error>
<div class="full-height full-width" style="background: white">
<div
class="full-height full-width flex justify-center items-center"
style="
background: hsla(var(--green-8-hsl) / 0.1);
color: hsla(var(--green-8-hsl) / 1);
"
>
<Icon width="3rem" icon="ph-building-office" />
</div>
</div>
</template>
</ImageUploadDialog>
</template>
<style scoped></style>

110
src/pages/07_agencies-management/MainPage.vue
View file

@ -6,6 +6,7 @@ import { storeToRefs } from 'pinia';
import { Icon } from '@iconify/vue/dist/iconify.js';
import { useI18n } from 'vue-i18n';
import { baseUrl } from 'src/stores/utils';
import { useNavigator } from 'src/stores/navigator';
import { useInstitution } from 'src/stores/institution';
import { Institution, InstitutionPayload } from 'src/stores/institution/types';
@ -95,9 +96,16 @@ const blankFormData: InstitutionPayload = {
subDistrictId: '',
districtId: '',
provinceId: '',
selectedImage: '',
};
const refAgenciesDialog = ref();
const formData = ref<InstitutionPayload>(structuredClone(blankFormData));
const currAgenciesData = ref<Institution>();
const onCreateImageList = ref<{
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
}>({ selectedImage: '', list: [] });
function triggerDialog(type: 'add' | 'edit' | 'view') {
if (type === 'add') {
@ -146,10 +154,11 @@ function assignFormData(data: Institution) {
subDistrictId: data.subDistrictId,
districtId: data.districtId,
provinceId: data.provinceId,
selectedImage: data.selectedImage,
};
}
async function submit() {
async function submit(opt?: { selectedImage: string }) {
const payload = {
group: undefined,
code: formData.value.code,
@ -167,26 +176,41 @@ async function submit() {
districtId: formData.value.districtId,
provinceId: formData.value.provinceId,
};
if (pageState.isDrawerEdit && currAgenciesData.value?.id) {
if (
(pageState.isDrawerEdit && currAgenciesData.value?.id) ||
(opt?.selectedImage && currAgenciesData.value?.id)
) {
const ret = await institutionStore.editInstitution(
Object.assign(payload, { id: currAgenciesData.value.id }),
Object.assign(payload, {
id: currAgenciesData.value.id,
selectedImage: opt?.selectedImage || undefined,
}),
);
if (ret) {
pageState.isDrawerEdit = false;
currAgenciesData.value = ret;
formData.value.selectedImage = ret.selectedImage;
await fetchData();
if (refAgenciesDialog.value && opt?.selectedImage) {
refAgenciesDialog.value.clearImageState();
}
return;
}
} else {
await institutionStore.createInstitution(
{
...payload,
code: formData.value.group || '',
},
onCreateImageList.value,
);
await fetchData();
pageState.addModal = false;
return;
}
await institutionStore.createInstitution({
...payload,
code: formData.value.group || '',
});
await fetchData();
pageState.addModal = false;
}
async function triggerChangeStatus(data?: Institution) {}
@ -409,7 +433,7 @@ watch(
<!-- SEC: body content -->
<article
v-if="false"
v-if="data.length === 0"
class="col surface-2 flex items-center justify-center"
>
<NoData
@ -476,14 +500,24 @@ watch(
</q-td>
<q-td v-if="fieldSelected.includes('name')">
<section class="row items-center no-wrap">
<q-avatar
size="md"
style="
background: hsla(var(--green-8-hsl) / 0.1);
color: hsla(var(--green-8-hsl) / 1);
"
>
<Icon icon="ph-building-office" />
<q-avatar size="md">
<q-img
class="text-center"
:ratio="1"
:src="`${baseUrl}/institution/${props.row.id}/image/${props.row.selectedImage}?ts=${Date.now()}`"
>
<template #error>
<div
class="no-padding full-width full-height flex items-center justify-center"
style="
background: hsla(var(--green-8-hsl) / 0.1);
color: hsla(var(--green-8-hsl) / 1);
"
>
<Icon icon="ph-building-office" />
</div>
</template>
</q-img>
</q-avatar>
<span class="col q-pl-md">
<div>
@ -558,14 +592,24 @@ watch(
<section class="column col-12 col-md-6">
<div class="bordered col surface-1 rounded q-pa-md">
<header class="row items-center">
<q-avatar
size="xl"
style="
background: hsla(var(--green-8-hsl) / 0.1);
color: hsla(var(--green-8-hsl) / 1);
"
>
<Icon icon="ph-building-office" />
<q-avatar size="xl">
<q-img
class="text-center"
:ratio="1"
:src="`${baseUrl}/institution/${props.row.id}/image/${props.row.selectedImage}?ts=${Date.now()}`"
>
<template #error>
<div
class="no-padding full-width full-height flex items-center justify-center"
style="
background: hsla(var(--green-8-hsl) / 0.1);
color: hsla(var(--green-8-hsl) / 1);
"
>
<Icon icon="ph-building-office" />
</div>
</template>
</q-img>
</q-avatar>
<span class="text-weight-bold column q-pl-md">
{{
@ -697,6 +741,8 @@ watch(
</div>
<AgenciesDialog
ref="refAgenciesDialog"
:data-id="currAgenciesData && currAgenciesData.id"
@change-status="triggerChangeStatus"
@drawer-delete="
() => {
@ -707,11 +753,17 @@ watch(
@drawer-undo="undo"
@close="resetForm"
@submit="submit"
@submit-image="
async (v) => {
if (v) await submit({ selectedImage: v });
}
"
:readonly="!pageState.isDrawerEdit"
:isEdit="pageState.isDrawerEdit"
v-model="pageState.addModal"
v-model:drawer-model="pageState.viewDrawer"
v-model:data="formData"
v-model:on-create-image-list="onCreateImageList"
/>
</template>
<style scoped>

83
src/stores/institution/index.ts
View file

@ -3,8 +3,11 @@ import { ref } from 'vue';
import { Institution, InstitutionPayload } from './types';
import { api } from 'src/boot/axios';
import { PaginationResult } from 'src/types';
import useFlowStore from '../flow';
export const useInstitution = defineStore('institution-store', () => {
const flowStore = useFlowStore();
const data = ref<Institution[]>([]);
const page = ref<number>(1);
const pageMax = ref<number>(1);
@ -33,8 +36,26 @@ export const useInstitution = defineStore('institution-store', () => {
return null;
}
async function createInstitution(data: InstitutionPayload) {
const res = await api.post('/institution', data);
async function createInstitution(
data: InstitutionPayload,
imgList: {
selectedImage: string;
list: { url: string; imgFile: File | null; name: string }[];
},
) {
const res = await api.post('/institution', {
...data,
selectedImage: imgList.selectedImage || '',
});
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.status < 400) {
return res.data;
}
@ -60,6 +81,60 @@ export const useInstitution = defineStore('institution-store', () => {
return null;
}
async function fetchImageListById(
id: string,
flow?: {
sessionId?: string;
refTransactionId?: string;
transactionId?: string;
},
) {
const res = await api.get(`/institution/${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, id: string, name: string) {
await api
.put(`/institution/${id}/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(`/institution/${id}/image/${name}`, {
headers: {
'X-Session-Id': flow?.sessionId,
'X-Rtid': flow?.refTransactionId || flowStore.rtid,
'X-Tid': flow?.transactionId,
},
});
if (!res) return false;
}
return {
data,
page,
@ -71,5 +146,9 @@ export const useInstitution = defineStore('institution-store', () => {
createInstitution,
editInstitution,
deleteInstitution,
fetchImageListById,
addImageList,
deleteImageByName,
};
});

2
src/stores/institution/types.ts
View file

@ -6,6 +6,7 @@ export type Institution = {
group: string;
name: string;
nameEN: string;
selectedImage?: string | null;
addressEN: string;
address: string;
@ -29,6 +30,7 @@ export type InstitutionPayload = {
name: string;
nameEN: string;
group?: string;
selectedImage?: string | null;
addressEN: string;
address: string;