Browse Source

UI-1393: Updated the user devices section to use the monsterListing common control to add spare devices

4.3
Maxime Roux 11 years ago
parent
commit
0210217ec5
5 changed files with 71 additions and 135 deletions
  1. +7
    -1
      i18n/en-US.json
  2. +7
    -1
      i18n/fr-FR.json
  3. +41
    -91
      submodules/users/users.js
  4. +14
    -40
      views/users-devices.html
  5. +2
    -2
      views/users-rowSpareDevice.html

+ 7
- 1
i18n/en-US.json View File

@ -606,7 +606,13 @@
},
"__comment": "UI-1289: Masks should be in i18n",
"__version": "v3.20_s3",
"defaultPhoneMask": "+1 (999) 999-9999"
"defaultPhoneMask": "+1 (999) 999-9999",
"__comment": "UI-1393: Updating user devices to use the monsterListing common control",
"__version": "v3.20_s4",
"devices": {
"newDevice": "New Device",
"spareDevice": "Add from Spare Devices"
}
},
"strategy": {


+ 7
- 1
i18n/fr-FR.json View File

@ -570,7 +570,13 @@
},
"__comment": "UI-1289: Masks should be in i18n",
"__version": "v3.20_s3",
"defaultPhoneMask": "+1 (999) 999-9999"
"defaultPhoneMask": "+1 (999) 999-9999",
"__comment": "UI-1393: Updating user devices to use the monsterListing common control",
"__version": "v3.20_s4",
"devices": {
"newDevice": "Nouveau Téléphone",
"spareDevice": "Ajouter depuis les Téléphones Disponibles"
}
},
"strategy": {


+ 41
- 91
submodules/users/users.js View File

@ -347,6 +347,7 @@ define(function(require){
extensionsToSave,
numbersToSave,
extraSpareNumbers,
unassignedDevices,
toastrMessages = self.i18n.active().users.toastrMessages,
mainDirectoryId,
mainCallflowId,
@ -458,6 +459,8 @@ define(function(require){
}
else if (type === 'devices') {
setTimeout(function() { template.find('.search-query').focus(); });
currentUser = userId;
unassignedDevices = {};
}
row.find('.edit-user').append(template).slideDown(400, function() {
@ -837,24 +840,41 @@ define(function(require){
listAssigned = template.find('.list-assigned-items');
listAssigned.find('.empty-row').hide();
/* reset search */
listAssigned.find('.empty-search-row').hide();
template.find('.unassigned-list-header .search-query').val('');
listAssigned.find('.item-row').show();
/* Add row */
listAssigned.append(rowDevice)
.find('.item-row[data-id="' + device.id + '"]')
.toggleClass('updated')
.find('button')
.removeClass('add-device btn-primary')
.addClass('remove-device btn-danger')
.text(self.i18n.active().remove);
listAssigned.append(rowDevice);
}
});
});
template.on('click', '.spare-devices:not(.disabled)', function() {
var currentlySelected = $.map(template.find('.device-list.list-assigned-items .item-row'), function(val) { return $(val).data('id') });
self.usersGetDevicesData(function(devicesData) {
var spareDevices = {};
_.each(devicesData, function(device) {
if( (!('owner_id' in device) || device.owner_id === '' || device.owner_id === currentUser) && currentlySelected.indexOf(device.id) === -1 ) {
spareDevices[device.id] = device;
}
});
monster.pub('common.monsterListing.render', {
dataList: spareDevices,
dataType: 'devices',
okCallback: function(devices) {
_.each(devices, function(device) {
var rowDevice = monster.template(self, 'users-rowSpareDevice', device),
listAssigned = template.find('.list-assigned-items');
listAssigned.find('.empty-row').hide();
listAssigned.append(rowDevice);
if(device.owner_id) {
delete unassignedDevices[device.id];
}
});
}
});
});
});
template.on('click', '.save-devices', function() {
var dataDevices = {
new: [],
@ -863,12 +883,10 @@ define(function(require){
name = $(this).parents('.grid-row').find('.grid-cell.name').text(),
userId = $(this).parents('.grid-row').data('id');
template.find('.detail-devices .list-assigned-items .item-row.updated').each(function(k, row) {
template.find('.detail-devices .list-assigned-items .item-row:not(.assigned)').each(function(k, row) {
dataDevices.new.push($(row).data('id'));
});
template.find('.detail-devices .list-unassigned-items .item-row.updated').each(function(k, row) {
dataDevices.old.push($(row).data('id'));
});
dataDevices.old = Object.keys(unassignedDevices);
self.usersUpdateDevices(dataDevices, userId, function() {
toastr.success(monster.template(self, '!' + toastrMessages.devicesUpdated, { name: name }));
@ -893,85 +911,17 @@ define(function(require){
);
});
template.on('click', '.detail-devices .list-unassigned-items .add-device', function() {
var row = $(this).parents('.item-row'),
spare = template.find('.count-spare'),
countSpare = spare.data('count') - 1,
assignedList = template.find('.detail-devices .list-assigned-items');
spare
.html(countSpare)
.data('count', countSpare);
row.toggleClass('updated')
.find('button')
.removeClass('add-device btn-primary')
.addClass('remove-device btn-danger')
.text(self.i18n.active().remove);
assignedList.find('.empty-row').hide();
assignedList.append(row);
var rows = template.find('.list-unassigned-items .item-row');
if(rows.size() === 0) {
template.find('.detail-devices .list-unassigned-items .empty-row').show();
}
else if(rows.is(':visible') === false) {
template.find('.detail-devices .list-unassigned-items .empty-search-row').show();
}
});
template.on('click', '.detail-devices .list-assigned-items .remove-device', function() {
var row = $(this).parents('.item-row'),
spare = template.find('.count-spare'),
countSpare = spare.data('count') + 1,
unassignedList = template.find('.detail-devices .list-unassigned-items');
/* Alter the html */
row.hide();
row.toggleClass('updated')
.find('button')
.removeClass('remove-device btn-danger')
.addClass('add-device btn-primary')
.text(self.i18n.active().add);
unassignedList.append(row);
unassignedList.find('.empty-row').hide();
spare
.html(countSpare)
.data('count', countSpare);
var row = $(this).parents('.item-row');
if(row.hasClass('assigned')) {
unassignedDevices[row.data('id')] = true;
}
row.remove();
var rows = template.find('.detail-devices .list-assigned-items .item-row');
/* If no rows beside the clicked one, display empty row */
if(rows.is(':visible') === false) {
template.find('.detail-devices .list-assigned-items .empty-row').show();
}
/* If it matches the search string, show it */
if(row.data('search').indexOf(currentNumberSearch) >= 0) {
row.show();
unassignedList.find('.empty-search-row').hide();
}
});
template.on('keyup', '.detail-devices .search-query', function() {
var searchString = $(this).val().toLowerCase(),
rows = template.find('.list-unassigned-items .item-row'),
emptySearch = template.find('.list-unassigned-items .empty-search-row');
_.each(rows, function(row) {
var row = $(row);
row.data('search').toLowerCase().indexOf(searchString) < 0 ? row.hide() : row.show();
});
if(rows.size() > 0) {
rows.is(':visible') ? emptySearch.hide() : emptySearch.show();
}
});
/* Events for Numbers in Users */


+ 14
- 40
views/users-devices.html View File

@ -5,7 +5,7 @@
{{ i18n.users.noAssignedDevices }}
</div>
{{#each assignedDevices}}
<div class="item-row" data-id="{{this.id}}" data-search="{{ this.name }}">
<div class="item-row assigned" data-id="{{this.id}}">
<div class="device">
<button type="button" class="btn btn-danger remove-device">{{ ../i18n.unassign }}</button>
<a href="javascript:void(0);" class="edit-device-link monster-link">{{ this.name }}</a>
@ -15,49 +15,23 @@
{{/each}}
</div>
<div class="unassigned-list-header">
<div class="title">{{i18n.users.addFromSpareDevices}} (<span data-count="{{countSpare}}" class="count-spare">{{countSpare}}</span>)</div>
<div class="search-bar pull-right">
<span class="search-box pull-right">
<i class="icon-search"></i>
<input type="text" class="search-query" placeholder="{{ i18n.search }}..."></input>
</span>
</div>
</div>
<div class="list-unassigned-items device-list">
<div class="empty-search-row">
{{ i18n.users.noMatchingDevices }}
</div>
<div class="empty-row{{#if emptySpare}} visible{{/if}} ">
{{ i18n.users.noMoreSpareDevices }}
</div>
{{#each unassignedDevices}}
<div class="item-row" data-id="{{this.id}}" data-search="{{this.name}}">
<div class="device">
<button type="button" class="btn btn-primary add-device">{{ ../i18n.add }}</button>
<a href="javascript:void(0);" class="edit-device-link monster-link">{{ this.name }}</a>
</div>
</div>
{{/each}}
</div>
</div>
<div class="actions">
<div class="dropdown pull-left">
<a href="#" class="add-device monster-link dropdown-toggle" data-toggle="dropdown"><i class="icon-plus-sign icon-green"></i>{{i18n.devices.add }}</a>
<ul class="dropdown-menu">
<li><a class="create-device" data-type="sip_device"><i class="icon-telicon-voip-phone"></i>{{ i18n.devices.types.sip_device }}</a></li>
<li><a class="create-device" data-type="cellphone"><i class="icon-phone"></i>{{ i18n.devices.types.cellphone }}</a></li>
<li><a class="create-device" data-type="smartphone"><i class="icon-telicon-mobile-phone"></i>{{ i18n.devices.types.smartphone }}</a></li>
<li><a class="create-device" data-type="mobile"><i class="icon-telicon-sprint-phone"></i>{{ i18n.devices.types.mobile }}</a></li>
<li><a class="create-device" data-type="softphone"><i class="icon-telicon-soft-phone"></i>{{ i18n.devices.types.softphone }}</a></li>
<li><a class="create-device" data-type="landline"><i class="icon-telicon-home-phone"></i>{{ i18n.devices.types.landline }}</a></li>
<li><a class="create-device" data-type="fax"><i class="icon-telicon-fax"></i>{{ i18n.devices.types.fax }}</a></li>
<li><a class="create-device" data-type="ata"><i class="icon-telicon-fax"></i>{{ i18n.devices.types.ata }}</a></li>
</ul>
</div>
<a href="#" class="add-device monster-link dropdown-toggle" data-toggle="dropdown"><i class="icon-plus-sign icon-green"></i>{{ i18n.users.devices.newDevice }}</a>
<ul class="dropdown-menu">
<li><a class="create-device" data-type="sip_device"><i class="icon-telicon-voip-phone"></i>{{ i18n.devices.types.sip_device }}</a></li>
<li><a class="create-device" data-type="cellphone"><i class="icon-phone"></i>{{ i18n.devices.types.cellphone }}</a></li>
<li><a class="create-device" data-type="smartphone"><i class="icon-telicon-mobile-phone"></i>{{ i18n.devices.types.smartphone }}</a></li>
<li><a class="create-device" data-type="mobile"><i class="icon-telicon-sprint-phone"></i>{{ i18n.devices.types.mobile }}</a></li>
<li><a class="create-device" data-type="softphone"><i class="icon-telicon-soft-phone"></i>{{ i18n.devices.types.softphone }}</a></li>
<li><a class="create-device" data-type="landline"><i class="icon-telicon-home-phone"></i>{{ i18n.devices.types.landline }}</a></li>
<li><a class="create-device" data-type="fax"><i class="icon-telicon-fax"></i>{{ i18n.devices.types.fax }}</a></li>
<li><a class="create-device" data-type="ata"><i class="icon-telicon-fax"></i>{{ i18n.devices.types.ata }}</a></li>
</ul>
</div>
<a class="spare-devices monster-link" href="javascript:void(0);"><i class="icon-telicon-voip-phone icon-green"></i>{{ i18n.users.devices.spareDevice }}</a>
<div class="pull-right">
<a class="cancel-link monster-link blue" href="javascript:void(0);">{{ i18n.cancel }}</a>


+ 2
- 2
views/users-rowSpareDevice.html View File

@ -1,6 +1,6 @@
<div class="item-row" data-id="{{this.id}}" data-search="{{this.name}}">
<div class="item-row{{#if this.owner_id}} assigned{{/if}}" data-id="{{this.id}}">
<div class="device">
<button type="button" class="btn btn-primary add-device">{{ i18n.add }}</button>
<button type="button" class="btn btn-danger remove-device">{{ i18n.unassign }}</button>
<a href="javascript:void(0);" class="edit-device-link monster-link">{{ this.name }}</a>
</div>
</div>

Loading…
Cancel
Save