diff options
author | diosmosis <diosmosis@users.noreply.github.com> | 2018-08-07 01:20:32 +0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2018-08-07 01:20:32 +0300 |
commit | 2e006803ee17a8d1a992085c6425eddaa84a25f5 (patch) | |
tree | 6798441780992ff6e1b3010aa98519c2c2af1f5b /plugins/CorePluginsAdmin | |
parent | bb1b1b4b068fc40da896e7eedbad3b2914dc2468 (diff) |
Scalable UX for user management (#13158)
* Create empty components.
* Mock up users list pagination.
* Finish initial version of mockup.
* Tweak to UI
* More UI changes to new users manager screen.
* More UI changes
* Mock up user permission edits.
* More tweaks to user permission editing (on both edit form & in users table).
* add options
* Another iteration on the UsersManager UI.
* Update UsersManager UI again.
* Implementing parts of the UI, fixing issue w/ overlapping material selects, creating dropdown directives for dropdown w/ submenu using materializecss, change bulk actions to be dropdown button.
* Merge menu/submenu directives.
* More superuser UI only functionality.
* Fill out more logic of users manager UI + merging extra unneeded components/directives.
* More users manager UI only changes.
* Incomplete API method for new users list page.
* Fill in server side pagination logic w/ tests & generally get to work in UI.
* Make sure selects w/ placeholders can be unset.
* Add loading state to users list + fix pagination issues + resize pagination in case the numbers are large.
* Add last seen time to getUsersPlusAccessLevel() so it displays in UI.
* Add permission edit pagination AJAX query + server side code.
* Add "add access" button to user permission component.
* Change permissions column to role + remove superuser checkbox & merge w/ Role column.
* Delete user + bulk delete functionality.
* Get delete users to work when entire search is selected.
* Ask for confirmation before setting access in users list & implement access change logic.
* Get bulk access functionality on users list to work (w/ tests).
* Fix a bug in user table filtering + get permissions edit search to work.
* Complete logic for permissions edit.
* Change add user workflow so we do not have to save each permission edit in memory before saving whole user.
* Add/edit user functionality.
* Toggle superuser access functionality + some modal fixes.
* in users list display ajax loading notification so counter is not changed visibly before rows are loaded.
* initial review changes, disable functionality when viewing user is not superuser and some UI tweaks.
* Redo top controls for user permission edit and add slide up toast notification for when a site is added.
* Display warning in user permission edit if user has no access at all.
* Do not reload users after going back from user edit form.
* Force giving a new user access to a site when creating a user and make sure user list reloads if a user is modified, but does not realod if no user is modified.
* Add form help to the non-straightforward fields.
* Remove old usersmanager code & fix pagination bug.
* Add help icon explaining roles to users list + permission edit.
* Allow admin users to create other users + fix some regressions when making page-users-list not reload every time.
* Apply self review changes.
* Do not allow editing user details when an admin user edits a user.
* Starting on UI tests.
* Limit users displayed in page list to those that already have access to sites the current user is an admin of.
* Refactor bulk/single AJAX calls & redraw component boundaries (users manager component owns user search state, paged users list owns table/control state).
* Get add existing user modal to work.
* write most UI tests + modify fixture
* Fill out rest of UI test suite & get the rest to pass.
* fix couple regressions
* Get UI tests to pass and start on translation.
* adding translations
* try to fix some tests
* Fixing API tests.
* Fixing UsersManager tests.
* Fix UI tests.
* Add capabilities to new API output.
* remove non-existant file references.
* Add Write role to dropdowns.
* Select from proper join.
* tweak test
* Updating UI tests.
* Change styling of user permissions edit.
* Update screenshots
* Apply some PR feedback.
* apply some review feedback
* more review changes
* update file headers
* remove some TODOs
* fix some tests
* some more review fixes
* update test files
* Fix failing tests.
Diffstat (limited to 'plugins/CorePluginsAdmin')
4 files changed, 43 insertions, 10 deletions
diff --git a/plugins/CorePluginsAdmin/angularjs/field/field.directive.js b/plugins/CorePluginsAdmin/angularjs/field/field.directive.js index 4c2a3564f8..e64179fc43 100644 --- a/plugins/CorePluginsAdmin/angularjs/field/field.directive.js +++ b/plugins/CorePluginsAdmin/angularjs/field/field.directive.js @@ -9,7 +9,7 @@ * Usage: * <div piwik-field> * - * eg <div piwik-field ui-control="select" + * eg <div piwik-field uicontrol="select" * title="{{ 'SitesManager_Timezone'|translate }}" * value="site.timezone" * options="timezones" diff --git a/plugins/CorePluginsAdmin/angularjs/form-field/field-select.html b/plugins/CorePluginsAdmin/angularjs/form-field/field-select.html index a9018bbf98..36bedbdc25 100644 --- a/plugins/CorePluginsAdmin/angularjs/form-field/field-select.html +++ b/plugins/CorePluginsAdmin/angularjs/form-field/field-select.html @@ -1,8 +1,10 @@ <div> <select name="{{ formField.name }}" ng-model="formField.value" - ng-options="t.key as t.value group by t.group for t in formField.availableOptions" - piwik-attributes="{{formField.uiControlAttributes}}"> + ng-options="t.key as t.value group by t.group disable when t.disabled for t in formField.availableOptions" + piwik-attributes="{{formField.uiControlAttributes}}" + ng-click="onShowSelect()" + > </select> <label for="{{ formField.name }}" ng-bind-html="formField.title"></label> </div> diff --git a/plugins/CorePluginsAdmin/angularjs/form-field/field-site.html b/plugins/CorePluginsAdmin/angularjs/form-field/field-site.html index 5fa647685e..7a1e6729a3 100644 --- a/plugins/CorePluginsAdmin/angularjs/form-field/field-site.html +++ b/plugins/CorePluginsAdmin/angularjs/form-field/field-site.html @@ -4,8 +4,11 @@ class="sites_autocomplete" ng-model="formField.value" id="{{ formField.name }}" - show-all-sites-item="false" + show-all-sites-item="formField.uiControlAttributes.showAllSitesItem || false" switch-site-on-select="false" show-selected-site="true" - piwik-attributes="{{formField.uiControlAttributes}}"></div> + only-sites-with-admin-access="formField.uiControlAttributes.onlySitesWithAdminAccess || false" + placeholder="{{ formField.uiControlAttributes.placeholder }}" + piwik-attributes="{{formField.uiControlAttributes}}" + ></div> </div> diff --git a/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js b/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js index 6774fda081..5637c88902 100644 --- a/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js +++ b/plugins/CorePluginsAdmin/angularjs/form-field/form-field.directive.js @@ -16,6 +16,30 @@ function piwikFormField(piwik, $timeout){ + function initMaterialSelect($select, placeholder) { + $select.material_select(); + + // to prevent overlapping selects, when a select is opened, we set the z-index to a high value on focus & remove z-index for all others + // NOTE: we can't remove it directly blur since the blur causes the select to overlap, aborting the select click. (a timeout is used + // to make sure the z-index is removed however, in case a non-select dropdown is displayed over it) + $select.closest('.select-wrapper').find('input.select-dropdown') + .focus(function () { + $('.select-wrapper').css('z-index', ''); + $(this).closest('.select-wrapper').css('z-index', 999); + }).blur(function () { + var self = this; + setTimeout(function () { + $(self).closest('.select-wrapper').css('z-index', ''); + }, 250); + }); + + // add placeholder to input + if (placeholder) { + var $materialInput = $select.closest('.select-wrapper').find('input'); + $materialInput.attr('placeholder', placeholder); + } + } + function syncMultiCheckboxKeysWithFieldValue(field) { angular.forEach(field.availableOptions, function (option, index) { @@ -73,12 +97,12 @@ if (isSelectControl(field)) { var $select = element.find('select'); - $select.material_select(); + initMaterialSelect($select, field.uiControlAttributes.placeholder); scope.$watch('formField.value', function (val, oldVal) { if (val !== oldVal) { $timeout(function () { - $select.material_select(); + initMaterialSelect($select, field.uiControlAttributes.placeholder); }); } }); @@ -86,7 +110,7 @@ scope.$watch('formField.uiControlAttributes.disabled', function (val, oldVal) { if (val !== oldVal) { $timeout(function () { - $select.material_select(); + initMaterialSelect($select, field.uiControlAttributes.placeholder); }); } }); @@ -342,6 +366,11 @@ // availableValues and in the watch change availableValues could trigger lots of more watch events field.availableOptions = formatAvailableValues(field); + // for selects w/ a placeholder, add an option to unset the select + if (field.uiControl === 'select' && field.uiControlAttributes.placeholder) { + field.availableOptions.splice(0, 0, { key: '', value: '' }); + } + field.defaultValuePretty = formatPrettyDefaultValue(defaultValue, field.availableOptions); field.showField = true; @@ -395,7 +424,7 @@ if (isSelectControl(scope.formField)) { $timeout(function () { - element.find('select').material_select(); + initMaterialSelect(element.find('select'), field.uiControlAttributes.placeholder); }); } } @@ -403,7 +432,6 @@ scope.templateLoaded = function () { $timeout(whenRendered(scope, element, inlineHelpNode)); }; - }; } }; |