From 9595e41ff79d2fd04f9f91692f49bd7557bc5583 Mon Sep 17 00:00:00 2001
From: Tnze <cjd001113@outlook.com>
Date: Sat, 28 Dec 2024 20:01:44 +0800
Subject: [PATCH] Improve BOM UI

---
 src-server/src/main.rs               |  4 +--
 src/components/bom/Selector.vue      | 19 ++++++++++---
 src/datasource/beta-xivapi-source.ts |  3 +-
 src/pages/Bom.vue                    | 42 ++++++++++++++++++++++++----
 src/stores/bom.ts                    | 16 ++++++++++-
 5 files changed, 70 insertions(+), 14 deletions(-)

diff --git a/src-server/src/main.rs b/src-server/src/main.rs
index a5e2f00..c0f17e1 100644
--- a/src-server/src/main.rs
+++ b/src-server/src/main.rs
@@ -25,8 +25,8 @@ use serde::Serialize;
 
 mod db;
 use db::{
-    collectables_shop_refine, craft_types, item_action, item_food, item_food_effect,
-    item_with_amount, items, prelude::*, recipe_level_tables, recipes,
+    craft_types, item_action, item_food, item_food_effect, item_with_amount, items, prelude::*,
+    recipe_level_tables, recipes,
 };
 
 type Result<T> = std::result::Result<T, StatusError>;
diff --git a/src/components/bom/Selector.vue b/src/components/bom/Selector.vue
index fa67f68..64c5ccd 100644
--- a/src/components/bom/Selector.vue
+++ b/src/components/bom/Selector.vue
@@ -34,11 +34,17 @@ const settingStore = useSettingStore();
 
 const search = ref('');
 const recipeList = ref<RecipeInfo[]>([]);
+const isLoading = ref(false);
 
 async function update() {
-    const source = await settingStore.getDataSource;
-    const recipeTable = await source.recipeTable(1, search.value);
-    recipeList.value = recipeTable.results;
+    try {
+        isLoading.value = true;
+        const source = await settingStore.getDataSource;
+        const recipeTable = await source.recipeTable(1, search.value);
+        recipeList.value = recipeTable.results;
+    } finally {
+        isLoading.value = false;
+    }
 }
 
 watch(search, () => update(), { immediate: true });
@@ -49,7 +55,12 @@ async function selectItem(recipe: RecipeInfo) {
 </script>
 
 <template>
-    <el-table :data="recipeList" @row-click="selectItem" max-height="300">
+    <el-table
+        :data="recipeList"
+        @row-click="selectItem"
+        max-height="300"
+        v-tnze-loading="isLoading"
+    >
         <el-table-column prop="job" :label="$t('craft-type')" width="150" />
         <el-table-column prop="item_name" :label="$t('name')">
             <template #header>
diff --git a/src/datasource/beta-xivapi-source.ts b/src/datasource/beta-xivapi-source.ts
index be67295..1065460 100644
--- a/src/datasource/beta-xivapi-source.ts
+++ b/src/datasource/beta-xivapi-source.ts
@@ -47,7 +47,7 @@ export class BetaXivApiRecipeSource {
         jobLevelMax?: number,
     ): Promise<RecipesSourceResult> {
         const params: Record<string, string> = {
-            fields: 'Icon,ItemResult.Name,CraftType.Name,DifficultyFactor,DurabilityFactor,QualityFactor,MaterialQualityFactor,RecipeLevelTable@as(raw),RequiredCraftsmanship,RequiredControl,CanHq',
+            fields: 'Icon,ItemResult.Name,AmountResult,CraftType.Name,DifficultyFactor,DurabilityFactor,QualityFactor,MaterialQualityFactor,RecipeLevelTable@as(raw),RequiredCraftsmanship,RequiredControl,CanHq',
             // 'limit': "100",
         };
         const query = new URLSearchParams(params);
@@ -130,6 +130,7 @@ export class BetaXivApiRecipeSource {
             rlv: assert(v?.fields['RecipeLevelTable@as(raw)'], 'rlv'),
             item_id: assert(v?.fields?.ItemResult.row_id, 'item_id'),
             item_name: assert(v?.fields?.ItemResult?.fields.Name, 'item_name'),
+            item_amount: v?.fields?.AmountResult,
             job: assert(v?.fields?.CraftType?.fields?.Name, 'job'),
 
             difficulty_factor: assert(
diff --git a/src/pages/Bom.vue b/src/pages/Bom.vue
index 3f706e7..0503b1e 100644
--- a/src/pages/Bom.vue
+++ b/src/pages/Bom.vue
@@ -24,10 +24,10 @@ import {
     ElDialog,
     ElButton,
     ElAlert,
-    ElMessage,
-    MessageHandler,
+    ElIcon,
+    ElText,
 } from 'element-plus';
-import { Plus, Delete } from '@element-plus/icons-vue';
+import { Plus, Delete, Loading, Refresh } from '@element-plus/icons-vue';
 
 import BomItem from '@/components/bom/Item.vue';
 import Selector from '@/components/bom/Selector.vue';
@@ -43,6 +43,7 @@ const { $t } = useFluent();
 const store = useStore();
 const selectorOpen = ref(false);
 const errMsg = ref<string>();
+const calculating = ref(false);
 
 const groupedIngs = computed(() => {
     if (store.ingredients.length == 0) {
@@ -68,13 +69,24 @@ function clearSelection() {
     updateBom();
 }
 
-let alertHandle: MessageHandler | undefined = undefined;
+let runningProcess: Promise<void> | undefined = undefined;
+let outdated = false;
 async function updateBom() {
+    let p;
     try {
         errMsg.value = undefined;
-        await store.updateBom();
+        calculating.value = true;
+
+        p = store.updateBom();
+        runningProcess = p;
+        await p;
     } catch (e: any) {
         errMsg.value = String(e);
+    } finally {
+        if (p == runningProcess) {
+            runningProcess = undefined;
+            calculating.value = false;
+        }
     }
 }
 </script>
@@ -130,7 +142,24 @@ async function updateBom() {
                     </div>
                 </TransitionGroup>
             </el-scrollbar>
-            <el-divider content-position="left">{{ $t('ings') }}</el-divider>
+            <el-divider content-position="left">
+                <el-text>
+                    <template v-if="calculating">
+                        {{ $t('calculating') }}
+                        <el-icon class="is-loading">
+                            <Loading />
+                        </el-icon>
+                    </template>
+                    <template v-else>
+                        {{ $t('ings') }}
+                        <el-button link @click="updateBom()">
+                            <el-icon>
+                                <Refresh />
+                            </el-icon>
+                        </el-button>
+                    </template>
+                </el-text>
+            </el-divider>
             <el-alert v-if="errMsg" type="error" show-icon :closable="false">
                 {{ errMsg }}
             </el-alert>
@@ -208,6 +237,7 @@ async function updateBom() {
 
 <fluent locale="zh-CN">
 ings = 材料
+calculating = 计算中
 add = 添加
 clear = 清空
 </fluent>
diff --git a/src/stores/bom.ts b/src/stores/bom.ts
index 0e79888..8d2d686 100644
--- a/src/stores/bom.ts
+++ b/src/stores/bom.ts
@@ -71,6 +71,7 @@ export default defineStore('bom', {
 
         recipeCache: new Map<ItemID, RecipeInfo[]>(),
         ingredientsCache: new Map<RecipeID, ItemWithAmount[]>(),
+        itemInfoCache: new Map<ItemID, Item>(),
         ingredients: <Slot[]>[],
     }),
 
@@ -114,7 +115,8 @@ export default defineStore('bom', {
                 for (const subIng of subIngs) {
                     let slot = ings.get(subIng.ingredient_id);
                     if (slot == undefined) {
-                        const itemInfo = await ds.itemInfo(
+                        const itemInfo = await this.fetchItemInfo(
+                            ds,
                             subIng.ingredient_id,
                         );
                         slot = new Slot(itemInfo);
@@ -256,5 +258,17 @@ export default defineStore('bom', {
             }
             return result.filter(v => v.ingredient_id >= 20); // 过滤偏属性水晶
         },
+
+        async fetchItemInfo(
+            dataSource: DataSource,
+            itemId: ItemID,
+        ): Promise<Item> {
+            let result = this.itemInfoCache.get(itemId);
+            if (result == undefined) {
+                result = await dataSource.itemInfo(itemId);
+                this.itemInfoCache.set(itemId, result);
+            }
+            return result;
+        },
     },
 });