Refonte de l'UI des tableaux

2020-06-05 16:18:53 +02:00 · 2020-06-05 16:18:53 +02:00 · 832cca1c66
parent 94bfb77d87
commit 832cca1c66
8 changed files with 202 additions and 98 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -1162,22 +1162,6 @@
        }
      }
    },
-    "@babel/runtime-corejs2": {
-      "version": "7.7.4",
-      "resolved": "https://registry.npmjs.org/@babel/runtime-corejs2/-/runtime-corejs2-7.7.4.tgz",
-      "integrity": "sha512-hKNcmHQbBSJFnZ82ewYtWDZ3fXkP/l1XcfRtm7c8gHPM/DMecJtFFBEp7KMLZTuHwwb7RfemHdsEnd7L916Z6A==",
-      "requires": {
-        "core-js": "^2.6.5",
-        "regenerator-runtime": "^0.13.2"
-      },
-      "dependencies": {
-        "regenerator-runtime": {
-          "version": "0.13.3",
-          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.3.tgz",
-          "integrity": "sha512-naKIZz2GQ8JWh///G7L3X6LaQUAMp2lvb1rvwwsURe/VXwD6VMfr+/1NuNw3ag8v2kY1aQ/go5SNn79O9JU7yw=="
-        }
-      }
-    },
    "@babel/template": {
      "version": "7.7.0",
      "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.7.0.tgz",
@ -1259,11 +1243,11 @@
      "dev": true
    },
    "@lourenci/react-kanban": {
-      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/@lourenci/react-kanban/-/react-kanban-0.15.0.tgz",
-      "integrity": "sha512-/2XjB26iXcvpwDwlT3sz8/ptQ7QyTpMGlrPf1f02+V1Z4jdbVMo6Luz1sGlHe/TP68N8yz69/YT9qwqHZ6YYmQ==",
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/@lourenci/react-kanban/-/react-kanban-2.0.0.tgz",
+      "integrity": "sha512-ieNi7d/01wgT9t8kN7Z/RBubyZq9VvKXyU/5sj+UlrY8h4GPRNrN11jLV/ykg55lhyXGKgXDk3ObYurOfrmu3w==",
      "requires": {
-        "react-beautiful-dnd": "^11.0.0"
+        "react-beautiful-dnd": "^13.0.0"
      }
    },
    "@redux-saga/core": {
@ -2530,7 +2514,8 @@
    "core-js": {
      "version": "2.6.10",
      "resolved": "https://registry.npmjs.org/core-js/-/core-js-2.6.10.tgz",
-      "integrity": "sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA=="
+      "integrity": "sha512-I39t74+4t+zau64EN1fE5v2W31Adtc/REhzWN+gWRRXg6WH5qAsZm62DHpQ1+Yhe4047T55jvzz7MUqF/dBBlA==",
+      "dev": true
    },
    "core-js-compat": {
      "version": "3.4.1",
@ -2635,9 +2620,9 @@
      }
    },
    "css-box-model": {
-      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.0.tgz",
-      "integrity": "sha512-lri0br+jSNV0kkkiGEp9y9y3Njq2PmpqbeGWRFQJuZteZzY9iC9GZhQ8Y4WpPwM/2YocjHePxy14igJY7YKzkA==",
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
      "requires": {
        "tiny-invariant": "^1.0.6"
      }
@ -6201,18 +6186,32 @@
      }
    },
    "react-beautiful-dnd": {
-      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-11.0.5.tgz",
-      "integrity": "sha512-7llby9U+jIfkINcyxPHVWU0HFYzqxMemUYgGHsFsbx4fZo1n/pW6sYKYzhxGxR3Ap5HxqswcQkKUZX4uEUWhlw==",
+      "version": "13.0.0",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz",
+      "integrity": "sha512-87It8sN0ineoC3nBW0SbQuTFXM6bUqM62uJGY4BtTf0yzPl8/3+bHMWkgIe0Z6m8e+gJgjWxefGRVfpE3VcdEg==",
      "requires": {
-        "@babel/runtime-corejs2": "^7.4.5",
-        "css-box-model": "^1.1.2",
-        "memoize-one": "^5.0.4",
-        "raf-schd": "^4.0.0",
-        "react-redux": "^7.0.3",
-        "redux": "^4.0.1",
-        "tiny-invariant": "^1.0.4",
-        "use-memo-one": "^1.1.0"
+        "@babel/runtime": "^7.8.4",
+        "css-box-model": "^1.2.0",
+        "memoize-one": "^5.1.1",
+        "raf-schd": "^4.0.2",
+        "react-redux": "^7.1.1",
+        "redux": "^4.0.4",
+        "use-memo-one": "^1.1.1"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.10.2",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz",
+          "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "regenerator-runtime": {
+          "version": "0.13.5",
+          "resolved": "https://registry.npmjs.org/regenerator-runtime/-/regenerator-runtime-0.13.5.tgz",
+          "integrity": "sha512-ZS5w8CpKFinUzOwW3c83oPeVXoNsrLsaCoLtJvAClH135j/R77RuymhiSErhm2lKcwSCIpmvIWSbDkIfAqKQlA=="
+        }
      }
    },
    "react-dom": {
--- a/client/package.json
+++ b/client/package.json
@ -48,7 +48,7 @@
    "ts-loader": "^7.0.2"
  },
  "dependencies": {
-    "@lourenci/react-kanban": "^0.15.0",
+    "@lourenci/react-kanban": "^2.0.0",
    "bulma": "^0.7.2",
    "bulma-switch": "^2.0.0",
    "react": "^16.12.0",
--- a/client/src/components/BoardPage/BoardPage.tsx
+++ b/client/src/components/BoardPage/BoardPage.tsx
@ -1,7 +1,7 @@
 import React, { Fragment } from 'react';
 import { Page } from '../Page';
 import { connect, DispatchProp } from 'react-redux';
-import Board from '@lourenci/react-kanban';
+import Board, { addColumn } from '@lourenci/react-kanban';
 import { fetchBoards } from '../../store/actions/boards';
 import { createIssue } from '../../store/actions/issues';
 import { buildKanboard, moveCard } from '../../store/actions/kanboards';
@ -13,6 +13,7 @@ export interface BoardPageProps extends DispatchProp {
  board: any
  kanboard: any
 }
+
 export class BoardPage extends React.Component<BoardPageProps> {

  state = {
@ -24,6 +25,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
      project: ""
    },
    compactMode: true,
+    hasError: false,
  }

  onNewCardTitleChange: (evt: any) => void;
@ -41,19 +43,22 @@ export class BoardPage extends React.Component<BoardPageProps> {
    this.onNewCardSaveClick = this.onNewCardSaveClick.bind(this);
  }

+  componentDidCatch(error, errorInfo) {
+    // You can also log the error to an error reporting service
+    console.error(error, errorInfo);
+  }
+
  render() {
    const { board } = this.props;
    return (
      <Page title={`${board ? (board.title + ' - ') : ''}GenGitKan`}>
-        <div className="container is-fluid">
        {this.renderBoard()}
-        </div>
      </Page>
    );
  }

  renderBoard() {
-    const { kanboard } = this.props;
+    const { kanboard, board } = this.props;
    
    if (!kanboard) {
      return <Loader></Loader>
@ -61,29 +66,36 @@ export class BoardPage extends React.Component<BoardPageProps> {

    return (
      <Fragment>
-        <div className="is-clearfix has-margin-top-normal">
-          <div className="is-pulled-right">
-            <div className="field">
-              <input id="compactMode"
-                checked={this.state.compactMode}
-                onChange={this.onCompactModeChange.bind(this)}
-                type="checkbox"
-                className="switch is-rtl"
-                name="compactMode"
-                />
-              <label htmlFor="compactMode">Mode compact</label>
+        <nav className="navbar is-info">
+          <div className="container is-fluid">
+            <div className="navbar-start">
+              <div className="navbar-item">
+                {board.title}
              </div>
            </div>
+            <div className="navbar-end">
+              <a href={`#/boards/${board.id}/edit`} className="navbar-item">
+               <span className="icon">
+                 <i className="fa fa-edit fa-fw"></i>
+               </span>
+               <span>Modifier le tableau</span>
+              </a> 
            </div>
+          </div>
+        </nav>
+        <div className="container is-fluid">
          <div className="kanboard-container is-fullheight">
-          <Board disableLaneDrag={true}
+            <Board 
+              initialBoard={kanboard}
+              
              renderCard={this.renderCard.bind(this)}
-            renderLaneHeader={this.renderLaneHeader}
-            onCardDragEnd={this.onCardDragEnd.bind(this)}>
-            {kanboard}
-          </Board>
+              renderColumnHeader={this.renderLaneHeader.bind(this)}
+              onCardDragEnd={this.onCardDragEnd.bind(this)}
+              disableColumnDrag={true}
+            />
            { this.renderNewCardModal() }
          </div>
+        </div>
      </Fragment>
      
    );
@ -167,28 +179,39 @@ export class BoardPage extends React.Component<BoardPageProps> {
      <div className="kanboard-lane">
        <div className="level">
          <div className="level-left">
-            <h3 className="level-item is-size-3">{lane.title}</h3>
+            <div className="level-item">
+              <span className="tag is-primary is-light is-normal">{lane.cards.length}</span>
+            </div>
+            <h3 className="level-item is-size-5">
+              {lane.title}
+            </h3>
          </div>
          <div className="level-right">
-            <button className="button is-light level-item is-medium"
+            <button className="button is-light level-item is-small"
              onClick={this.onNewCardClick.bind(this, lane.id)}>
              <span className="icon">
                <i className="fas fa-plus" aria-hidden="true"></i>
              </span>
            </button>
+            <button className="button is-light level-item is-small"
+              onClick={this.onNewCardClick.bind(this, lane.id)}>
+              <span className="icon">
+                <i className="fas fa-chevron-left" aria-hidden="true"></i>
+              </span>
+            </button>
          </div>
        </div>
      </div>      
    )
  }

-  onCardDragEnd(source: any, dest: any) {
+  onCardDragEnd(b: any, card: any, source: any, dest: any) {
    const { board } = this.props;
    this.props.dispatch(moveCard(
      board.id,
-      source.fromLaneId,
+      source.fromColumnId,
      source.fromPosition,
-      dest.toLaneId,
+      dest.toColumnId,
      dest.toPosition
    ));
  }
--- a/client/src/components/BoardPage/IssueCard.tsx
+++ b/client/src/components/BoardPage/IssueCard.tsx
@ -16,43 +16,45 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {

    return (
      <div className="kanboard-card">
-        <div className={`box ${compact ? 'has-padding-small': ''}`}>
+        <div className="box has-padding-small is-radiusless">
          <div className="media">
+            <div className="media-content">
+              <div className="content">
+                <nav className="level">
+                  <div className="level-left">
+                    <div className="level-item">
+                      <a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
+                    </div>
+                    <div className="level-item">
+                      <a target="_blank" href={projectURL}>{card.project}</a>
+                    </div>
+                  </div>
+                  <div className="level-right">
                    {
-              card.issue.assignee && !compact ?
-              <div className="media-left">
-                <figure className="image is-64x64">
-                  <img src={card.issue.assignee.avatar_url} alt="Image" />
-                </figure>
+                      card.issue.assignee ?
+                        <div className="level-item">
                          <small>{`@${card.issue.assignee.login}`}</small>
                        </div>
                      : null
                    }
-            <div className="media-content">
-              <div className="content">
-                <p>
-                  <a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>&nbsp;
-                  { !compact && card.issue.milestone ? <small>{`- ${card.issue.milestone.title}`}</small> : null }
-                  { !compact ? <br /> : ' - ' }
-                  <span className="is-size-6">{card.issue.title}</span>
-                </p>
-              </div>
                  </div>
+                </nav>
+                <span>{card.issue.title}</span>
              </div>
              {
-            !compact ?
-            <div className="level is-mobile" style={{marginTop:'1rem'}}>
-              <div className="level-left">
-                <small className="level-item"><a href={projectURL}>{card.project}</a></small>
-              </div>
+                <nav className="level">
+                  <div className="level-left"></div>
                  <div className="level-right">
-                
+                    <div className="level-item is-size-7">
+                      {card.issue.milestone.title}
                    </div>
-            </div> :
-            null
+                  </div>
+                </nav>
              }
            </div>
          </div>
+        </div>
+      </div>
    );
  }
 }
--- a/client/src/sass/_all.scss
+++ b/client/src/sass/_all.scss
@ -1,4 +1,5 @@
@import 'bulma/bulma.sass';
+@import '../../node_modules/@lourenci/react-kanban/dist/styles.css';
@import 'bulma-switch/dist/css/bulma-switch.sass';
@import '_base.scss';
@import '_loader.scss';
--- a/client/src/sass/_kanboard.scss
+++ b/client/src/sass/_kanboard.scss
@ -44,6 +44,10 @@

    .kanboard-lane {
        margin-bottom: $size-small;
+        background: $white;
+        position: sticky;
+        position: -webkit-sticky;
+        top: 0;
    }
 }

@ -52,3 +56,78 @@
    align-items: center;
    width: 50% !important;
 }
+
+.react-kanban-board {
+    max-height: calc(100vh - calc(52px * 2));
+    overflow: hidden;
+    overflow-x: scroll;
+
+    scrollbar-color: $grey-lighter, #f1f1f1;
+    scrollbar-width: 5px;
+
+    &::-webkit-scrollbar {
+        width: 5px;
+        height: 5px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: $grey-lighter;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+        background: $green;
+    }
+}
+
+.react-kanban-column {
+    max-width: 305px;
+    min-width: 305px;
+    position: relative;
+
+    max-height: 100%;
+    overflow-x: hidden;
+    overflow-y: scroll;
+
+    scrollbar-color: $grey-lighter, #f1f1f1;
+    scrollbar-width: 5px;
+
+    &.minimized {
+        max-width: 30px;
+        min-width: 30px;
+    }
+
+    &::-webkit-scrollbar {
+        width: 5px;
+    }
+
+    /* Track */
+    &::-webkit-scrollbar-track {
+        background: #f1f1f1;
+    }
+
+    /* Handle */
+    &::-webkit-scrollbar-thumb {
+        background: $grey-lighter;
+    }
+
+    /* Handle on hover */
+    &::-webkit-scrollbar-thumb:hover {
+        background: $green;
+    }
+}
+
+.react-kanban-card__title {
+    position: sticky;
+    position: -webkit-sticky;
+}
+
+.react-kanban-column {
+    background: white !important;
+}
--- a/client/src/store/reducers/kanboards.ts
+++ b/client/src/store/reducers/kanboards.ts
@ -37,7 +37,7 @@ function handleMoveCard(state: any, action: any) {

  const kanboard = state.byID[boardID];

-  const lanes = [ ...kanboard.lanes ];
+  const lanes = [ ...kanboard.columns ];
  const fromLane = lanes[fromLaneID];
  const toLane = lanes[toLaneID];
  const card = fromLane.cards[fromPosition];
--- a/client/src/store/sagas/kanboards.ts
+++ b/client/src/store/sagas/kanboards.ts
@ -145,7 +145,7 @@ function createKanboard(board: Board, issues: any) {

  const kanboard = {
    id: board.id,
-    lanes: createKanboardLanes(board, issues),
+    columns: createKanboardLanes(board, issues),
  };
  
  return kanboard;