Repository: syncope Updated Branches: refs/heads/2_0_X bc310b1a3 -> 828227cfd
[SYNCOPE-996] add kendo date time picker Project: http://git-wip-us.apache.org/repos/asf/syncope/repo Commit: http://git-wip-us.apache.org/repos/asf/syncope/commit/828227cf Tree: http://git-wip-us.apache.org/repos/asf/syncope/tree/828227cf Diff: http://git-wip-us.apache.org/repos/asf/syncope/diff/828227cf Branch: refs/heads/2_0_X Commit: 828227cfdc4fdfc9608d5a8f60e4d93d73afdeac Parents: bc310b1 Author: Matteo Di Carlo <matteo.dica...@tirasa.net> Authored: Mon Jan 23 12:30:47 2017 +0100 Committer: Matteo Di Carlo <matteo.dica...@tirasa.net> Committed: Tue Jan 24 15:44:15 2017 +0100 ---------------------------------------------------------------------- .../META-INF/resources/app/css/editUser.css | 25 +++-- .../resources/META-INF/resources/app/index.html | 3 + .../resources/META-INF/resources/app/js/app.js | 13 ++- .../app/js/controllers/UserController.js | 13 +-- .../app/js/directives/dynamicPlainAttribute.js | 110 +++---------------- .../app/views/dynamicPlainAttribute.html | 30 ++--- .../src/test/resources/tests/edit.js | 2 - .../workingwithapachesyncope/customization.adoc | 37 +++++-- 8 files changed, 84 insertions(+), 149 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/syncope/blob/828227cf/client/enduser/src/main/resources/META-INF/resources/app/css/editUser.css ---------------------------------------------------------------------- diff --git a/client/enduser/src/main/resources/META-INF/resources/app/css/editUser.css b/client/enduser/src/main/resources/META-INF/resources/app/css/editUser.css index d88cebf..ec5baca 100644 --- a/client/enduser/src/main/resources/META-INF/resources/app/css/editUser.css +++ b/client/enduser/src/main/resources/META-INF/resources/app/css/editUser.css @@ -17,8 +17,6 @@ specific language governing permissions and limitations under the License. */ -/*default stile*/ - * { box-sizing: border-box; } @@ -209,12 +207,8 @@ under the License. margin-top: 10px; } -#datetime{ - line-height: 34px; - float: left; - margin-top:-30px; - padding: 0 3px 0px 0px; - display: -webkit-inline-box; +span.k-datetimepicker{ + width: 170%; } #date{ @@ -332,6 +326,7 @@ under the License. margin-top: -65px; } + .btn-group{ position: relative; display: inline-flex; @@ -366,6 +361,11 @@ under the License. margin-left: -42px; margin-right: 15px; } + + span.k-datetimepicker { + width: 141%; + margin-top: -50px; +} } @@ -440,6 +440,10 @@ under the License. margin-left: -21px; margin-top: 4px; } + + span.k-datetimepicker{ + width: 160%; + } } @@ -569,6 +573,11 @@ under the License. margin-top: -65px; } + span.k-datetimepicker{ + width: 171%; + margin-top: 50%; + } + .multivalue button{ width: 40px; } http://git-wip-us.apache.org/repos/asf/syncope/blob/828227cf/client/enduser/src/main/resources/META-INF/resources/app/index.html ---------------------------------------------------------------------- diff --git a/client/enduser/src/main/resources/META-INF/resources/app/index.html b/client/enduser/src/main/resources/META-INF/resources/app/index.html index ef58553..3c98e23 100644 --- a/client/enduser/src/main/resources/META-INF/resources/app/index.html +++ b/client/enduser/src/main/resources/META-INF/resources/app/index.html @@ -73,6 +73,9 @@ under the License. <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/kendo.ui.core.min.js"></script> <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/kendo.notification.min.js"></script> <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/kendo.angular.js"></script> + <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/cultures/kendo.culture.it.js"></script> + <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/cultures/kendo.culture.en.js"></script> + <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/cultures/kendo.culture.de.js"></script> <script src="../webjars/angular-treasure-overlay-spinner/${angular-treasure-overlay-spinner.version}/dist/treasure-overlay-spinner.min.js"></script> <script src="../webjars/ng-password-strength/${ng-password-strength.version}/dist/scripts/ng-password-strength.min.js"></script> <script type="text/javascript" src="../webjars/bootstrap-select/${bootstrap-select.version}/js/bootstrap-select.min.js"></script> http://git-wip-us.apache.org/repos/asf/syncope/blob/828227cf/client/enduser/src/main/resources/META-INF/resources/app/js/app.js ---------------------------------------------------------------------- diff --git a/client/enduser/src/main/resources/META-INF/resources/app/js/app.js b/client/enduser/src/main/resources/META-INF/resources/app/js/app.js index 5d062cb..c74b6e8 100644 --- a/client/enduser/src/main/resources/META-INF/resources/app/js/app.js +++ b/client/enduser/src/main/resources/META-INF/resources/app/js/app.js @@ -47,16 +47,14 @@ var app = angular.module('SyncopeEnduserApp', [ app.config(['$stateProvider', '$urlRouterProvider', '$httpProvider', '$translateProvider', '$translatePartialLoaderProvider', function ($stateProvider, $urlRouterProvider, $httpProvider, $translateProvider, $translatePartialLoaderProvider) { - + $translatePartialLoaderProvider.addPart('static'); $translatePartialLoaderProvider.addPart('dynamic'); $translateProvider.useLoader('$translatePartialLoader', { urlTemplate: 'languages/{lang}/{part}.json' }) .preferredLanguage('en'); -// .useCookieStorage(); - // route configuration $stateProvider .state('home', { url: '/', @@ -263,6 +261,15 @@ app.run(['$rootScope', '$location', '$state', 'AuthService', //If the route change failed due to authentication error, redirect them out $rootScope.endReached = false; + $rootScope.languages = { + availableLanguages: [ + {id: '1', name: 'Italiano', code: 'it', format: 'dd/MM/yyyy HH:mm'}, + {id: '2', name: 'English', code: 'en', format: 'MM/dd/yyyy HH:mm'}, + {id: '3', name: 'Deutsch', code: 'de', format: 'dd/MM/yyyy HH:mm'} + ] + }; + $rootScope.languages.selectedLanguage = $rootScope.languages.availableLanguages[1]; + $rootScope.$on('$routeChangeError', function (event, current, previous, rejection) { if (rejection === 'Not Authenticated') { $location.path('/self'); http://git-wip-us.apache.org/repos/asf/syncope/blob/828227cf/client/enduser/src/main/resources/META-INF/resources/app/js/controllers/UserController.js ---------------------------------------------------------------------- diff --git a/client/enduser/src/main/resources/META-INF/resources/app/js/controllers/UserController.js b/client/enduser/src/main/resources/META-INF/resources/app/js/controllers/UserController.js index 45f038b..ce9c170 100644 --- a/client/enduser/src/main/resources/META-INF/resources/app/js/controllers/UserController.js +++ b/client/enduser/src/main/resources/META-INF/resources/app/js/controllers/UserController.js @@ -512,17 +512,9 @@ angular.module("self").controller("UserController", ['$scope', '$rootScope', '$l } }; - $scope.languages = { - availableLanguages: [ - {id: '1', name: 'Italiano', code: 'it'}, - {id: '2', name: 'English', code: 'en'}, - {id: '3', name: 'Deutsch', code: 'de'} - ], - selectedLanguage: {id: '2', name: 'English', code: 'en'} - }; - $scope.switchLanguage = function () { - $translate.use($scope.languages.selectedLanguage.code); + $translate.use($rootScope.languages.selectedLanguage.code); + kendo.culture($rootScope.languages.selectedLanguage.code); }; $scope.logout = function (message) { @@ -540,7 +532,6 @@ angular.module("self").controller("UserController", ['$scope', '$rootScope', '$l }; $scope.redirect = function () { - console.log("$scope.languages.selectedLanguage.code", $scope.languages.selectedLanguage.code); $translate.use($scope.languages.selectedLanguage.code); $location.path('/self'); $rootScope.endReached = false; http://git-wip-us.apache.org/repos/asf/syncope/blob/828227cf/client/enduser/src/main/resources/META-INF/resources/app/js/directives/dynamicPlainAttribute.js ---------------------------------------------------------------------- diff --git a/client/enduser/src/main/resources/META-INF/resources/app/js/directives/dynamicPlainAttribute.js b/client/enduser/src/main/resources/META-INF/resources/app/js/directives/dynamicPlainAttribute.js index 1aabdd3..682a2bf 100644 --- a/client/enduser/src/main/resources/META-INF/resources/app/js/directives/dynamicPlainAttribute.js +++ b/client/enduser/src/main/resources/META-INF/resources/app/js/directives/dynamicPlainAttribute.js @@ -28,7 +28,7 @@ angular.module('self') index: "=", user: "=" }, - controller: function ($scope, $element, $window) { + controller: function ($scope, $rootScope, $element, $window) { $scope.initAttribute = function (schema, index) { switch (schema.type) { case "Long": @@ -85,107 +85,27 @@ angular.module('self') break; case "Date": + $scope.getType = function (x) { + return typeof x; + }; + $scope.isDate = function (x) { + return x instanceof Date; + }; + var dateInMs = $scope.user.plainAttrs[schema.key].values[index]; - if (dateInMs) { - var temporaryDate = new Date(dateInMs * 1); - $scope.selectedDate = temporaryDate; - $scope.selectedTime = temporaryDate; - } + var temporaryDate = new Date(dateInMs * 1); + $scope.selectedDate = temporaryDate; + $scope.languageid = $rootScope.languages.selectedLanguage.id; + $scope.languageFormat = $rootScope.languages.selectedLanguage.format; + $scope.languageCulture = $rootScope.languages.selectedLanguage.culture; - $scope.bindDateToModel = function (selectedDate, selectedTime) { + $scope.bindDateToModel = function (selectedDate, extendedDate) { if (selectedDate) { - var extractedDate = selectedDate.toString().substring(0, 15); - var extractedTime; - if (selectedTime) { - extractedTime = selectedTime.toString().substring(16); - } else { - extractedTime = '00:00:00'; - } - var resultDate = extractedDate + ' ' + extractedTime; - var tmpdate = new Date(resultDate); + var tmpdate = new Date(extendedDate); var milliseconds = tmpdate.getTime(); $scope.user.plainAttrs[schema.key].values[index] = milliseconds; } }; - - $scope.clear = function () { - $scope.user.plainAttrs[schema.key].values[index] = null; - }; - - // Disable weekend selection - $scope.disabled = function (date, mode) { - // if you want to disable weekends: - // return (mode === 'day' && (date.getDay() === 0 || date.getDay() === 6)); - return false; - }; - - $scope.toggleMin = function () { - $scope.minDate = $scope.minDate ? null : new Date(); - }; - - $scope.maxDate = new Date(2050, 5, 22); - - $scope.open = function ($event) { - $scope.status.opened = true; - }; - - $scope.setDate = function (year, month, day) { - $scope.user.plainAttrs[schema.key].values[index] = new Date(year, month, day); - }; - - $scope.dateOptions = { - startingDay: 1 - }; - - $scope.status = { - opened: false - }; - - var tomorrow = new Date(); - tomorrow.setDate(tomorrow.getDate() + 1); - var afterTomorrow = new Date(); - afterTomorrow.setDate(tomorrow.getDate() + 2); - $scope.events = - [ - { - date: tomorrow, - status: 'full' - }, - { - date: afterTomorrow, - status: 'partially' - } - ]; - - $scope.getDayClass = function (date, mode) { - if (mode === 'day') { - var dayToCheck = new Date(date).setHours(0, 0, 0, 0); - - for (var i = 0; i < $scope.events.length; i++) { - var currentDay = new Date($scope.events[i].date).setHours(0, 0, 0, 0); - - if (dayToCheck === currentDay) { - return $scope.events[i].status; - } - } - } - - }; - - //TIME PICKER - $scope.selectedTime = $scope.selectedDate; - $scope.hstep = 1; - $scope.mstep = 1; - - $scope.options = { - hstep: [1, 2, 3], - mstep: [1, 5, 10, 15, 25, 30] - }; - - $scope.ismeridian = false; - $scope.toggleMode = function () { - $scope.ismeridian = !$scope.ismeridian; - }; break; case "Boolean": http://git-wip-us.apache.org/repos/asf/syncope/blob/828227cf/client/enduser/src/main/resources/META-INF/resources/app/views/dynamicPlainAttribute.html ---------------------------------------------------------------------- diff --git a/client/enduser/src/main/resources/META-INF/resources/app/views/dynamicPlainAttribute.html b/client/enduser/src/main/resources/META-INF/resources/app/views/dynamicPlainAttribute.html index 1579fd0..68b9f5a 100644 --- a/client/enduser/src/main/resources/META-INF/resources/app/views/dynamicPlainAttribute.html +++ b/client/enduser/src/main/resources/META-INF/resources/app/views/dynamicPlainAttribute.html @@ -79,28 +79,18 @@ under the License. <input ng-switch-when="Double" class="form-control" type="number" ng-model="user.plainAttrs[schema.key].values[index]" ng-required="{{schema.mandatoryCondition}}" validate="true" ng-init="initAttribute(schema, index)" name="{{schema.key}}"/> - + <div ng-switch-when="Date" id="date"> - <div id="datetime"> - <input type="text" class="form-control" - uib-datepicker-popup - ng-model="selectedDate" - ng-change="bindDateToModel(selectedDate, selectedTime)" - min-date="minDate" max-date="maxDate" - is-open="status.opened" datepicker-options="dateOptions" + <input type="text" class="dateTimePicker" + id="dateTimePicker" + kendo-date-time-picker + ng-model="extendedDate" ng-required="{{schema.mandatoryCondition}}" close-text="Close" - ng-init="initAttribute(schema, index)"/> - <button id="calendar" type="button" class="btn btn-default" ng-click="open($event)" > - <i class="glyphicon glyphicon-calendar"></i> - </button> - </div> - <div id="timepicker" ng-if="(schema.conversionPattern.indexOf('H') > -1 || - schema.conversionPattern.indexOf('h') > -1)"> - <uib-timepicker ng-model="selectedTime" - ng-change="bindDateToModel(selectedDate, selectedTime)" - hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"> - </uib-timepicker> - </div> + ng-init="initAttribute(schema, index)" + ng-change="bindDateToModel(selectedDate, extendedDate)" + k-ng-model="selectedDate" + data-k-format=languageFormat + /> </div> <div ng-switch-when="Enum" ng-init="initAttribute(schema, index)"> http://git-wip-us.apache.org/repos/asf/syncope/blob/828227cf/fit/enduser-reference/src/test/resources/tests/edit.js ---------------------------------------------------------------------- diff --git a/fit/enduser-reference/src/test/resources/tests/edit.js b/fit/enduser-reference/src/test/resources/tests/edit.js index 9c49f44..2da5240 100644 --- a/fit/enduser-reference/src/test/resources/tests/edit.js +++ b/fit/enduser-reference/src/test/resources/tests/edit.js @@ -72,8 +72,6 @@ describe('syncope enduser user edit', function () { element.all(by.css('[name="fullname"]')).first().sendKeys('Vincenzo Bellini'); element.all(by.css('[name="userId"]')).first().clear(); element.all(by.css('[name="userId"]')).first().sendKeys('bell...@apache.org'); - element.all(by.model('selectedDate')).first().clear(); - element.all(by.model('selectedDate')).first().sendKeys('2009-06-21'); element.all(by.css('[name="firstname"]')).first().clear(); element.all(by.css('[name="firstname"]')).first().sendKeys('Vincenzo'); element.all(by.css('[name="ctype"]')).first().clear(); http://git-wip-us.apache.org/repos/asf/syncope/blob/828227cf/src/main/asciidoc/reference-guide/workingwithapachesyncope/customization.adoc ---------------------------------------------------------------------- diff --git a/src/main/asciidoc/reference-guide/workingwithapachesyncope/customization.adoc b/src/main/asciidoc/reference-guide/workingwithapachesyncope/customization.adoc index 9cb97f0..47df12c 100644 --- a/src/main/asciidoc/reference-guide/workingwithapachesyncope/customization.adoc +++ b/src/main/asciidoc/reference-guide/workingwithapachesyncope/customization.adoc @@ -365,22 +365,39 @@ Changing the content of these files will result in updating the Enduser messages ==== In order to add support for a new language (taking French as reference): -* add the new language entry in `js/controllers/LoginController.js` under `availableLanguages`, by updating +* add the support for the new language by updating `index.html`: ``` + <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/cultures/kendo.culture.it.js"></script> + <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/cultures/kendo.culture.en.js"></script> + <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/cultures/kendo.culture.de.js"></script> +``` +in +``` + <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/cultures/kendo.culture.it.js"></script> + <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/cultures/kendo.culture.en.js"></script> + <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/cultures/kendo.culture.de.js"></script> + <script src="../webjars/kendo-ui-core/${kendo-ui-core.version}/js/cultures/kendo.culture.fr.js"></script> +``` +* add the new language entry in `js/app.js` under `availableLanguages`, by updating +``` + $rootScope.languages = { availableLanguages: [ - {id: '1', name: 'Italiano', code: 'it'}, - {id: '2', name: 'English', code: 'en'}, - {id: '3', name: 'Deutsch', code: 'de'} - ], + {id: '1', name: 'Italiano', code: 'it', format: 'dd/MM/yyyy HH:mm'}, + {id: '2', name: 'English', code: 'en', format: 'MM/dd/yyyy HH:mm'}, + {id: '3', name: 'Deutsch', code: 'de', format: 'dd/MM/yyyy HH:mm'} + ] + }; ``` as ``` + $rootScope.languages = { availableLanguages: [ - {id: '1', name: 'Italiano', code: 'it'}, - {id: '2', name: 'English', code: 'en'}, - {id: '3', name: 'Deutsch', code: 'de'} - {id: '4', name: 'Français', code: 'fr'} - ], + {id: '1', name: 'Italiano', code: 'it', format: 'dd/MM/yyyy HH:mm'}, + {id: '2', name: 'English', code: 'en', format: 'MM/dd/yyyy HH:mm'}, + {id: '3', name: 'Deutsch', code: 'de', format: 'dd/MM/yyyy HH:mm'} + {id: '4', name: 'Français', code: 'fr', format: 'dd/MM/yyyy HH:mm'} + ] + }; ``` * copy the `enduser/src/main/webapp/app/languages/en/` directory into `enduser/src/main/webapp/app/languages/fr/` and modify the JSON files under the new directory
