| | |
| | | grid: new Map(), |
| | | table: new Map(), |
| | | } |
| | | this.currentView = 'grid'; |
| | | this.currentView = this.container.dataset.view ?? 'grid'; |
| | | this.selectedItems = new Set(); |
| | | this.subscribers = new Set(); |
| | | |
| | |
| | | } |
| | | |
| | | /** |
| | | * Handle data updates from store |
| | | */ |
| | | handleDataUpdate(data) { |
| | | console.log(data); |
| | | const items = data.data?.items || data.items || []; |
| | | this.render(items); |
| | | } |
| | | |
| | | /** |
| | | * Handle items update |
| | | */ |
| | | handleItemsUpdate() { |
| | |
| | | |
| | | // Handle empty state |
| | | if (items.length === 0) { |
| | | console.log('Nothing to show'); |
| | | this.renderEmpty(); |
| | | return; |
| | | } |
| | |
| | | } |
| | | |
| | | toggleTable(on) { |
| | | this.ui.table.selectedColumns.hidden = !on; |
| | | if (this.ui.table.selectedColumns) { |
| | | this.ui.table.selectedColumns.hidden = !on; |
| | | } |
| | | |
| | | if (on && !this.ui.table.table) { |
| | | let table = window.getTemplate('contentTable'); |
| | | this.container.append(table); |
| | |
| | | window.removeChildren(this.ui.table.body); |
| | | } |
| | | } |
| | | this.ui.table.selectedColumns.hidden = !on; |
| | | |
| | | if (this.ui.table.selectedColumns) { |
| | | this.ui.table.selectedColumns.hidden = !on; |
| | | } |
| | | } |
| | | |
| | | toggleGrid() { |
| | |
| | | row.querySelector('.select-item').value, |
| | | row.querySelector('.select-item').checked, |
| | | row.querySelector('.select-item + label').htmlFor, |
| | | row.querySelector(`input[name="post_status"][value="${item.status}"]`).checked |
| | | ] = [ |
| | | item.id, |
| | | item.id, |
| | | this.selectedItems.has(`${item.id}`), |
| | | item.id, |
| | | item.status |
| | | ]; |
| | | let status = row.querySelector(`input[name="post_status"][value="${item.status}"]`); |
| | | if (status) { |
| | | status.checked = true; |
| | | } |
| | | |
| | | // Let jvbPopulate do its thing - NO prefixing needed! |
| | | new window.jvbPopulate(row, item.fields, item.images); |
| | | if (Object.hasOwn(this.ui.table.table.dataset, 'edit')) { |
| | | new window.jvbPopulate(row, item); |
| | | } else { |
| | | for (let [key, value] of Object.entries(item)) { |
| | | let col = row.querySelector(`[data-field="${key}"]`); |
| | | if (col) { |
| | | let p = col.querySelector('p'); |
| | | if (col.dataset.fieldType === 'date') { |
| | | value = window.formatTimeAgo(value); |
| | | } |
| | | p.textContent = value; |
| | | } |
| | | } |
| | | } |
| | | |
| | | |
| | | // Clean up after population |
| | | this.cleanupTableRow(row); |
| | |
| | | let timelinePoint = row.querySelector('.timeline-point'); |
| | | let tbody = row; |
| | | |
| | | // Populate shared fields - NO prefixing! |
| | | // Populate shared fields |
| | | let sharedRow = row.querySelector('tr.shared'); |
| | | new window.jvbPopulate(sharedRow, item.fields, item.images); |
| | | new window.jvbPopulate(sharedRow, item); |
| | | this.prefixTimelineFieldNames(sharedRow, item.id); |
| | | this.cleanupTableRow(sharedRow); |
| | | |
| | | // Handle timeline points - NO prefixing! |
| | | // Handle timeline points |
| | | if (item.fields.timeline && typeof item.fields.timeline === 'object') { |
| | | const timelineArray = Object.entries(item.fields.timeline); |
| | | |
| | | timelineArray.forEach(([imgId, timeline], index) => { |
| | | |
| | | let point = timelinePoint.cloneNode(true); |
| | | point.dataset.index = index; |
| | | point.dataset.imageId = imgId; |
| | | |
| | | // NEW: Create item-like structure for timeline point |
| | | const timelineItem = { |
| | | fields: timeline, |
| | | images: item.images, |
| | | taxonomies: {} // Timeline points don't have taxonomies |
| | | }; |
| | | |
| | | new window.jvbPopulate(point, timeline, item.images); |
| | | new window.jvbPopulate(point, timelineItem); |
| | | |
| | | this.cleanupTableRow(point); |
| | | let imgdata = item.images[timeline.post_thumbnail]; |
| | |
| | | point.querySelector('.field.upload').title = imgdata['image-title']; |
| | | } |
| | | |
| | | this.prefixTimelineFieldNames(point,timeline.id); |
| | | this.prefixTimelineFieldNames(point, timeline.id); |
| | | |
| | | tbody.insertBefore(point, timelinePoint); |
| | | }); |