extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-01-22 22:30:05 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add sort feature (and reorganize the header toolbar) - Closes #95

Browse Source
This commit is contained in:
Bubka 2022-07-28 13:16:05 +02:00
parent 38d3744d39
commit f336a4f24a
4 changed files with 100 additions and 13 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/packages/fontawesome.js vendored
View File

@ -10,6 +10,7 @@ import {
faImage,
faTrash,
faCheck,
faCheckSquare,
faTimes,
faLock,
faLockOpen,
@ -31,6 +32,8 @@ import {
faFlask,
faCode,
faCopy,
faSortAlphaDown,
faSortAlphaUp,
} from '@fortawesome/free-solid-svg-icons'
import {
@ -44,6 +47,7 @@ library.add(
faImage,
faTrash,
faCheck,
faCheckSquare,
faTimes,
faLock,
faLockOpen,
@ -66,6 +70,8 @@ library.add(
faFlask,
faCode,
faCopy,
faSortAlphaDown,
faSortAlphaUp,
);
Vue.component('font-awesome-icon', FontAwesomeIcon)

102
resources/js/views/Accounts.vue
View File

@ -138,21 +138,60 @@
<!-- header -->
<div class="header has-background-black-ter" v-if="this.showAccounts || this.showGroupSwitch">
<div class="columns is-gapless is-mobile is-centered">
<div class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<div v-if="editMode" class="column">
<!-- toolbar -->
<div class="toolbar has-text-centered" v-if="editMode">
<div class="manage-buttons tags has-addons are-medium">
<span class="tag is-dark">{{ selectedAccounts.length }}&nbsp;{{ $t('commons.selected') }}</span>
<a class="tag is-link" v-if="selectedAccounts.length > 0" @click="showGroupSelector = true">
{{ $t('commons.move') }}&nbsp;<font-awesome-icon :icon="['fas', 'layer-group']" />
</a>
<a class="tag is-danger" v-if="selectedAccounts.length > 0" @click="destroyAccounts">
{{ $t('commons.delete') }}&nbsp;<font-awesome-icon :icon="['fas', 'trash']" />
</a>
<div class="toolbar has-text-centered">
<div class="field is-grouped is-justify-content-center">
<div class="control">
<div class="tags has-addons are-medium">
<span class="tag is-dark has-background-black-ter has-text-grey">
{{ selectedAccounts.length }}&nbsp;{{ $t('commons.selected') }}
<button @click="clearSelected" :style="{visibility: selectedAccounts.length > 0 ? 'visible' : 'hidden'}" class="delete" :title="$t('commons.clear_selection')"></button>
</span>
<span @click="selectAll" class="tag is-dark is-clickable has-background-black-ter has-text-grey" :title="$t('commons.select_all')">
{{ $t('commons.all') }}
<font-awesome-icon class="ml-1" :icon="['fas', 'check-square']" />
</span>
</div>
</div>
<div class="control">
<div class="tags has-addons are-medium">
<span @click="sortAsc" class="tag is-dark is-clickable has-background-black-ter has-text-grey" :title="$t('commons.sort_ascending')">
<font-awesome-icon :icon="['fas', 'sort-alpha-down']" />
</span>
<span @click="sortDesc" class="tag is-dark is-clickable has-background-black-ter has-text-grey" :title="$t('commons.sort_descending')">
<font-awesome-icon :icon="['fas', 'sort-alpha-up']" />
</span>
</div>
</div>
</div>
<div class="field is-grouped is-justify-content-center pt-1">
<div class="control">
<div class="tags are-medium has-addons is-clickable" v-if="selectedAccounts.length > 0" @click="showGroupSelector = true">
<span class="tag is-dark">
{{ $t('groups.change_group') }}
</span>
<span class="tag is-link">
<font-awesome-icon :icon="['fas', 'layer-group']" />
</span>
</div>
</div>
<div class="control">
<div class="tags are-medium has-addons is-clickable" v-if="selectedAccounts.length > 0" @click="destroyAccounts">
<span class="tag is-dark">
{{ $t('commons.delete') }}
</span>
<span class="tag is-danger">
<font-awesome-icon :icon="['fas', 'trash']" />
</span>
</div>
</div>
</div>
</div>
</div>
<div v-else class="column is-three-quarters-mobile is-one-third-tablet is-one-quarter-desktop is-one-quarter-widescreen is-one-quarter-fullhd">
<!-- search -->
<div class="field" v-else>
<div class="field">
<div class="control has-icons-right">
<input type="text" class="input is-rounded is-search" v-model="search">
<span class="icon is-small is-right">
@ -162,7 +201,7 @@
</div>
</div>
<!-- group switch toggle -->
<div class="is-clickable has-text-centered" v-if="!editMode">
<div class="is-clickable has-text-centered">
<div class="columns" @click="toggleGroupSwitch">
<div class="column" v-if="!showGroupSwitch">
{{ activeGroupName }} ({{ filteredAccounts.length }})
@ -529,7 +568,44 @@
*/
displayService(service) {
return service ? service : this.$t('twofaccounts.no_service')
}
},
/**
*
*/
clearSelected() {
this.selectedAccounts = []
},
/**
*
*/
selectAll() {
if(this.editMode) {
let that = this
this.accounts.forEach(function(account) {
if ( !that.selectedAccounts.includes(account.id) ) {
that.selectedAccounts.push(account.id)
}
})
}
},
/**
*
*/
sortAsc() {
this.accounts.sort((a, b) => a.service > b.service ? 1 : -1)
this.saveOrder()
},
/**
*
*/
sortDesc() {
this.accounts.sort((a, b) => a.service < b.service ? 1 : -1)
this.saveOrder()
},
}
};

4
resources/lang/en/commons.php
View File

@ -36,6 +36,10 @@
'back' => 'Back',
'move' => 'Move',
'all' => 'All',
'select_all' => 'Select all',
'clear_selection' => 'Clear selection',
'sort_descending' => 'Sort descending',
'sort_ascending' => 'Sort ascending',
'rename' => 'Rename',
'new_name' => 'New name',
'options' => 'Options',

1
resources/lang/en/groups.php
View File

@ -22,6 +22,7 @@
'deleting_group_does_not_delete_accounts' => 'Deleting a group does not delete accounts',
'move_selected_to' => 'Move selected to',
'no_group' => 'No group',
'change_group' => 'Change group',
'forms' => [
'new_group' => 'New group',
'new_name' => 'New name',