From b48f911bf26252dd979e6e2f3e3620f5de22d682 Mon Sep 17 00:00:00 2001 From: Yohan Boniface Date: Mon, 9 Sep 2024 21:10:52 +0200 Subject: [PATCH] chore: revamp permissions panel --- umap/static/umap/base.css | 7 +- umap/static/umap/js/modules/permissions.js | 153 +++++++++++++-------- umap/static/umap/js/umap.forms.js | 2 + 3 files changed, 98 insertions(+), 64 deletions(-) diff --git a/umap/static/umap/base.css b/umap/static/umap/base.css index cb65a352..631e9c51 100644 --- a/umap/static/umap/base.css +++ b/umap/static/umap/base.css @@ -307,9 +307,6 @@ input + .help-text { .formbox.with-switch { padding-top: 2px; } -.formbox select { - width: calc(100% - 14px); -} fieldset.formbox { border: none; border-top: 1px solid var(--color-lightGray); @@ -386,6 +383,10 @@ fieldset legend { font-size: .9rem; padding: 0 5px; } +fieldset.separator { + border: none; + border-top: 1px solid var(--color-lightGray); +} [data-badge] { position: relative; diff --git a/umap/static/umap/js/modules/permissions.js b/umap/static/umap/js/modules/permissions.js index df3acd19..f66de593 100644 --- a/umap/static/umap/js/modules/permissions.js +++ b/umap/static/umap/js/modules/permissions.js @@ -46,68 +46,21 @@ export class MapPermissions { return this.map } - edit() { - if (this.map.options.editMode !== 'advanced') return - if (!this.map.options.umap_id) { - return Alert.info(translate('Please save the map first')) - } - const container = DomUtil.create('div', 'permissions-panel') + _editAnonymous(container) { const fields = [] - DomUtil.createTitle(container, translate('Update permissions'), 'icon-key') - if (this.isAnonymousMap()) { - if (this.isOwner()) { - fields.push([ - 'options.edit_status', - { - handler: 'IntSelect', - label: translate('Who can edit'), - selectOptions: this.map.options.edit_statuses, - }, - ]) - } - } else { - if (this.isOwner()) { - fields.push([ - 'options.edit_status', - { - handler: 'IntSelect', - label: translate('Who can edit'), - selectOptions: this.map.options.edit_statuses, - }, - ]) - fields.push([ - 'options.share_status', - { - handler: 'IntSelect', - label: translate('Who can view'), - selectOptions: this.map.options.share_statuses, - }, - ]) - fields.push([ - 'options.owner', - { handler: 'ManageOwner', label: translate("Map's owner") }, - ]) - if (this.map.options.user?.teams?.length) { - fields.push([ - 'options.team', - { - handler: 'ManageTeam', - label: translate('Attach map to a team'), - teams: this.map.options.user.teams, - }, - ]) - } - } + if (this.isOwner()) { fields.push([ - 'options.editors', - { handler: 'ManageEditors', label: translate("Map's editors") }, + 'options.edit_status', + { + handler: 'IntSelect', + label: translate('Who can edit'), + selectOptions: this.map.options.edit_statuses, + }, ]) - } + const builder = new U.FormBuilder(this, fields) + const form = builder.build() + container.appendChild(form) - const builder = new U.FormBuilder(this, fields) - const form = builder.build() - container.appendChild(form) - if (this.isAnonymousMap()) { if (this.options.anonymous_edit_url) { DomUtil.createCopiableInput( container, @@ -133,12 +86,89 @@ export class MapPermissions { ) } } + } + + _editWithOwner(container) { + const topFields = [] + const collaboratorsFields = [] + const fieldset = Utils.loadTemplate( + `
${translate('Map')}
` + ) + container.appendChild(fieldset) + if (this.isOwner()) { + topFields.push([ + 'options.edit_status', + { + handler: 'IntSelect', + label: translate('Who can edit'), + selectOptions: this.map.options.edit_statuses, + }, + ]) + topFields.push([ + 'options.share_status', + { + handler: 'IntSelect', + label: translate('Who can view'), + selectOptions: this.map.options.share_statuses, + }, + ]) + collaboratorsFields.push([ + 'options.owner', + { handler: 'ManageOwner', label: translate("Map's owner") }, + ]) + if (this.map.options.user?.teams?.length) { + collaboratorsFields.push([ + 'options.team', + { + handler: 'ManageTeam', + label: translate('Attach map to a team'), + teams: this.map.options.user.teams, + }, + ]) + } + } + collaboratorsFields.push([ + 'options.editors', + { handler: 'ManageEditors', label: translate("Map's editors") }, + ]) + + const builder = new U.FormBuilder(this, topFields) + const form = builder.build() + container.appendChild(form) + if (collaboratorsFields.length) { + const fieldset = Utils.loadTemplate( + `
${translate('Manage collaborators')}
` + ) + container.appendChild(fieldset) + const builder = new U.FormBuilder(this, collaboratorsFields) + const form = builder.build() + container.appendChild(form) + } + } + + _editDatalayers(container) { if (this.map.hasLayers()) { - DomUtil.add('h4', '', container, translate('Datalayers')) + const fieldset = Utils.loadTemplate( + `
${translate('Datalayers')}
` + ) + container.appendChild(fieldset) this.map.eachDataLayer((datalayer) => { - datalayer.permissions.edit(container) + datalayer.permissions.edit(fieldset) }) } + } + + edit() { + if (this.map.options.editMode !== 'advanced') return + if (!this.map.options.umap_id) { + Alert.info(translate('Please save the map first')) + return + } + const container = DomUtil.create('div', 'permissions-panel') + DomUtil.createTitle(container, translate('Update permissions'), 'icon-key') + if (this.isAnonymousMap()) this._editAnonymous(container) + else this._editWithOwner(container) + this._editDatalayers(container) this.map.editPanel.open({ content: container, className: 'dark' }) } @@ -159,8 +189,9 @@ export class MapPermissions { for (let i = 0; i < this.options.editors.length; i++) formData.append('editors', this.options.editors[i].id) } - if (this.isOwner() || this.isAnonymousMap()) + if (this.isOwner() || this.isAnonymousMap()) { formData.append('edit_status', this.options.edit_status) + } if (this.isOwner()) { formData.append('owner', this.options.owner?.id) formData.append('team', this.options.team?.id || '') diff --git a/umap/static/umap/js/umap.forms.js b/umap/static/umap/js/umap.forms.js index 7061d632..ce54cfb6 100644 --- a/umap/static/umap/js/umap.forms.js +++ b/umap/static/umap/js/umap.forms.js @@ -1029,6 +1029,7 @@ L.FormBuilder.ManageOwner = L.FormBuilder.Element.extend({ const options = { className: 'edit-owner', on_select: L.bind(this.onSelect, this), + placeholder: L._("Type new owner's username"), } this.autocomplete = new U.AjaxAutocomplete(this.parentNode, options) const owner = this.toHTML() @@ -1058,6 +1059,7 @@ L.FormBuilder.ManageEditors = L.FormBuilder.Element.extend({ className: 'edit-editors', on_select: L.bind(this.onSelect, this), on_unselect: L.bind(this.onUnselect, this), + placeholder: L._("Type editor's username"), } this.autocomplete = new U.AjaxAutocompleteMultiple(this.parentNode, options) this._values = this.toHTML()