From c71dac805223d313f2394294f5e5d88640f53bc6 Mon Sep 17 00:00:00 2001 From: "Rafid K. Al-Humaimidi" Date: Fri, 2 Oct 2015 19:38:59 +0100 Subject: [PATCH] Re-using readonly attribute of md-chips directive. I tried to use them before but they caused some problems as mentioned in this issue: https://github.com/angular/material/issues/2841 However, it got fixed in v0.11 as mentioned in this comment: https://github.com/angular/material/issues/2841#issuecomment-141924335 --- .../hadiths/static/hadiths/html/hadith.html | 2 +- .../html/personselector.directive.html | 46 ++++++------- .../hadiths/html/tagselector.directive.html | 50 +++++++------- .../hadiths/static/hadiths/js/hadith.js | 69 ++++++++++++++++--- .../hadiths/js/personselector.directive.js | 53 ++++++++++---- .../hadiths/js/tagselector.directive.js | 11 ++- .../hadiths/templates/hadiths/index.html | 4 +- 7 files changed, 160 insertions(+), 75 deletions(-) diff --git a/HadithHouseWebsite/hadiths/static/hadiths/html/hadith.html b/HadithHouseWebsite/hadiths/static/hadiths/html/hadith.html index 4a7b2a6..72b8fda 100644 --- a/HadithHouseWebsite/hadiths/static/hadiths/html/hadith.html +++ b/HadithHouseWebsite/hadiths/static/hadiths/html/hadith.html @@ -16,7 +16,7 @@

- + diff --git a/HadithHouseWebsite/hadiths/static/hadiths/html/personselector.directive.html b/HadithHouseWebsite/hadiths/static/hadiths/html/personselector.directive.html index 7adb2b5..e762dfa 100644 --- a/HadithHouseWebsite/hadiths/static/hadiths/html/personselector.directive.html +++ b/HadithHouseWebsite/hadiths/static/hadiths/html/personselector.directive.html @@ -1,29 +1,27 @@ - - - {{ ctrl.person.display_name }} - + + + + {{ person.display_name || person.full_name }} + + + No matches found for "{{ ctrl.personQuery }}". + + - - {{$chip}} - + + {{ $chip.display_name || $chip.full_name }} + - - - {{ person.display_name }} - - - No matches found for "{{ ctrl.personQuery }}". - - + diff --git a/HadithHouseWebsite/hadiths/static/hadiths/html/tagselector.directive.html b/HadithHouseWebsite/hadiths/static/hadiths/html/tagselector.directive.html index a1069c4..a70e79b 100644 --- a/HadithHouseWebsite/hadiths/static/hadiths/html/tagselector.directive.html +++ b/HadithHouseWebsite/hadiths/static/hadiths/html/tagselector.directive.html @@ -1,28 +1,26 @@ - - - - {{ tagName }} - - - No matches found for "{{ ctrl.tagQuery }}". - - - - - {{$chip}} - - - close - - + + + + {{ tagName }} + + + No matches found for "{{ ctrl.tagQuery }}". + + + + + {{$chip}} + + + diff --git a/HadithHouseWebsite/hadiths/static/hadiths/js/hadith.js b/HadithHouseWebsite/hadiths/static/hadiths/js/hadith.js index 7d947ba..ad73174 100644 --- a/HadithHouseWebsite/hadiths/static/hadiths/js/hadith.js +++ b/HadithHouseWebsite/hadiths/static/hadiths/js/hadith.js @@ -4,14 +4,13 @@ var HadithHouseApp = angular.module('HadithHouseApp'); HadithHouseApp.controller('HadithCtrl', - function ($mdDialog, $location, $routeParams, $resource, HadithsService, ToastService) { - var Hadith = $resource(getApiUrl() + 'hadiths/:hadithId'); - + function ($scope, $mdDialog, $location, $routeParams, $resource, HadithsService, ToastService) { var ctrl = this; - // Make a request to load the hadith. + // Is the user loading an existing hadith or adding a new one? ctrl.hadithId = $routeParams.hadithId; if (ctrl.hadithId === 'new') { + // ...adding new hadith. ctrl.hadith = { text: '', person: 1, @@ -20,8 +19,11 @@ ctrl.addingNew = true; ctrl.isEditing = true; } else { - ctrl.hadith = Hadith.get({hadithId: ctrl.hadithId}, function () { - ctrl = ctrl; + // ...loading an existing hadith. + HadithsService.getHadith(ctrl.hadithId).then(function onSuccess(hadith) { + ctrl.hadith = hadith; + }, function onError() { + }); ctrl.addingNew = false; ctrl.isEditing = false; @@ -29,6 +31,32 @@ ctrl.error = false; + // If the ID of the person changes in the person-selector directive, + // reflect the change to the hadith object. + $scope.$watch(function() { return ctrl.hadithPersonsIds; }, function(newValue, oldValue) { + if (newValue === oldValue || !ctrl.hadith) { + return; + } + if (ctrl.hadithPersonsIds && ctrl.hadithPersonsIds.length > 0) { + ctrl.hadith.person = ctrl.hadithPersonsIds[0]; + } else { + ctrl.hadith.person = null; + } + }); + + // If the ID of the person in the hadith object changes, reflect the change + // to the person-selector directive. + $scope.$watch('ctrl.hadith.person', function(newValue, oldValue) { + if (newValue === oldValue) { + return; + } + if (ctrl.hadith.person !== null) { + ctrl.hadithPersonsIds = [ctrl.hadith.person]; + } else { + ctrl.hadithPersonsIds = []; + } + }); + var oldHadith = {}; /** @@ -59,6 +87,9 @@ ctrl.isEditing = true; }; + /** + * Called by finishEditing() for the case of adding a new hadith. + */ function addNewHadith() { // Send the changes to the server. HadithsService.postHadith(ctrl.hadith).then(function onSuccess(result) { @@ -73,6 +104,9 @@ }); } + /** + * Called by finishEditing() for the case of saving an already existing hadith. + */ function saveCurrentHadith() { // Send the changes to the server. HadithsService.putHadith(ctrl.hadith).then(function onSuccess() { @@ -81,8 +115,7 @@ ToastService.show("Changes saved."); }, function onFail() { // Failed to save the changes. Restore the old data and show a toast. - ctrl.isEditing = false; - restoreCopyOfHadith(); + ctrl.cancelEditing(); ToastService.show("Failed to save hadith. Please try again."); }); } @@ -91,6 +124,9 @@ * Called when the user clicks on the save icon to save the changes made. */ ctrl.finishEditing = function() { + if (!ctrl.validateHadith()) { + return; + } if (ctrl.addingNew) { addNewHadith(); } else { @@ -98,11 +134,28 @@ } }; + /** + * Validates that the data the user put is valid; otherwise, show a toast. + * @returns {boolean} True or false. + */ + ctrl.validateHadith = function() { + if (ctrl.hadith.person == null) { + ToastService.show("Please choose a person."); + return false; + } + if (ctrl.hadith.tags.length === 0) { + ToastService.show("Please choose at least one tag."); + return false; + } + return true; + } + /** * Called when the user clicks on the X icon to cancel the changes made. */ ctrl.cancelEditing = function() { ctrl.isEditing = false; + restoreCopyOfHadith(); }; }); }()); \ No newline at end of file diff --git a/HadithHouseWebsite/hadiths/static/hadiths/js/personselector.directive.js b/HadithHouseWebsite/hadiths/static/hadiths/js/personselector.directive.js index 7773626..fd0711a 100644 --- a/HadithHouseWebsite/hadiths/static/hadiths/js/personselector.directive.js +++ b/HadithHouseWebsite/hadiths/static/hadiths/js/personselector.directive.js @@ -39,8 +39,12 @@ function waitForPromises(promises, callback) { ctrl.availPersons = []; ctrl.availPersonsLoaded = false; - if (!ctrl.personId) { - ctrl.personId = null; + if (!ctrl.personsIds) { + ctrl.personsIds = []; + } + + if (!ctrl.persons) { + ctrl.persons = []; } PersonsService.getPersons().then(function onSuccess(persons) { @@ -48,16 +52,39 @@ function waitForPromises(promises, callback) { ctrl.availPersons = persons; }); - $scope.$watch(function() { return ctrl.personId; }, function() { - if ((!ctrl.person || ctrl.person.id != ctrl.personId) && ctrl.personId !== null) { - PersonsService.getPerson(ctrl.personId).then(function(person) { - ctrl.person = person; + function onPersonsIdsChanged(newValue, oldValue) { + if (newValue && oldValue && newValue.toString() === oldValue.toString()) { + return; + } + PersonsService.getPersons().then(function() { + ctrl.persons = ctrl.personsIds.map(function (id) { + return PersonsService.getPersonSync(id); + }); + }); + } + + $scope.$watch(function() { return ctrl.personsIds; }, onPersonsIdsChanged); + $scope.$watchCollection(function() { return ctrl.personsIds; }, onPersonsIdsChanged); + + function onPersonsChanged(newValue, oldValue) { + if (ctrl.persons) { + // If the control only allows single select, we remove every elements + // before the last. + if (ctrl.singleSelect === true && ctrl.persons.length > 1) { + ctrl.persons.splice(0, ctrl.persons.length - 1); + } + ctrl.personsIds = ctrl.persons.map(function(person) { + return person.id; }); } - }); - ctrl.onPersonChange = function() { + } + + $scope.$watch(function() { return ctrl.persons; }, onPersonsChanged); + $scope.$watchCollection(function() { return ctrl.persons; }, onPersonsChanged); + + /*ctrl.onPersonChange = function() { ctrl.personId = ctrl.person.id; - }; + };*/ ctrl.findPersons = function (query) { if (!ctrl.availPersonsLoaded) { @@ -65,8 +92,7 @@ function waitForPromises(promises, callback) { } return ctrl.availPersons.filter(function (person) { - return /*ctrl.personId.indexOf(person.id) == -1 &&*/ ( - person.title.indexOf(query) > -1 || + return (person.title.indexOf(query) > -1 || person.display_name.indexOf(query) > -1 || person.full_name.indexOf(query) > -1 || person.brief_desc.indexOf(query) > -1); @@ -83,8 +109,9 @@ function waitForPromises(promises, callback) { controllerAs: 'ctrl', bindToController: true, scope: { - personId: '=', - readOnly: '=' + personsIds: '=', + readOnly: '=', + singleSelect: '=' } }; diff --git a/HadithHouseWebsite/hadiths/static/hadiths/js/tagselector.directive.js b/HadithHouseWebsite/hadiths/static/hadiths/js/tagselector.directive.js index 6228d9c..746811a 100644 --- a/HadithHouseWebsite/hadiths/static/hadiths/js/tagselector.directive.js +++ b/HadithHouseWebsite/hadiths/static/hadiths/js/tagselector.directive.js @@ -28,6 +28,8 @@ HadithHouseApp.controller('TagSelectorCtrl', function ($scope, TagsService) { var ctrl = this; + ctrl.singleSelect = false; + if (!ctrl.tagNames) { ctrl.tagNames = []; } @@ -39,6 +41,12 @@ ctrl.availTagNames = tags.map(function(tag) { return tag.name; }); }); + $scope.$watchCollection(function() { return ctrl.tagNames; }, function() { + if (ctrl.singleSelect === true && ctrl.tagNames && ctrl.tagNames.length > 1) { + ctrl.tagNames.splice(0, ctrl.tagNames.length - 1); + } + }); + ctrl.findTagNames = function (query) { if (!ctrl.availTagsLoaded) { return []; @@ -60,7 +68,8 @@ bindToController: true, scope: { tagNames: '=', - readOnly: '=' + readOnly: '=', + singleSelect: '=' } }; diff --git a/HadithHouseWebsite/hadiths/templates/hadiths/index.html b/HadithHouseWebsite/hadiths/templates/hadiths/index.html index d56e166..3ee56e7 100644 --- a/HadithHouseWebsite/hadiths/templates/hadiths/index.html +++ b/HadithHouseWebsite/hadiths/templates/hadiths/index.html @@ -25,8 +25,8 @@ - - + +