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

{% load static %}
<!-- Copy Object -->
<dialog
  id="generic_copy_object_modal"
  class="modal"
  x-data="{
    isSubmitting: false,
    errorMessage: '',
    targetPackage: '',

    reset() {
      this.isSubmitting = false;
      this.errorMessage = '';
      this.targetPackage = '';
    },

    async submit() {
      if (!this.targetPackage) return;

      this.isSubmitting = true;
      this.errorMessage = '';

      try {
        const response = await fetch(this.targetPackage, {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
            'X-CSRFToken': document.querySelector('[name=csrfmiddlewaretoken]').value
          },
          body: new URLSearchParams({
            hidden: 'copy',
            object_to_copy: '{{ current_object.url }}'
          })
        });

        const data = await response.json();

        if (response.ok) {
          window.location.href = data.success;
        } else {
          if (data.error && data.error.indexOf('to the same package') > -1) {
            this.errorMessage = 'The target Package is the same as the source Package. Please select another target!';
          } else {
            this.errorMessage = data.error || 'An error occurred';
          }
        }
      } catch (error) {
        this.errorMessage = 'An error occurred while copying';
      } finally {
        this.isSubmitting = false;
      }
    }
  }"
  @close="reset()"
>
  <div class="modal-box">
    <!-- Header -->
    <h3 class="text-lg font-bold">Copy {{ object_type|capfirst }}</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">
      <form
        id="generic-copy-object-modal-form"
        accept-charset="UTF-8"
        method="post"
      >
        {% csrf_token %}
        <div class="form-control">
          <label class="label" for="target-package">
            <span class="label-text">
              Select the Target Package you want to copy this {{ object_type }}
              into
            </span>
          </label>
          <select
            id="target-package"
            name="target-package"
            class="select select-bordered w-full"
            x-model="targetPackage"
            required
          >
            <option value="" disabled selected>Select Target Package</option>
            {% for p in meta.writeable_packages %}
              <option value="{{ p.url }}">{{ p.name|safe }}</option>
            {% endfor %}
          </select>
        </div>
        <input type="hidden" name="hidden" value="copy" />
      </form>

      <!-- Error Message -->
      <div
        x-show="errorMessage"
        x-cloak
        class="alert alert-error mt-4"
        role="alert"
      >
        <span x-text="errorMessage"></span>
      </div>
    </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 || !targetPackage"
      >
        <span x-show="!isSubmitting">Copy</span>
        <span
          x-show="isSubmitting"
          class="loading loading-spinner loading-sm"
        ></span>
        <span x-show="isSubmitting">Copying...</span>
      </button>
    </div>
  </div>

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