Using chips for adding/viewing contact categories
Ludovic Marcotte
Francis Lachapelle
parent
8557b2a161
commit
a166d1b4cf
|
|
@ -161,7 +161,7 @@
|
|||
contactCategories = [card categories];
|
||||
if (contactCategories)
|
||||
{
|
||||
newCats = [cats mergedArrayWithArray: contactCategories];
|
||||
newCats = [cats mergedArrayWithArray: [contactCategories trimmedComponents]];
|
||||
if ([newCats count] != [cats count])
|
||||
{
|
||||
cats = [newCats sortedArrayUsingSelector:
|
||||
|
|
|
|||
|
|
@ -6,9 +6,7 @@
|
|||
<div class="editor md-padding">
|
||||
<hgroup class="header">
|
||||
<h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>
|
||||
<h6 class="sg-md-display-2-subheader">{{card.$description()}}
|
||||
<span ng-repeat="category in card.categories">{{category.value}}</span>
|
||||
</h6>
|
||||
<h6 class="sg-md-display-2-subheader">{{card.$description()}}</h6>
|
||||
</hgroup>
|
||||
|
||||
<!-- contact editor -->
|
||||
|
|
@ -120,29 +118,20 @@
|
|||
</md-input-container>
|
||||
|
||||
<!-- categories -->
|
||||
<div class="attr" ng-repeat="category in card.categories">
|
||||
<div layout="row" layout-align="center end">
|
||||
<md-input-container>
|
||||
<label class="pseudo-input-label">
|
||||
<var:string label:value="Category"/>
|
||||
</label>
|
||||
<input type="text" ng-model="category.value"
|
||||
sg-focus-on="category_{{$index}}"/>
|
||||
<!--typeahead="cat for cat in card.allCategories | filter:$viewValue"/>-->
|
||||
</md-input-container>
|
||||
<md-button class="iconButton" ng-click="card.$delete('categories', $index)">
|
||||
<i class="md-icon-remove-circle"><!-- remove --></i>
|
||||
</md-button>
|
||||
</div>
|
||||
</div>
|
||||
<!-- New category button-group -->
|
||||
<div class="md-layout-margin" layout="row" layout-align="start center">
|
||||
<md-button class="iconButton" type="button" ng-click="addCategory()">
|
||||
<i class="md-icon-add"><!-- new --></i>
|
||||
</md-button>
|
||||
<label class="button-label">
|
||||
<var:string label:value="New Category"/>
|
||||
</label>
|
||||
<div class="pseudo-input-container">
|
||||
<md-chips ng-model="card.categories">
|
||||
<md-chip-template>
|
||||
{{$chip.value}}
|
||||
</md-chip-template>
|
||||
<md-autocomplete
|
||||
md-selected-item="categories.selected"
|
||||
md-selected-item-change="card.$addCategory(category)"
|
||||
md-search-text="categories.searchText"
|
||||
md-items="category in card.constructor.filterCategories(categories.searchText)"
|
||||
label:placeholder="Add a category">
|
||||
<span md-highlight-text="categories.searchText">{{category}}</span>
|
||||
</md-autocomplete>
|
||||
</md-chips>
|
||||
</div>
|
||||
|
||||
<!-- phones -->
|
||||
|
|
@ -287,7 +276,6 @@
|
|||
<textarea ng-model="card.note"><!-- note --></textarea>
|
||||
</md-input-container>
|
||||
|
||||
|
||||
<div class="fieldset md-layout-margin" layout="row" layout-align="end center">
|
||||
<md-button type="button" ng-click="cancel()">
|
||||
<var:string label:value="Cancel"/>
|
||||
|
|
|
|||
|
|
@ -17,9 +17,13 @@
|
|||
</div>
|
||||
<div class="msg-header-content">
|
||||
<h1 class="sg-md-display-2--light" ng-bind-html="card.$fullname()"><!-- fullname --></h1>
|
||||
<h6 class="sg-md-display-2-subheader">{{card.$description()}}
|
||||
<span class="label radius" ng-repeat="category in card.categories">{{category.value}}</span>
|
||||
</h6>
|
||||
<h6 class="sg-md-display-2-subheader">{{card.$description()}}</h6>
|
||||
<md-chips ng-model="card.categories"
|
||||
readonly="true">
|
||||
<md-chip-template>
|
||||
{{$chip.value}}
|
||||
</md-chip-template>
|
||||
</md-chips>
|
||||
</div>
|
||||
<div class="sg-icon-bar--vertical">
|
||||
<md-button class="iconButton" aria-label="Edit" ng-show="currentFolder.isEditable" ui-sref="app.addressbook.card.editor({addressbookId: currentFolder.id, cardId: card.id})">
|
||||
|
|
|
|||
|
|
@ -48,7 +48,8 @@
|
|||
Card.$factory = ['$timeout', 'sgSettings', 'sgResource', function($timeout, Settings, Resource) {
|
||||
angular.extend(Card, {
|
||||
$$resource: new Resource(Settings.activeUser.folderURL + 'Contacts', Settings.activeUser),
|
||||
$timeout: $timeout
|
||||
$timeout: $timeout,
|
||||
$categories: window.UserDefaults.SOGoContactsCategories
|
||||
});
|
||||
|
||||
return Card; // return constructor
|
||||
|
|
@ -103,6 +104,20 @@
|
|||
return Card.$unwrapCollection(futureCardData); // a collection of cards
|
||||
};
|
||||
|
||||
/**
|
||||
* @function filterCategories
|
||||
* @memberof Card.prototype
|
||||
* @desc Search for categories matching some criterias
|
||||
* @param {string} search - the search string to match
|
||||
* @returns a collection of strings
|
||||
*/
|
||||
Card.filterCategories = function(query) {
|
||||
var re = new RegExp(query, 'i');
|
||||
return _.filter(Card.$categories, function(category) {
|
||||
return category.search(re) != -1;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* @memberof Card
|
||||
* @desc Unwrap to a collection of Card instances.
|
||||
|
|
@ -301,7 +316,6 @@
|
|||
if (i == this.categories.length)
|
||||
this.categories.push({value: category});
|
||||
}
|
||||
return this.categories.length - 1;
|
||||
};
|
||||
|
||||
Card.prototype.$addEmail = function(type) {
|
||||
|
|
|
|||
|
|
@ -350,15 +350,12 @@
|
|||
$scope.allTelTypes = Card.$TEL_TYPES;
|
||||
$scope.allUrlTypes = Card.$URL_TYPES;
|
||||
$scope.allAddressTypes = Card.$ADDRESS_TYPES;
|
||||
$scope.categories = {};
|
||||
|
||||
$scope.addOrgUnit = function() {
|
||||
var i = $scope.card.$addOrgUnit('');
|
||||
focus('orgUnit_' + i);
|
||||
};
|
||||
$scope.addCategory = function() {
|
||||
var i = $scope.card.$addCategory('');
|
||||
focus('category_' + i);
|
||||
};
|
||||
$scope.addEmail = function() {
|
||||
var i = $scope.card.$addEmail('');
|
||||
focus('email_' + i);
|
||||
|
|
|
|||
Loading…
Reference in New Issue