Merge pull request #1298 from swissgeol/GSNGM-1161_geoms_remove_confi…

…rmation

Geometries | confirmation of delete

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",

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",

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",

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",

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()}"
                     ></ngm-project-topic-overview>`}
         </div>
       </div>

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`
-      <ngm-delete-warning-modal
-        @onProjectDeleted="${() => this.deleteProject()}"
-      > </ngm-delete-warning-modal>
+      <ngm-confirmation-modal
+        @onModalConfirmation="${() => this.deleteProject()}"
+        .text="${{
+            title: i18next.t('dashboard_delete_warning_title'),
+            description: i18next.t('dashboard_delete_warning_description'),
+            cancelBtn: i18next.t('cancel'),
+            confirmBtn: i18next.t('delete'),
+        }}"
+      > </ngm-confirmation-modal>
       <div>
         <div class="ngm-proj-title">
           ${translated(this.topicOrProject.title)}

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`
+      <div class="ngm-confirmation-modal ui small modal">
+        <div class="content">
+          <h3>${this.text.title}</h3>
+          <p>${this.text.description}</p>
+        </div>
+        <div class="actions">
+          <div class="ui cancel button ngm-cancel-btn">
+            ${this.text.cancelBtn}
+          </div>
+          <div class="ui ok button ngm-action-btn">
+            ${this.text.confirmBtn}
+          </div>
+        </div>
+      </div>
+    `;
+  }
+
+  createRenderRoot() {
+    // no shadow dom
+    return this;
+  }
+}

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';

ui/src/style/ngm-gst-modal.css → 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;
 }

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,

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')}
                 </div>
                 <div class="item"
-                     @click=${() => ToolboxStore.nextGeometryAction({
-                         type: this.selectedFilter,
-                         action: 'removeAll',
-                         noEditGeometries: this.noEditMode
-                     })}>
+                     @click=${() => this.deleteWarningModal.show = true}>
                     ${i18next.t('tbx_remove_all_btn')}
                 </div>
             </div>
@@ -231,7 +230,19 @@ export default class NgmGeometriesSimpleList extends LitElementI18n {
                     `;
                 })}
             </div>
-            </div>`;
+            <ngm-confirmation-modal
+                    @onModalConfirmation="${() => ToolboxStore.nextGeometryAction({
+                        type: this.selectedFilter,
+                        action: 'removeAll',
+                        noEditGeometries: this.noEditMode
+                    })}"
+                    .text="${{
+                        title: i18next.t('tbx_remove_all_warn_title'),
+                        description: i18next.t('tbx_remove_all_warn_description'),
+                        cancelBtn: i18next.t('cancel'),
+                        confirmBtn: i18next.t('tbx_remove_all_btn'),
+                    }}"
+            > </ngm-confirmation-modal`;
     }
 
     createRenderRoot() {