Merge pull request #134 from webceyhan/develop

Develop

package.json

@@ -14,15 +14,14 @@
     "vue-router": "^4.1.6"
   },
   "devDependencies": {
-    "bootstrap-icons": "^1.10.5",
     "@vitejs/plugin-vue": "^4.2.3",
     "autoprefixer": "^10.4.15",
+    "bootstrap-icons": "^1.10.5",
     "daisyui": "^3.6.4",
     "postcss": "^8.4.29",
     "tailwindcss": "^3.3.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
-    "vite-svg-loader": "^4.0.0",
     "vue-tsc": "^1.8.5"
   }
 }

src/App.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { useAuth } from "./store/auth";
+import { useAuth } from "./composables/auth";
 import Menu from "./components/ui/Menu.vue";
 import MenuLink from "./components/ui/MenuLink.vue";
 import Avatar from "./components/ui/Avatar.vue";
@@ -53,3 +53,4 @@ const { user, login, logout } = useAuth();
     </main>
   </div>
 </template>
+./composables/auth

src/components/AssetModal.vue

@@ -1,20 +1,28 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
-import { useRouter } from "vue-router";
-import { Asset } from "../server/types";
+import { Asset, AssetCategory } from "../server/types";
 import Modal from "./ui/Modal.vue";
 import Input from "./ui/Input.vue";
 import AssetList from "./AssetList.vue";
+import Tabs from "./ui/Tabs.vue";
 
 interface Props {
   assets: Asset[];
+  category: AssetCategory;
 }
 
+const emit = defineEmits(["update:category", "select"]);
+
 const props = defineProps<Props>();
 
 const open = ref(false);
-const router = useRouter();
 const assetCode = ref("");
+const tabOptions = ["fiat", "gold"];
+
+const categoryProxy = computed({
+  get: () => props.category,
+  set: (val) => emit("update:category", val),
+});
 
 const filteredAssets = computed(() => {
   const code = assetCode.value.toLowerCase();
@@ -23,14 +31,6 @@ const filteredAssets = computed(() => {
     : props.assets.filter((a) => a.code.toLowerCase().includes(code));
 });
 
-function addAsset(asset: Asset) {
-  router.push({
-    name: "holding",
-    params: { id: asset.code },
-    query: { add: 1 },
-  });
-}
-
 defineExpose({ open });
 </script>
 
@@ -40,10 +40,12 @@ defineExpose({ open });
 
     <Input type="search" v-model="assetCode" placeholder="Search" autofocus />
 
+    <Tabs :options="tabOptions" v-model="categoryProxy" block />
+
     <AssetList
       class="overflow-scroll h-80"
       :assets="filteredAssets"
-      @select="addAsset"
+      @select="$emit('select', $event)"
       compact
     />
   </Modal>