extern/2FAuth
1
0
Fork 0
mirror of https://github.com/Bubka/2FAuth.git synced 2025-08-15 16:22:25 +02: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
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, faImage,
faTrash, faTrash,
faCheck, faCheck,
faCheckSquare,
faTimes, faTimes,
faLock, faLock,
faLockOpen, faLockOpen,
@ -31,6 +32,8 @@ import {
faFlask, faFlask,
faCode, faCode,
faCopy, faCopy,
faSortAlphaDown,
faSortAlphaUp,
} from '@fortawesome/free-solid-svg-icons' } from '@fortawesome/free-solid-svg-icons'
import { import {
@ -44,6 +47,7 @@ library.add(
faImage, faImage,
faTrash, faTrash,
faCheck, faCheck,
faCheckSquare,
faTimes, faTimes,
faLock, faLock,
faLockOpen, faLockOpen,
@ -66,6 +70,8 @@ library.add(
faFlask, faFlask,
faCode, faCode,
faCopy, faCopy,
faSortAlphaDown,
faSortAlphaUp,
); );
Vue.component('font-awesome-icon', FontAwesomeIcon) Vue.component('font-awesome-icon', FontAwesomeIcon)

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

@ -138,21 +138,60 @@
<!-- header --> <!-- header -->
<div class="header has-background-black-ter" v-if="this.showAccounts || this.showGroupSwitch"> <div class="header has-background-black-ter" v-if="this.showAccounts || this.showGroupSwitch">
<div class="columns is-gapless is-mobile is-centered"> <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 --> <!-- toolbar -->
<div class="toolbar has-text-centered" v-if="editMode"> <div class="toolbar has-text-centered">
<div class="manage-buttons tags has-addons are-medium"> <div class="field is-grouped is-justify-content-center">
<span class="tag is-dark">{{ selectedAccounts.length }}&nbsp;{{ $t('commons.selected') }}</span> <div class="control">
<a class="tag is-link" v-if="selectedAccounts.length > 0" @click="showGroupSelector = true"> <div class="tags has-addons are-medium">
{{ $t('commons.move') }}&nbsp;<font-awesome-icon :icon="['fas', 'layer-group']" /> <span class="tag is-dark has-background-black-ter has-text-grey">
</a> {{ selectedAccounts.length }}&nbsp;{{ $t('commons.selected') }}
<a class="tag is-danger" v-if="selectedAccounts.length > 0" @click="destroyAccounts"> <button @click="clearSelected" :style="{visibility: selectedAccounts.length > 0 ? 'visible' : 'hidden'}" class="delete" :title="$t('commons.clear_selection')"></button>
{{ $t('commons.delete') }}&nbsp;<font-awesome-icon :icon="['fas', 'trash']" /> </span>
</a> <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>
</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 --> <!-- search -->
<div class="field" v-else> <div class="field">
<div class="control has-icons-right"> <div class="control has-icons-right">
<input type="text" class="input is-rounded is-search" v-model="search"> <input type="text" class="input is-rounded is-search" v-model="search">
<span class="icon is-small is-right"> <span class="icon is-small is-right">
@ -162,7 +201,7 @@
</div> </div>
</div> </div>
<!-- group switch toggle --> <!-- 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="columns" @click="toggleGroupSwitch">
<div class="column" v-if="!showGroupSwitch"> <div class="column" v-if="!showGroupSwitch">
{{ activeGroupName }} ({{ filteredAccounts.length }}) {{ activeGroupName }} ({{ filteredAccounts.length }})
@ -529,7 +568,44 @@
*/ */
displayService(service) { displayService(service) {
return service ? service : this.$t('twofaccounts.no_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 @@ return [
'back' => 'Back', 'back' => 'Back',
'move' => 'Move', 'move' => 'Move',
'all' => 'All', 'all' => 'All',
'select_all' => 'Select all',
'clear_selection' => 'Clear selection',
'sort_descending' => 'Sort descending',
'sort_ascending' => 'Sort ascending',
'rename' => 'Rename', 'rename' => 'Rename',
'new_name' => 'New name', 'new_name' => 'New name',
'options' => 'Options', 'options' => 'Options',

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

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