jobdone-shared-files 0.0.1-beta.10

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-files/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.10",
+  "description": "Shared JS and SCSS 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;
+}
+

package/style/scss/Bootstrap/_accordion.scss

@@ -0,0 +1,158 @@
+//
+// Base styles
+//
+
+.accordion {
+  // scss-docs-start accordion-css-vars
+  --#{$prefix}accordion-color: #{$accordion-color};
+  --#{$prefix}accordion-bg: #{$accordion-bg};
+  --#{$prefix}accordion-transition: #{$accordion-transition};
+  --#{$prefix}accordion-border-color: #{$accordion-border-color};
+  --#{$prefix}accordion-border-width: #{$accordion-border-width};
+  --#{$prefix}accordion-border-radius: #{$accordion-border-radius};
+  --#{$prefix}accordion-inner-border-radius: #{$accordion-inner-border-radius};
+  --#{$prefix}accordion-btn-padding-x: #{$accordion-button-padding-x};
+  --#{$prefix}accordion-btn-padding-y: #{$accordion-button-padding-y};
+  --#{$prefix}accordion-btn-color: #{$accordion-button-color};
+  --#{$prefix}accordion-btn-bg: #{$accordion-button-bg};
+  --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon)};
+  --#{$prefix}accordion-btn-icon-width: #{$accordion-icon-width};
+  --#{$prefix}accordion-btn-icon-transform: #{$accordion-icon-transform};
+  --#{$prefix}accordion-btn-icon-transition: #{$accordion-icon-transition};
+  --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon)};
+  --#{$prefix}accordion-btn-focus-border-color: #{$accordion-button-focus-border-color};
+  --#{$prefix}accordion-btn-focus-box-shadow: #{$accordion-button-focus-box-shadow};
+  --#{$prefix}accordion-body-padding-x: #{$accordion-body-padding-x};
+  --#{$prefix}accordion-body-padding-y: #{$accordion-body-padding-y};
+  --#{$prefix}accordion-active-color: #{$accordion-button-active-color};
+  --#{$prefix}accordion-active-bg: #{$accordion-button-active-bg};
+  // scss-docs-end accordion-css-vars
+}
+
+.accordion-button {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  padding: var(--#{$prefix}accordion-btn-padding-y) var(--#{$prefix}accordion-btn-padding-x);
+  @include font-size($font-size-base);
+  color: var(--#{$prefix}accordion-btn-color);
+  text-align: left; // Reset button style
+  background-color: var(--#{$prefix}accordion-btn-bg);
+  border: 0;
+  @include border-radius(0);
+  overflow-anchor: none;
+  @include transition(var(--#{$prefix}accordion-transition));
+
+  &:not(.collapsed) {
+    color: var(--#{$prefix}accordion-active-color);
+    background-color: var(--#{$prefix}accordion-active-bg);
+    box-shadow: inset 0 calc(-1 * var(--#{$prefix}accordion-border-width)) 0 var(--#{$prefix}accordion-border-color); // stylelint-disable-line function-disallowed-list
+
+    &::after {
+      background-image: var(--#{$prefix}accordion-btn-active-icon);
+      transform: var(--#{$prefix}accordion-btn-icon-transform);
+    }
+  }
+
+  // Accordion icon
+  &::after {
+    flex-shrink: 0;
+    width: var(--#{$prefix}accordion-btn-icon-width);
+    height: var(--#{$prefix}accordion-btn-icon-width);
+    margin-left: auto;
+    content: "";
+    background-image: var(--#{$prefix}accordion-btn-icon);
+    background-repeat: no-repeat;
+    background-size: var(--#{$prefix}accordion-btn-icon-width);
+    @include transition(var(--#{$prefix}accordion-btn-icon-transition));
+  }
+
+  &:hover {
+    z-index: 2;
+  }
+
+  &:focus {
+    z-index: 3;
+    border-color: var(--#{$prefix}accordion-btn-focus-border-color);
+    outline: 0;
+    box-shadow: var(--#{$prefix}accordion-btn-focus-box-shadow);
+  }
+}
+
+.accordion-header {
+  margin-bottom: 0;
+}
+
+.accordion-item {
+  color: var(--#{$prefix}accordion-color);
+  background-color: var(--#{$prefix}accordion-bg);
+  border: var(--#{$prefix}accordion-border-width) solid var(--#{$prefix}accordion-border-color);
+
+  &:first-of-type {
+    @include border-top-radius(var(--#{$prefix}accordion-border-radius));
+
+    .accordion-button {
+      @include border-top-radius(var(--#{$prefix}accordion-inner-border-radius));
+    }
+  }
+
+  &:not(:first-of-type) {
+    border-top: 0;
+  }
+
+  // Only set a border-radius on the last item if the accordion is collapsed
+  &:last-of-type {
+    @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+
+    .accordion-button {
+      &.collapsed {
+        @include border-bottom-radius(var(--#{$prefix}accordion-inner-border-radius));
+      }
+    }
+
+    .accordion-collapse {
+      @include border-bottom-radius(var(--#{$prefix}accordion-border-radius));
+    }
+  }
+}
+
+.accordion-body {
+  padding: var(--#{$prefix}accordion-body-padding-y) var(--#{$prefix}accordion-body-padding-x);
+}
+
+
+// Flush accordion items
+//
+// Remove borders and border-radius to keep accordion items edge-to-edge.
+
+.accordion-flush {
+  .accordion-collapse {
+    border-width: 0;
+  }
+
+  .accordion-item {
+    border-right: 0;
+    border-left: 0;
+    @include border-radius(0);
+
+    &:first-child { border-top: 0; }
+    &:last-child { border-bottom: 0; }
+
+    .accordion-button {
+      &,
+      &.collapsed {
+        @include border-radius(0);
+      }
+    }
+  }
+}
+
+@if $enable-dark-mode {
+  @include color-mode(dark) {
+    .accordion-button::after {
+      --#{$prefix}accordion-btn-icon: #{escape-svg($accordion-button-icon-dark)};
+      --#{$prefix}accordion-btn-active-icon: #{escape-svg($accordion-button-active-icon-dark)};
+    }
+  }
+}

package/style/scss/Bootstrap/_alert.scss

@@ -0,0 +1,68 @@
+//
+// Base styles
+//
+
+.alert {
+  // scss-docs-start alert-css-vars
+  --#{$prefix}alert-bg: transparent;
+  --#{$prefix}alert-padding-x: #{$alert-padding-x};
+  --#{$prefix}alert-padding-y: #{$alert-padding-y};
+  --#{$prefix}alert-margin-bottom: #{$alert-margin-bottom};
+  --#{$prefix}alert-color: inherit;
+  --#{$prefix}alert-border-color: transparent;
+  --#{$prefix}alert-border: #{$alert-border-width} solid var(--#{$prefix}alert-border-color);
+  --#{$prefix}alert-border-radius: #{$alert-border-radius};
+  --#{$prefix}alert-link-color: inherit;
+  // scss-docs-end alert-css-vars
+
+  position: relative;
+  padding: var(--#{$prefix}alert-padding-y) var(--#{$prefix}alert-padding-x);
+  margin-bottom: var(--#{$prefix}alert-margin-bottom);
+  color: var(--#{$prefix}alert-color);
+  background-color: var(--#{$prefix}alert-bg);
+  border: var(--#{$prefix}alert-border);
+  @include border-radius(var(--#{$prefix}alert-border-radius));
+}
+
+// Headings for larger alerts
+.alert-heading {
+  // Specified to prevent conflicts of changing $headings-color
+  color: inherit;
+}
+
+// Provide class for links that match alerts
+.alert-link {
+  font-weight: $alert-link-font-weight;
+  color: var(--#{$prefix}alert-link-color);
+}
+
+
+// Dismissible alerts
+//
+// Expand the right padding and account for the close button's positioning.
+
+.alert-dismissible {
+  padding-right: $alert-dismissible-padding-r;
+
+  // Adjust close link position
+  .btn-close {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: $stretched-link-z-index + 1;
+    padding: $alert-padding-y * 1.25 $alert-padding-x;
+  }
+}
+
+
+// scss-docs-start alert-modifiers
+// Generate contextual modifier classes for colorizing the alert
+@each $state in map-keys($theme-colors) {
+  .alert-#{$state} {
+    --#{$prefix}alert-color: var(--#{$prefix}#{$state}-text);
+    --#{$prefix}alert-bg: var(--#{$prefix}#{$state}-bg-subtle);
+    --#{$prefix}alert-border-color: var(--#{$prefix}#{$state}-border-subtle);
+    --#{$prefix}alert-link-color: var(--#{$prefix}#{$state}-text);
+  }
+}
+// scss-docs-end alert-modifiers