From 07dac3d5d881f62beeec77dbf9816f0f52a28179 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Thu, 18 Jul 2024 21:10:36 +0800
Subject: [PATCH 01/17] feat(tauri): change home parts table to data table

---
 elebox-tauri/src/components/PartQty.vue | 23 ++-----
 elebox-tauri/src/views/Home.vue         | 79 +++++++++++++------------
 elebox-tauri/src/views/PartDetail.vue   |  6 +-
 3 files changed, 51 insertions(+), 57 deletions(-)

diff --git a/elebox-tauri/src/components/PartQty.vue b/elebox-tauri/src/components/PartQty.vue
index f0ad266..754ad90 100644
--- a/elebox-tauri/src/components/PartQty.vue
+++ b/elebox-tauri/src/components/PartQty.vue
@@ -1,25 +1,14 @@
 <script setup lang="ts">
-import { invoke } from "@tauri-apps/api/tauri";
+import { DbPart as Db } from "../db_cmd_part";
 
-defineProps({
-  part: String,
-});
+const props = defineProps<{ part: string }>();
 
-async function partAdd(part: string, qty: Number) {
-  await invoke("part_add", { part, qty });
-  console.log(part);
+async function modify(inc: number) {
+  await Db.modifyQty(props.part, inc);
 }
 </script>
 
 <template>
-  <v-btn
-    density="comfortable"
-    icon="mdi-plus"
-    @click="partAdd(part!, 1)"
-  ></v-btn>
-  <v-btn
-    density="comfortable"
-    icon="mdi-minus"
-    @click="partAdd(part!, -1)"
-  ></v-btn>
+  <v-btn density="comfortable" icon="mdi-plus" @click="modify(1)"></v-btn>
+  <v-btn density="comfortable" icon="mdi-minus" @click="modify(-1)"></v-btn>
 </template>
diff --git a/elebox-tauri/src/views/Home.vue b/elebox-tauri/src/views/Home.vue
index c81d5c8..e8447ce 100644
--- a/elebox-tauri/src/views/Home.vue
+++ b/elebox-tauri/src/views/Home.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { onMounted, reactive } from "vue";
+import { onMounted, ref, reactive } from "vue";
 import { Part } from "../interface";
 import { useRouter, useRoute } from "vue-router";
 import { DbPart } from "../db_cmd_part";
@@ -13,6 +13,15 @@ let parts = reactive<Part[]>([]);
 const router = useRouter();
 const route = useRoute();
 
+const search = ref("");
+const headers = ref([
+  { key: "name", title: "Name", align: "start", sortable: true },
+  { key: "quantity", title: "Quantity" },
+  { key: "category", title: "Category" },
+  { key: "package", title: "Package" },
+  { key: "mfr", title: "Manufacturer" },
+]);
+
 async function getParts() {
   let promise = await DbPart.list();
   Object.assign(parts, promise);
@@ -32,50 +41,42 @@ onMounted(getParts);
 
 <template>
   <v-container>
-    <v-row class="ga-8" align="center">
+    <!-- <v-row class="ga-8" align="center">
       <v-autocomplete
         label="Search"
         variant="outlined"
         :items="parts.map((part) => part.name)"
       ></v-autocomplete>
-      <v-btn @click="reload">Update</v-btn>
-    </v-row>
+    </v-row> -->
+
+    <v-btn @click="reload">Update</v-btn>
 
-    <v-table>
-      <thead>
-        <tr>
-          <th>Part</th>
-          <th>Quantity</th>
-          <th>Category</th>
-          <th>Package</th>
-          <th>Mfr</th>
-          <th>Edit</th>
-        </tr>
-      </thead>
+    <v-card title="Parts" flat>
+      <template v-slot:text>
+        <v-text-field
+          v-model="search"
+          label="Search"
+          prepend-inner-icon="mdi-magnify"
+          variant="outlined"
+          hide-details
+          single-line
+        ></v-text-field>
+      </template>
 
-      <tbody>
-        <tr v-for="(p, index) in parts" :key="index">
-          <td>
-            <v-btn
-              :to="{ name: 'part_detail', params: { name: p.name } }"
-              variant="text"
-            >
-              {{ p.name }}</v-btn
-            >
-          </td>
-          <td>
-            {{ p.quantity }}
-            <PartQty :part="p.name" />
-          </td>
-          <td>{{ p.category }}</td>
-          <td>{{ p.package }}</td>
-          <td>{{ p.mfr }}</td>
-          <td>
-            <ItemEditButton :path_name="'update_part'" :item_name="p.name" />
-            <PartDel :part="p.name" />
-          </td>
-        </tr>
-      </tbody>
-    </v-table>
+      <v-data-table :headers="headers" :items="parts" :search="search">
+        <template v-slot:item.name="{ item }">
+          <v-btn
+            :to="{ name: 'part_detail', params: { name: item.name } }"
+            variant="text"
+          >
+            {{ item.name }}
+          </v-btn>
+        </template>
+        <template v-slot:item.quantity="{ item }">
+          {{ item.quantity }}
+          <PartQty :part="item.name" />
+        </template>
+      </v-data-table>
+    </v-card>
   </v-container>
 </template>
diff --git a/elebox-tauri/src/views/PartDetail.vue b/elebox-tauri/src/views/PartDetail.vue
index 937d86d..da6e659 100644
--- a/elebox-tauri/src/views/PartDetail.vue
+++ b/elebox-tauri/src/views/PartDetail.vue
@@ -2,6 +2,8 @@
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import { DbPart } from "../db_cmd_part";
+import ItemEditButton from "../components/ItemEditButton.vue";
+import PartDel from "../components/PartDel.vue";
 
 const route = useRoute();
 const name = ref();
@@ -26,8 +28,10 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-container>
+  <v-container v-if="name">
     <v-btn :to="{ name: 'home' }">Back</v-btn>
+    <ItemEditButton :path_name="'update_part'" :item_name="name" />
+    <PartDel :part="name" />
     <v-table>
       <thead>
         <tr>

From 85d227171bcbddc5fd1865ca8ae17e81010ef0b0 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Thu, 18 Jul 2024 21:33:38 +0800
Subject: [PATCH 02/17] feat(tauri): change category, Mfr and package v-table
 to v-data-table

---
 elebox-tauri/src/components/CategoryList.vue  | 63 ++++++++--------
 .../src/components/ManufacturerList.vue       | 74 ++++++++++---------
 elebox-tauri/src/components/PackageList.vue   | 63 +++++++++-------
 3 files changed, 110 insertions(+), 90 deletions(-)

diff --git a/elebox-tauri/src/components/CategoryList.vue b/elebox-tauri/src/components/CategoryList.vue
index 5a09205..d972255 100644
--- a/elebox-tauri/src/components/CategoryList.vue
+++ b/elebox-tauri/src/components/CategoryList.vue
@@ -1,8 +1,16 @@
 <script setup lang="ts">
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { DbCategory as Db } from "../db_cmd_category";
 import ItemEditButton from "./ItemEditButton.vue";
 
+const search = ref("");
+const headers = ref([
+  { key: "name", title: "Name", sortable: true },
+  { key: "alias", title: "Alias" },
+  { key: "parent", title: "Parent" },
+  { key: "edit", title: "Edit", sortable: false },
+]);
+
 let categories = reactive<Db.Category[]>([]);
 
 async function list() {
@@ -18,33 +26,28 @@ onMounted(list);
 </script>
 
 <template>
-  <v-table>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Alias</th>
-        <th>Parent</th>
-        <th>Edit</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(cat, i) in categories" :key="i">
-        <td>{{ cat.name }}</td>
-        <td>{{ cat.alias }}</td>
-        <td>{{ cat.parent }}</td>
-        <td>
-          <ItemEditButton
-            :path_name="'update_category'"
-            :item_name="cat.name"
-          />
-          <v-btn
-            density="comfortable"
-            icon="mdi-trash-can-outline"
-            :title="`Delete: ${cat.name}`"
-            @click="remove(cat.name)"
-          ></v-btn>
-        </td>
-      </tr>
-    </tbody>
-  </v-table>
+  <v-card flat>
+    <template v-slot:text>
+      <v-text-field
+        v-model="search"
+        label="Search"
+        prepend-inner-icon="mdi-magnify"
+        variant="outlined"
+        hide-details
+        single-line
+      ></v-text-field>
+    </template>
+
+    <v-data-table :headers="headers" :items="categories" :search="search">
+      <template v-slot:item.edit="{ item }">
+        <ItemEditButton :path_name="'update_category'" :item_name="item.name" />
+        <v-btn
+          density="comfortable"
+          icon="mdi-trash-can-outline"
+          :title="`Delete: ${item.name}`"
+          @click="remove(item.name)"
+        ></v-btn>
+      </template>
+    </v-data-table>
+  </v-card>
 </template>
diff --git a/elebox-tauri/src/components/ManufacturerList.vue b/elebox-tauri/src/components/ManufacturerList.vue
index 0dc7818..948ecb5 100644
--- a/elebox-tauri/src/components/ManufacturerList.vue
+++ b/elebox-tauri/src/components/ManufacturerList.vue
@@ -1,8 +1,15 @@
 <script setup lang="ts">
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { DbManufacturer as Db } from "../db_cmd_manufacturer";
 import ItemEditButton from "./ItemEditButton.vue";
 
+const search = ref("");
+const headers = ref([
+  { key: "name", title: "Name", sortable: true },
+  { key: "alias", title: "Alias" },
+  { key: "edit", title: "Edit", sortable: false },
+]);
+
 let mfrs = reactive<Db.Manufacturer[]>([]);
 
 async function list() {
@@ -18,36 +25,37 @@ onMounted(list);
 </script>
 
 <template>
-  <v-table>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Alias</th>
-        <th>Edit</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(m, i) in mfrs" :key="i">
-        <td>
-          {{ m.name }}
-          <a v-if="m.url" :title="m.url" :href="m.url" target="_blank"
-            ><v-icon>mdi-open-in-new</v-icon>
-          </a>
-        </td>
-        <td>{{ m.alias }}</td>
-        <td>
-          <ItemEditButton
-            :path_name="'update_manufacturer'"
-            :item_name="m.name"
-          />
-          <v-btn
-            density="comfortable"
-            icon="mdi-trash-can-outline"
-            :title="`Delete: ${m.name}`"
-            @click="remove(m.name)"
-          ></v-btn>
-        </td>
-      </tr>
-    </tbody>
-  </v-table>
+  <v-card flat>
+    <template v-slot:text>
+      <v-text-field
+        v-model="search"
+        label="Search"
+        prepend-inner-icon="mdi-magnify"
+        variant="outlined"
+        hide-details
+        single-line
+      ></v-text-field>
+    </template>
+
+    <v-data-table :headers="headers" :items="mfrs" :search="search">
+      <template v-slot:item.name="{ item }">
+        {{ item.name }}
+        <a v-if="item.url" :title="item.url" :href="item.url" target="_blank"
+          ><v-icon>mdi-open-in-new</v-icon>
+        </a>
+      </template>
+      <template v-slot:item.edit="{ item }">
+        <ItemEditButton
+          :path_name="'update_manufacturer'"
+          :item_name="item.name"
+        />
+        <v-btn
+          density="comfortable"
+          icon="mdi-trash-can-outline"
+          :title="`Delete: ${item.name}`"
+          @click="remove(item.name)"
+        ></v-btn>
+      </template>
+    </v-data-table>
+  </v-card>
 </template>
diff --git a/elebox-tauri/src/components/PackageList.vue b/elebox-tauri/src/components/PackageList.vue
index 02a73f8..a9b092b 100644
--- a/elebox-tauri/src/components/PackageList.vue
+++ b/elebox-tauri/src/components/PackageList.vue
@@ -1,8 +1,16 @@
 <script setup lang="ts">
-import { onMounted, reactive } from "vue";
+import { onMounted, reactive, ref } from "vue";
 import { DbPackage as Db } from "../db_cmd_package";
 import ItemEditButton from "./ItemEditButton.vue";
 
+const search = ref("");
+const headers = ref([
+  { key: "name", title: "Name", sortable: true },
+  { key: "pkg_type", title: "Type" },
+  { key: "alias", title: "Alias" },
+  { key: "edit", title: "Edit", sortable: false },
+]);
+
 let pkgs = reactive<Db.Package[]>([]);
 
 async function list() {
@@ -18,30 +26,31 @@ onMounted(list);
 </script>
 
 <template>
-  <v-table>
-    <thead>
-      <tr>
-        <th>Name</th>
-        <th>Type</th>
-        <th>Alias</th>
-        <th>Edit</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(p, i) in pkgs" :key="i">
-        <td>{{ p.name }}</td>
-        <td>{{ p.pkg_type.toUpperCase() }}</td>
-        <td>{{ p.alias }}</td>
-        <td>
-          <ItemEditButton :path_name="'update_package'" :item_name="p.name" />
-          <v-btn
-            density="comfortable"
-            icon="mdi-trash-can-outline"
-            :title="`Delete: ${p.name}`"
-            @click="remove(p.name)"
-          ></v-btn>
-        </td>
-      </tr>
-    </tbody>
-  </v-table>
+  <v-card flat>
+    <template v-slot:text>
+      <v-text-field
+        v-model="search"
+        label="Search"
+        prepend-inner-icon="mdi-magnify"
+        variant="outlined"
+        hide-details
+        single-line
+      ></v-text-field>
+    </template>
+
+    <v-data-table :headers="headers" :items="pkgs" :search="search">
+      <template v-slot:item.pkg_type="{ item }">
+        {{ item.pkg_type.toUpperCase() }}
+      </template>
+      <template v-slot:item.edit="{ item }">
+        <ItemEditButton :path_name="'update_package'" :item_name="item.name" />
+        <v-btn
+          density="comfortable"
+          icon="mdi-trash-can-outline"
+          :title="`Delete: ${item.name}`"
+          @click="remove(item.name)"
+        ></v-btn>
+      </template>
+    </v-data-table>
+  </v-card>
 </template>

From 38c839c5c13adf9d5649197d80b708cf9132e64d Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Thu, 18 Jul 2024 21:47:23 +0800
Subject: [PATCH 03/17] feat(tauri): add image display for part detail

---
 elebox-tauri/src/views/PartDetail.vue | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/elebox-tauri/src/views/PartDetail.vue b/elebox-tauri/src/views/PartDetail.vue
index da6e659..4ac9632 100644
--- a/elebox-tauri/src/views/PartDetail.vue
+++ b/elebox-tauri/src/views/PartDetail.vue
@@ -87,7 +87,14 @@ onMounted(() => {
         </tr>
         <tr>
           <td>Image</td>
-          <td>{{ part.image_link }}</td>
+          <td>
+            <v-img
+              v-if="part.image_link"
+              :src="part.image_link"
+              :title="part.image_link"
+              height="250"
+            ></v-img>
+          </td>
         </tr>
       </tbody>
     </v-table>

From 6c58b3f1423f56625b2588863af076ad6c9ab606 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Thu, 18 Jul 2024 21:50:36 +0800
Subject: [PATCH 04/17] feat(tauri): add hyper link for part detail

---
 elebox-tauri/src/views/PartDetail.vue | 12 ++++++++++--
 1 file changed, 10 insertions(+), 2 deletions(-)

diff --git a/elebox-tauri/src/views/PartDetail.vue b/elebox-tauri/src/views/PartDetail.vue
index 4ac9632..6b89123 100644
--- a/elebox-tauri/src/views/PartDetail.vue
+++ b/elebox-tauri/src/views/PartDetail.vue
@@ -67,7 +67,11 @@ onMounted(() => {
         </tr>
         <tr>
           <td>Datasheet</td>
-          <td>{{ part.datasheet_link }}</td>
+          <td>
+            <a target="_blank" :href="part.datasheet_link">{{
+              part.datasheet_link
+            }}</a>
+          </td>
         </tr>
         <tr>
           <td>Description</td>
@@ -83,7 +87,11 @@ onMounted(() => {
         </tr>
         <tr>
           <td>Product</td>
-          <td>{{ part.product_link }}</td>
+          <td>
+            <a target="_blank" :href="part.product_link">{{
+              part.product_link
+            }}</a>
+          </td>
         </tr>
         <tr>
           <td>Image</td>

From 33c2340f01496c8a585a0ba0832e93b2c6715828 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Thu, 18 Jul 2024 22:09:07 +0800
Subject: [PATCH 05/17] feat(tauri): add Search on Mouser, Digikey and Octopart

---
 elebox-tauri/src/views/PartDetail.vue | 20 +++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/elebox-tauri/src/views/PartDetail.vue b/elebox-tauri/src/views/PartDetail.vue
index 6b89123..c6791bb 100644
--- a/elebox-tauri/src/views/PartDetail.vue
+++ b/elebox-tauri/src/views/PartDetail.vue
@@ -79,7 +79,25 @@ onMounted(() => {
         </tr>
         <tr>
           <td>Mfr #</td>
-          <td>{{ part.mfr_no }}</td>
+          <td>
+            {{ part.mfr_no
+            }}<a
+              title="Search on Mouser"
+              target="_blank"
+              :href="`https://www.mouser.com/c/?q=${part.mfr_no}`"
+              ><v-icon>mdi-search-web</v-icon></a
+            ><a
+              title="Search on Digikey"
+              target="_blank"
+              :href="`https://www.digikey.com/en/products/result?keywords=${part.mfr_no}`"
+              ><v-icon>mdi-search-web</v-icon></a
+            ><a
+              title="Search on Octopart"
+              target="_blank"
+              :href="`https://octopart.com/search?q=${part.mfr_no}&currency=USD&specs=0`"
+              ><v-icon>mdi-search-web</v-icon></a
+            >
+          </td>
         </tr>
         <tr>
           <td>Manufacturer</td>

From f0216a666cd071b0ab54d1573a250e2a1fa40fe1 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Fri, 19 Jul 2024 19:09:56 +0800
Subject: [PATCH 06/17] feat(core, tauri): add starred field for part

---
 elebox-core/src/db.rs                 |  1 +
 elebox-core/src/default_db.rs         |  1 +
 elebox-core/src/part.rs               |  4 ++++
 elebox-tauri/src/interface.ts         |  1 +
 elebox-tauri/src/views/Home.vue       |  3 ++-
 elebox-tauri/src/views/Part.vue       | 10 ++++++----
 elebox-tauri/src/views/PartDetail.vue |  6 +++++-
 7 files changed, 20 insertions(+), 6 deletions(-)

diff --git a/elebox-core/src/db.rs b/elebox-core/src/db.rs
index 1e22457..1e42218 100644
--- a/elebox-core/src/db.rs
+++ b/elebox-core/src/db.rs
@@ -51,6 +51,7 @@ pub struct DbPart {
     pub image_link: String,
     pub custom_fields: Vec<CustomField>,
     pub suppliers: Vec<Supplier>,
+    pub starred: bool,
 }
 
 impl DbItem for DbPart {
diff --git a/elebox-core/src/default_db.rs b/elebox-core/src/default_db.rs
index 14bf448..5caf327 100644
--- a/elebox-core/src/default_db.rs
+++ b/elebox-core/src/default_db.rs
@@ -271,6 +271,7 @@ pub fn create_default_db(path: &str) {
         ),
         description: Some("Dual ARM Cortex-M0+ 133MHz, 264KB SRAM".to_string()),
         location: Some("Box #1".to_string()),
+        starred: false,
         custom_fields: vec![
             CustomField {
                 name: "Mouser #".to_string(),
diff --git a/elebox-core/src/part.rs b/elebox-core/src/part.rs
index be89ef4..6d2ca78 100644
--- a/elebox-core/src/part.rs
+++ b/elebox-core/src/part.rs
@@ -19,6 +19,7 @@ pub struct Part {
     pub image_link: Option<String>,
     pub custom_fields: Vec<CustomField>,
     pub suppliers: Vec<Supplier>,
+    pub starred: bool,
 }
 
 impl Part {
@@ -39,6 +40,7 @@ impl Part {
             image_link: None,
             custom_fields: vec![],
             suppliers: vec![],
+            starred: false,
         }
     }
 }
@@ -111,6 +113,7 @@ impl<'a> PartManager<'a> {
             image_link: unwrap_or_empty(&part.image_link),
             custom_fields: part.custom_fields.clone(),
             suppliers: part.suppliers.clone(),
+            starred: part.starred,
         };
 
         Ok(db_part)
@@ -193,6 +196,7 @@ impl<'a> PartManager<'a> {
             image_link: Some(db_part.image_link),
             custom_fields: db_part.custom_fields,
             suppliers: db_part.suppliers,
+            starred: db_part.starred,
         };
 
         return Ok(part);
diff --git a/elebox-tauri/src/interface.ts b/elebox-tauri/src/interface.ts
index 36883a2..1d0ee55 100644
--- a/elebox-tauri/src/interface.ts
+++ b/elebox-tauri/src/interface.ts
@@ -27,6 +27,7 @@ export interface Part {
   image_link?: string;
   custom_fields: CustomField[];
   suppliers: Supplier[];
+  starred: boolean;
 }
 
 export interface Category {
diff --git a/elebox-tauri/src/views/Home.vue b/elebox-tauri/src/views/Home.vue
index e8447ce..66170f8 100644
--- a/elebox-tauri/src/views/Home.vue
+++ b/elebox-tauri/src/views/Home.vue
@@ -69,7 +69,8 @@ onMounted(getParts);
             :to="{ name: 'part_detail', params: { name: item.name } }"
             variant="text"
           >
-            {{ item.name }}
+            {{ item.name
+            }}<v-icon v-if="item.starred" color="#fcba03">mdi-star</v-icon>
           </v-btn>
         </template>
         <template v-slot:item.quantity="{ item }">
diff --git a/elebox-tauri/src/views/Part.vue b/elebox-tauri/src/views/Part.vue
index f6ae820..a36383f 100644
--- a/elebox-tauri/src/views/Part.vue
+++ b/elebox-tauri/src/views/Part.vue
@@ -16,10 +16,10 @@ const part = ref<DbPart.Part>({
   category: "",
   custom_fields: [],
   suppliers: [],
+  starred: false,
 });
 
 const qty_input = ref<number | undefined>(undefined);
-const favorite = ref();
 // const alert = ref(false);
 
 const new_custom_field = ref<CustomField>({
@@ -184,9 +184,11 @@ onMounted(() => {
         <v-btn v-else @click="updatePart">Update</v-btn>
         <v-switch
           true-icon="mdi-star"
-          v-model="favorite"
-          color="primary"
-          label="Favorite"
+          v-model="part.starred"
+          :true-value="true"
+          :false-value="false"
+          color="#fcba03"
+          label="Star"
           hide-details
         ></v-switch>
       </v-row>
diff --git a/elebox-tauri/src/views/PartDetail.vue b/elebox-tauri/src/views/PartDetail.vue
index c6791bb..9493edb 100644
--- a/elebox-tauri/src/views/PartDetail.vue
+++ b/elebox-tauri/src/views/PartDetail.vue
@@ -13,6 +13,7 @@ const part = ref<DbPart.Part>({
   category: "",
   custom_fields: [],
   suppliers: [],
+  starred: false,
 });
 
 async function getPart(name: string) {
@@ -36,7 +37,10 @@ onMounted(() => {
       <thead>
         <tr>
           <th>Part</th>
-          <th>{{ part.name }}</th>
+          <th>
+            {{ part.name
+            }}<v-icon v-if="part.starred" color="#fcba03">mdi-star</v-icon>
+          </th>
         </tr>
       </thead>
 

From 6e790790112095497db86aa6fd63ebbfc92b445f Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Fri, 19 Jul 2024 20:58:32 +0800
Subject: [PATCH 07/17] fix(core): default RP2040 package detail

---
 elebox-core/src/default_db.rs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elebox-core/src/default_db.rs b/elebox-core/src/default_db.rs
index 5caf327..9746ee4 100644
--- a/elebox-core/src/default_db.rs
+++ b/elebox-core/src/default_db.rs
@@ -256,7 +256,7 @@ pub fn create_default_db(path: &str) {
         category: "MCU".to_string(),
         alias: Some("RPi RP2040".to_string()),
         package: Some("QFN-56".to_string()),
-        package_detail: Some("7x7mm P0.4mm 1EP3.2x32.mm".to_string()),
+        package_detail: Some("7x7mm P0.4mm 1EP3.2x3.2mm".to_string()),
         mfr: Some("Raspberry Pi".to_string()),
         mfr_no: Some("SC0914(7)".to_string()),
         datasheet_link: Some(

From 9be8cc5c411c17f7502a7cd465f9247d59fc3841 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Fri, 19 Jul 2024 20:59:02 +0800
Subject: [PATCH 08/17] feat(tauri): remove home page title "Parts"

---
 elebox-tauri/src/views/Home.vue       |  2 +-
 elebox-tauri/src/views/PartDetail.vue | 74 +++++++++++++++++----------
 2 files changed, 47 insertions(+), 29 deletions(-)

diff --git a/elebox-tauri/src/views/Home.vue b/elebox-tauri/src/views/Home.vue
index 66170f8..e75d2e5 100644
--- a/elebox-tauri/src/views/Home.vue
+++ b/elebox-tauri/src/views/Home.vue
@@ -51,7 +51,7 @@ onMounted(getParts);
 
     <v-btn @click="reload">Update</v-btn>
 
-    <v-card title="Parts" flat>
+    <v-card flat>
       <template v-slot:text>
         <v-text-field
           v-model="search"
diff --git a/elebox-tauri/src/views/PartDetail.vue b/elebox-tauri/src/views/PartDetail.vue
index 9493edb..6b4455a 100644
--- a/elebox-tauri/src/views/PartDetail.vue
+++ b/elebox-tauri/src/views/PartDetail.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
 import { DbPart } from "../db_cmd_part";
@@ -30,16 +31,31 @@ onMounted(() => {
 
 <template>
   <v-container v-if="name">
-    <v-btn :to="{ name: 'home' }">Back</v-btn>
-    <ItemEditButton :path_name="'update_part'" :item_name="name" />
-    <PartDel :part="name" />
+    <div>
+      <v-row>
+        <v-col>
+          <v-btn :to="{ name: 'home' }">Back</v-btn>
+        </v-col>
+        <v-col cols="1">
+          <ItemEditButton :path_name="'update_part'" :item_name="name" />
+        </v-col>
+        <v-col cols="2">
+          <PartDel :part="name" />
+        </v-col>
+      </v-row>
+    </div>
+
+    <v-divider class="my-4"></v-divider>
+
     <v-table>
       <thead>
         <tr>
-          <th>Part</th>
+          <th>Name</th>
           <th>
             {{ part.name
-            }}<v-icon v-if="part.starred" color="#fcba03">mdi-star</v-icon>
+            }}<v-icon v-if="part.starred" color="#fcba03" title="Starred" end
+              >mdi-star</v-icon
+            >
           </th>
         </tr>
       </thead>
@@ -69,23 +85,15 @@ onMounted(() => {
           <td>Package Detail</td>
           <td>{{ part.package_detail }}</td>
         </tr>
-        <tr>
-          <td>Datasheet</td>
-          <td>
-            <a target="_blank" :href="part.datasheet_link">{{
-              part.datasheet_link
-            }}</a>
-          </td>
-        </tr>
         <tr>
           <td>Description</td>
           <td>{{ part.description }}</td>
         </tr>
         <tr>
-          <td>Mfr #</td>
+          <td>Manufacturer #</td>
           <td>
-            {{ part.mfr_no
-            }}<a
+            {{ part.mfr_no }}
+            <a
               title="Search on Mouser"
               target="_blank"
               :href="`https://www.mouser.com/c/?q=${part.mfr_no}`"
@@ -107,6 +115,14 @@ onMounted(() => {
           <td>Manufacturer</td>
           <td>{{ part.mfr }}</td>
         </tr>
+        <tr>
+          <td>Datasheet</td>
+          <td>
+            <a target="_blank" :href="part.datasheet_link">{{
+              part.datasheet_link
+            }}</a>
+          </td>
+        </tr>
         <tr>
           <td>Product</td>
           <td>
@@ -118,37 +134,39 @@ onMounted(() => {
         <tr>
           <td>Image</td>
           <td>
-            <v-img
+            <a
               v-if="part.image_link"
-              :src="part.image_link"
+              target="_blank"
+              :href="part.image_link"
               :title="part.image_link"
-              height="250"
-            ></v-img>
+            >
+              <v-img :src="part.image_link" height="250"></v-img>
+            </a>
           </td>
         </tr>
       </tbody>
     </v-table>
 
-    <v-label>Custom Fields</v-label>
+    <v-label class="mt-8">Custom Fields</v-label>
     <v-table>
       <thead>
         <tr>
           <th>Name</th>
           <th>Value</th>
-          <th>Type</th>
+          <th>Field Type</th>
         </tr>
       </thead>
 
       <tbody>
-        <tr v-for="f in part.custom_fields">
-          <td>{{ f.name }}</td>
-          <td>{{ f.value }}</td>
-          <td>{{ f.field_type }}</td>
+        <tr v-for="cf in part.custom_fields" :key="cf.name">
+          <td>{{ cf.name }}</td>
+          <td>{{ cf.value }}</td>
+          <td>{{ cf.field_type }}</td>
         </tr>
       </tbody>
     </v-table>
 
-    <v-label>Suppliers</v-label>
+    <v-label class="mt-8">Suppliers</v-label>
     <v-table>
       <thead>
         <tr>
@@ -160,7 +178,7 @@ onMounted(() => {
       </thead>
 
       <tbody>
-        <tr v-for="s in part.suppliers">
+        <tr v-for="s in part.suppliers" :key="s.name">
           <td>{{ s.name }}</td>
           <td>
             <a :href="s.link" target="_blank" :title="s.link">Link</a>

From 54c92ece1e3aea147e68b0d4b8882ed44e0c043e Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Fri, 19 Jul 2024 21:13:37 +0800
Subject: [PATCH 09/17] feat(tauri): add confirm delete dialog for part

---
 elebox-tauri/src/views/PartDetail.vue | 87 +++++++++++++++++++++------
 1 file changed, 67 insertions(+), 20 deletions(-)

diff --git a/elebox-tauri/src/views/PartDetail.vue b/elebox-tauri/src/views/PartDetail.vue
index 6b4455a..b531f9c 100644
--- a/elebox-tauri/src/views/PartDetail.vue
+++ b/elebox-tauri/src/views/PartDetail.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import "../styles.css";
 import { onMounted, ref } from "vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { DbPart } from "../db_cmd_part";
 import ItemEditButton from "../components/ItemEditButton.vue";
 import PartDel from "../components/PartDel.vue";
 
+const router = useRouter();
 const route = useRoute();
 const name = ref();
 const part = ref<DbPart.Part>({
@@ -23,6 +24,11 @@ async function getPart(name: string) {
   console.log(partData);
 }
 
+async function removePart() {
+  await DbPart.remove(name.value);
+  router.replace("/"); // Back to home
+}
+
 onMounted(() => {
   name.value = route.params.name;
   getPart(name.value);
@@ -39,8 +45,47 @@ onMounted(() => {
         <v-col cols="1">
           <ItemEditButton :path_name="'update_part'" :item_name="name" />
         </v-col>
-        <v-col cols="2">
-          <PartDel :part="name" />
+        <v-col cols="1">
+          <v-dialog max-width="500">
+            <template v-slot:activator="{ props: activatorProps }">
+              <v-btn
+                v-bind="activatorProps"
+                density="comfortable"
+                icon="mdi-trash-can-outline"
+                title="Delete"
+              ></v-btn>
+            </template>
+
+            <template v-slot:default="{ isActive }">
+              <v-card
+                title="Confirm Delete"
+                prepend-icon="mdi-trash-can-outline"
+              >
+                <v-card-text>
+                  <p>
+                    Are you sure you want to delete this part
+                    <strong>{{ part.name }}</strong> ?
+                  </p>
+                  <p>This action cannot be undone.</p>
+                </v-card-text>
+
+                <v-card-actions>
+                  <v-spacer></v-spacer>
+                  <v-btn
+                    text="Cancel"
+                    @click="isActive.value = false"
+                    variant="tonal"
+                  ></v-btn>
+                  <v-btn
+                    text="Delete"
+                    @click="removePart"
+                    color="red"
+                    variant="tonal"
+                  ></v-btn>
+                </v-card-actions>
+              </v-card>
+            </template>
+          </v-dialog>
         </v-col>
       </v-row>
     </div>
@@ -92,23 +137,25 @@ onMounted(() => {
         <tr>
           <td>Manufacturer #</td>
           <td>
-            {{ part.mfr_no }}
-            <a
-              title="Search on Mouser"
-              target="_blank"
-              :href="`https://www.mouser.com/c/?q=${part.mfr_no}`"
-              ><v-icon>mdi-search-web</v-icon></a
-            ><a
-              title="Search on Digikey"
-              target="_blank"
-              :href="`https://www.digikey.com/en/products/result?keywords=${part.mfr_no}`"
-              ><v-icon>mdi-search-web</v-icon></a
-            ><a
-              title="Search on Octopart"
-              target="_blank"
-              :href="`https://octopart.com/search?q=${part.mfr_no}&currency=USD&specs=0`"
-              ><v-icon>mdi-search-web</v-icon></a
-            >
+            <div v-if="part.mfr_no">
+              {{ part.mfr_no }}
+              <a
+                title="Search on Mouser"
+                target="_blank"
+                :href="`https://www.mouser.com/c/?q=${part.mfr_no}`"
+                ><v-icon>mdi-search-web</v-icon></a
+              ><a
+                title="Search on Digikey"
+                target="_blank"
+                :href="`https://www.digikey.com/en/products/result?keywords=${part.mfr_no}`"
+                ><v-icon>mdi-search-web</v-icon></a
+              ><a
+                title="Search on Octopart"
+                target="_blank"
+                :href="`https://octopart.com/search?q=${part.mfr_no}&currency=USD&specs=0`"
+                ><v-icon>mdi-search-web</v-icon></a
+              >
+            </div>
           </td>
         </tr>
         <tr>

From f077aca4b4869b39ede619a99cab451094540053 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Fri, 19 Jul 2024 21:56:48 +0800
Subject: [PATCH 10/17] feat(tauri): combine parts table and refresh button

---
 elebox-tauri/src/components/PartQty.vue | 30 ++++++++-
 elebox-tauri/src/views/Home.vue         | 86 ++++++++++++++-----------
 2 files changed, 76 insertions(+), 40 deletions(-)

diff --git a/elebox-tauri/src/components/PartQty.vue b/elebox-tauri/src/components/PartQty.vue
index 754ad90..8e9a4b1 100644
--- a/elebox-tauri/src/components/PartQty.vue
+++ b/elebox-tauri/src/components/PartQty.vue
@@ -1,14 +1,38 @@
 <script setup lang="ts">
+import { onMounted, ref } from "vue";
 import { DbPart as Db } from "../db_cmd_part";
 
 const props = defineProps<{ part: string }>();
+const qty = ref<number | undefined>(undefined);
 
-async function modify(inc: number) {
+async function modifyQty(inc: number) {
   await Db.modifyQty(props.part, inc);
+  await refreshQty();
 }
+
+async function refreshQty() {
+  const data = await Db.get(props.part);
+  const part = data as Db.Part;
+  qty.value = part.quantity;
+}
+
+onMounted(refreshQty);
 </script>
 
 <template>
-  <v-btn density="comfortable" icon="mdi-plus" @click="modify(1)"></v-btn>
-  <v-btn density="comfortable" icon="mdi-minus" @click="modify(-1)"></v-btn>
+  <v-btn
+    density="comfortable"
+    variant="text"
+    icon="mdi-minus"
+    size="small"
+    @click="modifyQty(-1)"
+  ></v-btn>
+  {{ qty }}
+  <v-btn
+    density="comfortable"
+    variant="text"
+    icon="mdi-plus"
+    size="small"
+    @click="modifyQty(1)"
+  ></v-btn>
 </template>
diff --git a/elebox-tauri/src/views/Home.vue b/elebox-tauri/src/views/Home.vue
index e75d2e5..0498493 100644
--- a/elebox-tauri/src/views/Home.vue
+++ b/elebox-tauri/src/views/Home.vue
@@ -15,7 +15,7 @@ const route = useRoute();
 
 const search = ref("");
 const headers = ref([
-  { key: "name", title: "Name", align: "start", sortable: true },
+  { key: "name", title: "Name", sortable: true },
   { key: "quantity", title: "Quantity" },
   { key: "category", title: "Category" },
   { key: "package", title: "Package" },
@@ -41,43 +41,55 @@ onMounted(getParts);
 
 <template>
   <v-container>
-    <!-- <v-row class="ga-8" align="center">
-      <v-autocomplete
-        label="Search"
-        variant="outlined"
-        :items="parts.map((part) => part.name)"
-      ></v-autocomplete>
-    </v-row> -->
+    <v-row>
+      <v-container>
+        <v-card flat>
+          <template v-slot:text>
+            <v-row class="align-center">
+              <v-col>
+                <v-text-field
+                  v-model="search"
+                  label="Search"
+                  prepend-inner-icon="mdi-magnify"
+                  variant="outlined"
+                  hide-details
+                  single-line
+                ></v-text-field>
+              </v-col>
+              <v-col cols="auto">
+                <v-btn
+                  @click="reload"
+                  text="Update"
+                  icon="mdi-refresh"
+                  density="comfortable"
+                  size="large"
+                  title="Refresh"
+                ></v-btn>
+              </v-col>
+            </v-row>
+          </template>
 
-    <v-btn @click="reload">Update</v-btn>
-
-    <v-card flat>
-      <template v-slot:text>
-        <v-text-field
-          v-model="search"
-          label="Search"
-          prepend-inner-icon="mdi-magnify"
-          variant="outlined"
-          hide-details
-          single-line
-        ></v-text-field>
-      </template>
-
-      <v-data-table :headers="headers" :items="parts" :search="search">
-        <template v-slot:item.name="{ item }">
-          <v-btn
-            :to="{ name: 'part_detail', params: { name: item.name } }"
-            variant="text"
+          <v-data-table
+            :headers="headers"
+            :items="parts"
+            :search="search"
+            v-if="parts.length > 0"
           >
-            {{ item.name
-            }}<v-icon v-if="item.starred" color="#fcba03">mdi-star</v-icon>
-          </v-btn>
-        </template>
-        <template v-slot:item.quantity="{ item }">
-          {{ item.quantity }}
-          <PartQty :part="item.name" />
-        </template>
-      </v-data-table>
-    </v-card>
+            <template v-slot:item.name="{ item }">
+              <v-btn
+                :to="{ name: 'part_detail', params: { name: item.name } }"
+                variant="text"
+              >
+                {{ item.name
+                }}<v-icon v-if="item.starred" color="#fcba03">mdi-star</v-icon>
+              </v-btn>
+            </template>
+            <template v-slot:item.quantity="{ item }">
+              <PartQty :part="item.name" />
+            </template>
+          </v-data-table>
+        </v-card>
+      </v-container>
+    </v-row>
   </v-container>
 </template>

From 66b9c491d1a39a44e2e1140750546e2641cae88a Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Fri, 19 Jul 2024 23:21:19 +0800
Subject: [PATCH 11/17] feat(tauri): update part page layout

---
 .../src/components/PartCustomField.vue        | 116 +++----
 elebox-tauri/src/components/PartSupplier.vue  | 116 +++----
 elebox-tauri/src/views/Part.vue               | 297 ++++++++++--------
 3 files changed, 294 insertions(+), 235 deletions(-)

diff --git a/elebox-tauri/src/components/PartCustomField.vue b/elebox-tauri/src/components/PartCustomField.vue
index 80dbdc4..a8f0423 100644
--- a/elebox-tauri/src/components/PartCustomField.vue
+++ b/elebox-tauri/src/components/PartCustomField.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { ref, watch } from "vue";
 import { CustomField } from "../interface";
 
@@ -50,60 +51,67 @@ function emitAdd() {
 
 <template>
   <v-form @submit.prevent>
-    <v-row class="ma-2 ga-8">
-      <v-select
-        v-if="props.create"
-        label="Type"
-        :items="['Normal', 'Link']"
-        variant="outlined"
-        v-model="custom_field.field_type"
-        :rules="[(v: any) => !!v || 'Required']"
-        required
-        :readonly="!props.create"
-      ></v-select>
-      <v-text-field
-        v-else
-        label="Type"
-        variant="outlined"
-        v-model.trim="custom_field.field_type"
-        required
-        readonly
-      ></v-text-field>
-      <v-text-field
-        label="Name"
-        variant="outlined"
-        v-model.trim="custom_field.name"
-        placeholder=""
-        :rules="[(v: any) => !!v || 'Required']"
-        required
-        :readonly="!props.create"
-      ></v-text-field>
-      <v-text-field
-        label="Value"
-        variant="outlined"
-        v-model.trim="custom_field.value"
-        placeholder=""
-        :readonly="!props.create"
-        :dirty="!props.create"
-      ></v-text-field>
-
-      <v-btn
-        v-if="props.create"
-        density="comfortable"
-        icon="mdi-plus"
-        title="Add"
-        color="green"
-        type="submit"
-        @click="emitAdd()"
-      ></v-btn>
-      <v-btn
-        v-else
-        density="comfortable"
-        icon="mdi-trash-can-outline"
-        title="Delete"
-        type="submit"
-        @click="emitDel()"
-      ></v-btn>
+    <v-row class="align-center">
+      <v-col cols="2">
+        <v-select
+          v-if="props.create"
+          label="Type"
+          :items="['Normal', 'Link']"
+          variant="outlined"
+          v-model="custom_field.field_type"
+          :rules="[(v: any) => !!v || 'Required']"
+          required
+          :readonly="!props.create"
+        ></v-select>
+        <v-text-field
+          v-else
+          label="Type"
+          variant="outlined"
+          v-model.trim="custom_field.field_type"
+          required
+          readonly
+        ></v-text-field>
+      </v-col>
+      <v-col>
+        <v-text-field
+          label="Name"
+          variant="outlined"
+          v-model.trim="custom_field.name"
+          placeholder=""
+          :rules="[(v: any) => !!v || 'Required']"
+          required
+          :readonly="!props.create"
+        ></v-text-field>
+      </v-col>
+      <v-col>
+        <v-text-field
+          label="Value"
+          variant="outlined"
+          v-model.trim="custom_field.value"
+          placeholder=""
+          :readonly="!props.create"
+          :dirty="!props.create"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="auto" class="mb-6">
+        <v-btn
+          v-if="props.create"
+          density="comfortable"
+          icon="mdi-plus"
+          title="Add"
+          color="green"
+          type="submit"
+          @click="emitAdd()"
+        ></v-btn>
+        <v-btn
+          v-else
+          density="comfortable"
+          icon="mdi-trash-can-outline"
+          title="Delete"
+          type="submit"
+          @click="emitDel()"
+        ></v-btn>
+      </v-col>
     </v-row>
   </v-form>
 </template>
diff --git a/elebox-tauri/src/components/PartSupplier.vue b/elebox-tauri/src/components/PartSupplier.vue
index a6b8ea3..0e16166 100644
--- a/elebox-tauri/src/components/PartSupplier.vue
+++ b/elebox-tauri/src/components/PartSupplier.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { ref, watch } from "vue";
 import { Supplier } from "../interface";
 
@@ -54,59 +55,68 @@ function emitAdd() {
 
 <template>
   <v-form @submit.prevent>
-    <v-row class="ma-2 ga-8">
-      <v-text-field
-        label="Name"
-        variant="outlined"
-        v-model.trim="supplier.name"
-        placeholder=""
-        :rules="[(v: any) => !!v || 'Required']"
-        required
-        :readonly="!props.create"
-      ></v-text-field>
-      <v-text-field
-        label="Link"
-        variant="outlined"
-        v-model.trim="supplier.link"
-        placeholder="https://"
-        :readonly="!props.create"
-        :dirty="!props.create"
-      ></v-text-field>
-      <v-text-field
-        label="Price"
-        variant="outlined"
-        v-model.number="supplier.price"
-        type="number"
-        min="0"
-        :readonly="!props.create"
-        :dirty="!props.create"
-      ></v-text-field>
-      <v-text-field
-        label="Note"
-        variant="outlined"
-        v-model.trim="supplier.note"
-        placeholder=""
-        :readonly="!props.create"
-        :dirty="!props.create"
-      ></v-text-field>
-
-      <v-btn
-        v-if="props.create"
-        density="comfortable"
-        icon="mdi-plus"
-        title="Add"
-        color="green"
-        type="submit"
-        @click="emitAdd()"
-      ></v-btn>
-      <v-btn
-        v-else
-        density="comfortable"
-        icon="mdi-trash-can-outline"
-        title="Delete"
-        type="submit"
-        @click="emitDel()"
-      ></v-btn>
+    <v-row class="align-center">
+      <v-col cols="2">
+        <v-text-field
+          label="Name"
+          variant="outlined"
+          v-model.trim="supplier.name"
+          placeholder=""
+          :rules="[(v: any) => !!v || 'Required']"
+          required
+          :readonly="!props.create"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="3">
+        <v-text-field
+          label="Link"
+          variant="outlined"
+          v-model.trim="supplier.link"
+          placeholder="https://"
+          :readonly="!props.create"
+          :dirty="!props.create"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="2">
+        <v-text-field
+          label="Price"
+          variant="outlined"
+          v-model.number="supplier.price"
+          type="number"
+          min="0"
+          :readonly="!props.create"
+          :dirty="!props.create"
+        ></v-text-field>
+      </v-col>
+      <v-col>
+        <v-text-field
+          label="Note"
+          variant="outlined"
+          v-model.trim="supplier.note"
+          placeholder=""
+          :readonly="!props.create"
+          :dirty="!props.create"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="auto" class="mb-6">
+        <v-btn
+          v-if="props.create"
+          density="comfortable"
+          icon="mdi-plus"
+          title="Add"
+          color="green"
+          type="submit"
+          @click="emitAdd()"
+        ></v-btn>
+        <v-btn
+          v-else
+          density="comfortable"
+          icon="mdi-trash-can-outline"
+          title="Delete"
+          type="submit"
+          @click="emitDel()"
+        ></v-btn>
+      </v-col>
     </v-row>
   </v-form>
 </template>
diff --git a/elebox-tauri/src/views/Part.vue b/elebox-tauri/src/views/Part.vue
index a36383f..5f71176 100644
--- a/elebox-tauri/src/views/Part.vue
+++ b/elebox-tauri/src/views/Part.vue
@@ -1,14 +1,16 @@
 <script setup lang="ts">
+import "../styles.css";
 import { onMounted, ref, reactive } from "vue";
-import { CustomField, PkgType, Supplier } from "../interface";
-import PartCustomField from "../components/PartCustomField.vue";
-import PartSupplier from "../components/PartSupplier.vue";
-import { useRoute } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 import { DbPart } from "../db_cmd_part";
 import { DbCategory } from "../db_cmd_category";
-import { DbManufacturer as DbMfr } from "../db_cmd_manufacturer";
 import { DbPackage } from "../db_cmd_package";
+import { DbManufacturer as DbMfr } from "../db_cmd_manufacturer";
+import { CustomField, PkgType, Supplier } from "../interface";
+import PartCustomField from "../components/PartCustomField.vue";
+import PartSupplier from "../components/PartSupplier.vue";
 
+const router = useRouter();
 const origin_name = ref<string>("");
 const part = ref<DbPart.Part>({
   name: "",
@@ -66,6 +68,7 @@ async function newPart() {
   part.value.custom_fields = custom_fields;
   part.value.suppliers = suppliers;
   await DbPart.add(part.value);
+  router.replace("/"); // Back to home
 }
 
 async function updatePart() {
@@ -93,6 +96,7 @@ async function updatePart() {
   part.value.custom_fields = custom_fields;
   part.value.suppliers = suppliers;
   await DbPart.update(origin_name.value, part.value);
+  router.replace("/"); // Back to home
 }
 
 async function getCategories() {
@@ -177,133 +181,170 @@ onMounted(() => {
 <template>
   <v-form @submit.prevent>
     <v-container>
-      <v-row class="mb-3 ga-8" align="center">
-        <v-btn v-if="origin_name == ''" type="submit" @click="newPart"
-          >ADD</v-btn
-        >
-        <v-btn v-else @click="updatePart">Update</v-btn>
-        <v-switch
-          true-icon="mdi-star"
-          v-model="part.starred"
-          :true-value="true"
-          :false-value="false"
-          color="#fcba03"
-          label="Star"
-          hide-details
-        ></v-switch>
+      <v-row align="center">
+        <v-col>Part</v-col>
+        <v-spacer></v-spacer>
+        <v-col cols="auto">
+          <v-switch
+            true-icon="mdi-star"
+            v-model="part.starred"
+            :true-value="true"
+            :false-value="false"
+            color="#fcba03"
+            label="Star"
+            hide-details
+          ></v-switch>
+        </v-col>
+        <v-col cols="1">
+          <v-btn
+            v-if="origin_name == ''"
+            type="submit"
+            @click="newPart"
+            text="Add"
+          ></v-btn>
+          <v-btn v-else type="submit" @click="updatePart" text="Update"></v-btn>
+        </v-col>
       </v-row>
-      <v-row class="ga-8">
-        <v-text-field
-          label="Name"
-          variant="outlined"
-          v-model="part.name"
-          placeholder="RP2040"
-          :rules="[(v: any) => !!v || 'Required']"
-          required
-        ></v-text-field>
-        <v-text-field
-          label="Quantity"
-          variant="outlined"
-          v-model.number="qty_input"
-          placeholder="15"
-          :rules="[(v: any) => !!v || 'Required']"
-          required
-          type="number"
-          min="0"
-        ></v-text-field>
-        <v-autocomplete
-          label="Category"
-          variant="outlined"
-          v-model="part.category"
-          :items="Object.values(categories).map((cat) => cat.name)"
-          :rules="[(v: any) => !!v || 'Required']"
-        ></v-autocomplete>
+      <v-row>
+        <v-col>
+          <v-text-field
+            label="Name"
+            variant="outlined"
+            v-model="part.name"
+            placeholder="RP2040"
+            :rules="[(v: any) => !!v || 'Required']"
+            required
+          ></v-text-field>
+        </v-col>
+        <v-col cols="4">
+          <v-autocomplete
+            label="Category"
+            variant="outlined"
+            v-model="part.category"
+            :items="Object.values(categories).map((cat) => cat.name)"
+            :rules="[(v: any) => !!v || 'Required']"
+          ></v-autocomplete>
+        </v-col>
+        <v-col cols="3">
+          <v-text-field
+            label="Quantity"
+            variant="outlined"
+            v-model.number="qty_input"
+            placeholder="15"
+            :rules="[(v: any) => !!v || 'Required']"
+            required
+            type="number"
+            min="0"
+          ></v-text-field>
+        </v-col>
       </v-row>
 
-      <v-divider class="ma-8"></v-divider>
-
-      <v-row class="ga-8">
-        <v-autocomplete
-          label="Package"
-          variant="outlined"
-          v-model="part.package"
-          :items="Object.values(packages).map((pck) => pck.name)"
-        ></v-autocomplete>
-        <v-text-field
-          label="Package Detail"
-          variant="outlined"
-          v-model="part.package_detail"
-          placeholder="7x7mm P0.4mm 1EP3.2x32.mm"
-        ></v-text-field>
-        <v-autocomplete
-          label="Manufacturer"
-          variant="outlined"
-          v-model="part.mfr"
-          :items="Object.values(mfrs).map((mfr) => mfr.name)"
-        ></v-autocomplete>
-        <v-text-field
-          label="Location"
-          variant="outlined"
-          v-model="part.location"
-          placeholder="Box #1"
-        ></v-text-field>
+      <v-divider class="my-6"></v-divider>
+
+      <v-row class="mb-n6">
+        <v-col>
+          <v-autocomplete
+            label="Package"
+            variant="outlined"
+            v-model="part.package"
+            :items="Object.values(packages).map((pck) => pck.name)"
+          ></v-autocomplete>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Package Detail"
+            variant="outlined"
+            v-model="part.package_detail"
+            placeholder="P0.4mm EP3.2x3.2mm"
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-autocomplete
+            label="Manufacturer"
+            variant="outlined"
+            v-model="part.mfr"
+            :items="Object.values(mfrs).map((mfr) => mfr.name)"
+          ></v-autocomplete>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Mfr #"
+            variant="outlined"
+            v-model="part.mfr_no"
+            placeholder="SC0914(7)"
+            title="Manufacturer part number"
+          ></v-text-field>
+        </v-col>
       </v-row>
-      <v-row class="ga-8">
-        <v-text-field
-          label="Alias"
-          variant="outlined"
-          v-model="part.alias"
-          placeholder=""
-        ></v-text-field>
-        <v-text-field
-          label="Mfr #"
-          variant="outlined"
-          v-model="part.mfr_no"
-          placeholder="SC0914(7)"
-          title="Manufacturer part number"
-        ></v-text-field>
+      <v-row class="mb-n6">
+        <v-col>
+          <v-text-field
+            label="Alias"
+            variant="outlined"
+            v-model="part.alias"
+            placeholder=""
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Location"
+            variant="outlined"
+            v-model="part.location"
+            placeholder="Box #1"
+          ></v-text-field>
+        </v-col>
       </v-row>
-      <v-row class="ga-8">
-        <v-text-field
-          label="Product"
-          variant="outlined"
-          v-model="part.product_link"
-          placeholder="URL, full path or filename"
-        ></v-text-field>
-        <v-text-field
-          label="Datasheet"
-          variant="outlined"
-          v-model="part.datasheet_link"
-          placeholder="URL, full path or filename"
-        ></v-text-field>
-        <v-text-field
-          label="Image"
-          variant="outlined"
-          v-model="part.image_link"
-          placeholder="URL, full path or filename"
-        ></v-text-field>
+      <v-row class="mb-n6">
+        <v-col>
+          <v-text-field
+            label="Product Link"
+            variant="outlined"
+            v-model="part.product_link"
+            placeholder="https://"
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Datasheet Link"
+            variant="outlined"
+            v-model="part.datasheet_link"
+            placeholder="https://"
+          ></v-text-field>
+        </v-col>
+        <v-col>
+          <v-text-field
+            label="Image Link"
+            variant="outlined"
+            v-model="part.image_link"
+            placeholder="https://"
+          ></v-text-field>
+        </v-col>
       </v-row>
-      <v-row class="ga-8">
-        <v-textarea
-          label="Description"
-          variant="outlined"
-          v-model="part.description"
-          placeholder="Write something ..."
-        ></v-textarea>
+      <v-row class="mb-n6">
+        <v-col>
+          <v-textarea
+            label="Description"
+            variant="outlined"
+            v-model="part.description"
+            placeholder="Write something ..."
+          ></v-textarea>
+        </v-col>
       </v-row>
 
-      <v-card title="Custom Fields" variant="flat" class="mb-2">
-        <v-container>
-          <v-row class="ma-2" v-for="cf in custom_fields">
+      <v-divider class="my-6"></v-divider>
+
+      <v-row>
+        <v-col>
+          <v-card title="Custom Fields" variant="text">
+            <v-spacer class="my-2"></v-spacer>
             <PartCustomField
+              v-for="cf in custom_fields"
               :field_type="cf.field_type"
               :name="cf.name"
               :value="cf.value"
               :create="false"
               @del="handleCustomFieldDel"
             />
-          </v-row>
-          <v-row class="ma-2">
             <PartCustomField
               :field_type="new_custom_field.field_type"
               :name="new_custom_field.name"
@@ -312,14 +353,16 @@ onMounted(() => {
               @update="handleCustomFieldUpdate"
               @add="handleCustomFieldAdd"
             />
-          </v-row>
-        </v-container>
-      </v-card>
+          </v-card>
+        </v-col>
+      </v-row>
 
-      <v-card title="Suppliers" variant="flat">
-        <v-container>
-          <v-row class="ma-2" v-for="s in suppliers">
+      <v-row>
+        <v-col>
+          <v-card title="Suppliers" variant="text">
+            <v-spacer class="my-2"></v-spacer>
             <PartSupplier
+              v-for="s in suppliers"
               :name="s.name"
               :link="s.link"
               :price="s.price"
@@ -327,8 +370,6 @@ onMounted(() => {
               :create="false"
               @del="handleSupplierDel"
             />
-          </v-row>
-          <v-row class="ma-2">
             <PartSupplier
               :name="new_supplier.name"
               :link="new_supplier.link"
@@ -338,9 +379,9 @@ onMounted(() => {
               @update="handleSupplierUpdate"
               @add="handleSupplierAdd"
             />
-          </v-row>
-        </v-container>
-      </v-card>
+          </v-card>
+        </v-col>
+      </v-row>
     </v-container>
   </v-form>
 </template>

From 578835bb5c484c3562b1cf3e8f2fafbd3148e904 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Fri, 19 Jul 2024 23:42:28 +0800
Subject: [PATCH 12/17] feat(tauri): update category, Mfr and package page
 layout

---
 elebox-tauri/src/components/CategoryField.vue | 30 ++++++++++++-------
 elebox-tauri/src/components/CategoryList.vue  |  1 +
 .../src/components/ManufacturerField.vue      | 27 ++++++++++++-----
 .../src/components/ManufacturerList.vue       |  1 +
 elebox-tauri/src/components/PackageField.vue  | 27 ++++++++++++-----
 elebox-tauri/src/components/PackageList.vue   |  1 +
 elebox-tauri/src/views/CategoriesTree.vue     |  1 +
 elebox-tauri/src/views/Category.vue           |  2 ++
 elebox-tauri/src/views/CategoryEdit.vue       |  3 +-
 elebox-tauri/src/views/Manufacturer.vue       |  1 +
 elebox-tauri/src/views/ManufacturerEdit.vue   |  3 +-
 elebox-tauri/src/views/Package.vue            |  1 +
 elebox-tauri/src/views/PackageEdit.vue        |  3 +-
 elebox-tauri/src/views/Part.vue               |  2 +-
 14 files changed, 73 insertions(+), 30 deletions(-)

diff --git a/elebox-tauri/src/components/CategoryField.vue b/elebox-tauri/src/components/CategoryField.vue
index c3b65b7..5546cae 100644
--- a/elebox-tauri/src/components/CategoryField.vue
+++ b/elebox-tauri/src/components/CategoryField.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { onMounted, ref, reactive } from "vue";
 import { DbCategory as Db } from "../db_cmd_category";
 
@@ -32,9 +33,7 @@ async function update() {
 async function list() {
   const data = await Db.list();
 
-  if (props.origin_name) {
-    data.splice(0, 0, { name: "" }); // Root
-  }
+  data.splice(0, 0, { name: "" }); // Root
   Object.assign(categories, data);
 
   console.debug(`get categories: ${categories.length}`);
@@ -55,9 +54,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-form>
-    <v-container>
-      <v-row class="ga-8">
+  <v-form @submit.prevent>
+    <v-row class="align-center pb-2">
+      <v-col>
         <v-text-field
           label="Name"
           variant="outlined"
@@ -66,21 +65,32 @@ onMounted(() => {
           :rules="[(v: any) => !!v || 'Required']"
           required
         ></v-text-field>
+      </v-col>
+      <v-col>
         <v-text-field
           label="Alias"
           variant="outlined"
           v-model="category.alias"
           placeholder=""
         ></v-text-field>
+      </v-col>
+      <v-col>
         <v-select
           label="Parent"
           :items="Object.values(categories).map((c) => c.name)"
           variant="outlined"
           v-model="category.parent"
         ></v-select>
-        <v-btn v-if="props.origin_name === undefined" @click="add">Add</v-btn>
-        <v-btn v-else @click="update">Update</v-btn>
-      </v-row>
-    </v-container>
+      </v-col>
+      <v-col cols="auto" class="mb-6">
+        <v-btn
+          v-if="props.origin_name === undefined"
+          @click="add"
+          type="submit"
+          text="Add"
+        ></v-btn>
+        <v-btn v-else @click="update" type="submit" text="Update"></v-btn>
+      </v-col>
+    </v-row>
   </v-form>
 </template>
diff --git a/elebox-tauri/src/components/CategoryList.vue b/elebox-tauri/src/components/CategoryList.vue
index d972255..f340fa4 100644
--- a/elebox-tauri/src/components/CategoryList.vue
+++ b/elebox-tauri/src/components/CategoryList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { onMounted, reactive, ref } from "vue";
 import { DbCategory as Db } from "../db_cmd_category";
 import ItemEditButton from "./ItemEditButton.vue";
diff --git a/elebox-tauri/src/components/ManufacturerField.vue b/elebox-tauri/src/components/ManufacturerField.vue
index a9204a6..9ef5376 100644
--- a/elebox-tauri/src/components/ManufacturerField.vue
+++ b/elebox-tauri/src/components/ManufacturerField.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { onMounted, ref } from "vue";
 import { DbManufacturer as Db } from "../db_cmd_manufacturer";
 
@@ -35,9 +36,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-form>
-    <v-container>
-      <v-row class="ga-8">
+  <v-form @submit.prevent>
+    <v-row class="align-center pb-2">
+      <v-col>
         <v-text-field
           label="Name"
           variant="outlined"
@@ -46,22 +47,32 @@ onMounted(() => {
           :rules="[(v: any) => !!v || 'Required']"
           required
         ></v-text-field>
+      </v-col>
+      <v-col>
         <v-text-field
           label="Alias"
           variant="outlined"
           v-model="mfr.alias"
           placeholder="TI"
         ></v-text-field>
+      </v-col>
+      <v-col>
         <v-text-field
           label="Url"
           variant="outlined"
           v-model="mfr.url"
           placeholder="https://"
         ></v-text-field>
-
-        <v-btn v-if="props.origin_name === undefined" @click="add">Add</v-btn>
-        <v-btn v-else @click="update">Update</v-btn>
-      </v-row>
-    </v-container>
+      </v-col>
+      <v-col cols="auto" class="mb-6">
+        <v-btn
+          v-if="props.origin_name === undefined"
+          @click="add"
+          type="submit"
+          text="Add"
+        ></v-btn>
+        <v-btn v-else @click="update" type="submit" text="Update"></v-btn>
+      </v-col>
+    </v-row>
   </v-form>
 </template>
diff --git a/elebox-tauri/src/components/ManufacturerList.vue b/elebox-tauri/src/components/ManufacturerList.vue
index 948ecb5..beadc6b 100644
--- a/elebox-tauri/src/components/ManufacturerList.vue
+++ b/elebox-tauri/src/components/ManufacturerList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { onMounted, reactive, ref } from "vue";
 import { DbManufacturer as Db } from "../db_cmd_manufacturer";
 import ItemEditButton from "./ItemEditButton.vue";
diff --git a/elebox-tauri/src/components/PackageField.vue b/elebox-tauri/src/components/PackageField.vue
index d7b0ccf..bce228c 100644
--- a/elebox-tauri/src/components/PackageField.vue
+++ b/elebox-tauri/src/components/PackageField.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { onMounted, ref } from "vue";
 import { DbPackage as Db } from "../db_cmd_package";
 import { PkgType } from "../interface"; // TODO to db_cmd_package
@@ -60,9 +61,9 @@ onMounted(() => {
 </script>
 
 <template>
-  <v-form>
-    <v-container>
-      <v-row class="ga-8">
+  <v-form @submit.prevent>
+    <v-row class="align-center pb-2">
+      <v-col>
         <v-select
           label="Type"
           :items="['SMT', 'THT', 'Others']"
@@ -71,6 +72,8 @@ onMounted(() => {
           :rules="[(v: any) => !!v || 'Required']"
           required
         ></v-select>
+      </v-col>
+      <v-col>
         <v-text-field
           label="Name"
           variant="outlined"
@@ -79,16 +82,24 @@ onMounted(() => {
           :rules="[(v: any) => !!v || 'Required']"
           required
         ></v-text-field>
+      </v-col>
+      <v-col>
         <v-text-field
           label="Alias"
           variant="outlined"
           v-model.trim="pkg.alias"
           placeholder=""
         ></v-text-field>
-
-        <v-btn v-if="props.origin_name === undefined" @click="add">Add</v-btn>
-        <v-btn v-else @click="update">Update</v-btn>
-      </v-row>
-    </v-container>
+      </v-col>
+      <v-col cols="auto" class="mb-6">
+        <v-btn
+          v-if="props.origin_name === undefined"
+          @click="add"
+          type="submit"
+          text="Add"
+        ></v-btn>
+        <v-btn v-else @click="update" type="submit" text="Update"></v-btn>
+      </v-col>
+    </v-row>
   </v-form>
 </template>
diff --git a/elebox-tauri/src/components/PackageList.vue b/elebox-tauri/src/components/PackageList.vue
index a9b092b..a4de05b 100644
--- a/elebox-tauri/src/components/PackageList.vue
+++ b/elebox-tauri/src/components/PackageList.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { onMounted, reactive, ref } from "vue";
 import { DbPackage as Db } from "../db_cmd_package";
 import ItemEditButton from "./ItemEditButton.vue";
diff --git a/elebox-tauri/src/views/CategoriesTree.vue b/elebox-tauri/src/views/CategoriesTree.vue
index 7d8a1a1..4c17e3b 100644
--- a/elebox-tauri/src/views/CategoriesTree.vue
+++ b/elebox-tauri/src/views/CategoriesTree.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { onMounted, ref } from "vue";
 import { invoke } from "@tauri-apps/api/tauri";
 import TreeItem from "../components/TreeItem.vue";
diff --git a/elebox-tauri/src/views/Category.vue b/elebox-tauri/src/views/Category.vue
index 75dbabb..8bcde8a 100644
--- a/elebox-tauri/src/views/Category.vue
+++ b/elebox-tauri/src/views/Category.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import { ref } from "vue";
 import CategoryField from "../components/CategoryField.vue";
 import CategoryList from "../components/CategoryList.vue";
@@ -16,6 +17,7 @@ const displayTree = ref(false);
       false-icon="mdi-view-list"
       true-icon="mdi-file-tree"
       v-model="displayTree"
+      class="my-n4"
     ></v-switch>
 
     <CategoryList v-if="!displayTree" />
diff --git a/elebox-tauri/src/views/CategoryEdit.vue b/elebox-tauri/src/views/CategoryEdit.vue
index 852b944..2e854c1 100644
--- a/elebox-tauri/src/views/CategoryEdit.vue
+++ b/elebox-tauri/src/views/CategoryEdit.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import CategoryField from "../components/CategoryField.vue";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
@@ -13,7 +14,7 @@ onMounted(() => {
 
 <template>
   <v-container v-if="name !== undefined">
-    <h1>Edit Category</h1>
+    <h1 class="mb-8">Edit Category</h1>
     <CategoryField :origin_name="name" />
   </v-container>
 </template>
diff --git a/elebox-tauri/src/views/Manufacturer.vue b/elebox-tauri/src/views/Manufacturer.vue
index 0de19c1..0483b0b 100644
--- a/elebox-tauri/src/views/Manufacturer.vue
+++ b/elebox-tauri/src/views/Manufacturer.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import ManufacturerField from "../components/ManufacturerField.vue";
 import ManufacturerList from "../components/ManufacturerList.vue";
 </script>
diff --git a/elebox-tauri/src/views/ManufacturerEdit.vue b/elebox-tauri/src/views/ManufacturerEdit.vue
index 8b332ab..108251f 100644
--- a/elebox-tauri/src/views/ManufacturerEdit.vue
+++ b/elebox-tauri/src/views/ManufacturerEdit.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import ManufacturerField from "../components/ManufacturerField.vue";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
@@ -13,7 +14,7 @@ onMounted(() => {
 
 <template>
   <v-container v-if="name !== undefined">
-    <h1>Edit Manufacturer</h1>
+    <h1 class="mb-8">Edit Manufacturer</h1>
     <ManufacturerField :origin_name="name" />
   </v-container>
 </template>
diff --git a/elebox-tauri/src/views/Package.vue b/elebox-tauri/src/views/Package.vue
index 8af74b2..843d166 100644
--- a/elebox-tauri/src/views/Package.vue
+++ b/elebox-tauri/src/views/Package.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import PackageField from "../components/PackageField.vue";
 import PackageList from "../components/PackageList.vue";
 </script>
diff --git a/elebox-tauri/src/views/PackageEdit.vue b/elebox-tauri/src/views/PackageEdit.vue
index 511a6da..b56c79f 100644
--- a/elebox-tauri/src/views/PackageEdit.vue
+++ b/elebox-tauri/src/views/PackageEdit.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import "../styles.css";
 import PackageField from "../components/PackageField.vue";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
@@ -13,7 +14,7 @@ onMounted(() => {
 
 <template>
   <v-container v-if="name !== undefined">
-    <h1>Edit Package</h1>
+    <h1 class="mb-8">Edit Package</h1>
     <PackageField :origin_name="name" />
   </v-container>
 </template>
diff --git a/elebox-tauri/src/views/Part.vue b/elebox-tauri/src/views/Part.vue
index 5f71176..e2ae05b 100644
--- a/elebox-tauri/src/views/Part.vue
+++ b/elebox-tauri/src/views/Part.vue
@@ -182,7 +182,7 @@ onMounted(() => {
   <v-form @submit.prevent>
     <v-container>
       <v-row align="center">
-        <v-col>Part</v-col>
+        <v-col><h1>Part</h1></v-col>
         <v-spacer></v-spacer>
         <v-col cols="auto">
           <v-switch

From 5d78df0b98809d34a7958cc102c8fb98961df9af Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Fri, 19 Jul 2024 23:54:23 +0800
Subject: [PATCH 13/17] feat(tauri): update settings page layout

---
 elebox-tauri/src/components/DbPath.vue | 22 +++++++-----
 elebox-tauri/src/views/Settings.vue    | 46 +++++++++++++++++---------
 2 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/elebox-tauri/src/components/DbPath.vue b/elebox-tauri/src/components/DbPath.vue
index c9572c1..10460a1 100644
--- a/elebox-tauri/src/components/DbPath.vue
+++ b/elebox-tauri/src/components/DbPath.vue
@@ -18,14 +18,18 @@ onMounted(getPath);
 </script>
 
 <template>
-  <v-row>
-    <!-- <v-file-input label="Database file" variant="outlined" v-model="path" placeholder="elebox.db"></v-file-input> -->
-    <v-text-field
-      label="Database Path"
-      variant="outlined"
-      v-model="path"
-      placeholder="elebox.db"
-    ></v-text-field>
-    <v-btn @click="setPath">Apply</v-btn>
+  <!-- <v-file-input label="Database file" variant="outlined" v-model="path" placeholder="elebox.db"></v-file-input> -->
+  <v-row class="align-center">
+    <v-col>
+      <v-text-field
+        label="Database Path"
+        variant="outlined"
+        v-model="path"
+        placeholder="elebox.db"
+      ></v-text-field>
+    </v-col>
+    <v-col cols="auto" class="mb-6">
+      <v-btn @click="setPath" text="Apply"></v-btn>
+    </v-col>
   </v-row>
 </template>
diff --git a/elebox-tauri/src/views/Settings.vue b/elebox-tauri/src/views/Settings.vue
index 61f6e01..9591687 100644
--- a/elebox-tauri/src/views/Settings.vue
+++ b/elebox-tauri/src/views/Settings.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
-import DbPath from "../components/DbPath.vue";
+import "../styles.css";
 import { ref } from "vue";
 import { invoke } from "@tauri-apps/api/tauri";
+import DbPath from "../components/DbPath.vue";
 
 const csv_path = ref("");
 
@@ -17,22 +18,35 @@ async function import_csv() {
 </script>
 
 <template>
-  <v-container class="d-flex flex-column">
-    <DbPath />
+  <v-container>
     <v-row>
-      <v-text-field
-        label="CSV Path"
-        variant="outlined"
-        v-model="csv_path"
-        placeholder="path\to\folder\"
-      ></v-text-field>
-      <v-btn @click="export_csv">Export</v-btn>
-      <v-btn @click="import_csv">Import</v-btn>
+      <h1 class="mb-8">Settings</h1>
+    </v-row>
+    <DbPath />
+    <v-row class="align-center">
+      <v-col>
+        <v-text-field
+          label="CSV Path"
+          variant="outlined"
+          v-model="csv_path"
+          placeholder="path\to\folder\"
+        ></v-text-field>
+      </v-col>
+      <v-col cols="auto" class="mb-6">
+        <v-btn @click="export_csv">Export</v-btn>
+      </v-col>
+      <v-col cols="auto" class="mb-6">
+        <v-btn @click="import_csv">Import</v-btn>
+      </v-col>
+    </v-row>
+    <v-row class="align-center">
+      <v-spacer></v-spacer>
+      <v-col cols="auto">
+        <v-label>Version</v-label>
+      </v-col>
+      <v-col cols="auto">
+        <code>1.0.0-beta.2</code>
+      </v-col>
     </v-row>
-    <div class="flex-fill"></div>
-    <div class="d-flex align-end ga-2 mt-auto">
-      <v-label>Version</v-label>
-      <code>1.0.0-beta.2</code>
-    </div>
   </v-container>
 </template>

From 8893041c4047b73ac07656774ba80a8cfbe3339c Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Sat, 20 Jul 2024 01:18:29 +0800
Subject: [PATCH 14/17] feat(tauri): update styles

---
 elebox-tauri/src/App.vue                      | 63 ++++++++++++++++---
 elebox-tauri/src/components/CategoryField.vue |  1 -
 elebox-tauri/src/components/CategoryList.vue  |  1 -
 .../src/components/ManufacturerField.vue      |  1 -
 .../src/components/ManufacturerList.vue       |  1 -
 elebox-tauri/src/components/PackageField.vue  |  1 -
 elebox-tauri/src/components/PackageList.vue   |  1 -
 .../src/components/PartCustomField.vue        |  1 -
 elebox-tauri/src/components/PartSupplier.vue  |  1 -
 elebox-tauri/src/main.ts                      | 28 ++++-----
 elebox-tauri/src/views/CategoriesTree.vue     |  1 -
 elebox-tauri/src/views/Category.vue           |  1 -
 elebox-tauri/src/views/CategoryEdit.vue       |  1 -
 elebox-tauri/src/views/Home.vue               |  3 -
 elebox-tauri/src/views/Manufacturer.vue       |  1 -
 elebox-tauri/src/views/ManufacturerEdit.vue   |  1 -
 elebox-tauri/src/views/Package.vue            |  1 -
 elebox-tauri/src/views/PackageEdit.vue        |  1 -
 elebox-tauri/src/views/Part.vue               |  1 -
 elebox-tauri/src/views/PartDetail.vue         |  1 -
 elebox-tauri/src/views/Settings.vue           |  1 -
 21 files changed, 69 insertions(+), 43 deletions(-)

diff --git a/elebox-tauri/src/App.vue b/elebox-tauri/src/App.vue
index ae69481..55aaa07 100644
--- a/elebox-tauri/src/App.vue
+++ b/elebox-tauri/src/App.vue
@@ -1,12 +1,27 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { computed } from "vue";
+import { useDisplay } from "vuetify";
+
+const { xs, sm } = useDisplay();
+const isExtraSmall = computed(() => xs.value);
+const isSmall = computed(() => sm.value);
+</script>
 
 <template>
-  <v-app class="pa-4">
-    <v-navigation-drawer expand-on-hover rail mobile-breakpoint="sm">
-      <v-list density="compact" nav>
-        <v-list-item prepend-icon="mdi-home" title="Home" to="/"></v-list-item>
+  <v-app>
+    <v-navigation-drawer
+      :permanent="!isExtraSmall"
+      :expand-on-hover="isSmall"
+      :rail="isSmall"
+    >
+      <v-list density="compact" nav class="d-flex flex-column flex-grow-1">
+        <v-list-item
+          prepend-icon="mdi-home"
+          title="Home"
+          :to="{ name: 'home' }"
+        ></v-list-item>
 
-        <v-divider class="pa-1"></v-divider>
+        <v-divider class="my-2"></v-divider>
 
         <v-list-item
           prepend-icon="mdi-archive-plus"
@@ -28,12 +43,38 @@
           title="Manufacturers"
           :to="{ name: 'mfrs' }"
         ></v-list-item>
-        <v-list-item
+
+        <!-- <v-spacer class="flex-grow-1"></v-spacer> -->
+
+        <!-- <v-list-item
           prepend-icon="mdi-cog"
           title="Settings"
           :to="{ name: 'settings' }"
-        ></v-list-item>
+        ></v-list-item> -->
       </v-list>
+
+      <template v-slot:append>
+        <div class="pa-4">
+          <v-btn
+            v-if="isSmall || isExtraSmall"
+            icon="mdi-cog"
+            text="Settings"
+            variant="text"
+            title="Settings"
+            :to="{ name: 'settings' }"
+          >
+          </v-btn>
+          <v-btn
+            v-else
+            block
+            prepend-icon="mdi-cog"
+            text="Settings"
+            variant="tonal"
+            :to="{ name: 'settings' }"
+          >
+          </v-btn>
+        </div>
+      </template>
     </v-navigation-drawer>
 
     <v-main>
@@ -41,3 +82,9 @@
     </v-main>
   </v-app>
 </template>
+
+<style scoped>
+.flex-grow-1 {
+  flex-grow: 1;
+}
+</style>
diff --git a/elebox-tauri/src/components/CategoryField.vue b/elebox-tauri/src/components/CategoryField.vue
index 5546cae..36fe31e 100644
--- a/elebox-tauri/src/components/CategoryField.vue
+++ b/elebox-tauri/src/components/CategoryField.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { onMounted, ref, reactive } from "vue";
 import { DbCategory as Db } from "../db_cmd_category";
 
diff --git a/elebox-tauri/src/components/CategoryList.vue b/elebox-tauri/src/components/CategoryList.vue
index f340fa4..d972255 100644
--- a/elebox-tauri/src/components/CategoryList.vue
+++ b/elebox-tauri/src/components/CategoryList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { onMounted, reactive, ref } from "vue";
 import { DbCategory as Db } from "../db_cmd_category";
 import ItemEditButton from "./ItemEditButton.vue";
diff --git a/elebox-tauri/src/components/ManufacturerField.vue b/elebox-tauri/src/components/ManufacturerField.vue
index 9ef5376..b809513 100644
--- a/elebox-tauri/src/components/ManufacturerField.vue
+++ b/elebox-tauri/src/components/ManufacturerField.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { onMounted, ref } from "vue";
 import { DbManufacturer as Db } from "../db_cmd_manufacturer";
 
diff --git a/elebox-tauri/src/components/ManufacturerList.vue b/elebox-tauri/src/components/ManufacturerList.vue
index beadc6b..948ecb5 100644
--- a/elebox-tauri/src/components/ManufacturerList.vue
+++ b/elebox-tauri/src/components/ManufacturerList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { onMounted, reactive, ref } from "vue";
 import { DbManufacturer as Db } from "../db_cmd_manufacturer";
 import ItemEditButton from "./ItemEditButton.vue";
diff --git a/elebox-tauri/src/components/PackageField.vue b/elebox-tauri/src/components/PackageField.vue
index bce228c..bb63d2e 100644
--- a/elebox-tauri/src/components/PackageField.vue
+++ b/elebox-tauri/src/components/PackageField.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { onMounted, ref } from "vue";
 import { DbPackage as Db } from "../db_cmd_package";
 import { PkgType } from "../interface"; // TODO to db_cmd_package
diff --git a/elebox-tauri/src/components/PackageList.vue b/elebox-tauri/src/components/PackageList.vue
index a4de05b..a9b092b 100644
--- a/elebox-tauri/src/components/PackageList.vue
+++ b/elebox-tauri/src/components/PackageList.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { onMounted, reactive, ref } from "vue";
 import { DbPackage as Db } from "../db_cmd_package";
 import ItemEditButton from "./ItemEditButton.vue";
diff --git a/elebox-tauri/src/components/PartCustomField.vue b/elebox-tauri/src/components/PartCustomField.vue
index a8f0423..7018368 100644
--- a/elebox-tauri/src/components/PartCustomField.vue
+++ b/elebox-tauri/src/components/PartCustomField.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { ref, watch } from "vue";
 import { CustomField } from "../interface";
 
diff --git a/elebox-tauri/src/components/PartSupplier.vue b/elebox-tauri/src/components/PartSupplier.vue
index 0e16166..cad6f4c 100644
--- a/elebox-tauri/src/components/PartSupplier.vue
+++ b/elebox-tauri/src/components/PartSupplier.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { ref, watch } from "vue";
 import { Supplier } from "../interface";
 
diff --git a/elebox-tauri/src/main.ts b/elebox-tauri/src/main.ts
index 949b4db..33701c3 100644
--- a/elebox-tauri/src/main.ts
+++ b/elebox-tauri/src/main.ts
@@ -1,22 +1,22 @@
 import { createApp } from "vue";
-// import "./styles.css";
-import router from './router.js';
+import router from "./router.js";
 import App from "./App.vue";
 
 // Vuetify
-import 'vuetify/styles'
-import { createVuetify } from 'vuetify'
-import * as components from 'vuetify/components'
-import * as directives from 'vuetify/directives'
-import '@mdi/font/css/materialdesignicons.css' // icon
-
+import "vuetify/styles";
+import { createVuetify } from "vuetify";
+import * as components from "vuetify/components";
+import * as directives from "vuetify/directives";
+import "@mdi/font/css/materialdesignicons.css"; // icon
 
 const vuetify = createVuetify({
-    theme: {
-        defaultTheme: "dark"
-    },
-    components,
-    directives,
-})
+  theme: {
+    defaultTheme: "dark",
+  },
+  components,
+  directives,
+});
+
+import "./styles.css";
 
 createApp(App).use(vuetify).use(router).mount("#app");
diff --git a/elebox-tauri/src/views/CategoriesTree.vue b/elebox-tauri/src/views/CategoriesTree.vue
index 4c17e3b..7d8a1a1 100644
--- a/elebox-tauri/src/views/CategoriesTree.vue
+++ b/elebox-tauri/src/views/CategoriesTree.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { onMounted, ref } from "vue";
 import { invoke } from "@tauri-apps/api/tauri";
 import TreeItem from "../components/TreeItem.vue";
diff --git a/elebox-tauri/src/views/Category.vue b/elebox-tauri/src/views/Category.vue
index 8bcde8a..1dbb958 100644
--- a/elebox-tauri/src/views/Category.vue
+++ b/elebox-tauri/src/views/Category.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { ref } from "vue";
 import CategoryField from "../components/CategoryField.vue";
 import CategoryList from "../components/CategoryList.vue";
diff --git a/elebox-tauri/src/views/CategoryEdit.vue b/elebox-tauri/src/views/CategoryEdit.vue
index 2e854c1..c56519d 100644
--- a/elebox-tauri/src/views/CategoryEdit.vue
+++ b/elebox-tauri/src/views/CategoryEdit.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import CategoryField from "../components/CategoryField.vue";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
diff --git a/elebox-tauri/src/views/Home.vue b/elebox-tauri/src/views/Home.vue
index 0498493..abb235d 100644
--- a/elebox-tauri/src/views/Home.vue
+++ b/elebox-tauri/src/views/Home.vue
@@ -4,9 +4,6 @@ import { Part } from "../interface";
 import { useRouter, useRoute } from "vue-router";
 import { DbPart } from "../db_cmd_part";
 import PartQty from "../components/PartQty.vue";
-import PartDel from "../components/PartDel.vue";
-import ItemEditButton from "../components/ItemEditButton.vue";
-import "../styles.css";
 
 let parts = reactive<Part[]>([]);
 
diff --git a/elebox-tauri/src/views/Manufacturer.vue b/elebox-tauri/src/views/Manufacturer.vue
index 0483b0b..0de19c1 100644
--- a/elebox-tauri/src/views/Manufacturer.vue
+++ b/elebox-tauri/src/views/Manufacturer.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import ManufacturerField from "../components/ManufacturerField.vue";
 import ManufacturerList from "../components/ManufacturerList.vue";
 </script>
diff --git a/elebox-tauri/src/views/ManufacturerEdit.vue b/elebox-tauri/src/views/ManufacturerEdit.vue
index 108251f..f7b76ea 100644
--- a/elebox-tauri/src/views/ManufacturerEdit.vue
+++ b/elebox-tauri/src/views/ManufacturerEdit.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import ManufacturerField from "../components/ManufacturerField.vue";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
diff --git a/elebox-tauri/src/views/Package.vue b/elebox-tauri/src/views/Package.vue
index 843d166..8af74b2 100644
--- a/elebox-tauri/src/views/Package.vue
+++ b/elebox-tauri/src/views/Package.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import PackageField from "../components/PackageField.vue";
 import PackageList from "../components/PackageList.vue";
 </script>
diff --git a/elebox-tauri/src/views/PackageEdit.vue b/elebox-tauri/src/views/PackageEdit.vue
index b56c79f..a4c4ad3 100644
--- a/elebox-tauri/src/views/PackageEdit.vue
+++ b/elebox-tauri/src/views/PackageEdit.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import PackageField from "../components/PackageField.vue";
 import { onMounted, ref } from "vue";
 import { useRoute } from "vue-router";
diff --git a/elebox-tauri/src/views/Part.vue b/elebox-tauri/src/views/Part.vue
index e2ae05b..b4dfcb7 100644
--- a/elebox-tauri/src/views/Part.vue
+++ b/elebox-tauri/src/views/Part.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { onMounted, ref, reactive } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { DbPart } from "../db_cmd_part";
diff --git a/elebox-tauri/src/views/PartDetail.vue b/elebox-tauri/src/views/PartDetail.vue
index b531f9c..72e5055 100644
--- a/elebox-tauri/src/views/PartDetail.vue
+++ b/elebox-tauri/src/views/PartDetail.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { DbPart } from "../db_cmd_part";
diff --git a/elebox-tauri/src/views/Settings.vue b/elebox-tauri/src/views/Settings.vue
index 9591687..2213e30 100644
--- a/elebox-tauri/src/views/Settings.vue
+++ b/elebox-tauri/src/views/Settings.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import "../styles.css";
 import { ref } from "vue";
 import { invoke } from "@tauri-apps/api/tauri";
 import DbPath from "../components/DbPath.vue";

From 8b443513136d504f7e96357dc057af130088db28 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Sat, 20 Jul 2024 01:24:15 +0800
Subject: [PATCH 15/17] feat(tauri): update home page card variant

---
 elebox-tauri/src/views/Home.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elebox-tauri/src/views/Home.vue b/elebox-tauri/src/views/Home.vue
index abb235d..d91daad 100644
--- a/elebox-tauri/src/views/Home.vue
+++ b/elebox-tauri/src/views/Home.vue
@@ -40,7 +40,7 @@ onMounted(getParts);
   <v-container>
     <v-row>
       <v-container>
-        <v-card flat>
+        <v-card flat variant="text">
           <template v-slot:text>
             <v-row class="align-center">
               <v-col>

From 0082aa72d9a1e5e1c1e4838af2c3a8832241f668 Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Sat, 20 Jul 2024 01:24:54 +0800
Subject: [PATCH 16/17] feat(tauri): update part detail page button layout

---
 elebox-tauri/src/views/PartDetail.vue | 5 ++---
 1 file changed, 2 insertions(+), 3 deletions(-)

diff --git a/elebox-tauri/src/views/PartDetail.vue b/elebox-tauri/src/views/PartDetail.vue
index 72e5055..6cfeaba 100644
--- a/elebox-tauri/src/views/PartDetail.vue
+++ b/elebox-tauri/src/views/PartDetail.vue
@@ -3,7 +3,6 @@ import { onMounted, ref } from "vue";
 import { useRoute, useRouter } from "vue-router";
 import { DbPart } from "../db_cmd_part";
 import ItemEditButton from "../components/ItemEditButton.vue";
-import PartDel from "../components/PartDel.vue";
 
 const router = useRouter();
 const route = useRoute();
@@ -41,10 +40,10 @@ onMounted(() => {
         <v-col>
           <v-btn :to="{ name: 'home' }">Back</v-btn>
         </v-col>
-        <v-col cols="1">
+        <v-col cols="auto">
           <ItemEditButton :path_name="'update_part'" :item_name="name" />
         </v-col>
-        <v-col cols="1">
+        <v-col cols="auto">
           <v-dialog max-width="500">
             <template v-slot:activator="{ props: activatorProps }">
               <v-btn

From ffe640bac3d1701d8a9fccab8bb6b86389fcef0b Mon Sep 17 00:00:00 2001
From: ziteh <honmonoh@gmail.com>
Date: Sat, 20 Jul 2024 01:25:55 +0800
Subject: [PATCH 17/17] feat(tauri): update setting page header margin

---
 elebox-tauri/src/views/Settings.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/elebox-tauri/src/views/Settings.vue b/elebox-tauri/src/views/Settings.vue
index 2213e30..15c491a 100644
--- a/elebox-tauri/src/views/Settings.vue
+++ b/elebox-tauri/src/views/Settings.vue
@@ -19,7 +19,7 @@ async function import_csv() {
 <template>
   <v-container>
     <v-row>
-      <h1 class="mb-8">Settings</h1>
+      <h1 class="my-8">Settings</h1>
     </v-row>
     <DbPath />
     <v-row class="align-center">