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

[NEW] Add forms to view and edit Livechat agents info #15703

Merged
merged 13 commits into from
Nov 21, 2019
Merged

[NEW] Add forms to view and edit Livechat agents info #15703

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
913f4a0
Initial commit.
renatobecker Oct 23, 2019
55b30a1
Add new forms to view and edit agent data.
renatobecker Oct 25, 2019
62bc7d6
Add new form to edit agent data.
renatobecker Oct 29, 2019
22f4c79
Fix reactive data on custom forms.
renatobecker Oct 29, 2019
15268c8
Replace publications by REST.
renatobecker Oct 30, 2019
176af81
Added new forms to view and edit agent info.
renatobecker Oct 30, 2019
3df238b
Remove unnecessary throw error.
renatobecker Oct 30, 2019
e16fb62
Merge branch 'develop' into add-livechat-agent-view-info
renatobecker Nov 20, 2019
c66f667
Merge branch 'develop' of github.com:RocketChat/Rocket.Chat into add-…
ggazzo Nov 20, 2019
44f8604
Add new templates to import file.
renatobecker Nov 20, 2019
b915a3e
Merge branch 'develop' into add-livechat-agent-view-info
renatobecker Nov 20, 2019
fe2128d
Merge branch 'add-livechat-agent-view-info' of github.com:RocketChat/…
ggazzo Nov 21, 2019
ee24bd3
fix review
ggazzo Nov 21, 2019
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
2 changes: 1 addition & 1 deletion app/livechat/client/route.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,8 +53,8 @@ AccountBox.addRoute({
name: 'livechat-agents',
path: '/agents',
sideNav: 'livechatFlex',
i18nPageTitle: 'Livechat_agents',
pageTemplate: 'livechatAgents',
customContainer: true,
}, livechatManagerRoutes, load);

AccountBox.addRoute({
Expand Down
172 changes: 91 additions & 81 deletions app/livechat/client/views/app/livechatAgents.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,89 +1,99 @@
<template name="livechatAgents">
{{#requiresPermission 'manage-livechat-agents'}}
<form id="form-agent" class="form-inline">
<div class="form-group">
{{> livechatAutocompleteUser
onClickTag=onClickTagAgents
list=selectedAgents
deleteLastItem=deleteLastAgent
onSelect=onSelectAgents
collection='UserAndRoom'
subscription='userAutocomplete'
field='username'
sort='username'
label="Search_by_username"
placeholder="Search_by_username"
name="username"
exceptions=exceptionsAgents
icon="at"
noMatchTemplate="userSearchEmpty"
templateItem="popupList_item_default"
modifier=agentModifier
}}
</div>
<div class="form-group">
<button name="add" class="rc-button rc-button--primary add" disabled='{{isloading}}'>{{_ "Add"}}</button>
</div>
</form>
{{#requiresPermission 'manage-livechat-agents'}}
<div class="main-content-flex">
<section class="page-container page-list flex-tab-main-content">
{{> header sectionName="Livechat_agents"}}
<div class="content">
<form id="form-agent" class="form-inline">
<div class="form-group">
{{> livechatAutocompleteUser
onClickTag=onClickTagAgents
list=selectedAgents
deleteLastItem=deleteLastAgent
onSelect=onSelectAgents
collection='UserAndRoom'
subscription='userAutocomplete'
field='username'
sort='username'
label="Search_by_username"
placeholder="Search_by_username"
name="username"
exceptions=exceptionsAgents
icon="at"
noMatchTemplate="userSearchEmpty"
templateItem="popupList_item_default"
modifier=agentModifier
}}
</div>
<div class="form-group">
<button name="add" class="rc-button rc-button--primary add" disabled='{{isloading}}'>{{_ "Add"}}</button>
</div>
</form>

<div class="rc-table-content">
<form class="search-form" role="form">
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{#if isReady}}
{{> icon block="rc-input__icon-svg" icon="magnifier" }}
{{else}}
{{> loading }}
{{/if}}
<div class="rc-table-content">
<form class="search-form" role="form">
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{#if isReady}}
{{> icon block="rc-input__icon-svg" icon="magnifier" }}
{{else}}
{{> loading }}
{{/if}}
</div>
<input id="agents-filter" type="text" class="rc-input__element"
placeholder="{{_ "Search"}}" autofocus dir="auto">
</div>
<input id="agents-filter" type="text" class="rc-input__element"
placeholder="{{_ "Search"}}" autofocus dir="auto">
</form>
<div class="results">
{{{_ "Showing_results" agents.length}}}
</div>
</form>
<div class="results">
{{{_ "Showing_results" agents.length}}}
</div>

{{#table fixed='true' onScroll=onTableScroll}}
<thead>
<tr>
<th><div class="table-fake-th">{{_ "Name"}}</div></th>
<th width="33%"><div class="table-fake-th">{{_ "Username"}}</div></th>
<th width="33%"><div class="table-fake-th">{{_ "Email"}}</div></th>
<th width='40px'><div class="table-fake-th">&nbsp;</div></th>
</tr>
</thead>
<tbody>
{{#each agents}}
<tr class="rc-table-tr user-info row-link" data-id="{{_id}}">
<td>
<div class="rc-table-wrapper">
<div class="rc-table-avatar user-image status-{{status}}">{{> avatar username=username}}</div>
<div class="rc-table-info">
<span class="rc-table-title">
{{name}}
</span>
{{#table fixed='true' onScroll=onTableScroll}}
<thead>
<tr>
<th><div class="table-fake-th">{{_ "Name"}}</div></th>
<th width="33%"><div class="table-fake-th">{{_ "Username"}}</div></th>
<th width="33%"><div class="table-fake-th">{{_ "Email"}}</div></th>
<th width='40px'><div class="table-fake-th">&nbsp;</div></th>
</tr>
</thead>
<tbody>
{{#each agents}}
<tr class="rc-table-tr user-info row-link" data-id="{{_id}}">
<td>
<div class="rc-table-wrapper">
<div class="rc-table-avatar user-image status-{{status}}">{{> avatar username=username}}</div>
<div class="rc-table-info">
<span class="rc-table-title">
{{name}}
</span>
</div>
</div>
</div>
<div class="rc-table-wrapper">
<div class="rc-table-info">
<span class="rc-table-title">
{{fname}}
</span>
<div class="rc-table-wrapper">
<div class="rc-table-info">
<span class="rc-table-title">
{{fname}}
</span>
</div>
</div>
</div>
</td>
<td>{{username}}</td>
<td>{{emailAddress}}</td>
<td>
<a href="#remove" class="remove-agent">
<i class="icon-trash"></i>
</a>
</td>
</tr>
{{/each}}
</tbody>
{{/table}}
</td>
<td>{{username}}</td>
<td>{{emailAddress}}</td>
<td>
<a href="#remove" class="remove-agent">
<i class="icon-trash"></i>
</a>
</td>
</tr>
{{/each}}
</tbody>
{{/table}}
</div>
</div>
{{/requiresPermission}}
</template>
</section>
{{#with flexData}}
{{> flexTabBar}}
{{/with}}
</div>
{{/requiresPermission}}
</template>
44 changes: 38 additions & 6 deletions app/livechat/client/views/app/livechatAgents.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import { Meteor } from 'meteor/meteor';
import { Template } from 'meteor/templating';
import { FlowRouter } from 'meteor/kadira:flow-router';
import { ReactiveVar } from 'meteor/reactive-var';
import { ReactiveDict } from 'meteor/reactive-dict';
import _ from 'underscore';

import { modal, call } from '../../../../ui-utils';
import { modal, call, TabBar, RocketChatTabBar } from '../../../../ui-utils';
import { t, handleError, APIClient } from '../../../../utils/client';
import './livechatAgents.html';

Expand Down Expand Up @@ -83,6 +84,12 @@ Template.livechatAgents.helpers({
}
};
},
flexData() {
return {
tabBar: Template.instance().tabBar,
data: Template.instance().tabBarData.get(),
};
},
});

const DEBOUNCE_TIME_FOR_SEARCH_AGENTS_IN_MS = 300;
Expand All @@ -109,7 +116,13 @@ Template.livechatAgents.events({
if (error) {
return handleError(error);
}

if (instance.tabBar.getState() === 'opened') {
instance.tabBar.close();
}

await loadAgents(instance);

modal.open({
title: t('Removed'),
text: t('Agent_removed'),
Expand Down Expand Up @@ -144,23 +157,30 @@ Template.livechatAgents.events({
state.set('loading', false);
}
},

'keydown #agents-filter'(e) {
if (e.which === 13) {
e.stopPropagation();
e.preventDefault();
}
},

'keyup #agents-filter': _.debounce((e, t) => {
e.stopPropagation();
e.preventDefault();
t.filter.set(e.currentTarget.value);
}, DEBOUNCE_TIME_FOR_SEARCH_AGENTS_IN_MS),
/*
'click .agent-info'(e, instance) {

'click .user-info'(e, instance) {
e.preventDefault();
instance.tabBarData.set(FullUser.findOne(this._id));
instance.tabBar.open('admin-user-info');
instance.tabBarData.set({
agentId: this._id,
onRemoveAgent: () => loadAgents(instance),
});

instance.tabBar.setData({ label: t('Agent_Info'), icon: 'livechat' });
instance.tabBar.open('livechat-agent-info');
},
/*
'click .info-tabs button'(e) {
e.preventDefault();
$('.info-tabs button').removeClass('active');
Expand All @@ -181,6 +201,18 @@ Template.livechatAgents.onCreated(function() {
this.ready = new ReactiveVar(true);
this.selectedAgents = new ReactiveVar([]);
this.agents = new ReactiveVar([]);
this.tabBar = new RocketChatTabBar();
this.tabBar.showGroup(FlowRouter.current().route.name);
this.tabBarData = new ReactiveVar();

TabBar.addButton({
groups: ['livechat-agent-users'],
id: 'livechat-agent-info',
i18nTitle: 'Agent_Info',
icon: 'livechat',
template: 'agentInfo',
order: 1,
});

this.onSelectAgents = ({ item: agent }) => {
this.selectedAgents.set([...this.selectedAgents.curValue, agent]);
Expand Down
97 changes: 97 additions & 0 deletions app/livechat/client/views/app/tabbar/agentEdit.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,97 @@
<template name="agentEdit">
{{#unless isReady}}
{{> loading }}
{{else}}
<section class="contextual-bar__content">
<form id="agent-form" data-id="{{agent._id}}">
<div class="rc-form-group">
<label class="rc-form-label">
{{_ "Profile_picture"}}
</label>
<div class="rc-select-avatar">
<div class="rc-select-avatar__preview">
{{> avatar username=agent.username}}
</div>
</div>
</div>
<div class="rc-input rc-form-group">
<label class="rc-input__label">
<div class="rc-input__title">
{{_ "Name"}}
</div>
<div class="rc-input__wrapper">
<input name="name" type="text" class="rc-input__element" id="name" autocomplete="off" value="{{agent.name}}" disabled/>
</div>
</label>
</div>
<div class="rc-input rc-form-group">
<label class="rc-input__label">
<div class="rc-input__title">
{{_ "Username"}}
</div>
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{> icon icon='at' }}
</div>
<input name="name" type="text" class="rc-input__element" id="username" autocomplete="off" value="{{agent.username}}" disabled/>
</div>
</label>
</div>
{{#if agent.emails}}
<div class="rc-form-group">
<div class="rc-input">
<label class="rc-input__label">
<div class="rc-input__title">{{_ "Email"}}</div>
<div class="rc-input__wrapper">
<div class="rc-input__icon">
{{> icon icon='mail' }}
</div>
<input name="name" type="text" class="rc-input__element" id="email" autocomplete="off" value="{{agent.emails.[0].address}}" disabled/>
</div>
</label>
</div>
</div>
{{/if}}
{{#if hasAvailableDepartments}}
<div class="rc-form-group rc-form-group--inline">
<select id="departmentSelect" class="rc-input rc-input--small rc-form-item-inline">
<option value="placeholder" disabled selected>{{_ "Select_department"}}</option>
{{#each dept in availableDepartments}}
<option value="{{dept._id}}">{{dept.name}}</option>
{{/each}}
</select>
<button id="addDepartment" class="rc-button rc-button--primary rc-form-item-inline"><i class="icon-plus"></i></button>
</div>
{{/if}}
{{#if hasAgentDepartments}}
<div class="rc-form-group">
<div class="rc-input">
<label class="rc-input__label">
<div class="rc-input__title">{{_ "Departments"}}</div>
<div class="rc-input__wrapper">
<ul id="departments" class="chip-container current-agent-departments">
{{#each dept in agentDepartments}}
<li data-id="{{dept._id}}" class="remove-department" title="{{dept.name}}">
{{#if canEditDepartment}}
<i class="icon icon-cancel-circled"></i>
{{/if}}
{{dept.name}}
</li>
{{/each}}
</ul>
</div>
</label>
</div>
</div>
{{/if}}
{{#if customFieldsTemplate}}
{{> Template.dynamic template=customFieldsTemplate data=agentDataContext }}
{{/if}}
<div class="rc-user-info__flex rc-user-info__row">
<button class='rc-button rc-button--cancel cancel' type="button"><span>{{_ "Cancel"}}</span></button>
<button class='rc-button rc-button--primary save'><span>{{_ "Save"}}</span></button>
</div>
</form>
</section>
{{/unless}}
</template>
Loading