jobdone-shared-files 1.0.53 → 1.1.0

package/ProjectContactUserPicker.vue

@@ -0,0 +1,196 @@
+<template>
+    <div class="input-content">
+        <div class="user-pick-autocomplete-select-box-group">
+            <div class="user-pick-autocomplete-select-box">
+                <autocomplete-select
+                    :trigger-class="`${organSelectClass} ${organInvalid && !organPicked?.organId ? 'is-invalid' : ''}`"
+                    :clear-btn="clearBtn" :opts="optsAdjust" preview-key="organName" :filter-keys="['organName']"
+                    :selected-data="organPicked" placeholder="所屬公司 / 協力廠商 / 專案成員" searchPlaceholder="文字篩選"
+                    @select="(v) => selectOrgan(v)" :reset-value="defaultOrgan" />
+                    <small class="text-danger mt-1" v-if="organInvalid && !organPicked?.organId">必填</small>
+            </div>
+            <div class="user-pick-autocomplete-select-box">
+                <autocomplete-select ref="userPicker" :trigger-class="`${userSelectClass} ${userInvalid && !userPicked?.userId ? 'is-invalid' : ''}`"
+                    :opts="organPickedUsers"
+                    :clear-btn="clearBtn" :disabled="!organPicked?.organId"
+                    :preview-key="userPicked.userId ? `displayName + ' ( ' + lastName +' ' + firstName + ' ) ' + '( 電話： ' + phoneNumber + ' )'` : 'displayName'"
+                    :filter-keys="['displayName', 'firstName', 'lastName', 'phoneNumber']" :selected-data="userPicked"
+                    :placeholder="organPicked?.organId ? '選擇受文者' : '請先選擇受文者所屬公司 / 協力廠商 / 專案成員'"
+                    searchPlaceholder="文字篩選名稱 / 電話" @select="(v) => selectUser(v)" :reset-value="defaultUser"
+                    opt-class="border-bottom" :html-option='true'>
+                    <template #option="{ optData }">
+                        <small class="text-gray-500">
+                            {{ optData.phoneNumber }}
+                        </small>
+                        <div>
+                            {{ optData.displayName }} ( {{ optData.lastName }} {{ optData.firstName }} )
+                        </div>
+                    </template>
+                </autocomplete-select>
+                <small class="text-danger mt-1" v-if="userInvalid && !userPicked?.userId">必填</small>
+            </div>
+        </div>
+    </div>
+</template>
+<script setup>
+import { computed, ref, reactive, nextTick } from "vue"
+import { renewReactiveAry } from "./common/helper.js"
+import autocompleteSelect from "./autocompleteSelect.vue";
+
+const emit = defineEmits(['selectUser', 'resetSelected'])
+const props = defineProps({
+    opts: {
+        type: Array,
+        default: []
+    },
+    clearBtn: {
+        type: Boolean,
+        default: true
+    },
+    organInvalid: {
+        type: Boolean,
+        default: false
+    },
+    userInvalid: {
+        type: Boolean,
+        default: false
+    },
+    organSelectClass: {
+        type: String,
+        default: ''
+    },
+    userSelectClass: {
+        type: String,
+        default: ''
+    }
+})
+
+const optsAdjust = computed((rowOpts = props.opts || []) => {
+    let ary = rowOpts.map(i => {
+        return {
+            organName: i.organization?.name || '無所屬公司',
+            organId: i.organization?.id || `fakeId_${crypto.randomUUID()}`,
+            users: i.users || [],
+        }
+    })
+    return ary || []
+})
+const resetSelected = () => {
+    selectOrgan(defaultOrgan)
+    selectUser(defaultUser)
+    renewReactiveAry(organPickedUsers, [])
+}
+const setOrganSelectFirst = () => {
+    selectOrgan(optsAdjust.value[0] || defaultOrgan)
+}
+const setSelected = (userId) => {
+    if (!userId) {
+        resetSelected()
+        return
+    }
+    let userIdList = optsAdjust.value.flatMap(i => i.users.map(item => (
+        {
+            ...item,
+            organization: {
+                organName: i.organName,
+                organId: i.organId,
+                users: i.users
+            }
+        }
+    ))) || []
+    let user = userIdList.find(i => i.userId == userId)
+    if (!user) {
+        resetSelected()
+        return
+    }
+    selectOrgan(user.organization)
+    selectUser(user, true)
+}
+
+const defaultOrgan = {
+    organName: '',
+    organId: '',
+    users: []
+}
+
+const defaultUser = {
+    employeeId: null,
+    userId: null,
+    account: "",
+    phoneNumber: "",
+    email: "",
+    firstName: "",
+    lastName: "",
+    displayName: "",
+    picture: "",
+    isAdmin: false,
+    permission: 0,
+    organizationId: "",
+    organizationName: "",
+    organizationLocation: "",
+    organizationLicenseNo: "",
+    organizationIndustryType: "",
+    organizationDescription: "",
+    organizationLogoUrl: "",
+    fullName: ""
+}
+
+const organPicked = reactive({ ...defaultOrgan })
+const organPickedUsers = reactive([])
+const selectOrgan = (organ) => {
+    organPicked.organName = organ.organName
+    organPicked.organId = organ.organId
+    renewReactiveAry(organPickedUsers, organ.users)
+    selectUser(defaultUser)
+}
+
+const userPicker = ref(null)
+const userPicked = reactive({ ...defaultUser })
+const selectUser = async (userInfo, isSetSelected = false) => {
+    if (!userInfo) {
+        return
+    }
+    userPicked.employeeId = userInfo.employeeId;
+    userPicked.userId = userInfo.userId;
+    userPicked.account = userInfo.account;
+    userPicked.phoneNumber = userInfo.phoneNumber;
+    userPicked.email = userInfo.email;
+    userPicked.firstName = userInfo.firstName;
+    userPicked.lastName = userInfo.lastName;
+    userPicked.displayName = userInfo.displayName;
+    userPicked.displayName = userInfo.displayName;
+    userPicked.picture = userInfo.picture;
+    userPicked.isAdmin = userInfo.isAdmin;
+    userPicked.permission = userInfo.permission;
+    userPicked.organizationId = userInfo.organization?.id || '';
+    userPicked.organizationName = userInfo.organization?.name || '';
+    userPicked.organizationLocation = userInfo.organization?.location || '';
+    userPicked.organizationLicenseNo = userInfo.organization?.licenseNo || '';
+    userPicked.organizationIndustryType = userInfo.organization?.industryType || '';
+    userPicked.organizationIndustryType = userInfo.organization?.description || '';
+    userPicked.organizationIndustryType = userInfo.organization?.logoUrl || '';
+    userPicked.fullName = userInfo.fullName;
+    await nextTick()
+    emit('selectUser', userPicked)
+};
+defineExpose({ setSelected, resetSelected, setOrganSelectFirst })
+</script>
+<style lang="scss" scoped>
+.input-content {
+    display: flex;
+    flex: 1;
+    gap: .5rem;
+    align-self: baseline;
+    flex-direction: column;
+}
+
+.user-pick-autocomplete-select-box {
+    display: block;
+}
+
+.user-pick-autocomplete-select-box-group {
+    display: grid;
+    gap: .5rem;
+    grid-template-columns: 1fr 2fr;
+}
+</style>

package/common/helper.js

@@ -0,0 +1,12 @@
+export const renewReactiveAry = (rowData, newData) => {
+    if (rowData?.length > 0) {
+        rowData.splice(0, rowData.length)
+    }
+    if (newData?.length > 0) {
+        let newD = JSON.parse(JSON.stringify(newData))
+        newD.forEach(element => {
+            rowData.push(element)
+        });
+    }
+
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jobdone-shared-files",
-  "version": "1.0.53",
+  "version": "1.1.0",
   "description": "Shared JS and SCSS for Jobdone Enterprise.",
   "main": "index.js",
   "scripts": {