jobdone-shared-files 0.0.1-beta.8 → 0.0.1-beta.81

package/ProjectManagement/projectNavbar.vue

@@ -1,85 +1,112 @@
 <template>
-    <div class="bg-gray-000 sticky-top">
+    <div class="bg-gray-000 sticky-top d-print-none">
         <nav class="navbar navbar-main navbar-expand-lg border-bottoms py-0" data-bs-theme="dark">
-            <div class="d-flex align-items-center flex-fill w-100">
+            <div class="navbar-placeholder-content px-4 placeholder-glow">
+                <span class="placeholder w-1rem"></span>
+                <span class="placeholder w-20rem"></span>
+                <span class="placeholder w-5rem"></span>
+                <span class="placeholder w-5rem"></span>
+                <span class="placeholder w-5rem"></span>
+            </div>
+            <div class="navbar-content opacity-0 d-flex align-items-center flex-fill w-100">
                 <div class="border-end">
-                    <a :href="arrowBackLink" class="btn btn-normal btn-square"><span class="material-icons">arrow_back</span></a>
+                    <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':item.isActive}" v-for="item in menuModules">
-                                <a :href="item.moduleUrl" class="dropdown-link" v-if="item.moduleUrl">
-                                    <span class="material-icons icon-18 me-2" v-if="item.moduleIcon">{{item.moduleIcon}}</span>
-                                    {{item.moduleName}}
-                                </a>
-                                <span class="dropdown-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false" v-else>
-                                    <span class="material-icons icon-18 me-2" v-if="item.moduleIcon">{{item.moduleIcon}}</span>
-                                    {{item.moduleName}}
-                                </span>
-                                <ul class="dropdown-menu" v-if="item.moduleApps.length!==0">
-                                    <li><a class="dropdown-item" href="#" v-for="app in item.moduleApps">{{app.appName}}</a></li>
-                                </ul>
-                            </div> -->
-                            <button type="button" class="nav-item navbar-line-item btn nav-link letter-spacing-1 border-0 active">
-                                <a :href="'/ProjectManagement/ProjectInfo?id=' + projectInfo.id">
+                        <nav class="navbar-nav navbar-main navbar-tab navbar-line navbar-line-lg">
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
+                                    :class="{'active': isActive(null)}">
+                                <a class="dropdown-link" :href="finalRootDomain + '/ProjectManagement/ProjectInfo?id=' + projectId">
                                     專案資訊
                                 </a>
-                            </button>
-                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown" :class="{'active':navLinkObj.isActive}">
-                                <a :href="navLinkObj.url + '?projectId=' + projectInfo.id" class="dropdown-link" v-if="navLinkObj.selfIsApp">
-                                    <span class="material-icons icon-18 me-2" v-if="navLinkObj.icon">{{navLinkObj.icon}}</span>
-                                    {{navLinkObj.name}}
+                            </div>
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
+                                 :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" v-if="navLinkObj.icon">{{navLinkObj.icon}}</span>
-                                    {{ navLinkObj.name}}
+                                    <span class="material-icons icon-18 icon-shine me-1">{{ navLinkObj?.moduleLink?.icon }}</span>
+                                    功能選單
                                 </span>
-                                <ul class="dropdown-menu" v-if="navLinkObj.apps.length > 0">
-                                    <li>
-                                        <a class="dropdown-item" :href="app.url + '?projectId=' + projectInfo.id" v-for="(app, index) in navLinkObj.apps" :key="index">{{app.name}}</a>
+                                <ul class="dropdown-menu" :class="{'p-0': navLinkObj?.moduleLink?.apps?.length == 0}">
+                                    <li v-if="navLinkObj?.moduleLink?.apps?.length > 0">
+                                        <a class="dropdown-item" :href="app.url + '?projectId=' + projectId" v-for="(app, index) in navLinkObj.moduleLink.apps" :key="index">
+                                            <span class="material-icons icon-18 align-middle me-2">{{app.icon}}</span>
+                                            <span class="align-middle">{{app.name}}</span>
+                                        </a>
                                     </li>
                                 </ul>
                             </div>
-                            <!--工單流程寫死？-->
-                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown">
-                                <a href="#" class="dropdown-link">
-                                    <span class="material-icons icon-18 me-2">rebase_edit</span>
-                                    工單流程
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
+                                 :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>
+                        <nav class="navbar-nav navbar-main navbar-line navbar-line-lg ms-auto">
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown">
+                                <span class="dropdown-link dropdown-toggle" data-bs-toggle="dropdown" aria-expanded="false">
+                                    <div class="thumbnail-content thumbnail-32 rounded-circle me-2" :style="'background-image: url(' + userPicture + ');'"></div>
+                                    {{userId}}
+                                </span>
+                                <ul class="dropdown-menu dropdown-menu-end">
+                                    <li>
+                                        <a class="dropdown-item" :href="finalRootDomain + '/Profile'">個人資訊</a>
+                                    </li>
+                                    <li><hr class="dropdown-divider"></li>
+                                    <li>
+                                        <a class="dropdown-item" :href="logOutLink">登出</a>
+                                    </li>
+                                </ul>
+                            </div>
+                        </nav>
                     </div>
                 </div>
             </div>
         </nav>
-        <div class="info-project d-flex align-items-center bg-primary bg-opacity-25 border-top border-bottom border-primary border-opacity-25 py-2">
-            <!--TODO: 如果是公共工程才顯示 可能有2種 (公共工程/建築物公共工程)
-            <span class="badge rounded-pill text-primary bg-primary bg-opacity-10 border border-primary border-opacity-50 me-4">建築物公共工程</span>-->
-            <small class="d-flex me-4" v-if="projectInfo.caseNo">
-                <b class="me-2">案號</b>
-                <span>{{projectInfo.caseNo}}</span>
-            </small>
-            <small class="d-flex me-4">
-                <b class="me-2">工期</b>
-                <span>{{formatDate(projectInfo.beginDT)}} - {{formatDate(projectInfo.endDT)}} ({{projectInfo.approvedWorkingPeriod}}天)</span>
-            </small>
-            <small class="d-flex" v-if="projectInfo.extendToDT">
-                <b class="me-2">展延</b>
-                <span>{{ formatDate(projectInfo.extendToDT) }}{{}} ({{projectInfo.extendDays}}天)</span>
-            </small>
-            <small class="d-flex ms-auto">
-                <slot></slot>
-            </small>
+        <div class="info-project bg-primary bg-opacity-25 border-top border-bottom border-primary border-opacity-25 py-2">
+            <div class="navbar-placeholder-content px-5 placeholder-glow">
+                <span class="placeholder placeholder-xs w-10rem ms-4"></span>
+                <span class="placeholder placeholder-xs w-12rem"></span>
+                <span class="placeholder placeholder-xs w-6rem"></span>
+            </div>
+            <div class="navbar-content opacity-0 d-flex align-items-center">
+                <span class="badge badge-outline-purple me-3">{{ navLinkObj?.moduleLink?.name }}</span>
+                <small class="d-flex me-4" v-if="projectInfo?.caseNo">
+                    <b class="me-2">案號</b>
+                    <span>{{projectInfo?.caseNo}}</span>
+                </small>
+                <small class="d-flex me-4">
+                    <b class="me-2">開工/完工日期</b>
+                    <span>{{formatDate(projectInfo?.beginDT)}} - {{formatDate(projectInfo?.endDT)}}</span>
+                </small>
+                <small class="d-flex me-4">
+                    <b class="me-2">核定工期</b>
+                    <span>{{projectInfo?.approvedWorkingPeriod}}天</span>
+                </small>
+                <small class="d-flex" v-if="projectInfo?.extendToDT">
+                    <b class="me-2">展延至</b>
+                    <span>{{ formatDate(projectInfo?.extendToDT) }} ({{projectInfo?.extendDays}}天)</span>
+                </small>
+                <small class="d-flex ms-auto">
+                    <slot></slot>
+                </small>
+            </div>
         </div>
     </div>
 </template>
 
 <script>
-    import { formatDate } from '../common/format';
-    import { onMounted, reactive } from 'vue';
+    import { formatDate } from '../../../node_modules/jobdone-shared-files/common/format';
+    import { onMounted, ref, computed, nextTick } from 'vue';
     import axios from 'axios';
 
     export default {
@@ -88,56 +115,182 @@
                 type: String,
                 required: true
             },
+            projectId: {
+                type: String,
+                required: true
+            },
             projectInfo: {
-                type: Object,
+                type: [String, Object],
                 required: true
             },
-            apiUrl: {
+            projectApps: {
+                type: [String, Object],
+                required: true
+            },
+            activeClientId: {
+                type: String,
+                required: false,
+            },
+            rootDomain: {
+                type: String,
+                required: true
+            },
+            userId: {
+                type: String,
+                required: true
+            },
+            userPicture: {
+                type: String,
+                required: true
+            },
+            logOutLink: {
                 type: String,
                 required: true
             }
-            // menuModules: {
-            //     type: Array,
-            //     default: function () {
-            //         return [];
-            //     }
-            // }
         },
         setup(props) {
-            //TBD
-            //projectInfo from props api
-            //menuModules from props api
-            const navLinkObj = reactive({
-                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;
             });
 
-            onMounted(() => {
-                axios.get(props.apiUrl)
-                    .then(res => {
-                        if (res.status == 200) {
-                            Object.assign(navLinkObj, res.data);
-                        }
+            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.clientId == props.activeClientId))
+                }
+                if (!!props.activeClientId && target == props.activeClientId) {
+                    return true;
+                }
+                return false;
+            }
+
+            onMounted(async () => {
+                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": []
+                    }
+                }
+                
+
+                nextTick(() => {
+                    let navbarElements = document.getElementsByClassName('navbar-content');
+                    Array.from(navbarElements).forEach(function (item) {
+                        item.classList.remove("opacity-0");
                     });
+
+                    let placeholderElements = document.getElementsByClassName('navbar-placeholder-content');
+                    Array.from(placeholderElements).forEach(function (item) {
+                        item.classList.add("opacity-0");
+                    });
+                });
             });
 
 
             return {
                 formatDate,
-                navLinkObj
+                projectInfo,
+                navLinkObj,
+                finalRootDomain,
+                isActive
             }
         }
     }
 </script>
 
 <style scoped lang="scss">
-    @import "../style/scss/Settings/basic-import";
+    @import "../../../node_modules/jobdone-shared-files/style/scss/Settings/basic-import";
+
+    .navbar-content{
+        transition: .5s;
+    }
+
+    .navbar-placeholder-content{
+        @include position-center();
+        display: flex;
+        align-items: center;
+        gap: 1rem;
+        mix-blend-mode: color-burn;
+        pointer-events: none;
+    }
 
     .text-project-title {
-        color: lighten($primary, 8%);
+        color: var(--dark-theme-primary);
     }
 
     .navbar[data-bs-theme="dark"] {
@@ -146,23 +299,48 @@
     }
 
     .navbar-main {
-        background-color: var(--gray-800);
-
         .navbar-line-item {
             --bs-navbar-nav-link-padding-x: 1rem;
         }
-
         .dropdown-menu {
             max-height: 80vh;
         }
     }
 
+
+    .navbar[data-bs-theme="dark"], .navbar-main {
+        background-color: var(--gray-900);
+    }
+
+    .navbar-line-item.active {
+        background-color: var(--gray-800);
+    }
+
+    .navbar-tab{
+        min-height: 60px;
+        padding-top: 0.75rem;
+        padding-left: 0.5rem;
+        .navbar-line-item{
+            min-height: auto;
+        }
+    }
+
     .navbar-line-item.dropdown .dropdown-menu {
         z-index: $zindex-sticky + 1;
     }
+    .navbar-line-item.dropdown .dropdown-toggle[aria-expanded=true]{
+        color: $white;
+    }
 
     .info-project {
-        padding-left: 5.25rem;
+        position: relative;
+        padding-left: 60px;
         padding-right: 1rem;
     }
+
+    .icon-shine{
+        background: linear-gradient(120deg, #fff 20%, #24BCE7 40%, #e8ecff 45%, #5872ff 60%, #fff 90%);
+        -webkit-background-clip: text;
+        color: transparent;
+    }
 </style>

package/README.md

@@ -2,16 +2,22 @@
 如果要使用 vue 檔，需要直接引用 node_modules 裡的檔案，例如：
 `import OOXX from '../../node_modules/jobdone-shared-files/OOXX.vue';`
 
-## paginate
+## Vue Components
+
+### paginate
 可設定尺寸：`container-class`
 - 小：`pagination-sm`
 - 中：預設
 - 大：`pagination-lg`
 
-## tagEditor
+----
+
+### tagEditor
 標籤
 
-## tree
+----
+
+### tree
 尺寸：`size`
 - 小: `sm`
 - 中：預設
@@ -20,8 +26,76 @@
 - 預設用在灰色背景上
 - 用在白背景上：`white`
 
-## vueLoadingOverlay
+----
+
+### vueLoadingOverlay
 指定樣式的 vue-loading-overlay
 
-## ProjectManagement/projectNavbar
-專案資訊 Navbar
+用法說明 `("isLoading" => 自定義變數)` ：
+| 步驟  | 說明              | 範例                                          |
+|------|-------------------|----------------------------------------------|
+| 1.   | 在js或.vue中import | `import Loading from "../../node_modules/jobdone-shared-files/vueLoadingOverlay.vue";`             |
+| 2.   | 畫面中放上Component | `<Loading :is-active="isLoading"></Loading>` |
+| 3.   | loading 初始化     | `const isLoading = ref(false);`              |
+| 4.   | 開啟loading        | `isLoading.value = true;`                    |
+| 5.   | 關閉loading        | `isLoading.value = false;`                   |
+
+
+
+
+----
+
+### ProjectManagement/projectNavbar
+專案資訊 Navbar
+
+需要傳入的值：
+| 數值名稱         | 說明                                                                           | 必要 |
+|------------------|--------------------------------------------------------------------------------|------|
+| 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                                                      | 是  |
+| user-id          | 傳入 user 的帳號 id  | 是  |
+| user-picture     | 傳入 user 的大頭貼  | 是  |
+| log-out-link     | 登出連結                                                   | 是  |
+
+
+----
+
+### lightboxWithOverview
+有縮圖的圖片光箱
+
+`<lightbox-with-overview :pictures-data="picturesData" ref="lightboxWithOverviewRef"></lightbox-with-overview>`
+
+可傳入的值：
+| 數值名稱          | 說明                                                             | 必要 |
+|------------------|-----------------------------------------------------------------|----|
+| pictures-data    | 格式為： `[{src: "", title: ""}]`                                | 是  |
+| preview          | 是否要顯示縮圖，可傳入 `true` or `false`                           | 否  |
+| display-index    | 預設 index 為 0                                                  | 否  |
+| preview-count    | preview 的圖片陣列數量，預設為 5，可使用 `lightboxWithOverviewRef?.previewPictures` 與 `lightboxWithOverviewRef?.otherPictureCount`   | 否  |
+
+----
+
+## SCSS
+
+### Layout
+| Layout 名稱         | 說明                      |  在 jobdone-shared-files 內?  |
+|-------------------|-------------------------|-----------------------------|
+| LayoutBase        | 客製化的 Bootstrap (5.3.0)  | 是                        |
+| LayoutProject     | Project 使用的共用樣式，含開合雙欄樣式 | 是                        |
+| LayoutSinglePage  | 單頁版面的樣式，如：登入、錯誤頁、條款等    | 是                        |
+| LayoutTwoColumn   | 雙欄可開合樣式                 | 是                        |
+| LayoutMobile      | 針對 (底層) 手機的共用樣式         | 是                        |
+| LayoutDocs        | 針對條文調整的樣式               | 否                       |
+| LayoutInnerColumn | 針對 Project 雙欄樣式內的雙欄樣式   | 否                       |
+| LayoutOutside     | 針對 (底層) Project 外的共用樣式  | 否                       |
+
+### Common
+
+- Animation：目前只有 Fade In keyframe
+- SelectableTable：勾選 tr focus style
+- thumbnail-group：方形大頭貼與小大頭貼相疊 style
+- filepond：客製化 filepond 樣式

package/common/directives/popovers.js

@@ -0,0 +1,11 @@
+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

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

package/common/format.js

@@ -2,8 +2,22 @@ import dayjs from 'dayjs';
 import { computed } from 'vue';
 
 // 時間格式
-export const formatDate = (value) => dayjs(value).format('YYYY-MM-DD');
-export const formatDT = (value) => dayjs(value).format('YYYY-MM-DD HH:mm:ss');
+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(() => {