Merge pull request 'Prise en compte de la pagination sur la récupération des projets' (#44) from feature/fix-projects-fetch into develop

Reviewed-on: #44

client/src/components/BoardPage/BoardPage.tsx

@@ -66,7 +66,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
 
     return (
       <Fragment>
-        <nav className="navbar is-info">
+        <nav className="navbar is-light">
           <div className="container is-fluid">
             <div className="navbar-start">
               <div className="navbar-item">
@@ -74,6 +74,19 @@ export class BoardPage extends React.Component<BoardPageProps> {
               </div>
             </div>
             <div className="navbar-end">
+              <div className="navbar-item">
+
+              <div className="field">
+                <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>
@@ -86,13 +99,13 @@ export class BoardPage extends React.Component<BoardPageProps> {
         <div className="container is-fluid">
           <div className="kanboard-container is-fullheight">
             <Board 
-              initialBoard={kanboard}
-              
               renderCard={this.renderCard.bind(this)}
               renderColumnHeader={this.renderLaneHeader.bind(this)}
               onCardDragEnd={this.onCardDragEnd.bind(this)}
               disableColumnDrag={true}
-            />
+            >
+              {kanboard}
+            </Board>
             { this.renderNewCardModal() }
           </div>
         </div>
@@ -182,17 +195,17 @@ export class BoardPage extends React.Component<BoardPageProps> {
             <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>
             <button className="button is-light level-item is-small expand"
-              onClick={(e) => { console.log(e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode.classList.toggle('minimized'))}}>
+              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">
+          <div className="level-right is-show-expand">
             <button className="button is-light level-item is-small"
               onClick={this.onNewCardClick.bind(this, lane.id)}>
               <span className="icon">
@@ -200,7 +213,7 @@ export class BoardPage extends React.Component<BoardPageProps> {
               </span>
             </button>
             <button className="button is-light level-item is-small"
-              onClick={(e) => { console.log(e.currentTarget.parentNode.parentNode.parentNode.parentNode.parentNode.classList.toggle('minimized'))}}>
+              onClick={this.onMinimizeColumn}>
               <span className="icon">
                 <i className="fas fa-chevron-left" aria-hidden="true"></i>
               </span>
@@ -211,7 +224,11 @@ export class BoardPage extends React.Component<BoardPageProps> {
     )
   }
 
-  onCardDragEnd(b: any, card: any, source: any, dest: any) {
+  onMinimizeColumn(e: 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,

client/src/components/BoardPage/IssueCard.tsx

@@ -20,28 +20,35 @@ export class IssueCard extends React.PureComponent<IssueCardProps> {
           <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 && 
+                  <nav className="level">
+                    <div className="level-left">
+                      <div className="level-item">
+                        <a target="_blank" href={issueURL}><strong>{`#${card.issue.number}`}</strong></a>
+                      </div>
+                      { !compact && 
                         <div className="level-item">
-                          <small>{`@${card.issue.assignee.login}`}</small>
+                          <a target="_blank" href={projectURL}>{card.project}</a>
                         </div>
-                      : null
-                    }
-                  </div>
-                </nav>
+                      }
+                    </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">

client/src/sass/_base.scss

@@ -19,3 +19,7 @@ html, body {
     display: flex;
     flex-direction: column;
 }
+
+.mr-1 {
+    margin-right: 5px;
+}

client/src/sass/_kanboard.scss

@@ -101,23 +101,41 @@
     scrollbar-color: $grey-lighter, #f1f1f1;
     scrollbar-width: 5px;
 
+    .kanboard-card {
+        display: block;
+    }
+
     &.minimized {
-        max-width: 40px;
-        min-width: 40px;
+        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;
+            /*margin-right: -1em;*/
 
             h3 {
                 margin-top: .5em;
-                margin-right: -.5em;
+                /*margin-right: -.5em;*/
             }
 
             .tag {
-                margin-right: -1em;
+                writing-mode: horizontal-tb;
             }
 
             .expand {
@@ -126,8 +144,13 @@
             }
         }
 
+        .kanboard-card {
+            display: none;
+        }
+        
     }
     
+
     &::-webkit-scrollbar {
         width: 5px;
     }
@@ -156,3 +179,20 @@
 .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 lanes = [ ...kanboard.columns ];
-  const fromLane = lanes[fromLaneID];
-  const toLane = lanes[toLaneID];
+  const columns = [ ...kanboard.columns ];
+  const fromLane = columns[fromLaneID];
+  const toLane = columns[toLaneID];
   const card = fromLane.cards[fromPosition];
 
   const fromCards = [ ...fromLane.cards ];
   if (fromLaneID !== toLaneID) {
     fromCards.splice(fromPosition, 1);
-    lanes[fromLaneID] = {
+    columns[fromLaneID] = {
       ...fromLane,
       cards: fromCards,
     };
   
     const toCards = [ ...toLane.cards ];
     toCards.splice(toPosition, 0, card);
-    lanes[toLaneID] = {
+    columns[toLaneID] = {
       ...toLane,
       cards: toCards,
     };
@@ -67,7 +67,7 @@ function handleMoveCard(state: any, action: any) {
       ...state.byID,
       [boardID]: {
         ...state.byID[boardID],
-        lanes,
+        columns,
       },
     }
   };

client/src/store/sagas/kanboards.ts

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

client/src/store/sagas/projects.ts

@@ -3,10 +3,18 @@ import { FETCH_PROJECTS_SUCCESS, FETCH_PROJECTS_FAILURE } from '../actions/proje
 import { gitea } from '../../util/gitea';
 
 export function* fetchProjectsSaga() {
-
-  let projects;
+  let projects = [];
   try {
-    projects = yield call(gitea.fetchUserProjects.bind(gitea))
+    let page = 1;
+    while(true) {
+      let pageProjects = yield call(gitea.fetchUserProjects.bind(gitea), page);
+      if (pageProjects.length === 0) {
+        break;
+      }
+      projects.push(...pageProjects);
+      page++;
+    }
+    
   } catch(error) {
     yield put({ type: FETCH_PROJECTS_FAILURE, error });
     return;

client/src/util/gitea.ts

@@ -16,8 +16,8 @@ export class GiteaClient {
     ;
   }
 
-  fetchUserProjects() {
-    return fetch(`/gitea/api/v1/user/repos`)
+  fetchUserProjects(page = 1) {
+    return fetch(`/gitea/api/v1/user/repos?page=${page}`)
       .then(this.assertAuthorization)
       .then(this.assertOk)
       .then(res => res.json())