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

package/ProjectManagement/projectNavbar.vue

@@ -12,11 +12,11 @@
                 <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 text-overflow"><b class="">{{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">
+                        <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">
@@ -30,12 +30,15 @@
                                     {{ 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?.moduleLink?.icon }}</span>
-                                    {{ navLinkObj?.moduleLink?.name }}
+                                    <span class="material-icons icon-18 icon-shine me-1">{{ navLinkObj?.moduleLink?.icon }}</span>
+                                    功能選單
                                 </span>
-                                <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>
+                                <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>
@@ -50,15 +53,19 @@
                         </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">
-                                <a class="dropdown-link" :href="finalRootDomain + '/Profile'">
-                                    <div class="thumbnail-content thumbnail-32 rounded-circle me-1" :style="'background-image: url(' + userPicture + ');'"></div>
-                                    <span class="text-user-name text-overflow">{{userId}}</span>
-                                </a>
-                            </div>
-                            <div class="nav-item navbar-line-item btn nav-link border-0 dropdown">
-                                <a class="dropdown-link" :href="logOutLink">
-                                    登出
-                                </a>
+                                <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>
@@ -72,6 +79,7 @@
                 <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>
@@ -144,37 +152,37 @@
             const projectInfo = ref({});
             const navLinkObj = ref({});
             const finalRootDomain = computed(() => {
-                if (props.rootDomain.substr(-1) === "/") {
-                    return props.rootDomain.slice(0, -1);
+                if (props.rootDomain.substr(-1) === "/") {
+                    return props.rootDomain.slice(0, -1);
                 }
                 return props.rootDomain;
             });
 
             const isActive = (target) => {
-                if (target === null) {
-                    return target === null && !props.activeClientId;
+                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 (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;
+                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:
+                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: '',
@@ -183,10 +191,10 @@
                                 approvedWorkingPeriod: '',
                                 extendToDT: '',
                                 extendDays: ''
-                            };
-                            break;
-                    }
-                } catch (e) {
+                            };
+                            break;
+                    }
+                } catch (e) {
                     projectInfo.value = {
                         caseNo: '',
                         name: '',
@@ -195,48 +203,48 @@
                         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": []
-                    }
+                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": []
+                    }
                 }
                 
 
@@ -291,24 +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 {
         position: relative;
-        padding-left: 5.25rem;
+        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

@@ -73,6 +73,7 @@
 | 數值名稱          | 說明                                                             | 必要 |
 |------------------|-----------------------------------------------------------------|----|
 | pictures-data    | 格式為： `[{src: "", title: ""}]`                                | 是  |
+| preview          | 是否要顯示縮圖，可傳入 `true` or `false`                           | 否  |
 | display-index    | 預設 index 為 0                                                  | 否  |
 | preview-count    | preview 的圖片陣列數量，預設為 5，可使用 `lightboxWithOverviewRef?.previewPictures` 與 `lightboxWithOverviewRef?.otherPictureCount`   | 否  |
 

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
 }