Automatic sort handling, layout improvements

frontend/src/components/ListSecrets.vue

@@ -16,13 +16,9 @@
           >
         </el-button-group>
         <div>
-          <el-checkbox
-            v-model="showSecrets"
-            true-value="yes"
-            false-value="no"
-            label="Show OTPs"
-            size="large"
-          />
+          <el-form-item label="Show OTPs">
+            <el-switch v-model="showSecrets" active-value="yes" inactive-value="no" />
+          </el-form-item>
         </div>
         <div class="sort-options">
           <span>
@@ -54,6 +50,7 @@
           :secret="secret.secret"
           :id="secret.id"
           :showOtp="showSecrets"
+          :key="showSecrets"
           @edit="editSecret"
         />
       </span>
@@ -86,12 +83,8 @@ export default {
       loadCards: false,
       showClear: false,
       showSecrets: "yes",
-      currentSort: "none",
+      currentSort: "asc",
       sortOptions: [
-        {
-          name: "None",
-          key: "none",
-        },
         {
           name: "A-Z",
           key: "asc",
@@ -131,6 +124,7 @@ export default {
         this.secretsList.push(row);
       });
       this.filteredSecretsList = this.secretsList;
+      this.sortItems();
       this.loadCards = true;
     },
 
@@ -189,6 +183,7 @@ export default {
     currentFilter: function () {
       const filteredList = this.secretsList.filter(this.checkFirstLetter);
       this.filteredSecretsList = filteredList;
+      this.sortItems();
     },
 
     currentSort: function () {
@@ -219,14 +214,15 @@ export default {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
-  max-width: 90vw;
+  justify-content: space-evenly;
+  max-width: 96vw;
 }
 
 .filter-buttons {
-  width: 90%;
+  width: 96vw;
   display: flex;
-  margin: 20px 0 20px 0;
-  justify-content: space-between;
+  margin: 40px 0 20px 0;
+  justify-content: space-around;
   flex-wrap: wrap;
 }
 
@@ -235,16 +231,4 @@ export default {
   justify-content: space-between;
   min-width: 80px;
 }
-/*
-#sort {
-  border: none;
-  border-bottom: 1px solid green;
-  margin: 0 4px 0 4px;
-  font-size: 1rem;
-  text-align: center;
-}
-
-#sort:focus {
-  outline: none;
-} */
 </style>