event-info duplication prevention added

adobecom · Aug 31, 2024 · 0385643 · 0385643
1 parent e1442b3
commit 0385643
Show file tree

Hide file tree

Showing 5 changed files with 44 additions and 5 deletions.
diff --git a/ecc/blocks/event-info-component/event-info-component.css b/ecc/blocks/event-info-component/event-info-component.css
@@ -11,6 +11,15 @@
   width: 100%;
 }
 
+.event-info-component sp-textfield#info-field-event-title sp-help-text {
+  position: absolute;
+  display: none;
+}
+
+.event-info-component sp-textfield#info-field-event-title.show-negative-help-text sp-help-text {
+  display: flex;
+}
+
 .event-info-component sp-textfield.textarea-input {
   font-size: var(--type-body-m-size);;
   width: 100%;

diff --git a/ecc/blocks/event-info-component/event-info-component.js b/ecc/blocks/event-info-component/event-info-component.js
@@ -94,7 +94,7 @@ export default function init(el) {
         generateToolTip(r);
         break;
       case 1:
-        await decorateTextfield(r, { id: 'info-field-event-title' });
+        await decorateTextfield(r, { id: 'info-field-event-title' }, 'This event title is already taken');
         break;
       case 2:
         await decorateTextarea(r, { id: 'info-field-event-description', grows: true, quiet: true });

diff --git a/ecc/blocks/form-handler/controllers/event-format-component-controller.js b/ecc/blocks/form-handler/controllers/event-format-component-controller.js
@@ -67,7 +67,7 @@ export async function onUpdate(component, props) {
   }
 }
 
-async function populateSeriesOptions(component) {
+async function populateSeriesOptions(props, component) {
   const seriesSelect = component.querySelector('#series-select-input');
   if (!seriesSelect) return;
 
@@ -84,6 +84,11 @@ async function populateSeriesOptions(component) {
   });
 
   seriesSelect.pending = false;
+
+  seriesSelect.addEventListener('change', () => {
+    const seriesId = seriesSelect.value;
+    props.payload = { ...props.payload, ...{ seriesId } };
+  });
 }
 
 export default async function init(component, props) {
@@ -104,7 +109,7 @@ export default async function init(component, props) {
   const eventData = props.eventDataResp;
   prepopulateTimeZone(component);
   initStepLock(component);
-  await populateSeriesOptions(component);
+  await populateSeriesOptions(props, component);
 
   const {
     cloudType,

diff --git a/ecc/blocks/form-handler/controllers/event-info-component-controller.js b/ecc/blocks/form-handler/controllers/event-info-component-controller.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable no-use-before-define */
+import { getEvents } from '../../../scripts/esp-controller.js';
 import { LIBS } from '../../../scripts/scripts.js';
 import { changeInputValue } from '../../../scripts/utils.js';
 
@@ -345,14 +346,34 @@ export async function onUpdate(component, props) {
   // do nothing
 }
 
-export default function init(component, props) {
+export default async function init(component, props) {
+  const allEventsResp = await getEvents();
+  const allEvents = allEventsResp?.events;
   const eventData = props.eventDataResp;
+
+  const eventTitleInput = component.querySelector('#info-field-event-title');
   const startTimeInput = component.querySelector('#time-picker-start-time');
   const endTimeInput = component.querySelector('#time-picker-end-time');
   const datePicker = component.querySelector('#event-info-date-picker');
 
   initCalendar(component);
 
+  eventTitleInput.addEventListener('change', () => {
+    const sameSeriesEvents = allEvents?.filter((e) => {
+      const matchInPayload = e.seriesId === props.payload.seriesId;
+      const matchInResp = e.seriesId === eventData.seriesId;
+      return matchInPayload || matchInResp;
+    }) || [];
+
+    if (sameSeriesEvents.some((event) => event.title === eventTitleInput.value)) {
+      eventTitleInput.classList.add('show-negative-help-text');
+      eventTitleInput.invalid = true;
+    } else {
+      eventTitleInput.classList.remove('show-negative-help-text');
+      eventTitleInput.invalid = false;
+    }
+  });
+
   endTimeInput.addEventListener('change', () => {
     if (datePicker.dataset.startDate !== datePicker.dataset.endDate) return;
     const allOptions = startTimeInput.querySelectorAll('sp-menu-item');

diff --git a/ecc/scripts/utils.js b/ecc/scripts/utils.js
@@ -125,7 +125,7 @@ function mergeOptions(defaultOptions, overrideOptions) {
   return combinedOptions;
 }
 
-export async function decorateTextfield(cell, extraOptions) {
+export async function decorateTextfield(cell, extraOptions, negativeHelperText = '') {
   cell.classList.add('text-field-row');
   const cols = cell.querySelectorAll(':scope > div');
   if (!cols.length) return;
@@ -153,6 +153,10 @@ export async function decorateTextfield(cell, extraOptions) {
     extraOptions,
   ));
 
+  if (negativeHelperText) {
+    createTag('sp-help-text', { variant: 'negative', slot: 'negative-help-text', icon: true }, negativeHelperText, { parent: input });
+  }
+
   if (maxCharNum) input.setAttribute('maxlength', maxCharNum);
 
   const wrapper = createTag('div', { class: 'info-field-wrapper' });