Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Playlist sort button to edit #3194

Merged
merged 2 commits into from
Dec 10, 2024
Merged

Playlist sort button to edit #3194

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
67b4b73
Make `sortButton` a component
Dec 10, 2024
4330846
Add "Sort"-button to collection edit page
Dec 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions ui/page/collection/internal/collectionActions/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import {
selectCollectionTypeForId,
} from 'redux/selectors/collections';
import { doOpenModal } from 'redux/actions/app';
import { doToggleCollectionSavedForId, doSortCollectionByKey } from 'redux/actions/collections';
import { doToggleCollectionSavedForId } from 'redux/actions/collections';

import CollectionActions from './view';

Expand All @@ -28,7 +28,6 @@ const select = (state, props) => {
const perform = {
doOpenModal,
doToggleCollectionSavedForId,
doSortCollectionByKey,
};

export default connect(select, perform)(CollectionActions);
9 changes: 9 additions & 0 deletions ui/page/collection/internal/collectionActions/internal/sortButton/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
import { connect } from 'react-redux';
import { doSortCollectionByKey } from 'redux/actions/collections';
import SortButton from './view';

const perform = {
doSortCollectionByKey,
};

export default connect(null, perform)(SortButton);
70 changes: 70 additions & 0 deletions ui/page/collection/internal/collectionActions/internal/sortButton/view.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
// @flow
import React from 'react';
import * as ICONS from 'constants/icons';
import { SORT_ORDER, SORT_KEYS } from 'constants/collections';
import FileActionButton from 'component/common/file-action-button';
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';

type ButtonProps = {
collectionId: string,
// redux
doSortCollectionByKey: (collectionId: string, sortByKey: string, sortOrder: string) => void,
};

const SortButton = (props: ButtonProps) => {
const { collectionId, doSortCollectionByKey } = props;

return (
<div className="section__actions">
<div className="sort-menu__button">
<Menu>
<MenuButton
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
>
<FileActionButton className="button-toggle" icon={ICONS.MENU} title={__('Sort')} label={__('Sort')} />
</MenuButton>

<MenuList className="menu__list">
<MenuItem
className="comment__menu-option"
onSelect={() => {
doSortCollectionByKey(collectionId, SORT_KEYS.RELEASED_AT, SORT_ORDER.ASC);
}}
>
<div className="menu__link">{__('Newest first')}</div>
</MenuItem>
<MenuItem
className="comment__menu-option"
onSelect={() => {
doSortCollectionByKey(collectionId, SORT_KEYS.RELEASED_AT, SORT_ORDER.DESC);
}}
>
<div className="menu__link">{__('Oldest first')}</div>
</MenuItem>
<MenuItem
className="comment__menu-option"
onSelect={() => {
doSortCollectionByKey(collectionId, SORT_KEYS.NAME, SORT_ORDER.DESC);
}}
>
<div className="menu__link">{__('A-Z')}</div>
</MenuItem>
<MenuItem
className="comment__menu-option"
onSelect={() => {
doSortCollectionByKey(collectionId, SORT_KEYS.NAME, SORT_ORDER.ASC);
}}
>
<div className="menu__link">{__('Z-A')}</div>
</MenuItem>
</MenuList>
</Menu>
</div>
</div>
);
};

export default SortButton;
60 changes: 3 additions & 57 deletions ui/page/collection/internal/collectionActions/view.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,6 @@
// @flow
import * as ICONS from 'constants/icons';
import { COL_TYPES, SORT_ORDER, SORT_KEYS } from 'constants/collections';
import { COL_TYPES } from 'constants/collections';
import React from 'react';
import { Menu, MenuButton, MenuList, MenuItem } from '@reach/menu-button';
import FileActionButton from 'component/common/file-action-button';
import { useIsMobile } from 'effects/use-screensize';
import { COLLECTION_PAGE } from 'constants/urlParams';
import { useHistory } from 'react-router-dom';
Expand All @@ -12,6 +9,7 @@ import classnames from 'classnames';
import { ENABLE_FILE_REACTIONS } from 'config';
import PlayButton from './internal/playButton';
import ShuffleButton from './internal/shuffleButton';
import SortButton from './internal/sortButton';

type Props = {
uri: string,
Expand All @@ -27,7 +25,6 @@ type Props = {
collectionType: string,
doOpenModal: (id: string, props: {}) => void,
doToggleCollectionSavedForId: (id: string) => void,
doSortCollectionByKey: (collectionId: string, sortByKey: string, sortOrder: string) => void,
};

function CollectionActions(props: Props) {
Expand All @@ -45,7 +42,6 @@ function CollectionActions(props: Props) {
collectionType,
// doOpenModal,
// doToggleCollectionSavedForId,
doSortCollectionByKey,
} = props;

const {
Expand All @@ -67,57 +63,7 @@ function CollectionActions(props: Props) {
{!isBuiltin && <>{uri && <>{ENABLE_FILE_REACTIONS && <FileReactions uri={uri} />}</>}</>}
</SectionElement>

{!isOnPublicView && showEdit && (
<div className="section__actions">
<div className="sort-menu__button">
<Menu>
<MenuButton
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
>
<FileActionButton className="button-toggle" icon={ICONS.MENU} title={__('Sort')} label={__('Sort')} />
</MenuButton>

<MenuList className="menu__list">
<MenuItem
className="comment__menu-option"
onSelect={() => {
doSortCollectionByKey(collectionId, SORT_KEYS.RELEASED_AT, SORT_ORDER.ASC);
}}
>
<div className="menu__link">{__('Newest first')}</div>
</MenuItem>
<MenuItem
className="comment__menu-option"
onSelect={() => {
doSortCollectionByKey(collectionId, SORT_KEYS.RELEASED_AT, SORT_ORDER.DESC);
}}
>
<div className="menu__link">{__('Oldest first')}</div>
</MenuItem>
<MenuItem
className="comment__menu-option"
onSelect={() => {
doSortCollectionByKey(collectionId, SORT_KEYS.NAME, SORT_ORDER.DESC);
}}
>
<div className="menu__link">{__('A-Z')}</div>
</MenuItem>
<MenuItem
className="comment__menu-option"
onSelect={() => {
doSortCollectionByKey(collectionId, SORT_KEYS.NAME, SORT_ORDER.ASC);
}}
>
<div className="menu__link">{__('Z-A')}</div>
</MenuItem>
</MenuList>
</Menu>
</div>
</div>
)}
{!isOnPublicView && showEdit && <SortButton collectionId={collectionId} />}
</div>
</>
);
Expand Down
19 changes: 13 additions & 6 deletions ui/page/collection/internal/collectionPublishForm/view.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
// @flow
import React from 'react';
import analytics from 'analytics';
import classnames from 'classnames';

import * as MODALS from 'constants/modal_types';
import * as ICONS from 'constants/icons';
Expand All @@ -12,6 +13,7 @@ import { COLLECTION_PAGE } from 'constants/urlParams';

import Button from 'component/button';
// import CollectionDeleteButton from 'component/collectionDeleteButton';
import SortButton from '../../internal/collectionActions/internal/sortButton';
import CollectionItemsList from 'component/collectionItemsList';
import Spinner from 'component/spinner';
import BusyIndicator from 'component/common/busy-indicator';
Expand Down Expand Up @@ -223,12 +225,17 @@ const CollectionPublishForm = (props: Props) => {

<TabPanel>
{tabIndex === TAB.ITEMS && (
<CollectionItemsList
collectionId={collectionId}
empty={__('This playlist has no items.')}
showEdit
isEditPreview
/>
<>
<div className={classnames('collection-actions')}>
<SortButton collectionId={collectionId} />
</div>
<CollectionItemsList
collectionId={collectionId}
empty={__('This playlist has no items.')}
showEdit
isEditPreview
/>
</>
)}
</TabPanel>
</TabPanels>
Expand Down
Loading