web/app/components/viewer/Search.vue

<script setup>
import SvgIcon from '@/components/SvgIcon.vue';
import { findLandByTradeCode, findTemInside, objIsTem } from '@/components/viewer/utils/aps-viewer';
import { getBounds } from '@/components/viewer/utils/geometry';

const props = defineProps({
  products: Array,
})

const productInput = ref('');
const isSubmitting = ref(false);

const productMatches = computed(() => {
  const val = productInput.value.trim().toUpperCase();
  if (!val) return;
  return props.products.filter(p => p.trade_code.includes(val));
});

function panToLand(trade_code) {
  const { viewer } = window;

  viewer.getObjectTree(async (instanceTree) => {
    const dbIdMap = instanceTree.nodeAccess.dbIdToIndex;
    const allDbIds = Object.keys(dbIdMap).map((id) => parseInt(id));

    viewer.model.getBulkProperties(allDbIds, {}, (results) => {
      const frags = viewer.model.getFragmentList();
      const tems = results.filter(objIsTem);
      const lands = results.filter(land => {
        const layerProp = land.properties.find(prop => prop.displayName === 'Layer');
        if (!layerProp) return false;
        const globalWidthProp = land.properties.find(prop => prop.displayName === 'Global width');
        return layerProp.displayValue === '1-bodim' && globalWidthProp.displayValue === 0;
      });

      const temsWithBounds = tems.map(tem => ({ ...tem, bounds: getBounds(tem.dbId, frags) }));
      const landsWithBounds = lands.map(land => ({ ...land, bounds: getBounds(land.dbId, frags) }));
      const temsInside = landsWithBounds.map(landWithBounds => findTemInside(landWithBounds, temsWithBounds));

      const [foundLand] = findLandByTradeCode(trade_code, landsWithBounds, temsInside);
      if (!foundLand) return;
      
      viewer.fitToView([foundLand.dbId]);
      isSubmitting.value = false;
    });
  });
}

function clickMatchBtn(product) {
  isSubmitting.value = true;
  panToLand(product.trade_code);
}

function submit() {
  isSubmitting.value = true;
  const trade_code = productInput.value.toUpperCase();  

  const foundProduct = props.products.find(p => {
    return p.trade_code === trade_code;
  });
  
  if (!foundProduct) { 
    isSubmitting.value = false; 
    return;
  }

  panToLand(trade_code);
}

const showMatches = ref(true);
const input = useTemplateRef('input');
const matches = useTemplateRef('matches');

function clickAwayListener(e) {
  if (input.value?.contains(e.target)
  || matches.value?.contains(e.target)
  ) {
    showMatches.value = true;
  } else {
    showMatches.value = false;
  }
}

onMounted(() => {
  document.addEventListener('click', clickAwayListener)
});

onUnmounted(() => {
  document.removeEventListener('click', clickAwayListener)
});
</script>
<template>
  <div class="has-background-white" style="position: sticky; top: 0">
    <form class="is-flex is-gap-1">
      <div class="field has-addons is-flex-grow-1">
        <p ref="input" class="control mb-0 is-flex-grow-1">
          <input
            v-model="productInput"
            class="input is-radiusless has-icons-right fs-13"
            type="text"
            placeholder="Tìm sản phẩm"
            style="
              box-sizing: border-box;
              border-inline-width: 0;
              box-shadow: none;
            "
          />
          <button 
            type="button"
            class="clearInputBtn"
            v-if="productInput"
            @click="productInput = ''"
            tabindex="-1"
          >
            <SvgIcon v-bind="{ name: 'close.svg', type: 'primary', size: 14 }" />
          </button>
        </p>
        <p class="control">
          <button
            :class="[
              'button is-small is-primary is-radiusless',
              isSubmitting && 'is-loading'
            ]"
            :disabled="!productInput"
            tabindex="-1"
            style="box-sizing: border-box; width: 38px; height: 100%"
            @click.prevent="submit"
            type="submit"
          >
            <span v-if="!isSubmitting" class="icon">
              <SvgIcon v-bind="{ name: 'search.svg', type: 'white', size: 18 }" />
            </span>
          </button>
        </p>
      </div>
    </form>
    <div
      v-if="showMatches"
      ref="matches"
      tabindex="-1"
      style="
        max-height: 100px;
        overflow-y: scroll;
        border-bottom-left-radius: 8px;
        border-bottom-right-radius: 8px;
        position: absolute;
        width: 100%;
        z-index: 10;
        box-shadow: 0 4px 4px 0 hsla(0, 0%, 0%, 0.1);
      "
    >
      <button
        v-for="product in productMatches"
        @click="clickMatchBtn(product)"
        class="button is-small is-fullwidth is-radiusless is-justify-content-start"
        style="
          box-sizing: border-box;
          border-inline-width: 0;
          border-bottom-width: 0;
        "
      >
        <p>{{ product.trade_code }}</p>
      </button>
    </div>
  </div>
</template>
<style scoped>
.control.is-loading::after, .select.is-loading::after, .button.is-loading::after {
  /* overrides spinner color */
  border: 3px solid white;
  border-right-color: transparent;
  border-top-color: transparent;
}

.button:focus-visible, .button.is-focused {
  border-color: transparent;
  box-shadow: none;
  /* copy styles from is-hovered */
  --bulma-button-background-l-delta: var(--bulma-button-hover-background-l-delta);
  --bulma-button-border-l-delta: var(--bulma-button-hover-border-l-delta);
}

.clearInputBtn {
  box-sizing: border-box;
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  border-radius: 9999px;
  padding: 4px;
  cursor: pointer;
  display: flex;
  background-color: hsla(0, 0%, 0%, 0.05);

  &:hover {
    background-color: hsla(0, 0%, 0%, 0.1)
  }
}
</style>