mirror of
https://github.com/plankanban/planka.git
synced 2025-07-18 20:59:44 +02:00
parent
c880a72f02
commit
948485c861
20 changed files with 537 additions and 89 deletions
|
@ -1,4 +1,5 @@
|
|||
import socket from './socket';
|
||||
import http from './http';
|
||||
import { transformCard } from './cards';
|
||||
import { transformAttachment } from './attachments';
|
||||
|
||||
|
@ -7,6 +8,9 @@ import { transformAttachment } from './attachments';
|
|||
const createBoard = (projectId, data, headers) =>
|
||||
socket.post(`/projects/${projectId}/boards`, data, headers);
|
||||
|
||||
const createBoardWithImport = (projectId, data, requestId, headers) =>
|
||||
http.post(`/projects/${projectId}/boards?requestId=${requestId}`, data, headers);
|
||||
|
||||
const getBoard = (id, headers) =>
|
||||
socket.get(`/boards/${id}`, undefined, headers).then((body) => ({
|
||||
...body,
|
||||
|
@ -23,6 +27,7 @@ const deleteBoard = (id, headers) => socket.delete(`/boards/${id}`, undefined, h
|
|||
|
||||
export default {
|
||||
createBoard,
|
||||
createBoardWithImport,
|
||||
getBoard,
|
||||
updateBoard,
|
||||
deleteBoard,
|
||||
|
|
|
@ -1,70 +0,0 @@
|
|||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Form } from 'semantic-ui-react';
|
||||
import { withPopup } from '../../lib/popup';
|
||||
import { Input, Popup } from '../../lib/custom-ui';
|
||||
|
||||
import { useForm } from '../../hooks';
|
||||
|
||||
import styles from './AddPopup.module.scss';
|
||||
|
||||
const AddStep = React.memo(({ onCreate, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const [data, handleFieldChange] = useForm({
|
||||
name: '',
|
||||
});
|
||||
|
||||
const nameField = useRef(null);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
const cleanData = {
|
||||
...data,
|
||||
type: 'kanban',
|
||||
name: data.name.trim(),
|
||||
};
|
||||
|
||||
if (!cleanData.name) {
|
||||
nameField.current.select();
|
||||
return;
|
||||
}
|
||||
|
||||
onCreate(cleanData);
|
||||
onClose();
|
||||
}, [onCreate, onClose, data]);
|
||||
|
||||
useEffect(() => {
|
||||
nameField.current.focus();
|
||||
}, []);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header>
|
||||
{t('common.createBoard', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Input
|
||||
fluid
|
||||
ref={nameField}
|
||||
name="name"
|
||||
value={data.name}
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
<Button positive content={t('action.createBoard')} />
|
||||
</Form>
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
AddStep.propTypes = {
|
||||
onCreate: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default withPopup(AddStep);
|
|
@ -1,5 +0,0 @@
|
|||
:global(#app) {
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
}
|
116
client/src/components/Boards/AddPopup/AddPopup.jsx
Executable file
116
client/src/components/Boards/AddPopup/AddPopup.jsx
Executable file
|
@ -0,0 +1,116 @@
|
|||
import React, { useCallback, useEffect, useRef } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button, Form, Icon } from 'semantic-ui-react';
|
||||
import { useDidUpdate, useToggle } from '../../../lib/hooks';
|
||||
import { withPopup } from '../../../lib/popup';
|
||||
import { Input, Popup } from '../../../lib/custom-ui';
|
||||
|
||||
import { useForm, useSteps } from '../../../hooks';
|
||||
import ImportStep from './ImportStep';
|
||||
|
||||
import styles from './AddPopup.module.scss';
|
||||
|
||||
const StepTypes = {
|
||||
IMPORT: 'IMPORT',
|
||||
};
|
||||
|
||||
const AddStep = React.memo(({ onCreate, onClose }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const [data, handleFieldChange, setData] = useForm({
|
||||
name: '',
|
||||
import: null,
|
||||
});
|
||||
|
||||
const [step, openStep, handleBack] = useSteps();
|
||||
const [focusNameFieldState, focusNameField] = useToggle();
|
||||
|
||||
const nameField = useRef(null);
|
||||
|
||||
const handleImportSelect = useCallback(
|
||||
(nextImport) => {
|
||||
setData((prevData) => ({
|
||||
...prevData,
|
||||
import: nextImport,
|
||||
}));
|
||||
},
|
||||
[setData],
|
||||
);
|
||||
|
||||
const handleImportBack = useCallback(() => {
|
||||
handleBack();
|
||||
focusNameField();
|
||||
}, [handleBack, focusNameField]);
|
||||
|
||||
const handleSubmit = useCallback(() => {
|
||||
const cleanData = {
|
||||
...data,
|
||||
type: 'kanban',
|
||||
name: data.name.trim(),
|
||||
};
|
||||
|
||||
if (!cleanData.name) {
|
||||
nameField.current.select();
|
||||
return;
|
||||
}
|
||||
|
||||
onCreate(cleanData);
|
||||
onClose();
|
||||
}, [onClose, data, onCreate]);
|
||||
|
||||
const handleImportClick = useCallback(() => {
|
||||
openStep(StepTypes.IMPORT);
|
||||
}, [openStep]);
|
||||
|
||||
useEffect(() => {
|
||||
nameField.current.focus();
|
||||
}, []);
|
||||
|
||||
useDidUpdate(() => {
|
||||
nameField.current.focus();
|
||||
}, [focusNameFieldState]);
|
||||
|
||||
if (step && step.type === StepTypes.IMPORT) {
|
||||
return <ImportStep onSelect={handleImportSelect} onBack={handleImportBack} />;
|
||||
}
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header>
|
||||
{t('common.createBoard', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<Form onSubmit={handleSubmit}>
|
||||
<Input
|
||||
fluid
|
||||
ref={nameField}
|
||||
name="name"
|
||||
value={data.name}
|
||||
className={styles.field}
|
||||
onChange={handleFieldChange}
|
||||
/>
|
||||
<div className={styles.controls}>
|
||||
<Button positive content={t('action.createBoard')} className={styles.createButton} />
|
||||
<Button type="button" className={styles.importButton} onClick={handleImportClick}>
|
||||
<Icon
|
||||
name={data.import ? data.import.type : 'arrow down'}
|
||||
className={styles.importButtonIcon}
|
||||
/>
|
||||
{data.import ? data.import.file.name : t('action.import')}
|
||||
</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
AddStep.propTypes = {
|
||||
onCreate: PropTypes.func.isRequired,
|
||||
onClose: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default withPopup(AddStep);
|
42
client/src/components/Boards/AddPopup/AddPopup.module.scss
Normal file
42
client/src/components/Boards/AddPopup/AddPopup.module.scss
Normal file
|
@ -0,0 +1,42 @@
|
|||
:global(#app) {
|
||||
.controls {
|
||||
display: flex;
|
||||
max-width: 280px;
|
||||
|
||||
@media only screen and (max-width: 767px) {
|
||||
max-width: 226px;
|
||||
}
|
||||
}
|
||||
|
||||
.createButton {
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.field {
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
.importButton {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #6b808c;
|
||||
font-weight: normal;
|
||||
margin-left: auto;
|
||||
margin-right: 0;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
text-decoration: underline;
|
||||
text-overflow: ellipsis;
|
||||
transition: none;
|
||||
white-space: nowrap;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #092d42;
|
||||
}
|
||||
}
|
||||
|
||||
.importButtonIcon {
|
||||
text-decoration: none;
|
||||
}
|
||||
}
|
51
client/src/components/Boards/AddPopup/ImportStep.jsx
Normal file
51
client/src/components/Boards/AddPopup/ImportStep.jsx
Normal file
|
@ -0,0 +1,51 @@
|
|||
import React, { useCallback } from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Button } from 'semantic-ui-react';
|
||||
import { FilePicker, Popup } from '../../../lib/custom-ui';
|
||||
|
||||
import styles from './ImportStep.module.scss';
|
||||
|
||||
const ImportStep = React.memo(({ onSelect, onBack }) => {
|
||||
const [t] = useTranslation();
|
||||
|
||||
const handleFileSelect = useCallback(
|
||||
(type, file) => {
|
||||
onSelect({
|
||||
type,
|
||||
file,
|
||||
});
|
||||
|
||||
onBack();
|
||||
},
|
||||
[onSelect, onBack],
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Popup.Header onBack={onBack}>
|
||||
{t('common.importBoard', {
|
||||
context: 'title',
|
||||
})}
|
||||
</Popup.Header>
|
||||
<Popup.Content>
|
||||
<FilePicker onSelect={(file) => handleFileSelect('trello', file)} accept=".json">
|
||||
<Button
|
||||
fluid
|
||||
type="button"
|
||||
icon="trello"
|
||||
content={t('common.fromTrello')}
|
||||
className={styles.button}
|
||||
/>
|
||||
</FilePicker>
|
||||
</Popup.Content>
|
||||
</>
|
||||
);
|
||||
});
|
||||
|
||||
ImportStep.propTypes = {
|
||||
onSelect: PropTypes.func.isRequired,
|
||||
onBack: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
export default ImportStep;
|
17
client/src/components/Boards/AddPopup/ImportStep.module.scss
Normal file
17
client/src/components/Boards/AddPopup/ImportStep.module.scss
Normal file
|
@ -0,0 +1,17 @@
|
|||
:global(#app) {
|
||||
.button {
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
color: #6b808c;
|
||||
font-weight: normal;
|
||||
margin-top: 8px;
|
||||
padding: 6px 11px;
|
||||
text-align: left;
|
||||
transition: none;
|
||||
|
||||
&:hover {
|
||||
background: rgba(9, 30, 66, 0.08);
|
||||
color: #092d42;
|
||||
}
|
||||
}
|
||||
}
|
3
client/src/components/Boards/AddPopup/index.js
Normal file
3
client/src/components/Boards/AddPopup/index.js
Normal file
|
@ -0,0 +1,3 @@
|
|||
import AddPopup from './AddPopup';
|
||||
|
||||
export default AddPopup;
|
|
@ -7,10 +7,11 @@ const createBoardInCurrentProject = (data) => ({
|
|||
},
|
||||
});
|
||||
|
||||
const handleBoardCreate = (board) => ({
|
||||
const handleBoardCreate = (board, requestId) => ({
|
||||
type: EntryActionTypes.BOARD_CREATE_HANDLE,
|
||||
payload: {
|
||||
board,
|
||||
requestId,
|
||||
},
|
||||
});
|
||||
|
||||
|
|
|
@ -92,8 +92,10 @@ export default {
|
|||
filterByLabels_title: 'Filter By Labels',
|
||||
filterByMembers_title: 'Filter By Members',
|
||||
fromComputer_title: 'From Computer',
|
||||
fromTrello: 'From Trello',
|
||||
general: 'General',
|
||||
hours: 'Hours',
|
||||
importBoard_title: 'Import Board',
|
||||
invalidCurrentPassword: 'Invalid current password',
|
||||
labels: 'Labels',
|
||||
language: 'Language',
|
||||
|
@ -201,6 +203,7 @@ export default {
|
|||
editTitle_title: 'Edit Title',
|
||||
editUsername_title: 'Edit Username',
|
||||
hideDetails: 'Hide details',
|
||||
import: 'Import',
|
||||
leaveBoard: 'Leave board',
|
||||
leaveProject: 'Leave project',
|
||||
logOut_title: 'Log Out',
|
||||
|
|
|
@ -125,11 +125,7 @@ export default class extends Model {
|
|||
break;
|
||||
case ActionTypes.BOARD_CREATE__SUCCESS:
|
||||
Board.withId(payload.localId).delete();
|
||||
|
||||
Board.upsert({
|
||||
...payload.board,
|
||||
isFetching: false,
|
||||
});
|
||||
Board.upsert(payload.board);
|
||||
|
||||
break;
|
||||
case ActionTypes.BOARD_FETCH__SUCCESS:
|
||||
|
|
|
@ -7,7 +7,7 @@ import actions from '../../../actions';
|
|||
import api from '../../../api';
|
||||
import { createLocalId } from '../../../utils/local-id';
|
||||
|
||||
export function* createBoard(projectId, data) {
|
||||
export function* createBoard(projectId, { import: boardImport, ...data }) {
|
||||
const nextData = {
|
||||
...data,
|
||||
position: yield select(selectors.selectNextBoardPosition, projectId),
|
||||
|
@ -30,7 +30,19 @@ export function* createBoard(projectId, data) {
|
|||
({
|
||||
item: board,
|
||||
included: { boardMemberships },
|
||||
} = yield call(request, api.createBoard, projectId, nextData));
|
||||
} = yield boardImport
|
||||
? call(
|
||||
request,
|
||||
api.createBoardWithImport,
|
||||
projectId,
|
||||
{
|
||||
...nextData,
|
||||
importType: boardImport.type,
|
||||
importFile: boardImport.file,
|
||||
},
|
||||
localId,
|
||||
)
|
||||
: call(request, api.createBoard, projectId, nextData));
|
||||
} catch (error) {
|
||||
yield put(actions.createBoard.failure(localId, error));
|
||||
return;
|
||||
|
@ -46,8 +58,12 @@ export function* createBoardInCurrentProject(data) {
|
|||
yield call(createBoard, projectId, data);
|
||||
}
|
||||
|
||||
export function* handleBoardCreate(board) {
|
||||
yield put(actions.handleBoardCreate(board));
|
||||
export function* handleBoardCreate(board, requestId) {
|
||||
const isExists = yield select(selectors.selectIsBoardWithIdExists, requestId);
|
||||
|
||||
if (!isExists) {
|
||||
yield put(actions.handleBoardCreate(board));
|
||||
}
|
||||
}
|
||||
|
||||
export function* fetchBoard(id) {
|
||||
|
|
|
@ -8,8 +8,8 @@ export default function* boardsWatchers() {
|
|||
takeEvery(EntryActionTypes.BOARD_IN_CURRENT_PROJECT_CREATE, ({ payload: { data } }) =>
|
||||
services.createBoardInCurrentProject(data),
|
||||
),
|
||||
takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board } }) =>
|
||||
services.handleBoardCreate(board),
|
||||
takeEvery(EntryActionTypes.BOARD_CREATE_HANDLE, ({ payload: { board, requestId } }) =>
|
||||
services.handleBoardCreate(board, requestId),
|
||||
),
|
||||
takeEvery(EntryActionTypes.BOARD_FETCH, ({ payload: { id } }) => services.fetchBoard(id)),
|
||||
takeEvery(EntryActionTypes.BOARD_UPDATE, ({ payload: { id, data } }) =>
|
||||
|
|
|
@ -48,8 +48,8 @@ const createSocketEventsChannel = () =>
|
|||
emit(entryActions.handleProjectManagerDelete(item));
|
||||
};
|
||||
|
||||
const handleBoardCreate = ({ item }) => {
|
||||
emit(entryActions.handleBoardCreate(item));
|
||||
const handleBoardCreate = ({ item, requestId }) => {
|
||||
emit(entryActions.handleBoardCreate(item, requestId));
|
||||
};
|
||||
|
||||
const handleBoardUpdate = ({ item }) => {
|
||||
|
|
|
@ -172,6 +172,12 @@ export const selectCurrentUserMembershipForCurrentBoard = createSelector(
|
|||
},
|
||||
);
|
||||
|
||||
export const selectIsBoardWithIdExists = createSelector(
|
||||
orm,
|
||||
(_, id) => id,
|
||||
({ Board }, id) => Board.idExists(id),
|
||||
);
|
||||
|
||||
export default {
|
||||
makeSelectBoardById,
|
||||
selectBoardById,
|
||||
|
@ -182,4 +188,5 @@ export default {
|
|||
selectFilterUsersForCurrentBoard,
|
||||
selectFilterLabelsForCurrentBoard,
|
||||
selectCurrentUserMembershipForCurrentBoard,
|
||||
selectIsBoardWithIdExists,
|
||||
};
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue