gkrou/FastAuth
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Automatic sort handling, layout improvements

Browse Source
This commit is contained in:
Gourav Kumar 2024-06-16 23:23:01 +05:30
parent 72583eb2ec
commit ba400fd5f6
1 changed files with 12 additions and 28 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

40
frontend/src/components/ListSecrets.vue
View File

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