View Code - 20260721

page_permissions_user_manage.js | 20260721_154033.php Initial Bulk Import

// find user id: prefer hidden input[name="user_id"] then data-user-id on container
  function getUserId() {
    const byInput = document.querySelector('input[name="user_id"]');
    if (byInput && byInput.value) return byInput.value;
    if (container.dataset && container.dataset.userId) return container.dataset.userId;
    return null;
  }

// find CSRF token input if present
  function getCsrf() {
    const t = document.querySelector('input[name="csrf_token"]');
    return t ? t.value : null;
  }

// helper: slugify label -> slug_style (lower_with_underscores)
  function slugify(text) {
    return text.trim()
               .toLowerCase()
               .replace(/[^\w\s-]/g, '')   // remove non-word chars
               .replace(/\s+/g, '_')       // spaces -> _
               .replace(/_+/g, '_');       // collapse multiple underscores
  }

// Collect all sections
  const sections = Array.from(container.querySelectorAll('.section'));
  // store initial states for reset
  const initialState = [];

sections.forEach((sec, sIdx) => {
    // mark initial state
    const permRows = Array.from(sec.querySelectorAll('.perm-row'));
    initialState[sIdx] = permRows.map(r => !!r.querySelector('input[type="checkbox"]').checked);

// wire section All checkbox: pick the checkbox inside .section-header
    const header = sec.querySelector('.section-header');
    if (!header) return;
    const allCheckbox = header.querySelector('input[type="checkbox"]');
    if (!allCheckbox) return;

// when All toggled, toggle children
    allCheckbox.addEventListener('change', () => {
      permRows.forEach(row => {
        const cb = row.querySelector('input[type="checkbox"]');
        if (cb) cb.checked = allCheckbox.checked;
      });
    });

// when any child checkbox changes, update All checkbox accordingly
    permRows.forEach(row => {
      const cb = row.querySelector('input[type="checkbox"]');
      if (!cb) return;
      cb.addEventListener('change', () => {
        const allChecked = permRows.every(r => {
          const c = r.querySelector('input[type="checkbox"]');
          return c && c.checked;
        });
        const someChecked = permRows.some(r => {
          const c = r.querySelector('input[type="checkbox"]');
          return c && c.checked;
        });
        // set indeterminate when some checked but not all
        allCheckbox.indeterminate = !allChecked && someChecked;
        allCheckbox.checked = allChecked;
      });
    });

// set initial header checkbox state
    const currentlyAllChecked = permRows.every(r => {
      const c = r.querySelector('input[type="checkbox"]');
      return c && c.checked;
    });
    const currentlyAnyChecked = permRows.some(r => {
      const c = r.querySelector('input[type="checkbox"]');
      return c && c.checked;
    });
    allCheckbox.checked = currentlyAllChecked;
    allCheckbox.indeterminate = !currentlyAllChecked && currentlyAnyChecked;
  });

// Reset button
  const resetBtn = container.querySelector('button.reset');
  if (resetBtn) {
    resetBtn.addEventListener('click', (ev) => {
      ev.preventDefault();
      sections.forEach((sec, sIdx) => {
        const permRows = Array.from(sec.querySelectorAll('.perm-row'));
        permRows.forEach((row, i) => {
          const cb = row.querySelector('input[type="checkbox"]');
          if (cb) cb.checked = !!initialState[sIdx][i];
        });
        // update header checkbox
        const header = sec.querySelector('.section-header');
        const allCheckbox = header && header.querySelector('input[type="checkbox"]');
        if (allCheckbox) {
          const allChecked = permRows.every(r => r.querySelector('input[type="checkbox"]').checked);
          const anyChecked = permRows.some(r => r.querySelector('input[type="checkbox"]').checked);
          allCheckbox.checked = allChecked;
          allCheckbox.indeterminate = !allChecked && anyChecked;
        }
      });
    });
  }

// Update button -> collect checked slugs and POST to server
  const updateBtn = container.querySelector('button.update');
  if (updateBtn) {
    updateBtn.addEventListener('click', async (ev) => {
      ev.preventDefault();

const userId = getUserId();
      if (!userId) {
        alert('User ID not found. Add <input name="user_id" value="31"> or set data-user-id on .container');
        return;
      }

// collect checked items: use data-slug attr if present, else slugify label text
      const checkedSlugs = [];
      sections.forEach(sec => {
        const permRows = Array.from(sec.querySelectorAll('.perm-row'));
        permRows.forEach(row => {
          const cb = row.querySelector('input[type="checkbox"]');
          if (!cb) return;
          if (!cb.checked) return;
          // look for data-slug on the row or on the checkbox
          const ds = row.dataset.slug || (cb.dataset ? cb.dataset.slug : null);
          if (ds) {
            checkedSlugs.push(ds);
            return;
          }
          // fallback: use label text (span) to compute slug
          const label = row.querySelector('span');
          const text = label ? label.textContent || label.innerText : '';
          if (text) checkedSlugs.push(slugify(text));
        });
      });

// Prepare payload
      const payload = new URLSearchParams();
      payload.append('user_id', String(userId));
      // server expects items[] array; append each with items[]
      checkedSlugs.forEach(s => payload.append('items[]', s));

// include csrf if present
      const csrf = getCsrf();
      if (csrf) payload.append('csrf_token', csrf);

// visual feedback
      updateBtn.disabled = true;
      const origText = updateBtn.innerText;
      updateBtn.innerText = 'Updating...';

try {
        const resp = await fetch('/erp/page_permissions_user_manage.php', {
          method: 'POST',
          headers: {
            'Content-Type': 'application/x-www-form-urlencoded',
          },
          body: payload.toString(),
          credentials: 'same-origin'
        });

if (!resp.ok) {
          const t = await resp.text();
          alert('Server error: ' + resp.status + '\n' + t);
        } else {
          // try parse text response for success message, but still refresh to show new state
          const txt = await resp.text();
          // simple success action: reload the page (so server side shows updated permissions)
          alert('Permissions updated.');
          window.location.reload();
        }
      } catch (err) {
        alert('Network error: ' + err.message);
      } finally {
        updateBtn.disabled = false;
        updateBtn.innerText = origText;
      }
    });
  }

// Accessibility: allow Enter to trigger update when focused inside container
  container.addEventListener('keydown', function (e) {
    if (e.key === 'Enter' && (e.ctrlKey || e.metaKey)) {
      const evt = new MouseEvent('click');
      if (updateBtn) updateBtn.dispatchEvent(evt);
    }
  });
});
</script>