removed table and added cards

frontend/src/components/ListSecrets.vue

@@ -2,6 +2,7 @@
   <div>
     <div>
       <br />
+      <div class="filter-buttons">
         <el-button-group>
           <el-button
             type="success"
@@ -11,43 +12,34 @@
           >
             {{ band }}
           </el-button>
-        <el-button type="success">Clear</el-button>
+          <el-button type="success" @click="clearFilter" v-if="showClear"
+            >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">
-            {{ props.row.notes }}
     </div>
-        </template>
-      </el-table-column>
-      <el-table-column prop="id" label="Id" />
-      <el-table-column prop="issuer" label="Issuer" />
-      <el-table-column prop="username" label="Username" />
-      <el-table-column label="Secret">
-        <template #default="scope">
-          <div>
-            {{ generateTotp(scope.row.secret) }}
+
+    <div id="cards" v-if="loadCards">
+      <span v-for="secret in filteredSecretsList" :key="secret.id">
+        <SecretCard
+          :issuer="secret.issuer"
+          :username="secret.username"
+          :secret="secret.secret"
+          :id="secret.id"
+          @edit="editSecret"
+        />
+      </span>
     </div>
-        </template>
-      </el-table-column>
-      <!-- <el-table-column prop="notes" label="Notes" /> -->
-      <el-table-column fixed="right" label="Operations" width="120">
-        <template #default="scope">
-          <el-button link type="primary" size="small" @click="handleClick(scope)">
-            Edit
-          </el-button>
-        </template>
-      </el-table-column>
-    </el-table>
   </div>
 </template>
 
 <script>
 import { TOTP } from "totp-generator";
 
+import SecretCard from "./SecretCard.vue";
+
 export default {
+  components: { SecretCard },
   data() {
     return {
       message: "Hello List Secret",
@@ -63,6 +55,8 @@ export default {
         "T-Z": ["T", "U", "V", "W", "X", "Y", "Z"],
       },
       currentFilter: [],
+      loadCards: false,
+      showClear: false,
     };
   },
 
@@ -81,7 +75,7 @@ export default {
       const response = await fetch(url, requestOptions)
         .then((response) => response.json())
         .then((data) => {
-          console.log(data);
+          // console.log(data);
           return data;
         })
         .catch((err) => console.log(err));
@@ -92,6 +86,8 @@ export default {
         row["id"] = element["id"];
         this.secretsList.push(row);
       });
+      this.filteredSecretsList = this.secretsList;
+      this.loadCards = true;
     },
 
     parseSecret(gibberish) {
@@ -106,28 +102,35 @@ export default {
       return otp;
     },
 
-    handleClick(scope) {
-      console.log(scope);
+    editSecret(id) {
+      console.log(id);
     },
 
     filterTable(band) {
       const letters = this.filterBandsVals[band];
       this.currentFilter = letters;
-      console.log(letters);
+      this.showClear = true;
     },
 
     checkFirstLetter(row) {
       const firstLetter = row.issuer[0].toUpperCase();
-      if (this.currentFilter.indexOf(firstLetter) > 0) {
+      const index = this.currentFilter.indexOf(firstLetter);
+      if (index >= 0) {
         return true;
       }
       return false;
     },
+
+    clearFilter() {
+      this.filteredSecretsList = this.secretsList;
+      this.showClear = false;
+    },
   },
 
+  computed: {},
+
   watch: {
-    currentFilter: function (newFilter, oldFilter) {
-      // console.log("filter", newFilter, oldFilter);
+    currentFilter: function () {
       const filteredList = this.secretsList.filter(this.checkFirstLetter);
       this.filteredSecretsList = filteredList;
     },
@@ -138,3 +141,19 @@ export default {
   },
 };
 </script>
+
+<style>
+#cards {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  max-width: 90vw;
+}
+
+.filter-buttons {
+  width: 90%;
+  display: flex;
+  margin-bottom: 20px;
+  justify-content: center;
+}
+</style>