Lots of UI work to get the tags to be editable in the list editor.
parent
c811a79c9b
commit
ec5ec54af3
|
@ -3,6 +3,7 @@
|
|||
class Api::BaseController < ApplicationController
|
||||
DEFAULT_STATUSES_LIMIT = 20
|
||||
DEFAULT_ACCOUNTS_LIMIT = 40
|
||||
DEFAULT_TAGS_LIMIT = 40
|
||||
|
||||
include Api::RateLimitHeaders
|
||||
include Api::AccessTokenTrackingConcern
|
||||
|
|
|
@ -20,12 +20,12 @@ class Api::V1::Lists::TagsController < Api::BaseController
|
|||
@list.tags << tag
|
||||
end
|
||||
end
|
||||
|
||||
render_empty
|
||||
@tags = load_tags
|
||||
render json: @tags, each_serializer: REST::TagSerializer
|
||||
end
|
||||
|
||||
def destroy
|
||||
ListTag.where(list: @list, tag_id: tag_id).destroy_all
|
||||
ListTag.where(list: @list, tag_id: tag_ids).destroy_all
|
||||
render_empty
|
||||
end
|
||||
|
||||
|
@ -44,7 +44,14 @@ class Api::V1::Lists::TagsController < Api::BaseController
|
|||
end
|
||||
|
||||
def list_tags
|
||||
Tag.find(tag_ids)
|
||||
names = tag_ids.select{|t| t !=~ /\A[0-9]+\Z/}
|
||||
ids = tag_ids.select{|t| t =~ /\A[0-9]+\Z/}
|
||||
existing_by_name = Tag.where(name: names.map{|n| Tag.normalize(n)}).select(:id, :name)
|
||||
ids.push(*existing_by_name.map {|t| t.id})
|
||||
not_existing_by_name = names.select{|n| !existing_by_name.any? {|e| e.name == Tag.normalize(n)}}
|
||||
created = Tag.find_or_create_by_names(not_existing_by_name)
|
||||
ids.push(*created.map {|t| t.id})
|
||||
Tag.find(ids)
|
||||
end
|
||||
|
||||
def tag_ids
|
||||
|
|
|
@ -6,6 +6,7 @@ export const STATUS_IMPORT = 'STATUS_IMPORT';
|
|||
export const STATUSES_IMPORT = 'STATUSES_IMPORT';
|
||||
export const POLLS_IMPORT = 'POLLS_IMPORT';
|
||||
export const FILTERS_IMPORT = 'FILTERS_IMPORT';
|
||||
export const TAGS_IMPORT = 'TAGS_IMPORT';
|
||||
|
||||
function pushUnique(array, object) {
|
||||
if (array.every(element => element.id !== object.id)) {
|
||||
|
@ -29,6 +30,10 @@ export function importPolls(polls) {
|
|||
return { type: POLLS_IMPORT, polls };
|
||||
}
|
||||
|
||||
export function importTags(tags) {
|
||||
return { type: TAGS_IMPORT, tags };
|
||||
}
|
||||
|
||||
export function importFetchedAccount(account) {
|
||||
return importFetchedAccounts([account]);
|
||||
}
|
||||
|
@ -49,6 +54,17 @@ export function importFetchedAccounts(accounts) {
|
|||
return importAccounts({ accounts: normalAccounts });
|
||||
}
|
||||
|
||||
export function importFetchedTags(tags) {
|
||||
return (dispatch, getState) => {
|
||||
const uniqueTags = [];
|
||||
function processTag(tag) {
|
||||
pushUnique(uniqueTags, tag);
|
||||
}
|
||||
tags.forEach(processTag);
|
||||
dispatch(importTags(uniqueTags));
|
||||
};
|
||||
}
|
||||
|
||||
export function importFetchedStatus(status) {
|
||||
return importFetchedStatuses([status]);
|
||||
}
|
||||
|
|
|
@ -1,7 +1,7 @@
|
|||
import api from '../api';
|
||||
|
||||
import { showAlertForError } from './alerts';
|
||||
import { importFetchedAccounts } from './importer';
|
||||
import { importFetchedAccounts, importFetchedTags } from './importer';
|
||||
|
||||
export const LIST_FETCH_REQUEST = 'LIST_FETCH_REQUEST';
|
||||
export const LIST_FETCH_SUCCESS = 'LIST_FETCH_SUCCESS';
|
||||
|
@ -31,6 +31,10 @@ export const LIST_ACCOUNTS_FETCH_REQUEST = 'LIST_ACCOUNTS_FETCH_REQUEST';
|
|||
export const LIST_ACCOUNTS_FETCH_SUCCESS = 'LIST_ACCOUNTS_FETCH_SUCCESS';
|
||||
export const LIST_ACCOUNTS_FETCH_FAIL = 'LIST_ACCOUNTS_FETCH_FAIL';
|
||||
|
||||
export const LIST_TAGS_FETCH_REQUEST = 'LIST_TAGS_FETCH_REQUEST';
|
||||
export const LIST_TAGS_FETCH_SUCCESS = 'LIST_TAGS_FETCH_SUCCESS';
|
||||
export const LIST_TAGS_FETCH_FAIL = 'LIST_TAGS_FETCH_FAIL';
|
||||
|
||||
export const LIST_EDITOR_SUGGESTIONS_CHANGE = 'LIST_EDITOR_SUGGESTIONS_CHANGE';
|
||||
export const LIST_EDITOR_SUGGESTIONS_READY = 'LIST_EDITOR_SUGGESTIONS_READY';
|
||||
export const LIST_EDITOR_SUGGESTIONS_CLEAR = 'LIST_EDITOR_SUGGESTIONS_CLEAR';
|
||||
|
@ -118,6 +122,7 @@ export const setupListEditor = listId => (dispatch, getState) => {
|
|||
});
|
||||
|
||||
dispatch(fetchListAccounts(listId));
|
||||
dispatch(fetchListTags(listId));
|
||||
};
|
||||
|
||||
export const changeListEditorTitle = value => ({
|
||||
|
@ -234,6 +239,33 @@ export const fetchListAccountsFail = (id, error) => ({
|
|||
error,
|
||||
});
|
||||
|
||||
export const fetchListTags = listId => (dispatch, getState) => {
|
||||
dispatch(fetchListTagsRequest(listId));
|
||||
|
||||
api(getState).get(`/api/v1/lists/${listId}/tags`, { params: { limit: 0 } }).then(({ data }) => {
|
||||
dispatch(importFetchedTags(data));
|
||||
dispatch(fetchListTagsSuccess(listId, data));
|
||||
}).catch(err => dispatch(fetchListTagsFail(listId, err)));
|
||||
};
|
||||
|
||||
export const fetchListTagsFail = (id, error) => ({
|
||||
type: LIST_TAGS_FETCH_FAIL,
|
||||
id,
|
||||
error,
|
||||
});
|
||||
|
||||
export const fetchListTagsRequest = id => ({
|
||||
type: LIST_TAGS_FETCH_REQUEST,
|
||||
id,
|
||||
});
|
||||
|
||||
export const fetchListTagsSuccess = (id, tags, next) => ({
|
||||
type: LIST_TAGS_FETCH_SUCCESS,
|
||||
id,
|
||||
tags,
|
||||
next,
|
||||
});
|
||||
|
||||
export const fetchListSuggestions = q => (dispatch, getState) => {
|
||||
const params = {
|
||||
q,
|
||||
|
@ -263,65 +295,84 @@ export const changeListSuggestions = value => ({
|
|||
value,
|
||||
});
|
||||
|
||||
export const addToListEditor = accountId => (dispatch, getState) => {
|
||||
dispatch(addToList(getState().getIn(['listEditor', 'listId']), accountId));
|
||||
export const addToListEditor = (id, type) => (dispatch, getState) => {
|
||||
dispatch(addToList(getState().getIn(['listEditor', 'listId']), id, type));
|
||||
};
|
||||
|
||||
export const addToList = (listId, accountId) => (dispatch, getState) => {
|
||||
dispatch(addToListRequest(listId, accountId));
|
||||
|
||||
api(getState).post(`/api/v1/lists/${listId}/accounts`, { account_ids: [accountId] })
|
||||
.then(() => dispatch(addToListSuccess(listId, accountId)))
|
||||
.catch(err => dispatch(addToListFail(listId, accountId, err)));
|
||||
export const addToList = (listId, id, type) => (dispatch, getState) => {
|
||||
dispatch(addToListRequest(listId, id, type));
|
||||
|
||||
if ('tags' === type) {
|
||||
api(getState).post(`/api/v1/lists/${listId}/tags`, { tag_ids: [id] })
|
||||
.then((data) => dispatch(addToListSuccess(listId, id, type, data)))
|
||||
.catch(err => dispatch(addToListFail(listId, id, type, err)));
|
||||
} else {
|
||||
api(getState).post(`/api/v1/lists/${listId}/accounts`, { account_ids: [id] })
|
||||
.then(() => dispatch(addToListSuccess(listId, id, type)))
|
||||
.catch(err => dispatch(addToListFail(listId, id, type, err)));
|
||||
}
|
||||
};
|
||||
|
||||
export const addToListRequest = (listId, accountId) => ({
|
||||
export const addToListRequest = (listId, id, type) => ({
|
||||
type: LIST_EDITOR_ADD_REQUEST,
|
||||
addType: type,
|
||||
listId,
|
||||
accountId,
|
||||
id,
|
||||
});
|
||||
|
||||
export const addToListSuccess = (listId, accountId) => ({
|
||||
export const addToListSuccess = (listId, id, type, data) => ({
|
||||
type: LIST_EDITOR_ADD_SUCCESS,
|
||||
addType: type,
|
||||
listId,
|
||||
accountId,
|
||||
id,
|
||||
data,
|
||||
});
|
||||
|
||||
export const addToListFail = (listId, accountId, error) => ({
|
||||
export const addToListFail = (listId, id, type, error) => ({
|
||||
type: LIST_EDITOR_ADD_FAIL,
|
||||
addType: type,
|
||||
listId,
|
||||
accountId,
|
||||
id,
|
||||
error,
|
||||
});
|
||||
|
||||
export const removeFromListEditor = accountId => (dispatch, getState) => {
|
||||
dispatch(removeFromList(getState().getIn(['listEditor', 'listId']), accountId));
|
||||
export const removeFromListEditor = (id, type) => (dispatch, getState) => {
|
||||
dispatch(removeFromList(getState().getIn(['listEditor', 'listId']), id, type));
|
||||
};
|
||||
|
||||
export const removeFromList = (listId, accountId) => (dispatch, getState) => {
|
||||
dispatch(removeFromListRequest(listId, accountId));
|
||||
export const removeFromList = (listId, id, type) => (dispatch, getState) => {
|
||||
dispatch(removeFromListRequest(listId, id, type));
|
||||
|
||||
api(getState).delete(`/api/v1/lists/${listId}/accounts`, { params: { account_ids: [accountId] } })
|
||||
.then(() => dispatch(removeFromListSuccess(listId, accountId)))
|
||||
.catch(err => dispatch(removeFromListFail(listId, accountId, err)));
|
||||
if ('tags' === type) {
|
||||
api(getState).delete(`/api/v1/lists/${listId}/tags`, { params: { tag_ids: [id] } })
|
||||
.then(() => dispatch(removeFromListSuccess(listId, id, type)))
|
||||
.catch(err => dispatch(removeFromListFail(listId, id, type, err)));
|
||||
} else {
|
||||
api(getState).delete(`/api/v1/lists/${listId}/accounts`, { params: { account_ids: [id] } })
|
||||
.then(() => dispatch(removeFromListSuccess(listId, id, type)))
|
||||
.catch(err => dispatch(removeFromListFail(listId, id, type, err)));
|
||||
}
|
||||
};
|
||||
|
||||
export const removeFromListRequest = (listId, accountId) => ({
|
||||
export const removeFromListRequest = (listId, id, type) => ({
|
||||
type: LIST_EDITOR_REMOVE_REQUEST,
|
||||
removeType: type,
|
||||
listId,
|
||||
accountId,
|
||||
id,
|
||||
});
|
||||
|
||||
export const removeFromListSuccess = (listId, accountId) => ({
|
||||
export const removeFromListSuccess = (listId, id, type) => ({
|
||||
type: LIST_EDITOR_REMOVE_SUCCESS,
|
||||
removeType: type,
|
||||
listId,
|
||||
accountId,
|
||||
id,
|
||||
});
|
||||
|
||||
export const removeFromListFail = (listId, accountId, error) => ({
|
||||
export const removeFromListFail = (listId, id, type, error) => ({
|
||||
type: LIST_EDITOR_REMOVE_FAIL,
|
||||
removeType: type,
|
||||
listId,
|
||||
accountId,
|
||||
id,
|
||||
error,
|
||||
});
|
||||
|
||||
|
|
|
@ -32,8 +32,8 @@ const makeMapStateToProps = () => {
|
|||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch, { accountId }) => ({
|
||||
onRemove: () => dispatch(removeFromListEditor(accountId)),
|
||||
onAdd: () => dispatch(addToListEditor(accountId)),
|
||||
onRemove: () => dispatch(removeFromListEditor(accountId, 'accounts')),
|
||||
onAdd: () => dispatch(addToListEditor(accountId, 'accounts')),
|
||||
});
|
||||
|
||||
class Account extends ImmutablePureComponent {
|
||||
|
|
|
@ -0,0 +1,77 @@
|
|||
import PropTypes from 'prop-types';
|
||||
import { PureComponent } from 'react';
|
||||
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
import classNames from 'classnames';
|
||||
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import CancelIcon from '@/material-icons/400-24px/cancel.svg?react';
|
||||
import TagIcon from '@/material-icons/400-24px/tag.svg?react';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
|
||||
import { changeListSuggestions } from '../../../actions/lists';
|
||||
import { addToListEditor } from '../../../actions/lists';
|
||||
|
||||
const messages = defineMessages({
|
||||
addtag: { id: 'lists.addtag', defaultMessage: 'Enter a tag you\'d like to follow' },
|
||||
});
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
value: state.getIn(['listEditor', 'suggestions', 'value']),
|
||||
});
|
||||
|
||||
const mapDispatchToProps = dispatch => ({
|
||||
onSubmit: value => dispatch(addToListEditor(value, 'tags')),
|
||||
onChange: value => dispatch(changeListSuggestions(value)),
|
||||
});
|
||||
|
||||
class AddTag extends PureComponent {
|
||||
|
||||
static propTypes = {
|
||||
intl: PropTypes.object.isRequired,
|
||||
value: PropTypes.string.isRequired,
|
||||
onSubmit: PropTypes.func.isRequired,
|
||||
};
|
||||
|
||||
handleChange = e => {
|
||||
//this.props.value = e.target.value;
|
||||
this.props.onChange(e.target.value);
|
||||
};
|
||||
|
||||
handleKeyUp = e => {
|
||||
if (e.keyCode === 13) {
|
||||
this.props.onSubmit(this.props.value);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
const { value, intl } = this.props;
|
||||
const hasValue = value.length > 0;
|
||||
|
||||
return (
|
||||
<div className='list-editor__search search'>
|
||||
<label>
|
||||
<span style={{ display: 'none' }}>{intl.formatMessage(messages.addtag)}</span>
|
||||
<input
|
||||
className='search__input'
|
||||
type='text'
|
||||
value={value}
|
||||
onChange={this.handleChange}
|
||||
onKeyUp={this.handleKeyUp}
|
||||
placeholder={intl.formatMessage(messages.addtag)}
|
||||
/>
|
||||
</label>
|
||||
|
||||
<div role='button' tabIndex={0} className='search__icon'>
|
||||
<Icon id='add' icon={TagIcon} className={classNames({ active: !hasValue })} />
|
||||
<Icon id='times-circle' icon={CancelIcon} aria-label={intl.formatMessage(messages.addtag)} className={classNames({ active: hasValue })} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default connect(mapStateToProps, mapDispatchToProps)(injectIntl(AddTag));
|
|
@ -0,0 +1,69 @@
|
|||
import PropTypes from 'prop-types';
|
||||
|
||||
import { defineMessages, injectIntl } from 'react-intl';
|
||||
|
||||
import ImmutablePureComponent from 'react-immutable-pure-component';
|
||||
import { connect } from 'react-redux';
|
||||
|
||||
import TagIcon from '@/material-icons/400-24px/tag.svg?react';
|
||||
import CloseIcon from '@/material-icons/400-24px/close.svg?react';
|
||||
import { Icon } from 'flavours/glitch/components/icon';
|
||||
|
||||
import { removeFromListEditor, addToListEditor } from '../../../actions/lists';
|
||||
import { IconButton } from '../../../components/icon_button';
|
||||
|
||||
const messages = defineMessages({
|
||||
remove: { id: 'lists.tag.remove', defaultMessage: 'Remove from list' },
|
||||
add: { id: 'lists.tag.add', defaultMessage: 'Add to list' },
|
||||
});
|
||||
|
||||
const makeMapStateToProps = () => {
|
||||
const mapStateToProps = (state, { tag, added }) => {
|
||||
return {
|
||||
tag: tag,
|
||||
added: typeof added === 'undefined' ? state.getIn(['listEditor', 'tags', 'items']).includes(tag) : added,
|
||||
}
|
||||
};
|
||||
|
||||
return mapStateToProps;
|
||||
};
|
||||
|
||||
const mapDispatchToProps = (dispatch, { tag }) => ({
|
||||
onRemove: () => dispatch(removeFromListEditor(tag.id, 'tags')),
|
||||
onAdd: () => dispatch(addToListEditor(tag.id, 'tags')),
|
||||
});
|
||||
|
||||
class Tag extends ImmutablePureComponent {
|
||||
|
||||
static propTypes = {
|
||||
tag: PropTypes.object.isRequired,
|
||||
intl: PropTypes.object.isRequired,
|
||||
onRemove: PropTypes.func.isRequired,
|
||||
onAdd: PropTypes.func.isRequired,
|
||||
added: PropTypes.bool,
|
||||
};
|
||||
|
||||
static defaultProps = {
|
||||
added: false,
|
||||
};
|
||||
|
||||
render() {
|
||||
const { tag, intl, onRemove } = this.props;
|
||||
|
||||
return (
|
||||
<div className='list_tag'>
|
||||
<Icon icon={TagIcon} />
|
||||
<div className='list_tag__display-name'>
|
||||
{tag.name}
|
||||
</div>
|
||||
|
||||
<div className='list_tag__relationship'>
|
||||
<IconButton icon='times' iconComponent={CloseIcon} title={intl.formatMessage(messages.remove)} onClick={onRemove} />
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
export default connect(makeMapStateToProps, mapDispatchToProps)(injectIntl(Tag));
|
|
@ -12,10 +12,13 @@ import { setupListEditor, clearListSuggestions, resetListEditor } from '../../ac
|
|||
import Motion from '../ui/util/optional_motion';
|
||||
|
||||
import Account from './components/account';
|
||||
import Tag from './components/tag';
|
||||
import EditListForm from './components/edit_list_form';
|
||||
import Search from './components/search';
|
||||
import AddTag from './components/add_tag';
|
||||
|
||||
const mapStateToProps = state => ({
|
||||
tags: state.getIn(['listEditor', 'tags', 'items']),
|
||||
accountIds: state.getIn(['listEditor', 'accounts', 'items']),
|
||||
searchAccountIds: state.getIn(['listEditor', 'suggestions', 'items']),
|
||||
});
|
||||
|
@ -27,6 +30,9 @@ const mapDispatchToProps = dispatch => ({
|
|||
});
|
||||
|
||||
class ListEditor extends ImmutablePureComponent {
|
||||
state = {
|
||||
currentTab: 'accounts',
|
||||
};
|
||||
|
||||
static propTypes = {
|
||||
listId: PropTypes.string.isRequired,
|
||||
|
@ -35,6 +41,7 @@ class ListEditor extends ImmutablePureComponent {
|
|||
onInitialize: PropTypes.func.isRequired,
|
||||
onClear: PropTypes.func.isRequired,
|
||||
onReset: PropTypes.func.isRequired,
|
||||
tags: ImmutablePropTypes.list.isRequired,
|
||||
accountIds: ImmutablePropTypes.list.isRequired,
|
||||
searchAccountIds: ImmutablePropTypes.list.isRequired,
|
||||
};
|
||||
|
@ -49,30 +56,45 @@ class ListEditor extends ImmutablePureComponent {
|
|||
onReset();
|
||||
}
|
||||
|
||||
render () {
|
||||
const { accountIds, searchAccountIds, onClear } = this.props;
|
||||
const showSearch = searchAccountIds.size > 0;
|
||||
switchToTab(tab) {
|
||||
this.setState({ ...this.state, currentTab: tab });
|
||||
}
|
||||
|
||||
render () {
|
||||
const { accountIds, tags, searchAccountIds, onClear } = this.props;
|
||||
const showSearch = searchAccountIds.size > 0;
|
||||
return (
|
||||
<div className='modal-root__modal list-editor'>
|
||||
<EditListForm />
|
||||
<div className='tab__container'>
|
||||
<span onClick={() => this.switchToTab('accounts')} className={'tab ' + ('accounts' == this.state.currentTab ? 'tab__active' : '')}>Accounts ({accountIds.size})</span>
|
||||
<span onClick={() => this.switchToTab('tags')} className={'tab ' + ('tags' == this.state.currentTab ? 'tab__active' : '')}>Tags ({tags.size})</span>
|
||||
</div>
|
||||
<div id='list_editor_accounts' className={'accounts' == this.state.currentTab ? 'tab__active' : 'tab__inactive'}>
|
||||
<Search />
|
||||
<div className='drawer__pager'>
|
||||
<div className='drawer__inner list-editor__accounts'>
|
||||
{accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
|
||||
</div>
|
||||
|
||||
<Search />
|
||||
{showSearch && <div role='button' tabIndex={-1} className='drawer__backdrop' onClick={onClear} />}
|
||||
|
||||
<div className='drawer__pager'>
|
||||
<div className='drawer__inner list-editor__accounts'>
|
||||
{accountIds.map(accountId => <Account key={accountId} accountId={accountId} added />)}
|
||||
<Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
|
||||
{({ x }) => (
|
||||
<div className='drawer__inner backdrop' style={{ transform: x === 0 ? null : `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
|
||||
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
|
||||
</div>
|
||||
)}
|
||||
</Motion>
|
||||
</div>
|
||||
</div>
|
||||
<div id='list_editor_tags' className={'tags' == this.state.currentTab ? 'tab__active' : 'tab__inactive'}>
|
||||
<AddTag />
|
||||
<div className='drawer__pager'>
|
||||
<div className='drawer__inner list-editor__accounts'>
|
||||
{tags.map(tag => <Tag key={tag.name} tag={tag} added />)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showSearch && <div role='button' tabIndex={-1} className='drawer__backdrop' onClick={onClear} />}
|
||||
|
||||
<Motion defaultStyle={{ x: -100 }} style={{ x: spring(showSearch ? 0 : -100, { stiffness: 210, damping: 20 }) }}>
|
||||
{({ x }) => (
|
||||
<div className='drawer__inner backdrop' style={{ transform: x === 0 ? null : `translateX(${x}%)`, visibility: x === -100 ? 'hidden' : 'visible' }}>
|
||||
{searchAccountIds.map(accountId => <Account key={accountId} accountId={accountId} />)}
|
||||
</div>
|
||||
)}
|
||||
</Motion>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
|
|
@ -13,6 +13,9 @@ import {
|
|||
LIST_ACCOUNTS_FETCH_REQUEST,
|
||||
LIST_ACCOUNTS_FETCH_SUCCESS,
|
||||
LIST_ACCOUNTS_FETCH_FAIL,
|
||||
LIST_TAGS_FETCH_REQUEST,
|
||||
LIST_TAGS_FETCH_SUCCESS,
|
||||
LIST_TAGS_FETCH_FAIL,
|
||||
LIST_EDITOR_SUGGESTIONS_READY,
|
||||
LIST_EDITOR_SUGGESTIONS_CLEAR,
|
||||
LIST_EDITOR_SUGGESTIONS_CHANGE,
|
||||
|
@ -33,6 +36,12 @@ const initialState = ImmutableMap({
|
|||
isLoading: false,
|
||||
}),
|
||||
|
||||
tags: ImmutableMap({
|
||||
items: ImmutableList(),
|
||||
loaded: false,
|
||||
isLoading: false,
|
||||
}),
|
||||
|
||||
suggestions: ImmutableMap({
|
||||
value: '',
|
||||
items: ImmutableList(),
|
||||
|
@ -80,6 +89,16 @@ export default function listEditorReducer(state = initialState, action) {
|
|||
map.set('loaded', true);
|
||||
map.set('items', ImmutableList(action.accounts.map(item => item.id)));
|
||||
}));
|
||||
case LIST_TAGS_FETCH_REQUEST:
|
||||
return state.setIn(['tags', 'isLoading'], true);
|
||||
case LIST_TAGS_FETCH_FAIL:
|
||||
return state.setIn(['tags', 'isLoading'], false);
|
||||
case LIST_TAGS_FETCH_SUCCESS:
|
||||
return state.update('tags', tags => tags.withMutations(map => {
|
||||
map.set('isLoading', false);
|
||||
map.set('loaded', true);
|
||||
map.set('items', ImmutableList(action.tags));
|
||||
}));
|
||||
case LIST_EDITOR_SUGGESTIONS_CHANGE:
|
||||
return state.setIn(['suggestions', 'value'], action.value);
|
||||
case LIST_EDITOR_SUGGESTIONS_READY:
|
||||
|
@ -90,9 +109,12 @@ export default function listEditorReducer(state = initialState, action) {
|
|||
map.set('value', '');
|
||||
}));
|
||||
case LIST_EDITOR_ADD_SUCCESS:
|
||||
return state.updateIn(['accounts', 'items'], list => list.unshift(action.accountId));
|
||||
if (action.data && action.data.data !== undefined) {
|
||||
return state.setIn([action.addType, 'items'], ImmutableList(action.data.data));
|
||||
}
|
||||
return state.updateIn([action.addType, 'items'], list => list.unshift(action.id));
|
||||
case LIST_EDITOR_REMOVE_SUCCESS:
|
||||
return state.updateIn(['accounts', 'items'], list => list.filterNot(item => item === action.accountId));
|
||||
return state.updateIn([action.removeType, 'items'], list => list.filterNot(item => item === action.id || item.id === action.id));
|
||||
default:
|
||||
return state;
|
||||
}
|
||||
|
|
|
@ -116,3 +116,7 @@ export const getAccountHidden = createSelector([
|
|||
export const getStatusList = createSelector([
|
||||
(state, type) => state.getIn(['status_lists', type, 'items']),
|
||||
], (items) => items.toList());
|
||||
|
||||
export const getListEditorTagList = createSelector([
|
||||
(state) => state.getIn(['listEditor', 'tags', 'items']),
|
||||
], (items) => items.toList());
|
||||
|
|
|
@ -2042,7 +2042,7 @@ body > [data-popper-placement] {
|
|||
}
|
||||
}
|
||||
|
||||
.account__wrapper {
|
||||
.account__wrapper, .tag__wrapper {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
align-items: center;
|
||||
|
@ -2114,7 +2114,7 @@ a .account__avatar {
|
|||
}
|
||||
}
|
||||
|
||||
.account__relationship {
|
||||
.account__relationship, .tag__relationship {
|
||||
white-space: nowrap;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
@ -7781,11 +7781,42 @@ noscript {
|
|||
border-radius: 8px 8px 0 0;
|
||||
}
|
||||
|
||||
.tab__container {
|
||||
display: flex;
|
||||
.tab {
|
||||
flex-grow: 1;
|
||||
flex-basis: 0;
|
||||
display: block;
|
||||
padding: 5px;
|
||||
background: $ui-base-color;
|
||||
text-align: center;
|
||||
}
|
||||
.tab.tab__active {
|
||||
font-weight: bold;
|
||||
background: lighten($ui-base-color, 13%);
|
||||
}
|
||||
}
|
||||
.tab__inactive {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.drawer__pager {
|
||||
height: 50vh;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.list_tag {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
.list_tag__display-name {
|
||||
flex-grow: 1;
|
||||
}
|
||||
.list_tag__relationship {
|
||||
flex-grow: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.drawer__inner {
|
||||
border-radius: 0 0 8px 8px;
|
||||
|
||||
|
|
|
@ -3,7 +3,7 @@
|
|||
class REST::TagSerializer < ActiveModel::Serializer
|
||||
include RoutingHelper
|
||||
|
||||
attributes :name, :url, :history
|
||||
attributes :name, :url, :history, :id
|
||||
|
||||
attribute :following, if: :current_user?
|
||||
|
||||
|
@ -15,6 +15,10 @@ class REST::TagSerializer < ActiveModel::Serializer
|
|||
object.display_name
|
||||
end
|
||||
|
||||
def id
|
||||
object.id.to_s
|
||||
end
|
||||
|
||||
def following
|
||||
if instance_options && instance_options[:relationships]
|
||||
instance_options[:relationships].following_map[object.id] || false
|
||||
|
|
Loading…
Reference in New Issue