enviPy-bayer/templates/modals/objects/edit_pathway_node_modal.html

{% load static %}
<!-- Add Additional Information -->
<dialog
  id="edit_pathway_node_modal"
  class="modal"
  x-data="{
    isSubmitting: false,
    selectedType: '',
    selectedScenario: '',
    selectedNode: '',
    schemas: {},
    loadingSchemas: false,
    error: null,
    formData: null,  // Store reference to form data
    formRenderKey: 0,  // Counter to force form re-render
    allowedTypes: ['halflife', 'halflifews', 'proposedintermediate', 'transformationproductimportance', 'confidence'],
    scenarios: [],
    scenariosLoaded: false,

    // Get sorted unique schema names for dropdown, excluding already-added types
    get sortedSchemaNames() {
      const names = Object.keys(this.schemas);
      // Remove duplicates, exclude existing types, and sort alphabetically by display title
      const unique = [...new Set(names)];
      const available = unique.filter(name =>
        this.allowedTypes.includes(name)
      );
      return available.sort((a, b) => {
        const titleA = (this.schemas[a]?.schema?.['x-title'] || a).toLowerCase();
        const titleB = (this.schemas[b]?.schema?.['x-title'] || b).toLowerCase();
        return titleA.localeCompare(titleB);
      });
    },

    async init() {
      // Watch for selectedType changes
      this.$watch('selectedType', (value) => {
        // Reset formData when type changes and increment key to force re-render
        this.formData = null;
        this.formRenderKey++;
        // Clear previous errors
        this.error = null;
        Alpine.store('validationErrors').clearErrors(); // No context - clears all
      });

      // Load schemas and existing items
      try {
        this.loadingSchemas = true;
        const [schemasRes, scenarioRes] = await Promise.all([
          fetch('/api/v1/information/schema/'),
          fetch('{% url "package scenario list" meta.current_package.uuid %}', { headers: {'Accept': 'application/json' }}),
        ]);

        if (!schemasRes.ok) throw new Error('Failed to load schemas');
        if (!scenarioRes.ok) throw new Error('Failed to load scenarios');

        this.schemas = await schemasRes.json();
        this.scenarios = await scenarioRes.json();
        // Get unique existing types (normalize to lowercase)
      } catch (err) {
        this.error = err.message;
      } finally {
        this.loadingSchemas = false;
      }
    },

    reset() {
      this.isSubmitting = false;
      this.selectedType = '';
      this.error = null;
      this.formData = null;
      this.selectedScenario = '';
      Alpine.store('validationErrors').clearErrors(); // No context - clears all
    },

    setFormData(data) {
      // Fired from schemaRenderer
      this.formData = data;
    },

    async submit() {
      if (!this.selectedType) return;
      const payload = window.AdditionalInformationApi.sanitizePayload(this.formData || {});

      // Validate that form has data
      if (!payload || Object.keys(payload).length === 0) {
        // proposedintermediate is parameterless
        if (!this.selectedType === 'proposedintermediate') {
          this.error = 'Please fill in at least one field';
          return;
        }
      }

      this.isSubmitting = true;
      this.error = null;

      try {
      // TODO
        await window.AdditionalInformationApi.createItemOnNonScenarioObject(
          this.selectedType,
          payload,
          this.selectedNode,
          this.selectedScenario
        );

        // Close modal and reload page to show new item
        document.getElementById('edit_pathway_node_modal').close();
        window.location.reload();
      } catch (err) {
        if (err.isValidationError && err.fieldErrors) {
          // No context for add modal - simple flat errors
          Alpine.store('validationErrors').setErrors(err.fieldErrors);
          this.error = err.message || 'Please correct the errors in the form';
        } else {
          this.error = err.message || 'An error occurred. Please try again.';
        }
      } finally {
        this.isSubmitting = false;
      }
    }
  }"
  @close="reset()"
  @form-data-ready="setFormData($event.detail)"
  @modal-opened.window="
   const el = d3.select('circle.highlighted').node();
   if (el !== null) {
    const selectElement = document.getElementById('edit_pathway_nodes_node');
    for (let option of selectElement.options) {
        if (option.value === el.__data__.url) {
            option.selected = true;
            break;
        }
    }
    selectElement.dispatchEvent(new Event('change'));
   }
  "
>
  <div class="modal-box max-w-2xl">
    <!-- Header -->
    <h3 class="text-lg font-bold">Edit Compound</h3>

    <!-- Close button (X) -->
    <form method="dialog">
      <button
        class="btn btn-sm btn-circle btn-ghost absolute top-2 right-2"
        :disabled="isSubmitting"
      >
        ✕
      </button>
    </form>

    <!-- Body -->
    <div class="py-4">
      <!-- Loading state -->
      <template x-if="loadingSchemas">
        <div class="flex items-center justify-center p-4">
          <span class="loading loading-spinner loading-md"></span>
        </div>
      </template>

      <!-- Error state -->
      <template x-if="error">
        <div class="alert alert-error mb-4">
          <span x-text="error"></span>
        </div>
      </template>
      <div class="form-control">
        <p>
          If no Scenario is selected a new Scenario will be created and attached
          to this Pathway
        </p>
        <label class="label" for="edit_pathway_nodes_node">
          <span class="label-text">Select Node</span>
        </label>
        <select
          id="edit_pathway_nodes_node"
          name="node"
          class="select select-bordered w-full"
          x-model="selectedNode"
        >
          {% for n in pathway.nodes %}
            <option value="{{ n.url }}">
              {{ n.default_node_label.name|safe }}
            </option>
          {% endfor %}
        </select>

        <label class="label" for="scenario-select">
          <span class="label-text">Scenarios</span>
        </label>
        <select
          id="scenario-select"
          name="selected-scenarios"
          class="select select-bordered w-full"
          x-model="selectedScenario"
        >
          <option value="" selected disabled>Select Scenario</option>
          <template x-for="scenario in scenarios" :key="scenario.url">
            <option :value="scenario.url" x-text="scenario.name"></option>
          </template>
        </select>
      </div>

      <!-- Schema selection -->
      <template x-if="!loadingSchemas">
        <div>
          <div class="form-control mb-4">
            <label class="label" for="select-additional-information-type">
              <span class="label-text">Select the type to add</span>
            </label>
            <select
              id="select-additional-information-type"
              class="select select-bordered w-full"
              x-model="selectedType"
            >
              <option value="" selected disabled>Select the type to add</option>
              <template x-for="name in sortedSchemaNames" :key="name">
                <option
                  :value="name"
                  x-text="(schemas[name].schema && (schemas[name].schema['x-title'] || schemas[name].schema.title)) || name"
                ></option>
              </template>
            </select>
          </div>

          <!-- Form renderer for selected type -->
          <!-- Use unique key per type to force re-render -->
          <template x-for="renderKey in [formRenderKey]" :key="renderKey">
            <div x-show="selectedType && schemas[selectedType]">
              <div
                x-data="schemaRenderer({
                  rjsf: schemas[selectedType],
                  mode: 'edit'
                  // No context - single form, backward compatible
                })"
                x-init="await init(); $dispatch('form-data-ready', data)"
              >
                {% include "components/schema_form.html" %}
              </div>
            </div>
          </template>
        </div>
      </template>
    </div>

    <!-- Footer -->
    <div class="modal-action">
      <button
        type="button"
        class="btn"
        onclick="this.closest('dialog').close()"
        :disabled="isSubmitting"
      >
        Close
      </button>
      <button
        type="button"
        class="btn btn-primary"
        @click="submit()"
        :disabled="isSubmitting || loadingSchemas || !selectedType || !selectedNode"
      >
        <span x-show="!isSubmitting">Add</span>
        <span
          x-show="isSubmitting"
          class="loading loading-spinner loading-sm"
        ></span>
        <span x-show="isSubmitting">Adding...</span>
      </button>
    </div>
  </div>

  <!-- Backdrop -->
  <form method="dialog" class="modal-backdrop">
    <button :disabled="isSubmitting">close</button>
  </form>
</dialog>