@brightspot/ui 3.0.1-cms-ui-migration.0 → 3.0.1-cms-ui-migration.2

package/src/legacy/tool-ui/src/main/webapp/v4/SearchFields.less

@@ -0,0 +1,403 @@
+.SearchFields {
+  font-weight: bold;
+  position: relative;
+  .Text.is-m;
+
+  .Widget-title {
+    margin-bottom: 0;
+  }
+
+  .SearchFields-heading {
+    .Text.is-s;
+
+    margin: 0;
+  }
+
+  &-tab {
+    &-ul {
+      .TabBar;
+    }
+    .TabBar-item;
+
+    &-container {
+      margin: 0 calc(0px - var(--Widget-padding));
+    }
+
+    &-button {
+      background: transparent;
+      border: none;
+      color: var(--color-gray6);
+      display: inline-block;
+      padding: 0;
+      text-decoration: none;
+    }
+  }
+
+  &-container {
+    display: flex;
+    margin-bottom: calc(0px - calc(var(--gap-l) + var(--Widget-padding)));
+    margin-top: var(--gap-m);
+    width: 100%;
+
+    .SearchFields {
+      &-divider {
+        background: var(--color-gray2);
+        height: inherit;
+        width: 1px;
+      }
+
+      &-hide,
+      &-displayContainer {
+        flex-grow: inherit;
+        width: 50%;
+
+        .RCIG-list {
+          height: inherit;
+          padding-bottom: var(--Icon-size);
+          padding-top: var(--gap-m);
+
+          .RCIG-item {
+            align-items: center;
+            background: none;
+            border: none;
+            border-bottom: 1px solid var(--color-gray3);
+            display: flex;
+            position: inherit;
+
+            &::before {
+              box-shadow: none;
+            }
+
+            .SearchFields-sort-item-label {
+              align-items: center;
+              display: flex;
+              padding: var(--gap-s) 0;
+              width: calc(100% - var(--Icon-size));
+
+              &:hover {
+                cursor: pointer;
+              }
+            }
+
+            .SearchFields-input {
+              .IconButton;
+
+              flex-shrink: 0;
+              height: calc(var(--gap-s) * 2 + var(--Icon-size)) !important;
+              width: calc(var(--gap-s) * 2 + var(--Icon-size)) !important;
+              z-index: 1;
+
+              &::before {
+                border: 0;
+                color: var(--color-gray5);
+                left: 50%;
+                padding: 0;
+                top: 50%;
+                transform: translate(-50%, -50%);
+              }
+
+              &::after {
+                height: calc(var(--gap-s) * 2 + var(--Icon-size));
+                left: 50%;
+                top: 50%;
+                transform: translate(-50%, -50%) !important;
+                width: calc(var(--gap-s) * 2 + var(--Icon-size));
+              }
+            }
+
+            .SearchFields-sort-item-span {
+              font-style: normal;
+              font-weight: normal;
+              .Text.is-m;
+            }
+
+            .SearchFields-drag {
+              .IconButton;
+
+              --IconButton-name: 'drag_indicator';
+
+              background: transparent;
+              height: var(--Icon-size);
+              overflow: visible;
+              padding: 0;
+              z-index: 1;
+
+              &::before {
+                color: var(--color-gray5);
+                padding: 0;
+              }
+
+              &::after {
+                height: calc(var(--gap-s) * 2 + var(--Icon-size));
+                width: calc(var(--gap-s) * 2 + var(--Icon-size));
+              }
+
+              &:hover {
+                cursor: grab;
+              }
+            }
+          }
+
+          &.Sortable-allowedContainer {
+            &::before {
+              margin-bottom: calc(var(--gap-xl) * 2);
+              margin-top: calc(var(--gap-xl) * 2 + var(--gap-xl));
+              width: 48%;
+            }
+
+            .Sortable-ghost {
+              background: var(--color-blue5);
+              color: var(--color-white);
+
+              .SearchFields-input {
+                &::before {
+                  color: var(--color-white);
+                }
+              }
+
+              .SearchFields-input {
+                &:hover {
+                  &::before {
+                    color: var(--color-white);
+                  }
+                }
+              }
+
+              .SearchFields-drag {
+                --Link-color: var(--color-white);
+                --Link-hoverColor: var(--color-white);
+
+                color: var(--color-white);
+
+                &::before {
+                  color: var(--color-white);
+                }
+
+                &:hover {
+                  &::before {
+                    color: var(--color-white);
+                  }
+                }
+              }
+            }
+
+            .SearchFields-input {
+              &::after {
+                display: none;
+              }
+            }
+
+            .SearchFields-drag {
+              &::after {
+                display: none;
+              }
+            }
+          }
+        }
+      }
+
+      &-hide {
+        padding: 0 var(--gap-l) var(--gap-l) 0;
+
+        .RCIG-list {
+          &.Sortable-allowedContainer::before {
+            left: var(--gap-s);
+          }
+
+          .RCIG-item {
+            padding-right: var(--gap-xs);
+
+            &.is-disabled {
+              opacity: 0.5;
+              pointer-events: none;
+            }
+
+            .SearchFields-sort-item-label {
+              padding-left: var(--gap-xs);
+            }
+
+            .SearchFields-input {
+              --IconButton-name: 'keyboard_arrow_right';
+
+              margin-left: auto;
+              margin-right: var(--gap-xs);
+            }
+
+            > .SearchFields-drag {
+              border: none;
+              border-left: 1px solid var(--color-gray3);
+              padding-left: calc(var(--gap-s) + 2px);
+
+              &::after {
+                left: var(--gap-xs);
+                top: calc(0px - calc(var(--gap-xs) * 2));
+              }
+            }
+          }
+        }
+      }
+
+      &-displayContainer {
+        padding: 0 0 var(--gap-l) var(--gap-l);
+
+        .SearchFields-displayTitle {
+          height: 100%;
+
+          .RCIG-list {
+            &.Sortable-allowedContainer {
+              &::before {
+                left: auto;
+                right: var(--gap-s);
+              }
+            }
+
+            .RCIG-item {
+              align-items: center;
+              display: flex;
+              flex-direction: row-reverse;
+              padding-left: var(--gap-xs);
+
+              .SearchFields-sort-item-label {
+                padding-right: var(--gap-xs);
+              }
+
+              .SearchFields-input {
+                --IconButton-name: 'keyboard_arrow_left';
+
+                margin-left: var(--gap-xs);
+              }
+
+              .SearchFields-drag {
+                border: none;
+                border-right: 1px solid var(--color-gray3);
+                padding-right: calc(var(--gap-s) + 2px);
+
+                &::after {
+                  left: auto;
+                  right: var(--gap-xs);
+                  top: calc(0px - calc(var(--gap-xs) * 2));
+                }
+              }
+
+              .SearchFields-sort-item-span {
+                margin-left: var(--gap-m);
+                order: 2;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    &-columns,
+    &-summary {
+      &.is-hidden {
+        display: none;
+      }
+
+      .SearchFields-hide {
+        .RCIG-list {
+          margin-top: calc(var(--gap-l) * -1);
+        }
+
+        .SearchFields-filter {
+          margin-bottom: var(--gap-l);
+        }
+
+        .SearchFields-subheading {
+          border-bottom: 1px solid var(--color-gray3);
+          font-weight: 400;
+          padding-bottom: var(--gap-s);
+          text-transform: uppercase;
+
+          + .RCIG-list {
+            margin-top: 0;
+            padding-top: 0;
+          }
+        }
+      }
+
+      .SearchFields {
+        &-hide,
+        &-displayContainer {
+          .RCIG-list {
+            &.Sortable-allowedContainer {
+              &::before {
+                margin-bottom: calc(var(--gap-xl) * 3);
+                margin-top: calc(var(--gap-xl) * 5 + var(--gap-m));
+              }
+            }
+          }
+        }
+      }
+
+      &.has-subheadings {
+        .SearchFields-hide,
+        .SearchFields-displayContainer {
+          .RCIG-list {
+            &.Sortable-allowedContainer::before {
+              margin-top: calc(var(--gap-xl) * 6 + var(--gap-m) * 2);
+            }
+          }
+        }
+      }
+    }
+  }
+
+  &-missingValue {
+    font-style: italic;
+  }
+
+  &-filter {
+    font-weight: normal;
+    margin-top: var(--gap-m);
+
+    &::placeholder {
+      .Text.is-m;
+    }
+  }
+}
+
+@media (@mq-xl) {
+  .SearchFields {
+    &-container {
+      .SearchFields {
+        &-hide,
+        &-displayContainer {
+          .RCIG-list {
+            &.Sortable-allowedContainer::before {
+              margin-top: calc(var(--gap-xl) * 2 + var(--gap-l));
+            }
+          }
+        }
+      }
+
+      &-columns,
+      &-summary {
+        .SearchFields-hide,
+        .SearchFields-displayContainer {
+          .RCIG-list {
+            &.Sortable-allowedContainer::before {
+              margin-top: calc(var(--gap-xl) * 5);
+            }
+          }
+        }
+
+        &.has-subheadings {
+          .SearchFields-hide,
+          .SearchFields-displayContainer {
+            .RCIG-list {
+              &.Sortable-allowedContainer::before {
+                margin-top: calc(var(--gap-xl) * 6);
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+
+li.Sortable-item.Sortable-chosen.sortable-fallback.Sortable-drag[data-sortable-item-type='SearchFields-sort-item'] {
+  border: none !important;
+}

package/src/legacy/tool-ui/src/main/webapp/v4/SearchInput.less

@@ -0,0 +1,65 @@
+btu-search-input {
+  display: inline-block;
+}
+
+.SearchInput {
+  --Input-focusBackground: transparent;
+
+  position: relative;
+  width: 100%;
+
+  label {
+    color: var(--Input-placeholderColor);
+    height: var(--Icon-size);
+    left: 0;
+    overflow: hidden;
+    pointer-events: none;
+    position: absolute;
+    top: calc(50% - var(--Icon-size) / 2);
+    width: var(--Icon-size);
+
+    &::before {
+      .Icon;
+
+      content: 'search';
+      top: 0;
+    }
+  }
+
+  input[type] {
+    padding-left: calc(var(--Icon-size) + var(--gap-xs));
+    width: 100%;
+  }
+
+  button,
+  input[type='submit'] {
+    display: none;
+  }
+
+  &:hover,
+  &:focus-within {
+    label {
+      color: var(--Input-focusColor);
+    }
+  }
+}
+
+.SearchInput.is-filter {
+  background: var(--color-gray2);
+  border-radius: calc(var(--gap-s) + var(--Text-height) / 2);
+  margin: var(--gap-m) calc(0px - var(--gap-l) / 2);
+  padding: 0 calc(var(--gap-l) / 2);
+  width: calc(100% + var(--gap-l));
+
+  label {
+    left: calc(var(--gap-l) / 2);
+  }
+
+  input[type] {
+    &,
+    &:hover,
+    &:focus {
+      border-color: transparent;
+    }
+  }
+}

package/src/legacy/tool-ui/src/main/webapp/v4/SearchResult.js

@@ -0,0 +1,255 @@
+import create from './dom/create'
+import findAll from './dom/findAll'
+import insertBefore from './dom/insertBefore'
+import onFind from './dom/onFind'
+import Mark from 'mark.js'
+import storage from './util/storage'
+import {
+  listenForMenuItemClick,
+  setupMenuForAria,
+  toggleMenu,
+} from '../../../dom/popupMenu'
+import getZindex from '../../webapp/script/v3/plugin/popup'
+
+const tooltips = window.BRIGHTSPOT?.ui.tooltips
+
+// Toggle all item checkboxes in the search result.
+onFind('.searchResult-checkAll', (checkAll) => {
+  const searchList = checkAll.closest('table')
+  if (searchList) {
+    const checkboxes = findAll(
+      searchList,
+      ':scope > tbody input[type="checkbox"]',
+    )
+
+    const updateSelectAll = () => {
+      const checkedItems = findAll(
+        searchList,
+        ':scope > tbody input[type="checkbox"]:checked',
+      )
+
+      checkAll.checked =
+        checkboxes.length > 0 && checkedItems.length === checkboxes.length
+    }
+
+    for (const check of checkboxes) {
+      check.addEventListener('click', (event) => {
+        updateSelectAll()
+      })
+    }
+    checkAll.addEventListener('click', (event) => {
+      const checked = checkAll.checked
+      const frameAttribute = `data-frame-${checked ? 'check' : 'uncheck'}`
+      let itemIds = ''
+
+      for (const c of checkboxes) {
+        c.checked = checked
+        if (!checkAll.getAttribute(frameAttribute).includes(c.value)) {
+          itemIds += `&id=${encodeURIComponent(c.value)}`
+        }
+      }
+
+      checkAll.setAttribute(
+        frameAttribute,
+        checkAll.getAttribute(frameAttribute) + itemIds,
+      )
+    })
+
+    updateSelectAll()
+  }
+})
+
+// Moves search actions above search results
+onFind('.SearchResult-view > .SearchResult-actions.loaded', (frame) => {
+  const view = frame.closest('.SearchResult-view')
+
+  const actionsWrapper = create('div', {
+    className: 'SearchResult-actions-wrapper',
+  })
+
+  const menuItems = frame.querySelectorAll('[role="menuitem"]')
+  menuItems.forEach((item) => item.setAttribute('tabindex', '-1'))
+
+  const button = create('button', {
+    className: 'SearchResult-actions-toggle',
+    id: 'SearchResult-actions-toggle',
+    title: tooltips.actions?.actions,
+    'aria-haspopup': 'menu',
+    'aria-label': tooltips.actions?.searchResult,
+    'aria-expanded': 'false',
+    onclick: () => {
+      listenForMenuItemClick(frame, button)
+      toggleMenu(frame, button)
+    },
+  })
+
+  view.prepend(actionsWrapper)
+  actionsWrapper.appendChild(button)
+  actionsWrapper.appendChild(frame)
+
+  setupMenuForAria(frame, button)
+
+  // Creates fullscreen button outside of actions frame
+  if (view.closest('.SearchWidget[name="searchAdvancedFull"]')) return
+  const fsLink = view.querySelector(
+    '.SearchResult-action-link[href*="/searchAdvancedFull"]',
+  )
+  const fullscreen = create('button', {
+    className: 'SearchResult-fullscreen',
+    title: tooltips.fullScreenSearch,
+    'aria-label': tooltips.fullScreen,
+    onclick: (event) => {
+      fsLink.click()
+    },
+  })
+  actionsWrapper.appendChild(fullscreen)
+})
+
+onFind('.SearchResult-actions .SearchResult-selectionReset', (reset) => {
+  reset.addEventListener('click', () => {
+    const actions = reset.closest('.SearchResult-actions-wrapper')
+    actions?.querySelector('.SearchResult-actions-toggle')?.focus()
+  })
+})
+
+// Keep tab 'sticky' when using a filter.
+onFind('.SearchResult-views', (tabs) => {
+  const searchWidget = tabs.closest('.SearchWidget')
+  const searchFiltersRest = searchWidget?.querySelector('.searchFiltersRest')
+
+  if (searchFiltersRest) {
+    const viewInput = searchFiltersRest.querySelector('input[name="view"]')
+
+    if (viewInput) {
+      tabs.querySelectorAll('[data-view]').forEach((tab) => {
+        tab.addEventListener(
+          'click',
+          () => (viewInput.value = tab.dataset.view),
+        )
+      })
+    }
+  }
+})
+
+onFind('.SearchResult-images', (images) => {
+  const searchForm = images.closest('.SearchWidget-form')
+  const shadow = searchForm?.querySelector(
+    '.searchFiltersRest input[name="iz"]',
+  )
+  const list = images.closest('.SearchResult-list')
+  const height =
+    shadow?.value || storage.get('BSP.SearchResult.imageHeight') || 20
+
+  images.setAttribute('data-height', height)
+
+  if (list) {
+    insertBefore(
+      create(
+        'div',
+        {
+          className: 'SearchResult-imageHeightInput',
+        },
+        create('input', {
+          type: 'range',
+          title: tooltips.imageHeight,
+          min: 1,
+          max: 100,
+          step: 1,
+          value: height,
+          'aria-label': tooltips.imageHeight,
+          'shadow-field': shadow?.name,
+          oninput: ({ target: { value } }) => {
+            images.setAttribute('data-height', value)
+            storage.set('BSP.SearchResult.imageHeight', value)
+          },
+          onmouseup: (evt) => {
+            if (shadow && height !== evt.target.value) {
+              shadowField(evt, shadow.name)
+            }
+          },
+        }),
+      ),
+      list,
+    )
+  }
+})
+
+onFind('.SearchResult-board-field', (select) => {
+  select.addEventListener('change', (evt) => {
+    shadowField(evt, select.name)
+  })
+})
+
+onFind('.SearchResult [data-highlight]', (container) => {
+  const query = container.dataset.highlight
+  if (query) {
+    const scope = container.matches('table')
+      ? container.querySelector('tbody') || container
+      : container
+    new Mark(scope).mark(query.trim().split(/\s+/), {
+      className: 'SearchResult-highlight',
+    })
+  }
+})
+
+// Refresh frame on bulkArchive-bulkRestore from Search Results actions
+onFind('.Popup[name="bulkArchive"]', (bulkArchive) => {
+  const filter = bulkArchive.parentNode.querySelector(
+    `.Popup[name="miscSearch"] .queryRestrictions`,
+  )
+  const closeButton = bulkArchive.querySelector('.closeButton')
+
+  if (closeButton) {
+    closeButton.addEventListener('click', submitForm)
+  }
+
+  function submitForm() {
+    const success = bulkArchive.querySelector('.message.is-success')
+    if (success) {
+      let event = new CustomEvent('submit', { bubbles: true })
+      filter.dispatchEvent(event)
+      bulkArchive.parentNode.removeChild(bulkArchive)
+    }
+  }
+})
+
+function shadowField(event, fieldName) {
+  event.preventDefault()
+  event.stopPropagation()
+
+  const searchForm = event.target.closest('.SearchWidget-form')
+  const shadow = searchForm.querySelector(
+    `.searchFiltersRest input[name="${fieldName}"]`,
+  )
+  const shadowView = searchForm.querySelector('input[name="view"]')
+  const view = searchForm.querySelector('.SearchResult-views li.selected a')
+    .dataset.view
+
+  shadow.value = event.target.value
+  shadowView.value = view
+  shadow.shadowField = fieldName
+  shadow.dispatchEvent(new Event('change', { bubbles: true }))
+}
+
+onFind('.Popup[name="miscSearch"] .SearchResult-list', (container) => {
+  container.addEventListener('click', function (e) {
+    const editLink = e.target.closest('a[href*="/edit.jsp"]')
+    if (!editLink) return
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button !== 0)
+      return
+    e.preventDefault()
+
+    // Create loader overlay directly
+    const loader = create(
+      'div',
+      {
+        id: 'searchResult-loader-overlay',
+        className: 'searchResult-loader-overlay',
+      },
+      create('span', { className: 'searchResult-loader-spinner' }),
+    )
+    loader.style.zIndex = getZindex()
+    document.body.appendChild(loader)
+    window.location = editLink.href
+  })
+})