jobdone-shared-files 0.0.1-beta.2

package/ProjectManagement/projectNavbar.vue

@@ -0,0 +1,168 @@
+<template>
+    <div class="bg-gray-000 sticky-top">
+        <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="border-end">
+                    <a :href="arrowBackLink" class="btn btn-normal btn-square"><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">
+                                    專案資訊
+                                </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}}
+                                </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>
+                                <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>
+                                    </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>
+                                    工單流程
+                                </a>
+                            </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>
+    </div>
+</template>
+
+<script>
+    import { formatDate } from '../common/format';
+    import { onMounted, reactive } from 'vue';
+    import axios from 'axios';
+
+    export default {
+        props: {
+            arrowBackLink: {
+                type: String,
+                required: true
+            },
+            projectInfo: {
+                type: Object,
+                required: true
+            },
+            apiUrl: {
+                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
+            });
+
+            onMounted(() => {
+                axios.get(props.apiUrl)
+                    .then(res => {
+                        if (res.status == 200) {
+                            Object.assign(navLinkObj, res.data);
+                        }
+                    });
+            });
+
+
+            return {
+                formatDate,
+                navLinkObj
+            }
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "../style/scss/Settings/basic-import";
+
+    .text-project-title {
+        color: lighten($primary, 8%);
+    }
+
+    .navbar[data-bs-theme="dark"] {
+        --bs-body-color: var(--gray-500);
+        color: var(--bs-body-color);
+    }
+
+    .navbar-main {
+        background-color: var(--gray-800);
+
+        .navbar-line-item {
+            --bs-navbar-nav-link-padding-x: 1rem;
+        }
+
+        .dropdown-menu {
+            max-height: 80vh;
+        }
+    }
+
+    .navbar-line-item.dropdown .dropdown-menu {
+        z-index: $zindex-sticky + 1;
+    }
+
+    .info-project {
+        padding-left: 5.25rem;
+        padding-right: 1rem;
+    }
+</style>

package/README.md

@@ -0,0 +1,27 @@
+# 共用清單 
+如果要使用 vue 檔，需要直接引用 node_modules 裡的檔案，例如：
+`import OOXX from '../../node_modules/jobdone-shared-js/OOXX.vue';`
+
+## paginate
+可設定尺寸：`container-class`
+- 小：`pagination-sm`
+- 中：預設
+- 大：`pagination-lg`
+
+## tagEditor
+標籤
+
+## tree
+尺寸：`size`
+- 小: `sm`
+- 中：預設
+
+背景色：`bgColor`
+- 預設用在灰色背景上
+- 用在白背景上：`white`
+
+## vueLoadingOverlay
+指定樣式的 vue-loading-overlay
+
+## ProjectManagement/projectNavbar
+專案資訊 Navbar

package/common/directives/collapse.js

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

package/common/format.js

@@ -0,0 +1,13 @@
+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 formatThousands = computed(() => {
+    return function(number){
+        return new Intl.NumberFormat().format(number);
+    }
+});

package/index.js

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

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "jobdone-shared-files",
+  "version": "0.0.1-beta.2",
+  "description": "Shared JS for Jobdone Enterprise.",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "author": "Pyramius",
+  "license": "MIT",
+  "dependencies": {
+    "axios": "^1.2.2",
+    "vue": "^3.2.45",
+    "vue-loading-overlay": "^6.0.3",
+    "bootstrap": "^5.3.0-alpha1",
+    "dayjs": "^1.11.7"
+  }
+}

package/paginate.vue

@@ -0,0 +1,139 @@
+<template>
+    <ul class="pagination pagination-round mb-0" :class="containerClass">
+        <li class="page-item" :class="{'disabled':!pagination.ShowToPrev}">
+            <button type="button" class="page-link" @click="toPage(1)">
+                <span class="material-icons">first_page</span>
+            </button>
+        </li>
+        <li class="page-item" :class="{'disabled':!pagination.ShowToPrev}">
+            <button type="button" class="page-link" @click="toPage(currentPage-1)">
+                <span class="material-icons icon-18">chevron_left</span>
+            </button>
+        </li>
+        <li class="page-item page-item-ellipsis" v-if="pagination.ShowPrevPageMore">
+            <span>⋯</span>
+        </li>
+        <li class="page-item" v-for="n in range" :class="{'active':n===currentPage}">
+            <button type="button" class="page-link" @click="toPage(n)">{{n}}</button>
+        </li>
+        <li class="page-item page-item-ellipsis" v-if="pagination.ShowNextPageMore">
+            <span>⋯</span>
+        </li>
+        <li class="page-item" :class="{'disabled':!pagination.ShowToNext}">
+            <button type="button" class="page-link" @click="toPage(currentPage+1)">
+                <span class="material-icons icon-18">chevron_right</span>
+            </button>
+        </li>
+        <li class="page-item" :class="{'disabled':!pagination.ShowToNext}">
+            <button type="button" class="page-link" @click="toPage(totalPages)">
+                <span class="material-icons">last_page</span>
+            </button>
+        </li>
+    </ul>
+</template>
+
+<script>
+    import { computed } from 'vue';
+    export default {
+        props: {
+            currentPage: {
+                type: Number,
+                default: 1
+            },
+            totalPages: {
+                type: Number,
+                default: 1
+            },
+            pageRange: {
+                type: Number,
+                default: 5
+            },
+            containerClass: {
+                type: String,
+                default: ""
+            },
+            pageItemClass: {
+                type: String,
+                default: ""
+            },
+            clickHandler: {
+                type: Function
+            }
+        },
+        setup(props, { emit}) {
+            const range = computed(() => {
+                let min = 1;
+                let max = 1;
+                if (props.pageRange < props.totalPages) {
+                    max = props.currentPage + Math.floor(props.pageRange / 2);
+                    max = (max > props.totalPages) ? props.totalPages : max;
+                    if (max - props.pageRange < 1) {
+                        min = 1;
+                        max = props.pageRange;
+                    } else {
+                        min = max - props.pageRange + 1;
+                    }
+                } else {
+                    min = 1;
+                    max = props.totalPages;
+                }
+                const range = [];
+                for (var i = min; i <= max; i++) {
+                    range.push(i);
+                }
+                return range;
+            });
+            const pagination = computed(() => {
+                return {
+                    ShowToPrev: props.currentPage > 1,
+                    ShowPrevPageMore: range.value[0] > 2,
+                    ShowNextPageMore: range.value[range.value.length - 1] < props.totalPages - 1,
+                    ShowToNext: props.currentPage < props.totalPages
+                }
+            });
+            const toPage = (pageNum) => {
+                emit('to-page', pageNum);
+            }
+            return {
+                range,
+                pagination,
+                toPage
+            };
+        }
+    }
+</script>
+
+<style scoped lang="scss">
+    @import "./style/scss/Settings/basic-import";
+
+    .page-link{
+        height: 100%;
+    }
+
+    .pagination.pagination-round .page-item{
+        &:not(:last-child){
+            margin-right: .5em;
+        }
+        .page-link{
+            @include flex-center();
+            @include size(35px);
+            border-radius: 50%;
+            overflow: hidden;
+            .material-icons{
+                font-size: 130%;
+            }
+        }
+    }
+    .pagination-sm.pagination-round .page-item .page-link{
+        @include size(30px);
+    }
+    .pagination-lg.pagination-round .page-item .page-link{
+        @include size(60px);
+    }
+    .page-item-ellipsis{
+        display: flex;
+        align-items: center;
+        color: var(--gray-500);
+        font-size: var(--bs-pagination-font-size);
+    }
+</style>

package/style/css/vue-loading-overlay/index.css

@@ -0,0 +1,40 @@
+.vl-shown {
+  overflow: hidden;
+}
+
+.vl-overlay {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  align-items: center;
+  display: none;
+  justify-content: center;
+  overflow: hidden;
+  z-index: 9999;
+}
+
+.vl-overlay.vl-active {
+  display: flex;
+}
+
+.vl-overlay.vl-full-page {
+  z-index: 9999;
+  position: fixed;
+}
+
+.vl-overlay .vl-background {
+  bottom: 0;
+  left: 0;
+  position: absolute;
+  right: 0;
+  top: 0;
+  background: #fff;
+  opacity: 0.5;
+}
+
+.vl-overlay .vl-icon, .vl-parent {
+  position: relative;
+}
+