jobdone-shared-files 0.0.1-beta.79 → 0.0.1-beta.80

package/ProjectManagement/projectNavbar.vue

@@ -12,45 +12,39 @@
                 <div class="border-end">
                     <a :href="arrowBackLink" class="btn btn-normal btn-square" title="離開專案"><span class="material-icons">arrow_back</span></a>
                 </div>
-                <span class="fs-6 mb-0 mx-4 text-nowrap text-project-title"><b>{{projectInfo.name}}</b></span>
+                <span class="fs-6 mb-0 mx-4 text-nowrap text-project-title"><b>{{projectInfo?.name}}</b></span>
                 <!--TODO: 解決 overflow scroll 與 dropdown 衝突-->
                 <div class="flex-grow-1 text-nowrap">
                     <div class="d-flex flex-grow-1 border-start">
                         <nav class="navbar-nav navbar-main navbar-line navbar-line-lg">
                             <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
-                                    :class="{'active':activeLinkType==0}">
+                                    :class="{'active': isActive(null)}">
                                 <a class="dropdown-link" :href="finalRootDomain + '/ProjectManagement/ProjectInfo?id=' + projectId">
                                     專案資訊
                                 </a>
                             </div>
                             <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
-                                 :class="{'active':activeLinkType==1}">
-                                <a :href="navLinkObj.url + projectId" class="dropdown-link" v-if="navLinkObj.selfIsApp">
-                                    <span class="material-icons icon-18 me-2">{{ navLinkObj.icon }}</span>
-                                    {{ navLinkObj.name }}
+                                 :class="{'active': isActive(navLinkObj.moduleLink)}">
+                                <a :href="navLinkObj.url + projectId" class="dropdown-link" v-if="navLinkObj?.moduleLink?.selfIsApp">
+                                    <span class="material-icons icon-18 me-2">{{ navLinkObj?.moduleLink?.icon }}</span>
+                                    {{ navLinkObj?.moduleLink?.name }}
                                 </a>
                                 <span class="dropdown-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" v-else>
-                                    <span class="material-icons icon-18 me-2">{{ navLinkObj.icon }}</span>
-                                    {{ navLinkObj.name }}
+                                    <span class="material-icons icon-18 me-2">{{ navLinkObj?.moduleLink?.icon }}</span>
+                                    {{ navLinkObj?.moduleLink?.name }}
                                 </span>
-                                <ul class="dropdown-menu" :class="{'p-0': navLinkObj.apps.length == 0}">
-                                    <li v-if="navLinkObj.apps.length > 0">
-                                        <a class="dropdown-item" :href="app.url + '?projectId=' + projectId" v-for="(app, index) in navLinkObj.apps" :key="index">{{app.name}}</a>
+                                <ul class="dropdown-menu" :class="{'p-0': navLinkObj?.moduleLink?.apps?.length??0 == 0}">
+                                    <li v-if="navLinkObj?.moduleLink?.apps?.length??0 > 0">
+                                        <a class="dropdown-item" :href="app.url + '?projectId=' + projectId" v-for="(app, index) in navLinkObj.moduleLink.apps" :key="index">{{app.name}}</a>
                                     </li>
                                 </ul>
                             </div>
                             <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
-                                 :class="{'active':activeLinkType==2}">
-                                <a :href="'https://jobdone-improvement-sheet.azurewebsites.net/ProjectSheetList?projectId=' + projectId" class="dropdown-link">
-                                    <span class="material-icons icon-18 me-2">edit_document</span>
-                                    改善單
-                                </a>
-                            </div>
-                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown disabled"
-                                 :class="{'active':activeLinkType==3}">
-                                <a href="#" class="dropdown-link">
-                                    <span class="material-icons icon-18 me-2">rebase_edit</span>
-                                    家當表單
+                                 :class="{'active': isActive(item.clientId)}"
+                                 v-for="item in navLinkObj.generalLink">
+                                <a :href="item.url + '?projectId=' + projectId" class="dropdown-link">
+                                    <span class="material-icons icon-18 me-2">{{item.icon}}</span>
+                                    {{item.name}}
                                 </a>
                             </div>
                         </nav>
@@ -78,21 +72,21 @@
                 <span class="placeholder placeholder-xs w-6rem"></span>
             </div>
             <div class="navbar-content opacity-0 d-flex align-items-center">
-                <small class="d-flex me-4" v-if="projectInfo.caseNo">
+                <small class="d-flex me-4" v-if="projectInfo?.caseNo">
                     <b class="me-2">案號</b>
-                    <span>{{projectInfo.caseNo}}</span>
+                    <span>{{projectInfo?.caseNo}}</span>
                 </small>
                 <small class="d-flex me-4">
                     <b class="me-2">開工/完工日期</b>
-                    <span>{{formatDate(projectInfo.beginDT)}} - {{formatDate(projectInfo.endDT)}}</span>
+                    <span>{{formatDate(projectInfo?.beginDT)}} - {{formatDate(projectInfo?.endDT)}}</span>
                 </small>
                 <small class="d-flex me-4">
                     <b class="me-2">核定工期</b>
-                    <span>{{projectInfo.approvedWorkingPeriod}}天</span>
+                    <span>{{projectInfo?.approvedWorkingPeriod}}天</span>
                 </small>
-                <small class="d-flex" v-if="projectInfo.extendToDT">
+                <small class="d-flex" v-if="projectInfo?.extendToDT">
                     <b class="me-2">展延至</b>
-                    <span>{{ formatDate(projectInfo.extendToDT) }}{{}} ({{projectInfo.extendDays}}天)</span>
+                    <span>{{ formatDate(projectInfo?.extendToDT) }} ({{projectInfo?.extendDays}}天)</span>
                 </small>
                 <small class="d-flex ms-auto">
                     <slot></slot>
@@ -104,32 +98,32 @@
 
 <script>
     import { formatDate } from '../../../node_modules/jobdone-shared-files/common/format';
-    import { onMounted, ref } from 'vue';
+    import { onMounted, ref, computed, nextTick } from 'vue';
     import axios from 'axios';
 
     export default {
         props: {
-            rootDomain: {
+            arrowBackLink: {
                 type: String,
                 required: true
             },
-            arrowBackLink: {
+            projectId: {
                 type: String,
                 required: true
             },
-            activeLinkType: {
-                type: Number,
+            projectInfo: {
+                type: [String, Object],
                 required: true
             },
-            projectId: {
-                type: String,
+            projectApps: {
+                type: [String, Object],
                 required: true
             },
-            apiProjectInfo: {
+            activeClientId: {
                 type: String,
-                required: true
+                required: false,
             },
-            apiProjectApps: {
+            rootDomain: {
                 type: String,
                 required: true
             },
@@ -147,64 +141,116 @@
             }
         },
         setup(props) {
-            
-            const projectInfo = ref({
-                id: '',
-                orgnizationId: '',
-                moduleId: '',
-                caseNo: '',
-                buildingPermit: '',
-                name: '',
-                beginDT: '',
-                endDT: '',
-                approvedWorkingPeriod: '',
-                latitude: '',
-                longitude: '',
-                latitudeAndLongitude: '',
-                landSerialNo: '',
-                remark: '',
-                roleType: 1,
-                extendToDT: '',
-                extendDays: ''
-            });
-
-            const navLinkObj = ref({
-                apps: [],
-                icon: '',
-                name: '',
-                url: '',
-                selfIsApp: false
+            const projectInfo = ref({});
+            const navLinkObj = ref({});
+            const finalRootDomain = computed(() => {
+                if (props.rootDomain.substr(-1) === "/") {
+                    return props.rootDomain.slice(0, -1);
+                }
+                return props.rootDomain;
             });
 
-            const finalRootDomain = ref(props.rootDomain);
-
+            const isActive = (target) => {
+                if (target === null) {
+                    return target === null && !props.activeClientId;
+                }
+                if (typeof target === 'object') {
+                    return !!props.activeClientId && (target.clientId === props.activeClientId || target.apps.some(x => x.id == props.activeClientId))
+                }
+                if (!!props.activeClientId && target == props.activeClientId) {
+                    return true;
+                }
+                return false;
+            }
 
             onMounted(async () => {
-                try {
-                    if (finalRootDomain.value[finalRootDomain.value.length-1] == "/") {
-                        finalRootDomain.value = finalRootDomain.value.slice(0, -1);
-                    }
+                try {
+                    switch (typeof props.projectInfo) {
+                        case 'string':
+                            axios.get(props.projectInfo).then((res) => {
+                                projectInfo.value = res.data;
+                            });
+                            break;
+                        case 'object':
+                            projectInfo.value = props.projectInfo;
+                            break;
+                        default:
+                            projectInfo.value = {
+                                caseNo: '',
+                                name: '',
+                                beginDT: '',
+                                endDT: '',
+                                approvedWorkingPeriod: '',
+                                extendToDT: '',
+                                extendDays: ''
+                            };
+                            break;
+                    }
+                } catch (e) {
+                    projectInfo.value = {
+                        caseNo: '',
+                        name: '',
+                        beginDT: '',
+                        endDT: '',
+                        approvedWorkingPeriod: '',
+                        extendToDT: '',
+                        extendDays: ''
+                    };
+                }
+                try {
+                    switch (typeof props.projectApps) {
+                        case 'string':
+                            axios.get(props.projectApps).then((res) => {
+                                navLinkObj.value = res.data;
+                            });
+                            break;
+                        case 'object':
+                            navLinkObj.value = props.projectApps;
+                            break;
+                        default:
+                            navLinkObj.value = {
+                                "moduleLink": {
+                                    "apps": [],
+                                    "icon": "edit_document",
+                                    "name": "Module",
+                                    "url": "",
+                                    "mobileUrl": "",
+                                    "mobileAppRoute": "",
+                                    "clientId": null,
+                                    "selfIsApp": false
+                                },
+                                "generalLink": []
+                            }
+                            break;
+                    }
+                } catch (e) {
+                    navLinkObj.value = {
+                        "moduleLink": {
+                            "apps": [],
+                            "icon": "edit_document",
+                            "name": "Module",
+                            "url": "",
+                            "mobileUrl": "",
+                            "mobileAppRoute": "",
+                            "clientId": null,
+                            "selfIsApp": false
+                        },
+                        "generalLink": []
+                    }
+                }
+                
 
-                    const data = await Promise.all([
-                        axios.get(props.apiProjectInfo),
-                        axios.get(props.apiProjectApps)
-                    ]);
-                    Object.assign(projectInfo.value, data[0].data);
-                    Object.assign(navLinkObj.value, data[1].data);
-                    
+                nextTick(() => {
                     let navbarElements = document.getElementsByClassName('navbar-content');
-                    Array.from(navbarElements).forEach(function(item){
+                    Array.from(navbarElements).forEach(function (item) {
                         item.classList.remove("opacity-0");
                     });
 
                     let placeholderElements = document.getElementsByClassName('navbar-placeholder-content');
-                    Array.from(placeholderElements).forEach(function(item){
+                    Array.from(placeholderElements).forEach(function (item) {
                         item.classList.add("opacity-0");
                     });
-                    
-                } catch (error) {
-                    console.log(error);
-                }
+                });
             });
 
 
@@ -213,6 +259,7 @@
                 projectInfo,
                 navLinkObj,
                 finalRootDomain,
+                isActive
             }
         }
     }

package/README.md

@@ -49,14 +49,14 @@
 專案資訊 Navbar
 
 需要傳入的值：
-| 數值名稱             | 說明                                                              | 必要 |
-|------------------|-----------------------------------------------------------------|----|
-| root-domain      | 底層的 domain，傳入的值有無斜線皆可                                    | 是  |
-| arrow-back-link  | 離開專案的連結，一般來說是底層的 ProjectList                                    | 是  |
-| active-link-type | Navbar active 的種類 ( 0 = 專案資訊 / 1 = Module / 2 = 改善單 / 3 = 家當表單 ) | 是  |
+| 數值名稱         | 說明                                                                           | 必要 |
+|------------------|--------------------------------------------------------------------------------|------|
+| root-domain      | 底層的 domain，傳入的值有無斜線皆可                                            |  是  |
+| arrow-back-link  | 離開專案的連結，一般來說是底層的 ProjectList                                   |  是  |
+| project-info     | 可接受api url或物件，api僅支援Get請求，結構應為`{name: "", caseNo: "", caseNo: "",beginDT:"",endDT:"",approvedWorkingPeriod:0, extendToDT:"",extendDays:""}`|  是  |
+| project-apps     | 可接受api url或物件，api僅支援Get請求，結構去Copy底層API取得專案所屬Module的App連結(V2 TOP)|  是  |
+| active-client-id  | Navbar active的對象，請填入client id，不填預設active專案資訊| N |
 | project-id       | project id                                                      | 是  |
-| api-project-apps | 取得 project module & menu                                        | 是  |
-| api-project-info | 取得 project 資訊                                                   | 是  |
 | user-id          | 傳入 user 的帳號 id  | 是  |
 | user-picture     | 傳入 user 的大頭貼  | 是  |
 | log-out-link     | 登出連結                                                   | 是  |

package/common/directives/collapse.js

@@ -1,13 +1,13 @@
-import { Collapse } from 'bootstrap'
-
-export default {
-    mounted(el) {
-        Collapse.getOrCreateInstance(el, {
-            toggle: false
-        });
-    },
-    unmounted(el) {
-        var instance = Collapse.getOrCreateInstance(el);
-        instance.dispose();
-    }
+import { Collapse } from 'bootstrap'
+
+export default {
+    mounted(el) {
+        Collapse.getOrCreateInstance(el, {
+            toggle: false
+        });
+    },
+    unmounted(el) {
+        var instance = Collapse.getOrCreateInstance(el);
+        instance.dispose();
+    }
 }

package/common/directives/popovers.js

@@ -1,11 +1,11 @@
-import { Popover } from 'bootstrap'
-
-export default {
-    mounted(el) {
-        Popover.getOrCreateInstance(el);
-    },
-    unmounted(el) {
-        var instance = Popover.getOrCreateInstance(el);
-        instance.dispose();
-    }
+import { Popover } from 'bootstrap'
+
+export default {
+    mounted(el) {
+        Popover.getOrCreateInstance(el);
+    },
+    unmounted(el) {
+        var instance = Popover.getOrCreateInstance(el);
+        instance.dispose();
+    }
 }

package/common/directives/tooltip.js

@@ -1,11 +1,11 @@
-import { Tooltip } from 'bootstrap'
-
-export default {
-    mounted(el) {
-        Tooltip.getOrCreateInstance(el);
-    },
-    unmounted(el) {
-        var instance = Tooltip.getOrCreateInstance(el);
-        instance.dispose();
-    }
+import { Tooltip } from 'bootstrap'
+
+export default {
+    mounted(el) {
+        Tooltip.getOrCreateInstance(el);
+    },
+    unmounted(el) {
+        var instance = Tooltip.getOrCreateInstance(el);
+        instance.dispose();
+    }
 }

package/common/format.js

@@ -1,27 +1,27 @@
-import dayjs from 'dayjs';
-import { computed } from 'vue';
-
-// 時間格式
-export const formatDate = (value) => {
-    if (value === null || !value) {
-        return value;
-    } else {
-        return dayjs(value).format('YYYY-MM-DD');
-    }
-};
-
-export const formatDT = (value) => {
-    if (value === null || !value) {
-        return value;
-    } else {
-        return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
-    }
-};
-
-
-// 千分位格式
-export const formatThousands = computed(() => {
-    return function(number){
-        return new Intl.NumberFormat().format(number);
-    }
+import dayjs from 'dayjs';
+import { computed } from 'vue';
+
+// 時間格式
+export const formatDate = (value) => {
+    if (value === null || !value) {
+        return value;
+    } else {
+        return dayjs(value).format('YYYY-MM-DD');
+    }
+};
+
+export const formatDT = (value) => {
+    if (value === null || !value) {
+        return value;
+    } else {
+        return dayjs(value).format('YYYY-MM-DD HH:mm:ss');
+    }
+};
+
+
+// 千分位格式
+export const formatThousands = computed(() => {
+    return function(number){
+        return new Intl.NumberFormat().format(number);
+    }
 });

package/index.js

@@ -1,15 +1,15 @@
-import paginate from "./paginate.vue";
-import tagEditor from "./tagEditor.vue";
-import tree from "./tree.vue";
-import vueLoadingOverlay from "./vueLoadingOverlay.vue";
-import projectNavbar from "./ProjectManagement/projectNavbar.vue";
-
-export default {
-    paginate,
-    tagEditor,
-    tree,
-    vueLoadingOverlay,
-
-    // ProjectManagement
-    projectNavbar
+import paginate from "./paginate.vue";
+import tagEditor from "./tagEditor.vue";
+import tree from "./tree.vue";
+import vueLoadingOverlay from "./vueLoadingOverlay.vue";
+import projectNavbar from "./ProjectManagement/projectNavbar.vue";
+
+export default {
+    paginate,
+    tagEditor,
+    tree,
+    vueLoadingOverlay,
+
+    // ProjectManagement
+    projectNavbar
 }