[feature] #13 add count to popup pages

BioCrossCoder · Jan 9, 2025 · a4e936c · a4e936c
1 parent dd0fc51
commit a4e936c
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 2 deletions.
diff --git a/src/entrypoints/popup/components/Board.vue b/src/entrypoints/popup/components/Board.vue
@@ -21,6 +21,7 @@ onMounted(() => {
     }, 0);
     if (route.query.name) {
         title.value = route.query.name as string;
+        selectedNodesOld.value = Array.from(selectedNodes.value);
         return;
     }
     const observer = watch(nodeData, () => {
@@ -34,6 +35,8 @@ onMounted(() => {
     });
 });
 const { hoverNode, nodes, edges, eventHandlers } = buildSelectGraph(nodeData);
+const nodeTotalCount = computed<number>(() => nodeData.value.length);
+const selectedNodeCount = computed<number>(() => selectedNodes.value.length);
 </script>
 
 <template>
@@ -66,7 +69,18 @@ const { hoverNode, nodes, edges, eventHandlers } = buildSelectGraph(nodeData);
                     <el-button @click="handleClickReset">Reset</el-button>
                 </el-col>
                 <el-col :span="16">
-                    <el-input v-model="keyword" :prefix-icon="Search" class="input" />
+                    <el-input v-model="keyword" :prefix-icon="Search" class="input">
+                        <template #suffix>
+                            <el-row>
+                                <el-text class="cnt">
+                                    {{ selectedNodeCount }}
+                                </el-text>
+                                <el-text>
+                                    /{{ nodeTotalCount }}
+                                </el-text>
+                            </el-row>
+                        </template>
+                    </el-input>
                 </el-col>
             </el-row>
             <el-row>
@@ -112,6 +126,10 @@ const { hoverNode, nodes, edges, eventHandlers } = buildSelectGraph(nodeData);
     display: inline-block;
 }
 
+.cnt {
+    color: common.$theme-blue;
+}
+
 .tag {
     @extend %graph-tag;
 }

diff --git a/src/entrypoints/popup/components/Graph.vue b/src/entrypoints/popup/components/Graph.vue
@@ -12,6 +12,8 @@ onMounted(() => {
     selectedNodesOld.value = Array.from(selectedNodes.value);
 });
 const { hoverNode, nodes, edges, eventHandlers } = buildSelectGraph(data);
+const totalCount = computed<number>(() => data.value.length);
+const selectedCount = computed<number>(() => selectedNodes.value.length);
 const router = useRouter();
 </script>
 
@@ -24,7 +26,18 @@ const router = useRouter();
                     <el-button @click="handleClickReset">Reset</el-button>
                 </el-col>
                 <el-col :span="8">
-                    <el-input v-model="keyword" :prefix-icon="Search" class="input" />
+                    <el-input v-model="keyword" :prefix-icon="Search" class="input">
+                        <template #suffix>
+                            <el-row>
+                                <el-text class="txt">
+                                    {{ selectedCount }}
+                                </el-text>
+                                <el-text>
+                                    /{{ totalCount }}
+                                </el-text>
+                            </el-row>
+                        </template>
+                    </el-input>
                 </el-col>
             </el-row>
             <el-row>
@@ -56,6 +69,10 @@ $header-height: 2*common.$bar-height;
     display: inline-block;
 }
 
+.txt {
+    color: common.$theme-blue;
+}
+
 #graph {
     height: calc(100% - 4*common.$border-width);
     width: calc(100% - 2*common.$border-width);