{{ $t(v.label) }}
-
1
+
{{ v.count }}
diff --git a/src/components/home/PersonCard.vue b/src/components/home/PersonCard.vue
index ce416225..ab17ebcd 100644
--- a/src/components/home/PersonCard.vue
+++ b/src/components/home/PersonCard.vue
@@ -7,6 +7,7 @@ import { Icon } from '@iconify/vue';
defineProps<{
list: {
+ id: string;
name: string;
detail: { label: string; value: string }[];
male?: boolean;
@@ -18,6 +19,11 @@ defineProps<{
detailColumnCount?: number;
}>();
+defineEmits<{
+ (e: 'deleteCard', id: string): void;
+ (e: 'updateCard', id: string): void;
+}>();
+
const status = ref(false);
@@ -55,7 +61,11 @@ const status = ref(false);
{{ $t('edit') }}
-
+
-import { ref, onMounted } from 'vue';
-import useUserStore from 'stores/user';
+import { ref, onMounted, watch } from 'vue';
+import { api } from 'src/boot/axios';
import { storeToRefs } from 'pinia';
+import useUserStore from 'stores/user';
+import useBranchStore from 'src/stores/branch';
+
+import { UserCreate, UserTypeStats } from 'src/stores/user/types';
+import { BranchUserStats } from 'src/stores/branch/types';
+// import { dateFormat } from 'src/utils/datetime';
import PersonCard from 'components/home/PersonCard.vue';
import AppBox from 'components/app/AppBox.vue';
@@ -10,72 +16,170 @@ import SelectorList from 'components/SelectorList.vue';
import BtnAddComponent from 'components/01_branch-management/BtnAddComponent.vue';
import TooltipComponent from 'components/TooltipComponent.vue';
import FormDialog from 'src/components/FormDialog.vue';
+import GlobalDialog from 'components/GlobalDialog.vue';
+const branchStore = useBranchStore();
const userStore = useUserStore();
const { data: userData } = storeToRefs(userStore);
-onMounted(async () => {
- await userStore.fetchList();
+const defaultFormData = {
+ provinceId: null,
+ districtId: null,
+ subDistrictId: null,
+ telephoneNo: '',
+ email: '',
+ zipCode: '',
+ gender: '',
+ addressEN: '',
+ address: '',
+ trainingPlace: null,
+ importNationality: null,
+ sourceNationality: null,
+ licenseExpireDate: null,
+ licenseIssueDate: null,
+ licenseNo: null,
+ discountCondition: '',
+ retireDate: null,
+ startDate: null,
+ registrationNo: null,
+ lastNameEN: '',
+ lastName: '',
+ firstNameEN: '',
+ firstName: '',
+ userRole: '',
+ userType: '',
+ keycloakId: '',
+ profileImage: null,
+ birthDate: null,
+ responsibleArea: '',
+};
+const userId = ref('');
+const modal = ref(false);
+const status = ref(false);
+const selectorLabel = ref('');
+const hqId = ref('');
+const brId = ref('');
+const username = ref('');
+const formData = ref(structuredClone(defaultFormData));
+const userStats = ref();
+const typeStats = ref();
+const age = ref();
+
+const confirmData = ref({
+ modal: false,
+ title: '',
+ message: '',
+ icon: '',
+ action: () => {},
});
-const branchStat = ref([
- { label: 'Branch A', amount: 1 },
- { label: 'Branch B', amount: 5 },
- { label: 'Branch C', amount: 3 },
-]);
-
-const selectorLabel = ref('');
-const modal = ref(false);
-
-const hqId = ref('');
-const branchId = ref('');
-
-const genderOptions = ref([
- { label: 'ชาย', value: '1' },
- { label: 'หญิง', value: '2' },
-]);
-
-const hqOptions = ref([
+const userTypeOpts = [
+ { label: 'พนักงาน', value: 'USER' },
+ { label: 'พนักงานส่งเอกสาร', value: 'MESSENGER' },
+ { label: 'ตัวแทน', value: 'DELEGATE' },
+ { label: 'เอเจนซี่', value: 'AGENCY' },
+];
+const genderOpts = [
+ { label: 'ชาย', value: 'male' },
+ { label: 'หญิง', value: 'female' },
+];
+const hqOpts = ref([
{ label: '0000000001', value: '1' },
{ label: '0000000002', value: '2' },
]);
-const branchOptions = ref([
+const brOpts = ref([
{ label: '0000000001-1', value: '1' },
{ label: '0000000001-2', value: '2' },
]);
-const formData = ref({
- hqId: '',
- branchId: '',
- tel: '',
- gender: '',
- email: '',
- addressL: {
- address: '',
- province: '',
- district: '',
- subDistrict: '',
- zip: '',
- },
- addressEng: {
- address: '',
- province: '',
- district: '',
- subDistrict: '',
- zip: '',
- },
-});
-
const selectorList = [
{ label: 'personnelSelector1', count: 0 },
{ label: 'personnelSelector2', count: 0 },
{ label: 'personnelSelector3', count: 0 },
{ label: 'personnelSelector4', count: 0 },
-] satisfies InstanceType['$props']['list'];
+];
+
+async function createKeycloak() {
+ const res = await api.post('/keycloak/user', {
+ lastName: formData.value.lastNameEN,
+ firstName: formData.value.firstNameEN,
+ password: username.value,
+ username: username.value,
+ });
+ return res.data;
+}
+
+// function selectFile() {
+// const fileInput = this.$refs.file;
+// fileInput.pickFiles();
+// }
function openDialog() {
modal.value = true;
}
+
+function onClose() {
+ modal.value = false;
+ Object.assign(formData.value, defaultFormData);
+ hqId.value = '';
+ brId.value = '';
+ username.value = '';
+ userId.value = '';
+ mapUserType(selectorLabel.value);
+}
+
+function submitConfirm() {
+ confirmData.value.modal = true;
+}
+
+async function onSubmit(id?: string) {
+ try {
+ if (id) {
+ await userStore.editById(id, formData.value);
+ } else {
+ formData.value.keycloakId = await createKeycloak();
+ await userStore.create(formData.value);
+ }
+ } finally {
+ modal.value = false;
+ await userStore.fetchList();
+ }
+}
+
+async function onDelete(id: string) {
+ await userStore.deleteById(id);
+ await userStore.fetchList();
+}
+
+function mapUserType(label: string) {
+ if (label === 'personnelSelector1') {
+ formData.value.userType = 'USER';
+ } else if (label === 'personnelSelector2') {
+ formData.value.userType = 'MESSENGER';
+ } else if (label === 'personnelSelector3') {
+ formData.value.userType = 'DELEGATE';
+ } else if (label === 'personnelSelector4') {
+ formData.value.userType = 'AGENCY';
+ }
+}
+
+onMounted(async () => {
+ await userStore.fetchList();
+ typeStats.value = await userStore.typeStats();
+ if ((await branchStore.userStats(formData.value.userType)) !== false) {
+ userStats.value = await branchStore.userStats(formData.value.userType);
+ }
+});
+
+watch(
+ () => selectorLabel.value,
+ async (label) => {
+ mapUserType(label);
+ if ((await branchStore.userStats(label)) !== false) {
+ userStats.value = await branchStore.userStats(label);
+ }
+ },
+);
@@ -108,7 +212,16 @@ function openDialog() {
/>