Provide capability to edit fields

Threagile · Nov 15, 2024 · 45549cd · 45549cd
1 parent 3da5ec5
commit 45549cd
Show file tree

Hide file tree

Showing 2 changed files with 82 additions and 9 deletions.
diff --git a/server/static/js/edit-model.js b/server/static/js/edit-model.js
@@ -148,8 +148,10 @@ $(document).ready(function() {
 
     const classEditor = new EditorGenerator(nodeData, schema, $('#' + id));
     // TODO: do not hard code hidden properties
-    classEditor.generateEditor(['communication_links', 'data_assets_processed', 'data_assets_stored',
+    const hiddenProperties = ['communication_links', 'data_assets_processed', 'data_assets_stored',
       'data_assets_sent', 'data_assets_received', 'data_assets', 'technical_assets',
-      'trust_boundaries', 'shared_runtimes', 'individual_risk_categories']);
+      'trust_boundaries', 'shared_runtimes', 'individual_risk_categories'];
+    const extendableProperties = ['questions', 'abuse_cases', 'security_requirements', 'risk_tracking'];
+    classEditor.generateEditor(hiddenProperties, extendableProperties);
   }
 });
diff --git a/server/static/js/property-editor.js b/server/static/js/property-editor.js
@@ -5,7 +5,7 @@ class EditorGenerator {
         this.formContainer = formContainer;
     }
 
-    generateEditor(ignoreFields = []) {
+    generateEditor(ignoreFields = [], extendableProperties = []) {
         this.formContainer.empty();
 
         for (const [key, property] of Object.entries(this.schema)) {
@@ -82,14 +82,85 @@ class EditorGenerator {
                     const subObject = this.object[key] || {};
                     const subSchema = property.properties || {};
 
-                    const subEditor = new EditorGenerator(subObject, subSchema, '');
-                    subEditor.formContainer = subContainer; // Set the container manually
-                    subEditor.generateEditor();
+                    if (extendableProperties.includes(key)) {
+                        const extendableContainer = $('<div>').addClass('property-editor-extendable');
+                        const addButton = $('<button>')
+                            .text('Add Entry')
+                            .on('click', () => {
+                                const newKey = prompt('Enter key for the new entry:');
+                                if (!newKey) return;
 
-                    this.object[key] = subObject;
+                                if (property.additionalProperties?.type === 'object') {
+                                    subObject[newKey] = {};
+                                } else {
+                                    subObject[newKey] = '';
+                                }
+                                renderExtendableEntries();
+                            });
 
-                    input = $('<div>')
-                        .append(toggleButton, label, subContainer);
+                        const renderExtendableEntries = () => {
+                            extendableContainer.empty();
+
+                            for (const [entryKey, entryValue] of Object.entries(subObject)) {
+                                const entryContainer = $('<div>').addClass('extendable-entry');
+
+                                // Key input
+                                const keyInput = $('<input type="text">')
+                                    .addClass('property-editor-input')
+                                    .val(entryKey)
+                                    .on('change', () => {
+                                        const newKey = keyInput.val();
+                                        if (newKey !== entryKey) {
+                                            delete subObject[entryKey];
+                                            subObject[newKey] = entryValue;
+                                        }
+                                        renderExtendableEntries();
+                                    });
+
+                                // Value editor
+                                let valueEditor;
+                                if (property.additionalProperties?.type === 'object') {
+                                    const entrySubEditor = new EditorGenerator(
+                                        entryValue,
+                                        property.additionalProperties.properties || {},
+                                        $('<div>')
+                                    );
+                                    entrySubEditor.generateEditor();
+                                    valueEditor = entrySubEditor.formContainer;
+                                } else {
+                                    valueEditor = $('<input type="text">')
+                                        .addClass('property-editor-input')
+                                        .val(entryValue || '')
+                                        .on('change', () => {
+                                            subObject[entryKey] = valueEditor.val();
+                                        });
+                                }
+
+                                const deleteButton = $('<button>')
+                                    .text('x')
+                                    .on('click', () => {
+                                        delete subObject[entryKey];
+                                        renderExtendableEntries();
+                                    });
+
+                                entryContainer.append(keyInput, valueEditor, deleteButton);
+                                extendableContainer.append(entryContainer);
+                            }
+                        };
+
+                        renderExtendableEntries();
+                        input = $('<div>')
+                            .append(toggleButton, label, extendableContainer, addButton);
+
+                    } else {
+                        const subEditor = new EditorGenerator(subObject, subSchema, '');
+                        subEditor.formContainer = subContainer; // Set the container manually
+                        subEditor.generateEditor();
+                        this.object[key] = subObject;
+
+                        input = $('<div>')
+                            .append(toggleButton, label, subContainer);
+                    }
                     break;
                 }