Table filter WIP

frontend/src/components/ListSecrets.vue

@@ -1,6 +1,20 @@
 <template>
   <div>
-    <el-table :data="secretsList" style="width: 100vw">
+    <div>
+      <br />
+      <el-button-group>
+        <el-button
+          type="success"
+          v-for="band in filterBands"
+          :key="band"
+          @click="filterTable(band)"
+        >
+          {{ band }}
+        </el-button>
+        <el-button type="success">Clear</el-button>
+      </el-button-group>
+    </div>
+    <el-table :data="filteredSecretsList" style="width: 100vw">
       <el-table-column type="expand">
         <template #default="props">
           <div style="margin-left: 3rem">
@@ -39,13 +53,23 @@ export default {
       message: "Hello List Secret",
       apiBaseUrl: "http://localhost:8000",
       secretsList: [],
+      filteredSecretsList: [],
+      filterBands: ["A-C", "D-I", "J-O", "P-S", "T-Z"],
+      filterBandsVals: {
+        "A-C": ["A", "B", "C"],
+        "D-I": ["D", "E", "F", "G", "H", "I"],
+        "J-O": ["J", "K", "L", "M", "N", "O"],
+        "P-S": ["P", "Q", "R", "S"],
+        "T-Z": ["T", "U", "V", "W", "X", "Y", "Z"],
+      },
+      currentFilter: [],
     };
   },
 
   methods: {
     async listSecrets() {
       const url = `${this.apiBaseUrl}/secret`;
-      const token = localStorage.getItem("token");
+      const token = sessionStorage.getItem("token");
       const requestOptions = {
         method: "GET",
         headers: {
@@ -85,6 +109,28 @@ export default {
     handleClick(scope) {
       console.log(scope);
     },
+
+    filterTable(band) {
+      const letters = this.filterBandsVals[band];
+      this.currentFilter = letters;
+      console.log(letters);
+    },
+
+    checkFirstLetter(row) {
+      const firstLetter = row.issuer[0].toUpperCase();
+      if (this.currentFilter.indexOf(firstLetter) > 0) {
+        return true;
+      }
+      return false;
+    },
+  },
+
+  watch: {
+    currentFilter: function (newFilter, oldFilter) {
+      // console.log("filter", newFilter, oldFilter);
+      const filteredList = this.secretsList.filter(this.checkFirstLetter);
+      this.filteredSecretsList = filteredList;
+    },
   },
 
   mounted() {