Merge branch 'develop'

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 {

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(
@@ -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(),

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);

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,16 +43,48 @@
           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>
       <router-view />
     </v-main>
   </v-app>
 </template>
+
+<style scoped>
+.flex-grow-1 {
+  flex-grow: 1;
+}
+</style>

elebox-tauri/src/components/CategoryField.vue

@@ -32,9 +32,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 +53,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 +64,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>

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>

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>

elebox-tauri/src/components/ManufacturerField.vue

@@ -35,9 +35,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 +46,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>