client/package-lock.json

@@ -1162,6 +1162,22 @@
         }
       }
     },
+    "@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",
@@ -1243,11 +1259,11 @@
       "dev": true
     },
     "@lourenci/react-kanban": {
-      "version": "2.0.0",
+      "version": "0.15.0",
-      "resolved": "https://registry.npmjs.org/@lourenci/react-kanban/-/react-kanban-2.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/@lourenci/react-kanban/-/react-kanban-0.15.0.tgz",
-      "integrity": "sha512-ieNi7d/01wgT9t8kN7Z/RBubyZq9VvKXyU/5sj+UlrY8h4GPRNrN11jLV/ykg55lhyXGKgXDk3ObYurOfrmu3w==",
+      "integrity": "sha512-/2XjB26iXcvpwDwlT3sz8/ptQ7QyTpMGlrPf1f02+V1Z4jdbVMo6Luz1sGlHe/TP68N8yz69/YT9qwqHZ6YYmQ==",
       "requires": {
-        "react-beautiful-dnd": "^13.0.0"
+        "react-beautiful-dnd": "^11.0.0"
       }
     },
     "@redux-saga/core": {
@@ -2514,8 +2530,7 @@
     "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",
@@ -2620,9 +2635,9 @@
       }
     },
     "css-box-model": {
-      "version": "1.2.1",
+      "version": "1.2.0",
-      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz",
+      "resolved": "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.0.tgz",
-      "integrity": "sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw==",
+      "integrity": "sha512-lri0br+jSNV0kkkiGEp9y9y3Njq2PmpqbeGWRFQJuZteZzY9iC9GZhQ8Y4WpPwM/2YocjHePxy14igJY7YKzkA==",
       "requires": {
         "tiny-invariant": "^1.0.6"
       }
@@ -6186,32 +6201,18 @@
       }
     },
     "react-beautiful-dnd": {
-      "version": "13.0.0",
+      "version": "11.0.5",
-      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.0.0.tgz",
+      "resolved": "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-11.0.5.tgz",
-      "integrity": "sha512-87It8sN0ineoC3nBW0SbQuTFXM6bUqM62uJGY4BtTf0yzPl8/3+bHMWkgIe0Z6m8e+gJgjWxefGRVfpE3VcdEg==",
+      "integrity": "sha512-7llby9U+jIfkINcyxPHVWU0HFYzqxMemUYgGHsFsbx4fZo1n/pW6sYKYzhxGxR3Ap5HxqswcQkKUZX4uEUWhlw==",
       "requires": {
-        "@babel/runtime": "^7.8.4",
+        "@babel/runtime-corejs2": "^7.4.5",
-        "css-box-model": "^1.2.0",
+        "css-box-model": "^1.1.2",
-        "memoize-one": "^5.1.1",
+        "memoize-one": "^5.0.4",
-        "raf-schd": "^4.0.2",
+        "raf-schd": "^4.0.0",
-        "react-redux": "^7.1.1",
+        "react-redux": "^7.0.3",
-        "redux": "^4.0.4",
+        "redux": "^4.0.1",
-        "use-memo-one": "^1.1.1"
+        "tiny-invariant": "^1.0.4",
-      },
+        "use-memo-one": "^1.1.0"
-      "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": {

client/package.json

@@ -48,7 +48,7 @@
     "ts-loader": "^7.0.2"
   },
   "dependencies": {
-    "@lourenci/react-kanban": "^2.0.0",
+    "@lourenci/react-kanban": "^0.15.0",
     "bulma": "^0.7.2",
     "bulma-switch": "^2.0.0",
     "react": "^16.12.0",

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, { addColumn } from '@lourenci/react-kanban';
+import Board from '@lourenci/react-kanban';
 import { fetchBoards } from '../../store/actions/boards';
 import { createIssue } from '../../store/actions/issues';
 import { buildKanboard, moveCard } from '../../store/actions/kanboards';
@@ -13,7 +13,6 @@ export interface BoardPageProps extends DispatchProp {
   board: any
   kanboard: any
 }
-
 export class BoardPage extends React.Component<BoardPageProps> {
 
   state = {
@@ -25,7 +24,6 @@ export class BoardPage extends React.Component<BoardPageProps> {
       project: ""
     },
     compactMode: true,
-    hasError: false,
   }
 
   onNewCardTitleChange: (evt: any) => void;
@@ -43,22 +41,19 @@ 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`}>
-        {this.renderBoard()}
+        <div className="container is-fluid">
+          {this.renderBoard()}
+        </div>
       </Page>
     );
   }
 
   renderBoard() {
-    const { kanboard, board } = this.props;
+    const { kanboard } = this.props;
     
     if (!kanboard) {
       return <Loader></Loader>
@@ -66,48 +61,28 @@ export class BoardPage extends React.Component<BoardPageProps> {
 
     return (
       <Fragment>
-        <nav className="navbar is-light">
+        <div className="is-clearfix has-margin-top-normal">
-          <div className="container is-fluid">
+          <div className="is-pulled-right">
-            <div className="navbar-start">
+            <div className="field">
-              <div className="navbar-item">
+              <input id="compactMode"
-                {board.title}
+                checked={this.state.compactMode}
-              </div>
+                onChange={this.onCompactModeChange.bind(this)}
-            </div>
+                type="checkbox"
-            <div className="navbar-end">
+                className="switch is-rtl"
-              <div className="navbar-item">
+                name="compactMode"
-
+                />
-              <div className="field">
+              <label htmlFor="compactMode">Mode compact</label>
-                <input id="compactMode"
-                  checked={this.state.compactMode}
-                  onChange={this.onCompactModeChange.bind(this)}
-                  type="checkbox"
-                  className="switch is-outlined is-success"
-                  name="compactMode"
-                  />
-                <label htmlFor="compactMode">Mode compact</label>
-              </div>
-              </div>
-              <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>
-        <div className="container is-fluid">
+        <div className="kanboard-container is-fullheight">
-          <div className="kanboard-container is-fullheight">
+          <Board disableLaneDrag={true}
-            <Board 
+            renderCard={this.renderCard.bind(this)}
-              renderCard={this.renderCard.bind(this)}
+            renderLaneHeader={this.renderLaneHeader}
-              renderColumnHeader={this.renderLaneHeader.bind(this)}
+            onCardDragEnd={this.onCardDragEnd.bind(this)}>
-              onCardDragEnd={this.onCardDragEnd.bind(this)}
+            {kanboard}
-              disableColumnDrag={true}
+          </Board>
-            >
+          { this.renderNewCardModal() }
-              {kanboard}
-            </Board>
-            { this.renderNewCardModal() }
-          </div>
         </div>
       </Fragment>
       
@@ -192,49 +167,28 @@ export class BoardPage extends React.Component<BoardPageProps> {
       <div className="kanboard-lane">
         <div className="level">
           <div className="level-left">
-            <div className="level-item">
+            <h3 className="level-item is-size-3">{lane.title}</h3>
-              <span className="tag is-primary is-light is-normal">{lane.cards.length}</span>
-            </div>
-            <button className="button is-light level-item is-small expand"
-              onClick={this.onMinimizeColumn}>
-              <span className="icon">
-                <i className="fas fa-chevron-right" aria-hidden="true"></i>
-              </span>
-            </button>
-            <h3 className="level-item is-size-5">
-              {lane.title}
-            </h3>
           </div>
-          <div className="level-right is-show-expand">
+          <div className="level-right">
-            <button className="button is-light level-item is-small"
+            <button className="button is-light level-item is-medium"
               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.onMinimizeColumn}>
-              <span className="icon">
-                <i className="fas fa-chevron-left" aria-hidden="true"></i>
-              </span>
-            </button>
           </div>
         </div>
       </div>      
     )
   }
 
-  onMinimizeColumn(e: any) {
+  onCardDragEnd(source: any, dest: any) {
-    e.currentTarget.closest('.react-kanban-column').classList.toggle('minimized');
-  }
-
-  onCardDragEnd(card: any, source: any, dest: any) {
     const { board } = this.props;
     this.props.dispatch(moveCard(
       board.id,
-      source.fromColumnId,
+      source.fromLaneId,
       source.fromPosition,
-      dest.toColumnId,
+      dest.toLaneId,
       dest.toPosition
     ));
   }

client/src/components/BoardPage/IssueCard.tsx

@@ -16,50 +16,41 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
 
     return (
       <div className="kanboard-card">
-        <div className="box has-padding-small is-radiusless">
+        <div className={`box ${compact ? 'has-padding-small': ''}`}>
           <div className="media">
+            {
+              card.issue.assignee && !compact ?
+              <div className="media-left">
+                <figure className="image is-64x64">
+                  <img src={card.issue.assignee.avatar_url} alt="Image" />
+                </figure>
+                <small>{`@${card.issue.assignee.login}`}</small>
+              </div>
+              : null
+            }
             <div className="media-content">
               <div className="content">
-                { !compact && 
+                <p>
-                  <nav className="level">
+                  <a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>&nbsp;
-                    <div className="level-left">
+                  { !compact && card.issue.milestone ? <small>{`- ${card.issue.milestone.title}`}</small> : null }
-                      <div className="level-item">
+                  { !compact ? <br /> : ' - ' }
-                        <a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
+                  <span className="is-size-6">{card.issue.title}</span>
-                      </div>
+                </p>
-                      { !compact && 
-                        <div className="level-item">
-                          <a target="_blank" href={projectURL}>{card.project}</a>
-                        </div>
-                      }
-                    </div>
-                    <div className="level-right">
-                      {
-                        card.issue.assignee && !compact ?
-                          <div className="level-item">
-                            <small>{`@${card.issue.assignee.login}`}</small>
-                          </div>
-                        : null
-                      }
-                    </div>
-                  </nav>
-                }
-                { compact &&
-                  <a target="_blank" className="mr-1" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
-                }
-                <span>{card.issue.title ? card.issue.title : ''}</span>
               </div>
-              { !compact &&
-                <nav className="level">
-                  <div className="level-left"></div>
-                  <div className="level-right">
-                    <div className="level-item is-size-7">
-                      {card.issue.milestone ? card.issue.milestone.title : ''}
-                    </div>
-                  </div>
-                </nav>
-              }
             </div>
           </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>
+              <div className="level-right">
+                
+              </div>
+            </div> :
+            null
+          }
         </div>
       </div>
     );

client/src/sass/_all.scss

@@ -1,6 +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';
-@import '_kanboard.scss';
+@import '_kanboard.scss';

client/src/sass/_base.scss

@@ -18,8 +18,4 @@ html, body {
 #app {
     display: flex;
     flex-direction: column;
-}
-
-.mr-1 {
-    margin-right: 5px;
 }

client/src/sass/_kanboard.scss

@@ -44,12 +44,6 @@
 
     .kanboard-lane {
         margin-bottom: $size-small;
-        background: $white;
-        top: 0;
-
-        .expand {
-            display: none;
-        }
     }
 }
 
@@ -57,142 +51,4 @@
     justify-content: center;
     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 {
-    transition: width ease .2s;
-    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;
-
-    .kanboard-card {
-        display: block;
-    }
-
-    &.minimized {
-        max-width: 70px;
-        min-width: 70px;
-        
-        writing-mode: vertical-rl;
-        text-orientation: sideways-right;
-
-        
-
-        .level-item {
-            margin-right: 0;
-        }
-
-        .level-left {
-            margin-right: 0;
-        }
-
-        .level-right.is-show-expand {
-            display: none;
-        }
-
-        .kanboard-lane {
-            /*margin-right: -1em;*/
-
-            h3 {
-                margin-top: .5em;
-                /*margin-right: -.5em;*/
-            }
-
-            .tag {
-                writing-mode: horizontal-tb;
-            }
-
-            .expand {
-                display: block !important;
-                margin-top: .5em;
-            }
-        }
-
-        .kanboard-card {
-            display: none;
-        }
-        
-    }
-    
-
-    &::-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;
-}
-
-
-.kanboard-card {
-    overflow-wrap: break-word;
-
-    a {
-        display: inline-block;
-    }
-
-    .level {
-        margin-bottom: 0;
-    }
-
-    .level-item {
-        max-width: 100%;
-    }
 }

client/src/store/reducers/kanboards.ts

@@ -37,22 +37,22 @@ function handleMoveCard(state: any, action: any) {
 
   const kanboard = state.byID[boardID];
 
-  const columns = [ ...kanboard.columns ];
+  const lanes = [ ...kanboard.lanes ];
-  const fromLane = columns[fromLaneID];
+  const fromLane = lanes[fromLaneID];
-  const toLane = columns[toLaneID];
+  const toLane = lanes[toLaneID];
   const card = fromLane.cards[fromPosition];
 
   const fromCards = [ ...fromLane.cards ];
   if (fromLaneID !== toLaneID) {
     fromCards.splice(fromPosition, 1);
-    columns[fromLaneID] = {
+    lanes[fromLaneID] = {
       ...fromLane,
       cards: fromCards,
     };
   
     const toCards = [ ...toLane.cards ];
     toCards.splice(toPosition, 0, card);
-    columns[toLaneID] = {
+    lanes[toLaneID] = {
       ...toLane,
       cards: toCards,
     };
@@ -67,7 +67,7 @@ function handleMoveCard(state: any, action: any) {
       ...state.byID,
       [boardID]: {
         ...state.byID[boardID],
-        columns,
+        lanes,
       },
     }
   };

client/src/store/sagas/kanboards.ts

@@ -22,7 +22,7 @@ export function* moveCardSaga(action: any) {
     }
   });
 
-  const toLane = kanboard.columns[toLaneID];
+  const toLane = kanboard.lanes[toLaneID];
   const card = toLane.cards[toPosition];
 
   if (!card) return;
@@ -145,7 +145,7 @@ function createKanboard(board: Board, issues: any) {
 
   const kanboard = {
     id: board.id,
-    columns: createKanboardLanes(board, issues),
+    lanes: createKanboardLanes(board, issues),
   };
   
   return kanboard;