(feat) initial implementation of advanced email search

There's one bug where viewing of the messages from the results
is still impossible due to the ui-router. This will be fixed
very soon.
This commit is contained in:
Ludovic Marcotte
2015-09-10 16:38:30 -04:00
parent b646e35f5d
commit cb0d327f90
7 changed files with 490 additions and 26 deletions
@@ -5,8 +5,11 @@
xmlns:label="OGo:label">
<div class="view-list" layout="column">
<!-- in virtual mailbox mode -->
<md-toolbar ng-hide="!app.showingAdvancedSearch || mailbox.selectedFolder.$selectedCount() > 0">
</md-toolbar>
<!-- single-selection toolbars -->
<md-toolbar ng-show="mailbox.selectedFolder.$selectedCount() == 0">
<md-toolbar ng-hide="app.showingAdvancedSearch || mailbox.selectedFolder.$selectedCount() > 0">
<!-- sort mode (default) -->
<div class="md-toolbar-tools" ng-hide="mailbox.mode.search">
<md-button class="sg-icon-button" label:aria-label="Search"
@@ -89,7 +92,7 @@
<md-button class="sg-icon-button" ng-click="mailbox.unselectMessages()">
<md-icon>arrow_back</md-icon>
</md-button>
<label>{{mailbox.selectedFolder.$selectedCount()}} <var:string label:value="selected"/></label>
<label>{{mailbox.service.selectedFolder.$selectedCount()}} <var:string label:value="selected"/></label>
<div class="md-flex"><!-- spacer --></div>
<md-button class="sg-icon-button" ng-click="mailbox.selectAll()">
<md-tooltip md-direction="bottom"><var:string label:value="Select All"/></md-tooltip>
@@ -147,17 +150,17 @@
<md-content id="messagesList" layout="column" class="md-flex">
<md-subheader>
<span ng-switch="mailbox.selectedFolder.$messages.length">
<span ng-switch="mailbox.service.selectedFolder.getLength()">
<span ng-switch-when="0"><var:string label:value="No message"/></span>
<span ng-switch-default="true">{{mailbox.selectedFolder.$messages.length}} <var:string label:value="messages"/></span>
<span ng-switch-default="true">{{mailbox.service.selectedFolder.getLength()}} <var:string label:value="messages"/></span>
</span>
</md-subheader>
<md-virtual-repeat-container class="md-flex">
<md-list class="sg-section-list">
<md-list-item
md-virtual-repeat="currentMessage in mailbox.selectedFolder"
md-virtual-repeat="currentMessage in mailbox.service.selectedFolder"
md-on-demand="md-on-demand"
ng-class="{'sg-active': currentMessage.uid == mailbox.selectedFolder.selectedMessage, unread: !currentMessage.isread}"
ng-class="{'sg-active': currentMessage.uid == mailbox.service.selectedFolder.selectedMessage, unread: !currentMessage.isread}"
ng-click="mailbox.selectMessage(currentMessage)"
ui-sref="mail.account.mailbox.message({accountId: mailbox.account.id, mailboxId: (mailbox.selectedFolder.path | encodeUri), messageId: currentMessage.uid})"
ui-sref-active="md-default-theme md-background md-bg md-hue-1">
@@ -172,7 +175,10 @@
<div class="sg-tile-content">
<span class="msg-date"
ng-bind-html="currentMessage.relativedate"><!-- date --></span>
<div class="sg-md-subhead-multi">{{currentMessage.$shortAddress('from')}}</div>
<div class="sg-md-subhead-multi">
<span ng-show="mailbox.service.$virtualMode">({{currentMessage.$mailbox.path}})</span>
{{currentMessage.$shortAddress('from')}}
</div>
<div class="sg-md-body-multi">{{currentMessage.subject}}</div>
</div>
<div class="sg-tile-icons">
@@ -186,7 +192,7 @@
</md-list>
</md-virtual-repeat-container>
<div class="sg-progress-circular-floating"
ng-show="mailbox.selectedFolder.$isLoading">
ng-show="mailbox.service.selectedFolder.$isLoading">
<md-progress-circular class="md-accent"
md-mode="indeterminate"
md-diameter="32"><!-- progress --></md-progress-circular>
@@ -200,7 +206,7 @@
</div>
<div id="detailView" class="view-detail" layout="column" layout-align="start center"
ng-class="{ 'sg-close': !mailbox.selectedFolder.selectedMessage }"
ng-class="{ 'sg-close': !mailbox.service.selectedFolder.selectedMessage }"
ui-view="message">
<md-toolbar class="hide-sm"><!-- empty toolbar --></md-toolbar>
<md-content class="hide-sm md-flex layout-fill md-hue-1" layout="column">
+100 -2
View File
@@ -311,6 +311,12 @@
<var:string label:value="Export"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button type="button"
ng-click="app.showAdvancedSearch(folder.path)">
<var:string label:value="Search"/>
</md-button>
</md-menu-item>
<md-menu-divider ng-show="folder.type == 'folder'"><!-- divider --></md-menu-divider>
<md-menu-item ng-show="folder.type == 'folder'">
<md-button type="button" ng-click="app.setFolderAs(folder, 'Drafts')">
@@ -345,8 +351,100 @@
</script>
<script type="text/ng-template" id="UIxMailFolderTemplate">
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main" >
<var:component className="UIxTopnavToolbarTemplate" />
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main" ng-hide="app.showingAdvancedSearch">
<var:component className="UIxTopnavToolbarTemplate"/>
</md-toolbar>
<md-toolbar layout="row" layout-align="space-between center" class="toolbar-main" ng-show="app.showingAdvancedSearch">
<div class="sg-padded" layout="column">
<div layout="row" layout-align="space-between center">
<md-input-container>
<label><var:string label:value="Search messages in"/></label>
<md-select ng-model="app.search.mailbox">
<md-option ng-value="">
<span>{{app.accounts[0].name}}</span>
</md-option>
<md-option ng-repeat="folder in
app.accounts[0].$flattenMailboxes()
track by folder.path"
ng-value="folder.path">
<span ng-class="'sg-child-level-' + folder.level">{{folder.name}}</span>
</md-option>
</md-select>
</md-input-container>
<md-menu>
<md-button class="sg-icon-button" label:aria-label="More search options" ng-click="$mdOpenMenu()">
<md-icon>settings</md-icon>
</md-button>
<md-menu-content>
<md-menu-item>
<md-button ng-href="#">
<md-checkbox ng-model="app.search.subfolders"
ng-true-value="1"
ng-false-value="0">
<var:string label:value="Search subfolders"/>
</md-checkbox>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="app.search.match='AND'">
<md-icon ng-class="{ 'icon-check': app.search.match == 'AND'}">
<!-- all --></md-icon><var:string label:value="Match all of the following"/>
</md-button>
</md-menu-item>
<md-menu-item>
<md-button ng-click="app.search.match='OR'">
<md-icon ng-class="{ 'icon-check': app.search.match == 'OR'}">
<!-- any --></md-icon><var:string label:value="Match any of the following"/>
</md-button>
</md-menu-item>
</md-menu-content>
</md-menu>
<md-chips ng-model="app.search.params"
md-on-append="app.newSearchParam($chip)">
<input type="text" ng-disabled="app.currentSearchParam.length == 0" sg-placeholder="app.search.options[app.currentSearchParam]"/>
<md-chip-template>
<span class="md-caption" ng-show="$chip.negative == 0">(match</span>
<span class="md-caption" ng-show="$chip.negative == 1">(does not match</span>
<span class="md-caption">{{$chip.searchBy}})</span>
<span>{{$chip.searchInput}}</span>
</md-chip-template>
</md-chips>
</div>
<div layout="row" layout-align="space-between center">
<md-button type="button" ng-click="app.addSearchParam('subject')">
<var:string label:value="Subject"/>
</md-button>
<md-button type="button" ng-click="app.addSearchParam('from')">
<var:string label:value="From"/>
</md-button>
<md-button type="button" ng-click="app.addSearchParam('to')">
<var:string label:value="To"/>
</md-button>
<md-button type="button" ng-click="app.addSearchParam('cc')">
<var:string label:value="Cc"/>
</md-button>
<md-button type="button" ng-click="app.addSearchParam('body')">
<var:string label:value="Body"/>
</md-button>
<div class="md-flex"><!-- spacer --></div>
<md-button type="button" class="sg-button"
ng-disabled="app.search.params.length == 0"
ng-hide="app.service. selectedFolder.$isLoading"
ng-click="app.startAdvancedSearch()">
<md-icon>search</md-icon>
</md-button>
<md-button type="button" class="sg-button"
ng-show="app.service.selectedFolder.$isLoading"
ng-click="app.stopAdvancedSearch()">
<md-icon>stop</md-icon>
</md-button>
</div>
</div>
<div class="sg-toolbar-group-last">
<md-button type="button" class="sg-button" ng-click="app.hideAdvancedSearch()">
<md-icon>close</md-icon>
</md-button>
</div>
</md-toolbar>
<div layout="row" class="md-flex">
@@ -43,6 +43,7 @@
$query: { sort: 'date', asc: 0 },
selectedFolder: null,
$refreshTimeout: null,
$virtualMode: false,
PRELOAD: PRELOAD
});
// Initialize sort parameters from user's settings
@@ -272,10 +273,12 @@
}
// Restart the refresh timer, if needed
var refreshViewCheck = Mailbox.$Preferences.defaults.SOGoRefreshViewCheck;
if (refreshViewCheck && refreshViewCheck != 'manually') {
var f = angular.bind(_this, Mailbox.prototype.$filter);
Mailbox.$refreshTimeout = Mailbox.$timeout(f, refreshViewCheck.timeInterval()*1000);
if (!Mailbox.$virtualMode) {
var refreshViewCheck = Mailbox.$Preferences.defaults.SOGoRefreshViewCheck;
if (refreshViewCheck && refreshViewCheck != 'manually') {
var f = angular.bind(_this, Mailbox.prototype.$filter);
Mailbox.$refreshTimeout = Mailbox.$timeout(f, refreshViewCheck.timeInterval()*1000);
}
}
var futureMailboxData = Mailbox.$$resource.post(_this.id, 'view', options);
@@ -10,7 +10,8 @@
function MailboxController($state, $timeout, $mdDialog, stateAccounts, stateAccount, stateMailbox, encodeUriFilter, focus, Dialog, Account, Mailbox) {
var vm = this, messageDialog = null;
Mailbox.selectedFolder = stateMailbox;
if (!Mailbox.$virtualMode)
Mailbox.selectedFolder = stateMailbox;
vm.service = Mailbox;
vm.accounts = stateAccounts;
@@ -33,7 +34,10 @@
vm.mode = { search: false };
function selectMessage(message) {
$state.go('mail.account.mailbox.message', {accountId: stateAccount.id, mailboxId: encodeUriFilter(stateMailbox.path), messageId: message.uid});
if (Mailbox.$virtualMode)
$state.go('mail.account.virtualMailbox.message', {accountId: stateAccount.id, mailboxId: encodeUriFilter(message.$mailbox.path), messageId: message.uid});
else
$state.go('mail.account.mailbox.message', {accountId: stateAccount.id, mailboxId: encodeUriFilter(message.$mailbox.path), messageId: message.uid});
}
function toggleMessageSelection($event, message) {
@@ -6,8 +6,8 @@
/**
* @ngInject
*/
MailboxesController.$inject = ['$state', '$timeout', '$mdDialog', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Account', 'Mailbox', 'User', 'Preferences', 'stateAccounts'];
function MailboxesController($state, $timeout, $mdDialog, focus, encodeUriFilter, Dialog, Settings, Account, Mailbox, User, Preferences, stateAccounts) {
MailboxesController.$inject = ['$state', '$timeout', '$mdDialog', 'sgFocus', 'encodeUriFilter', 'Dialog', 'sgSettings', 'Account', 'Mailbox', 'VirtualMailbox', 'User', 'Preferences', 'stateAccounts'];
function MailboxesController($state, $timeout, $mdDialog, focus, encodeUriFilter, Dialog, Settings, Account, Mailbox, VirtualMailbox, User, Preferences, stateAccounts) {
var vm = this,
account,
mailbox;
@@ -30,6 +30,93 @@
vm.setFolderAs = setFolderAs;
vm.refreshUnseenCount = refreshUnseenCount;
// Advanced search options
vm.showingAdvancedSearch = false;
vm.currentSearchParam = '';
vm.addSearchParam = addSearchParam;
vm.newSearchParam = newSearchParam;
vm.showAdvancedSearch = showAdvancedSearch;
vm.hideAdvancedSearch = hideAdvancedSearch;
vm.startAdvancedSearch = startAdvancedSearch;
vm.stopAdvancedSearch = stopAdvancedSearch;
vm.search = {
options: {'': l('Select a criteria'),
subject: l('Enter Subject'),
from: l('Enter From'),
to: l('Enter To'),
cc: l('Enter Cc'),
body: l('Enter Body')
},
mailbox: 'INBOX',
subfolders: 1,
match: 'AND',
params: []
};
function showAdvancedSearch(path) {
vm.showingAdvancedSearch = true;
vm.search.mailbox = path;
}
function hideAdvancedSearch() {
vm.showingAdvancedSearch = false;
vm.service.$virtualMode = false;
account = vm.accounts[0];
mailbox = vm.searchPreviousMailbox;
$state.go('mail.account.mailbox', { accountId: account.id, mailboxId: encodeUriFilter(mailbox.path) });
}
function startAdvancedSearch() {
var root, mailboxes = [];
vm.virtualMailbox = new VirtualMailbox(vm.accounts[0]);
// Don't set the previous selected mailbox if we're in virtual mode
// That allows users to do multiple advanced search but return
// correctly to the previously selected mailbox once done.
if (!Mailbox.$virtualMode)
vm.searchPreviousMailbox = Mailbox.selectedFolder;
Mailbox.selectedFolder = vm.virtualMailbox;
Mailbox.$virtualMode = true;
if (angular.isDefined(vm.search.mailbox)) {
root = vm.accounts[0].$getMailboxByPath(vm.search.mailbox);
mailboxes.push(root);
if (vm.search.subfolders && root.children.length)
mailboxes.push(root.children);
}
else {
mailboxes = vm.accounts[0].$flattenMailboxes();
}
vm.virtualMailbox.setMailboxes(mailboxes);
vm.virtualMailbox.startSearch(vm.search.match, vm.search.params);
$state.go('mail.account.virtualMailbox', { accountId: vm.accounts[0].id });
}
function stopAdvancedSearch() {
vm.virtualMailbox.stopSearch();
}
function addSearchParam(v) {
vm.currentSearchParam = v;
}
function newSearchParam(v) {
if (v.length && vm.currentSearchParam.length) {
var n = 0;
if (v.startsWith("!")) {
n = 1;
v = v.substring(1).trim();
}
vm.search.params.push({searchBy:vm.currentSearchParam, searchInput: v, negative: n});
vm.currentSearchParam = '';
}
}
if ($state.current.name == 'mail' && vm.accounts.length > 0 && vm.accounts[0].$mailboxes.length > 0) {
// Redirect to first mailbox of first account if no mailbox is selected
account = vm.accounts[0];
@@ -121,6 +208,8 @@
if (vm.editMode == folder.path)
return;
vm.editMode = false;
vm.showingAdvancedSearch = false;
vm.service.$virtualMode = false;
$state.go('mail.account.mailbox', { accountId: account.id, mailboxId: encodeUriFilter(folder.path) });
}
+52 -7
View File
@@ -39,6 +39,33 @@
stateAccount: stateAccount
}
})
.state('mail.account.virtualMailbox', {
url: '/virtual',
views: {
'mailbox@mail': {
templateUrl: 'UIxMailFolderTemplate', // UI/Templates/MailerUI/UIxMailFolderTemplate.wox
controller: 'MailboxController',
controllerAs: 'mailbox'
}
},
resolve: {
stateMailbox: function(Mailbox) { return Mailbox.selectedFolder; }
}
})
.state('mail.account.virtualMailbox.message', {
url: '/:mailboxId/:messageId',
views: {
message: {
templateUrl: 'UIxMailViewTemplate', // UI/Templates/MailerUI/UIxMailViewTemplate.wox
controller: 'MessageController',
controllerAs: 'viewer'
}
},
resolve: {
stateMailbox: stateVirtualMailbox,
stateMessage: stateMessage
}
})
.state('mail.account.mailbox', {
url: '/:mailboxId',
views: {
@@ -144,8 +171,8 @@
/**
* @ngInject
*/
stateMailbox.$inject = ['$stateParams', 'stateAccount', 'decodeUriFilter'];
function stateMailbox($stateParams, stateAccount, decodeUriFilter) {
stateMailbox.$inject = ['Mailbox', '$stateParams', 'stateAccount', 'decodeUriFilter'];
function stateMailbox(Mailbox, $stateParams, stateAccount, decodeUriFilter) {
var mailboxId = decodeUriFilter($stateParams.mailboxId),
_find;
// Recursive find function
@@ -162,14 +189,22 @@
}
return mailbox;
};
if (Mailbox.$virtualMode)
return Mailbox.selectedFolder;
//return $q.when(Mailbox.selectedFolder);
return _find(stateAccount.$mailboxes);
}
/**
* @ngInject
*/
stateMessages.$inject = ['stateMailbox'];
function stateMessages(stateMailbox) {
stateMessages.$inject = ['$q', 'Mailbox', 'stateMailbox'];
function stateMessages($q, Mailbox, stateMailbox) {
if (Mailbox.$virtualMode)
return [];
return stateMailbox.$filter();
}
@@ -181,12 +216,22 @@
// return stateAccount.$newMessage();
// }
stateVirtualMailbox.$inject = ['Mailbox', '$stateParams'];
function stateVirtualMailbox(Mailbox, $stateParams) {
return _.find(Mailbox.selectedFolder.$mailboxes, function(mailboxObject) {
return mailboxObject.path == $stateParams.mailboxId;
});
}
/**
* @ngInject
*/
stateMessage.$inject = ['encodeUriFilter', '$stateParams', '$state', 'stateMailbox', 'stateMessages'];
function stateMessage(encodeUriFilter, $stateParams, $state, stateMailbox, stateMessages) {
var message = _.find(stateMailbox.$messages, function(messageObject) {
stateMessage.$inject = ['Mailbox', 'encodeUriFilter', '$stateParams', '$state', 'stateMailbox', 'stateMessages'];
function stateMessage(Mailbox, encodeUriFilter, $stateParams, $state, stateMailbox, stateMessages) {
var message;
message = _.find(stateMailbox.$messages, function(messageObject) {
return messageObject.uid == $stateParams.messageId;
});
@@ -0,0 +1,219 @@
/* -*- Mode: javascript; indent-tabs-mode: nil; c-basic-offset: 2 -*- */
(function() {
'use strict';
/**
* @name VirtualMailbox
* @constructor
* @param {object} account - the mail account associated with the virtual search
*/
function VirtualMailbox(account) {
this.$account = account;
}
/**
* @memberof VirtualMailbox
* @desc The factory we'll use to register with Angular
* @returns the VirtualMailbox constructor
*/
VirtualMailbox.$factory = ['$q', '$timeout', '$log', 'sgSettings', 'Message', 'Mailbox', 'sgMailbox_PRELOAD', function($q, $timeout, $log, Settings, Mailbox, Message, PRELOAD) {
angular.extend(VirtualMailbox, {
$q: $q,
$timeout: $timeout,
$log: $log,
$Message: Message,
selectedFolder: null,
PRELOAD: PRELOAD
});
return VirtualMailbox; // return constructor
}];
/**
* @module SOGo.MailerUI
* @desc Factory registration of VirtualMailbox in Angular module.
*/
try {
angular.module('SOGo.MailerUI');
}
catch(e) {
angular.module('SOGo.MailerUI', ['SOGo.Common']);
}
angular.module('SOGo.MailerUI')
.constant('sgMailbox_PRELOAD', {
LOOKAHEAD: 50,
SIZE: 100
})
.factory('VirtualMailbox', VirtualMailbox.$factory);
/**
* @memberof VirtualMailbox
* @desc Build the path of the virtual mailbox (or account only).
* @param {string} accountId - the account ID
* @returns a string representing the path relative to the mail module
*/
VirtualMailbox.$absolutePath = function(accountId) {
return [accountId, "virtual"].join('/');
};
/**
* @function init
* @memberof Mailbox.prototype
* @desc Extend instance with new data and compute additional attributes.
* @param {object} data - attributes of mailbox
*/
VirtualMailbox.prototype.init = function(data) {
this.$isLoading = false;
this.$mailboxes = [];
this.uidsMap = {};
angular.extend(this, data);
this.id = this.$id();
};
VirtualMailbox.prototype.setMailboxes = function(data) {
this.$mailboxes = data;
_.each(this.$mailboxes, function(mailbox) {
mailbox.$messages = [];
mailbox.uidsMap = {};
});
};
VirtualMailbox.prototype.startSearch = function(match, params) {
var _this = this,
search = VirtualMailbox.$q.when();
this.$isLoading = true;
_.each(this.$mailboxes, function(mailbox) {
search = search.then(function() {
if (_this.$isLoading) {
console.log("searching mailbox " + mailbox.path);
return mailbox.$filter( {sort: "date", asc: false, match: match}, params);
}
});
});
search.finally(function() { _this.$isLoading = false; });
};
VirtualMailbox.prototype.stopSearch = function() {
console.log("stopping search...");
this.$isLoading = false;
};
/**
* @function getLength
* @memberof Mailbox.prototype
* @desc Used by md-virtual-repeat / md-on-demand
* @returns the number of items in the mailbox
*/
VirtualMailbox.prototype.getLength = function() {
var len = 0;
if (!angular.isDefined(this.$mailboxes))
return len;
_.each(this.$mailboxes, function(mailbox) {
len += mailbox.$messages.length;
});
return len;
};
/**
* @function getItemAtIndex
* @memberof Mailbox.prototype
* @desc Used by md-virtual-repeat / md-on-demand
* @returns the message as the specified index
*/
VirtualMailbox.prototype.getItemAtIndex = function(index) {
var i, j, k, mailbox, message;
if (angular.isDefined(this.$mailboxes) && index >= 0) {
i = 0;
for (j = 0; j < this.$mailboxes.length; j++) {
mailbox = this.$mailboxes[j];
for (k = 0; k < mailbox.$messages.length; i++, k++) {
message = mailbox.$messages[k];
if (i == index) {
return message;
}
}
}
}
return null;
};
/**
* @function $id
* @memberof VirtualMailbox.prototype
* @desc Build the unique ID to identified the mailbox.
* @returns a string representing the path relative to the mail module
*/
VirtualMailbox.prototype.$id = function() {
return VirtualMailbox.$absolutePath(this.$account.id);
};
/**
* @function $selectedCount
* @memberof VirtualMailbox.prototype
* @desc Return the number of messages selected by the user.
* @returns the number of selected messages
*/
VirtualMailbox.prototype.$selectedCount = function() {
// TODO
return 0;
};
/**
* @function $flagMessages
* @memberof VirtualMailbox.prototype
* @desc Add or remove a flag on a message set
* @returns a promise of the HTTP operation
*/
VirtualMailbox.prototype.$flagMessages = function(uids, flags, operation) {
// TODO
// var data = {msgUIDs: uids,
// flags: flags,
// operation: operation};
// return VirtualMailbox.$$resource.post(this.id, 'addOrRemoveLabel', data);
};
/**
* @function $deleteMessages
* @memberof VirtualMailbox.prototype
* @desc Delete multiple messages from mailbox.
* @return a promise of the HTTP operation
*/
VirtualMailbox.prototype.$deleteMessages = function(uids) {
// TODO
//return VirtualMailbox.$$resource.post(this.id, 'batchDelete', {uids: uids});
};
/**
* @function $copyMessages
* @memberof VirtualMailbox.prototype
* @desc Copy multiple messages from the current mailbox to a target one
* @return a promise of the HTTP operation
*/
VirtualMailbox.prototype.$copyMessages = function(uids, folder) {
// TODO
//return VirtualMailbox.$$resource.post(this.id, 'copyMessages', {uids: uids, folder: folder});
};
/**
* @function $moveMessages
* @memberof VirtualMailbox.prototype
* @desc Move multiple messages from the current mailbox to a target one
* @return a promise of the HTTP operation
*/
VirtualMailbox.prototype.$moveMessages = function(uids, folder) {
// TODO
//return VirtualMailbox.$$resource.post(this.id, 'moveMessages', {uids: uids, folder: folder});
};
})();