domma-cms 0.54.2 → 0.66.0

package/plugins/contacts/admin/views/contacts.js

@@ -21,6 +21,69 @@ async function api(url, method = 'GET', body) {
     return text ? JSON.parse(text) : {};
 }
 
+/**
+ * The billing fields, as a map of contact key to the input that edits it.
+ *
+ * One list rather than a load/save pair spelled out twice - the way a field
+ * gets added to the form and quietly never saved.
+ */
+const BILLING_FIELDS = {
+    company:       '#contact-company',
+    jobTitle:      '#contact-job-title',
+    website:       '#contact-website',
+    billingEmail:  '#contact-billing-email',
+    vatNumber:     '#contact-vat-number',
+    companyNumber: '#contact-company-number',
+    reference:     '#contact-reference',
+    paymentTerms:  '#contact-payment-terms',
+    currency:      '#contact-currency',
+    accountName:   '#contact-account-name',
+    bankName:      '#contact-bank-name',
+    sortCode:      '#contact-sort-code',
+    accountNumber: '#contact-account-number',
+    iban:          '#contact-iban',
+    bic:           '#contact-bic'
+};
+
+/**
+ * The repeatable lists, and the columns each row is made of.
+ *
+ * `wide` gets a full-width input; `check` is the single radio-ish flag that
+ * says which address an invoice should use.
+ */
+const REPEATERS = {
+    addresses: {
+        listId: 'addresses-list',
+        emptyId: 'addresses-empty',
+        columns: [
+            {key: 'label',    placeholder: 'Label (Office, Home…)'},
+            {key: 'line1',    placeholder: 'Address line 1', wide: true},
+            {key: 'line2',    placeholder: 'Address line 2', wide: true},
+            {key: 'city',     placeholder: 'City'},
+            {key: 'region',   placeholder: 'County / Region'},
+            {key: 'postcode', placeholder: 'Postcode'},
+            {key: 'country',  placeholder: 'Country'},
+            {key: 'isBilling', label: 'Use for invoices', check: true}
+        ]
+    },
+    emails: {
+        listId: 'emails-list',
+        emptyId: 'emails-empty',
+        columns: [
+            {key: 'label',   placeholder: 'Label (Accounts, Personal…)'},
+            {key: 'address', placeholder: 'name@example.com', wide: true}
+        ]
+    },
+    phones: {
+        listId: 'phones-list',
+        emptyId: 'phones-empty',
+        columns: [
+            {key: 'label',  placeholder: 'Label (Mobile, Office…)'},
+            {key: 'number', placeholder: '+44 …', wide: true}
+        ]
+    }
+};
+
 export const contactsView = {
     templateUrl: '/plugins/contacts/admin/templates/contacts.html',
 
@@ -239,6 +302,141 @@ export const contactsView = {
         // Editor
         // ---------------------------------------------------------------
 
+        /**
+         * Draw one repeatable list.
+         *
+         * Built with DOM APIs rather than innerHTML because these rows carry
+         * inputs, and Domma's .html() sanitises interactive elements away.
+         *
+         * @param {string}   field  addresses | emails | phones
+         * @param {object[]} rows
+         */
+        function renderRepeater(field, rows) {
+            const spec = REPEATERS[field];
+            const listEl = $container.find('#' + spec.listId).get(0);
+            const emptyEl = $container.find('#' + spec.emptyId).get(0);
+            if (!listEl) return;
+
+            while (listEl.firstChild) listEl.removeChild(listEl.firstChild);
+            if (emptyEl) emptyEl.style.display = rows.length ? 'none' : '';
+
+            rows.forEach((row, index) => {
+                const rowEl = document.createElement('div');
+                rowEl.className = 'contacts-row';
+                rowEl.dataset.index = String(index);
+
+                for (const col of spec.columns) {
+                    if (col.check) {
+                        const wrap = document.createElement('label');
+                        wrap.className = 'form-check contacts-row-check';
+                        const box = document.createElement('input');
+                        box.type = 'checkbox';
+                        box.className = 'form-check-input';
+                        box.dataset.key = col.key;
+                        box.checked = row[col.key] === true;
+                        // Only one address can be the billing one.
+                        box.addEventListener('change', () => {
+                            if (!box.checked) return;
+                            listEl.querySelectorAll(`input[data-key="${col.key}"]`).forEach((other) => {
+                                if (other !== box) other.checked = false;
+                            });
+                        });
+                        const text = document.createElement('span');
+                        text.className = 'form-check-label';
+                        text.textContent = col.label;
+                        wrap.appendChild(box);
+                        wrap.appendChild(text);
+                        rowEl.appendChild(wrap);
+                        continue;
+                    }
+
+                    const input = document.createElement('input');
+                    input.type = 'text';
+                    input.className = 'form-input' + (col.wide ? ' contacts-row-wide' : '');
+                    input.dataset.key = col.key;
+                    input.placeholder = col.placeholder ?? '';
+                    input.value = row[col.key] ?? '';
+                    rowEl.appendChild(input);
+                }
+
+                const remove = document.createElement('button');
+                remove.type = 'button';
+                remove.className = 'btn btn-sm btn-ghost contacts-row-remove';
+                remove.title = 'Remove';
+                remove.textContent = '\u00d7';
+                remove.addEventListener('click', () => {
+                    const next = readRepeater(field);
+                    next.splice(index, 1);
+                    renderRepeater(field, next);
+                    updateBillingSummary();
+                });
+                rowEl.appendChild(remove);
+
+                listEl.appendChild(rowEl);
+            });
+        }
+
+        /**
+         * Read a repeatable list back out of the DOM.
+         *
+         * @param   {string} field
+         * @returns {object[]}
+         */
+        function readRepeater(field) {
+            const spec = REPEATERS[field];
+            const listEl = $container.find('#' + spec.listId).get(0);
+            if (!listEl) return [];
+
+            return [...listEl.querySelectorAll('.contacts-row')].map((rowEl) => {
+                const row = {};
+                for (const col of spec.columns) {
+                    const el = rowEl.querySelector(`[data-key="${col.key}"]`);
+                    row[col.key] = col.check ? el?.checked === true : (el?.value ?? '').trim();
+                }
+                return row;
+            }).filter((row) => Object.entries(row).some(([k, v]) => k !== 'label' && v !== '' && v !== false));
+        }
+
+        /** A one-line "what is in here" for the folded billing section. */
+        function updateBillingSummary() {
+            const el = $container.find('#billing-summary').get(0);
+            if (!el) return;
+            const bits = [];
+            const company = $container.find('#contact-company').get(0)?.value?.trim();
+            if (company) bits.push(company);
+            const addresses = readRepeater('addresses').length;
+            if (addresses) bits.push(`${addresses} address${addresses === 1 ? '' : 'es'}`);
+            const extras = readRepeater('emails').length + readRepeater('phones').length;
+            if (extras) bits.push(`${extras} more contact${extras === 1 ? '' : 's'}`);
+            if ($container.find('#contact-sort-code').get(0)?.value?.trim()
+                || $container.find('#contact-iban').get(0)?.value?.trim()) bits.push('bank details');
+            el.textContent = bits.length ? bits.join(' \u00b7 ') : '';
+        }
+
+        /** Fill the billing inputs from a contact, or clear them for a new one. */
+        function loadBilling(contact) {
+            for (const [key, sel] of Object.entries(BILLING_FIELDS)) {
+                const el = $container.find(sel).get(0);
+                if (!el) continue;
+                const value = contact?.[key];
+                el.value = value === null || value === undefined ? '' : String(value);
+            }
+            for (const field of Object.keys(REPEATERS)) {
+                renderRepeater(field, Array.isArray(contact?.[field]) ? contact[field] : []);
+            }
+            updateBillingSummary();
+        }
+
+        /** Read the billing inputs back into the body a save posts. */
+        function readBilling() {
+            const body = {};
+            for (const [key, sel] of Object.entries(BILLING_FIELDS)) {
+                body[key] = ($container.find(sel).get(0)?.value ?? '').trim();
+            }
+            for (const field of Object.keys(REPEATERS)) body[field] = readRepeater(field);
+            return body;
+        }
+
         function openEditor(id) {
             currentEditId = id ?? null;
             selectedGroups = [];
@@ -269,6 +467,7 @@ export const contactsView = {
                 if (notesEl) notesEl.value = c.notes ?? '';
                 if (favEl) favEl.checked = c.favourite === true;
                 selectedGroups = Array.isArray(c.groups) ? [...c.groups] : [];
+                loadBilling(c);
             } else {
                 if (titleEl) titleEl.textContent = 'Add Contact';
                 if (saveLbl) saveLbl.textContent = 'Save Contact';
@@ -284,6 +483,7 @@ export const contactsView = {
                 if (notesEl) notesEl.value = '';
                 if (favEl) favEl.checked = false;
                 selectedGroups = [];
+                loadBilling(null);
             }
 
             updateGroupsDisplay();
@@ -337,7 +537,8 @@ export const contactsView = {
                 phone: ($container.find('#contact-phone').get(0)?.value ?? '').trim(),
                 notes: ($container.find('#contact-notes').get(0)?.value ?? '').trim(),
                 favourite: $container.find('#contact-favourite').get(0)?.checked === true,
-                groups: selectedGroups
+                groups: selectedGroups,
+                ...readBilling()
             };
 
             try {
@@ -562,6 +763,36 @@ export const contactsView = {
         const addBtn = $container.find('#add-contact-btn').get(0);
         if (addBtn) addBtn.addEventListener('click', () => openEditor(null));
 
+        // Billing section: fold, unfold, and the three Add buttons.
+        const billingToggle = $container.find('#billing-toggle').get(0);
+        const billingBody = $container.find('#billing-body').get(0);
+        if (billingToggle && billingBody) {
+            billingToggle.addEventListener('click', () => {
+                const open = billingBody.classList.toggle('is-open');
+                // The chevron is ROTATED rather than swapped for a different
+                // icon: I.scan replaces the span with a fresh <svg>, so the
+                // element you held a reference to is gone and setting
+                // data-icon on it changes nothing. A CSS transform needs no
+                // element identity at all, and animates for free.
+                billingToggle.classList.toggle('is-open', open);
+            });
+        }
+
+        for (const [field, btnId] of [['addresses', '#add-address-btn'], ['emails', '#add-email-btn'], ['phones', '#add-phone-btn']]) {
+            const btn = $container.find(btnId).get(0);
+            if (!btn) continue;
+            btn.addEventListener('click', () => {
+                renderRepeater(field, [...readRepeater(field), {}]);
+                updateBillingSummary();
+            });
+        }
+
+        // The folded summary should follow what is typed above it.
+        for (const sel of ['#contact-company', '#contact-sort-code', '#contact-iban']) {
+            const el = $container.find(sel).get(0);
+            if (el) el.addEventListener('input', updateBillingSummary);
+        }
+
         // Editor save
         const editorSaveBtn = $container.find('#editor-save-btn').get(0);
         if (editorSaveBtn) editorSaveBtn.addEventListener('click', saveContact);
@@ -673,13 +904,15 @@ export const contactsView = {
         // Groups panel collapse toggle
         const panelToggle = $container.find('#groups-panel-toggle').get(0);
         const panelBody = $container.find('#groups-panel-body').get(0);
-        const chevron = $container.find('#groups-chevron').get(0);
         if (panelToggle && panelBody) {
             panelToggle.addEventListener('click', () => {
                 const open = panelBody.style.display !== 'none';
                 panelBody.style.display = open ? 'none' : '';
-                if (chevron) chevron.setAttribute('data-icon', open ? 'chevron-down' : 'chevron-up');
-                Domma.icons.scan();
+                // Rotated, not swapped: I.scan replaces the icon span with a
+                // fresh <svg> and does not carry the id across, so the
+                // reference this held was stale after the first scan and the
+                // chevron never turned.
+                panelToggle.classList.toggle('is-open', !open);
             });
         }
 

package/plugins/contacts/collections/user-contacts/schema.json

@@ -40,6 +40,114 @@
       "type": "text",
       "required": false
     },
+    {
+      "name": "company",
+      "label": "Company",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "jobTitle",
+      "label": "Job Title",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "website",
+      "label": "Website",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "vatNumber",
+      "label": "VAT Number",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "companyNumber",
+      "label": "Company Number",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "reference",
+      "label": "Their Reference",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "billingEmail",
+      "label": "Billing Email",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "paymentTerms",
+      "label": "Payment Terms (days)",
+      "type": "number",
+      "required": false
+    },
+    {
+      "name": "currency",
+      "label": "Preferred Currency",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "addresses",
+      "label": "Addresses",
+      "type": "json",
+      "required": false
+    },
+    {
+      "name": "emails",
+      "label": "Additional Emails",
+      "type": "json",
+      "required": false
+    },
+    {
+      "name": "phones",
+      "label": "Additional Phones",
+      "type": "json",
+      "required": false
+    },
+    {
+      "name": "accountName",
+      "label": "Account Name",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "bankName",
+      "label": "Bank",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "sortCode",
+      "label": "Sort Code",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "accountNumber",
+      "label": "Account Number",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "iban",
+      "label": "IBAN",
+      "type": "text",
+      "required": false
+    },
+    {
+      "name": "bic",
+      "label": "BIC / SWIFT",
+      "type": "text",
+      "required": false
+    },
     {
       "name": "userId",
       "label": "User ID",