diff --git a/blocks/event-agenda-component/event-agenda-component.css b/blocks/event-agenda-component/event-agenda-component.css new file mode 100644 index 00000000..6ef463f8 --- /dev/null +++ b/blocks/event-agenda-component/event-agenda-component.css @@ -0,0 +1,87 @@ +.event-agenda-component .field-container { + display: flex; + align-items: center; + justify-content: space-between; + gap: 35px; + } + + + .event-agenda-component .text-field-row .time-pickers { + display: flex; + align-items: center; + gap: 16px; + padding-bottom: 13px; + } + + + .event-agenda-component .text-field-row .time-pickers > p { + font-size: var(--type-heading-m-size); + font-weight: 700; + } + + + .event-agenda-component .text-field-row .time-pickers .time-picker-wrapper { + flex: 1; + min-width: 150px; + } + + + + + .event-agenda-component .text-field-row .time-pickers .time-picker-wrapper select { + border-radius: 4px; + padding: 4px; + height: 40px; + width: 100%; + border: 1px solid var(--color-gray-500); + font-size: var(--type-body-xs-size); + } + + + .event-agenda-component .text-field-wrapper { + display: flex; + flex-direction: column; + width: 100%; + } + + + .event-agenda-component .text-field-wrapper sp-textfield { + width: 100%; + margin-bottom: 0px; + } + + + .event-agenda-component .text-field-wrapper .attr-text { + font-size: var(--type-body-xs-size); + color: var(--color-secondary); + text-align: right; + } + + + + + .event-agenda-component .checkbox-wrapper { + display: flex; + justify-content: flex-end; + margin-top: 12px; + } + + + .event-agenda-component .checkbox-input { + margin-right: 8px; + } + + + .event-agenda-component .checkbox-label { + font-size: var(--type-body-xs-size); + font-weight: normal; + } + + + /* .event-agenda-component .field-container { + align-items: flex-start; + } + */ + + + \ No newline at end of file diff --git a/blocks/event-agenda-component/event-agenda-component.js b/blocks/event-agenda-component/event-agenda-component.js new file mode 100644 index 00000000..dd061bf7 --- /dev/null +++ b/blocks/event-agenda-component/event-agenda-component.js @@ -0,0 +1,127 @@ +import { getLibs } from '../../scripts/utils.js'; +import { getIcon, handlize, generateToolTip } from '../../utils/utils.js'; + +const { createTag } = await import(`${getLibs()}/utils/utils.js`); + +async function decorateField(row, type = 'text') { + const miloLibs = getLibs(); + await Promise.all([ + import(`${miloLibs}/deps/lit-all.min.js`), + import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`), + ]); + + row.classList.add('text-field-row'); + const cols = row.querySelectorAll(':scope > div'); + if (!cols.length) return; + const [placeholderCol, maxLengthCol] = cols; + const text = placeholderCol.textContent.trim(); + const attrTextEl = createTag('div', { class: 'attr-text' }, maxLengthCol.textContent.trim()); + + const maxCharNum = maxLengthCol.querySelector('strong')?.textContent.trim(); + const isRequired = attrTextEl.textContent.trim().endsWith('*'); + let input; + if (type === 'text') { + input = createTag('sp-textfield', { + id: `agenda-field-${handlize(text)}`, + class: 'text-input', + placeholder: text, + required: isRequired, + quiet: true, + size: 'xl', + }); + } + if (maxCharNum) { + input.setAttribute('maxlength', maxCharNum); + } + const wrapper = createTag('div', { class: 'field-container'}); + const textWrapper = createTag('div', { class: 'text-field-wrapper' }); + textWrapper.append(input, attrTextEl) + row.innerHTML = ''; + wrapper.append(cols[2], textWrapper) + row.append(wrapper); + + const timePickerContainer = createTag('div'); + timePickerContainer.classList.add('custom-time-picker'); + + buildTimePicker(cols[2]); + + return row; +} + +function buildTimePicker(column) { + column.classList.add('time-pickers'); + const header = column.querySelector(':scope > p'); + const rows = column.querySelectorAll('table tr'); + const timePickerWrappers = []; + + rows.forEach((r) => { + const timePickerWrapper = createTag('div', { class: 'time-picker-wrapper' }); + const cols = r.querySelectorAll('td'); + let pickerName; + cols.forEach((c, j) => { + if (j === 0) { + pickerName = "Time"; + console.log(pickerName) + } + + if (j === 0) { + const timeSlots = c.querySelectorAll('li'); + const select = createTag('select', { id: `time-picker-${handlize(pickerName)}`, class: 'select-input' }); + timeSlots.forEach((t) => { + const text = t.textContent.trim(); + const option = createTag('option', { value: handlize(text) }, text); + select.append(option); + }); + timePickerWrapper.append(select); + } + }); + + timePickerWrappers.push(timePickerWrapper); + }); + + column.innerHTML = ''; + if (header) column.append(header); + column.prepend(getIcon('clock')) + timePickerWrappers.forEach((w) => { column.append(w); }); +} + +async function decorateCheckBox(row) { + const fieldSet = createTag('fieldset', { class: 'checkboxes' }); + row.classList.add('agenda-info-addition'); + const checkBoxRow = [...row.querySelectorAll(':scope > div')]; + const cn = checkBoxRow[2].textContent.trim(); + row.innerHTML = ''; + + + // Create checkbox input + const checkbox = createTag('input', { + type: 'checkbox', + id: `checkbox-${handlize(cn)}`, + name: `checkbox-${handlize(cn)}`, + class: 'checkbox-input', + value: cn + }); + + const label = createTag('label', { + for: checkbox.id, + class: 'checkbox-label' + }, cn); + + const wrapper = createTag('div', { class: 'checkbox-wrapper' }); + wrapper.append(checkbox, label); + + fieldSet.append(wrapper); + row.append(fieldSet); +} + + + + +export default async function init(el) { + el.classList.add('form-component'); + generateToolTip(el); + const rows = [...el.querySelectorAll(':scope > div')]; + decorateField(rows[1], 'text'); + decorateCheckBox(rows[3]); + +} diff --git a/blocks/form-handler/controllers/event-agenda-component-controller.js b/blocks/form-handler/controllers/event-agenda-component-controller.js new file mode 100644 index 00000000..ed18388e --- /dev/null +++ b/blocks/form-handler/controllers/event-agenda-component-controller.js @@ -0,0 +1,21 @@ +export function onSubmit(component, inputMap) { + //Todo agenda details + const agendaDetails = component.querySelector('#textfield > input'); + const time = component.querySelector('#time-picker-time').value; + const agendaInfoVisible = component.querySelector('#checkbox-agenda-info-will-appear-post-event').checked; + + + + + const eventInfo = { + ...getMappedInputsOutput(component, inputMap), + agendaInfoVisible, + 'Time': time, + }; + + + return eventInfo; + } + + + \ No newline at end of file diff --git a/icons/clock.svg b/icons/clock.svg new file mode 100644 index 00000000..8656db50 --- /dev/null +++ b/icons/clock.svg @@ -0,0 +1,12 @@ + + + + + S Clock 18 N + + +