fix: Little improvements and refactoring
Maksim Eltyshev
2 years ago
parent
7b3155efe5
commit
6cec8fea44
@ -0,0 +1,61 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import { useTranslation } from 'react-i18next';
|
||||||
|
import { Menu } from 'semantic-ui-react';
|
||||||
|
import { Popup } from '../../lib/custom-ui';
|
||||||
|
import { ListSortTypes } from '../../constants/Enums';
|
||||||
|
|
||||||
|
import styles from './ListSortStep.module.scss';
|
||||||
|
|
||||||
|
const ListSortStep = React.memo(({ onTypeSelect, onBack }) => {
|
||||||
|
const [t] = useTranslation();
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Popup.Header onBack={onBack}>
|
||||||
|
{t('common.sortList', {
|
||||||
|
context: 'title',
|
||||||
|
})}
|
||||||
|
</Popup.Header>
|
||||||
|
<Popup.Content>
|
||||||
|
<Menu secondary vertical className={styles.menu}>
|
||||||
|
<Menu.Item
|
||||||
|
className={styles.menuItem}
|
||||||
|
onClick={() => onTypeSelect(ListSortTypes.NAME_ASC)}
|
||||||
|
>
|
||||||
|
{t('common.name')}
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item
|
||||||
|
className={styles.menuItem}
|
||||||
|
onClick={() => onTypeSelect(ListSortTypes.DUE_DATE_ASC)}
|
||||||
|
>
|
||||||
|
{t('common.dueDate')}
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item
|
||||||
|
className={styles.menuItem}
|
||||||
|
onClick={() => onTypeSelect(ListSortTypes.CREATED_AT_ASC)}
|
||||||
|
>
|
||||||
|
{t('common.oldestFirst')}
|
||||||
|
</Menu.Item>
|
||||||
|
<Menu.Item
|
||||||
|
className={styles.menuItem}
|
||||||
|
onClick={() => onTypeSelect(ListSortTypes.CREATED_AT_DESC)}
|
||||||
|
>
|
||||||
|
{t('common.newestFirst')}
|
||||||
|
</Menu.Item>
|
||||||
|
</Menu>
|
||||||
|
</Popup.Content>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
});
|
||||||
|
|
||||||
|
ListSortStep.propTypes = {
|
||||||
|
onTypeSelect: PropTypes.func.isRequired,
|
||||||
|
onBack: PropTypes.func,
|
||||||
|
};
|
||||||
|
|
||||||
|
ListSortStep.defaultProps = {
|
||||||
|
onBack: undefined,
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ListSortStep;
|
||||||
@ -0,0 +1,11 @@
|
|||||||
|
:global(#app) {
|
||||||
|
.menu {
|
||||||
|
margin: -7px -12px -5px;
|
||||||
|
width: calc(100% + 24px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menuItem {
|
||||||
|
margin: 0;
|
||||||
|
padding-left: 14px;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,3 @@
|
|||||||
|
import ListSortStep from './ListSortStep';
|
||||||
|
|
||||||
|
export default ListSortStep;
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import { useTranslation } from 'react-i18next';
|
|
||||||
import { Menu } from 'semantic-ui-react';
|
|
||||||
import { Popup } from '../../lib/custom-ui';
|
|
||||||
|
|
||||||
import styles from './SortStep.module.scss';
|
|
||||||
|
|
||||||
const SortStep = React.memo(({ title, onSort, onBack }) => {
|
|
||||||
const [t] = useTranslation();
|
|
||||||
|
|
||||||
const handeClick = (sortType) => onSort({ sortType });
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Popup.Header onBack={onBack}>
|
|
||||||
{t(title, {
|
|
||||||
context: 'title',
|
|
||||||
})}
|
|
||||||
</Popup.Header>
|
|
||||||
<Popup.Content>
|
|
||||||
<Menu secondary vertical className={styles.menu}>
|
|
||||||
<Menu.Item className={styles.menuItem} onClick={() => handeClick('createdat_asc')}>
|
|
||||||
{t('action.sort.createdFirst', {
|
|
||||||
context: 'title',
|
|
||||||
})}
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item className={styles.menuItem} onClick={() => handeClick('createdat_desc')}>
|
|
||||||
{t('action.sort.createdLast', {
|
|
||||||
context: 'title',
|
|
||||||
})}
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item className={styles.menuItem} onClick={() => handeClick('name_asc')}>
|
|
||||||
{t('action.sort.name', {
|
|
||||||
context: 'title',
|
|
||||||
})}
|
|
||||||
</Menu.Item>
|
|
||||||
<Menu.Item className={styles.menuItem} onClick={() => handeClick('duedate_asc')}>
|
|
||||||
{t('action.sort.due', {
|
|
||||||
context: 'title',
|
|
||||||
})}
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu>
|
|
||||||
</Popup.Content>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
});
|
|
||||||
|
|
||||||
SortStep.propTypes = {
|
|
||||||
title: PropTypes.string.isRequired,
|
|
||||||
onSort: PropTypes.func.isRequired,
|
|
||||||
onBack: PropTypes.func,
|
|
||||||
};
|
|
||||||
|
|
||||||
SortStep.defaultProps = {
|
|
||||||
onBack: undefined,
|
|
||||||
};
|
|
||||||
|
|
||||||
export default SortStep;
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
import SortStep from './SortStep';
|
|
||||||
|
|
||||||
export default SortStep;
|
|
||||||
@ -1,68 +1,70 @@
|
|||||||
|
const List = require('../../models/List');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
inputs: {
|
inputs: {
|
||||||
record: {
|
record: {
|
||||||
type: 'ref',
|
type: 'ref',
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
|
type: {
|
||||||
|
type: 'string',
|
||||||
|
isIn: Object.values(List.SortTypes),
|
||||||
|
defaultsTo: List.SortTypes.NAME_ASC,
|
||||||
|
},
|
||||||
request: {
|
request: {
|
||||||
type: 'ref',
|
type: 'ref',
|
||||||
},
|
},
|
||||||
sortType: {
|
|
||||||
type: 'string',
|
|
||||||
isIn: ['name_asc', 'duedate_asc', 'createdat_asc', 'createdat_desc'],
|
|
||||||
defaultsTo: 'name_asc',
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
|
|
||||||
async fn(inputs) {
|
async fn(inputs) {
|
||||||
const list = await List.findOne({ id: inputs.record.id });
|
let cards = await sails.helpers.lists.getCards(inputs.record.id);
|
||||||
if (list) {
|
|
||||||
let cards = await Card.find({ listId: inputs.record.id });
|
|
||||||
|
|
||||||
switch (inputs.sortType) {
|
|
||||||
case 'name_asc':
|
|
||||||
cards.sort((a, b) => a.name.localeCompare(b.name));
|
|
||||||
break;
|
|
||||||
case 'duedate_asc':
|
|
||||||
cards.sort((a, b) => {
|
|
||||||
if (a.dueDate === null) return 1;
|
|
||||||
if (b.dueDate === null) return -1;
|
|
||||||
return new Date(a.dueDate) - new Date(b.dueDate);
|
|
||||||
});
|
|
||||||
break;
|
|
||||||
case 'createdat_asc':
|
|
||||||
cards.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
|
|
||||||
break;
|
|
||||||
case 'createdat_desc':
|
|
||||||
cards.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
|
|
||||||
break;
|
|
||||||
default:
|
|
||||||
throw new Error("Invalid sort type specified");
|
|
||||||
}
|
|
||||||
|
|
||||||
const positions = cards.map((c) => c.position).sort((a, b) => a - b);
|
switch (inputs.type) {
|
||||||
|
case List.SortTypes.NAME_ASC:
|
||||||
for (let i = 0; i < cards.length; i++) {
|
cards.sort((a, b) => a.name.localeCompare(b.name));
|
||||||
let card = cards[i];
|
break;
|
||||||
let nextPosition = positions[i];
|
case List.SortTypes.DUE_DATE_ASC:
|
||||||
|
cards.sort((a, b) => {
|
||||||
await Card.updateOne({ id: card.id }).set({
|
if (a.dueDate === null) return 1;
|
||||||
position: nextPosition,
|
if (b.dueDate === null) return -1;
|
||||||
|
return new Date(a.dueDate) - new Date(b.dueDate);
|
||||||
});
|
});
|
||||||
|
break;
|
||||||
|
case List.SortTypes.CREATED_AT_ASC:
|
||||||
|
cards.sort((a, b) => new Date(a.createdAt) - new Date(b.createdAt));
|
||||||
|
break;
|
||||||
|
case List.SortTypes.CREATED_AT_DESC:
|
||||||
|
cards.sort((a, b) => new Date(b.createdAt) - new Date(a.createdAt));
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
throw new Error('Invalid sort type specified');
|
||||||
|
}
|
||||||
|
|
||||||
sails.sockets.broadcast(`board:${card.boardId}`, 'cardUpdate', {
|
const positions = cards.map((c) => c.position).sort((a, b) => a - b);
|
||||||
item: {
|
|
||||||
id: card.id,
|
|
||||||
position: nextPosition,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
sails.sockets.broadcast(`board:${list.boardId}`, 'listSorted', {
|
cards = await Promise.all(
|
||||||
item: list,
|
cards.map(({ id }, index) =>
|
||||||
}, inputs.request);
|
Card.updateOne({
|
||||||
}
|
id,
|
||||||
|
listId: inputs.record.id,
|
||||||
|
}).set({
|
||||||
|
position: positions[index],
|
||||||
|
}),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
|
||||||
|
sails.sockets.broadcast(
|
||||||
|
`board:${inputs.record.boardId}`,
|
||||||
|
'listSort',
|
||||||
|
{
|
||||||
|
item: inputs.record,
|
||||||
|
included: {
|
||||||
|
cards,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
inputs.request,
|
||||||
|
);
|
||||||
|
|
||||||
return list;
|
return cards;
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|||||||
Loading…
Reference in New Issue