Compare commits

...

16 Commits

Author SHA1 Message Date
wpetit 0af54a0d52 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
2021-04-02 10:57:23 +02:00
wpetit d8dcf636ea Prise en compte de la pagination sur la récupération des projets 2021-04-02 10:54:49 +02:00
wpetit 6bb8afd914 Merge branch 'issue-35' of wpetit/gengitkan into develop 2020-06-17 11:36:21 +02:00
Benjamin Gaudé 3eb96fc75e Amelioration affichage colonnes fermees 2020-06-17 11:33:09 +02:00
Benjamin Gaudé d6597270dd Fixe erreur lors du deplacement d'un ticket d'une colonne a une autre 2020-06-17 11:15:55 +02:00
Benjamin Gaudé fbad143bed Factorisation de l'ouverture/fermeture d'une colonne 2020-06-16 11:31:11 +02:00
Benjamin Gaudé e3459d136e Ajout mode compacté 2020-06-16 11:23:57 +02:00
Benjamin Gaudé fe0e2667a0 Correction affichage issue ajouter depuis l'UI 2020-06-16 10:54:11 +02:00
Benjamin Gaudé 0e93e7c52f Permettre la réduction des colonnes d'un tableau 2020-06-05 17:14:55 +02:00
Benjamin Gaudé 832cca1c66 Refonte de l'UI des tableaux 2020-06-05 16:18:53 +02:00
wpetit 94bfb77d87 Merge branch 'issue-31' of wpetit/gengitkan into develop 2020-06-05 10:34:47 +02:00
Benjamin Gaudé 5a677d2491 Ajout commande d'installation des dépendances client #31 2020-06-05 10:33:36 +02:00
wpetit fbb2b3f8da Ajout d'une redirection automatique sur la page "referer" en cas de
perte de session
2020-05-19 22:22:37 +02:00
wpetit 44182fd1cd Modification nom cookie 2020-05-19 22:22:24 +02:00
wpetit 4e9298f5b6 Filtrage des PRs de la liste des issues 2020-05-19 17:21:46 +02:00
wpetit 9dce43fd58 Intégration de github.com/zalmoxisus/redux-devtools-extension 2020-05-19 17:20:31 +02:00
19 changed files with 360 additions and 114 deletions

View File

@ -9,6 +9,7 @@
### Procédure
```bash
cd client && npm install # Installation des dépendances client
make watch # Surveiller les modifications sur le sources et compiler/démarrer le serveur
```

View File

@ -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": {

View File

@ -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",

View File

@ -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>
{this.renderBoard()}
</Page>
);
}
renderBoard() {
const { kanboard } = this.props;
const { kanboard, board } = this.props;
if (!kanboard) {
return <Loader></Loader>
@ -61,28 +66,48 @@ 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-light">
<div className="container is-fluid">
<div className="navbar-start">
<div className="navbar-item">
{board.title}
</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>
</span>
<span>Modifier le tableau</span>
</a>
</div>
</div>
</div>
<div className="kanboard-container is-fullheight">
<Board disableLaneDrag={true}
renderCard={this.renderCard.bind(this)}
renderLaneHeader={this.renderLaneHeader}
onCardDragEnd={this.onCardDragEnd.bind(this)}>
{kanboard}
</Board>
{ this.renderNewCardModal() }
</nav>
<div className="container is-fluid">
<div className="kanboard-container is-fullheight">
<Board
renderCard={this.renderCard.bind(this)}
renderColumnHeader={this.renderLaneHeader.bind(this)}
onCardDragEnd={this.onCardDragEnd.bind(this)}
disableColumnDrag={true}
>
{kanboard}
</Board>
{ this.renderNewCardModal() }
</div>
</div>
</Fragment>
@ -167,28 +192,49 @@ 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>
<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">
<button className="button is-light level-item is-medium"
<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">
<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>
)
}
onCardDragEnd(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,
source.fromLaneId,
source.fromColumnId,
source.fromPosition,
dest.toLaneId,
dest.toColumnId,
dest.toPosition
));
}

View File

@ -16,41 +16,50 @@ 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">
{
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">
<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>
{ !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">
<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>
);

View File

@ -1,5 +1,6 @@
@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';

View File

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

View File

@ -44,6 +44,12 @@
.kanboard-lane {
margin-bottom: $size-small;
background: $white;
top: 0;
.expand {
display: none;
}
}
}
@ -51,4 +57,142 @@
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%;
}
}

View File

@ -37,22 +37,22 @@ function handleMoveCard(state: any, action: any) {
const kanboard = state.byID[boardID];
const lanes = [ ...kanboard.lanes ];
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,
},
}
};

View File

@ -1,9 +1,11 @@
import { GiteaUnauthorizedError } from "../../util/gitea";
import { put } from 'redux-saga/effects';
import { logout } from '../actions/logout';
import { saveReferer } from "../../util/referer";
export function* failuresSaga(action) {
if (action.error instanceof GiteaUnauthorizedError) {
saveReferer();
yield put(logout());
}
}

View File

@ -18,7 +18,7 @@ export function* fetchIssuesSaga(action: any) {
if (pageIssues.length === 0) {
break;
}
issues.push(...pageIssues);
issues.push(...pageIssues.filter(issue => issue.pull_request === null));
page++;
}

View File

@ -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;
@ -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;

View File

@ -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;

View File

@ -0,0 +1,9 @@
import { hasReferer, getReferer, clearReferer } from '../../util/referer';
export function* navigateToRefererSaga() {
if (!hasReferer()) return;
const referer = getReferer();
console.log("Redirecting to referer", referer);
clearReferer();
window.location.hash = referer;
}

View File

@ -10,9 +10,11 @@ import { LOGOUT_REQUEST, LOGOUT_SUCCESS } from '../actions/logout';
import { logoutSaga, logoutSuccessSaga } from './logout';
import { BUILD_KANBOARD_REQUEST, MOVE_CARD } from '../actions/kanboards';
import { buildKanboardSaga, moveCardSaga, refreshKanboardSaga } from './kanboards';
import { navigateToRefererSaga } from './referer';
export function* rootSaga() {
yield all([
navigateToRefererSaga(),
takeEvery(patternFromRegExp(/^.*_FAILURE/), failuresSaga),
takeLatest(FETCH_BOARDS_REQUEST, fetchBoardsSaga),
takeLatest(BUILD_KANBOARD_REQUEST, buildKanboardSaga),

View File

@ -1,4 +1,4 @@
import { createStore, applyMiddleware } from 'redux'
import { createStore, applyMiddleware, compose } from 'redux'
import createSagaMiddleware from 'redux-saga'
import { rootReducer } from './reducers/root'
import { rootSaga } from './sagas/root'
@ -14,6 +14,8 @@ if (process.env.NODE_ENV !== 'production') {
reduxMiddlewares.push(loggerMiddleware);
}
const composeEnhancers = (window as any).__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose;
// create the saga middleware
const sagaMiddleware = createSagaMiddleware()
reduxMiddlewares.push(sagaMiddleware);
@ -21,7 +23,7 @@ reduxMiddlewares.push(sagaMiddleware);
// mount it on the Store
export const store = createStore(
rootReducer,
applyMiddleware(...reduxMiddlewares)
composeEnhancers(applyMiddleware(...reduxMiddlewares)),
)
// then run the saga

View File

@ -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())

View File

@ -0,0 +1,19 @@
const localStorage = window.localStorage;
const refererKey = 'referer';
export function getReferer() {
return localStorage.getItem(refererKey);
}
export function saveReferer() {
console.log("Saving referer", window.location.hash);
localStorage.setItem(refererKey, window.location.hash);
}
export function hasReferer() {
return !!getReferer();
}
export function clearReferer() {
localStorage.removeItem(refererKey);
}

View File

@ -28,7 +28,7 @@ func getServiceContainer(conf *config.Config) (*service.Container, error) {
ctn.Provide(
session.ServiceName,
gorilla.ServiceProvider("gitea-kan", cookieStore),
gorilla.ServiceProvider("gengitkan", cookieStore),
)
// Create and expose config service provider