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 = {
|
||||
inputs: {
|
||||
record: {
|
||||
type: 'ref',
|
||||
required: true,
|
||||
},
|
||||
type: {
|
||||
type: 'string',
|
||||
isIn: Object.values(List.SortTypes),
|
||||
defaultsTo: List.SortTypes.NAME_ASC,
|
||||
},
|
||||
request: {
|
||||
type: 'ref',
|
||||
},
|
||||
sortType: {
|
||||
type: 'string',
|
||||
isIn: ['name_asc', 'duedate_asc', 'createdat_asc', 'createdat_desc'],
|
||||
defaultsTo: 'name_asc',
|
||||
},
|
||||
},
|
||||
|
||||
async fn(inputs) {
|
||||
const list = await List.findOne({ id: 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");
|
||||
}
|
||||
let cards = await sails.helpers.lists.getCards(inputs.record.id);
|
||||
|
||||
const positions = cards.map((c) => c.position).sort((a, b) => a - b);
|
||||
|
||||
for (let i = 0; i < cards.length; i++) {
|
||||
let card = cards[i];
|
||||
let nextPosition = positions[i];
|
||||
|
||||
await Card.updateOne({ id: card.id }).set({
|
||||
position: nextPosition,
|
||||
switch (inputs.type) {
|
||||
case List.SortTypes.NAME_ASC:
|
||||
cards.sort((a, b) => a.name.localeCompare(b.name));
|
||||
break;
|
||||
case List.SortTypes.DUE_DATE_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 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', {
|
||||
item: {
|
||||
id: card.id,
|
||||
position: nextPosition,
|
||||
},
|
||||
});
|
||||
}
|
||||
const positions = cards.map((c) => c.position).sort((a, b) => a - b);
|
||||
|
||||
sails.sockets.broadcast(`board:${list.boardId}`, 'listSorted', {
|
||||
item: list,
|
||||
}, inputs.request);
|
||||
}
|
||||
cards = await Promise.all(
|
||||
cards.map(({ id }, index) =>
|
||||
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