WIP: Index UI

docs/source/user-guide/guide_data_dictionaries.rst

@@ -195,13 +195,38 @@ Creating a data dictionary via the UI
 1. Log in as a user with the *Data: Create new content* permission.
 2. From the DKAN menu, select Data Dictionary -> Create.
 3. Enter a human readable title for your data dictionary.
-4. In the **Dictionary Fields** section, click the "Add one" button.
-5. Fill the form to define your field. Reference the Table Schema section above if needed.
-6. Repeat steps 4 and 5 for each field you want in your data dictionary.
-7. Click the "Save" button.
-8. See a list of your data dictionaries at `/api/1/metastore/schemas/data-dictionary/items/`
-9. Edit your data dictionary by going to `/admin/dkan/data-dictionaries`.
-10. Click the "Edit" link in the right-hand column next to the data dictionary you want to edit.
+4. To define a "Data Dictionary field" start by clicking "Add field".
+
+  .. image:: images/fields/add-data-field.png
+    :alt: A portion of the data dictionary creation admin page with a focus on the "Add field" button.
+
+5. An "Add new field" editable form box will appear. Complete the required form fields here, reference the `Table Schema <#table-schema>`_ section above if needed.
+
+  .. image:: images/fields/add-data-field-editable-form-box.png
+    :alt: A portion of the data dictionary creation admin page with a focus on the "Add new field" section.
+
+6. Click "Save field" to save the field temporarily. Remember that the Data Dictionary and it's respective fields are not completely saved until the form is submitted in it's entirety by clicking "Save".
+7. Alternatively you can click "Cancel adding field" to stop creating the Data Dictionary field, at which point all the information you entered will be removed and the "Add new Field" box will close.
+8. Note that after saving, an informational table will appear listing the data dictionary fields you have created thus far and their names, titles, and details (data types, formats and descriptions).
+
+  .. image:: images/fields/edit-data-field-informational-table.png
+    :alt: A portion of the data dictionary creation admin page with a focus on the informational table that appears.
+
+9. You also have the ability to edit or modify the data dictionary fields you've created so far by clicking the gear icon on the right-hand side of this table.
+10.  Clicking the gear icon will open an editable form that will show the previously entered information for the respective data dictionary field. You can then modify this information and either: "Save field edit" (retain the modifications), "Cancel field edit" (close the editable form box without retaining any modifications) or "Remove field" (remove the respective Data Dictionary field entirely).
+
+  .. image:: images/fields/edit-data-field.png
+    :alt: A portion of the data dictionary creation admin page with a focus on the editable form that appears in order to modify the data dictionary field.
+
+11.  You can enter any additional data dictionary fields by repeating steps 4-6. 
+12.  Click the "Save" button.
+
+  .. image:: images/fields/data-field-save-data-dictionary.png
+    :alt: A portion of the data dictionary creation admin page with a focus on the save button at the bottom of the form.
+
+13.  See a list of your data dictionaries at `/api/1/metastore/schemas/data-dictionary/items/`.
+14.  Edit your data dictionary by going to `/admin/dkan/data-dictionaries`.
+15.  Click the "Edit" link in the right-hand column next to the data dictionary you want to edit.
 
 
 Adding indexes

docs/source/user-guide/guide_indexes.rst

@@ -63,14 +63,86 @@ In the example below we are defining two fields, and adding a standard index for
 GUI
 ---
 
-  1. Log in as an administrator.
-  2. From the DKAN menu, select Data Dictionary -> Create.
-  3. Enter a name for your data dictionary that will serve as its identifier.
-  4. Any column you want to index must be defined in the 'Dictionary Fields' section.
-  5. After defining the fields, move to the 'Dictionary Indexes' section.
-  6. Enter the column name into the 'Name' field.
-  7. Use the 'Add one' button to add more fields if desired.
-  8. Select the index type: standard or fulltext
-  9. Add a description to name the index if desired.
-  10. Click the “Save” button.
+As an alternative to creating Data Dictionary Indexes through the API, you may choose to use the graphical user interface (GUI).
+The GUI can be used to create both Data Dictionary Fields and Indexes. See below for how to create Indexes. For more information on how to add data dictionary fields please see :doc:`guide_data_dictionaries`.
+
+Prerequisites
+^^^^^^^^^^^^^
+1. Log in as an administrator.
+2. From the DKAN menu, select Data Dictionary -> Create.
+3. There are certain form elements that apply to all Data Dictionaries, they are as follows:
+
+  a. Identifier: This is a UUID and is autogenerated for each Data Dictionary.
+  b. Title: Enter a name for your data dictionary here.
+
+4. After completing the above two required fields, move to the Data Dictionary Fields section and complete it, referencing :doc:`guide_data_dictionaries` if needed. Please note that any column you want to index below must be defined in the ‘Data Dictionary Fields’ section (see step 2 in the ‘Index Fields’ section below for reference).
+5. After defining the fields, move to the ‘Indexes’ section.
+
+Indexes
+^^^^^^^
+1. Click "Add index".
+
+  .. image:: images/indexes/add-index.png
+    :alt: A portion of the data dictionary creation admin page with a focus on the "Add index" button.
+
+2. An editable "Index" form box will appear. Complete the required form fields here.
+
+  .. image:: images/indexes/add-index-editable-form-box.png
+    :alt: A portion of the data dictionary creation admin page with a focus on the editable form that appears after clicking the "Add index" button.
+
+3. After defining the index, move to the ‘Index Fields’ section. Please note that an index requires at least one index field and that index field must be defined in the ‘Data Dictionary Fields’ section.
+
+Index Fields
+^^^^^^^^^^^^
+1. To add an index field, click "Add field to index" under the ‘Fields’ section within the respective ‘Index’ section.
+2. An editable "Add new field" form box will appear. Complete the required form fields here:
+
+  .. image:: images/indexes/add-index-fields-editable-form-box.png
+    :alt: A portion of the data dictionary creation admin page with a focus on the editable form that appears after clicking the "Add field to index" button.
+
+ a. Name: Enter a name, this must be a key from the dictionary fields object as created previously (see step 4 in the ‘Prerequisites’ section above for reference).
+ b. Length: The number of characters of the column you want to index. Indexing only a prefix of column values in this way can make the index file much smaller.
+
+3. Click "Save field to index" to save the field temporarily. Remember that the Data Dictionary and it's respective fields and indexes are not completely saved until the form is submitted by clicking "Save" at the bottom of the screen.
+4. Alternatively you can click "Cancel adding field to index" to stop creating the index field, at which point all the information you entered will be removed and the editable "Add new field" form box will close.
+5. Note that after saving an index field, an informational table will appear listing the index fields you have created thus far and their names and length.
+
+  .. image:: images/indexes/add-index-fields-informational-table.png
+    :alt: A portion of the data dictionary creation admin page with a focus on informational table that appears after saving an index field.
+
+ a. You also have the ability to edit or modify the fields you've created so far by clicking the gear icon on the right-hand side of this table.
+ b. Clicking the gear icon will open an editable form that will show the previously entered information for the respective index field. You can then modify this information and either: "Save index field edit" (retain the modifications), "Cancel index field edit" (close the editable form box without retaining any modifications) or "Remove field from index" (remove the respective index field entirely).
+
+    .. image:: images/indexes/edit-index-fields.png
+      :alt: A portion of the data dictionary creation admin page with a focus on editable form that appears after you click the gear icon to edit a specific index field.
+
+6. You can enter additional index fields by clicking "Add field to index" (in this index section) and repeating steps 2-3 in this Index Fields section again.
+7. After defining the index fields, click "Save index" to save the index temporarily. Remember that the Data Dictionary and it's respective fields and indexes are not completely saved until the form is submitted by clicking "Save" at the bottom of the screen.
+
+  .. image:: images/indexes/edit-index-box.png
+    :alt: A portion of the data dictionary creation admin page with a focus on the indexes box, specifically meant to reference the "Save index" button.
+
+8. Note that after saving the index, an informational table will appear listing the indexes you have created thus far and their names, types, and fields (field name and field length).
+
+  .. image:: images/indexes/add-index-informational-table.png
+    :alt: A portion of the data dictionary creation admin page with a focus on informational table that appears after saving an index.
+
+ a. You also have the ability to edit or modify the indexes you've created so far by clicking the gear icon on the right-hand side of this table.
+ b. Clicking the gear icon will open an editable form that will show the previously entered information for the respective index. You can then modify this information and either: "Save index edit" (retain the modifications), "Cancel index edit" (close the editable form box without retaining any modifications) or "Remove index" (remove the respective index entirely).
+
+    .. image:: images/indexes/edit-index.png
+      :alt: A portion of the data dictionary creation admin page with a focus on the edit index box.
+
+   1. Note that once you have saved an index, it is not possible to edit the fields within the index at this time. If you must change an index field, the current work around is to delete the associated index entirely and re-create it and it's fields again.
+
+9. Finally, make sure you click "Save" and then "Yes" to "Are you sure you want to publish this item?" in order to submit the form in it's entirety, saving the data dictionary.
+
+  .. image:: images/indexes/indexes-save-data-dictionary.png
+    :alt: A portion of the data dictionary creation admin page with a focus on the save button at the bottom of the form.
+
+10. See a list of your data dictionaries at `/api/1/metastore/schemas/data-dictionary/items/`.
+11. Edit your data dictionary by going to `/admin/dkan/data-dictionaries`.
+12. Click the "Edit" link in the right-hand column next to the data dictionary you want to edit.
+
+
 

modules/data_dictionary_widget/css/dataDictionaryWidget.css

@@ -1,3 +1,8 @@
+.index-fields-form.error {
+  border-width: var(--input--error-border-size);
+  border-color: var(--input--error-border-color);
+}
+
 .table {
   display: table;
   width: auto;

modules/data_dictionary_widget/data_dictionary_widget.module

@@ -25,6 +25,22 @@ function data_dictionary_widget_theme($existing, $type, $theme, $path) {
       ],
       'template' => 'custom-table',
     ],
+    'custom_index_fields_table' => [
+      'variables' => [
+        'header' => [],
+        'rows' => [],
+        'attributes' => [],
+      ],
+      'template' => 'custom-index-fields-table',
+    ],
+    'custom_index_table' => [
+      'variables' => [
+        'header' => [],
+        'rows' => [],
+        'attributes' => [],
+      ],
+      'template' => 'custom-index-table',
+    ],
   ];
 }
 
@@ -86,7 +102,7 @@ function data_dictionary_widget_form_alter(&$form, &$form_state, $form_id) {
       }
     }
 
-    // If we are saving a data dictionary alter the submit.
+    // If we are saving a data dictionary alter the submit action.
     foreach (array_keys($form['actions']) as $action) {
       if ( isset($form['actions'][$action]['#type'])
         && $form['actions'][$action]['#type'] === 'submit'
@@ -96,21 +112,50 @@ function data_dictionary_widget_form_alter(&$form, &$form_state, $form_id) {
     }
 
     $form['#validate'][] = 'data_dictionary_widget_validate_unique_identifier';
-    $current_fields = !empty($form["field_json_metadata"]["widget"][0]["dictionary_fields"]["current_fields"]) ? $form["field_json_metadata"]["widget"][0]["dictionary_fields"]["current_fields"] : NULL;
+    // Check for existing dictionary and index fields.
+    $current_dictionary_fields = !empty($form["field_json_metadata"]["widget"][0]["dictionary_fields"]["current_dictionary_fields"]) ? $form["field_json_metadata"]["widget"][0]["dictionary_fields"]["current_dictionary_fields"] : NULL;
+    $current_index_fields = !empty($form["field_json_metadata"]["widget"][0]["indexes"]["current_index"]) ? $form["field_json_metadata"]["widget"][0]["indexes"]["current_index"] : NULL;
 
     // The form element render array prefers child keys to be stored as arrays with a #value property.
-    if ($current_fields) {
-      foreach ($current_fields as $key => $value) {
-          $keys = array_keys($value);
-          $formatted_current_fields[$key] = [];
-
-          foreach ($keys as $attr) {
-            $formatted_current_fields[$key][$attr] = [
-                  '#value' => $value[$attr]
-              ];
+    if ($current_dictionary_fields) {
+      // Create an array to copy the formatted array structure.
+      $formatted_current_fields = [];
+
+      foreach ($current_dictionary_fields as $key => $value) {
+        $keys = array_keys($value);
+        $formatted_current_fields[$key] = [];
+
+        foreach ($keys as $attr) {
+          $formatted_current_fields[$key][$attr] = [
+            '#value' => $value[$attr]
+          ];
+        }
+      }
+
+      $form["field_json_metadata"]["widget"][0]["dictionary_fields"]["current_dictionary_fields"] = $formatted_current_fields;
+    }
+
+    // The form element render array prefers child keys to be stored as arrays with a #value property.
+    if ($current_index_fields) {
+      foreach ($current_index_fields as &$item) {
+        foreach ($item as $key => &$value) {
+          if ($key === 'fields' && is_array($value)) {
+            foreach ($value as &$field) {
+              foreach ($field as $fieldKey => &$fieldValue) {
+                // Add '#value' key to each field
+                $fieldValue = ['#value' => $fieldValue];
+              }
+            }
           }
+          else {
+            // For non-'fields' keys, add '#value' key to the value
+            $value = ['#value' => $value];
+          }
+        }
       }
-      $form["field_json_metadata"]["widget"][0]["dictionary_fields"]["current_fields"] = $formatted_current_fields;
+
+      // Note the current_index_fields was modified in memory instead of copying the array.
+      $form["field_json_metadata"]["widget"][0]["indexes"]["current_index"] = $current_index_fields;
     }
 
     // Set the default value of the identifier field to a randomly generated uuid.

modules/data_dictionary_widget/src/Fields/FieldButtons.php

@@ -14,13 +14,14 @@ public static function addButton() {
     return [
       '#type' => 'submit',
       '#value' => 'Add field',
+      '#name' => 'add_dictionary_field',
       '#access' => TRUE,
       '#op' => 'add_new_field',
       '#submit' => [
-      [
-        '\Drupal\data_dictionary_widget\Fields\FieldCallbacks',
-        'addSubformCallback',
-      ],
+        [
+          '\Drupal\data_dictionary_widget\Fields\FieldCallbacks',
+          'addSubformCallback',
+        ],
       ],
       '#ajax' => [
         'callback' => '\Drupal\data_dictionary_widget\Fields\FieldCallbacks::subformAjax',
@@ -68,7 +69,7 @@ public static function editButtons($key) {
   public static function submitButton($location, $key) {
     $callbackClass = $location == 'edit' ? 'editSubformCallback' : 'addSubformCallback';
     $op = is_int($key) ? 'update_' . $key : 'add';
-    $value = $location == 'edit' ? 'Save' : 'Add';
+    $value = $location == 'edit' ? 'Save field edit' : 'Save field';
     $edit_button = [
       '#type' => 'submit',
       '#value' => $value,
@@ -109,9 +110,11 @@ protected static function assembleValidation() {
   public static function cancelButton($location, $key) {
     $callbackClass = $location == 'edit' ? 'editSubformCallback' : 'addSubformCallback';
     $op = $location == 'edit' && is_int($key) ? 'abort_' . $key : 'cancel';
+
     $cancel_button = [
       '#type' => 'submit',
-      '#value' => t('Cancel'),
+      '#value' => t('Cancel adding field'),
+      '#name' => 'cancel_dictionary_field',
       '#op' => $op,
       '#submit' => [
             [
@@ -129,6 +132,7 @@ public static function cancelButton($location, $key) {
 
     if ($location == 'edit') {
       $cancel_button['#name'] = 'cancel_update_' . $key;
+      $cancel_button['#value'] = t('Cancel field edit');
     }
     return $cancel_button;
   }
@@ -140,7 +144,7 @@ public static function deleteButton($key) {
     return [
       '#type' => 'submit',
       '#name' => 'delete_' . $key,
-      '#value' => t('Delete'),
+      '#value' => t('Remove field'),
       '#op' => 'delete_' . $key,
       '#submit' => [
             [