breadcrumb-the-shire/modules/helpdesk/web/js/pages/helpdesk-domains-index.js

import { initStandardListPage } from '/js/core/app-grid-factory.js';
import { readPageConfig } from '/js/core/app-page-config.js';
import { warnOnce } from '/js/core/app-dom.js';
import { escapeHtml, getAppBase, withCurrentListReturn } from '/js/pages/app-list-utils.js';

const config = readPageConfig('helpdesk-domains');
if (config) {
  const gridjs = window.gridjs;
  if (!gridjs) {
    warnOnce('UI_INIT_FAIL', 'Helpdesk domains grid init failed: Grid.js missing', { module: 'helpdesk-domains', component: 'grid' });
  } else {
    const appBase = getAppBase();
    const labels = config.labels || {};

    const domainBaseUrl = config.domainBaseUrl || '';
    const domainUrlIndex = 7;

    const gridOptions = {
      gridjs,
      container: '#helpdesk-domains-grid',
      dataUrl: config.dataUrl || 'helpdesk/domains-data',
      appBase,
      columns: [
        {
          name: labels.no || 'No.',
          sort: true,
          formatter: (cell) => {
            const no = escapeHtml(cell?.no || '');
            const detailUrl = String(cell?.url || '').trim();
            if (detailUrl === '') {
              return gridjs.html(no);
            }
            const href = escapeHtml(detailUrl);
            return gridjs.html(`<a href="${href}">${no}</a>`);
          },
        },
        {
          name: labels.customerName || 'Customer Name',
          sort: true,
          formatter: (cell) => {
            const name = escapeHtml(cell?.name || '');
            const detailUrl = String(cell?.url || '').trim();
            if (detailUrl === '') {
              return gridjs.html(name);
            }
            const href = escapeHtml(withCurrentListReturn(detailUrl));
            return gridjs.html(`<a href="${href}">${name}</a>`);
          },
        },
        { name: labels.url || 'URL', sort: true },
        { name: labels.contractType || 'Contract Type', sort: true },
        {
          name: labels.state || 'State',
          sort: true,
          formatter: (cell) => {
            const state = escapeHtml(cell?.state || '');
            const variant = cell?.variant || 'neutral';
            return gridjs.html(`<span class="badge" data-variant="${escapeHtml(variant)}">${state}</span>`);
          },
        },
        { name: labels.administration || 'Administration', sort: true },
        { name: 'debitor_url', hidden: true },
        { name: 'domain_detail_url', hidden: true },
      ],
      sortColumns: ['No', 'Customer_Name', 'URL', 'contract_type', 'State', 'Administration', null, null],
      paginationLimit: 10,
      language: config.gridLang || {},
      mapData: (data) => (data.data || []).map((row) => {
        const domainDetailUrl = domainBaseUrl && row.No
          ? domainBaseUrl + encodeURIComponent(row.No)
          : '';
        return [
          { no: row.No || '', url: domainDetailUrl },
          { name: row.Customer_Name || '', url: row.debitor_url || '' },
          row.URL || '',
          row.contract_type || '',
          { state: row.State || '', variant: row.state_variant || 'neutral' },
          row.Administration || '',
          row.debitor_url || '',
          domainDetailUrl,
        ];
      }),
      search: config.gridSearch || null,
      filterSchema: config.filterSchema || [],
      urlSync: true,
      rowInteraction: { linkColumn: 0 },
      rowDblClick: {
        getUrl: (rowData) => rowData?.cells?.[domainUrlIndex]?.data || '',
      },
    };

    const { gridConfig } = initStandardListPage({
      grid: gridOptions,
      filters: {
        mode: 'drawer',
        chipMeta: config.filterChipMeta || {},
        watchInputs: ['#helpdesk-domains-search-input'],
      },
    });

    if (!gridConfig || !gridConfig.grid) {
      warnOnce('UI_INIT_FAIL', 'Helpdesk domains grid init failed', { module: 'helpdesk-domains', component: 'grid' });
    }
  }
}