chore: install prettier

app/components/viewer/Search.vue

@@ -1,19 +1,19 @@
 <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';
+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 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));
+  return props.products.filter((p) => p.trade_code.includes(val));
 });
 
 function panToLand(trade_code) {
@@ -26,20 +26,26 @@ function panToLand(trade_code) {
     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');
+      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 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 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;
     });
@@ -53,14 +59,14 @@ function clickMatchBtn(product) {
 
 function submit() {
   isSubmitting.value = true;
-  const trade_code = productInput.value.toUpperCase();  
+  const trade_code = productInput.value.toUpperCase();
 
-  const foundProduct = props.products.find(p => {
+  const foundProduct = props.products.find((p) => {
     return p.trade_code === trade_code;
   });
-  
-  if (!foundProduct) { 
-    isSubmitting.value = false; 
+
+  if (!foundProduct) {
+    isSubmitting.value = false;
     return;
   }
 
@@ -68,13 +74,11 @@ function submit() {
 }
 
 const showMatches = ref(true);
-const input = useTemplateRef('input');
-const matches = useTemplateRef('matches');
+const input = useTemplateRef("input");
+const matches = useTemplateRef("matches");
 
 function clickAwayListener(e) {
-  if (input.value?.contains(e.target)
-  || matches.value?.contains(e.target)
-  ) {
+  if (input.value?.contains(e.target) || matches.value?.contains(e.target)) {
     showMatches.value = true;
   } else {
     showMatches.value = false;
@@ -82,30 +86,32 @@ function clickAwayListener(e) {
 }
 
 onMounted(() => {
-  document.addEventListener('click', clickAwayListener)
+  document.addEventListener("click", clickAwayListener);
 });
 
 onUnmounted(() => {
-  document.removeEventListener('click', clickAwayListener)
+  document.removeEventListener("click", clickAwayListener);
 });
 </script>
 <template>
-  <div class="has-background-white" style="position: sticky; top: 0">
+  <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">
+        <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;
-            "
+            style="box-sizing: border-box; border-inline-width: 0; box-shadow: none"
           />
-          <button 
+          <button
             type="button"
             class="clearInputBtn"
             v-if="productInput"
@@ -117,17 +123,17 @@ onUnmounted(() => {
         </p>
         <p class="control">
           <button
-            :class="[
-              'button is-small is-primary is-radiusless',
-              isSubmitting && 'is-loading'
-            ]"
+            :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">
+            <span
+              v-if="!isSubmitting"
+              class="icon"
+            >
               <SvgIcon v-bind="{ name: 'search.svg', type: 'white', size: 18 }" />
             </span>
           </button>
@@ -153,11 +159,7 @@ onUnmounted(() => {
         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;
-        "
+        style="box-sizing: border-box; border-inline-width: 0; border-bottom-width: 0"
       >
         <p>{{ product.trade_code }}</p>
       </button>
@@ -165,14 +167,17 @@ onUnmounted(() => {
   </div>
 </template>
 <style scoped>
-.control.is-loading::after, .select.is-loading::after, .button.is-loading::after {
+.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 {
+.button:focus-visible,
+.button.is-focused {
   border-color: transparent;
   box-shadow: none;
   /* copy styles from is-hovered */
@@ -194,7 +199,7 @@ onUnmounted(() => {
   background-color: hsla(0, 0%, 0%, 0.05);
 
   &:hover {
-    background-color: hsla(0, 0%, 0%, 0.1)
+    background-color: hsla(0, 0%, 0%, 0.1);
   }
 }
-</style>
+</style>