Merge pull request #13 from adobecom/update-venue-info-block

Venue Info Component update
adobecom · May 20, 2024 · ba1b2df · ba1b2df
2 parents 893bb16 + 0fcc5e5
commit ba1b2df
Show file tree

Hide file tree

Showing 3 changed files with 18 additions and 71 deletions.
diff --git a/blocks/form-handler/controllers/venue-info-component-controller.js b/blocks/form-handler/controllers/venue-info-component-controller.js
@@ -1,10 +1,3 @@
-import makeFileInputDropZone from './share-controller.js';
-
-function initVenueImageInput(component) {
-  const wrapper = component.querySelector('.img-file-input-wrapper');
-  makeFileInputDropZone(wrapper);
-}
-
 function loadGoogleMapsAPI(callback) {
   const script = document.createElement('script');
   script.src = 'https://maps.googleapis.com/maps/api/js?key=AIzaSyBStUMRpmG-vchdbtciHmqdQhzvLXmgQyI&libraries=places&callback=onGoogleMapsApiLoaded';
@@ -87,7 +80,6 @@ function initAutocomplete(el) {
 }
 
 export default function init(component) {
-  initVenueImageInput(component);
   loadGoogleMapsAPI(() => initAutocomplete(component));
 }
 

diff --git a/blocks/venue-info-component/venue-info-component.css b/blocks/venue-info-component/venue-info-component.css
@@ -56,8 +56,8 @@
 }
 
 .venue-info-component .venue-info-addition-wrapper {
-  display: grid;
-  grid-template-columns: 1fr 1fr;
+  display: flex;
+  justify-content: flex-end;
 }
 
 .venue-info-component .venue-info-addition-wrapper .venue-info-addition {

diff --git a/blocks/venue-info-component/venue-info-component.js b/blocks/venue-info-component/venue-info-component.js
@@ -1,5 +1,5 @@
 import { getLibs } from '../../scripts/utils.js';
-import { getIcon, generateToolTip } from '../../utils/utils.js';
+import { generateToolTip } from '../../utils/utils.js';
 
 const { createTag } = await import(`${getLibs()}/utils/utils.js`);
 
@@ -34,68 +34,22 @@ function decorateSWCTextField(row, extraOptions) {
 }
 
 function buildAdditionalInfo(row) {
-  function decorateImageDropzones(col) {
-    col.classList.add('image-dropzone');
-    const paragraphs = col.querySelectorAll(':scope > p');
-    const fileInput = createTag('input', {
-      id: 'venue-image',
-      type: 'file',
-      class: 'img-file-input',
-    });
-    const inputWrapper = createTag('div', { class: 'img-file-input-wrapper' });
-    const inputLabel = createTag('label', { class: 'img-file-input-label' });
-
-    const previewWrapper = createTag('div', { class: 'preview-wrapper hidden' });
-    const previewImg = createTag('div', { class: 'preview-img-placeholder' });
-    const previewDeleteButton = getIcon('delete');
-
-    previewWrapper.append(previewImg, previewDeleteButton);
-
-    inputWrapper.append(previewWrapper, inputLabel);
-    inputLabel.append(fileInput, getIcon('image-add'));
-    paragraphs.forEach((p) => {
-      inputLabel.append(p);
-    });
-
-    col.innerHTML = '';
-    col.append(inputWrapper);
-  }
+  row.classList.add('venue-info-addition');
+  const fieldSet = createTag('fieldset', { class: 'checkboxes' });
+  const [inputLabel, comment] = [...row.querySelectorAll(':scope  p')];
+  const labelText = inputLabel.textContent.trim();
 
-  function decorateVenueInfoVisible(col) {
-    const fieldSet = createTag('fieldset', { class: 'checkboxes' });
-    col.classList.add('venue-info-addition');
-    const [inputLabel, comment] = [...col.querySelectorAll(':scope > p')];
-    const cn = inputLabel.textContent.trim();
-
-    const handle = 'venue-info-visible';
-    const input = createTag('input', {
-      id: `checkbox-${handle}`,
-      name: `checkbox-${handle}`,
-      type: 'checkbox',
-      class: 'checkbox-input',
-      value: handle,
-    });
-    const label = createTag(
-      'label',
-      { class: 'checkbox-label', for: `checkbox-${handle}` },
-      cn,
-    );
-    const wrapper = createTag('div', { class: 'checkbox-wrapper' });
-
-    wrapper.append(input, label);
-    fieldSet.append(wrapper);
-
-    const additionComment = createTag('div', { class: 'addition-comment' });
-    additionComment.append(comment.textContent.trim());
-    col.innerHTML = '';
-    fieldSet.append(additionComment);
-    col.append(fieldSet);
-  }
+  const checkbox = createTag('sp-checkbox', { id: 'checkbox-venue-info-visible' }, labelText);
+  const wrapper = createTag('div', { class: 'checkbox-wrapper' });
 
-  row.classList.add('img-upload-component');
-  const [imageUploader, venueVisible] = row.querySelectorAll(':scope > div');
-  decorateImageDropzones(imageUploader);
-  decorateVenueInfoVisible(venueVisible);
+  wrapper.append(checkbox);
+  fieldSet.append(wrapper);
+
+  const additionComment = createTag('div', { class: 'addition-comment' });
+  additionComment.append(comment.textContent.trim());
+  row.innerHTML = '';
+  fieldSet.append(additionComment);
+  row.append(fieldSet);
   row.classList.add('venue-info-addition-wrapper');
 }
 
@@ -171,6 +125,7 @@ export default function init(el) {
   Promise.all([
     import(`${miloLibs}/deps/lit-all.min.js`),
     import(`${miloLibs}/features/spectrum-web-components/dist/textfield.js`),
+    import(`${miloLibs}/features/spectrum-web-components/dist/checkbox.js`),
   ]);
 
   const rows = el.querySelectorAll(':scope > div');