From 6f275d248d9bd188e74a4e0fff708af0ad3aa49b Mon Sep 17 00:00:00 2001 From: vladyslavtk Date: Mon, 10 Jun 2024 16:59:00 +0300 Subject: [PATCH 1/2] Added confirmation on all geometries delete --- ui/locales/app.de.json | 2 + ui/locales/app.en.json | 2 + ui/locales/app.fr.json | 2 + ui/locales/app.it.json | 2 + ui/src/elements/dashboard/ngm-dashboard.ts | 2 +- .../dashboard/ngm-delete-warning-modal.ts | 57 ----------------- .../dashboard/ngm-project-topic-overview.ts | 19 ++++-- ui/src/elements/ngm-confirmation-modal.ts | 64 +++++++++++++++++++ ui/src/style/index.css | 2 +- .../{ngm-gst-modal.css => ngm-modal.css} | 4 +- ui/src/toolbox/ngm-geometries-simple-list.ts | 25 ++++++-- 11 files changed, 107 insertions(+), 74 deletions(-) delete mode 100644 ui/src/elements/dashboard/ngm-delete-warning-modal.ts create mode 100644 ui/src/elements/ngm-confirmation-modal.ts rename ui/src/style/{ngm-gst-modal.css => ngm-modal.css} (65%) diff --git a/ui/locales/app.de.json b/ui/locales/app.de.json index 47ef9aa2c..4bc76799e 100644 --- a/ui/locales/app.de.json +++ b/ui/locales/app.de.json @@ -300,6 +300,8 @@ "tbx_profile_btn": "Höhenprofil erstellen", "tbx_project_geometries": "Projekt", "tbx_remove_all_btn": "Alles entfernen", + "tbx_remove_all_warn_description": "", + "tbx_remove_all_warn_title": "", "tbx_remove_btn_label": "Entfernen", "tbx_request_aborted_warning": "Aufruf abgebrochen", "tbx_save_editing_btn_label": "Speichern", diff --git a/ui/locales/app.en.json b/ui/locales/app.en.json index 74c96f267..8333fe6fa 100644 --- a/ui/locales/app.en.json +++ b/ui/locales/app.en.json @@ -300,6 +300,8 @@ "tbx_profile_btn": "Show height profile", "tbx_project_geometries": "Project", "tbx_remove_all_btn": "Remove all", + "tbx_remove_all_warn_description": "Listed geometries will be permanently removed. This action cannot be undone.", + "tbx_remove_all_warn_title": "Are you sure you want to remove all?", "tbx_remove_btn_label": "Remove", "tbx_request_aborted_warning": "Request aborted", "tbx_save_editing_btn_label": "Save", diff --git a/ui/locales/app.fr.json b/ui/locales/app.fr.json index 8cc455006..e5c35033d 100644 --- a/ui/locales/app.fr.json +++ b/ui/locales/app.fr.json @@ -300,6 +300,8 @@ "tbx_profile_btn": "Montrer le profil", "tbx_project_geometries": "Projet", "tbx_remove_all_btn": "Supprimer tout", + "tbx_remove_all_warn_description": "", + "tbx_remove_all_warn_title": "", "tbx_remove_btn_label": "Effacer", "tbx_request_aborted_warning": "Demande annulée", "tbx_save_editing_btn_label": "Sauvegarder", diff --git a/ui/locales/app.it.json b/ui/locales/app.it.json index 5683eee6b..3f14d352d 100644 --- a/ui/locales/app.it.json +++ b/ui/locales/app.it.json @@ -300,6 +300,8 @@ "tbx_profile_btn": "Mostrare il profilo", "tbx_project_geometries": "Progetto", "tbx_remove_all_btn": "Rimuovi tutto", + "tbx_remove_all_warn_description": "", + "tbx_remove_all_warn_title": "", "tbx_remove_btn_label": "Cancellare", "tbx_request_aborted_warning": "Domanda cancellata", "tbx_save_editing_btn_label": "Salvare", diff --git a/ui/src/elements/dashboard/ngm-dashboard.ts b/ui/src/elements/dashboard/ngm-dashboard.ts index 6f12064f1..0458584e6 100644 --- a/ui/src/elements/dashboard/ngm-dashboard.ts +++ b/ui/src/elements/dashboard/ngm-dashboard.ts @@ -595,7 +595,7 @@ export class NgmDashboard extends LitElementI18n { @onDeselect="${this.deselectTopicOrProject}" @onEdit="${this.onProjectEdit}" @onProjectDuplicated="${(evt: {detail: {project: Project}}) => this.onProjectDuplicated(evt.detail.project)}" - @onProjectDeleted="${() => this.deselectTopicOrProject()}" + @onModalConfirmation="${() => this.deselectTopicOrProject()}" >`} diff --git a/ui/src/elements/dashboard/ngm-delete-warning-modal.ts b/ui/src/elements/dashboard/ngm-delete-warning-modal.ts deleted file mode 100644 index 2e50a7d6f..000000000 --- a/ui/src/elements/dashboard/ngm-delete-warning-modal.ts +++ /dev/null @@ -1,57 +0,0 @@ -import {html} from 'lit'; -import {customElement, property} from 'lit/decorators.js'; -import $ from '../../jquery.js'; -import i18next from 'i18next'; -import {LitElementI18n} from '../../i18n.js'; - -import 'fomantic-ui-css/components/dimmer.js'; -import 'fomantic-ui-css/components/modal.js'; - -@customElement('ngm-delete-warning-modal') -export class NgmDeleteWarningModal extends LitElementI18n { - @property({type: Boolean}) - accessor show = false; - element; - - firstUpdated(_changedProperties) { - this.element = $('.ngm-delete-warning-modal.ui.modal').modal({ - centered: true, - onHidden: () => this.show = false, - onApprove: () => this.dispatchEvent(new CustomEvent('onProjectDeleted', {bubbles: true})) - }); - super.firstUpdated(_changedProperties); - } - - updated(changedProperties) { - if (changedProperties.has('show') && this.show) { - this.element.modal('show'); - } else if (!this.show) { - this.element.modal('hide'); - } - super.updated(changedProperties); - } - - render() { - return html` -
-
-

${i18next.t('dashboard_delete_warning_title')}

-

${i18next.t('dashboard_delete_warning_description')}

-
-
-
- ${i18next.t('cancel')} -
-
- ${i18next.t('delete')} -
-
-
- `; - } - - createRenderRoot() { - // no shadow dom - return this; - } -} diff --git a/ui/src/elements/dashboard/ngm-project-topic-overview.ts b/ui/src/elements/dashboard/ngm-project-topic-overview.ts index 861b2dffb..dc9a1058e 100644 --- a/ui/src/elements/dashboard/ngm-project-topic-overview.ts +++ b/ui/src/elements/dashboard/ngm-project-topic-overview.ts @@ -12,9 +12,10 @@ import $ from '../../jquery'; import {DEFAULT_PROJECT_COLOR} from '../../constants'; import './ngm-project-geoms-section'; import './ngm-project-assets-section'; -import './ngm-delete-warning-modal'; +import '../ngm-confirmation-modal'; import './ngm-project-members-section'; import {isProject} from './helpers'; +import {NgmConfirmationModal} from '../ngm-confirmation-modal'; @customElement('ngm-project-topic-overview') export class NgmProjectTopicOverview extends LitElementI18n { @@ -28,8 +29,8 @@ export class NgmProjectTopicOverview extends LitElementI18n { accessor userEmail: string = ''; @property({type: Number}) accessor selectedViewIndx: number | undefined; - @query('ngm-delete-warning-modal') - accessor deleteWarningModal; + @query('ngm-confirmation-modal') + accessor deleteWarningModal!: NgmConfirmationModal; shouldUpdate(_changedProperties: PropertyValues): boolean { return this.topicOrProject !== undefined; @@ -51,9 +52,15 @@ export class NgmProjectTopicOverview extends LitElementI18n { const projectModerator = [ownerEmail, ...editorEmails].includes(this.userEmail); return html` - +
${translated(this.topicOrProject.title)} diff --git a/ui/src/elements/ngm-confirmation-modal.ts b/ui/src/elements/ngm-confirmation-modal.ts new file mode 100644 index 000000000..835cff81a --- /dev/null +++ b/ui/src/elements/ngm-confirmation-modal.ts @@ -0,0 +1,64 @@ +import {html, PropertyValues} from 'lit'; +import {customElement, property} from 'lit/decorators.js'; +import $ from '../jquery.js'; +import {LitElementI18n} from '../i18n.js'; + +import 'fomantic-ui-css/components/dimmer.js'; +import 'fomantic-ui-css/components/modal.js'; + +@customElement('ngm-confirmation-modal') +export class NgmConfirmationModal extends LitElementI18n { + @property({type: Boolean}) + accessor show = false; + @property({type: Object}) + accessor text: {title: string, description: string, cancelBtn: string, confirmBtn: string} | undefined; + element: HTMLElement & {modal: (key: string) => void} | undefined; + + firstUpdated(_changedProperties: PropertyValues) { + this.element = $(this.querySelector('.ngm-confirmation-modal.ui.modal')).modal({ + centered: true, + onHidden: () => this.show = false, + onApprove: () => this.dispatchEvent(new CustomEvent('onModalConfirmation', {bubbles: true})) + }); + super.firstUpdated(_changedProperties); + } + + updated(changedProperties: PropertyValues) { + if (this.element) { + if (changedProperties.has('show') && this.show) { + this.element.modal('show'); + } else if (!this.show) { + this.element.modal('hide'); + } + } + super.updated(changedProperties); + } + + render() { + if (!this.text) { + this.show = false; + return ''; + } + return html` +
+
+

${this.text.title}

+

${this.text.description}

+
+
+
+ ${this.text.cancelBtn} +
+
+ ${this.text.confirmBtn} +
+
+
+ `; + } + + createRenderRoot() { + // no shadow dom + return this; + } +} diff --git a/ui/src/style/index.css b/ui/src/style/index.css index 95c84406d..a84bceeae 100644 --- a/ui/src/style/index.css +++ b/ui/src/style/index.css @@ -33,7 +33,7 @@ @import 'search.css'; @import 'ngm-height-slider.css'; @import 'ngm-object-information.css'; -@import 'ngm-gst-modal.css'; +@import 'ngm-modal.css'; @import 'keyboard-navigation.css'; @import 'layers.css'; @import 'ngm-map-configuration.css'; diff --git a/ui/src/style/ngm-gst-modal.css b/ui/src/style/ngm-modal.css similarity index 65% rename from ui/src/style/ngm-gst-modal.css rename to ui/src/style/ngm-modal.css index 0ce2688da..5285911cf 100644 --- a/ui/src/style/ngm-gst-modal.css +++ b/ui/src/style/ngm-modal.css @@ -1,11 +1,11 @@ .ngm-gst-modal.ui.modal embed, -.ngm-delete-warning-modal embed { +.ngm-confirmation-modal embed { width: 100%; height: 500px; } .ngm-gst-modal .actions, -.ngm-delete-warning-modal .actions { +.ngm-confirmation-modal .actions { display: flex; justify-content: end; } diff --git a/ui/src/toolbox/ngm-geometries-simple-list.ts b/ui/src/toolbox/ngm-geometries-simple-list.ts index 44c735a3f..199485dda 100644 --- a/ui/src/toolbox/ngm-geometries-simple-list.ts +++ b/ui/src/toolbox/ngm-geometries-simple-list.ts @@ -1,12 +1,13 @@ import {LitElementI18n} from '../i18n'; import type {PropertyValues, TemplateResult} from 'lit'; import {html} from 'lit'; -import {customElement, property, state} from 'lit/decorators.js'; +import {customElement, property, state, query} from 'lit/decorators.js'; import i18next from 'i18next'; import ToolboxStore from '../store/toolbox'; import {classMap} from 'lit-html/directives/class-map.js'; import type {GeometryTypes, NgmGeometry} from './interfaces'; import $ from '../jquery.js'; +import {NgmConfirmationModal} from '../elements/ngm-confirmation-modal'; @customElement('ngm-geometries-simple-list') export default class NgmGeometriesSimpleList extends LitElementI18n { @@ -40,6 +41,8 @@ export default class NgmGeometriesSimpleList extends LitElementI18n { accessor selectedFilter: GeometryTypes | undefined; @state() accessor nameEditIndex: number | undefined; + @query('ngm-confirmation-modal') + accessor deleteWarningModal!: NgmConfirmationModal; protected firstUpdated() { this.querySelectorAll('.ngm-action-menu').forEach(el => $(el).dropdown()); @@ -140,11 +143,7 @@ export default class NgmGeometriesSimpleList extends LitElementI18n { ${i18next.t('tbx_download_all_btn')}
ToolboxStore.nextGeometryAction({ - type: this.selectedFilter, - action: 'removeAll', - noEditGeometries: this.noEditMode - })}> + @click=${() => this.deleteWarningModal.show = true}> ${i18next.t('tbx_remove_all_btn')}
@@ -231,7 +230,19 @@ export default class NgmGeometriesSimpleList extends LitElementI18n { `; })} - `; + Date: Mon, 10 Jun 2024 17:11:47 +0300 Subject: [PATCH 2/2] fix action menu placing --- ui/src/style/ngm-toolbox.css | 2 ++ 1 file changed, 2 insertions(+) diff --git a/ui/src/style/ngm-toolbox.css b/ui/src/style/ngm-toolbox.css index 5377bbf59..8fc1c63fc 100644 --- a/ui/src/style/ngm-toolbox.css +++ b/ui/src/style/ngm-toolbox.css @@ -14,6 +14,7 @@ data-download { ngm-geometries-list { min-height: 140px; + height: 100%; } ngm-geometries-simple-list { @@ -25,6 +26,7 @@ ngm-geometries-simple-list { .ngm-geom-list { overflow-y: auto; + height: 100%; } .ngm-draw-list-item,