[IMPROVE] Rewrite create direct modal (#22209)
* improve: UserAutoCompleteMultiple to wide scope Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com> * improve: replace create direct modal Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com> * fix: incorrect type Co-authored-by: gabriellsh <40830821+gabriellsh@users.noreply.github.com> Co-authored-by: Tasso Evangelista <tasso.evangelista@rocket.chat>pull/22272/head^2
Douglas Fabris
5 years ago
committed by
GitHub
parent
ce2443f149
commit
d01d6c9d59
@ -1,31 +0,0 @@ |
||||
<template name="CreateDirectMessage"> |
||||
|
||||
<section class="create-channel"> |
||||
<div class="create-channel__wrapper"> |
||||
<form id="create-dm" class="create-channel__content"> |
||||
<div class="create-channel__inputs"> |
||||
{{> SearchCreateDiscussion |
||||
onClickTag=onClickTagUser |
||||
deleteLastItem=deleteLastItemUser |
||||
list=selectedUsers |
||||
onSelect=onSelectUser |
||||
collection='UserAndRoom' |
||||
endpoint='users.autocomplete' |
||||
field='username' |
||||
sort='username' |
||||
label="Direct_message_creation_description" |
||||
placeholder="Username_Placeholder" |
||||
name="directMessageUsers" |
||||
icon="at" |
||||
noMatchTemplate="userSearchEmpty" |
||||
templateItem="popupList_item_default" |
||||
modifier=userModifier |
||||
}} |
||||
</div> |
||||
</form> |
||||
<div class="rc-input"> |
||||
<button form="create-dm" class="rc-button rc-button--primary js-save-dm {{createIsDisabled}}" {{createIsDisabled}}>{{_ " Create "}}</button> |
||||
</div> |
||||
</div> |
||||
</section> |
||||
</template> |
||||
@ -1,98 +0,0 @@ |
||||
import { Meteor } from 'meteor/meteor'; |
||||
import { Template } from 'meteor/templating'; |
||||
import { ReactiveVar } from 'meteor/reactive-var'; |
||||
|
||||
import { roomTypes } from '../../../../utils/client'; |
||||
import { call } from '../../../../ui-utils/client'; |
||||
import { waitUntilRoomBeInserted } from '../../../../ui-utils/client/lib/openRoom'; |
||||
import './CreateDirectMessage.html'; |
||||
|
||||
Template.CreateDirectMessage.helpers({ |
||||
onSelectUser() { |
||||
return Template.instance().onSelectUser; |
||||
}, |
||||
createIsDisabled() { |
||||
return Template.instance().selectedUsers.get().length === 0 ? 'disabled' : ''; |
||||
}, |
||||
parentChannel() { |
||||
const instance = Template.instance(); |
||||
return instance.parentChannel.get(); |
||||
}, |
||||
selectedUsers() { |
||||
const myUsername = Meteor.user().username; |
||||
const { message } = this; |
||||
const users = Template.instance().selectedUsers.get().map((e) => e); |
||||
if (message) { |
||||
users.unshift(message.u); |
||||
} |
||||
return users.filter(({ username }) => myUsername !== username); |
||||
}, |
||||
|
||||
onClickTagUser() { |
||||
return Template.instance().onClickTagUser; |
||||
}, |
||||
deleteLastItemUser() { |
||||
return Template.instance().deleteLastItemUser; |
||||
}, |
||||
onClickTagRoom() { |
||||
return Template.instance().onClickTagRoom; |
||||
}, |
||||
selectedRoom() { |
||||
return Template.instance().selectedRoom.get(); |
||||
}, |
||||
userModifier() { |
||||
return (filter, text = '') => { |
||||
const f = filter.get(); |
||||
return `@${ f.length === 0 ? text : text.replace(new RegExp(filter.get(), 'i'), (part) => `<strong>${ part }</strong>`) }`; |
||||
}; |
||||
}, |
||||
nameSuggestion() { |
||||
return Template.instance().discussionName.get(); |
||||
}, |
||||
}); |
||||
|
||||
Template.CreateDirectMessage.events({ |
||||
async 'submit #create-dm, click .js-save-dm'(event, instance) { |
||||
event.preventDefault(); |
||||
const users = instance.selectedUsers.get().map(({ username }) => username).filter((value, index, self) => self.indexOf(value) === index); |
||||
|
||||
const result = await call('createDirectMessage', ...users); |
||||
|
||||
if (instance.data.onCreate) { |
||||
instance.data.onCreate(result); |
||||
} |
||||
|
||||
await waitUntilRoomBeInserted(result.rid); |
||||
|
||||
const user = Meteor.user(); |
||||
roomTypes.openRouteLink(result.t, { ...result, name: result.usernames.filter((username) => username !== user.username).join(', ') }); |
||||
}, |
||||
}); |
||||
|
||||
Template.CreateDirectMessage.onRendered(function() { |
||||
this.find('#directMessageUsers').focus(); |
||||
}); |
||||
|
||||
Template.CreateDirectMessage.onCreated(function() { |
||||
this.selectedUsers = new ReactiveVar([]); |
||||
|
||||
this.onSelectUser = ({ item: user }) => { |
||||
if (user.username === Meteor.user().username) { |
||||
return; |
||||
} |
||||
const users = this.selectedUsers.get(); |
||||
if (!users.find((u) => user.username === u.username)) { |
||||
this.selectedUsers.set([...users, user]); |
||||
} |
||||
}; |
||||
|
||||
this.onClickTagUser = ({ username }) => { |
||||
this.selectedUsers.set(this.selectedUsers.get().filter((user) => user.username !== username)); |
||||
}; |
||||
|
||||
this.deleteLastItemUser = () => { |
||||
const arr = this.selectedUsers.get(); |
||||
arr.pop(); |
||||
this.selectedUsers.set(arr); |
||||
}; |
||||
}); |
||||
@ -1,7 +1,7 @@ |
||||
import { Options } from '@rocket.chat/fuselage'; |
||||
import React from 'react'; |
||||
|
||||
import UserAvatar from '../../../../client/components/avatar/UserAvatar'; |
||||
import UserAvatar from '../avatar/UserAvatar'; |
||||
|
||||
const Avatar = ({ value, ...props }) => ( |
||||
<UserAvatar size={Options.AvatarSize} username={value} {...props} /> |
||||
@ -0,0 +1,70 @@ |
||||
import { Box, Modal, ButtonGroup, Button } from '@rocket.chat/fuselage'; |
||||
import { useMutableCallback } from '@rocket.chat/fuselage-hooks'; |
||||
import React, { FC, useState, memo } from 'react'; |
||||
|
||||
import { IUser } from '../../../definition/IUser'; |
||||
import UserAutoCompleteMultiple from '../../components/UserAutoCompleteMultiple'; |
||||
import { useTranslation } from '../../contexts/TranslationContext'; |
||||
import { useEndpointActionExperimental } from '../../hooks/useEndpointAction'; |
||||
import { goToRoomById } from '../../lib/goToRoomById'; |
||||
|
||||
type Username = IUser['username']; |
||||
|
||||
type CreateDirectMessageProps = { |
||||
onClose: () => void; |
||||
}; |
||||
|
||||
const CreateDirectMessage: FC<CreateDirectMessageProps> = ({ onClose }) => { |
||||
const t = useTranslation(); |
||||
const [users, setUsers] = useState<Array<Username>>([]); |
||||
|
||||
const createDirect = useEndpointActionExperimental('POST', 'dm.create'); |
||||
|
||||
const onChangeUsers = useMutableCallback((value: Username, action: string) => { |
||||
if (!action) { |
||||
if (users.includes(value)) { |
||||
return; |
||||
} |
||||
return setUsers([...users, value]); |
||||
} |
||||
setUsers(users.filter((current) => current !== value)); |
||||
}); |
||||
|
||||
const onCreate = useMutableCallback(async () => { |
||||
try { |
||||
const { |
||||
room: { rid }, |
||||
} = await createDirect({ usernames: users.join(',') }); |
||||
|
||||
goToRoomById(rid); |
||||
onClose(); |
||||
} catch (error) { |
||||
console.warn(error); |
||||
} |
||||
}); |
||||
|
||||
return ( |
||||
<Modal> |
||||
<Modal.Header> |
||||
<Modal.Title>{t('Direct_Messages')}</Modal.Title> |
||||
<Modal.Close onClick={onClose} /> |
||||
</Modal.Header> |
||||
<Modal.Content> |
||||
<Box>{t('Direct_message_creation_description')}</Box> |
||||
<Box mbs='x16' display='flex' width='full'> |
||||
<UserAutoCompleteMultiple value={users} onChange={onChangeUsers} /> |
||||
</Box> |
||||
</Modal.Content> |
||||
<Modal.Footer> |
||||
<ButtonGroup align='end'> |
||||
<Button onClick={onClose}>{t('Cancel')}</Button> |
||||
<Button disabled={users.length < 1} onClick={onCreate} primary> |
||||
{t('Create')} |
||||
</Button> |
||||
</ButtonGroup> |
||||
</Modal.Footer> |
||||
</Modal> |
||||
); |
||||
}; |
||||
|
||||
export default memo(CreateDirectMessage); |
||||
Loading…
Reference in new issue