refaktoryzacja komponentów: dodanie interakcji i poprawa wyświetlania specyfikacji produktów

frontend/src/pages/IndexPage.vue

@@ -1,12 +1,7 @@
 <template>
   <q-page class="content">
     <section class="drawer-test-actions">
-      <q-btn
-        color="primary"
-        label="Open Advanced Search"
-        unelevated
-        @click="openAdvancedSearch"
-      />
+      <q-btn color="primary" label="Open Advanced Search" unelevated @click="openAdvancedSearch" />
       <q-btn
         color="secondary"
         label="Open Product Specification"
@@ -30,8 +25,11 @@
           type="text"
           @keyup.enter="applySearch"
         />
-        <div class="icon-wrap" @click="applySearch">
-          <span class="material-symbols-outlined" data-icon="tune">tune</span>
+        <div class="icon-wrap">
+          <q-icon class="icon" name="close" @click="clearSearch" />
+          <span class="v-line"></span>
+          <q-icon class="icon" name="camera_alt" />
+          <q-icon class="icon" name="search" @click="applySearch" />
         </div>
       </div>
 
@@ -65,6 +63,7 @@
         :key="product.id"
         :product="product"
         @add-production-event="openProductionStatuses"
+        @show-product-spec="openProductSpecification"
       />
     </div>
   </q-page>
@@ -107,15 +106,15 @@ function openAdvancedSearch() {
   })
 }
 
-function openProductSpecification() {
-  const product = productsStore.items[0]
-
-  if (!product) {
+function openProductSpecification(product) {
+  const selectedProduct = product ?? productsStore.items[0]
+  console.log(selectedProduct)
+  if (!selectedProduct) {
     return
   }
 
   uiStore.openDrawer(UI_PANELS.PRODUCT_SPECIFICATION, {
-    productId: product.id,
+    productId: selectedProduct.id,
     mode: 'edit',
   })
 }
@@ -134,6 +133,11 @@ function openProductionStatuses({ product, partType } = {}) {
   })
 }
 
+function clearSearch() {
+  searchQuery.value = ''
+  productsStore.applySearch(searchQuery.value)
+}
+
 function applySearch() {
   productsStore.applySearch(searchQuery.value)
 }
@@ -168,20 +172,28 @@ function selectMonth(month) {
   margin-bottom: 1.5rem;
 
   .search-field {
-    position: relative;
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) auto;
+    align-items: center;
+    color: var(--my-on-surface);
+    background: var(--my-surface-container-highest);
+    border-bottom: 2px solid var(--my-outline-variant);
+    transition: border-color var(--my-transition);
+
+    &:focus-within {
+      border-bottom-color: var(--my-primary);
+    }
 
     .input {
       width: 100%;
-      padding: 0.75rem 3rem 0.75rem 1rem;
+      min-width: 0;
+      padding: 0.75rem 0.5rem 0.75rem 1rem;
       color: var(--my-on-surface);
-      background: var(--my-surface-container-highest);
+      background: transparent;
       border: 0;
-      border-bottom: 2px solid var(--my-outline-variant);
-      transition: border-color var(--my-transition);
 
       &:focus {
         outline: none;
-        border-bottom-color: var(--my-primary);
       }
 
       &::placeholder {
@@ -190,11 +202,23 @@ function selectMonth(month) {
     }
 
     .icon-wrap {
-      position: absolute;
-      top: 50%;
-      right: 1rem;
+      display: flex;
+      align-items: center;
+      gap: 0.75rem;
+      padding: 0 1rem 0 0.5rem;
       color: var(--my-on-surface-variant);
-      transform: translateY(-50%);
+
+      .v-line {
+        // align-self: stretch; /* 🔥 kluczowe */
+        height: 2rem;
+        width: 1px;
+        background: var(--my-on-surface-variant);
+      }
+      .icon {
+        // color: var(--my-on-surface);
+        font-size: 1.5rem;
+        cursor: pointer;
+      }
     }
   }