show secret checkbox and using local storage (WIP)

This commit is contained in:
Gourav Kumar 2024-06-16 15:02:07 +05:30
parent 8b9b903ad5
commit 64b5708046

View File

@ -1,7 +1,6 @@
<template> <template>
<div> <div>
<div> <div>
<br />
<div class="filter-buttons"> <div class="filter-buttons">
<el-button-group> <el-button-group>
<el-button <el-button
@ -17,16 +16,19 @@
> >
</el-button-group> </el-button-group>
<div> <div>
<el-form-item label="Show Secrets" style="float: right"> <el-checkbox
<el-switch v-model="showSecrets" /> v-model="showSecrets"
</el-form-item> true-value="yes"
false-value="no"
label="Show OTPs"
size="large"
/>
</div> </div>
<div class="sort-options"> <div class="sort-options">
<span> <span>
<el-form-item label="Sort"> <el-form-item label="Sort">
<el-select <el-select
v-model="currentSort" v-model="currentSort"
filterable
placeholder="Select" placeholder="Select"
style="width: 80px" style="width: 80px"
@change="sortItems" @change="sortItems"
@ -51,8 +53,7 @@
:username="secret.username" :username="secret.username"
:secret="secret.secret" :secret="secret.secret"
:id="secret.id" :id="secret.id"
:hideOtps="showSecrets" :showOtp="showSecrets"
:key="showSecrets"
@edit="editSecret" @edit="editSecret"
/> />
</span> </span>
@ -84,7 +85,7 @@ export default {
currentFilter: [], currentFilter: [],
loadCards: false, loadCards: false,
showClear: false, showClear: false,
showSecrets: false, showSecrets: "yes",
currentSort: "none", currentSort: "none",
sortOptions: [ sortOptions: [
{ {
@ -174,7 +175,6 @@ export default {
}, },
sortItems() { sortItems() {
console.log(this.currentSort);
if (this.currentSort === "asc") { if (this.currentSort === "asc") {
this.filteredSecretsList.sort((a, b) => a.issuer.localeCompare(b.issuer)); this.filteredSecretsList.sort((a, b) => a.issuer.localeCompare(b.issuer));
} else if (this.currentSort === "desc") { } else if (this.currentSort === "desc") {
@ -190,10 +190,26 @@ export default {
const filteredList = this.secretsList.filter(this.checkFirstLetter); const filteredList = this.secretsList.filter(this.checkFirstLetter);
this.filteredSecretsList = filteredList; this.filteredSecretsList = filteredList;
}, },
currentSort: function () {
localStorage.setItem("currentSort", this.currentSort);
},
showSecrets: function () {
localStorage.setItem("showSecrets", this.showSecrets);
},
secretsList: function () {
this.currentSort = localStorage.getItem("currentSort");
this.filteredSecretsList = this.secretsList;
this.sortItems();
},
}, },
mounted() { mounted() {
this.listSecrets(); this.listSecrets();
this.showSecrets = localStorage.getItem("showSecrets");
this.currentSort = localStorage.getItem("currentSort");
}, },
}; };
</script> </script>
@ -209,7 +225,7 @@ export default {
.filter-buttons { .filter-buttons {
width: 90%; width: 90%;
display: flex; display: flex;
margin-bottom: 20px; margin: 20px 0 20px 0;
justify-content: space-between; justify-content: space-between;
flex-wrap: wrap; flex-wrap: wrap;
} }