Docker/planka
Docker/planka
1
0
Fork 0
mirror of https://github.com/plankanban/planka.git synced 2025-07-19 05:09:43 +02:00
Code Issues Releases Activity

fix: Fix styles, refactoring

Browse source
This commit is contained in:
Maksim Eltyshev 2024-08-12 23:17:17 +02:00
parent c594e8bd71
commit 12f05adde7
20 changed files with 229 additions and 202 deletions
Download patch file Download diff file Expand all files Collapse all files

21
client/src/components/Card/Card.jsx
View file

@ -24,7 +24,7 @@ const Card = React.memo(
index,
name,
dueDate,
dueCompleted,
isDueDateCompleted,
stopwatch,
coverUrl,
boardId,
@ -82,15 +82,6 @@ const Card = React.memo(
[onUpdate],
);
const handleDueDateCompletionUpdate = useCallback(
(dueDateCompleted) => {
onUpdate({
dueDateCompleted,
});
},
[onUpdate],
);
const handleNameEdit = useCallback(() => {
nameEdit.current.open();
}, []);
@ -130,12 +121,7 @@ const Card = React.memo(
)}
{dueDate && (
<span className={classNames(styles.attachment, styles.attachmentLeft)}>
<DueDate
value={dueDate}
completed={dueCompleted}
size="tiny"
onUpdateCompletion={handleDueDateCompletionUpdate}
/>
<DueDate value={dueDate} isCompleted={isDueDateCompleted} size="tiny" />
</span>
)}
{stopwatch && (
@ -236,7 +222,7 @@ Card.propTypes = {
index: PropTypes.number.isRequired,
name: PropTypes.string.isRequired,
dueDate: PropTypes.instanceOf(Date),
dueCompleted: PropTypes.bool.isRequired,
isDueDateCompleted: PropTypes.bool,
stopwatch: PropTypes.object, // eslint-disable-line react/forbid-prop-types
coverUrl: PropTypes.string,
boardId: PropTypes.string.isRequired,
@ -271,6 +257,7 @@ Card.propTypes = {
Card.defaultProps = {
dueDate: undefined,
isDueDateCompleted: undefined,
stopwatch: undefined,
coverUrl: undefined,
};

46
client/src/components/CardModal/CardModal.jsx
View file

@ -2,7 +2,7 @@ import React, { useCallback, useRef, useState } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { Button, Grid, Icon, Modal } from 'semantic-ui-react';
import { Button, Checkbox, Grid, Icon, Modal } from 'semantic-ui-react';
import { usePopup } from '../../lib/popup';
import { Markdown } from '../../lib/custom-ui';
@ -32,7 +32,7 @@ const CardModal = React.memo(
name,
description,
dueDate,
dueCompleted,
isDueDateCompleted,
stopwatch,
isSubscribed,
isActivitiesFetching,
@ -119,6 +119,12 @@ const CardModal = React.memo(
[onUpdate],
);
const handleDueDateCompletionChange = useCallback(() => {
onUpdate({
isDueDateCompleted: !isDueDateCompleted,
});
}, [isDueDateCompleted, onUpdate]);
const handleStopwatchUpdate = useCallback(
(newStopwatch) => {
onUpdate({
@ -172,15 +178,6 @@ const CardModal = React.memo(
onClose();
}, [onClose]);
const handleDueDateCompletion = useCallback(
(completion) => {
onUpdate({
dueCompleted: completion,
});
},
[onUpdate],
);
const AttachmentAddPopup = usePopup(AttachmentAddStep);
const BoardMembershipsPopup = usePopup(BoardMembershipsStep);
const LabelsPopup = usePopup(LabelsStep);
@ -310,17 +307,24 @@ const CardModal = React.memo(
context: 'title',
})}
</div>
<span className={styles.attachment}>
<span className={classNames(styles.attachment, styles.attachmentDueDate)}>
{canEdit ? (
<DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
<DueDate
value={dueDate}
completed={dueCompleted}
onUpdateCompletion={handleDueDateCompletion}
<>
<Checkbox
checked={isDueDateCompleted}
disabled={!canEdit}
onChange={handleDueDateCompletionChange}
/>
</DueDateEditPopup>
<DueDateEditPopup defaultValue={dueDate} onUpdate={handleDueDateUpdate}>
<DueDate
withStatusIcon
value={dueDate}
isCompleted={isDueDateCompleted}
/>
</DueDateEditPopup>
</>
) : (
<DueDate value={dueDate} completed={dueCompleted} />
<DueDate withStatusIcon value={dueDate} isCompleted={isDueDateCompleted} />
)}
</span>
</div>
@ -576,7 +580,7 @@ CardModal.propTypes = {
name: PropTypes.string.isRequired,
description: PropTypes.string,
dueDate: PropTypes.instanceOf(Date),
dueCompleted: PropTypes.bool,
isDueDateCompleted: PropTypes.bool,
stopwatch: PropTypes.object, // eslint-disable-line react/forbid-prop-types
isSubscribed: PropTypes.bool.isRequired,
isActivitiesFetching: PropTypes.bool.isRequired,
@ -631,7 +635,7 @@ CardModal.propTypes = {
CardModal.defaultProps = {
description: undefined,
dueDate: undefined,
dueCompleted: false,
isDueDateCompleted: false,
stopwatch: undefined,
};

6
client/src/components/CardModal/CardModal.module.scss
View file

@ -58,6 +58,12 @@
max-width: 100%;
}
.attachmentDueDate {
align-items: center;
display: flex;
gap: 4px;
}
.attachments {
display: inline-block;
margin: 0 8px 8px 0;

176
client/src/components/DueDate/DueDate.jsx
View file

@ -1,9 +1,10 @@
import upperFirst from 'lodash/upperFirst';
import React, { useCallback } from 'react';
import React, { useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import { useTranslation } from 'react-i18next';
import { Checkbox } from 'semantic-ui-react';
import { Icon } from 'semantic-ui-react';
import { useForceUpdate } from '../../lib/hooks';
import getDateFormat from '../../utils/get-date-format';
@ -15,6 +16,12 @@ const SIZES = {
MEDIUM: 'medium',
};
const STATUSES = {
DUE_SOON: 'dueSoon',
OVERDUE: 'overdue',
COMPLETED: 'completed',
};
const LONG_DATE_FORMAT_BY_SIZE = {
tiny: 'longDate',
small: 'longDate',
@ -27,96 +34,121 @@ const FULL_DATE_FORMAT_BY_SIZE = {
medium: 'fullDateTime',
};
const getDueClass = (value) => {
const now = new Date();
const tomorrow = new Date(now).setDate(now.getDate() + 1);
const STATUS_ICON_PROPS_BY_STATUS = {
[STATUSES.DUE_SOON]: {
name: 'hourglass half',
color: 'orange',
},
[STATUSES.OVERDUE]: {
name: 'hourglass end',
color: 'red',
},
[STATUSES.COMPLETED]: {
name: 'checkmark',
color: 'green',
},
};
const getStatus = (dateTime, isCompleted) => {
if (isCompleted) {
return STATUSES.COMPLETED;
}
const secondsLeft = Math.floor((dateTime.getTime() - new Date().getTime()) / 1000);
if (secondsLeft <= 0) {
return STATUSES.OVERDUE;
}
if (secondsLeft <= 24 * 60 * 60) {
return STATUSES.DUE_SOON;
}
if (now > value) return styles.overdue;
if (tomorrow > value) return styles.soon;
return null;
};
const DueDate = React.memo(
({ value, completed, size, isDisabled, onClick, onUpdateCompletion }) => {
const [t] = useTranslation();
const DueDate = React.memo(({ value, size, isCompleted, isDisabled, withStatusIcon, onClick }) => {
const [t] = useTranslation();
const forceUpdate = useForceUpdate();
const dateFormat = getDateFormat(
value,
LONG_DATE_FORMAT_BY_SIZE[size],
FULL_DATE_FORMAT_BY_SIZE[size],
);
const statusRef = useRef(null);
statusRef.current = getStatus(value, isCompleted);
const classes = [
styles.wrapper,
styles[`wrapper${upperFirst(size)}`],
onClick && styles.wrapperHoverable,
completed ? styles.completed : getDueClass(value),
];
const intervalRef = useRef(null);
const handleToggleChange = useCallback(
(event) => {
event.preventDefault();
event.stopPropagation();
if (!isDisabled) onUpdateCompletion(!completed);
},
[onUpdateCompletion, completed, isDisabled],
);
const dateFormat = getDateFormat(
value,
LONG_DATE_FORMAT_BY_SIZE[size],
FULL_DATE_FORMAT_BY_SIZE[size],
);
return onClick ? (
<div className={styles.wrapperGroup}>
<button
type="button"
aria-label="Toggle completion"
className={classNames(...classes, styles.wrapperCheckbox)}
onClick={handleToggleChange}
>
<Checkbox
className={styles.checkbox}
checked={completed}
disabled={isDisabled}
onChange={handleToggleChange}
/>
</button>
<button
type="button"
disabled={isDisabled}
className={classNames(...classes, styles.wrapperButton)}
onClick={onClick}
>
<span>
{t(`format:${dateFormat}`, {
value,
postProcess: 'formatDate',
})}
</span>
</button>
</div>
) : (
<span className={classNames(...classes)}>
{t(`format:${dateFormat}`, {
value,
postProcess: 'formatDate',
})}
</span>
);
},
);
useEffect(() => {
if ([null, STATUSES.DUE_SOON].includes(statusRef.current)) {
intervalRef.current = setInterval(() => {
const status = getStatus(value, isCompleted);
if (status !== statusRef.current) {
forceUpdate();
}
if (status === STATUSES.OVERDUE) {
clearInterval(intervalRef.current);
}
}, 1000);
}
return () => {
if (intervalRef.current) {
clearInterval(intervalRef.current);
}
};
}, [value, isCompleted, forceUpdate]);
const contentNode = (
<span
className={classNames(
styles.wrapper,
styles[`wrapper${upperFirst(size)}`],
!withStatusIcon && statusRef.current && styles[`wrapper${upperFirst(statusRef.current)}`],
onClick && styles.wrapperHoverable,
)}
>
{t(`format:${dateFormat}`, {
value,
postProcess: 'formatDate',
})}
{withStatusIcon && statusRef.current && (
// eslint-disable-next-line react/jsx-props-no-spreading
<Icon {...STATUS_ICON_PROPS_BY_STATUS[statusRef.current]} className={styles.statusIcon} />
)}
</span>
);
return onClick ? (
<button type="button" disabled={isDisabled} className={styles.button} onClick={onClick}>
{contentNode}
</button>
) : (
contentNode
);
});
DueDate.propTypes = {
value: PropTypes.instanceOf(Date).isRequired,
size: PropTypes.oneOf(Object.values(SIZES)),
isCompleted: PropTypes.bool.isRequired,
isDisabled: PropTypes.bool,
completed: PropTypes.bool,
withStatusIcon: PropTypes.bool,
onClick: PropTypes.func,
onUpdateCompletion: PropTypes.func,
onCompletionToggle: PropTypes.func,
};
DueDate.defaultProps = {
size: SIZES.MEDIUM,
isDisabled: false,
completed: false,
withStatusIcon: false,
onClick: undefined,
onUpdateCompletion: undefined,
onCompletionToggle: undefined,
};
export default DueDate;

71
client/src/components/DueDate/DueDate.module.scss
View file

@ -8,16 +8,17 @@
padding: 0;
}
.statusIcon {
line-height: 1;
margin: 0 0 0 8px;
}
.wrapper {
background: #dce0e4;
border: none;
border-radius: 3px;
color: #6a808b;
display: inline-block;
outline: none;
text-align: left;
transition: background 0.3s ease;
vertical-align: top;
}
.wrapperHoverable:hover {
@ -25,57 +26,18 @@
color: #17394d;
}
.wrapperGroup {
display: flex;
align-items: stretch;
justify-content: stretch;
}
.overdue {
background: #db2828;
color: #ffffff;
&.wrapperHoverable:hover {
background: #d01919;
color: #ffffff;
}
}
.soon {
background: #fbbd08;
color: #ffffff;
&.wrapperHoverable:hover {
background: #eaae00;
color: #ffffff;
}
}
.completed {
background: #21ba45;
color: #ffffff;
&.wrapperHoverable:hover {
background: #16ab39;
color: #ffffff;
}
}
/* Sizes */
.wrapperTiny {
font-size: 12px;
line-height: 20px;
padding: 0px 6px;
&.wrapperCheckbox {
padding-right: 6px;
}
}
.wrapperSmall {
font-size: 12px;
line-height: 20px;
padding: 2px 6px;
&.wrapperCheckbox {
padding-right: 6px;
}
}
.wrapperMedium {
@ -83,17 +45,20 @@
padding: 6px 12px;
}
.wrapperCheckbox {
padding-right: 12px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
cursor: pointer;
/* Statuses */
.wrapperDueSoon {
background: #f2711c;
color: #fff;
}
.checkbox {
display: block;
.wrapperOverdue {
background: #db2828;
color: #fff;
}
.wrapperButton {
border-top-left-radius: 0;
border-bottom-left-radius: 0;
.wrapperCompleted {
background: #21ba45;
color: #fff;
}
}

4
client/src/components/Label/Label.jsx
View file

@ -17,7 +17,7 @@ const SIZES = {
const Label = React.memo(({ name, color, size, isDisabled, onClick }) => {
const contentNode = (
<div
<span
title={name}
className={classNames(
styles.wrapper,
@ -28,7 +28,7 @@ const Label = React.memo(({ name, color, size, isDisabled, onClick }) => {
)}
>
{name || '\u00A0'}
</div>
</span>
);
return onClick ? (

6
client/src/components/Label/Label.module.scss
View file

@ -11,17 +11,17 @@
.wrapper {
border-radius: 3px;
box-sizing: border-box;
color: #fff;
display: inline-block;
font-weight: 400;
outline: none;
overflow: hidden;
text-overflow: ellipsis;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.2);
vertical-align: top;
white-space: nowrap;
}
.wrapperNameless{
.wrapperNameless {
width: 40px;
}

3
client/src/components/Stopwatch/Stopwatch.module.scss
View file

@ -10,13 +10,10 @@
.wrapper {
background: #dce0e4;
border: none;
border-radius: 3px;
color: #6a808b;
display: inline-block;
font-variant-numeric: tabular-nums;
outline: none;
text-align: left;
transition: background 0.3s ease;
vertical-align: top;
}

2
client/src/components/User/User.module.scss
View file

@ -14,12 +14,10 @@
}
.wrapper {
border: none;
border-radius: 50%;
color: #fff;
display: inline-block;
line-height: 1;
outline: none;
text-align: center;
vertical-align: top;
}

4
client/src/containers/CardContainer.js
View file

@ -20,7 +20,7 @@ const makeMapStateToProps = () => {
const allLabels = selectors.selectLabelsForCurrentBoard(state);
const currentUserMembership = selectors.selectCurrentUserMembershipForCurrentBoard(state);
const { name, dueDate, dueCompleted, stopwatch, coverUrl, boardId, listId, isPersisted } =
const { name, dueDate, isDueDateCompleted, stopwatch, coverUrl, boardId, listId, isPersisted } =
selectCardById(state, id);
const users = selectUsersByCardId(state, id);
@ -36,7 +36,7 @@ const makeMapStateToProps = () => {
index,
name,
dueDate,
dueCompleted,
isDueDateCompleted,
stopwatch,
coverUrl,
boardId,

4
client/src/containers/CardModalContainer.js
View file

@ -21,7 +21,7 @@ const mapStateToProps = (state) => {
name,
description,
dueDate,
dueCompleted,
isDueDateCompleted,
stopwatch,
isSubscribed,
isActivitiesFetching,
@ -50,7 +50,7 @@ const mapStateToProps = (state) => {
name,
description,
dueDate,
dueCompleted,
isDueDateCompleted,
stopwatch,
isSubscribed,
isActivitiesFetching,

17
client/src/models/Card.js
View file

@ -20,9 +20,7 @@ export default class extends BaseModel {
relatedName: 'ownCards',
}),
dueDate: attr(),
dueCompleted: attr({
getDefault: () => false,
}),
isDueDateCompleted: attr(),
stopwatch: attr(),
isSubscribed: attr({
getDefault: () => false,
@ -211,7 +209,16 @@ export default class extends BaseModel {
if (payload.data.boardId && payload.data.boardId !== cardModel.boardId) {
cardModel.deleteWithRelated();
} else {
cardModel.update(payload.data);
cardModel.update({
...payload.data,
...(payload.data.dueDate === null && {
isDueDateCompleted: null,
}),
...(payload.data.dueDate &&
!cardModel.dueDate && {
isDueDateCompleted: false,
}),
});
}
break;
@ -251,7 +258,7 @@ export default class extends BaseModel {
'name',
'description',
'dueDate',
'dueCompleted',
'isDueDateCompleted',
'stopwatch',
]),
...payload.card,

6
server/api/controllers/cards/create.js
View file

@ -56,9 +56,11 @@ module.exports = {
dueDate: {
type: 'string',
custom: dueDateValidator,
allowNull: true,
},
dueCompleted: {
isDueDateCompleted: {
type: 'boolean',
allowNull: true,
},
stopwatch: {
type: 'json',
@ -103,7 +105,7 @@ module.exports = {
'name',
'description',
'dueDate',
'dueCompleted',
'isDueDateCompleted',
'stopwatch',
]);

5
server/api/controllers/cards/update.js
View file

@ -80,8 +80,9 @@ module.exports = {
custom: dueDateValidator,
allowNull: true,
},
dueCompleted: {
isDueDateCompleted: {
type: 'boolean',
allowNull: true,
},
stopwatch: {
type: 'json',
@ -176,7 +177,7 @@ module.exports = {
'name',
'description',
'dueDate',
'dueCompleted',
'isDueDateCompleted',
'stopwatch',
'isSubscribed',
]);

8
server/api/helpers/cards/create-one.js
View file

@ -49,6 +49,14 @@ module.exports = {
throw 'positionMustBeInValues';
}
if (values.dueDate) {
if (_.isNil(values.isDueDateCompleted)) {
values.isDueDateCompleted = false;
}
} else {
delete values.isDueDateCompleted;
}
const cards = await sails.helpers.lists.getCards(values.list.id);
const { position, repositions } = sails.helpers.utils.insertToPositionables(

2
server/api/helpers/cards/duplicate-one.js
View file

@ -77,7 +77,7 @@ module.exports = {
'name',
'description',
'dueDate',
'dueCompleted',
'isDueDateCompleted',
'stopwatch',
]),
...values,

14
server/api/helpers/cards/update-one.js
View file

@ -135,6 +135,20 @@ module.exports = {
});
}
const dueDate = _.isUndefined(values.dueDate) ? inputs.record.dueDate : values.dueDate;
if (dueDate) {
const isDueDateCompleted = _.isUndefined(values.isDueDateCompleted)
? inputs.record.isDueDateCompleted
: values.isDueDateCompleted;
if (_.isNull(isDueDateCompleted)) {
values.isDueDateCompleted = false;
}
} else {
values.isDueDateCompleted = null;
}
let card;
if (_.isEmpty(values)) {
card = inputs.record;

6
server/api/models/Card.js
View file

@ -28,10 +28,10 @@ module.exports = {
type: 'ref',
columnName: 'due_date',
},
dueCompleted: {
isDueDateCompleted: {
type: 'boolean',
defaultsTo: false,
columnName: 'due_completed',
allowNull: true,
columnName: 'is_due_date_completed',
},
stopwatch: {
type: 'json',

12
server/db/migrations/20240812065305_add_due_completion.js.js
View file

@ -1,12 +0,0 @@
module.exports.up = async (knex) =>
knex.schema.table('card', (table) => {
/* Columns */
table.boolean('due_completed').notNullable().defaultTo(false);
});
module.exports.down = async (knex) => {
await knex.schema.table('card', (table) => {
table.dropColumn('due_completed');
});
};

18
server/db/migrations/20240812065305_make_due_date_toggleable.js Normal file
View file

@ -0,0 +1,18 @@
module.exports.up = async (knex) => {
await knex.schema.table('card', (table) => {
/* Columns */
table.boolean('is_due_date_completed');
});
return knex('card')
.update({
isDueDateCompleted: false,
})
.whereNotNull('due_date');
};
module.exports.down = (knex) =>
knex.schema.table('card', (table) => {
table.dropColumn('is_due_date_completed');
});