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

{% load static %}
<!-- Edit Package Permissions -->
<dialog
  id="edit_package_permissions_modal"
  class="modal"
  x-data="{
    updatePermissions(checkbox) {
      const parts = checkbox.id.split('_');
      const perm = parts[0];
      const id = parts[1];

      const readBox = document.getElementById('read_' + id);
      const writeBox = document.getElementById('write_' + id);
      const ownerBox = document.getElementById('owner_' + id);

      if (perm === 'read' && !readBox.checked) {
        writeBox.checked = false;
        ownerBox.checked = false;
      }

      if (perm === 'write') {
        if (writeBox.checked) {
          readBox.checked = true;
        } else {
          ownerBox.checked = false;
        }
      }

      if (perm === 'owner' && ownerBox.checked) {
        readBox.checked = true;
        writeBox.checked = true;
      }
    }
  }"
>
  <div class="modal-box max-w-2xl">
    <!-- Header -->
    <h3 class="text-lg font-bold">Grant or Revoke Permissions</h3>

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

    <!-- Body -->
    <div class="py-4">
      <p class="mb-4">
        Modify permissions for this package. Note that if you give
        <code class="badge badge-ghost">write</code> permissions to a user or
        group, <code class="badge badge-ghost">read</code> permissions will be
        granted automatically.
        <br />
        To allow users to perform destructive actions, such as deleting the
        package, <code class="badge badge-ghost">owner</code> permissions must
        be granted.
      </p>

      <!-- Add New Permission -->
      <form
        id="modal-form-permissions"
        accept-charset="UTF-8"
        action=""
        method="post"
        class="mb-4"
      >
        {% csrf_token %}
        <div class="grid grid-cols-12 gap-2 items-end">
          <div class="col-span-5">
            <label class="label">
              <span class="label-text">User or Group</span>
            </label>
            <select
              id="select_grantee"
              name="grantee"
              class="select select-bordered w-full select-sm"
              required
            >
              <optgroup label="Users">
                {% for u in users %}
                  <option value="{{ u.url }}">{{ u.username }}</option>
                {% endfor %}
              </optgroup>
              <optgroup label="Groups">
                {% for g in groups %}
                  <option value="{{ g.url }}">{{ g.name|safe }}</option>
                {% endfor %}
              </optgroup>
            </select>
          </div>
          <div class="col-span-2 text-center">
            <label class="label justify-center">
              <span class="label-text">Read</span>
            </label>
            <input
              type="checkbox"
              name="read"
              id="read_new"
              class="checkbox"
              @click="updatePermissions($el)"
            />
          </div>
          <div class="col-span-2 text-center">
            <label class="label justify-center">
              <span class="label-text">Write</span>
            </label>
            <input
              type="checkbox"
              name="write"
              id="write_new"
              class="checkbox"
              @click="updatePermissions($el)"
            />
          </div>
          <div class="col-span-2 text-center">
            <label class="label justify-center">
              <span class="label-text">Owner</span>
            </label>
            <input
              type="checkbox"
              name="owner"
              id="owner_new"
              class="checkbox"
              @click="updatePermissions($el)"
            />
          </div>
          <div class="col-span-1">
            <button type="submit" class="btn btn-primary btn-sm">+</button>
          </div>
        </div>
      </form>

      <!-- User Permissions -->
      {% if user_permissions %}
        <div class="divider">User Permissions</div>
        <div class="space-y-2">
          {% for up in user_permissions %}
            <form
              id="modal-form-permissions_{{ up.user.uuid }}"
              accept-charset="UTF-8"
              action=""
              method="post"
            >
              {% csrf_token %}
              <div class="grid grid-cols-12 gap-2 items-center">
                <div class="col-span-5 truncate">
                  {{ up.user.username }}
                  <input
                    type="hidden"
                    name="grantee"
                    value="{{ up.user.url }}"
                  />
                </div>
                <div class="col-span-2 text-center">
                  <input
                    type="checkbox"
                    name="read"
                    id="read_{{ up.user.uuid }}"
                    class="checkbox"
                    {% if up.has_read %}checked{% endif %}
                    @click="updatePermissions($el)"
                  />
                </div>
                <div class="col-span-2 text-center">
                  <input
                    type="checkbox"
                    name="write"
                    id="write_{{ up.user.uuid }}"
                    class="checkbox"
                    {% if up.has_write %}checked{% endif %}
                    @click="updatePermissions($el)"
                  />
                </div>
                <div class="col-span-2 text-center">
                  <input
                    type="checkbox"
                    name="owner"
                    id="owner_{{ up.user.uuid }}"
                    class="checkbox"
                    {% if up.has_all %}checked{% endif %}
                    @click="updatePermissions($el)"
                  />
                </div>
                <div class="col-span-1">
                  <button type="submit" class="btn btn-sm btn-ghost">✓</button>
                </div>
              </div>
            </form>
          {% endfor %}
        </div>
      {% endif %}

      <!-- Group Permissions -->
      {% if group_permissions %}
        <div class="divider">Group Permissions</div>
        <div class="space-y-2">
          {% for gp in group_permissions %}
            <form
              id="modal-form-permissions_{{ gp.group.uuid }}"
              accept-charset="UTF-8"
              action=""
              method="post"
            >
              {% csrf_token %}
              <div class="grid grid-cols-12 gap-2 items-center">
                <div class="col-span-5 truncate">
                  {{ gp.group.name|safe }}
                  <input
                    type="hidden"
                    name="grantee"
                    value="{{ gp.group.url }}"
                  />
                </div>
                <div class="col-span-2 text-center">
                  <input
                    type="checkbox"
                    name="read"
                    id="read_{{ gp.group.uuid }}"
                    class="checkbox"
                    {% if gp.has_read %}checked{% endif %}
                    @click="updatePermissions($el)"
                  />
                </div>
                <div class="col-span-2 text-center">
                  <input
                    type="checkbox"
                    name="write"
                    id="write_{{ gp.group.uuid }}"
                    class="checkbox"
                    {% if gp.has_write %}checked{% endif %}
                    @click="updatePermissions($el)"
                  />
                </div>
                <div class="col-span-2 text-center">
                  <input
                    type="checkbox"
                    name="owner"
                    id="owner_{{ gp.group.uuid }}"
                    class="checkbox"
                    {% if gp.has_all %}checked{% endif %}
                    @click="updatePermissions($el)"
                  />
                </div>
                <div class="col-span-1">
                  <button type="submit" class="btn btn-sm btn-ghost">✓</button>
                </div>
              </div>
            </form>
          {% endfor %}
        </div>
      {% endif %}
    </div>

    <!-- Footer -->
    <div class="modal-action">
      <button
        type="button"
        class="btn"
        onclick="this.closest('dialog').close()"
      >
        Close
      </button>
    </div>
  </div>

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