add button to delete extra field

elabftw · Jul 22, 2023 · ecf8745 · ecf8745
1 parent fd5a047
commit ecf8745
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 3 deletions.
diff --git a/src/ts/Metadata.class.ts b/src/ts/Metadata.class.ts
@@ -411,12 +411,28 @@ export class Metadata {
           for (const element of groupedArr[group.id].sort((a: ExtraFieldProperties, b: ExtraFieldProperties) => a.position - b.position)) {
             const listItem = document.createElement('li');
             listItem.classList.add('list-group-item');
+            const labelDiv = document.createElement('div');
+            labelDiv.classList.add('d-flex', 'justify-content-between');
+
+            // LABEL
             const label = document.createElement('label');
             label.htmlFor = element.element.id;
             label.innerText = element.name as string;
             if (element.element.required) {
               label.classList.add('required-label');
             }
+            label.classList.add('py-2');
+
+            // add a button to delete the field
+            const deleteBtn = document.createElement('span');
+            deleteBtn.dataset.action = 'metadata-rm-field';
+            deleteBtn.classList.add('rounded', 'p-2', 'hl-hover-gray');
+            const deleteIcon = document.createElement('i');
+            deleteIcon.classList.add('fas', 'fa-trash-alt');
+            deleteBtn.appendChild(deleteIcon);
+
+            labelDiv.append(label);
+            labelDiv.append(deleteBtn);
 
             // for checkboxes the label comes second
             if (element.element.type === 'checkbox') {
@@ -425,10 +441,10 @@ export class Metadata {
               wrapperDiv.classList.add('form-check');
               listItem.append(wrapperDiv);
               wrapperDiv.append(element.element);
-              wrapperDiv.append(label);
+              wrapperDiv.append(labelDiv);
               wrapperDiv.append(this.getDescription(element));
             } else {
-              listItem.append(label);
+              listItem.append(labelDiv);
               listItem.append(this.getDescription(element));
               listItem.append(element.element);
             }

diff --git a/src/ts/edit.ts b/src/ts/edit.ts
@@ -20,6 +20,7 @@ import i18next from 'i18next';
 import { Metadata } from './Metadata.class';
 import EntityClass from './Entity.class';
 import { Api } from './Apiv2.class';
+import { ValidMetadata } from './metadataInterfaces';
 
 class CustomDropzone extends Dropzone {
   tinyImageSuccess: null | undefined | ((url: string) => void);
@@ -284,6 +285,14 @@ document.addEventListener('DOMContentLoaded', () => {
     } else if (el.matches('[data-action="show-plain-text"]')) {
       showContentPlainText(el);
 
+    // DELETE EXTRA FIELD
+    } else if (el.matches('[data-action="metadata-rm-field"]')) {
+      MetadataC.read().then(metadata => {
+        const name = el.closest('div').querySelector('label').innerText;
+        delete metadata.extra_fields[name];
+        MetadataC.update(metadata as ValidMetadata);
+      });
+
     // INSERT IMAGE AT CURSOR POSITION IN TEXT
     } else if (el.matches('[data-action="insert-image-in-body"]')) {
       // link to the image

diff --git a/src/ts/metadataInterfaces.ts b/src/ts/metadataInterfaces.ts
@@ -7,7 +7,7 @@
  */
 
 export interface ValidMetadata {
-  elabftw: MetadataElabftw,
+  elabftw?: MetadataElabftw,
   extra_fields: ExtraField,
 }