├── Procfile
├── .browserslistrc
├── .prettierrc
├── babel.config.js
├── .env.example
├── src
    ├── pages
    │   ├── ViewPage.vue
    │   ├── ViewLocalPanelPage.vue
    │   ├── localPanelSchema.json
    │   ├── IndexPage.vue
    │   └── ManageLocalPanelsPage.vue
    ├── store
    │   ├── index.js
    │   └── localPanel.js
    ├── custom.scss
    ├── variables.scss
    ├── components
    │   ├── LoginDialog.vue
    │   ├── GanttChangePreviewDialog.vue
    │   ├── Nav.vue
    │   └── GanttView.vue
    ├── main.js
    ├── App.vue
    ├── utils.js
    └── plugins
    │   └── octoclient.js
├── .eslintrc.js
├── vue.config.js
├── server.js
├── public
    └── index.html
├── LICENSE
├── README.md
├── package.json
├── .gitignore
└── api.js


/Procfile:
--------------------------------------------------------------------------------
1 | web: node server.js
2 | 


--------------------------------------------------------------------------------
/.browserslistrc:
--------------------------------------------------------------------------------
1 | > 1%
2 | last 2 versions
3 | 


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 |   "trailingComma": "es5",
3 |   "singleQuote": true
4 | }
5 | 


--------------------------------------------------------------------------------
/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 |   presets: ['@vue/cli-plugin-babel/preset'],
3 | };
4 | 


--------------------------------------------------------------------------------
/.env.example:
--------------------------------------------------------------------------------
1 | CLIENT_ID=YOUR_CLIENT_ID
2 | CLIENT_SECRET=YOUR_CLIENT_SECRET
3 | SERVER_HOST=http://localhost:5000
4 | SESSION_SECRET=YOUR_SESSION_SECRET
5 | 


--------------------------------------------------------------------------------
/src/pages/ViewPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <GanttView :key="$route.params.pathMatch" :path="$route.params.pathMatch" />
 3 | </template>
 4 | 
 5 | <script>
 6 | import GanttView from '@/components/GanttView.vue';
 7 | 
 8 | export default {
 9 |   name: 'ViewPage',
10 |   components: {
11 |     GanttView,
12 |   },
13 | };
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/pages/ViewLocalPanelPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <GanttView :key="$route.params.id" :localPanelId="$route.params.id" />
 3 | </template>
 4 | 
 5 | <script>
 6 | import GanttView from '@/components/GanttView.vue';
 7 | 
 8 | export default {
 9 |   name: 'ViewLocalPanelPage',
10 |   components: {
11 |     GanttView,
12 |   },
13 | };
14 | </script>
15 | 


--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Vuex from 'vuex';
 3 | import VuexPersistence from 'vuex-persist';
 4 | import localPanel from './localPanel';
 5 | 
 6 | Vue.use(Vuex);
 7 | 
 8 | const store = new Vuex.Store({
 9 |   modules: {
10 |     localPanel,
11 |   },
12 |   plugins: [
13 |     new VuexPersistence({
14 |       modules: ['localPanel'],
15 |     }).plugin,
16 |   ],
17 | });
18 | 
19 | export default store;
20 | 


--------------------------------------------------------------------------------
/.eslintrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   root: true,
 3 |   env: {
 4 |     node: true,
 5 |   },
 6 |   extends: [
 7 |     'plugin:vue/essential',
 8 |     'plugin:prettier/recommended',
 9 |     'eslint:recommended',
10 |   ],
11 |   parserOptions: {
12 |     parser: 'babel-eslint',
13 |   },
14 |   rules: {
15 |     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
16 |     'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
17 |   },
18 | };
19 | 


--------------------------------------------------------------------------------
/src/custom.scss:
--------------------------------------------------------------------------------
 1 | @import './variables.scss';
 2 | @import '~bulma';
 3 | @import '~buefy/src/scss/buefy';
 4 | 
 5 | .modal-card {
 6 |   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.05);
 7 | }
 8 | 
 9 | .modal-card-head,
10 | .modal-card-foot {
11 |   background: #fff;
12 |   border: 0;
13 | }
14 | 
15 | .modal-card-head {
16 |   padding-bottom: 0;
17 | }
18 | 
19 | .modal-card-foot {
20 |   padding-top: 0;
21 | }
22 | 
23 | html,
24 | body {
25 |   height: 100%;
26 |   overscroll-behavior-x: none;
27 | }
28 | 


--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
 1 | const webpack = require('webpack');
 2 | const serveApi = require('./api');
 3 | 
 4 | module.exports = {
 5 |   lintOnSave: false,
 6 |   devServer: {
 7 |     before: serveApi,
 8 |     port: 5000,
 9 |   },
10 |   pluginOptions: {
11 |     webpackBundleAnalyzer: {
12 |       openAnalyzer: false,
13 |     },
14 |   },
15 |   configureWebpack: {
16 |     plugins: [
17 |       new webpack.IgnorePlugin({
18 |         resourceRegExp: /^\.\/locale$/,
19 |         contextRegExp: /moment$/,
20 |       }),
21 |     ],
22 |   },
23 | };
24 | 


--------------------------------------------------------------------------------
/server.js:
--------------------------------------------------------------------------------
 1 | require('dotenv').config();
 2 | 
 3 | const express = require('express');
 4 | const path = require('path');
 5 | const compression = require('compression');
 6 | const logger = require('signale');
 7 | const serveApi = require('./api');
 8 | 
 9 | const app = express();
10 | 
11 | app.use(compression());
12 | 
13 | function serveIndex(req, res) {
14 |   res.sendFile(path.join(__dirname, '/dist/index.html'));
15 | }
16 | 
17 | app.use(express.static(path.join(__dirname, 'dist')));
18 | app.get('/view/*', serveIndex);
19 | app.get('/local_panel', serveIndex);
20 | app.get('/local_panel/*', serveIndex);
21 | 
22 | serveApi(app);
23 | 
24 | const PORT = process.env.PORT || 5000;
25 | app.listen(PORT, () => logger.success(`Listening on ${PORT}`));
26 | 


--------------------------------------------------------------------------------
/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="utf-8">
 5 |     <meta http-equiv="X-UA-Compatible" content="IE=edge">
 6 |     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 7 |     <link rel="icon" href="<%= BASE_URL %>favicon.ico">
 8 |     <title>GanttViewer</title>
 9 |     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/MaterialDesign-Webfont/4.9.95/css/materialdesignicons.min.css">
10 |   </head>
11 |   <body>
12 |     <noscript>
13 |       <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
14 |     </noscript>
15 |     <div id="app"></div>
16 |     <!-- built files will be auto injected -->
17 |   </body>
18 | </html>
19 | 


--------------------------------------------------------------------------------
/src/pages/localPanelSchema.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "$schema": "http://json-schema.org/draft-06/schema#",
 3 |   "type": "object",
 4 |   "properties": {
 5 |     "id": {
 6 |       "type": "string"
 7 |     },
 8 |     "name": {
 9 |       "type": "string"
10 |     },
11 |     "projects": {
12 |       "type": "object",
13 |       "patternProperties": {
14 |         ".{1,}": {
15 |           "type": "object",
16 |           "properties": {
17 |             "id": {
18 |               "type": "string"
19 |             },
20 |             "url": {
21 |               "type": "string"
22 |             },
23 |             "name": {
24 |               "type": "string"
25 |             }
26 |           },
27 |           "required": ["id", "url", "name"]
28 |         }
29 |       }
30 |     }
31 |   },
32 |   "required": ["id", "name", "projects"]
33 | }
34 | 


--------------------------------------------------------------------------------
/src/variables.scss:
--------------------------------------------------------------------------------
 1 | @import '~bulma/sass/utilities/_all';
 2 | 
 3 | $primary: #4894ff;
 4 | $primary-invert: findColorInvert($primary);
 5 | 
 6 | $colors: (
 7 |   'white': (
 8 |     $white,
 9 |     $black,
10 |   ),
11 |   'black': (
12 |     $black,
13 |     $white,
14 |   ),
15 |   'light': (
16 |     $light,
17 |     $light-invert,
18 |   ),
19 |   'dark': (
20 |     $dark,
21 |     $dark-invert,
22 |   ),
23 |   'primary': (
24 |     $primary,
25 |     $primary-invert,
26 |   ),
27 |   'info': (
28 |     $info,
29 |     $info-invert,
30 |   ),
31 |   'success': (
32 |     $success,
33 |     $success-invert,
34 |   ),
35 |   'warning': (
36 |     $warning,
37 |     $warning-invert,
38 |   ),
39 |   'danger': (
40 |     $danger,
41 |     $danger-invert,
42 |   ),
43 | );
44 | 
45 | $modal-background-background-color: rgba(#f0f0f0, 0.8);
46 | 


--------------------------------------------------------------------------------
/src/components/LoginDialog.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div class="modal-card" style="width: auto">
 3 |     <section class="modal-card-body" style="padding: 30px">
 4 |       <h1 class="title">Sign In</h1>
 5 |       <p>To continue, you need to sign-in use your GitHub account.</p>
 6 |       <div style="padding-top: 30px; text-align: center;">
 7 |         <b-button
 8 |           type="is-primary"
 9 |           @click="signin"
10 |           :loading="isLoading"
11 |           icon-left="github-circle"
12 |           rounded
13 |         >
14 |           Sign in use GitHub Account
15 |         </b-button>
16 |       </div>
17 |     </section>
18 |   </div>
19 | </template>
20 | 
21 | <script>
22 | export default {
23 |   name: 'LoginDialog',
24 |   data() {
25 |     return {
26 |       isLoading: false,
27 |     };
28 |   },
29 |   methods: {
30 |     signin() {
31 |       this.isLoading = true;
32 |       window.location =
33 |         '/github/signin?redirect=' + encodeURIComponent(window.location.href);
34 |     },
35 |   },
36 | };
37 | </script>
38 | 


--------------------------------------------------------------------------------
/src/store/localPanel.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | 
 3 | export default {
 4 |   namespaced: true,
 5 |   state: {
 6 |     panels: {},
 7 |   },
 8 |   mutations: {
 9 |     addPanel(state, { id, name }) {
10 |       const panel = {
11 |         id,
12 |         name,
13 |         projects: {},
14 |       };
15 |       Vue.set(state.panels, id, panel);
16 |     },
17 |     deletePanel(state, { id }) {
18 |       Vue.delete(state.panels, id);
19 |     },
20 |     renamePanel(state, { id, name }) {
21 |       state.panels[id].name = name;
22 |     },
23 |     addProjects(state, { id, projects }) {
24 |       projects.forEach(p => {
25 |         Vue.set(state.panels[id].projects, p.id, {
26 |           id: p.id,
27 |           url: p.url,
28 |           name: p.name,
29 |         });
30 |       });
31 |     },
32 |     deleteProject(state, { id, projectId }) {
33 |       Vue.delete(state.panels[id].projects, projectId);
34 |     },
35 |     importPanel(state, { panel }) {
36 |       const id = panel.id;
37 |       Vue.set(state.panels, id, panel);
38 |     },
39 |   },
40 |   actions: {},
41 |   getters: {},
42 | };
43 | 


--------------------------------------------------------------------------------
/src/pages/IndexPage.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div>
 3 |     <vue-headful title="GanttViewer" />
 4 |     <section class="hero is-primary">
 5 |       <div class="hero-body">
 6 |         <div class="container">
 7 |           <h1 class="title">
 8 |             GanttViewer
 9 |           </h1>
10 |         </div>
11 |       </div>
12 |     </section>
13 |     <section class="section">
14 |       <div class="container">
15 |         <h1 class="title">Getting Started</h1>
16 |         <p>↑ Input the repository in the navigation bar.</p>
17 |       </div>
18 |     </section>
19 |     <section class="section">
20 |       <div class="container">
21 |         <h1 class="title">Changelog</h1>
22 |         <ul>
23 |           <li>
24 |             <b-tag>2020-02-27</b-tag> Support export and import local panel JSON
25 |           </li>
26 |           <li><b-tag>2020-02-26</b-tag> Support local panels</li>
27 |           <li><b-tag>2020-02-24</b-tag> Support private repository</li>
28 |         </ul>
29 |       </div>
30 |     </section>
31 |   </div>
32 | </template>
33 | 
34 | <script>
35 | export default {
36 |   name: 'IndexPage',
37 | };
38 | </script>
39 | 


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | MIT License
 2 | 
 3 | Copyright (c) 2020 Wenxuan
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy
 6 | of this software and associated documentation files (the "Software"), to deal
 7 | in the Software without restriction, including without limitation the rights
 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
 9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # my-gantt-viewer
 2 | 
 3 | Online Gantt Graph based on GitHub Issues
 4 | 
 5 | ## Usage
 6 | 
 7 | 1. Create a project, which will be display as a project in Gantt graph.
 8 | 
 9 |    The project must have `EnableGantt` in the description, for example:
10 | 
11 |    ```markdown
12 |    <!-- EnableGantt -->
13 |    ```
14 | 
15 | 2. Link issues to project. By default, the issue creation time will be used as task start time
16 |    and issue milestone due time will be used as task due time.
17 | 
18 |    You can add modifiers in the issue body to override the behaviour:
19 | 
20 |    - `GanttStart: YYYY-MM-DD`
21 |    - `GanttDue: YYYY-MM-DD`
22 |    - `GanttDuration: Nd`: You can specify duration instead of due date. `d` denotes for days.
23 |    - `GanttProgress: N%`
24 | 
25 | ## Getting Started Locally
26 | 
27 | 1. Copy `.env.example` to `.env`.
28 | 
29 | 2. Modify `.env`:
30 | 
31 |    - Use the client ID and client secret from GitHub OAuth App.
32 | 
33 |      Note: The Authorization Callback URL of your GitHub OAuth App should be
34 |      something like http://localhost:5000/github/callback.
35 | 
36 |    - Session secret can be generated by:
37 | 
38 |      ```bash
39 |      openssl rand 32 | base64
40 |      ```
41 | 
42 | 3. Start by:
43 | 
44 |    ```bash
45 |    npm install
46 |    npm run ui:serve
47 |    ```
48 | 


--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
 1 | import Vue from 'vue';
 2 | import Buefy from 'buefy';
 3 | import VueRouter from 'vue-router';
 4 | import VueResource from 'vue-resource';
 5 | import VueClipboard from 'vue-clipboard2';
 6 | import vueHeadful from 'vue-headful';
 7 | import store from '@/store';
 8 | import { OctoClientPlugin } from '@/plugins/octoclient';
 9 | import App from '@/App.vue';
10 | import IndexPage from '@/pages/IndexPage.vue';
11 | import ViewPage from '@/pages/ViewPage.vue';
12 | import ManageLocalPanelsPage from '@/pages/ManageLocalPanelsPage.vue';
13 | import ViewLocalPanelPage from '@/pages/ViewLocalPanelPage.vue';
14 | 
15 | Vue.use(Buefy);
16 | Vue.use(VueRouter);
17 | Vue.use(VueResource);
18 | Vue.use(OctoClientPlugin);
19 | Vue.use(VueClipboard);
20 | Vue.component('vue-headful', vueHeadful);
21 | 
22 | Vue.config.productionTip = false;
23 | 
24 | const router = new VueRouter({
25 |   mode: 'history',
26 |   routes: [
27 |     {
28 |       name: 'index',
29 |       path: '/',
30 |       component: IndexPage,
31 |     },
32 |     {
33 |       name: 'view',
34 |       path: '/view/*',
35 |       component: ViewPage,
36 |     },
37 |     {
38 |       name: 'manage_local_panels',
39 |       path: '/local_panel',
40 |       component: ManageLocalPanelsPage,
41 |     },
42 |     {
43 |       name: 'view_local_panel',
44 |       path: '/local_panel/:id',
45 |       component: ViewLocalPanelPage,
46 |     },
47 |   ],
48 | });
49 | 
50 | new Vue({ router, store, render: h => h(App) }).$mount('#app');
51 | 


--------------------------------------------------------------------------------
/src/App.vue:
--------------------------------------------------------------------------------
 1 | <template>
 2 |   <div style="height: 100%; width: 100%; position: relative; overflow: hidden;">
 3 |     <b-loading :is-full-page="true" :active="isLoading" :can-cancel="false" />
 4 |     <b-modal
 5 |       animation="zoom-in"
 6 |       :active="!isLoading && !sessionInfo"
 7 |       has-modal-card
 8 |       trap-focus
 9 |       :can-cancel="false"
10 |     >
11 |       <LoginDialog />
12 |     </b-modal>
13 |     <div
14 |       style="position: absolute; left: 0; top: 0; width: 100%; height: 3.25rem; z-index: 10;"
15 |     >
16 |       <Nav :sessionInfo="sessionInfo" />
17 |     </div>
18 |     <div
19 |       style="position: absolute; top: 3.25rem; bottom: 0; left: 0; width: 100%;"
20 |     >
21 |       <router-view v-if="sessionInfo"></router-view>
22 |     </div>
23 |   </div>
24 | </template>
25 | 
26 | <script>
27 | import Nav from '@/components/Nav.vue';
28 | import LoginDialog from '@/components/LoginDialog.vue';
29 | 
30 | export default {
31 |   name: 'App',
32 |   components: {
33 |     LoginDialog,
34 |     Nav,
35 |   },
36 |   data() {
37 |     return {
38 |       isLoading: true,
39 |       sessionInfo: null,
40 |     };
41 |   },
42 |   async mounted() {
43 |     // FIXME: This is ugly. Use vuex.
44 |     window.sessionInfo = null;
45 |     try {
46 |       const resp = await this.$http.get('/github/info');
47 |       if (resp.data && resp.data.accessToken) {
48 |         this.sessionInfo = resp.data;
49 |         // FIXME: This is ugly. Use vuex.
50 |         window.sessionInfo = this.sessionInfo;
51 |       }
52 |     } catch (e) {
53 |       if (e.status !== 403) {
54 |         console.error(e);
55 |         this.$buefy.toast.open({
56 |           duration: 5000,
57 |           message: `Network connection error. Please refresh and retry.`,
58 |           position: 'is-bottom',
59 |           type: 'is-danger',
60 |           queue: false,
61 |         });
62 |       }
63 |     }
64 |     this.isLoading = false;
65 |   },
66 | };
67 | </script>
68 | 
69 | <style lang="scss">
70 | @import './custom.scss';
71 | </style>
72 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "my-gantt-viewer",
 3 |   "version": "0.0.1",
 4 |   "engines": {
 5 |     "node": "14.x"
 6 |   },
 7 |   "main": "server.js",
 8 |   "scripts": {
 9 |     "start": "node server.js",
10 |     "ui:serve": "vue-cli-service serve",
11 |     "ui:build": "vue-cli-service build",
12 |     "heroku-postbuild": "npm run ui:build"
13 |   },
14 |   "dependencies": {
15 |     "@octokit/graphql": "^4.3.1",
16 |     "ajv": "^6.12.0",
17 |     "axios": "^0.21.1",
18 |     "body-parser": "^1.19.0",
19 |     "buefy": "^0.8.10",
20 |     "color": "^3.1.2",
21 |     "common-tags": "^1.8.0",
22 |     "compression": "^1.7.4",
23 |     "cookie-session": "^1.4.0",
24 |     "core-js": "^3.6.4",
25 |     "dhtmlx-gantt": "^6.3.7",
26 |     "dotenv": "^8.2.0",
27 |     "express": "^4.15.2",
28 |     "lodash": "^4.17.19",
29 |     "moment": "^2.24.0",
30 |     "parse-github-url": "^1.0.2",
31 |     "randomstring": "^1.1.5",
32 |     "signale": "^1.4.0",
33 |     "uuid": "^7.0.0",
34 |     "vue": "^2.6.11",
35 |     "vue-clipboard2": "^0.3.1",
36 |     "vue-headful": "^2.1.0",
37 |     "vue-resource": "^1.5.1",
38 |     "vue-router": "^3.1.5",
39 |     "vuex": "^3.1.2",
40 |     "vuex-persist": "^2.2.0"
41 |   },
42 |   "devDependencies": {
43 |     "@vue/cli-plugin-babel": "~4.2.0",
44 |     "@vue/cli-plugin-eslint": "~4.2.0",
45 |     "@vue/cli-service": "~4.2.0",
46 |     "babel-eslint": "^10.0.3",
47 |     "eslint": "^6.7.2",
48 |     "eslint-plugin-vue": "^6.1.2",
49 |     "less": "^3.0.4",
50 |     "less-loader": "^5.0.0",
51 |     "node-sass": "^4.13.1",
52 |     "sass-loader": "^8.0.2",
53 |     "vue-cli-plugin-webpack-bundle-analyzer": "~2.0.0",
54 |     "vue-template-compiler": "^2.6.11"
55 |   },
56 |   "license": "MIT",
57 |   "signale": {
58 |     "displayScope": true,
59 |     "displayBadge": true,
60 |     "displayDate": true,
61 |     "displayFilename": false,
62 |     "displayLabel": true,
63 |     "displayTimestamp": true,
64 |     "underlineLabel": true,
65 |     "underlineMessage": false,
66 |     "underlinePrefix": false,
67 |     "underlineSuffix": false,
68 |     "uppercaseLabel": false
69 |   }
70 | }
71 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
  1 | # Logs
  2 | logs
  3 | *.log
  4 | npm-debug.log*
  5 | yarn-debug.log*
  6 | yarn-error.log*
  7 | lerna-debug.log*
  8 | 
  9 | # Diagnostic reports (https://nodejs.org/api/report.html)
 10 | report.[0-9]*.[0-9]*.[0-9]*.[0-9]*.json
 11 | 
 12 | # Runtime data
 13 | pids
 14 | *.pid
 15 | *.seed
 16 | *.pid.lock
 17 | 
 18 | # Directory for instrumented libs generated by jscoverage/JSCover
 19 | lib-cov
 20 | 
 21 | # Coverage directory used by tools like istanbul
 22 | coverage
 23 | *.lcov
 24 | 
 25 | # nyc test coverage
 26 | .nyc_output
 27 | 
 28 | # Grunt intermediate storage (https://gruntjs.com/creating-plugins#storing-task-files)
 29 | .grunt
 30 | 
 31 | # Bower dependency directory (https://bower.io/)
 32 | bower_components
 33 | 
 34 | # node-waf configuration
 35 | .lock-wscript
 36 | 
 37 | # Compiled binary addons (https://nodejs.org/api/addons.html)
 38 | build/Release
 39 | 
 40 | # Dependency directories
 41 | node_modules/
 42 | jspm_packages/
 43 | 
 44 | # TypeScript v1 declaration files
 45 | typings/
 46 | 
 47 | # TypeScript cache
 48 | *.tsbuildinfo
 49 | 
 50 | # Optional npm cache directory
 51 | .npm
 52 | 
 53 | # Optional eslint cache
 54 | .eslintcache
 55 | 
 56 | # Microbundle cache
 57 | .rpt2_cache/
 58 | .rts2_cache_cjs/
 59 | .rts2_cache_es/
 60 | .rts2_cache_umd/
 61 | 
 62 | # Optional REPL history
 63 | .node_repl_history
 64 | 
 65 | # Output of 'npm pack'
 66 | *.tgz
 67 | 
 68 | # Yarn Integrity file
 69 | .yarn-integrity
 70 | 
 71 | # dotenv environment variables file
 72 | .env
 73 | .env.test
 74 | 
 75 | # parcel-bundler cache (https://parceljs.org/)
 76 | .cache
 77 | 
 78 | # Next.js build output
 79 | .next
 80 | 
 81 | # Nuxt.js build / generate output
 82 | .nuxt
 83 | dist
 84 | 
 85 | # Gatsby files
 86 | .cache/
 87 | # Comment in the public line in if your project uses Gatsby and *not* Next.js
 88 | # https://nextjs.org/blog/next-9-1#public-directory-support
 89 | # public
 90 | 
 91 | # vuepress build output
 92 | .vuepress/dist
 93 | 
 94 | # Serverless directories
 95 | .serverless/
 96 | 
 97 | # FuseBox cache
 98 | .fusebox/
 99 | 
100 | # DynamoDB Local files
101 | .dynamodb/
102 | 
103 | # TernJS port file
104 | .tern-port
105 | 


--------------------------------------------------------------------------------
/src/utils.js:
--------------------------------------------------------------------------------
  1 | import gh from 'parse-github-url';
  2 | 
  3 | export function parseDirectProjectLink(path) {
  4 |   if (path.trim() === '') {
  5 |     return null;
  6 |   }
  7 | 
  8 |   {
  9 |     // Example: https://github.com/orgs/pingcap/projects/8
 10 |     const m = path.match(/github\.com\/orgs\/([-\w\d\.\_]+)\/projects\/(\d+)/);
 11 |     if (m) {
 12 |       return {
 13 |         type: 'org_project',
 14 |         org: m[1],
 15 |         project_num: parseInt(m[2]),
 16 |       };
 17 |     }
 18 |   }
 19 |   {
 20 |     // Example: https://github.com/tikv/tikv/projects/26
 21 |     const m = path.match(
 22 |       /github\.com\/([-\w\d\.\_]+)\/([-\w\d\.\_]+)\/projects\/(\d+)/
 23 |     );
 24 |     if (m) {
 25 |       return {
 26 |         type: 'repo_project',
 27 |         org: m[1],
 28 |         repo: m[2],
 29 |         project_num: parseInt(m[3]),
 30 |       };
 31 |     }
 32 |   }
 33 | 
 34 |   return null;
 35 | }
 36 | 
 37 | export function parseProjectPath(path) {
 38 |   if (path.trim() === '') {
 39 |     return null;
 40 |   }
 41 | 
 42 |   {
 43 |     // Example: https://github.com/orgs/pingcap/projects/8
 44 |     // Example: https://github.com/tikv/tikv/projects/26
 45 |     const r = parseDirectProjectLink(path);
 46 |     if (r) {
 47 |       return r;
 48 |     }
 49 |   }
 50 | 
 51 |   {
 52 |     // Example: pingcap
 53 |     const m = path.match(/^([\w\d\.]+)$/);
 54 |     if (m) {
 55 |       return {
 56 |         type: 'org',
 57 |         org: m[1],
 58 |       };
 59 |     }
 60 |   }
 61 | 
 62 |   const r = gh(path);
 63 |   if (r.owner && !r.name) {
 64 |     return {
 65 |       type: 'org',
 66 |       org: r.owner,
 67 |     };
 68 |   }
 69 | 
 70 |   if (r.owner && r.name) {
 71 |     if (r.owner === 'orgs') {
 72 |       // Example: https://github.com/orgs/pingcap/projects
 73 |       return {
 74 |         type: 'org',
 75 |         org: r.name,
 76 |       };
 77 |     } else {
 78 |       return {
 79 |         type: 'repo',
 80 |         org: r.owner,
 81 |         repo: r.name,
 82 |       };
 83 |     }
 84 |   }
 85 | 
 86 |   return null;
 87 | }
 88 | 
 89 | export function loadProjectsByPath(path, octoClient) {
 90 |   const parsed = parseProjectPath(path);
 91 |   return loadProjectsByParsedInfo(parsed, octoClient);
 92 | }
 93 | 
 94 | export async function loadProjectsByParsedInfo(parsed, octoClient) {
 95 |   switch (parsed.type) {
 96 |     case 'org':
 97 |       return await octoClient.loadEnabledProjectsFromOrg(parsed.org);
 98 |     case 'repo':
 99 |       return await octoClient.loadEnabledProjectsFromRepo(
100 |         parsed.org,
101 |         parsed.repo
102 |       );
103 |     case 'org_project': {
104 |       const project = await octoClient.loadOrgProjectByProjNum(
105 |         parsed.org,
106 |         parsed.project_num
107 |       );
108 |       return [project];
109 |     }
110 |     case 'repo_project': {
111 |       const project = await octoClient.loadRepoProjectByProjNum(
112 |         parsed.org,
113 |         parsed.repo,
114 |         parsed.project_num
115 |       );
116 |       return [project];
117 |     }
118 |     default:
119 |       return [];
120 |   }
121 | }
122 | 
123 | // Convert a project tree in the list hierarchy to a tree hierarchy.
124 | export function projectTreeListToTree(treeInList) {
125 |   const idMap = {};
126 |   let roots = [];
127 |   treeInList.forEach(item => {
128 |     if (item.id) {
129 |       idMap[item.id] = item;
130 |     }
131 |   });
132 |   treeInList.forEach(item => {
133 |     const parentId = item.parentProject?.id;
134 |     if (parentId) {
135 |       const parent = idMap[parentId];
136 |       if (parent != null) {
137 |         if (parent._children == null) {
138 |           parent._children = [];
139 |         }
140 |         parent._children.push(item);
141 |       } else {
142 |         console.warn('Cannot find parent project id', parentId);
143 |       }
144 |     } else {
145 |       roots.push(item);
146 |     }
147 |   });
148 |   return roots;
149 | }
150 | 


--------------------------------------------------------------------------------
/api.js:
--------------------------------------------------------------------------------
  1 | const qs = require('querystring');
  2 | const randomString = require('randomstring');
  3 | const bodyParser = require('body-parser');
  4 | const axios = require('axios');
  5 | const cookieSession = require('cookie-session');
  6 | const { graphql } = require('@octokit/graphql');
  7 | const logger = require('signale');
  8 | 
  9 | function NewOctoClient(token) {
 10 |   let destToken;
 11 |   if (process.env.ACCESS_TOKEN_OVERRIDE) {
 12 |     destToken = process.env.ACCESS_TOKEN_OVERRIDE;
 13 |   } else {
 14 |     destToken = token;
 15 |   }
 16 |   const client = graphql.defaults({
 17 |     headers: {
 18 |       authorization: `token ${destToken}`,
 19 |     },
 20 |   });
 21 |   return client;
 22 | }
 23 | 
 24 | async function acquireOAuthToken(code, state) {
 25 |   const oauthResp = await axios.request({
 26 |     method: 'post',
 27 |     url:
 28 |       'https://github.com/login/oauth/access_token?' +
 29 |       qs.stringify({
 30 |         client_id: process.env.CLIENT_ID,
 31 |         client_secret: process.env.CLIENT_SECRET,
 32 |         code,
 33 |         state,
 34 |       }),
 35 |     headers: {
 36 |       accept: 'application/json',
 37 |     },
 38 |   });
 39 |   if (!oauthResp.data.access_token) {
 40 |     throw new Error('Invalid AccessToken response');
 41 |   }
 42 |   const client = NewOctoClient(oauthResp.data.access_token);
 43 |   const resp = await client(`{
 44 |     viewer {
 45 |       login
 46 |       avatarUrl
 47 |       id
 48 |       name
 49 |     }
 50 |   }`);
 51 |   if (!resp || !resp.viewer) {
 52 |     throw new Error('Invalid GitHub Authenticated response');
 53 |   }
 54 |   return {
 55 |     accessToken: oauthResp.data.access_token,
 56 |     githubUser: resp.viewer,
 57 |   };
 58 | }
 59 | 
 60 | function requireToken(req, res, next) {
 61 |   if (!process.env.ACCESS_TOKEN_OVERRIDE && !req.session.accessToken) {
 62 |     res.status(403).json({
 63 |       err: 'SignInRequired',
 64 |     });
 65 |     return;
 66 |   }
 67 |   next();
 68 | }
 69 | 
 70 | module.exports = app => {
 71 |   app.use(bodyParser.urlencoded({ extended: false }));
 72 | 
 73 |   app.use(bodyParser.json());
 74 | 
 75 |   app.use(
 76 |     cookieSession({
 77 |       name: 'session',
 78 |       keys: [process.env.SESSION_SECRET],
 79 |       maxAge: 7 * 24 * 60 * 60 * 1000, // 7 days
 80 |     })
 81 |   );
 82 | 
 83 |   app.get('/github/signin', (req, res) => {
 84 |     req.session.oAuthState = randomString.generate();
 85 |     const githubAuthUrl =
 86 |       'https://github.com/login/oauth/authorize?' +
 87 |       qs.stringify({
 88 |         client_id: process.env.CLIENT_ID,
 89 |         redirect_uri:
 90 |           process.env.SERVER_HOST +
 91 |           '/github/callback?' +
 92 |           qs.stringify({ redirect: req.query.redirect }),
 93 |         state: req.session.oAuthState,
 94 |         scope: 'read:user user:email repo',
 95 |       });
 96 |     res.redirect(githubAuthUrl);
 97 |   });
 98 | 
 99 |   app.get('/github/callback', (req, res) => {
100 |     if (req.session.oAuthState !== req.query.state) {
101 |       logger.error('Check OAuthState failed', req.query, req.session);
102 |       res.status(403).json({
103 |         err: 'InvaildOAuthState',
104 |       });
105 |       return;
106 |     }
107 | 
108 |     acquireOAuthToken(req.query.code, req.query.state).then(
109 |       data => {
110 |         req.session.accessToken = data.accessToken;
111 |         req.session.githubUser = data.githubUser;
112 |         logger.success('OAuth SignIn success', {
113 |           token: data.accessToken,
114 |           login: data.githubUser.login,
115 |         });
116 |         if (req.query.redirect) {
117 |           res.redirect(req.query.redirect);
118 |         } else {
119 |           res.redirect('/');
120 |         }
121 |       },
122 |       err => {
123 |         logger.error(err);
124 |         res.status(500).json({
125 |           err: 'InternalError',
126 |           msg: err.message,
127 |         });
128 |       }
129 |     );
130 |   });
131 | 
132 |   app.get('/github/info', requireToken, (req, res) => {
133 |     // Always verify the access token.
134 |     const client = NewOctoClient(req.session.accessToken);
135 |     client(`{
136 |       viewer {
137 |         login
138 |       }
139 |     }`).then(
140 |       _resp => {
141 |         res.json({
142 |           accessToken: req.session.accessToken,
143 |           githubUser: req.session.githubUser,
144 |         });
145 |       },
146 |       _err => {
147 |         req.session = null;
148 |         res.status(403).json({
149 |           err: 'SignInRequired',
150 |         });
151 |         return;
152 |       }
153 |     );
154 |   });
155 | 
156 |   app.post('/github/graphql', requireToken, (req, res) => {
157 |     const client = NewOctoClient(req.session.accessToken);
158 |     client(req.body.query, req.body.parameters).then(
159 |       resp => res.json(resp),
160 |       err => {
161 |         logger.error(err);
162 |         if (err.message && err.message.indexOf('Bad credentials') > -1) {
163 |           req.session = null;
164 |           res.status(403).json({
165 |             err: 'SignInRequired',
166 |           });
167 |           return;
168 |         }
169 |         res.status(500).json({
170 |           err: 'InternalError',
171 |           msg: err.message,
172 |         });
173 |       }
174 |     );
175 |   });
176 | 
177 |   app.post('/signout', requireToken, (req, res) => {
178 |     req.session = null;
179 |     res.json({});
180 |   });
181 | };
182 | 


--------------------------------------------------------------------------------
/src/components/GanttChangePreviewDialog.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div class="modal-card" style="width: 700px">
  3 |     <header class="modal-card-head">
  4 |       <p class="modal-card-title">Preview Changes</p>
  5 |     </header>
  6 |     <section class="modal-card-body">
  7 |       <p>
  8 |         You have made following changes. Would you like to update GitHub issues
  9 |         to apply these changes?
 10 |         <b>Unselected changes will be discarded.</b>
 11 |       </p>
 12 |       <b-table
 13 |         :data="data"
 14 |         :bordered="false"
 15 |         :checked-rows.sync="checkedRows"
 16 |         narrowed
 17 |         :checkable="!updating"
 18 |         hoverable
 19 |         style="margin: 10px 0; font-size: 14px;"
 20 |       >
 21 |         <template slot-scope="props">
 22 |           <b-table-column label :visible="updating" width="40">
 23 |             <b-icon
 24 |               v-if="props.row.status == 'pending'"
 25 |               icon="timer-sand-empty"
 26 |               size="is-small"
 27 |               type="is-grey-lighter"
 28 |             />
 29 |             <b-icon
 30 |               v-if="props.row.status == 'success'"
 31 |               icon="check"
 32 |               size="is-small"
 33 |               type="is-success"
 34 |             />
 35 |             <b-icon
 36 |               v-if="props.row.status == 'fail'"
 37 |               icon="close"
 38 |               size="is-small"
 39 |               type="is-danger"
 40 |             />
 41 |             <b-icon
 42 |               v-if="props.row.status == 'skip'"
 43 |               icon="minus"
 44 |               size="is-small"
 45 |               type="is-grey-lighter"
 46 |             />
 47 |             <b-icon
 48 |               v-if="props.row.status == 'working'"
 49 |               icon="loading"
 50 |               size="is-small"
 51 |               class="loading-icon"
 52 |               type="is-grey-light"
 53 |             />
 54 |           </b-table-column>
 55 |           <b-table-column label="Task">
 56 |             <a :href="props.row.task._src.url" target="_blank">
 57 |               {{
 58 |               props.row.task.text
 59 |               }}
 60 |             </a>
 61 |           </b-table-column>
 62 |           <b-table-column label="Start Date" width="120">
 63 |             <div v-if="props.row.start_date">
 64 |               <div>
 65 |                 <small>
 66 |                   <span class="change-from">
 67 |                     {{
 68 |                     props.row.start_date.from | date
 69 |                     }}
 70 |                   </span>
 71 |                 </small>
 72 |               </div>
 73 |               <div>
 74 |                 <small>{{ props.row.start_date.to | date }}</small>
 75 |               </div>
 76 |             </div>
 77 |           </b-table-column>
 78 |           <b-table-column label="End Date" width="120">
 79 |             <div v-if="props.row.end_date">
 80 |               <div>
 81 |                 <small>
 82 |                   <span class="change-from">
 83 |                     {{
 84 |                     props.row.end_date.from | date
 85 |                     }}
 86 |                   </span>
 87 |                 </small>
 88 |               </div>
 89 |               <div>
 90 |                 <small>{{ props.row.end_date.to | date }}</small>
 91 |               </div>
 92 |             </div>
 93 |           </b-table-column>
 94 |           <b-table-column label="Progress" width="90">
 95 |             <div v-if="props.row.progress">
 96 |               <div>
 97 |                 <small>
 98 |                   <span class="change-from">
 99 |                     {{
100 |                     props.row.progress.from | percent
101 |                     }}
102 |                   </span>
103 |                 </small>
104 |               </div>
105 |               <div>
106 |                 <small>{{ props.row.progress.to | percent }}</small>
107 |               </div>
108 |             </div>
109 |           </b-table-column>
110 |         </template>
111 |       </b-table>
112 |     </section>
113 |     <footer class="modal-card-foot">
114 |       <b-button
115 |         type="is-primary"
116 |         icon-left="check"
117 |         rounded
118 |         @click="handleApply"
119 |         :loading="updating"
120 |         :disabled="checkedRows.length == 0 || checkedRows.length > 100"
121 |       >Apply Selected Change</b-button>
122 |       <b-button @click="$parent.close()" rounded :disabled="updating">Cancel</b-button>
123 |     </footer>
124 |   </div>
125 | </template>
126 | 
127 | <script>
128 | import moment from 'moment';
129 | 
130 | export default {
131 |   name: 'GanttChangePreviewDialog',
132 |   props: ['data', 'updating'],
133 |   data() {
134 |     return {
135 |       checkedRows: [],
136 |     };
137 |   },
138 |   filters: {
139 |     percent: function(value) {
140 |       return Math.floor(value * 100) + '%';
141 |     },
142 |     date: function(timestampValue) {
143 |       return moment(timestampValue).format('YYYY-MM-DD');
144 |     },
145 |   },
146 |   methods: {
147 |     handleApply() {
148 |       this.$emit('save', this.checkedRows);
149 |     },
150 |   },
151 | };
152 | </script>
153 | 
154 | <style lang="scss" scoped>
155 | @import '@/variables.scss';
156 | 
157 | .change-from {
158 |   background-color: rgba($red, 0.1);
159 |   color: $red;
160 |   text-decoration: line-through;
161 | }
162 | 
163 | .loading-icon {
164 |   animation: spinAround 0.5s infinite linear;
165 | }
166 | </style>
167 | 


--------------------------------------------------------------------------------
/src/components/Nav.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <b-navbar type="is-light">
  3 |     <template slot="brand">
  4 |       <b-navbar-item tag="router-link" :to="{ path: '/' }"
  5 |         >GanttViewer</b-navbar-item
  6 |       >
  7 |     </template>
  8 |     <template slot="start">
  9 |       <b-navbar-item tag="div">
 10 |         <small>for:</small>
 11 |         <b-autocomplete
 12 |           :data="repoNavData"
 13 |           placeholder="Type to search a repository"
 14 |           :loading="repoNavIsLoading > 0"
 15 |           field="display"
 16 |           @typing="searchRepos"
 17 |           :disabled="!sessionInfo"
 18 |           size="is-small"
 19 |           style="width: 300px; margin-left: 5px;"
 20 |           :value="
 21 |             $route.params.repo
 22 |               ? `${$route.params.org}/${$route.params.repo}`
 23 |               : ''
 24 |           "
 25 |           @select="handleRepoChange"
 26 |         >
 27 |           >
 28 |           <template slot-scope="props">
 29 |             <div>
 30 |               <small>{{ props.option.display }}</small>
 31 |             </div>
 32 |             <div>
 33 |               <small>
 34 |                 <b-icon size="is-small" icon="star" />
 35 |                 {{ props.option.stargazers.totalCount }}
 36 |                 <b-icon size="is-small" icon="source-branch" />
 37 |                 {{ props.option.forkCount }}
 38 |               </small>
 39 |             </div>
 40 |           </template>
 41 |         </b-autocomplete>
 42 |       </b-navbar-item>
 43 |       <b-navbar-dropdown label="Local Panels">
 44 |         <b-navbar-item
 45 |           tag="router-link"
 46 |           :to="{ name: 'view_local_panel', params: { id: panel.id } }"
 47 |           v-for="panel of panels"
 48 |           :key="panel.id"
 49 |           >{{ panel.name }}</b-navbar-item
 50 |         >
 51 |         <b-navbar-item tag="router-link" :to="{ name: 'manage_local_panels' }"
 52 |           >Manage Local Panels</b-navbar-item
 53 |         >
 54 |       </b-navbar-dropdown>
 55 |     </template>
 56 |     <template slot="end">
 57 |       <b-navbar-dropdown v-if="sessionInfo && sessionInfo.githubUser">
 58 |         <template slot="label">
 59 |           <img
 60 |             :src="sessionInfo.githubUser.avatarUrl"
 61 |             style="margin-right: 5px"
 62 |           />
 63 |           {{ sessionInfo.githubUser.login }}
 64 |         </template>
 65 |         <b-navbar-item href="javascript:;" @click="logout"
 66 |           >Logout</b-navbar-item
 67 |         >
 68 |       </b-navbar-dropdown>
 69 |     </template>
 70 |   </b-navbar>
 71 | </template>
 72 | 
 73 | <script>
 74 | import { mapState } from 'vuex';
 75 | import throttle from 'lodash/throttle';
 76 | 
 77 | export default {
 78 |   name: 'Nav',
 79 |   computed: mapState('localPanel', ['panels']),
 80 |   data() {
 81 |     return {
 82 |       repoNavData: [],
 83 |       repoNavSelected: null,
 84 |       repoNavIsLoading: 0,
 85 |       repoNavDataTimestamp: 0,
 86 |     };
 87 |   },
 88 |   props: ['repo', 'sessionInfo'],
 89 |   methods: {
 90 |     logout: async function() {
 91 |       try {
 92 |         await this.$http.post('/signout');
 93 |         window.location.reload();
 94 |       } catch (e) {
 95 |         console.error(e);
 96 |         this.$buefy.toast.open({
 97 |           duration: 5000,
 98 |           message: `Sign out failed`,
 99 |           position: 'is-bottom',
100 |           type: 'is-danger',
101 |           queue: false,
102 |         });
103 |       }
104 |     },
105 |     handleRepoChange: function(option) {
106 |       if (!option) {
107 |         return;
108 |       }
109 |       this.$router.push({
110 |         name: 'view',
111 |         params: {
112 |           org: option.owner.login,
113 |           repo: option.name,
114 |         },
115 |       });
116 |     },
117 |     searchRepos: throttle(async function(name) {
118 |       if (!this.$props.sessionInfo) {
119 |         return;
120 |       }
121 |       if (!name.length) {
122 |         this.repoNavDataTimestamp = Date.now();
123 |         this.repoNavData = [];
124 |         return;
125 |       }
126 |       this.repoNavIsLoading++;
127 |       try {
128 |         const ts = Date.now();
129 |         const query = await this.$octoClient.request(
130 |           `
131 |           query repos($name: String!) {
132 |             search(query: $name, type: REPOSITORY, first: 10) {
133 |               nodes {
134 |                 ... on Repository {
135 |                   id
136 |                   name
137 |                   url
138 |                   owner {
139 |                     login
140 |                   }
141 |                   forkCount
142 |                   stargazers {
143 |                     totalCount
144 |                   }
145 |                 }
146 |               }
147 |             }
148 |           }
149 |         `,
150 |           {
151 |             name,
152 |           }
153 |         );
154 |         if (
155 |           query &&
156 |           query.search &&
157 |           query.search.nodes &&
158 |           ts > this.repoNavDataTimestamp
159 |         ) {
160 |           this.repoNavDataTimestamp = ts;
161 |           this.repoNavData = [];
162 |           query.search.nodes.forEach(node => {
163 |             this.repoNavData.push({
164 |               ...node,
165 |               display: `${node.owner.login}/${node.name}`,
166 |             });
167 |           });
168 |         }
169 |       } catch (e) {
170 |         console.error(e);
171 |         this.$buefy.toast.open({
172 |           duration: 3000,
173 |           message: `Search repository failed`,
174 |           position: 'is-bottom',
175 |           type: 'is-danger',
176 |           queue: false,
177 |         });
178 |       }
179 |       this.repoNavIsLoading--;
180 |     }, 500),
181 |   },
182 | };
183 | </script>
184 | 


--------------------------------------------------------------------------------
/src/pages/ManageLocalPanelsPage.vue:
--------------------------------------------------------------------------------
  1 | <template>
  2 |   <div style="height: 100%; display: grid; grid-template-rows: 180px auto;">
  3 |     <vue-headful title="Manage Local Panels - GanttViewer" />
  4 |     <section class="hero is-primary">
  5 |       <div class="hero-body">
  6 |         <div class="container">
  7 |           <h1 class="title">Manage Local Panels</h1>
  8 |           <b-field grouped group-multiline>
  9 |             <p class="control">
 10 |               <b-button
 11 |                 type="is-primary"
 12 |                 size="is-small"
 13 |                 rounded
 14 |                 inverted
 15 |                 @click="handleAddLocalPanel"
 16 |                 >Add Local Panel</b-button
 17 |               >
 18 |             </p>
 19 |             <p class="control">
 20 |               <b-button
 21 |                 type="is-primary"
 22 |                 size="is-small"
 23 |                 rounded
 24 |                 inverted
 25 |                 outlined
 26 |                 @click="handleImportPanel"
 27 |                 >Import Panel JSON</b-button
 28 |               >
 29 |             </p>
 30 |           </b-field>
 31 |         </div>
 32 |       </div>
 33 |     </section>
 34 |     <section class="section" style="overflow-y: scroll;">
 35 |       <div class="container">
 36 |         <b-collapse
 37 |           class="card"
 38 |           v-for="panel of panels"
 39 |           :key="panel.id"
 40 |           style="margin: 10px 0;"
 41 |         >
 42 |           <div slot="trigger" slot-scope="props" class="card-header">
 43 |             <p class="card-header-title">Panel: {{ panel.name }}</p>
 44 |             <a class="card-header-icon">
 45 |               <b-icon :icon="props.open ? 'menu-down' : 'menu-up'"></b-icon>
 46 |             </a>
 47 |           </div>
 48 |           <div class="card-content">
 49 |             <b-field>
 50 |               <b-input
 51 |                 size="is-small"
 52 |                 placeholder="URL or org/repo"
 53 |                 @input="handleProjectSourceChange(panel.id, $event)"
 54 |                 v-model="inputs[panel.id]"
 55 |                 expanded
 56 |                 @keyup.native.enter="handleAddProjectFromInput(panel.id)"
 57 |                 :disabled="
 58 |                   addProjectStates[panel.id] &&
 59 |                     addProjectStates[panel.id].loading
 60 |                 "
 61 |               ></b-input>
 62 |               <p class="control">
 63 |                 <b-button
 64 |                   size="is-small"
 65 |                   disabled
 66 |                   v-if="!addProjectStates[panel.id]"
 67 |                   @click="handleAddProjectFromInput(panel.id)"
 68 |                   >Add projects</b-button
 69 |                 >
 70 |                 <b-button
 71 |                   size="is-small"
 72 |                   type="is-primary"
 73 |                   v-if="
 74 |                     addProjectStates[panel.id] &&
 75 |                       addProjectStates[panel.id].type === 'org'
 76 |                   "
 77 |                   @click="handleAddProjectFromInput(panel.id)"
 78 |                   :loading="
 79 |                     addProjectStates[panel.id] &&
 80 |                       addProjectStates[panel.id].loading
 81 |                   "
 82 |                 >
 83 |                   Add projects from
 84 |                   <b>organization</b>
 85 |                   {{ addProjectStates[panel.id].org }}
 86 |                 </b-button>
 87 |                 <b-button
 88 |                   size="is-small"
 89 |                   type="is-success"
 90 |                   v-if="
 91 |                     addProjectStates[panel.id] &&
 92 |                       addProjectStates[panel.id].type === 'repo'
 93 |                   "
 94 |                   @click="handleAddProjectFromInput(panel.id)"
 95 |                   :loading="
 96 |                     addProjectStates[panel.id] &&
 97 |                       addProjectStates[panel.id].loading
 98 |                   "
 99 |                 >
100 |                   Add projects from
101 |                   <b>repository</b>
102 |                   {{ addProjectStates[panel.id].org }}/{{
103 |                     addProjectStates[panel.id].repo
104 |                   }}
105 |                 </b-button>
106 |                 <b-button
107 |                   size="is-small"
108 |                   type="is-warning"
109 |                   v-if="
110 |                     addProjectStates[panel.id] &&
111 |                       addProjectStates[panel.id].type === 'org_project'
112 |                   "
113 |                   @click="handleAddProjectFromInput(panel.id)"
114 |                   :loading="
115 |                     addProjectStates[panel.id] &&
116 |                       addProjectStates[panel.id].loading
117 |                   "
118 |                 >
119 |                   Add
120 |                   <b>project id</b>
121 |                   {{ addProjectStates[panel.id].project_num }} from
122 |                   <b>organization</b>
123 |                   {{ addProjectStates[panel.id].org }}
124 |                 </b-button>
125 |                 <b-button
126 |                   size="is-small"
127 |                   type="is-warning"
128 |                   v-if="
129 |                     addProjectStates[panel.id] &&
130 |                       addProjectStates[panel.id].type === 'repo_project'
131 |                   "
132 |                   @click="handleAddProjectFromInput(panel.id)"
133 |                   :loading="
134 |                     addProjectStates[panel.id] &&
135 |                       addProjectStates[panel.id].loading
136 |                   "
137 |                 >
138 |                   Add
139 |                   <b>project id</b>
140 |                   {{ addProjectStates[panel.id].project_num }} from
141 |                   <b>repository</b>
142 |                   {{ addProjectStates[panel.id].org }}/{{
143 |                     addProjectStates[panel.id].repo
144 |                   }}
145 |                 </b-button>
146 |               </p>
147 |             </b-field>
148 |             <div class="content" style="font-size: 14px">
149 |               <b-table :data="Object.values(panel.projects)" narrowed>
150 |                 <template slot-scope="props">
151 |                   <b-table-column label="Project Name" width="200">{{
152 |                     props.row.name
153 |                   }}</b-table-column>
154 |                   <b-table-column label="URL">
155 |                     <a :href="props.row.url" target="_blank">
156 |                       {{ props.row.url }}
157 |                     </a>
158 |                   </b-table-column>
159 |                   <b-table-column label="Action" width="100">
160 |                     <b-button
161 |                       size="is-small"
162 |                       rounded
163 |                       outlined
164 |                       @click="handleDeleteProjectPanel(panel.id, props.row.id)"
165 |                       >Delete</b-button
166 |                     >
167 |                     <!-- <b-button size="is-small" rounded outlined>↑</b-button>
168 |                     <b-button size="is-small" rounded outlined>↓</b-button>-->
169 |                   </b-table-column>
170 |                 </template>
171 |               </b-table>
172 |             </div>
173 |           </div>
174 |           <footer class="card-footer">
175 |             <router-link
176 |               class="card-footer-item"
177 |               :to="{ name: 'view_local_panel', params: { id: panel.id } }"
178 |               >View Panel</router-link
179 |             >
180 |             <a class="card-footer-item" @click="handleRenamePanel(panel.id)"
181 |               >Rename Panel</a
182 |             >
183 |             <a class="card-footer-item" @click="handleDeletePanel(panel.id)"
184 |               >Delete Panel</a
185 |             >
186 |             <a class="card-footer-item" @click="handleExportPanel(panel.id)"
187 |               >Export Panel JSON</a
188 |             >
189 |           </footer>
190 |         </b-collapse>
191 |       </div>
192 |     </section>
193 |   </div>
194 | </template>
195 | 
196 | <script>
197 | import Vue from 'vue';
198 | import { mapMutations, mapState } from 'vuex';
199 | import { v4 as uuidv4 } from 'uuid';
200 | import Ajv from 'ajv';
201 | import * as utils from '@/utils.js';
202 | 
203 | const ajv = new Ajv();
204 | ajv.addMetaSchema(require('ajv/lib/refs/json-schema-draft-06.json'));
205 | 
206 | const validatePanelSchema = ajv.compile(require('./localPanelSchema.json'));
207 | 
208 | export default {
209 |   name: 'ManageLocalPanelsPage',
210 |   computed: mapState('localPanel', ['panels']),
211 |   data() {
212 |     return {
213 |       addProjectStates: {},
214 |       inputs: {},
215 |     };
216 |   },
217 |   methods: {
218 |     ...mapMutations('localPanel', [
219 |       'addPanel',
220 |       'deletePanel',
221 |       'renamePanel',
222 |       'addProjects',
223 |       'deleteProject',
224 |       'importPanel',
225 |     ]),
226 |     handleQueryError(e) {
227 |       console.error(e);
228 |       let message = 'Request failed';
229 |       if (e.body && e.body.msg) {
230 |         message = e.body.msg;
231 |       } else if (e.message) {
232 |         message = e.message;
233 |       }
234 |       this.$buefy.toast.open({
235 |         duration: 5000,
236 |         message: message,
237 |         position: 'is-bottom',
238 |         type: 'is-danger',
239 |         queue: false,
240 |       });
241 |     },
242 |     handleProjectSourceChange(panelId, inputValue) {
243 |       Vue.set(
244 |         this.addProjectStates,
245 |         panelId,
246 |         utils.parseProjectPath(inputValue)
247 |       );
248 |     },
249 |     async handleAddProjectFromInput(panelId) {
250 |       const addInfo = this.addProjectStates[panelId];
251 |       if (!addInfo) {
252 |         return;
253 |       }
254 |       if (addInfo.loading) {
255 |         return;
256 |       }
257 |       Vue.set(addInfo, 'loading', true);
258 |       try {
259 |         const projects = await utils.loadProjectsByParsedInfo(
260 |           addInfo,
261 |           this.$octoClient
262 |         );
263 |         this.addProjects({ id: panelId, projects });
264 |         Vue.set(this.inputs, panelId, '');
265 |         Vue.set(this.addProjectStates, panelId, null);
266 |       } catch (e) {
267 |         this.handleQueryError(e);
268 |       }
269 |       Vue.set(addInfo, 'loading', false);
270 |     },
271 |     handleImportPanel() {
272 |       this.$buefy.dialog.prompt({
273 |         animation: 'zoom-in',
274 |         title: 'Import Panel JSON',
275 |         message: `Please input the panel JSON below`,
276 |         trapFocus: true,
277 |         inputAttrs: {
278 |           style: 'font-size: 12px',
279 |         },
280 |         onConfirm: json => {
281 |           // FIXME: Use JSON schema validate
282 |           try {
283 |             const d = JSON.parse(json);
284 |             if (!validatePanelSchema(d)) {
285 |               throw new Error('Invalid panel JSON schema');
286 |             }
287 |             this.importPanel({ panel: d });
288 |           } catch (e) {
289 |             console.log(e);
290 |             this.$buefy.toast.open({
291 |               duration: 5000,
292 |               message: 'Failed to import JSON: ' + e.message,
293 |               position: 'is-bottom',
294 |               type: 'is-danger',
295 |               queue: false,
296 |             });
297 |           }
298 |         },
299 |       });
300 |     },
301 |     handleAddLocalPanel() {
302 |       this.$buefy.dialog.prompt({
303 |         animation: 'zoom-in',
304 |         title: 'Add Panel',
305 |         message: `Panel name`,
306 |         trapFocus: true,
307 |         onConfirm: name => {
308 |           const id = uuidv4();
309 |           this.addPanel({ id, name });
310 |         },
311 |       });
312 |     },
313 |     handleDeleteProjectPanel(panelId, projectId) {
314 |       this.deleteProject({ id: panelId, projectId });
315 |     },
316 |     handleRenamePanel(panelId) {
317 |       this.$buefy.dialog.prompt({
318 |         animation: 'zoom-in',
319 |         title: 'Rename Panel',
320 |         message: `New panel name`,
321 |         trapFocus: true,
322 |         inputAttrs: {
323 |           value: this.panels[panelId].name,
324 |         },
325 |         onConfirm: name => {
326 |           this.renamePanel({ id: panelId, name });
327 |         },
328 |       });
329 |     },
330 |     handleDeletePanel(panelId) {
331 |       this.$buefy.dialog.confirm({
332 |         animation: 'zoom-in',
333 |         title: 'Delete Panel',
334 |         message: 'Are you sure want to delete this panel?',
335 |         confirmText: 'Delete',
336 |         onConfirm: () => {
337 |           this.deletePanel({ id: panelId });
338 |         },
339 |       });
340 |     },
341 |     async handleExportPanel(panelId) {
342 |       const data = JSON.stringify(this.panels[panelId]);
343 |       try {
344 |         await this.$copyText(data);
345 |         this.$buefy.toast.open({
346 |           duration: 5000,
347 |           message: 'Panel JSON copied to clipboard.',
348 |           position: 'is-bottom',
349 |           type: 'is-success',
350 |           queue: false,
351 |         });
352 |       } catch (e) {
353 |         this.$buefy.toast.open({
354 |           duration: 5000,
355 |           message: 'Failed to copy panel JSON to clipboard.',
356 |           position: 'is-bottom',
357 |           type: 'is-danger',
358 |           queue: false,
359 |         });
360 |       }
361 |     },
362 |   },
363 | };
364 | </script>
365 | 


--------------------------------------------------------------------------------
/src/plugins/octoclient.js:
--------------------------------------------------------------------------------
  1 | import { Http } from 'vue-resource';
  2 | import some from 'lodash/some';
  3 | import { ToastProgrammatic as Toast } from 'buefy';
  4 | import * as utils from '@/utils.js';
  5 | 
  6 | const FLAG_PROJECT_ENABLE = 'EnableGantt'.toLowerCase();
  7 | 
  8 | const QUERY_FRAG_PROJECT = `
  9 |   body
 10 |   id
 11 |   name
 12 |   number
 13 |   state
 14 |   url
 15 | `;
 16 | // owner {
 17 | //   __typename
 18 | //   ... on Organization {
 19 | //     login
 20 | //   }
 21 | //   ... on Repository {
 22 | //     name
 23 | //     owner {
 24 | //       ... on Organization {
 25 | //         login
 26 | //       }
 27 | //       ... on User {
 28 | //         login
 29 | //       }
 30 | //     }
 31 | //   }
 32 | // }
 33 | 
 34 | const QUERY_FRAG_ISSUE_OR_PR = `
 35 |   id
 36 |   assignees(first: 1) {
 37 |     nodes {
 38 |       login
 39 |     }
 40 |   }
 41 |   author {
 42 |     login
 43 |   }
 44 |   body
 45 |   createdAt
 46 |   closed
 47 |   closedAt
 48 |   number
 49 |   url
 50 |   viewerCanUpdate
 51 |   title
 52 |   state
 53 |   repository {
 54 |     nameWithOwner
 55 |   }
 56 |   milestone {
 57 |     dueOn
 58 |     id
 59 |     title
 60 |     url
 61 |     state
 62 |     number
 63 |   }
 64 |   labels(first: 10) {
 65 |     nodes {
 66 |       name
 67 |       color
 68 |     }
 69 |   }
 70 | `;
 71 | 
 72 | const FLAG_REGEX_ITEM_IGNORE = /GanttIgnoreColumn:\s*([^\n\-]+)/i;
 73 | 
 74 | class OctoClient {
 75 |   QUERY_FRAG_RATELIMIT = `
 76 |   rateLimit {
 77 |     limit
 78 |     cost
 79 |     remaining
 80 |     resetAt
 81 |   }
 82 |   `;
 83 | 
 84 |   request = async (query, parameters) => {
 85 |     const resp = await Http.post('/github/graphql', {
 86 |       query,
 87 |       parameters,
 88 |     });
 89 |     return resp.body;
 90 |   };
 91 | 
 92 |   loadEnabledProjectsFromRepo = async (org, repo) => {
 93 |     const r = [];
 94 |     let after = null;
 95 |     for (;;) {
 96 |       const resp = await this.request(
 97 |         `
 98 |         query loadEnabledProjectsFromRepo($org: String!, $repo: String!, $after: String) {
 99 |           repository(name: $repo, owner: $org) {
100 |             projects(first: 100, after: $after) {
101 |               pageInfo {
102 |                 hasNextPage
103 |                 endCursor
104 |               }
105 |               nodes {
106 |                 ${QUERY_FRAG_PROJECT}
107 |               }
108 |             }
109 |           }
110 |           ${this.QUERY_FRAG_RATELIMIT}
111 |         }
112 |       `,
113 |         {
114 |           org,
115 |           repo,
116 |           after,
117 |         }
118 |       );
119 |       if (!resp || !resp.repository) {
120 |         console.log(resp);
121 |         throw new Error('Invalid loadEnabledProjectsFromRepo response');
122 |       }
123 |       console.log('loadEnabledProjectsFromRepo rateLimit', resp.rateLimit);
124 |       console.log(resp.repository.projects);
125 |       resp.repository.projects.nodes.forEach(n => {
126 |         if (n.body.toLowerCase().indexOf(FLAG_PROJECT_ENABLE) > -1) {
127 |           r.push(n);
128 |         }
129 |       });
130 |       if (!resp.repository.projects.pageInfo.hasNextPage) {
131 |         break;
132 |       }
133 |       after = resp.repository.projects.pageInfo.endCursor;
134 |     }
135 |     return r;
136 |   };
137 | 
138 |   loadEnabledProjectsFromOrg = async org => {
139 |     const r = [];
140 |     let after = null;
141 |     for (;;) {
142 |       const resp = await this.request(
143 |         `
144 |         query loadEnabledProjectsFromOrg($org: String!, $after: String) {
145 |           organization(login: $org) {
146 |             projects(first: 100, after: $after) {
147 |               pageInfo {
148 |                 hasNextPage
149 |                 endCursor
150 |               }
151 |               nodes {
152 |                 ${QUERY_FRAG_PROJECT}
153 |               }
154 |             }
155 |           }
156 |           ${this.QUERY_FRAG_RATELIMIT}
157 |         }
158 |       `,
159 |         {
160 |           org,
161 |           after,
162 |         }
163 |       );
164 |       if (!resp || !resp.organization) {
165 |         console.log(resp);
166 |         throw new Error('Invalid loadEnabledProjectsFromOrg response');
167 |       }
168 |       console.log('loadEnabledProjectsFromOrg rateLimit', resp.rateLimit);
169 |       console.log(resp.organization.projects.nodes);
170 |       resp.organization.projects.nodes.forEach(n => {
171 |         if (n.body.toLowerCase().indexOf(FLAG_PROJECT_ENABLE) > -1) {
172 |           r.push(n);
173 |         }
174 |       });
175 |       if (!resp.organization.projects.pageInfo.hasNextPage) {
176 |         break;
177 |       }
178 |       after = resp.organization.projects.pageInfo.endCursor;
179 |     }
180 |     return r;
181 |   };
182 | 
183 |   loadRepoProjectByProjNum = async (org, repo, num) => {
184 |     console.log('Load repo project info: ', org, repo, num);
185 | 
186 |     const resp = await this.request(
187 |       `
188 |       query loadRepoProjectByProjNum($org: String!, $repo: String!, $num: Int!) {
189 |         repository(name: $repo, owner: $org) {
190 |           project(number: $num) {
191 |             ${QUERY_FRAG_PROJECT}
192 |           }
193 |         }
194 |         ${this.QUERY_FRAG_RATELIMIT}
195 |       }
196 |     `,
197 |       {
198 |         org,
199 |         repo,
200 |         num,
201 |       }
202 |     );
203 |     if (!resp || !resp.repository) {
204 |       console.log(resp);
205 |       throw new Error('Invalid loadRepoProjectByProjNum response');
206 |     }
207 |     console.log('loadRepoProjectByProjNum rateLimit', resp.rateLimit);
208 |     return resp.repository.project;
209 |   };
210 | 
211 |   loadOrgProjectByProjNum = async (org, num) => {
212 |     console.log('Load org project info: ', org, num);
213 | 
214 |     const resp = await this.request(
215 |       `
216 |       query loadOrgProjectByProjNum($org: String!, $num: Int!) {
217 |         organization(login: $org) {
218 |           project(number: $num) {
219 |             ${QUERY_FRAG_PROJECT}
220 |           }
221 |         }
222 |         ${this.QUERY_FRAG_RATELIMIT}
223 |       }
224 |     `,
225 |       {
226 |         org,
227 |         num,
228 |       }
229 |     );
230 |     if (!resp || !resp.organization) {
231 |       console.log(resp);
232 |       throw new Error('Invalid loadOrgProjectByProjNum response');
233 |     }
234 |     console.log('loadOrgProjectByProjNum rateLimit', resp.rateLimit);
235 |     return resp.organization.project;
236 |   };
237 | 
238 |   loadProjectItems = async projectIdArray => {
239 |     if (projectIdArray.length === 0) {
240 |       return [];
241 |     }
242 | 
243 |     console.log('Load project items', projectIdArray);
244 | 
245 |     // Currently only first 100 card in each column is supported..
246 |     const r = [];
247 |     const resp = await this.request(
248 |       `
249 |       query loadProjectItems($ids: [ID!]!){
250 |         projects: nodes(ids: $ids) {
251 |           ...on Project {
252 |             id
253 |             columns(first: 10) {
254 |               nodes {
255 |                 id
256 |                 name
257 |                 cards(first: 100) {
258 |                   nodes {
259 |                     isArchived
260 |                     note
261 |                     content {
262 |                       __typename
263 |                       ... on PullRequest {
264 |                         ${QUERY_FRAG_ISSUE_OR_PR}
265 |                       }
266 |                       ... on Issue {
267 |                         ${QUERY_FRAG_ISSUE_OR_PR}
268 |                       }
269 |                     }
270 |                   }
271 |                 }
272 |               }
273 |             }
274 |           }
275 |         }
276 |         ${this.QUERY_FRAG_RATELIMIT}
277 |       }
278 |     `,
279 |       {
280 |         ids: projectIdArray,
281 |       }
282 |     );
283 |     if (!resp || !resp.projects) {
284 |       throw new Error('Invalid loadProjectItems response');
285 |     }
286 |     console.log('loadProjectItems rateLimit', resp.rateLimit);
287 |     resp.projects.forEach(proj => {
288 |       proj.columns.nodes.forEach(column => {
289 |         column.cards.nodes.forEach(card => {
290 |           if (card.isArchived) {
291 |             return;
292 |           }
293 |           if (!card.note && !card.content?.id) {
294 |             // The card has either note or content
295 |             return;
296 |           }
297 |           r.push({
298 |             note: card.note,
299 |             content: card.content,
300 |             parentColumn: {
301 |               name: column.name,
302 |             },
303 |             parentProject: {
304 |               id: proj.id,
305 |             },
306 |           });
307 |         });
308 |       });
309 |     });
310 |     return r;
311 |   };
312 | 
313 |   recursiveLoadProjectTree = async (
314 |     rootProjects,
315 |     fnIncTotal,
316 |     fnIncFinished
317 |   ) => {
318 |     console.group('recursiveLoadProjectTree');
319 | 
320 |     async function wrapProjectWithParent(parentProjectId, promise) {
321 |       fnIncTotal?.();
322 |       let r;
323 |       try {
324 |         r = await promise;
325 |         r.parentProject = {
326 |           id: parentProjectId,
327 |         };
328 |       } catch (e) {
329 |         let msg;
330 |         if (e?.body?.msg) {
331 |           msg = e.body.msg;
332 |         } else {
333 |           msg = e.message;
334 |         }
335 |         Toast.open({
336 |           duration: 1000,
337 |           message: `Load project failed: ${msg}`,
338 |           position: 'is-bottom',
339 |           type: 'is-warning',
340 |           queue: false,
341 |         });
342 |         r = null;
343 |       }
344 |       fnIncFinished?.();
345 |       return r;
346 |     }
347 | 
348 |     let projects = rootProjects;
349 |     let depth = 0;
350 |     const r = [];
351 |     const idDedup = {};
352 | 
353 |     while (projects.length > 0 && depth < 4) {
354 |       const projectIgnoreColumnsByProjectId = {};
355 |       projects.forEach(proj => {
356 |         // Match ignore column directives
357 |         const m = proj.body.match(FLAG_REGEX_ITEM_IGNORE);
358 |         if (m) {
359 |           projectIgnoreColumnsByProjectId[proj.id] = m[1]
360 |             .trim()
361 |             .split(',')
362 |             .map(v => v.trim().toLowerCase());
363 |         }
364 |       });
365 | 
366 |       const projectIdArrayToLoadItems = [];
367 |       projects.forEach(p => {
368 |         if (idDedup[p.id]) {
369 |           return;
370 |         }
371 |         idDedup[p.id] = true;
372 |         r.push({
373 |           kind: 'project',
374 |           ...p,
375 |         });
376 |         projectIdArrayToLoadItems.push(p.id);
377 |       });
378 | 
379 |       fnIncTotal?.();
380 |       const items = await this.loadProjectItems(projectIdArrayToLoadItems);
381 |       fnIncFinished?.();
382 | 
383 |       const projectInfoArrayToLoadMeta = [];
384 |       items.forEach(i => {
385 |         if (i.parentProject?.id && i.parentColumn?.name) {
386 |           const ignoreColumns =
387 |             projectIgnoreColumnsByProjectId[i.parentProject.id];
388 |           const name = i.parentColumn.name.toLowerCase();
389 |           if (ignoreColumns) {
390 |             if (some(ignoreColumns, n => name.indexOf(n) > -1)) {
391 |               return;
392 |             }
393 |           }
394 |         }
395 | 
396 |         if (i.note?.length > 0) {
397 |           const info = utils.parseDirectProjectLink(i.note);
398 |           if (!info) {
399 |             return;
400 |           }
401 |           info.parentProjectId = i.parentProject.id;
402 |           const infoId = JSON.stringify(info);
403 |           if (idDedup[infoId]) {
404 |             return;
405 |           }
406 |           idDedup[infoId] = true;
407 |           projectInfoArrayToLoadMeta.push(info);
408 |         } else if (i.content?.id) {
409 |           const issueOrPrNode = i.content;
410 |           if (idDedup[issueOrPrNode.id]) {
411 |             return;
412 |           }
413 |           idDedup[issueOrPrNode.id] = true;
414 |           r.push({
415 |             kind: 'issueOrPr',
416 |             parentColumn: i.parentColumn,
417 |             parentProject: i.parentProject,
418 |             ...issueOrPrNode,
419 |           });
420 |         }
421 |       });
422 | 
423 |       const promises = [];
424 |       projectInfoArrayToLoadMeta.forEach(info => {
425 |         if (info.type === 'org_project') {
426 |           promises.push(
427 |             wrapProjectWithParent(
428 |               info.parentProjectId,
429 |               this.loadOrgProjectByProjNum(info.org, info.project_num)
430 |             )
431 |           );
432 |         } else if (info.type === 'repo_project') {
433 |           promises.push(
434 |             wrapProjectWithParent(
435 |               info.parentProjectId,
436 |               this.loadRepoProjectByProjNum(
437 |                 info.org,
438 |                 info.repo,
439 |                 info.project_num
440 |               )
441 |             )
442 |           );
443 |         } else {
444 |           throw new Error('Unknown project info: ' + info.type);
445 |         }
446 |       });
447 | 
448 |       if (promises.length === 0) {
449 |         break;
450 |       }
451 | 
452 |       const leafProjects = await Promise.all(promises);
453 |       projects = leafProjects.filter(v => v != null);
454 |       depth += 1;
455 |     }
456 | 
457 |     console.groupEnd('recursiveLoadProjectTree');
458 | 
459 |     return r;
460 |   };
461 | }
462 | 
463 | export const octoClient = new OctoClient();
464 | 
465 | export const OctoClientPlugin = {
466 |   install(Vue, _options) {
467 |     Vue.prototype.$octoClient = octoClient;
468 |   },
469 | };
470 | 


--------------------------------------------------------------------------------
/src/components/GanttView.vue:
--------------------------------------------------------------------------------
   1 | <template>
   2 |   <div style="width: 100%; height: 100%; position: relative;">
   3 |     <vue-headful :title="`${title} - GanttViewer`" />
   4 |     <b-modal animation="zoom-in" :active="loadingAll > 0" :can-cancel="false">
   5 |       <div style="text-align: center; width: 300px; margin: 0 auto;">
   6 |         <p style="margin-bottom: 10px;">Loading data from GitHub...</p>
   7 |         <b-progress
   8 |           :value="(loadingFinished / loadingAll) * 100"
   9 |           size="is-small"
  10 |           type="is-info"
  11 |           style="width: 300px;"
  12 |         ></b-progress>
  13 |       </div>
  14 |     </b-modal>
  15 |     <b-modal
  16 |       animation="zoom-in"
  17 |       :active.sync="isPreviewChangeDialogVisible"
  18 |       has-modal-card
  19 |       trap-focus
  20 |       :can-cancel="false"
  21 |     >
  22 |       <GanttChangePreviewDialog
  23 |         :data="Object.values(pendingTaskChanges)"
  24 |         @save="handleApplyPendingChanges"
  25 |         :updating="isPreviewChangeDialogUpdating"
  26 |       />
  27 |     </b-modal>
  28 |     <div
  29 |       ref="gantt"
  30 |       style="position: absolute; left: 0; top: 27px; bottom: 0; width: 100%;"
  31 |       @mouseover="handleGanttMouseOver"
  32 |     ></div>
  33 |     <div style="position: absolute; left: 0; width: 100%; top: 0; height: 27px;">
  34 |       <div style="display: inline-block; margin: 0 10px;">
  35 |         <b-slider
  36 |           :tooltip="false"
  37 |           size="is-small"
  38 |           :value="columnWidth"
  39 |           style="width: 100px; margin: 10px 0"
  40 |           :min="100"
  41 |           :max="750"
  42 |           @change="updateColumnWidth"
  43 |         />
  44 |       </div>
  45 |       <div style="display: inline-block; margin: 0 10px; vertical-align: top;">
  46 |         <b-input
  47 |           size="is-small"
  48 |           placeholder="Filter"
  49 |           @input="handleFilterChange()"
  50 |           v-model="filter"
  51 |         ></b-input>
  52 |       </div>
  53 |       <b-button
  54 |         size="is-small"
  55 |         type="is-text"
  56 |         @click="zoomIn"
  57 |         :disabled="!canZoomIn"
  58 |         icon-left="plus"
  59 |       >Zoom In</b-button>
  60 |       <b-button
  61 |         size="is-small"
  62 |         type="is-text"
  63 |         @click="zoomOut"
  64 |         :disabled="!canZoomOut"
  65 |         icon-left="minus"
  66 |       >Zoom Out</b-button>
  67 |       <b-button
  68 |         size="is-small"
  69 |         type="is-text"
  70 |         @click="collapseAll"
  71 |         icon-left="chevron-up"
  72 |       >Collapse All</b-button>
  73 |       <b-button
  74 |         size="is-small"
  75 |         type="is-text"
  76 |         @click="expandAll"
  77 |         icon-left="chevron-down"
  78 |       >Expand All</b-button>
  79 |       <b-button size="is-small" type="is-text" @click="reload" icon-left="refresh">Reload</b-button>
  80 |       <b-button
  81 |         size="is-small"
  82 |         type="is-primary"
  83 |         @click="previewChanges"
  84 |         icon-left="check"
  85 |         :disabled="Object.keys(pendingTaskChanges).length === 0"
  86 |       >Preview & Save</b-button>
  87 |     </div>
  88 |   </div>
  89 | </template>
  90 | 
  91 | <script>
  92 | import { mapState } from 'vuex';
  93 | import { gantt } from 'dhtmlx-gantt';
  94 | import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_tooltip.js';
  95 | import 'dhtmlx-gantt/codebase/ext/dhtmlxgantt_marker.js';
  96 | import moment from 'moment';
  97 | import { html } from 'common-tags';
  98 | import forEach from 'lodash/forEach';
  99 | import sortBy from 'lodash/sortBy';
 100 | import some from 'lodash/some';
 101 | import debounce from 'lodash/debounce';
 102 | import Color from 'color';
 103 | import GanttChangePreviewDialog from './GanttChangePreviewDialog.vue';
 104 | import * as utils from '@/utils.js';
 105 | 
 106 | // Flag is used to locate values.
 107 | const FLAG_REGEX_ITEM_START = /GanttStart:\s*(\d{4}-\d{2}-\d{2})/i;
 108 | const FLAG_REGEX_ITEM_DUE = /GanttDue:\s*(\d{4}-\d{2}-\d{2})/i;
 109 | const FLAG_REGEX_ITEM_DURATION = /GanttDuration:\s*([\d]+)d/i;
 110 | const FLAG_REGEX_ITEM_PROGRESS = /GanttProgress:\s*([\d.]+)%/i;
 111 | const FLAG_DATE_FORMAT = 'YYYY-MM-DD';
 112 | 
 113 | // Template is used to build values when they are not exist after update.
 114 | const TEMPLATE_ITEM_START = 'GanttStart: {}';
 115 | const TEMPLATE_ITEM_DUE = 'GanttDue: {}';
 116 | const TEMPLATE_ITEM_PROGRESS = 'GanttProgress: {}%';
 117 | 
 118 | export default {
 119 |   name: 'GanttView',
 120 |   props: ['localPanelId', 'path'],
 121 |   computed: {
 122 |     ...mapState('localPanel', ['panels']),
 123 |     title() {
 124 |       if (!this.$props.localPanelId) {
 125 |         return this.$props.path;
 126 |       }
 127 |       const panel = this.panels[this.$props.localPanelId];
 128 |       if (!panel) {
 129 |         return this.$props.localPanelId;
 130 |       }
 131 |       return `Local Panel ${panel.name}`;
 132 |     },
 133 |   },
 134 |   components: {
 135 |     GanttChangePreviewDialog,
 136 |   },
 137 |   data() {
 138 |     return {
 139 |       canZoomIn: true,
 140 |       canZoomOut: true,
 141 |       loadingAll: 0,
 142 |       loadingFinished: 0,
 143 |       columnWidth: 500,
 144 |       pendingTaskChanges: {},
 145 |       isPreviewChangeDialogVisible: false,
 146 |       isPreviewChangeDialogUpdating: false,
 147 |       filter: '',
 148 |     };
 149 |   },
 150 |   async mounted() {
 151 |     gantt.ext.zoom.init({
 152 |       levels: [
 153 |         {
 154 |           name: 'hours',
 155 |           scales: [
 156 |             { unit: 'day', step: 1, format: '%d %M' },
 157 |             { unit: 'hour', step: 1, format: '%h' },
 158 |           ],
 159 |           round_dnd_dates: true,
 160 |           min_column_width: 30,
 161 |           scale_height: 60,
 162 |         },
 163 |         {
 164 |           name: 'days',
 165 |           scales: [
 166 |             { unit: 'month', step: 1, format: '%M' },
 167 |             { unit: 'week', step: 1, format: 'Week %W' },
 168 |             { unit: 'day', step: 1, format: '%d %D' },
 169 |           ],
 170 |           round_dnd_dates: true,
 171 |           min_column_width: 60,
 172 |           scale_height: 60,
 173 |         },
 174 |         {
 175 |           name: 'weeks',
 176 |           scales: [
 177 |             { unit: 'year', step: 1, format: '%Y' },
 178 |             { unit: 'month', step: 1, format: '%M' },
 179 |             { unit: 'week', step: 1, format: 'Week %W' },
 180 |           ],
 181 |           round_dnd_dates: false,
 182 |           min_column_width: 60,
 183 |           scale_height: 60,
 184 |         },
 185 |         {
 186 |           name: 'months',
 187 |           scales: [
 188 |             { unit: 'year', step: 1, format: '%Y' },
 189 |             { unit: 'month', step: 1, format: '%M' },
 190 |           ],
 191 |           round_dnd_dates: false,
 192 |           min_column_width: 50,
 193 |           scale_height: 60,
 194 |         },
 195 |         {
 196 |           name: 'quarters',
 197 |           scales: [
 198 |             { unit: 'year', step: 1, format: '%Y' },
 199 |             {
 200 |               unit: 'quarter',
 201 |               step: 1,
 202 |               format: function quarterLabel(date) {
 203 |                 var month = date.getMonth();
 204 |                 var q_num;
 205 |                 if (month >= 9) {
 206 |                   q_num = 4;
 207 |                 } else if (month >= 6) {
 208 |                   q_num = 3;
 209 |                 } else if (month >= 3) {
 210 |                   q_num = 2;
 211 |                 } else {
 212 |                   q_num = 1;
 213 |                 }
 214 |                 return 'Q' + q_num;
 215 |               },
 216 |             },
 217 |             { unit: 'month', step: 1, format: '%M' },
 218 |           ],
 219 |           round_dnd_dates: false,
 220 |           min_column_width: 50,
 221 |           scale_height: 60,
 222 |         },
 223 |         {
 224 |           name: 'years',
 225 |           scales: [{ unit: 'year', step: 1, format: '%Y' }],
 226 |           round_dnd_dates: false,
 227 |           min_column_width: 50,
 228 |           scale_height: 60,
 229 |         },
 230 |       ],
 231 |     });
 232 |     gantt.templates.grid_folder = item => {
 233 |       return '';
 234 |     };
 235 |     gantt.templates.grid_file = item => {
 236 |       return '';
 237 |     };
 238 |     gantt.templates.task_text = () => {
 239 |       return '';
 240 |     };
 241 |     gantt.templates.rightside_text = (start, end, task) => {
 242 |       return html`
 243 |         ${task.text}
 244 |       `;
 245 |     };
 246 |     gantt.config.columns = [
 247 |       {
 248 |         name: 'text',
 249 |         label: 'Name',
 250 |         tree: true,
 251 |         template: task => {
 252 |           return html`
 253 |             <a href="${task._src.url}" target="_blank">${task.text}</a>
 254 |           `;
 255 |         },
 256 |         width: '*',
 257 |         min_width: 400,
 258 |       },
 259 |       {
 260 |         name: 'assignee',
 261 |         label: 'Assignee',
 262 |         template: task => {
 263 |           if (task._src._ganttAssignee) {
 264 |             return html`
 265 |               <a
 266 |                 href="https://github.com/${task._src._ganttAssignee}"
 267 |                 target="_blank"
 268 |                 ><small>${task._src._ganttAssignee}</small></a
 269 |               >
 270 |             `;
 271 |           } else {
 272 |             return html`
 273 |               <small>(None)</small>
 274 |             `;
 275 |           }
 276 |         },
 277 |         min_width: 100,
 278 |         max_width: 200,
 279 |       },
 280 |       {
 281 |         name: 'repo',
 282 |         label: 'Repository',
 283 |         template: task => {
 284 |           if (task._src.repository) {
 285 |             return html`
 286 |               <small>${task._src.repository.nameWithOwner}</small>
 287 |             `;
 288 |           } else {
 289 |             return html``;
 290 |           }
 291 |         },
 292 |         min_width: 250,
 293 |       },
 294 |     ];
 295 |     gantt.templates.task_class = function(start, end, task) {
 296 |       switch (task.type) {
 297 |         case 'project':
 298 |           return 'kind-project';
 299 |           break;
 300 |         case 'task':
 301 |           switch (task.schedule) {
 302 |             case 'beyond-complete':
 303 |               return 'kind-task-beyond-complete';
 304 |             case 'beyond-schedule':
 305 |               return 'kind-task-beyond-schedule';
 306 |             case 'on-schedule':
 307 |               return 'kind-task-on-schedule';
 308 |             case 'out-schedule':
 309 |               return 'kind-task-out-schedule';
 310 |           }
 311 |           return 'kind-task';
 312 |           break;
 313 |       }
 314 |     };
 315 |     gantt.templates.tooltip_text = function(start, end, task) {
 316 |       let template = html`
 317 |         <div class="row subtitle is-6" style="margin-bottom: 0.5rem">
 318 |           ${task.text}
 319 |         </div>
 320 |       `;
 321 |       template += html`
 322 |         <div class="row">
 323 |           <b>Start date:</b> ${gantt.templates.tooltip_date_format(start)}
 324 |         </div>
 325 |       `;
 326 |       template += html`
 327 |         <div class="row">
 328 |           <b>End date:</b> ${gantt.templates.tooltip_date_format(end)}
 329 |         </div>
 330 |       `;
 331 |       template += html`
 332 |         <div class="row">
 333 |           <b>Progress:</b> ${Math.round(task.progress * 100)}%
 334 |         </div>
 335 |       `;
 336 |       if (task._src.column?.name) {
 337 |         template += html`
 338 |           <div class="row"><b>Column:</b> ${task._src.column?.name}</div>
 339 |         `;
 340 |       }
 341 |       if (task._src.labels?.nodes?.length > 0) {
 342 |         const l = task._src.labels.nodes.map(label => {
 343 |           const isDarkBg = Color(`#${label.color}`).isDark();
 344 |           const foreColor = isDarkBg ? '#fff' : '#000';
 345 |           return html`
 346 |             <span
 347 |               class="gh-label"
 348 |               style="background-color: #${label.color}; color: ${foreColor}"
 349 |               >${label.name}</span
 350 |             >
 351 |           `;
 352 |         });
 353 |         template += '<div class="row"><b>Labels:</b> ' + l.join(' ') + '</div>';
 354 |       }
 355 |       if (task._src._ganttAssignee) {
 356 |         template += html`
 357 |           <div class="row"><b>Assignee:</b> @${task._src._ganttAssignee}</div>
 358 |         `;
 359 |       }
 360 |       if (task._src.milestone) {
 361 |         template += html`
 362 |           <div class="row"><b>Milestone:</b> ${task._src.milestone.title}</div>
 363 |         `;
 364 |       }
 365 |       if (task._src.state) {
 366 |         template += html`
 367 |           <div class="row"><b>State:</b> ${task._src.state}</div>
 368 |         `;
 369 |       }
 370 |       return template;
 371 |     };
 372 |     gantt.config.drag_links = false;
 373 |     gantt.config.task_height = 10;
 374 |     gantt.config.row_height = 35;
 375 |     gantt.config.fit_tasks = true;
 376 |     // gantt.config.grid_width = this.columnWidth;
 377 |     gantt.config.details_on_dblclick = false;
 378 |     gantt.config.lightbox.sections = [
 379 |       { name: 'time', height: 72, map_to: 'auto', type: 'duration' },
 380 |     ];
 381 |     gantt.config.time_step = 24 * 60;
 382 |     gantt.config.layout = {
 383 |       cols: [
 384 |         {
 385 |           width: this.columnWidth,
 386 |           min_width: 200,
 387 |           rows: [
 388 |             {
 389 |               view: 'grid',
 390 |               scrollX: 'gridScroll',
 391 |               scrollable: true,
 392 |               scrollY: 'scrollVer',
 393 |             },
 394 | 
 395 |             // horizontal scrollbar for the grid
 396 |             { view: 'scrollbar', id: 'gridScroll', group: 'horizontal' },
 397 |           ],
 398 |         },
 399 |         { resizer: true, width: 1 },
 400 |         {
 401 |           rows: [
 402 |             { view: 'timeline', scrollX: 'scrollHor', scrollY: 'scrollVer' },
 403 | 
 404 |             // horizontal scrollbar for the timeline
 405 |             { view: 'scrollbar', id: 'scrollHor', group: 'horizontal' },
 406 |           ],
 407 |         },
 408 |         { view: 'scrollbar', id: 'scrollVer' },
 409 |       ],
 410 |     };
 411 |     gantt.ext.zoom.setLevel('weeks');
 412 | 
 413 |     this.eventIdBeforeTaskChange = gantt.attachEvent(
 414 |       'onBeforeTaskChanged',
 415 |       this.handleBeforeTaskChange
 416 |     );
 417 |     this.eventIdAfterTaskUpdate = gantt.attachEvent(
 418 |       'onAfterTaskUpdate',
 419 |       this.handleAfterTaskUpdate
 420 |     );
 421 |     this.eventIdBeforeLightbox = gantt.attachEvent(
 422 |       'onBeforeLightbox',
 423 |       this.handleBeforeLightbox
 424 |     );
 425 |     this.eventIdLightboxSave = gantt.attachEvent(
 426 |       'onLightboxSave',
 427 |       this.handleLightboxSave
 428 |     );
 429 |     this.lastTask = null;
 430 | 
 431 |     gantt.init(this.$refs.gantt);
 432 |     this.reload();
 433 |   },
 434 |   beforeDestroy() {
 435 |     if (this.eventIdBeforeTaskChange) {
 436 |       gantt.detachEvent(this.eventIdBeforeTaskChange);
 437 |       this.eventIdBeforeTaskChange = null;
 438 |     }
 439 |     if (this.eventIdAfterTaskUpdate) {
 440 |       gantt.detachEvent(this.eventIdAfterTaskUpdate);
 441 |       this.eventIdAfterTaskUpdate = null;
 442 |     }
 443 |     if (this.eventIdBeforeLightbox) {
 444 |       gantt.detachEvent(this.eventIdBeforeLightbox);
 445 |       this.eventIdBeforeLightbox = null;
 446 |     }
 447 |     if (this.eventIdLightboxSave) {
 448 |       gantt.detachEvent(this.eventIdLightboxSave);
 449 |       this.eventIdLightboxSave = null;
 450 |     }
 451 |     this.lastTask = null;
 452 |   },
 453 |   methods: {
 454 |     handleFilterChange: debounce(function() {
 455 |       this.applyGanttFromProjects();
 456 |     }, 500),
 457 |     setLastTask(task) {
 458 |       this.lastTask = {
 459 |         start_date: task.start_date.valueOf(),
 460 |         end_date: task.end_date.valueOf(),
 461 |         progress: task.progress,
 462 |         id: task.id,
 463 |       };
 464 |     },
 465 |     handleBeforeTaskChange(id, mode, task) {
 466 |       let allowChange = this.checkTaskPrivilege(task);
 467 |       if (allowChange) {
 468 |         this.setLastTask(task);
 469 |       } else {
 470 |         this.lastTask = null;
 471 |       }
 472 |       return allowChange;
 473 |     },
 474 |     handleAfterTaskUpdate(id, task) {
 475 |       if (!this.checkTaskPrivilege(task)) {
 476 |         console.error('No privilege to update task', id);
 477 |         return;
 478 |       }
 479 |       if (!this.lastTask) {
 480 |         console.error('Failed to verify lastTask', id);
 481 |         return;
 482 |       }
 483 |       if (this.lastTask.id !== id) {
 484 |         console.error('Failed to verify lastTask ID', id);
 485 |         return;
 486 |       }
 487 |       this.checkTaskChange(task, 'progress', v => v);
 488 |       this.checkTaskChange(task, 'start_date', v => v.valueOf());
 489 |       this.checkTaskChange(task, 'end_date', v => v.valueOf());
 490 |       console.log(task);
 491 |       this.lastTask = null;
 492 |       return true;
 493 |     },
 494 |     handleBeforeLightbox(id) {
 495 |       const task = gantt.getTask(id);
 496 |       if (!this.checkTaskPrivilege(task)) {
 497 |         return false;
 498 |       }
 499 |       return true;
 500 |     },
 501 |     handleLightboxSave(id, task) {
 502 |       if (!this.checkTaskPrivilege(task)) {
 503 |         return false;
 504 |       }
 505 |       this.setLastTask(task);
 506 |       return true;
 507 |     },
 508 |     handleGanttMouseOver(ev) {
 509 |       const taskRowDom = ev.target.closest('.gantt_task_row, .gantt_row');
 510 |       if (!taskRowDom || !taskRowDom.getAttribute('task_id')) {
 511 |         return;
 512 |       }
 513 |       gantt.selectTask(taskRowDom.getAttribute('task_id'));
 514 |     },
 515 |     checkTaskChange(newTask, fieldName, newValueMapper) {
 516 |       console.log('Checking change for %s of field %s', newTask.id, fieldName);
 517 |       const newValue = newValueMapper(newTask[fieldName]);
 518 |       const oldValue = this.lastTask[fieldName];
 519 |       if (newValue === oldValue) {
 520 |         return;
 521 |       }
 522 |       console.log('Field %s is changed', fieldName);
 523 |       const id = newTask.id;
 524 |       if (!this.pendingTaskChanges[id]) {
 525 |         this.$set(this.pendingTaskChanges, id, {
 526 |           id,
 527 |           task: newTask,
 528 |         });
 529 |       }
 530 |       const pendingChange = this.pendingTaskChanges[id];
 531 |       if (!pendingChange[fieldName]) {
 532 |         this.$set(pendingChange, fieldName, { from: oldValue });
 533 |       }
 534 |       this.$set(pendingChange[fieldName], 'to', newValue);
 535 |     },
 536 |     checkTaskPrivilege(task) {
 537 |       if (task.readonly) {
 538 |         return false;
 539 |       }
 540 |       if (task.type !== 'task') {
 541 |         return false;
 542 |       }
 543 |       if (!task._src.viewerCanUpdate) {
 544 |         return false;
 545 |       }
 546 |       if (!window.sessionInfo) {
 547 |         return false;
 548 |       }
 549 |       // const currentLogin = window.sessionInfo.githubUser.login;
 550 |       // if (
 551 |       //   currentLogin !== task._src._ganttAssignee &&
 552 |       //   currentLogin !== task._src.author.login
 553 |       // ) {
 554 |       //   return false;
 555 |       // }
 556 |       return true;
 557 |     },
 558 |     previewChanges() {
 559 |       if (Object.keys(this.pendingTaskChanges).length === 0) {
 560 |         return;
 561 |       }
 562 |       this.isPreviewChangeDialogVisible = true;
 563 |     },
 564 |     async handleApplyPendingChanges(changes) {
 565 |       forEach(this.pendingTaskChanges, change => {
 566 |         this.$set(change, 'status', 'skip');
 567 |       });
 568 |       changes.forEach(change => {
 569 |         change.status = 'pending';
 570 |       });
 571 |       this.isPreviewChangeDialogUpdating = true;
 572 | 
 573 |       // 1. Fetch the body of each changed issue
 574 |       const issueIds = changes.map(t => t.id);
 575 |       let issues = [];
 576 |       try {
 577 |         issues = await this.loadIssues(issueIds);
 578 |       } catch (e) {
 579 |         // No need to shortcut since no issues will be updated then.
 580 |         console.error(e);
 581 |       }
 582 | 
 583 |       const issuesById = {};
 584 |       issues.forEach(issue => (issuesById[issue.id] = issue));
 585 | 
 586 |       // 2. Ignore changes that cannot be updated
 587 |       changes.forEach(change => {
 588 |         if (!issuesById[change.id]) {
 589 |           change.status = 'fail';
 590 |         }
 591 |       });
 592 | 
 593 |       // 3. Apply change one by one. Use for loops to support async / await.
 594 |       for (let i = 0; i < changes.length; i++) {
 595 |         let change = changes[i];
 596 |         const issue = issuesById[change.id];
 597 |         if (!issue) {
 598 |           continue;
 599 |         }
 600 |         change.status = 'working';
 601 |         try {
 602 |           await this.applyIssueUpdate(issue, change);
 603 |           change.status = 'success';
 604 |         } catch (e) {
 605 |           console.error(e);
 606 |           change.status = 'fail';
 607 |           if (
 608 |             e.body &&
 609 |             e.body.msg &&
 610 |             e.body.msg.indexOf('OAuth App access restriction') > -1
 611 |           ) {
 612 |             this.$buefy.dialog.alert({
 613 |               animation: 'zoom-in',
 614 |               title: 'Update failed',
 615 |               message:
 616 |                 'GanttViewer does not have permissions to write the repository in this organization. <a href="https://help.github.com/en/github/setting-up-and-managing-your-github-user-account/requesting-organization-approval-for-oauth-apps" target="_blank">Click here for help</a>',
 617 |               confirmText: 'OK',
 618 |             });
 619 |             this.isPreviewChangeDialogUpdating = false;
 620 |             this.isPreviewChangeDialogVisible = false;
 621 |             return;
 622 |           }
 623 |         }
 624 |       }
 625 | 
 626 |       // 4. All changes are applied
 627 |       setTimeout(() => {
 628 |         this.pendingTaskChanges = {};
 629 |         this.isPreviewChangeDialogUpdating = false;
 630 |         this.isPreviewChangeDialogVisible = false;
 631 |         this.reload();
 632 |       }, 500);
 633 |     },
 634 |     updateIssueBodyForField(body, flagMatcher, template, newValue) {
 635 |       const m = body.match(flagMatcher);
 636 |       const newValueFull = template.replace('{}', newValue);
 637 |       if (m) {
 638 |         return body.replace(m[0], newValueFull);
 639 |       } else {
 640 |         return body + `\n<!-- ${newValueFull} -->`;
 641 |       }
 642 |     },
 643 |     async applyIssueUpdate(issue, change) {
 644 |       let body = issue.body;
 645 |       if (change.progress) {
 646 |         body = this.updateIssueBodyForField(
 647 |           body,
 648 |           FLAG_REGEX_ITEM_PROGRESS,
 649 |           TEMPLATE_ITEM_PROGRESS,
 650 |           Math.floor(change.progress.to * 100)
 651 |         );
 652 |       }
 653 |       if (change.start_date || change.end_date) {
 654 |         // As long as start_date or end_date is changed, we need to update both
 655 |         // because the task date may be generated from duration.
 656 |         body = this.updateIssueBodyForField(
 657 |           body,
 658 |           FLAG_REGEX_ITEM_START,
 659 |           TEMPLATE_ITEM_START,
 660 |           moment(change.task.start_date.valueOf()).format(FLAG_DATE_FORMAT)
 661 |         );
 662 |         body = this.updateIssueBodyForField(
 663 |           body,
 664 |           FLAG_REGEX_ITEM_DUE,
 665 |           TEMPLATE_ITEM_DUE,
 666 |           moment(change.task.end_date.valueOf()).format(FLAG_DATE_FORMAT)
 667 |         );
 668 |         // We also need to remove the duration directive.
 669 |         const m = body.match(FLAG_REGEX_ITEM_DURATION);
 670 |         if (m) {
 671 |           body = body.replace(m[0], '');
 672 |         }
 673 |       }
 674 | 
 675 |       let mutationFrag;
 676 |       if (change.task._src.__typename === 'Issue') {
 677 |         mutationFrag = `
 678 |           updateIssue(input: {id: $id, body: $body}) {
 679 |             issue {
 680 |               body
 681 |             }
 682 |           }
 683 |         `;
 684 |       } else {
 685 |         mutationFrag = `
 686 |           updatePullRequest(input: {pullRequestId: $id, body: $body}) {
 687 |             pullRequest {
 688 |               body
 689 |             }
 690 |           }
 691 |         `;
 692 |       }
 693 | 
 694 |       await this.$octoClient.request(
 695 |         `
 696 |         mutation update($id: ID!, $body: String!) {
 697 |           __typename
 698 |           ${mutationFrag}
 699 |         }
 700 |       `,
 701 |         {
 702 |           id: issue.id,
 703 |           body,
 704 |         }
 705 |       );
 706 |     },
 707 |     updateColumnWidth(width) {
 708 |       this.columnWidth = width;
 709 |       gantt.config.layout.cols[0].width = width;
 710 |       gantt._reinit(this.$refs.gantt);
 711 |     },
 712 |     updateCanZoomInOut() {
 713 |       var level = gantt.ext.zoom.getCurrentLevel();
 714 |       this.canZoomOut = !(level > 4);
 715 |       this.canZoomIn = !(level === 0);
 716 |     },
 717 |     zoomIn() {
 718 |       gantt.ext.zoom.zoomIn();
 719 |       gantt.render();
 720 |       this.updateCanZoomInOut();
 721 |     },
 722 |     zoomOut() {
 723 |       gantt.ext.zoom.zoomOut();
 724 |       gantt.render();
 725 |       this.updateCanZoomInOut();
 726 |     },
 727 |     collapseAll() {
 728 |       gantt.eachTask(function(task) {
 729 |         task.$open = false;
 730 |       });
 731 |       gantt.render();
 732 |     },
 733 |     expandAll() {
 734 |       gantt.eachTask(function(task) {
 735 |         task.$open = true;
 736 |       });
 737 |       gantt.render();
 738 |     },
 739 |     async reload() {
 740 |       this.pendingTaskChanges = {};
 741 |       try {
 742 |         await this.loadData();
 743 |       } catch (e) {
 744 |         console.error(e);
 745 |         this.$buefy.toast.open({
 746 |           duration: 3000,
 747 |           message: `Failed to load project or issues`,
 748 |           position: 'is-bottom',
 749 |           type: 'is-danger',
 750 |           queue: false,
 751 |         });
 752 |       }
 753 |       this.loadingAll = 0;
 754 |       this.loadingFinished = 0;
 755 |     },
 756 |     applyGanttFromProjects() {
 757 |       if (!this.projectTree) {
 758 |         return;
 759 |       }
 760 | 
 761 |       const projectTree = this.projectTree;
 762 |       const projectTreeHierarchy = utils.projectTreeListToTree(projectTree);
 763 | 
 764 |       const milestones = {};
 765 |       const data = [];
 766 | 
 767 |       // For root items, they should be opened by default
 768 |       projectTreeHierarchy.forEach(item => {
 769 |         item.open = true;
 770 |       });
 771 | 
 772 |       // Parse Gantt metadata specified in project / item body.
 773 |       projectTree.forEach(item => {
 774 |         if (item.createdAt) {
 775 |           item._ganttStart = moment(item.createdAt)
 776 |             .startOf('day')
 777 |             .toDate();
 778 |         }
 779 |         {
 780 |           const m = item.body.match(FLAG_REGEX_ITEM_START);
 781 |           if (m) {
 782 |             // Override by start directive
 783 |             const d = moment(m[1], FLAG_DATE_FORMAT).toDate();
 784 |             if (!isNaN(d.valueOf())) {
 785 |               item._ganttStart = d;
 786 |             } else {
 787 |               console.warn('Invalid gantt start', item);
 788 |             }
 789 |           }
 790 |         }
 791 | 
 792 |         if (item.milestone?.dueOn) {
 793 |           item._ganttDue = moment(item.milestone.dueOn)
 794 |             .endOf('day')
 795 |             .toDate();
 796 |         }
 797 |         {
 798 |           const m = item.body.match(FLAG_REGEX_ITEM_DURATION);
 799 |           if (m && item._ganttStart) {
 800 |             // Override by duration directive. Duration directive is only effective when start is specified.
 801 |             const days = parseInt(m[1]);
 802 |             if (!Number.isNaN(days)) {
 803 |               const d = moment(item._ganttStart)
 804 |                 .add(parseInt(m[1]), 'd')
 805 |                 .toDate();
 806 |               if (!isNaN(d.valueOf())) {
 807 |                 item._ganttDue = d;
 808 |               } else {
 809 |                 console.warn('Invalid gantt due', item);
 810 |               }
 811 |             }
 812 |           }
 813 |         }
 814 |         {
 815 |           const m = item.body.match(FLAG_REGEX_ITEM_DUE);
 816 |           if (m) {
 817 |             // Override by due directive
 818 |             const d = moment(m[1], FLAG_DATE_FORMAT).toDate();
 819 |             if (!isNaN(d.valueOf())) {
 820 |               item._ganttDue = d;
 821 |             } else {
 822 |               console.warn('Invalid gantt due', item);
 823 |             }
 824 |           }
 825 |           if (!item._ganttDue && item._ganttStart) {
 826 |             item._ganttDue = new Date(
 827 |               item._ganttStart.valueOf() + 3 * 24 * 60 * 60 * 1000
 828 |             );
 829 |           }
 830 |         }
 831 | 
 832 |         if (item.closed) {
 833 |           // Closed items always have progress = 1.
 834 |           item._ganttProgress = 1;
 835 |         } else {
 836 |           // Override by progress directive
 837 |           const m = item.body.match(FLAG_REGEX_ITEM_PROGRESS);
 838 |           if (m) {
 839 |             const progress = parseFloat(m[1]);
 840 |             if (!Number.isNaN(progress)) {
 841 |               item._ganttProgress = progress / 100;
 842 |             }
 843 |           }
 844 |         }
 845 | 
 846 |         item._ganttAssignee = null;
 847 |         if (item.__typename === 'Issue') {
 848 |           if (item.assignees?.nodes?.length > 0) {
 849 |             item._ganttAssignee = item.assignees.nodes[0].login;
 850 |           }
 851 |         } else if (item.__typename === 'PullRequest') {
 852 |           // For PullRequests, show author as assignee.
 853 |           item._ganttAssignee = item.author?.login;
 854 |         }
 855 | 
 856 |         if (item.milestone) {
 857 |           if (milestones[item.milestone.id] === undefined) {
 858 |             milestones[item.milestone.id] = item.milestone;
 859 |           }
 860 |         }
 861 |       });
 862 | 
 863 |       // Calculate progress recursively if not specified explicitly
 864 |       {
 865 |         const dedupId = {};
 866 |         function updateProgressForChildren(children) {
 867 |           children.forEach(item => {
 868 |             if (!item.id) {
 869 |               console.warn('Unknown id for item', item);
 870 |               return;
 871 |             }
 872 |             if (dedupId[item.id]) {
 873 |               return;
 874 |             }
 875 |             dedupId[item.id] = true;
 876 |             if (item._ganttProgress != null) {
 877 |               // A progress is already specified, skip
 878 |               return;
 879 |             }
 880 |             if (!item._children) {
 881 |               // No children, skip
 882 |               return;
 883 |             }
 884 |             let sum = 0;
 885 |             updateProgressForChildren(item._children);
 886 |             item._children.forEach(subItem => {
 887 |               sum += subItem._ganttProgress || 0;
 888 |             });
 889 |             item._ganttProgress = sum / item._children.length;
 890 |           });
 891 |         }
 892 |         updateProgressForChildren(projectTreeHierarchy);
 893 |       }
 894 | 
 895 |       // Assign on-schedule status
 896 |       projectTree.forEach(item => {
 897 |         if (item._ganttProgress === 1) {
 898 |           item._ganttSchedule = 'beyond-complete';
 899 |         } else if (item._ganttStart && item._ganttDue) {
 900 |           const now = Date.now();
 901 |           if (Date.now() > item._ganttDue) {
 902 |             item._ganttSchedule = 'out-schedule';
 903 |           } else {
 904 |             const allDuration = item._ganttDue - item._ganttStart;
 905 |             const lastDuration = Date.now() - item._ganttStart;
 906 |             const expectedProgress = lastDuration / allDuration;
 907 | 
 908 |             if ((item._ganttProgress || 0) > expectedProgress) {
 909 |               item._ganttSchedule = 'beyond-schedule';
 910 |             } else {
 911 |               item._ganttSchedule = 'on-schedule';
 912 |             }
 913 |           }
 914 |         }
 915 |       });
 916 | 
 917 |       const filters = this.filter
 918 |         .trim()
 919 |         .split(' ')
 920 |         .map(v => v.trim().toLowerCase());
 921 | 
 922 |       let filteredProjectTree = projectTree;
 923 | 
 924 |       this.filter
 925 |         .trim()
 926 |         .split(' ')
 927 |         .forEach(fx => {
 928 |           const filter = fx.trim().toLowerCase();
 929 |           if (filter.length === 0) {
 930 |             return;
 931 |           }
 932 |           filteredProjectTree = filteredProjectTree.filter(item => {
 933 |             if (item.kind === 'issueOrPr') {
 934 |               if (item.parentColumn?.name?.toLowerCase().indexOf(filter) > -1) {
 935 |                 return true;
 936 |               }
 937 |               if (item.title?.toLowerCase().indexOf(filter) > -1) {
 938 |                 return true;
 939 |               }
 940 |               if (item.milestone?.title?.toLowerCase().indexOf(filter) > -1) {
 941 |                 return true;
 942 |               }
 943 |               if (
 944 |                 item.repository?.nameWithOwner?.toLowerCase().indexOf(filter) >
 945 |                 -1
 946 |               ) {
 947 |                 return true;
 948 |               }
 949 |               if (item.assignees?.nodes?.length > 0) {
 950 |                 for (const n of item.assignees.nodes) {
 951 |                   if (n?.login?.toLowerCase().indexOf(filter) > -1) {
 952 |                     return true;
 953 |                   }
 954 |                 }
 955 |               }
 956 |               if (item.labels?.nodes?.length > 0) {
 957 |                 for (const n of item.labels.nodes) {
 958 |                   if (n?.name?.toLowerCase().indexOf(filter) > -1) {
 959 |                     return true;
 960 |                   }
 961 |                 }
 962 |               }
 963 |             }
 964 |             if (item.kind === 'project') {
 965 |               return true;
 966 |             }
 967 |             return false;
 968 |           });
 969 |         });
 970 | 
 971 |       // Create tasks for each project item
 972 |       filteredProjectTree.forEach(item => {
 973 |         if (item.kind === 'issueOrPr') {
 974 |           // For issueOrPr, _ganttStart and _ganttDue must exists.
 975 |           data.push({
 976 |             id: item.id,
 977 |             text: `#${item.number} ${item.title}`,
 978 |             type: 'task',
 979 |             schedule: item._ganttSchedule,
 980 |             start_date: item._ganttStart,
 981 |             end_date: item._ganttDue,
 982 |             progress: item._ganttProgress || 0,
 983 |             parent: item.parentProject.id,
 984 |             readonly: !item.viewerCanUpdate,
 985 |             _src: item,
 986 |           });
 987 |         }
 988 |       });
 989 | 
 990 |       // Create tasks for each project itself.
 991 |       filteredProjectTree.forEach(item => {
 992 |         if (item.kind === 'project') {
 993 |           if (item._ganttStart && item._ganttDue) {
 994 |             // A self managed project, create it as a task. It has own
 995 |             data.push({
 996 |               id: item.id,
 997 |               text: item.name,
 998 |               type: 'task',
 999 |               open: item.open,
1000 |               readonly: true, // Do not allow editing project start time end time for now
1001 |               schedule: item._ganttSchedule,
1002 |               start_date: item._ganttStart,
1003 |               end_date: item._ganttDue,
1004 |               parent: item.parentProject.id,
1005 |               progress: item._ganttProgress || 0,
1006 |               _src: item,
1007 |             });
1008 |           } else {
1009 |             data.push({
1010 |               id: item.id,
1011 |               text: item.name,
1012 |               type: 'project',
1013 |               open: item.open,
1014 |               readonly: true,
1015 |               parent: item.parentProject?.id,
1016 |               progress: item._ganttProgress || 0,
1017 |               _src: item,
1018 |             });
1019 |           }
1020 |         }
1021 |       });
1022 | 
1023 |       gantt.clearAll();
1024 | 
1025 |       gantt.parse({ data, links: [] });
1026 |       gantt.showDate(new Date());
1027 | 
1028 |       gantt.addMarker({
1029 |         start_date: new Date(),
1030 |         text: 'Today',
1031 |         css: 'today',
1032 |       });
1033 | 
1034 |       forEach(milestones, milestone => {
1035 |         gantt.addMarker({
1036 |           start_date: moment(milestone.dueOn).valueOf(),
1037 |           text: milestone.title,
1038 |           css: 'normal',
1039 |         });
1040 |       });
1041 |     },
1042 |     async loadData() {
1043 |       // this.loadingAll = 2;
1044 | 
1045 |       let projects = [];
1046 |       if (this.$props.localPanelId) {
1047 |         const panel = this.panels[this.$props.localPanelId];
1048 |         if (!panel) {
1049 |           this.$buefy.dialog.alert(
1050 |             `Local panel ${this.$props.localPanelId} does not exist.`
1051 |           );
1052 |           return;
1053 |         }
1054 |         projects = Object.freeze(Object.values(panel.projects));
1055 |       } else {
1056 |         this.loadingAll = 1;
1057 |         projects = await utils.loadProjectsByPath(
1058 |           this.$props.path,
1059 |           this.$octoClient
1060 |         );
1061 |         this.loadingFinished = 1;
1062 |       }
1063 | 
1064 |       const projectTree = await this.$octoClient.recursiveLoadProjectTree(
1065 |         projects,
1066 |         () => this.loadingAll++,
1067 |         () => this.loadingFinished++
1068 |       );
1069 |       // console.log('projectTree', JSON.parse(JSON.stringify(projectTree)));
1070 |       // const projectTree = sortBy(require('./mock_items.json'), [
1071 |       //   'kind',
1072 |       //   'name',
1073 |       //   'content.state',
1074 |       //   'content.repository.nameWithOwner',
1075 |       //   'content.title',
1076 |       // ]);
1077 |       this.projectTree = projectTree;
1078 |       this.applyGanttFromProjects();
1079 |     },
1080 |     async loadIssues(issueIdArray) {
1081 |       // This function is used to re-fetch body before update, to avoid overriding contents.
1082 |       const r = [];
1083 |       const queryFrag = `
1084 |         id
1085 |         body
1086 |         viewerCanUpdate
1087 |       `;
1088 |       const resp = await this.$octoClient.request(
1089 |         `
1090 |         query loadIssues($ids: [ID!]!){
1091 |           issues: nodes(ids: $ids) {
1092 |             __typename
1093 |             ... on Issue {
1094 |               ${queryFrag}
1095 |             }
1096 |             ... on PullRequest {
1097 |               ${queryFrag}
1098 |             }
1099 |           }
1100 |           ${this.$octoClient.QUERY_FRAG_RATELIMIT}
1101 |         }
1102 |       `,
1103 |         {
1104 |           ids: issueIdArray,
1105 |         }
1106 |       );
1107 |       if (!resp || !resp.issues) {
1108 |         throw new Error('Invalid loadIssues response');
1109 |       }
1110 |       console.log('loadIssues rateLimit', resp.rateLimit);
1111 |       resp.issues.forEach(issue => {
1112 |         if (issue.viewerCanUpdate) {
1113 |           r.push(issue);
1114 |         }
1115 |       });
1116 |       return r;
1117 |     },
1118 |   },
1119 | };
1120 | </script>
1121 | 
1122 | <style>
1123 | @import '~dhtmlx-gantt/codebase/dhtmlxgantt.css';
1124 | </style>
1125 | 
1126 | <style lang="scss">
1127 | @import '@/variables.scss';
1128 | 
1129 | .gantt_marker {
1130 |   pointer-events: none;
1131 | 
1132 |   &.today {
1133 |     background-color: rgba($black, 0.8);
1134 |   }
1135 | 
1136 |   &.normal {
1137 |     background-color: rgba($orange, 0.6);
1138 |   }
1139 | }
1140 | 
1141 | .gantt_side_content.gantt_right {
1142 |   overflow: visible;
1143 | }
1144 | 
1145 | .gantt_task_line {
1146 |   border: 1px solid transparent;
1147 |   border-radius: 0;
1148 | 
1149 |   &.gantt_selected {
1150 |     box-shadow: none;
1151 |     border: 1px solid transparent;
1152 |   }
1153 | 
1154 |   &.kind-project {
1155 |     background-color: rgba(#722ed1, 0.7);
1156 |     .gantt_task_progress {
1157 |       background-color: #531dab;
1158 |     }
1159 |     // &.gantt_selected {
1160 |     //   border: 1px solid #444;
1161 |     // }
1162 |   }
1163 | 
1164 |   &.kind-task-beyond-complete {
1165 |     background-color: rgba(#1890ff, 0.7);
1166 |     // &.gantt_selected {
1167 |     //   border: 1px solid $blue;
1168 |     // }
1169 |     .gantt_task_progress {
1170 |       background-color: #1890ff;
1171 |     }
1172 |   }
1173 | 
1174 |   &.kind-task-beyond-schedule {
1175 |     background-color: rgba(#52c41a, 0.7);
1176 |     // &.gantt_selected {
1177 |     //   border: 1px solid $green;
1178 |     // }
1179 |     .gantt_task_progress {
1180 |       background-color: #389e0d;
1181 |     }
1182 |   }
1183 | 
1184 |   &.kind-task-on-schedule {
1185 |     background-color: rgba(#faad14, 0.7);
1186 |     // &.gantt_selected {
1187 |     //   border: 1px solid $orange;
1188 |     // }
1189 |     .gantt_task_progress {
1190 |       background-color: #d48806;
1191 |     }
1192 |   }
1193 | 
1194 |   &.kind-task-out-schedule {
1195 |     background-color: rgba(#f5222d, 0.7);
1196 |     // &.gantt_selected {
1197 |     //   border: 1px solid $red;
1198 |     // }
1199 |     .gantt_task_progress {
1200 |       background-color: #cf1322;
1201 |     }
1202 |   }
1203 | }
1204 | 
1205 | .gantt_container {
1206 |   font-family: inherit;
1207 | }
1208 | 
1209 | .gantt_tooltip {
1210 |   font-family: inherit;
1211 |   font-size: 0.8rem;
1212 | }
1213 | 
1214 | .gantt_tooltip .row {
1215 |   margin: 5px 0;
1216 | }
1217 | 
1218 | .gh-label {
1219 |   border-radius: 2em;
1220 |   padding: 2px 7px;
1221 |   line-height: 1.2;
1222 | }
1223 | </style>
1224 | 


--------------------------------------------------------------------------------