| | |
| | | setup({ el, refs, manyRefs, data }) { |
| | | baseSetup(el, refs, data); |
| | | |
| | | manyRefs?.inputs?.forEach(el => { |
| | | let wrapper = el.closest('[data-field]'); |
| | | window.prefixInput(el, `${data.id}-`, wrapper); |
| | | }); |
| | | data.prefix = `${data.id}-`; |
| | | |
| | | manyRefs?.status?.forEach(el => { |
| | | if (el.value === data.status) { |
| | | el.checked = true; |
| | | } |
| | | }); |
| | | window.jvbPopulate.populate(el, data); |
| | | |
| | | // |
| | | // manyRefs?.status?.forEach(el => { |
| | | // if (el.value === data.status) { |
| | | // el.checked = true; |
| | | // } |
| | | // }); |
| | | // |
| | | if (crud.isTimeline) { |
| | | if (refs.sharedRow) { |
| | | refs.sharedRow.querySelectorAll('input,select,textarea').forEach(input => { |
| | |
| | | month: 'dialog.date-range .month-select', |
| | | } |
| | | }, |
| | | wrap: '#item-wrap', |
| | | grid: `.${this.content}.item-grid`, |
| | | table: { |
| | | nav: '#vertical', |
| | | form: 'form.table', |
| | | table: 'form.table table', |
| | | body: 'form.table body', |
| | | body: 'form.table tbody', |
| | | head: 'form.table thead', |
| | | foot: 'form.table tfoot', |
| | | selectedColumns: '.all-filters .multi-select', |
| | | columns: 'thead th', |
| | | }, |
| | | bulk: { |
| | | hasEdit: '.bulk-action-select [value="edit"]', |
| | | action: '.bulk-action-select', |
| | | count: '.bulk-controls .selected-count', |
| | | control: '.bulk-controls .bulk-actions', |
| | |
| | | }, |
| | | date: '[data-filter="date"]' |
| | | }, |
| | | uploader: 'details.uploader' |
| | | uploader: { |
| | | details: 'details.uploader', |
| | | form: 'details.uploader form', |
| | | uploader: 'details.uploader [data-field-type="upload"]' |
| | | } |
| | | } |
| | | |
| | | this.ui = window.uiFromSelectors(this.selectors); |
| | |
| | | this.isTimeline = !!document.querySelector('[data-timeline]'); |
| | | } |
| | | initUploader() { |
| | | if (!this.ui.uploader) return; |
| | | if (!this.ui.uploader.form) return; |
| | | this.uploadForm = this.forms.registerForm(this.ui.uploader.form).id??false; |
| | | |
| | | window.jvbUploads.scanFields(this.ui.uploader); |
| | | // window.jvbUploads.scanFields(this.ui.uploader); |
| | | window.jvbUploads.subscribe((event, data) => { |
| | | if (event === 'sent-to-queue') { |
| | | if (data === this.ui.uploader.dataset.uploader) { |
| | | if (data.field.id === this.ui.uploader.uploader.dataset.uploader) { |
| | | if (this.uploadForm ) { |
| | | this.forms.store.delete(this.uploadForm); |
| | | } |
| | | |
| | | window.debouncer.schedule('crud-complete', ()=> { |
| | | this.store.clearCache(); |
| | | }); |
| | |
| | | span: '.bulk-select label span' |
| | | }, |
| | | wrapper: { |
| | | wrapper: '.wrap' |
| | | wrapper: this.selectors.wrap, |
| | | }, |
| | | item: { |
| | | idAttribute: 'itemId' |
| | | } |
| | | }); |
| | | }, this.ui.views.table !== null); |
| | | this.selectionHandler.subscribe((event, data) => { |
| | | this.selected = new Set([...data.selectedItems].map(id => parseInt(id))); |
| | | this.ui.bulk.control.hidden = this.selected.size === 0; |
| | |
| | | console.log('Handling group mapping from queue response'); |
| | | this.handleGroupMappings(data.result.group_mappings); |
| | | } |
| | | |
| | | this.store.clearCache(); |
| | | } |
| | | |
| | |
| | | } |
| | | } |
| | | |
| | | if (event === 'sent-to-server') { |
| | | console.log('Sent to server in CRUD.js with data: ', data); |
| | | if (event === 'sent-to-server' && data.type === 'content_update') { |
| | | if (data instanceof FormData) return; |
| | | |
| | | for ( let [id, changes] of Object.entries(data.posts)) { |
| | | this.compareStored(id, changes); |
| | | } |
| | |
| | | //current view (defaults to grid) |
| | | let defaultView = this.container.dataset.view??'grid' |
| | | this.view = this.cache.get('view')??defaultView; |
| | | |
| | | if (!this.view) { |
| | | this.view = defaultView; |
| | | } |
| | | if (this.view !== defaultView) { |
| | | this.ui.views[this.view].checked = true; |
| | | } |
| | |
| | | if (this.ui.table.nav && tabDirection === 'vertical') { |
| | | this.ui.table.nav.checked = true; |
| | | } |
| | | this.tabNav = tabDirection !== 'horizontal'; |
| | | |
| | | |
| | | |
| | |
| | | default: 'closed', |
| | | }, |
| | | showUploader: { |
| | | element: this.ui.uploader, |
| | | element: this.ui.uploader.details, |
| | | default: 'open' |
| | | } |
| | | }; |
| | |
| | | const isBulkAction = e.target.matches('.bulk-action-select'); |
| | | const isView = e.target.matches('[data-view]'); |
| | | |
| | | if (this.view === 'table') { |
| | | this.handleTableChange(e); |
| | | } |
| | | if (!inItem && !isFilter && !isBulkAction && !isView) return; |
| | | |
| | | if (!this.isPopulating && inItem && !e.target.closest('[data-ignore], .select-item')) { |
| | |
| | | return; |
| | | } |
| | | |
| | | // Table-specific handlers |
| | | if (this.view === 'table') { |
| | | if (e.target.matches('details.multi-select')) { |
| | | this.toggleColumn(e.target.id, e.target.checked); |
| | | return; |
| | | } |
| | | } |
| | | handleTableChange(e) { |
| | | // Table-specific handlers |
| | | if (this.view === 'table') { |
| | | if (e.target.matches('details.multi-select')) { |
| | | this.toggleColumn(e.target.id, e.target.checked); |
| | | return; |
| | | } |
| | | |
| | | if (e.target.matches(this.selectors.table.nav)) { |
| | | this.tabNav = e.target.checked; |
| | | this.cache.set('tabNav', e.target.checked ? 'vertical' : 'horizontal'); |
| | | if (e.target.matches(this.selectors.table.nav)) { |
| | | this.tabNav = e.target.checked; |
| | | this.cache.set('tabNav', e.target.checked ? 'vertical' : 'horizontal'); |
| | | } |
| | | } |
| | | } |
| | | } |
| | | handleBulkAction(bulkAction) { |
| | | if (bulkAction.value.startsWith('tax-')) { |
| | | const selectedOption = bulkAction.options[bulkAction.selectedIndex]; |
| | |
| | | value = this.forms.getFieldValue(e.target); |
| | | } |
| | | |
| | | console.log('Name: ', name); |
| | | console.log('Value: ', value); |
| | | |
| | | item.dataset.itemId.split(',').forEach(itemId => { |
| | | this.updateItem(itemId, name, value); |
| | | }); |
| | |
| | | // For regular tables, use all rows in tbody |
| | | if (!this.ui.table.body) return null; |
| | | |
| | | const rows = Array.from(this.ui.table.body.querySelectorAll('tr')) |
| | | const rows = Array.from(this.ui.table.body.children) |
| | | .filter(row => this.isEditableRow(row)); |
| | | |
| | | return goBackward ? rows[rows.length - 1] : rows[0]; |
| | |
| | | this.ui.modals.edit.form.dataset.formId = `edit-${itemID}`; |
| | | |
| | | |
| | | this.isPopulating = true; |
| | | |
| | | this.modals.edit.handleOpen(); |
| | | this.forms.registerForm(this.ui.modals.edit.form, {cache: false, |
| | | autoUpload: true,}); |
| | | |
| | | |
| | | this.isPopulating = true; |
| | | this.populate.populate(this.ui.modals.edit.form, item); |
| | | //For quill/taxonomy selector's async setups |
| | | requestAnimationFrame(() => { |
| | | requestAnimationFrame(() => { |
| | | this.isPopulating = false; |
| | | setTimeout(() => { |
| | | this.isPopulating = false; |
| | | }, 50); |
| | | }); |
| | | }); |
| | | |
| | |
| | | let operation = { |
| | | endpoint: this.endpoint, |
| | | headers: { |
| | | 'X-WP-Nonce': window.auth.getNonce(), |
| | | 'X-Action-Nonce': window.auth.getNonce('dash'), |
| | | }, |
| | | data: { |
| | |
| | | |
| | | if (on && !this.ui.table.form) { |
| | | let table = window.jvbTemplates.create('contentTable'); |
| | | this.container.append(table); |
| | | this.ui.wrap.append(table); |
| | | this.ui.table = window.uiFromSelectors(this.selectors.table); |
| | | this.ui.table.columns = this.container.querySelectorAll(this.selectors.table.columns); |
| | | } |
| | |
| | | this.toggleTable(); |
| | | window.removeChildren(this.ui.grid); |
| | | |
| | | |
| | | await window.chunkIt( |
| | | items, |
| | | (item) => this.renderTableItem(item), |
| | | (fragment) => { |
| | | if (this.ui.table.body) { |
| | | this.ui.table.body.append(fragment); |
| | | } else { |
| | | this.ui.table.table.insertBefore(fragment, this.ui.table.foot); |
| | | } |
| | | this.ui.table.body.append(fragment); |
| | | }, |
| | | 5 |
| | | ); |
| | |
| | | CLEANUP |
| | | ***************************************************************/ |
| | | resetForm(form) { |
| | | // Clear text inputs, textareas |
| | | form.querySelectorAll('input[type="hidden"], input[type="text"], input[type="number"], input[type="email"], input[type="url"], textarea').forEach(input => { |
| | | input.value = ''; |
| | | }); |
| | | |
| | | // Uncheck checkboxes and radios |
| | | form.querySelectorAll('input[type="checkbox"], input[type="radio"]').forEach(input => { |
| | | input.checked = false; |
| | | }); |
| | | |
| | | // Reset selects to first option |
| | | form.querySelectorAll('select').forEach(select => { |
| | | select.selectedIndex = 0; |
| | | }); |
| | | form.reset(); |
| | | |
| | | // Clear any selected items displays |
| | | form.querySelectorAll('.selected-items').forEach(container => { |