Mirrors/wg-portal
1
0
Fork 0
mirror of https://github.com/h44z/wg-portal.git synced 2025-04-17 07:55:13 +00:00
Code Issues Actions Packages Projects Releases Wiki Activity

implement checkall checkbox (#372)

Browse Source
This commit is contained in:
Christoph Haas 2025-02-26 22:24:37 +01:00
parent 986f6fdead
commit 40b4538e78
4 changed files with 40 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
frontend/src/helpers/models.js
View File

@ -120,8 +120,9 @@ export function freshPeer() {
Overridable: true,
},
// Internal value
IgnoreGlobalSettings: false
// Internal values
IgnoreGlobalSettings: false,
IsSelected: false
}
}
@ -148,7 +149,10 @@ export function freshUser() {
ApiEnabled: false,
PeerCount: 0
PeerCount: 0,
// Internal values
IsSelected: false
}
}

15
frontend/src/views/InterfaceView.vue
View File

@ -22,8 +22,9 @@ const multiCreatePeerId = ref("")
const editInterfaceId = ref("")
const viewedInterfaceId = ref("")
const sortKey = ref("");
const sortOrder = ref(1);
const sortKey = ref("")
const sortOrder = ref(1)
const selectAll = ref(false)
function sortBy(key) {
if (sortKey.value === key) {
@ -81,6 +82,12 @@ async function saveConfig() {
}
}
function toggleSelectAll() {
peers.FilteredAndPaged.forEach(peer => {
peer.IsSelected = selectAll.value;
});
}
onMounted(async () => {
await interfaces.LoadInterfaces()
await peers.LoadPeers(undefined) // use default interface
@ -326,7 +333,7 @@ onMounted(async () => {
<thead>
<tr>
<th scope="col">
<input id="flexCheckDefault" class="form-check-input" :title="$t('general.select-all')" type="checkbox" value="">
<input class="form-check-input" :title="$t('general.select-all')" type="checkbox" v-model="selectAll" @change="toggleSelectAll">
</th><!-- select -->
<th scope="col"></th><!-- status -->
<th scope="col" @click="sortBy('DisplayName')">
@ -357,7 +364,7 @@ onMounted(async () => {
<tbody>
<tr v-for="peer in peers.FilteredAndPaged" :key="peer.Identifier">
<th scope="row">
<input id="flexCheckDefault" class="form-check-input" type="checkbox" value="">
<input class="form-check-input" type="checkbox" v-model="peer.IsSelected">
</th>
<td class="text-center">
<span v-if="peer.Disabled" class="text-danger" :title="$t('interfaces.peer-disabled') + ' ' + peer.DisabledReason"><i class="fa fa-circle-xmark"></i></span>

16
frontend/src/views/ProfileView.vue
View File

@ -13,8 +13,9 @@ const profile = profileStore()
const viewedPeerId = ref("")
const editPeerId = ref("")
const sortKey = ref("");
const sortOrder = ref(1);
const sortKey = ref("")
const sortOrder = ref(1)
const selectAll = ref(false)
function sortBy(key) {
if (sortKey.value === key) {
@ -34,6 +35,12 @@ function friendlyInterfaceName(id, name) {
return id
}
function toggleSelectAll() {
profile.FilteredAndPagedPeers.forEach(peer => {
peer.IsSelected = selectAll.value;
});
}
onMounted(async () => {
await profile.LoadUser()
await profile.LoadPeers()
@ -86,8 +93,7 @@ onMounted(async () => {
<thead>
<tr>
<th scope="col">
<input id="flexCheckDefault" class="form-check-input" :title="$t('general.select-all')" type="checkbox"
value="">
<input class="form-check-input" :title="$t('general.select-all')" type="checkbox" v-model="selectAll" @change="toggleSelectAll">
</th><!-- select -->
<th scope="col"></th><!-- status -->
<th scope="col" @click="sortBy('DisplayName')">
@ -112,7 +118,7 @@ onMounted(async () => {
<tbody>
<tr v-for="peer in profile.FilteredAndPagedPeers" :key="peer.Identifier">
<th scope="row">
<input id="flexCheckDefault" class="form-check-input" type="checkbox" value="">
<input class="form-check-input" type="checkbox" v-model="peer.IsSelected">
</th>
<td class="text-center">
<span v-if="peer.Disabled" class="text-danger"><i class="fa fa-circle-xmark"

13
frontend/src/views/UserView.vue
View File

@ -12,6 +12,15 @@ const users = userStore()
const editUserId = ref("")
const viewedUserId = ref("")
const selectAll = ref(false)
function toggleSelectAll() {
users.FilteredAndPaged.forEach(user => {
user.IsSelected = selectAll.value;
});
}
onMounted(() => {
users.LoadUsers()
})
@ -49,7 +58,7 @@ onMounted(() => {
<thead>
<tr>
<th scope="col">
<input id="flexCheckDefault" class="form-check-input" :title="$t('general.select-all')" type="checkbox" value="">
<input class="form-check-input" :title="$t('general.select-all')" type="checkbox" v-model="selectAll" @change="toggleSelectAll">
</th><!-- select -->
<th scope="col"></th><!-- status -->
<th scope="col">{{ $t('users.table-heading.id') }}</th>
@ -65,7 +74,7 @@ onMounted(() => {
<tbody>
<tr v-for="user in users.FilteredAndPaged" :key="user.Identifier">
<th scope="row">
<input id="flexCheckDefault" class="form-check-input" type="checkbox" value="">
<input class="form-check-input" type="checkbox" v-model="user.IsSelected">
</th>
<td class="text-center">
<span v-if="user.Disabled" class="text-danger" :title="$t('users.user-disabled') + ' ' + user.DisabledReason"><i class="fa fa-circle-xmark"></i></span>