jobdone-shared-files 0.0.1-beta.7 → 0.0.1-beta.71

package/ProjectManagement/projectNavbar.vue

@@ -1,53 +1,73 @@
 <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>
                 <!--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">
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
+                                    :class="{'active':activeLinkType==0}">
+                                <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':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 }}
                                 </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 me-2">{{ navLinkObj.icon }}</span>
+                                    {{ navLinkObj.name }}
                                 </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>
+                                        <a class="dropdown-item" :href="app.url + '?projectId=' + projectId" v-for="(app, index) in navLinkObj.apps" :key="index">{{app.name}}</a>
                                     </li>
                                 </ul>
                             </div>
-                            <!--工單流程寫死？-->
-                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown">
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown"
+                                 :class="{'active':activeLinkType==2}">
+                                <a href="#" 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"
+                                 :class="{'active':activeLinkType==3}">
                                 <a href="#" class="dropdown-link">
                                     <span class="material-icons icon-18 me-2">rebase_edit</span>
-                                    工單流程
+                                    家當表單
+                                </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"
+                                    :class="{'active':activeLinkType==0}">
+                                <a class="dropdown-link" :href="finalRootDomain + 'Profile'">
+                                    <div class="thumbnail-content thumbnail-32 rounded-circle me-1" :style="'background-image: url(' + userInfo.picture + ');'"></div>
+                                    <span class="text-user-name text-overflow">{{userInfo.displayName}}</span>
+                                    <small class="ms-1">
+                                        (<span class="text-user-name text-overflow">{{userInfo.lastName}} {{userInfo.firstName}}</span>)
+                                    </small>
+                                </a>
+                            </div>
+                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown">
+                                <a class="dropdown-link" :href="finalRootDomain + logOutUrl">
+                                    登出
                                 </a>
                             </div>
                         </nav>
@@ -55,59 +75,100 @@
                 </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">
+                <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 } from 'vue';
     import axios from 'axios';
 
     export default {
         props: {
+            rootDomain: {
+                type: String,
+                required: true
+            },
             arrowBackLink: {
                 type: String,
                 required: true
             },
-            projectInfo: {
-                type: Object,
+            activeLinkType: {
+                type: Number,
+                required: true
+            },
+            projectId: {
+                type: String,
                 required: true
             },
-            apiUrl: {
+            apiProjectInfo: {
+                type: String,
+                required: true
+            },
+            apiProjectApps: {
+                type: String,
+                required: true
+            },
+            apiCurrentUser: {
+                type: String,
+                required: true
+            },
+            logOutUrl: {
                 type: String,
                 required: true
             }
-            // menuModules: {
-            //     type: Array,
-            //     default: function () {
-            //         return [];
-            //     }
-            // }
         },
         setup(props) {
-            //TBD
-            //projectInfo from props api
-            //menuModules from props api
-            const navLinkObj = reactive({
+            
+            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: '',
@@ -115,29 +176,75 @@
                 selfIsApp: false
             });
 
-            onMounted(() => {
-                axios.get(props.apiUrl)
-                    .then(res => {
-                        if (res.status == 200) {
-                            Object.assign(navLinkObj, res.data);
-                        }
+            const userInfo = ref({
+                displayName: '',
+                lastName: '',
+                firstName: '',
+                picture: ''
+            });
+
+            const finalRootDomain = ref(props.rootDomain);
+
+
+            onMounted(async () => {
+                try {
+                    if (finalRootDomain.value[finalRootDomain.value.length-1] == "/") {
+                        finalRootDomain.value = finalRootDomain.value.slice(0, -1);
+                    }
+
+                    const data = await Promise.all([
+                        axios.get(props.apiProjectInfo),
+                        axios.get(props.apiProjectApps),
+                        axios.get(props.apiCurrentUser)
+                    ]);
+                    Object.assign(projectInfo.value, data[0].data);
+                    Object.assign(navLinkObj.value, data[1].data);
+                    Object.assign(userInfo.value, data[2].data);
+                    
+                    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");
                     });
+                    
+                } catch (error) {
+                    console.log(error);
+                }
             });
 
 
             return {
                 formatDate,
-                navLinkObj
+                projectInfo,
+                navLinkObj,
+                finalRootDomain
             }
         }
     }
 </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"] {
@@ -162,7 +269,12 @@
     }
 
     .info-project {
+        position: relative;
         padding-left: 5.25rem;
         padding-right: 1rem;
     }
+
+    .text-user-name{
+        max-width: 5.5rem;
+    }
 </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,72 @@
 - 預設用在灰色背景上
 - 用在白背景上：`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                                    | 是  |
+| active-link-type | Navbar active 的種類 ( 0 = 專案資訊 / 1 = Module / 2 = 改善單 / 3 = 家當表單 ) | 是  |
+| project-id       | project id                                                      | 是  |
+| api-project-apps | 取得 project module & menu                                        | 是  |
+| api-project-info | 取得 project 資訊                                                   | 是  |
+
+
+----
+
+### lightboxWithOverview
+有縮圖的圖片光箱
+
+`<lightbox-with-overview :pictures-data="picturesData" ref="lightboxWithOverviewRef"></lightbox-with-overview>`
+
+可傳入的值：
+| 數值名稱          | 說明                                                             | 必要 |
+|------------------|-----------------------------------------------------------------|----|
+| pictures-data    | 格式為： `[{src: "", title: ""}]`                                | 是  |
+| 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(() => {

package/lightboxWithOverview.vue

@@ -0,0 +1,132 @@
+<template>
+    <vue-easy-lightbox :visible="lightboxVisibleRef" :imgs="picturesData" :index="picturesIndexRef"
+                        @hide="hideLightbox" @on-prev-click="picturesIndexRef--" @on-next-click="picturesIndexRef++"></vue-easy-lightbox>
+    <div class="lightbox-thumbnail-toolbar text-center overflow-hidden" v-if="lightboxVisibleRef">
+        <div class="text-nowrap overflow-x-auto pt-3 px-2 pb-1">
+            <div class="d-inline-block">
+                <div class="d-inline-block thumbnail-content rounded hover-border"
+                    :class="{'active': index == picturesIndexRef}" :style="'background-image: url(' + item.src +');'"
+                    @click="changePictureIndex(index)" v-for="(item, index) in picturesData"></div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+    import { ref, computed } from 'vue';
+    import VueEasyLightbox from 'vue-easy-lightbox';
+
+    export default {
+        props: {
+            previewCount: {
+                type: Number,
+                required: false,
+                default: 5
+            },
+            picturesData: {
+                type: Array,
+                required: true
+            },
+            displayIndex: {
+                type: Number,
+                required: false,
+                default: 0
+            },
+        },
+        components: {
+            VueEasyLightbox
+        },
+        setup(props) {
+            const previewPictures = computed(() => {
+                return props.picturesData.slice(0, props.previewCount)
+            });
+            const otherPictureCount = computed(() => {
+                var count = props.picturesData.length - props.previewCount;
+                return count < 0 ? 0 : count;
+            });
+            const lightboxVisibleRef = ref(false);
+            const picturesIndexRef = ref(props.displayIndex);
+
+            const changePictureIndex = (index) => {
+                picturesIndexRef.value = index;
+            };
+
+            const showLightbox = (index) => {
+                changePictureIndex(index);
+                lightboxVisibleRef.value = true;
+            };
+
+            const hideLightbox = () => {
+                lightboxVisibleRef.value = false;
+            }
+
+            return {
+                lightboxVisibleRef,
+                picturesIndexRef, changePictureIndex,
+                showLightbox, hideLightbox,
+                previewCount: props.previewCount,
+                previewPictures,
+                otherPictureCount
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "./style/scss/Settings/basic-import";
+    .hover-border{
+        transition: $transition-base;
+        &:hover{
+            box-shadow: $focus-ring-box-shadow;
+        }
+    }
+
+    .vel-modal{
+        backdrop-filter: var(--backdrop-blur);
+    }
+
+    .lightbox-thumbnail-toolbar .thumbnail-content{
+        cursor: pointer;
+    }
+
+    .lightbox-thumbnail-toolbar{
+        $padding-x: 10vw;
+        position: fixed;
+        top: 0;
+        left: $padding-x;
+        right: $padding-x;
+        margin: auto;
+        z-index: 10000;
+        animation: fadeIn .5s;
+        pointer-events: none;
+        .overflow-x-auto{
+            display: inline-block;
+            max-width: 100%;
+            pointer-events: auto;
+        }
+        .thumbnail-content{
+            --bs-border-color: rgba(0,0,0, 0.12);
+            @include solid-size(40px);
+            filter: brightness(0.5);
+            transition: $transition-base;
+            &:not(:last-child){
+                margin-right: 1rem;
+            }
+            &:hover{
+                filter: brightness(.8);
+            }
+            &.active{
+                filter: brightness(1);
+            }
+            &:hover, &.active{
+                --bs-border-color: rgba(255,255,255, 0.3);
+            }
+        }
+        .hover-border:hover{
+            box-shadow: 0 0 $focus-ring-blur $focus-ring-width rgba(255,255,255, .25);
+        }
+        .overflow-x-auto{
+            --bs-emphasis-color-rgb: 255, 255, 255;
+        }
+    }
+</style>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jobdone-shared-files",
-  "version": "0.0.1-beta.7",
+  "version": "0.0.1-beta.71",
   "description": "Shared JS and SCSS for Jobdone Enterprise.",
   "main": "index.js",
   "scripts": {
@@ -12,7 +12,8 @@
     "axios": "^1.2.2",
     "vue": "^3.2.45",
     "vue-loading-overlay": "^6.0.3",
-    "bootstrap": "^5.3.0-alpha1",
-    "dayjs": "^1.11.7"
+    "bootstrap": "^5.3.0",
+    "dayjs": "^1.11.7",
+    "vue-easy-lightbox": "^1.16.0"
   }
 }

package/style/scss/Common/Animation.scss

@@ -0,0 +1,6 @@
+@import "../Settings/basic-import";
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to   { opacity: 1; }
+}