Skip to content

Commit

Permalink
add tags
Browse files Browse the repository at this point in the history
  • Loading branch information
@MartinSchoeler
MartinSchoeler committed Aug 21, 2020
1 parent ebcfbd3 commit 4a23db7
Show file tree
Hide file tree
Showing 4 changed files with 78 additions and 38 deletions.
87 changes: 56 additions & 31 deletions client/omnichannel/currentChats/CurrentChatsPage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,9 @@ import React, { useEffect, useMemo } from 'react';
import { TextInput, Box, Icon, MultiSelect, Select, InputBox, Menu } from '@rocket.chat/fuselage';
import { useMutableCallback } from '@rocket.chat/fuselage-hooks';
import moment from 'moment';
import { useSubscription } from 'use-subscription';

import { formsSubscription } from '../additionalForms';
import Page from '../../components/basic/Page';
import { useTranslation } from '../../contexts/TranslationContext';
import { useEndpointDataExperimental } from '../../hooks/useEndpointDataExperimental';
Expand Down Expand Up @@ -30,13 +32,13 @@ const RemoveAllClosed = ({ handleClearFilters, handleRemoveClosed, ...props }) =
...canRemove && {
removeClosed: {
label: <Box color='danger'>
<Icon name='trash' size='x16' marginInlineEnd='x4' />{t('Remove')}
<Icon name='trash' size='x16' marginInlineEnd='x4' />{t('Delete_all_closed_chats')}
</Box>,
action: handleRemoveClosed,
},
},
};
return <Menu options={menuOptions} {...props}/>;
return <Menu options={menuOptions} placement='bottom-start' {...props}/>;
};


Expand All @@ -50,14 +52,19 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
const agentOptions = useMemo(() => (agents && agents.users ? agents.users.map(({ _id, username }) => [_id, username || _id]) : []), [agents]);
const statusOptions = [['all', t('All')], ['closed', t('Closed')], ['opened', t('Open')]];

const { values, handlers, reset } = useForm({ guest: '', servedBy: [], status: 'all', department: undefined, from: '', to: '' });
useEffect(() => {
!depOptions.find((dep) => dep[0] === 'all') && depOptions.unshift(['all', t('All')]);
}, [depOptions, t]);

const { values, handlers, reset } = useForm({ guest: '', servedBy: [], status: 'all', department: 'all', from: '', to: '', tags: [] });
const {
handleGuest,
handleServedBy,
handleStatus,
handleDepartment,
handleFrom,
handleTo,
handleTags,
} = handlers;
const {
guest,
Expand All @@ -66,8 +73,18 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
department,
from,
to,
tags,
} = values;

const forms = useSubscription(formsSubscription);

const {
useCurrentChatTags = () => {},
} = forms;

const Tags = useCurrentChatTags();


const onSubmit = useMutableCallback((e) => e.preventDefault());

useEffect(() => {
Expand All @@ -78,9 +95,9 @@ const FilterByText = ({ setFilter, reload, ...props }) => {
department,
from: from && moment(new Date(from)).utc().format('YYYY-MM-DDTHH:mm:ss'),
to: to && moment(new Date(to)).utc().format('YYYY-MM-DDTHH:mm:ss'),
tags,
});
console.log(servedBy);
}, [setFilter, guest, servedBy, status, department, from, to]);
}, [setFilter, guest, servedBy, status, department, from, to, tags]);

const handleClearFilters = useMutableCallback(() => {
reset();
Expand All @@ -90,36 +107,44 @@ const FilterByText = ({ setFilter, reload, ...props }) => {

const handleRemoveClosed = useMutableCallback(async () => {
await removeClosedChats();
console.log(props);
reload();
});

return <Box mb='x16' is='form' onSubmit={onSubmit} display='flex' flexDirection='row' {...props}>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4' >{t('Guest')}:</Label>
<TextInput flexShrink={0} placeholder={t('Guest')} onChange={handleGuest} value={guest} />
</Box>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4'>{t('Served_By')}:</Label>
<MultiSelect flexShrink={0} options={agentOptions} value={servedBy} onChange={handleServedBy} placeholder={t('Served_By')}/>
</Box>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4'>{t('Department')}:</Label>
<Select flexShrink={0} options={depOptions} value={department} onChange={handleDepartment} placeholder={t('Department')}/>
</Box>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4'>{t('Status')}:</Label>
<Select flexShrink={0} options={statusOptions} value={status} onChange={handleStatus} placeholder={t('Status')}/>
</Box>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4'>{t('From')}:</Label>
<InputBox type='date' flexShrink={0} placeholder={t('From')} onChange={handleFrom} value={from} />
</Box>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4'>{t('To')}:</Label>
<InputBox type='date' flexShrink={0} placeholder={t('To')} onChange={handleTo} value={to} />
return <Box mb='x16' is='form' onSubmit={onSubmit} display='flex' flexDirection='column' {...props}>
<Box display='flex' flexDirection='row' flexWrap='wrap' {...props}>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4' >{t('Guest')}:</Label>
<TextInput flexShrink={0} placeholder={t('Guest')} onChange={handleGuest} value={guest} />
</Box>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4'>{t('Served_By')}:</Label>
<MultiSelect flexShrink={0} options={agentOptions} value={servedBy} onChange={handleServedBy} placeholder={t('Served_By')}/>
</Box>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4'>{t('Department')}:</Label>
<Select flexShrink={0} options={depOptions} value={department} onChange={handleDepartment} placeholder={t('Department')}/>
</Box>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4'>{t('Status')}:</Label>
<Select flexShrink={0} options={statusOptions} value={status} onChange={handleStatus} placeholder={t('Status')}/>
</Box>
<Box display='flex' mie='x8' flexGrow={0} flexDirection='column'>
<Label mb='x4'>{t('From')}:</Label>
<InputBox type='date' flexShrink={0} placeholder={t('From')} onChange={handleFrom} value={from} />
</Box>
<Box display='flex' mie='x8' flexGrow={0} flexDirection='column'>
<Label mb='x4'>{t('To')}:</Label>
<InputBox type='date' flexShrink={0} placeholder={t('To')} onChange={handleTo} value={to} />
</Box>

<RemoveAllClosed handleClearFilters={handleClearFilters} handleRemoveClosed={handleRemoveClosed}/>
</Box>
<RemoveAllClosed handleClearFilters={handleClearFilters} handleRemoveClosed={handleRemoveClosed}/>
{Tags && <Box display='flex' flexDirection='row' marginBlockStart='x8' {...props}>
<Box display='flex' mie='x8' flexGrow={1} flexDirection='column'>
<Label mb='x4'>{t('Tags')}:</Label>
<Tags value={tags} handler={handleTags} />
</Box>
</Box>}
</Box>;
};

Expand Down
15 changes: 8 additions & 7 deletions client/omnichannel/currentChats/CurrentChatsRoute.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ export function RemoveCurrentChatButton({ _id, reload }) {

const sortDir = (sortDir) => (sortDir === 'asc' ? 1 : -1);

const useQuery = ({ guest, servedBy, department, status, from, to, itemsPerPage, current }, [column, direction]) => useMemo(() => {
const useQuery = ({ guest, servedBy, department, status, from, to, tags, itemsPerPage, current }, [column, direction]) => useMemo(() => {
const query = {
roomName: guest,
sort: JSON.stringify({ [column]: sortDir(direction), usernames: column === 'name' ? sortDir(direction) : undefined }),
Expand All @@ -56,13 +56,16 @@ const useQuery = ({ guest, servedBy, department, status, from, to, itemsPerPage,
query.agents = servedBy;
}
if (department && department.length > 0) {
console.log(department);
query.departmentId = department;
if (department !== 'all') {
query.departmentId = department;
}
}
if (tags && tags.length > 0) {
query.tags = tags;
}

console.log(query);
return query;
}, [guest, servedBy, department, from, to, status, column, direction, itemsPerPage, current]);
}, [guest, column, direction, itemsPerPage, current, from, to, status, servedBy, department, tags]);

function CurrentChatsRoute() {
const t = useTranslation();
Expand Down Expand Up @@ -95,8 +98,6 @@ function CurrentChatsRoute() {
const { data, reload } = useEndpointDataExperimental('livechat/rooms', query) || {};
const { data: departments } = useEndpointDataExperimental('livechat/department', query) || {};

console.log(data, departments);

const header = useMemo(() => [
<Th key={'name'} direction={sort[1]} active={sort[0] === 'name'} onClick={onHeaderClick} sort='name' w='x120'>{t('Name')}</Th>,
<Th key={'departmentId'} direction={sort[1]} active={sort[0] === 'departmentId'} onClick={onHeaderClick} sort='departmentId' w='x200'>{t('Department')}</Th>,
Expand Down
1 change: 1 addition & 0 deletions ee/client/omnichannel/additionalForms/register.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,4 +14,5 @@ hasLicense('livechat-enterprise').then((enabled) => {
registerForm({ useCustomFieldsAdditionalForm: () => useMemo(() => lazy(() => import('./CustomFieldsAdditionalForm')), []) });
registerForm({ useBusinessHoursTimeZone: () => useMemo(() => lazy(() => import('./BusinessHoursTimeZone')), []) });
registerForm({ useBusinessHoursMultiple: () => useMemo(() => lazy(() => import('./BusinessHoursMultiple')), []) });
registerForm({ useCurrentChatTags: () => useMemo(() => lazy(() => import('../tags/CurrentChatTags')), []) });
});
13 changes: 13 additions & 0 deletions ee/client/omnichannel/tags/CurrentChatTags.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,13 @@
import { MultiSelect } from '@rocket.chat/fuselage';
import React, { useMemo } from 'react';

import { useEndpointDataExperimental } from '../../../../client/hooks/useEndpointDataExperimental';

const CurrentChatTags = ({ value, handler, ...props }) => {
const { data } = useEndpointDataExperimental('livechat/tags.list');
const options = useMemo(() => (data && data.tags ? data.tags.map(({ name }) => [name, name]) : []), [data]);

return <MultiSelect options={options} value={value} onChange={handler} flexGrow={1} {...props}/>;
};

export default CurrentChatTags;

0 comments on commit 4a23db7

Please sign in to comment.