bulk actions for peers and users (#492) (#602)

frontend/src/views/InterfaceView.vue

@@ -29,6 +29,10 @@ const sortKey = ref("")
 const sortOrder = ref(1)
 const selectAll = ref(false)
 
+const selectedPeers = computed(() => {
+  return peers.All.filter(peer => peer.IsSelected).map(peer => peer.Identifier);
+})
+
 function sortBy(key) {
   if (sortKey.value === key) {
     sortOrder.value = sortOrder.value * -1; // Toggle sort order
@@ -111,6 +115,39 @@ async function saveConfig() {
   }
 }
 
+async function bulkDelete() {
+  if (confirm(t('interfaces.confirm-bulk-delete', {count: selectedPeers.value.length}))) {
+    try {
+      await peers.BulkDelete(selectedPeers.value)
+      selectAll.value = false // reset selection
+    } catch (e) {
+      // notification is handled in store
+    }
+  }
+}
+
+async function bulkEnable() {
+  try {
+    await peers.BulkEnable(selectedPeers.value)
+    selectAll.value = false
+    peers.All.forEach(p => p.IsSelected = false) // remove selection
+  } catch (e) {
+    // notification is handled in store
+  }
+}
+
+async function bulkDisable() {
+  if (confirm(t('interfaces.confirm-bulk-disable', {count: selectedPeers.value.length}))) {
+    try {
+      await peers.BulkDisable(selectedPeers.value)
+      selectAll.value = false
+      peers.All.forEach(p => p.IsSelected = false) // remove selection
+    } catch (e) {
+      // notification is handled in store
+    }
+  }
+}
+
 function toggleSelectAll() {
   peers.FilteredAndPaged.forEach(peer => {
     peer.IsSelected = selectAll.value;
@@ -353,6 +390,13 @@ onMounted(async () => {
       <a class="btn btn-primary ms-2" href="#" :title="$t('interfaces.button-add-peer')" @click.prevent="editPeerId='#NEW#'"><i class="fa fa-plus me-1"></i><i class="fa fa-user"></i></a>
     </div>
   </div>
+  <div class="row" v-if="selectedPeers.length > 0">
+    <div class="col-12 text-lg-end">
+      <a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('interfaces.button-bulk-enable')" @click.prevent="bulkEnable"><i class="fa-regular fa-circle-check"></i></a>
+      <a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('interfaces.button-bulk-disable')" @click.prevent="bulkDisable"><i class="fa fa-ban"></i></a>
+      <a class="btn btn-outline-danger btn-sm ms-2" href="#" :title="$t('interfaces.button-bulk-delete')" @click.prevent="bulkDelete"><i class="fa fa-trash-can"></i></a>
+    </div>
+  </div>
   <div v-if="interfaces.Count!==0" class="mt-2 table-responsive">
     <div v-if="peers.Count===0">
     <h4>{{ $t('interfaces.no-peer.headline') }}</h4>

frontend/src/views/ProfileView.vue

@@ -1,14 +1,19 @@
 <script setup>
 import PeerViewModal from "../components/PeerViewModal.vue";
 
-import { onMounted, ref } from "vue";
+import { onMounted, ref, computed } from "vue";
+import { useI18n } from "vue-i18n";
 import { profileStore } from "@/stores/profile";
+import { peerStore } from "@/stores/peers";
 import UserPeerEditModal from "@/components/UserPeerEditModal.vue";
 import { settingsStore } from "@/stores/settings";
 import { humanFileSize } from "@/helpers/utils";
 
 const settings = settingsStore()
 const profile = profileStore()
+const peers = peerStore()
+
+const { t } = useI18n()
 
 const viewedPeerId = ref("")
 const editPeerId = ref("")
@@ -17,6 +22,10 @@ const sortKey = ref("")
 const sortOrder = ref(1)
 const selectAll = ref(false)
 
+const selectedPeers = computed(() => {
+  return profile.Peers.filter(peer => peer.IsSelected).map(peer => peer.Identifier);
+})
+
 function sortBy(key) {
   if (sortKey.value === key) {
     sortOrder.value = sortOrder.value * -1; // Toggle sort order
@@ -35,6 +44,17 @@ function friendlyInterfaceName(id, name) {
   return id
 }
 
+async function bulkDelete() {
+  if (confirm(t('interfaces.confirm-bulk-delete', {count: selectedPeers.value.length}))) {
+    try {
+      await profile.BulkDelete(selectedPeers.value)
+      selectAll.value = false // reset selection
+    } catch (e) {
+      // notification is handled in store
+    }
+  }
+}
+
 function toggleSelectAll() {
   profile.FilteredAndPagedPeers.forEach(peer => {
     peer.IsSelected = selectAll.value;
@@ -84,6 +104,13 @@ onMounted(async () => {
       </div>
     </div>
   </div>
+  <div class="row" v-if="selectedPeers.length > 0">
+    <div class="col-12 text-lg-end">
+      <button class="btn btn-outline-danger btn-sm" :title="$t('interfaces.button-bulk-delete')" @click.prevent="bulkDelete">
+        <i class="fa fa-trash-can"></i>
+      </button>
+    </div>
+  </div>
   <div class="mt-2 table-responsive">
     <div v-if="profile.CountPeers === 0">
       <h4>{{ $t('profile.no-peer.headline') }}</h4>

frontend/src/views/UserView.vue

@@ -1,16 +1,77 @@
 <script setup>
 import {userStore} from "@/stores/users";
-import {ref,onMounted} from "vue";
+import {ref, onMounted, computed} from "vue";
 import UserEditModal from "../components/UserEditModal.vue";
 import UserViewModal from "../components/UserViewModal.vue";
+import {useI18n} from "vue-i18n";
 
 const users = userStore()
+const { t } = useI18n()
 
 const editUserId = ref("")
 const viewedUserId = ref("")
 
 const selectAll = ref(false)
 
+const selectedUsers = computed(() => {
+  return users.All.filter(user => user.IsSelected).map(user => user.Identifier);
+})
+
+async function bulkDelete() {
+  if (confirm(t('users.confirm-bulk-delete', {count: selectedUsers.value.length}))) {
+    try {
+      await users.BulkDelete(selectedUsers.value)
+      selectAll.value = false // reset selection
+    } catch (e) {
+      // notification is handled in store
+    }
+  }
+}
+
+async function bulkEnable() {
+  try {
+    await users.BulkEnable(selectedUsers.value)
+    selectAll.value = false
+    users.All.forEach(u => u.IsSelected = false) // remove selection
+  } catch (e) {
+    // notification is handled in store
+  }
+}
+
+async function bulkDisable() {
+  if (confirm(t('users.confirm-bulk-disable', {count: selectedUsers.value.length}))) {
+    try {
+      await users.BulkDisable(selectedUsers.value)
+      selectAll.value = false
+      users.All.forEach(u => u.IsSelected = false) // remove selection
+    } catch (e) {
+      // notification is handled in store
+    }
+  }
+}
+
+async function bulkLock() {
+  if (confirm(t('users.confirm-bulk-lock', {count: selectedUsers.value.length}))) {
+    try {
+      await users.BulkLock(selectedUsers.value)
+      selectAll.value = false
+      users.All.forEach(u => u.IsSelected = false) // remove selection
+    } catch (e) {
+      // notification is handled in store
+    }
+  }
+}
+
+async function bulkUnlock() {
+  try {
+    await users.BulkUnlock(selectedUsers.value)
+    selectAll.value = false
+    users.All.forEach(u => u.IsSelected = false) // remove selection
+  } catch (e) {
+    // notification is handled in store
+  }
+}
+
 function toggleSelectAll() {
   users.FilteredAndPaged.forEach(user => {
     user.IsSelected = selectAll.value;
@@ -45,6 +106,15 @@ onMounted(() => {
       </a>
     </div>
   </div>
+  <div class="row" v-if="selectedUsers.length > 0">
+    <div class="col-12 text-lg-end">
+      <a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('users.button-bulk-enable')" @click.prevent="bulkEnable"><i class="fa-regular fa-circle-check"></i></a>
+      <a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('users.button-bulk-disable')" @click.prevent="bulkDisable"><i class="fa fa-ban"></i></a>
+      <a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('users.button-bulk-unlock')" @click.prevent="bulkUnlock"><i class="fa-solid fa-lock-open"></i></a>
+      <a class="btn btn-outline-primary btn-sm ms-2" href="#" :title="$t('users.button-bulk-lock')" @click.prevent="bulkLock"><i class="fa-solid fa-lock"></i></a>
+      <a class="btn btn-outline-danger btn-sm ms-2" href="#" :title="$t('users.button-bulk-delete')" @click.prevent="bulkDelete"><i class="fa fa-trash-can"></i></a>
+    </div>
+  </div>
   <div class="mt-2 table-responsive">
     <div v-if="users.Count===0">
       <h4>{{ $t('users.no-user.headline') }}</h4>