1112 lines
49 KiB
JavaScript
1112 lines
49 KiB
JavaScript
document.addEventListener('DOMContentLoaded', () => {
|
|
const config = window.tvChannelApp || {};
|
|
const state = {
|
|
filters: { limit: 50, page: 1 },
|
|
advancedFilters: [],
|
|
sort: { field: 'upper_ch_ref', direction: 'ASC' },
|
|
selectedIds: new Set(),
|
|
currentRows: [],
|
|
currentDetail: null,
|
|
options: {},
|
|
lastListPayload: null,
|
|
auditFilters: { page: 1, limit: 20 },
|
|
analyticsLoaded: false,
|
|
auditLoaded: false,
|
|
historyLoaded: false,
|
|
currentHistoryId: null,
|
|
};
|
|
|
|
const elements = {
|
|
filtersForm: document.getElementById('filtersForm'),
|
|
resetFiltersBtn: document.getElementById('resetFiltersBtn'),
|
|
channelsTableBody: document.getElementById('channelsTableBody'),
|
|
resultCounter: document.getElementById('resultCounter'),
|
|
pageMeta: document.getElementById('pageMeta'),
|
|
prevPageBtn: document.getElementById('prevPageBtn'),
|
|
nextPageBtn: document.getElementById('nextPageBtn'),
|
|
topSearchForm: document.getElementById('topSearchForm'),
|
|
topSearchInput: document.getElementById('topSearchInput'),
|
|
clearSearchBtn: document.getElementById('clearSearchBtn'),
|
|
advancedFiltersBtn: document.getElementById('advancedFiltersBtn'),
|
|
advancedFilterCount: document.getElementById('advancedFilterCount'),
|
|
advancedFiltersContainer: document.getElementById('advancedFiltersContainer'),
|
|
addAdvancedFilterBtn: document.getElementById('addAdvancedFilterBtn'),
|
|
clearAdvancedFiltersBtn: document.getElementById('clearAdvancedFiltersBtn'),
|
|
applyAdvancedFiltersBtn: document.getElementById('applyAdvancedFiltersBtn'),
|
|
selectPageBtn: document.getElementById('selectPageBtn'),
|
|
selectAllPageCheckbox: document.getElementById('selectAllPageCheckbox'),
|
|
bulkEditBtn: document.getElementById('bulkEditBtn'),
|
|
selectionBar: document.getElementById('selectionBar'),
|
|
selectionCount: document.getElementById('selectionCount'),
|
|
selectionBulkBtn: document.getElementById('selectionBulkBtn'),
|
|
clearSelectionBtn: document.getElementById('clearSelectionBtn'),
|
|
activeFilterChips: document.getElementById('activeFilterChips'),
|
|
detailPanel: document.getElementById('detailPanel'),
|
|
detailForm: document.getElementById('detailForm'),
|
|
detailLoadingState: document.getElementById('detailLoadingState'),
|
|
detailChannelId: document.getElementById('detailChannelId'),
|
|
detailEditableSection: document.getElementById('detailEditableSection'),
|
|
editableFieldsContainer: document.getElementById('editableFieldsContainer'),
|
|
detailLastChangeNotice: document.getElementById('detailLastChangeNotice'),
|
|
lockedFieldsContainer: document.getElementById('lockedFieldsContainer'),
|
|
bulkEditForm: document.getElementById('bulkEditForm'),
|
|
bulkEditFieldsContainer: document.getElementById('bulkEditFieldsContainer'),
|
|
bulkSelectionSummary: document.getElementById('bulkSelectionSummary'),
|
|
analyticsOverview: document.getElementById('analyticsOverview'),
|
|
analyticsBreakdowns: document.getElementById('analyticsBreakdowns'),
|
|
historyLead: document.getElementById('historyLead'),
|
|
historySummary: document.getElementById('historySummary'),
|
|
historyTimeline: document.getElementById('historyTimeline'),
|
|
refreshHistoryBtn: document.getElementById('refreshHistoryBtn'),
|
|
auditUserFilter: document.getElementById('auditUserFilter'),
|
|
auditFieldFilter: document.getElementById('auditFieldFilter'),
|
|
auditDateFrom: document.getElementById('auditDateFrom'),
|
|
auditDateTo: document.getElementById('auditDateTo'),
|
|
applyAuditFiltersBtn: document.getElementById('applyAuditFiltersBtn'),
|
|
auditTableBody: document.getElementById('auditTableBody'),
|
|
toastContainer: document.getElementById('toastContainer'),
|
|
};
|
|
|
|
const detailOffcanvas = elements.detailPanel ? bootstrap.Offcanvas.getOrCreateInstance(elements.detailPanel) : null;
|
|
const bulkModal = document.getElementById('bulkEditModal') ? bootstrap.Modal.getOrCreateInstance(document.getElementById('bulkEditModal')) : null;
|
|
const advancedFilterModal = document.getElementById('advancedFilterModal') ? bootstrap.Modal.getOrCreateInstance(document.getElementById('advancedFilterModal')) : null;
|
|
|
|
const labels = {
|
|
upper_ch_ref: 'Upper channel ref',
|
|
country_iso: 'Country ISO',
|
|
sat_ref: 'Satellite ref',
|
|
genre: 'Genre',
|
|
type: 'Type',
|
|
groupe: 'Group',
|
|
region: 'Region',
|
|
langue: 'Language',
|
|
resolution: 'Resolution',
|
|
active: 'Active',
|
|
sat_in: 'Sat in',
|
|
sat_out: 'Sat out',
|
|
sat_update: 'Sat update',
|
|
country_client: 'Country client',
|
|
sat_tpinfo: 'Transponder',
|
|
idtype: 'Id type',
|
|
six_id: 'six_id',
|
|
sid: 'sid',
|
|
onid: 'onid',
|
|
tid: 'tid',
|
|
sat_ch_client_upper: 'Client channel',
|
|
sat_client: 'Client bouquet',
|
|
counting: 'Counting',
|
|
lastview: 'Last view',
|
|
manually_edited: 'Manual edit',
|
|
manually_edited_at: 'Manual edit date'
|
|
};
|
|
|
|
const editableFields = config.detailFields?.editable || [];
|
|
const lockedFields = config.detailFields?.locked || [];
|
|
const selectOptionsFields = ['sat_ref', 'country_iso', 'genre', 'resolution', 'langue', 'region', 'groupe'];
|
|
const filterSelectFields = ['sat_ref', 'country_iso', 'country_client', 'genre', 'resolution', 'langue', 'region', 'groupe', 'sat_tpinfo', 'sat_ch_client_upper', 'sat_client'];
|
|
const advancedFieldOptions = [
|
|
{ value: 'upper_ch_ref', label: 'Channel ref' },
|
|
{ value: 'country_iso', label: 'Country ISO' },
|
|
{ value: 'country_client', label: 'Country client' },
|
|
{ value: 'sat_ref', label: 'Satellite ref' },
|
|
{ value: 'sat_tpinfo', label: 'Frequency / Transponder' },
|
|
{ value: 'genre', label: 'Genre' },
|
|
{ value: 'type', label: 'Type' },
|
|
{ value: 'resolution', label: 'Resolution' },
|
|
{ value: 'langue', label: 'Language' },
|
|
{ value: 'region', label: 'Region' },
|
|
{ value: 'groupe', label: 'Group' },
|
|
{ value: 'active', label: 'Active' },
|
|
{ value: 'idtype', label: 'Id type' },
|
|
{ value: 'six_id', label: 'six_id' },
|
|
{ value: 'sid', label: 'sid' },
|
|
{ value: 'onid', label: 'onid' },
|
|
{ value: 'tid', label: 'tid' },
|
|
{ value: 'sat_in', label: 'Sat in' },
|
|
{ value: 'sat_out', label: 'Sat out' },
|
|
{ value: 'sat_update', label: 'Sat update' },
|
|
{ value: 'sat_ch_client_upper', label: 'Client channel' },
|
|
{ value: 'sat_client', label: 'Client bouquet' },
|
|
{ value: 'counting', label: 'Counting' },
|
|
{ value: 'lastview', label: 'Last view' },
|
|
{ value: 'manually_edited', label: 'Manual edit' },
|
|
{ value: 'manually_edited_at', label: 'Manual edit date' }
|
|
];
|
|
const advancedOperatorLabels = {
|
|
contains: 'contains',
|
|
equals: 'equals',
|
|
not_contains: "doesn't contain",
|
|
not_equals: 'is not equal to',
|
|
starts_with: 'starts with',
|
|
ends_with: 'ends with',
|
|
is_empty: 'is empty',
|
|
is_not_empty: 'is not empty'
|
|
};
|
|
|
|
const formatValue = (value) => {
|
|
if (value === null || value === undefined || value === '') return '—';
|
|
return String(value);
|
|
};
|
|
|
|
const escapeHtml = (value) => String(value ?? '')
|
|
.replaceAll('&', '&')
|
|
.replaceAll('<', '<')
|
|
.replaceAll('>', '>')
|
|
.replaceAll('"', '"')
|
|
.replaceAll("'", ''');
|
|
|
|
const notify = (message, tone = 'dark') => {
|
|
const wrapper = document.createElement('div');
|
|
wrapper.className = 'toast align-items-center text-bg-light border-0';
|
|
wrapper.setAttribute('role', 'alert');
|
|
wrapper.setAttribute('aria-live', 'assertive');
|
|
wrapper.setAttribute('aria-atomic', 'true');
|
|
wrapper.innerHTML = `
|
|
<div class="d-flex">
|
|
<div class="toast-body"><strong class="text-${tone}">${escapeHtml(message)}</strong></div>
|
|
<button type="button" class="btn-close me-2 m-auto" data-bs-dismiss="toast" aria-label="Close"></button>
|
|
</div>`;
|
|
elements.toastContainer.appendChild(wrapper);
|
|
const toast = bootstrap.Toast.getOrCreateInstance(wrapper, { delay: 2600 });
|
|
wrapper.addEventListener('hidden.bs.toast', () => wrapper.remove());
|
|
toast.show();
|
|
};
|
|
|
|
const buildQueryString = (params) => {
|
|
const query = new URLSearchParams();
|
|
Object.entries(params).forEach(([key, value]) => {
|
|
if (value === undefined || value === null || value === '') return;
|
|
query.set(key, value);
|
|
});
|
|
return query.toString();
|
|
};
|
|
|
|
const advancedFilterNeedsValue = (operator) => !['is_empty', 'is_not_empty'].includes(operator);
|
|
|
|
const advancedFieldLabel = (field) => advancedFieldOptions.find((item) => item.value === field)?.label || labels[field] || field;
|
|
|
|
const describeAdvancedFilter = (rule) => {
|
|
const operatorLabel = advancedOperatorLabels[rule.operator] || rule.operator;
|
|
const suffix = advancedFilterNeedsValue(rule.operator) ? ` ${rule.value}` : '';
|
|
return `${advancedFieldLabel(rule.field)} ${operatorLabel}${suffix}`;
|
|
};
|
|
|
|
const syncAdvancedFilterBadge = () => {
|
|
const count = state.advancedFilters.length;
|
|
if (elements.advancedFilterCount) {
|
|
elements.advancedFilterCount.textContent = String(count);
|
|
elements.advancedFilterCount.classList.toggle('d-none', count === 0);
|
|
}
|
|
if (elements.advancedFiltersBtn) {
|
|
elements.advancedFiltersBtn.classList.toggle('btn-dark', count > 0);
|
|
elements.advancedFiltersBtn.classList.toggle('btn-outline-secondary', count === 0);
|
|
}
|
|
};
|
|
|
|
const renderAdvancedFilters = (rules = state.advancedFilters) => {
|
|
if (!elements.advancedFiltersContainer) return;
|
|
|
|
if (!rules.length) {
|
|
elements.advancedFiltersContainer.innerHTML = `
|
|
<div class="advanced-filter-empty">
|
|
<strong>No advanced rules yet.</strong>
|
|
<div class="small text-muted mt-1">Example: <code>sid contains 10</code> or <code>Frequency / Transponder equals 11001</code>.</div>
|
|
</div>`;
|
|
return;
|
|
}
|
|
|
|
const fieldOptions = advancedFieldOptions
|
|
.map((item) => `<option value="${escapeHtml(item.value)}">${escapeHtml(item.label)}</option>`)
|
|
.join('');
|
|
const operatorOptions = Object.entries(advancedOperatorLabels)
|
|
.map(([value, label]) => `<option value="${escapeHtml(value)}">${escapeHtml(label)}</option>`)
|
|
.join('');
|
|
|
|
elements.advancedFiltersContainer.innerHTML = rules.map((rule, index) => `
|
|
<div class="advanced-filter-row" data-rule-index="${index}">
|
|
<div class="advanced-filter-grid">
|
|
<div>
|
|
<label class="form-label">Field</label>
|
|
<select class="form-select" data-advanced-field>${fieldOptions}</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Operator</label>
|
|
<select class="form-select" data-advanced-operator>${operatorOptions}</select>
|
|
</div>
|
|
<div>
|
|
<label class="form-label">Value</label>
|
|
<input class="form-control" type="text" data-advanced-value placeholder="Enter a value">
|
|
</div>
|
|
<div class="advanced-filter-actions">
|
|
<button type="button" class="btn btn-outline-danger" data-remove-advanced-rule>Remove</button>
|
|
</div>
|
|
</div>
|
|
</div>`).join('');
|
|
|
|
[...elements.advancedFiltersContainer.querySelectorAll('.advanced-filter-row')].forEach((row, index) => {
|
|
const rule = rules[index] || {};
|
|
const fieldSelect = row.querySelector('[data-advanced-field]');
|
|
const operatorSelect = row.querySelector('[data-advanced-operator]');
|
|
const valueInput = row.querySelector('[data-advanced-value]');
|
|
if (fieldSelect) fieldSelect.value = rule.field || 'sid';
|
|
if (operatorSelect) operatorSelect.value = rule.operator || 'contains';
|
|
if (valueInput) {
|
|
valueInput.value = rule.value || '';
|
|
valueInput.disabled = !advancedFilterNeedsValue(operatorSelect?.value || 'contains');
|
|
}
|
|
});
|
|
};
|
|
|
|
const collectAdvancedFilters = () => {
|
|
const rows = [...(elements.advancedFiltersContainer?.querySelectorAll('.advanced-filter-row') || [])];
|
|
const rules = [];
|
|
|
|
for (const row of rows) {
|
|
const field = row.querySelector('[data-advanced-field]')?.value?.trim() || '';
|
|
const operator = row.querySelector('[data-advanced-operator]')?.value?.trim() || 'contains';
|
|
const value = row.querySelector('[data-advanced-value]')?.value?.trim() || '';
|
|
|
|
if (!field) continue;
|
|
if (advancedFilterNeedsValue(operator) && value === '') {
|
|
notify('Complete every advanced rule or remove the empty one.', 'danger');
|
|
return null;
|
|
}
|
|
|
|
rules.push({ field, operator, value });
|
|
}
|
|
|
|
return rules;
|
|
};
|
|
|
|
const syncFilterForm = () => {
|
|
const searchValue = state.filters.search || '';
|
|
if (elements.topSearchInput) elements.topSearchInput.value = searchValue;
|
|
|
|
if (elements.filtersForm) {
|
|
elements.filtersForm.reset();
|
|
Object.entries(state.filters).forEach(([key, value]) => {
|
|
const input = elements.filtersForm.elements.namedItem(key);
|
|
if (input) input.value = value;
|
|
});
|
|
}
|
|
|
|
syncAdvancedFilterBadge();
|
|
};
|
|
|
|
const renderFilterOptions = (options) => {
|
|
state.options = options || {};
|
|
|
|
filterSelectFields.forEach((field) => {
|
|
const select = elements.filtersForm?.elements.namedItem(field);
|
|
if (!(select instanceof HTMLSelectElement)) return;
|
|
const currentValue = state.filters[field] || '';
|
|
const list = state.options[field] || [];
|
|
const defaultLabel = select.dataset.defaultOption || select.options[0]?.textContent || 'All';
|
|
select.innerHTML = `<option value="">${escapeHtml(defaultLabel)}</option>` +
|
|
list.map(item => `<option value="${escapeHtml(item)}">${escapeHtml(item)}</option>`).join('');
|
|
select.value = currentValue;
|
|
});
|
|
};
|
|
|
|
const renderFilterChips = () => {
|
|
const ignored = new Set(['page', 'limit']);
|
|
const basicChips = Object.entries(state.filters)
|
|
.filter(([key, value]) => !ignored.has(key) && value !== undefined && value !== null && value !== '')
|
|
.map(([key, value]) => {
|
|
const label = key === 'search' ? 'Search' : (labels[key] || key);
|
|
return `<span class="filter-chip">${escapeHtml(label)}: ${escapeHtml(value)}</span>`;
|
|
});
|
|
const advancedChips = state.advancedFilters
|
|
.map((rule) => `<span class="filter-chip filter-chip-advanced">Rule: ${escapeHtml(describeAdvancedFilter(rule))}</span>`);
|
|
elements.activeFilterChips.innerHTML = [...basicChips, ...advancedChips].join('');
|
|
};
|
|
|
|
const updateSelectionUI = () => {
|
|
const count = state.selectedIds.size;
|
|
elements.selectionCount.textContent = String(count);
|
|
elements.selectionBar.classList.toggle('d-none', count === 0);
|
|
elements.bulkEditBtn.disabled = count === 0;
|
|
elements.selectionBulkBtn.disabled = count === 0;
|
|
elements.bulkEditBtn.textContent = `Bulk edit (${count})`;
|
|
elements.bulkSelectionSummary.textContent = String(count);
|
|
|
|
const currentPageIds = state.currentRows.map(row => String(row.id));
|
|
const allSelected = currentPageIds.length > 0 && currentPageIds.every(id => state.selectedIds.has(id));
|
|
elements.selectAllPageCheckbox.checked = allSelected;
|
|
};
|
|
|
|
const rowClasses = (row) => {
|
|
const classes = ['channel-row'];
|
|
if (Number(row.manually_edited) === 1) classes.push('row-manual');
|
|
if (state.selectedIds.has(String(row.id))) classes.push('row-selected');
|
|
if (row.last_changed_field) classes.push('row-has-last-change');
|
|
return classes.join(' ');
|
|
};
|
|
|
|
const cellClasses = (row, field, extra = '') => {
|
|
const classes = [];
|
|
if (extra) classes.push(extra);
|
|
if (row.last_changed_field && row.last_changed_field === field) classes.push('cell-last-change');
|
|
return classes.join(' ');
|
|
};
|
|
|
|
const renderChannels = (payload) => {
|
|
const { data, pagination } = payload;
|
|
state.lastListPayload = payload;
|
|
state.currentRows = data;
|
|
renderFilterOptions(payload.options || {});
|
|
renderFilterChips();
|
|
|
|
if (!data.length) {
|
|
elements.channelsTableBody.innerHTML = '<tr><td colspan="26" class="empty-state-cell">No channels match the current filters.</td></tr>';
|
|
} else {
|
|
elements.channelsTableBody.innerHTML = data.map(row => `
|
|
<tr class="${rowClasses(row)}" data-row-id="${row.id}">
|
|
<td class="${cellClasses(row, '', 'sticky-col checkbox-col')}"><input class="form-check-input row-checkbox" type="checkbox" data-row-id="${row.id}" ${state.selectedIds.has(String(row.id)) ? 'checked' : ''} aria-label="Select row ${escapeHtml(row.upper_ch_ref)}"></td>
|
|
<td class="${cellClasses(row, 'upper_ch_ref')}"><strong>${escapeHtml(formatValue(row.upper_ch_ref))}</strong></td>
|
|
<td class="${cellClasses(row, 'country_iso')}">${escapeHtml(formatValue(row.country_iso))}</td>
|
|
<td class="${cellClasses(row, 'country_client')}">${escapeHtml(formatValue(row.country_client))}</td>
|
|
<td class="${cellClasses(row, 'sat_ref')}">${escapeHtml(formatValue(row.sat_ref))}</td>
|
|
<td class="${cellClasses(row, 'sat_tpinfo')}">${escapeHtml(formatValue(row.sat_tpinfo))}</td>
|
|
<td class="${cellClasses(row, 'genre')}">${escapeHtml(formatValue(row.genre))}</td>
|
|
<td class="${cellClasses(row, 'type')}"><span class="channel-pill">${escapeHtml(formatValue(row.type))}</span></td>
|
|
<td class="${cellClasses(row, 'resolution')}">${escapeHtml(formatValue(row.resolution))}</td>
|
|
<td class="${cellClasses(row, 'langue')}">${escapeHtml(formatValue(row.langue))}</td>
|
|
<td class="${cellClasses(row, 'region')}">${escapeHtml(formatValue(row.region))}</td>
|
|
<td class="${cellClasses(row, 'groupe')}">${escapeHtml(formatValue(row.groupe))}</td>
|
|
<td class="${cellClasses(row, 'active')}">${escapeHtml(formatValue(row.active))}</td>
|
|
<td class="${cellClasses(row, 'idtype')}">${escapeHtml(formatValue(row.idtype))}</td>
|
|
<td class="${cellClasses(row, 'six_id', 'sys-col')}">${escapeHtml(formatValue(row.six_id))}</td>
|
|
<td class="${cellClasses(row, 'sid', 'sys-col')}">${escapeHtml(formatValue(row.sid))}</td>
|
|
<td class="${cellClasses(row, 'onid', 'sys-col')}">${escapeHtml(formatValue(row.onid))}</td>
|
|
<td class="${cellClasses(row, 'tid', 'sys-col')}">${escapeHtml(formatValue(row.tid))}</td>
|
|
<td class="${cellClasses(row, 'sat_in')}">${escapeHtml(formatValue(row.sat_in))}</td>
|
|
<td class="${cellClasses(row, 'sat_out')}">${escapeHtml(formatValue(row.sat_out))}</td>
|
|
<td class="${cellClasses(row, 'sat_update')}">${escapeHtml(formatValue(row.sat_update))}</td>
|
|
<td class="${cellClasses(row, 'sat_ch_client_upper', 'sys-col')}">${escapeHtml(formatValue(row.sat_ch_client_upper))}</td>
|
|
<td class="${cellClasses(row, 'sat_client', 'sys-col')}">${escapeHtml(formatValue(row.sat_client))}</td>
|
|
<td class="${cellClasses(row, 'counting', 'sys-col')}">${escapeHtml(formatValue(row.counting))}</td>
|
|
<td class="${cellClasses(row, 'lastview', 'sys-col')}">${escapeHtml(formatValue(row.lastview))}</td>
|
|
<td class="${cellClasses(row, 'manually_edited_at')}">${escapeHtml(formatValue(row.manually_edited_at))}</td>
|
|
</tr>`).join('');
|
|
}
|
|
|
|
const start = pagination.total === 0 ? 0 : ((pagination.page - 1) * pagination.limit) + 1;
|
|
const end = Math.min(pagination.total, pagination.page * pagination.limit);
|
|
elements.resultCounter.textContent = `${pagination.total} result(s) · showing ${start}-${end}`;
|
|
elements.pageMeta.textContent = `Page ${pagination.page} of ${pagination.pages}`;
|
|
elements.prevPageBtn.disabled = pagination.page <= 1;
|
|
elements.nextPageBtn.disabled = pagination.page >= pagination.pages;
|
|
updateSelectionUI();
|
|
};
|
|
|
|
const fetchChannels = async () => {
|
|
elements.resultCounter.textContent = 'Loading channels…';
|
|
const query = buildQueryString({
|
|
...state.filters,
|
|
sort: state.sort.field,
|
|
direction: state.sort.direction,
|
|
advanced_filters: state.advancedFilters.length ? JSON.stringify(state.advancedFilters) : ''
|
|
});
|
|
const response = await fetch(`${config.apiBase}?${query}`, { headers: { 'Accept': 'application/json' } });
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to fetch channels.');
|
|
renderChannels(result.data);
|
|
};
|
|
|
|
const renderDetailFieldHighlights = (transition) => {
|
|
const lastChangedField = transition?.last_changed_field || null;
|
|
|
|
elements.editableFieldsContainer.querySelectorAll('[data-editable-field]').forEach((fieldNode) => {
|
|
fieldNode.classList.remove('is-last-changed');
|
|
});
|
|
|
|
if (!elements.detailLastChangeNotice) {
|
|
return;
|
|
}
|
|
|
|
if (!lastChangedField) {
|
|
elements.detailLastChangeNotice.classList.add('d-none');
|
|
elements.detailLastChangeNotice.innerHTML = '';
|
|
return;
|
|
}
|
|
|
|
const fieldNode = elements.editableFieldsContainer.querySelector(`[data-editable-field="${lastChangedField}"]`);
|
|
if (fieldNode) fieldNode.classList.add('is-last-changed');
|
|
|
|
elements.detailLastChangeNotice.classList.remove('d-none');
|
|
elements.detailLastChangeNotice.innerHTML = `
|
|
<div class="detail-last-change-title">Last edited field</div>
|
|
<div class="small text-muted mb-2">Only the newest changed field is highlighted.</div>
|
|
<div class="detail-last-change-badges"><span class="detail-last-change-badge">${escapeHtml(labels[lastChangedField] || lastChangedField)}</span></div>`;
|
|
};
|
|
|
|
const renderDetailForm = (channel) => {
|
|
state.currentDetail = channel;
|
|
elements.detailChannelId.value = channel.id;
|
|
elements.detailLoadingState.classList.add('d-none');
|
|
elements.detailEditableSection.classList.remove('d-none');
|
|
renderDetailFieldHighlights(null);
|
|
|
|
const buildInput = (field, value) => {
|
|
const label = labels[field] || field;
|
|
if (field === 'active') {
|
|
return `
|
|
<div class="col-sm-6" data-editable-field="${field}">
|
|
<div class="editable-field-card">
|
|
<label class="form-label" for="field_${field}">${escapeHtml(label)}</label>
|
|
<select class="form-select" id="field_${field}" name="${field}">
|
|
<option value="1" ${String(value) === '1' ? 'selected' : ''}>1</option>
|
|
<option value="0" ${String(value) === '0' ? 'selected' : ''}>0</option>
|
|
</select>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
if (field === 'type') {
|
|
return `
|
|
<div class="col-sm-6" data-editable-field="${field}">
|
|
<div class="editable-field-card">
|
|
<label class="form-label" for="field_${field}">${escapeHtml(label)}</label>
|
|
<select class="form-select" id="field_${field}" name="${field}">
|
|
<option value="free" ${String(value) === 'free' ? 'selected' : ''}>free</option>
|
|
<option value="payed" ${String(value) === 'payed' ? 'selected' : ''}>payed</option>
|
|
</select>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
if (selectOptionsFields.includes(field)) {
|
|
const opts = state.options[field] || [];
|
|
return `
|
|
<div class="col-sm-6" data-editable-field="${field}">
|
|
<div class="editable-field-card">
|
|
<label class="form-label" for="field_${field}">${escapeHtml(label)}</label>
|
|
<select class="form-select" id="field_${field}" name="${field}">
|
|
<option value="">Select</option>
|
|
${opts.map(item => `<option value="${escapeHtml(item)}" ${String(value || '') === String(item) ? 'selected' : ''}>${escapeHtml(item)}</option>`).join('')}
|
|
</select>
|
|
</div>
|
|
</div>`;
|
|
}
|
|
if (['sat_in', 'sat_out', 'sat_update'].includes(field)) {
|
|
return `
|
|
<div class="col-sm-6" data-editable-field="${field}">
|
|
<div class="editable-field-card">
|
|
<label class="form-label" for="field_${field}">${escapeHtml(label)}</label>
|
|
<input class="form-control" id="field_${field}" name="${field}" type="date" value="${escapeHtml(value || '')}">
|
|
</div>
|
|
</div>`;
|
|
}
|
|
return `
|
|
<div class="col-sm-6" data-editable-field="${field}">
|
|
<div class="editable-field-card">
|
|
<label class="form-label" for="field_${field}">${escapeHtml(label)}</label>
|
|
<input class="form-control" id="field_${field}" name="${field}" type="text" value="${escapeHtml(value || '')}">
|
|
</div>
|
|
</div>`;
|
|
};
|
|
|
|
elements.editableFieldsContainer.innerHTML = editableFields.map(field => buildInput(field, channel[field])).join('');
|
|
elements.lockedFieldsContainer.innerHTML = lockedFields.map(field => `
|
|
<div class="col-sm-6">
|
|
<div class="locked-card sys-field">
|
|
<div class="d-flex justify-content-between gap-2">
|
|
<div class="locked-label">${escapeHtml(labels[field] || field)}</div>
|
|
<span class="lock-icon">🔒</span>
|
|
</div>
|
|
<div class="locked-value">${escapeHtml(formatValue(channel[field]))}</div>
|
|
</div>
|
|
</div>`).join('');
|
|
};
|
|
|
|
const fetchDetail = async (id) => {
|
|
elements.detailLoadingState.textContent = 'Loading channel detail…';
|
|
elements.detailLoadingState.classList.remove('d-none');
|
|
elements.detailEditableSection.classList.add('d-none');
|
|
detailOffcanvas.show();
|
|
const response = await fetch(`${config.apiBase}?id=${encodeURIComponent(id)}`);
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to load detail.');
|
|
state.options = { ...state.options, ...(result.meta?.options || {}) };
|
|
renderDetailForm(result.data);
|
|
state.currentHistoryId = Number(result.data.id);
|
|
state.historyLoaded = false;
|
|
try {
|
|
await fetchHistory(result.data.id, { silent: true });
|
|
} catch (error) {
|
|
renderHistoryEmpty(error.message);
|
|
}
|
|
};
|
|
|
|
const payloadFromForm = (form, fields) => {
|
|
const payload = {};
|
|
fields.forEach(field => {
|
|
const input = form.elements.namedItem(field);
|
|
if (!input) return;
|
|
payload[field] = input.value;
|
|
});
|
|
return payload;
|
|
};
|
|
|
|
const renderBulkForm = () => {
|
|
elements.bulkEditFieldsContainer.innerHTML = editableFields.map(field => {
|
|
const label = labels[field] || field;
|
|
let control = '';
|
|
if (field === 'active') {
|
|
control = `
|
|
<select class="form-select bulk-control" name="${field}" disabled>
|
|
<option value="1">1</option>
|
|
<option value="0">0</option>
|
|
</select>`;
|
|
} else if (field === 'type') {
|
|
control = `
|
|
<select class="form-select bulk-control" name="${field}" disabled>
|
|
<option value="free">free</option>
|
|
<option value="payed">payed</option>
|
|
</select>`;
|
|
} else if (selectOptionsFields.includes(field)) {
|
|
const opts = state.options[field] || [];
|
|
control = `
|
|
<select class="form-select bulk-control" name="${field}" disabled>
|
|
<option value="">Select</option>
|
|
${opts.map(item => `<option value="${escapeHtml(item)}">${escapeHtml(item)}</option>`).join('')}
|
|
</select>`;
|
|
} else if (['sat_in', 'sat_out', 'sat_update'].includes(field)) {
|
|
control = `<input class="form-control bulk-control" name="${field}" type="date" disabled>`;
|
|
} else {
|
|
control = `<input class="form-control bulk-control" name="${field}" type="text" disabled>`;
|
|
}
|
|
return `
|
|
<div class="col-md-6">
|
|
<div class="bulk-field-card" data-field-card="${field}">
|
|
<div class="form-check">
|
|
<input class="form-check-input bulk-enable" type="checkbox" value="${field}" id="bulk_enable_${field}">
|
|
<label class="form-check-label fw-semibold" for="bulk_enable_${field}">${escapeHtml(label)}</label>
|
|
</div>
|
|
${control}
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
};
|
|
|
|
const fetchAnalytics = async () => {
|
|
const response = await fetch(`${config.apiBase}?stats=1`);
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to load analytics.');
|
|
const stats = result.data;
|
|
const overview = [
|
|
['Total channels', stats.overview.total_channels],
|
|
['Active', stats.overview.active_channels],
|
|
['Manually edited', stats.overview.manually_edited_channels],
|
|
['Total hits', Number(stats.overview.total_hits).toLocaleString()],
|
|
];
|
|
elements.analyticsOverview.innerHTML = overview.map(([label, value]) => `
|
|
<div class="col-sm-6 col-xl-3"><div class="analytics-card"><div class="metric-label">${escapeHtml(label)}</div><div class="metric-value">${escapeHtml(value)}</div></div></div>`).join('');
|
|
|
|
elements.analyticsBreakdowns.innerHTML = Object.entries(stats.breakdowns).map(([dimension, rows]) => {
|
|
const max = Math.max(...rows.map(item => Number(item.total)), 1);
|
|
const bars = rows.map(item => `
|
|
<div class="analytics-bar-row">
|
|
<div class="analytics-bar-top"><span>${escapeHtml(item.label)}</span><strong>${escapeHtml(item.total)}</strong></div>
|
|
<div class="analytics-bar-track"><div class="analytics-bar-fill" style="width:${(Number(item.total) / max) * 100}%"></div></div>
|
|
</div>`).join('');
|
|
return `
|
|
<div class="col-lg-6">
|
|
<div class="analytics-card h-100">
|
|
<div class="d-flex justify-content-between align-items-center mb-3">
|
|
<h3 class="section-title mb-0 text-capitalize">${escapeHtml(dimension.replaceAll('_', ' '))}</h3>
|
|
<span class="small text-muted">Top distribution</span>
|
|
</div>
|
|
<div class="analytics-bars">${bars}</div>
|
|
</div>
|
|
</div>`;
|
|
}).join('');
|
|
};
|
|
|
|
const renderHistoryEmpty = (message) => {
|
|
elements.historyLead.textContent = message;
|
|
elements.historySummary.innerHTML = '<div class="col-12"><div class="analytics-card"><div class="small text-muted">No channel selected yet.</div></div></div>';
|
|
elements.historyTimeline.innerHTML = `<div class="analytics-card"><div class="small text-muted">${escapeHtml(message)}</div></div>`;
|
|
renderDetailFieldHighlights(null);
|
|
};
|
|
|
|
const renderHistory = (payload) => {
|
|
const versions = payload.versions || [];
|
|
if (!versions.length) {
|
|
renderHistoryEmpty('No history entries were found for this channel.');
|
|
renderDetailFieldHighlights(null);
|
|
return;
|
|
}
|
|
|
|
const latestTransition = payload.latest_transition || {};
|
|
const lastChangedField = latestTransition.last_changed_field || null;
|
|
const currentVersion = versions.find(version => Number(version.is_current) === 1 || version.is_current === true) || versions[versions.length - 1];
|
|
const firstVersion = versions[0];
|
|
elements.historyLead.textContent = `Showing ${versions.length} version(s) for ${currentVersion.upper_ch_ref || 'selected channel'} (current row #${currentVersion.id}).`;
|
|
|
|
const summaryCards = [
|
|
['Selected row', `#${payload.selected_id}`],
|
|
['First version', firstVersion.date_in || `#${firstVersion.id}`],
|
|
['Latest version', `#${payload.latest_id}`],
|
|
['Last edited field', lastChangedField ? (labels[lastChangedField] || lastChangedField) : '—'],
|
|
];
|
|
|
|
elements.historySummary.innerHTML = summaryCards.map(([label, value]) => `
|
|
<div class="col-sm-6 col-xl-3">
|
|
<div class="analytics-card h-100">
|
|
<div class="metric-label">${escapeHtml(label)}</div>
|
|
<div class="metric-value history-metric-value">${escapeHtml(value)}</div>
|
|
</div>
|
|
</div>`).join('');
|
|
|
|
elements.historyTimeline.innerHTML = versions.map(version => {
|
|
const statusClass = version.is_current ? 'history-status-current' : 'history-status-closed';
|
|
const statusLabel = version.is_current ? 'Current' : 'Closed';
|
|
const changeList = (version.changes || []).length
|
|
? version.changes.map(change => {
|
|
const isLastChange = version.is_current && lastChangedField === change.field_name;
|
|
return `
|
|
<div class="history-change ${isLastChange ? 'is-last-change' : ''}">
|
|
<span class="history-change-field">${escapeHtml(labels[change.field_name] || change.field_name)}</span>
|
|
<span class="audit-old">${escapeHtml(formatValue(change.old_value))}</span>
|
|
<span aria-hidden="true">→</span>
|
|
<span class="audit-new">${escapeHtml(formatValue(change.new_value))}</span>
|
|
<span class="history-change-meta">${escapeHtml(formatValue(change.user_id))} · ${escapeHtml(formatValue(change.changed_at))}</span>
|
|
</div>`;
|
|
}).join('')
|
|
: '<div class="small text-muted">Initial imported/current row snapshot with no manual field changes recorded for this version.</div>';
|
|
|
|
const latestBadges = version.is_current && lastChangedField
|
|
? `<div class="history-last-change-note"><span class="history-last-change-label">Last edited field:</span><span class="small text-muted">${escapeHtml(labels[lastChangedField] || lastChangedField)}</span></div>`
|
|
: '';
|
|
|
|
return `
|
|
<article class="history-card ${version.is_current ? 'is-current' : ''}">
|
|
<div class="history-card-top">
|
|
<div>
|
|
<div class="d-flex flex-wrap gap-2 align-items-center mb-2">
|
|
<span class="history-version-pill">Version ${escapeHtml(version.version_number)}</span>
|
|
<span class="history-status-pill ${statusClass}">${statusLabel}</span>
|
|
<span class="small text-muted">Row #${escapeHtml(version.id)}</span>
|
|
</div>
|
|
<h3 class="history-card-title">${escapeHtml(formatValue(version.upper_ch_ref))}</h3>
|
|
<div class="small text-muted">${escapeHtml(formatValue(version.sat_ref))} · ${escapeHtml(formatValue(version.country_iso))} · ${escapeHtml(formatValue(version.genre))}</div>
|
|
</div>
|
|
<div class="history-date-block">
|
|
<div><strong>Date in:</strong> ${escapeHtml(formatValue(version.date_in))}</div>
|
|
<div><strong>Date out:</strong> ${escapeHtml(formatValue(version.date_out))}</div>
|
|
</div>
|
|
</div>
|
|
|
|
${latestBadges}
|
|
|
|
<div class="history-meta-grid">
|
|
<div class="history-meta-item"><span class="history-meta-label">Type</span><strong>${escapeHtml(formatValue(version.type))}</strong></div>
|
|
<div class="history-meta-item"><span class="history-meta-label">Resolution</span><strong>${escapeHtml(formatValue(version.resolution))}</strong></div>
|
|
<div class="history-meta-item"><span class="history-meta-label">Active</span><strong>${escapeHtml(formatValue(version.active))}</strong></div>
|
|
<div class="history-meta-item"><span class="history-meta-label">sat_out</span><strong>${escapeHtml(formatValue(version.sat_out))}</strong></div>
|
|
</div>
|
|
|
|
<div class="history-changes-block">
|
|
<div class="section-subtitle mb-2">Field changes for this version</div>
|
|
<div class="history-changes-list">${changeList}</div>
|
|
</div>
|
|
</article>`;
|
|
}).join('');
|
|
|
|
renderDetailFieldHighlights(latestTransition);
|
|
};
|
|
|
|
const fetchHistory = async (id, options = {}) => {
|
|
const { silent = false } = options;
|
|
if (!id) {
|
|
state.historyLoaded = false;
|
|
state.currentHistoryId = null;
|
|
renderHistoryEmpty('Click a row in Dataset to load its previous and current versions.');
|
|
return;
|
|
}
|
|
|
|
if (!silent) {
|
|
elements.historyLead.textContent = `Loading history for row #${id}…`;
|
|
elements.historyTimeline.innerHTML = '<div class="analytics-card"><div class="small text-muted">Loading history…</div></div>';
|
|
}
|
|
|
|
const response = await fetch(`${config.apiBase}?history_for=${encodeURIComponent(id)}`);
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to load history.');
|
|
|
|
state.currentHistoryId = Number(id);
|
|
state.historyLoaded = true;
|
|
renderHistory(result.data);
|
|
};
|
|
|
|
const fetchAuditLog = async () => {
|
|
elements.auditTableBody.innerHTML = '<tr><td colspan="5" class="empty-state-cell">Loading audit log…</td></tr>';
|
|
const params = {
|
|
page: state.auditFilters.page,
|
|
limit: state.auditFilters.limit,
|
|
user_id: elements.auditUserFilter.value,
|
|
field_name: elements.auditFieldFilter.value,
|
|
date_from: elements.auditDateFrom.value,
|
|
date_to: elements.auditDateTo.value,
|
|
};
|
|
const response = await fetch(`${config.auditApi}?${buildQueryString(params)}`);
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to load audit log.');
|
|
const { data, filters } = result.data;
|
|
|
|
const fillSelect = (select, items, currentValue) => {
|
|
if (!select.dataset.loaded) {
|
|
const first = select.options[0]?.outerHTML || '<option value="">All</option>';
|
|
select.innerHTML = first + items.map(item => `<option value="${escapeHtml(item)}">${escapeHtml(item)}</option>`).join('');
|
|
select.dataset.loaded = 'true';
|
|
}
|
|
select.value = currentValue || '';
|
|
};
|
|
|
|
fillSelect(elements.auditUserFilter, filters.users || [], params.user_id);
|
|
fillSelect(elements.auditFieldFilter, filters.fields || [], params.field_name);
|
|
|
|
if (!data.length) {
|
|
elements.auditTableBody.innerHTML = '<tr><td colspan="5" class="empty-state-cell">No audit entries for the current filters.</td></tr>';
|
|
return;
|
|
}
|
|
|
|
elements.auditTableBody.innerHTML = data.map(item => `
|
|
<tr>
|
|
<td>${escapeHtml(formatValue(item.changed_at))}</td>
|
|
<td>${escapeHtml(formatValue(item.user_id))}</td>
|
|
<td>
|
|
<div class="fw-semibold">${escapeHtml(formatValue(item.upper_ch_ref))}</div>
|
|
<div class="small text-muted">#${escapeHtml(item.channel_id)} · ${escapeHtml(formatValue(item.sat_ref))}</div>
|
|
</td>
|
|
<td>${escapeHtml(formatValue(item.field_name))}</td>
|
|
<td>
|
|
<div class="audit-change">
|
|
<span class="audit-old">${escapeHtml(formatValue(item.old_value))}</span>
|
|
<span aria-hidden="true">→</span>
|
|
<span class="audit-new">${escapeHtml(formatValue(item.new_value))}</span>
|
|
</div>
|
|
</td>
|
|
</tr>`).join('');
|
|
};
|
|
|
|
const refreshAll = async () => {
|
|
try {
|
|
await fetchChannels();
|
|
if (!state.analyticsLoaded) {
|
|
await fetchAnalytics();
|
|
state.analyticsLoaded = true;
|
|
}
|
|
} catch (error) {
|
|
elements.channelsTableBody.innerHTML = `<tr><td colspan="26" class="empty-state-cell">${escapeHtml(error.message)}</td></tr>`;
|
|
notify(error.message, 'danger');
|
|
}
|
|
};
|
|
|
|
const collectFilters = () => {
|
|
const nextFilters = { limit: 50, page: 1 };
|
|
const formData = new FormData(elements.filtersForm);
|
|
for (const [key, value] of formData.entries()) {
|
|
if (String(value).trim() !== '') nextFilters[key] = String(value).trim();
|
|
}
|
|
const searchValue = elements.topSearchInput?.value.trim() || '';
|
|
if (searchValue) nextFilters.search = searchValue;
|
|
return nextFilters;
|
|
};
|
|
|
|
elements.filtersForm?.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
state.filters = collectFilters();
|
|
syncFilterForm();
|
|
await refreshAll();
|
|
});
|
|
|
|
elements.topSearchForm?.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
state.filters = collectFilters();
|
|
syncFilterForm();
|
|
await refreshAll();
|
|
});
|
|
|
|
elements.clearSearchBtn?.addEventListener('click', async () => {
|
|
if (elements.topSearchInput) elements.topSearchInput.value = '';
|
|
const hiddenSearch = elements.filtersForm?.elements.namedItem('search');
|
|
if (hiddenSearch) hiddenSearch.value = '';
|
|
delete state.filters.search;
|
|
state.filters = { ...state.filters, limit: 50, page: 1 };
|
|
syncFilterForm();
|
|
await refreshAll();
|
|
});
|
|
|
|
elements.resetFiltersBtn?.addEventListener('click', async () => {
|
|
state.filters = { limit: 50, page: 1 };
|
|
state.advancedFilters = [];
|
|
elements.filtersForm.reset();
|
|
renderAdvancedFilters();
|
|
syncFilterForm();
|
|
await refreshAll();
|
|
notify('Filters reset to default active view.');
|
|
});
|
|
|
|
elements.prevPageBtn?.addEventListener('click', async () => {
|
|
if ((state.filters.page || 1) <= 1) return;
|
|
state.filters.page = (state.filters.page || 1) - 1;
|
|
await refreshAll();
|
|
});
|
|
|
|
elements.nextPageBtn?.addEventListener('click', async () => {
|
|
state.filters.page = (state.filters.page || 1) + 1;
|
|
await refreshAll();
|
|
});
|
|
|
|
elements.selectAllPageCheckbox?.addEventListener('change', (event) => {
|
|
const checked = event.target.checked;
|
|
state.currentRows.forEach(row => {
|
|
const id = String(row.id);
|
|
if (checked) state.selectedIds.add(id);
|
|
else state.selectedIds.delete(id);
|
|
});
|
|
if (state.lastListPayload) renderChannels(state.lastListPayload);
|
|
});
|
|
|
|
elements.selectPageBtn?.addEventListener('click', () => {
|
|
state.currentRows.forEach(row => state.selectedIds.add(String(row.id)));
|
|
document.querySelectorAll('.row-checkbox').forEach(box => { box.checked = true; });
|
|
updateSelectionUI();
|
|
document.querySelectorAll('tr[data-row-id]').forEach(row => row.classList.add('row-selected'));
|
|
notify('Current page selected.');
|
|
});
|
|
|
|
elements.clearSelectionBtn?.addEventListener('click', () => {
|
|
state.selectedIds.clear();
|
|
document.querySelectorAll('.row-checkbox').forEach(box => { box.checked = false; });
|
|
document.querySelectorAll('tr[data-row-id]').forEach(row => row.classList.remove('row-selected'));
|
|
updateSelectionUI();
|
|
});
|
|
|
|
document.querySelectorAll('.channel-table thead th[data-sort]').forEach(th => {
|
|
th.addEventListener('click', async () => {
|
|
const field = th.dataset.sort;
|
|
if (state.sort.field === field) {
|
|
state.sort.direction = state.sort.direction === 'ASC' ? 'DESC' : 'ASC';
|
|
} else {
|
|
state.sort.field = field;
|
|
state.sort.direction = 'ASC';
|
|
}
|
|
await refreshAll();
|
|
});
|
|
});
|
|
|
|
elements.channelsTableBody?.addEventListener('click', async (event) => {
|
|
const checkbox = event.target.closest('.row-checkbox');
|
|
if (checkbox) {
|
|
const id = String(checkbox.dataset.rowId);
|
|
if (checkbox.checked) state.selectedIds.add(id); else state.selectedIds.delete(id);
|
|
const rowEl = checkbox.closest('tr');
|
|
rowEl?.classList.toggle('row-selected', checkbox.checked);
|
|
updateSelectionUI();
|
|
return;
|
|
}
|
|
|
|
const row = event.target.closest('tr[data-row-id]');
|
|
if (!row) return;
|
|
try {
|
|
await fetchDetail(row.dataset.rowId);
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
elements.detailForm?.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
const id = elements.detailChannelId.value;
|
|
const fields = payloadFromForm(elements.detailForm, editableFields);
|
|
try {
|
|
const response = await fetch(`${config.apiBase}?id=${encodeURIComponent(id)}`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
|
body: JSON.stringify({ fields })
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Unable to save changes.');
|
|
detailOffcanvas.hide();
|
|
notify(`Saved ${result.data.changed_fields.length || 0} field(s).`);
|
|
state.auditLoaded = false;
|
|
state.historyLoaded = false;
|
|
state.currentHistoryId = Number(result.data?.channel?.id || id);
|
|
try {
|
|
await fetchHistory(state.currentHistoryId, { silent: true });
|
|
} catch (historyError) {
|
|
renderHistoryEmpty(historyError.message);
|
|
}
|
|
await refreshAll();
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
document.getElementById('bulkEditModal')?.addEventListener('show.bs.modal', () => {
|
|
renderBulkForm();
|
|
elements.bulkSelectionSummary.textContent = String(state.selectedIds.size);
|
|
});
|
|
|
|
document.getElementById('advancedFilterModal')?.addEventListener('show.bs.modal', () => {
|
|
renderAdvancedFilters(state.advancedFilters.length ? state.advancedFilters : [{ field: 'sid', operator: 'contains', value: '' }]);
|
|
});
|
|
|
|
elements.addAdvancedFilterBtn?.addEventListener('click', () => {
|
|
const rawRows = [...(elements.advancedFiltersContainer?.querySelectorAll('.advanced-filter-row') || [])].map((row) => ({
|
|
field: row.querySelector('[data-advanced-field]')?.value?.trim() || 'sid',
|
|
operator: row.querySelector('[data-advanced-operator]')?.value?.trim() || 'contains',
|
|
value: row.querySelector('[data-advanced-value]')?.value?.trim() || ''
|
|
}));
|
|
renderAdvancedFilters([...(rawRows.length ? rawRows : []), { field: 'sid', operator: 'contains', value: '' }]);
|
|
});
|
|
|
|
elements.clearAdvancedFiltersBtn?.addEventListener('click', () => {
|
|
renderAdvancedFilters([]);
|
|
notify('Rules cleared in the builder. Click Apply advanced filters to confirm.');
|
|
});
|
|
|
|
elements.advancedFiltersContainer?.addEventListener('change', (event) => {
|
|
const operatorSelect = event.target.closest('[data-advanced-operator]');
|
|
if (!operatorSelect) return;
|
|
const row = operatorSelect.closest('.advanced-filter-row');
|
|
const valueInput = row?.querySelector('[data-advanced-value]');
|
|
if (!valueInput) return;
|
|
const needsValue = advancedFilterNeedsValue(operatorSelect.value);
|
|
valueInput.disabled = !needsValue;
|
|
if (!needsValue) valueInput.value = '';
|
|
});
|
|
|
|
elements.advancedFiltersContainer?.addEventListener('click', (event) => {
|
|
const removeBtn = event.target.closest('[data-remove-advanced-rule]');
|
|
if (!removeBtn) return;
|
|
removeBtn.closest('.advanced-filter-row')?.remove();
|
|
if (!elements.advancedFiltersContainer?.querySelector('.advanced-filter-row')) {
|
|
renderAdvancedFilters();
|
|
}
|
|
});
|
|
|
|
elements.applyAdvancedFiltersBtn?.addEventListener('click', async () => {
|
|
const rules = collectAdvancedFilters();
|
|
if (rules === null) return;
|
|
state.advancedFilters = rules;
|
|
state.filters = { ...state.filters, page: 1 };
|
|
syncAdvancedFilterBadge();
|
|
renderFilterChips();
|
|
advancedFilterModal?.hide();
|
|
await refreshAll();
|
|
notify(rules.length ? `Applied ${rules.length} advanced rule(s).` : 'Advanced filters cleared.');
|
|
});
|
|
|
|
elements.bulkEditFieldsContainer?.addEventListener('change', (event) => {
|
|
const toggle = event.target.closest('.bulk-enable');
|
|
if (!toggle) return;
|
|
const card = document.querySelector(`[data-field-card="${toggle.value}"]`);
|
|
const control = card?.querySelector('.bulk-control');
|
|
if (control) control.disabled = !toggle.checked;
|
|
card?.classList.toggle('is-enabled', toggle.checked);
|
|
});
|
|
|
|
elements.bulkEditForm?.addEventListener('submit', async (event) => {
|
|
event.preventDefault();
|
|
if (state.selectedIds.size === 0) {
|
|
notify('Select at least one row before bulk editing.', 'danger');
|
|
return;
|
|
}
|
|
|
|
const enabledFields = [...document.querySelectorAll('.bulk-enable:checked')];
|
|
if (enabledFields.length === 0) {
|
|
notify('Check at least one field to apply.', 'danger');
|
|
return;
|
|
}
|
|
|
|
const fields = {};
|
|
enabledFields.forEach(toggle => {
|
|
const control = document.querySelector(`[data-field-card="${toggle.value}"] .bulk-control`);
|
|
fields[toggle.value] = control ? control.value : '';
|
|
});
|
|
|
|
try {
|
|
const response = await fetch(`${config.apiBase}?bulk=1`, {
|
|
method: 'PATCH',
|
|
headers: { 'Content-Type': 'application/json', 'Accept': 'application/json' },
|
|
body: JSON.stringify({ ids: [...state.selectedIds].map(Number), fields })
|
|
});
|
|
const result = await response.json();
|
|
if (!response.ok || !result.success) throw new Error(result.error || 'Bulk update failed.');
|
|
bulkModal.hide();
|
|
state.selectedIds.clear();
|
|
notify(`Bulk update applied to ${result.data.updated_count} row(s).`);
|
|
state.auditLoaded = false;
|
|
state.historyLoaded = false;
|
|
state.currentHistoryId = null;
|
|
renderHistoryEmpty('Bulk edit finished. Select one row in Dataset to inspect its version chain.');
|
|
await refreshAll();
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
document.querySelector('[data-bs-target="#analytics-panel"]')?.addEventListener('shown.bs.tab', async () => {
|
|
try {
|
|
await fetchAnalytics();
|
|
state.analyticsLoaded = true;
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
document.querySelector('[data-bs-target="#history-panel"]')?.addEventListener('shown.bs.tab', async () => {
|
|
if (!state.currentHistoryId) {
|
|
renderHistoryEmpty('Click a row in Dataset to load its previous and current versions.');
|
|
return;
|
|
}
|
|
if (state.historyLoaded) return;
|
|
try {
|
|
await fetchHistory(state.currentHistoryId);
|
|
} catch (error) {
|
|
renderHistoryEmpty(error.message);
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
document.querySelector('[data-bs-target="#audit-panel"]')?.addEventListener('shown.bs.tab', async () => {
|
|
if (state.auditLoaded) return;
|
|
try {
|
|
await fetchAuditLog();
|
|
state.auditLoaded = true;
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
elements.refreshHistoryBtn?.addEventListener('click', async () => {
|
|
if (!state.currentHistoryId) {
|
|
renderHistoryEmpty('Click a row in Dataset to load its previous and current versions.');
|
|
return;
|
|
}
|
|
try {
|
|
await fetchHistory(state.currentHistoryId);
|
|
} catch (error) {
|
|
renderHistoryEmpty(error.message);
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
elements.applyAuditFiltersBtn?.addEventListener('click', async () => {
|
|
try {
|
|
await fetchAuditLog();
|
|
state.auditLoaded = true;
|
|
} catch (error) {
|
|
notify(error.message, 'danger');
|
|
}
|
|
});
|
|
|
|
syncFilterForm();
|
|
renderAdvancedFilters();
|
|
renderHistoryEmpty('Click a row in Dataset to load its previous and current versions.');
|
|
refreshAll();
|
|
});
|