mirror of
https://github.com/donaldzou/WGDashboard.git
synced 2025-10-04 00:06:18 +00:00
96 lines
3.1 KiB
Vue
96 lines
3.1 KiB
Vue
<script setup lang="ts">
|
|
import {computed, ref} from "vue";
|
|
import {DashboardClientAssignmentStore} from "@/stores/DashboardClientAssignmentStore.js";
|
|
import LocaleText from "@/components/text/localeText.vue";
|
|
|
|
const props = defineProps(['configuration', 'peers', 'clientAssignedPeers', 'availablePeerSearchString'])
|
|
const emits = defineEmits(['assign', 'unassign'])
|
|
const assignmentStore = DashboardClientAssignmentStore()
|
|
const available = computed(() => {
|
|
if (props.clientAssignedPeers){
|
|
if (Object.keys(props.clientAssignedPeers).includes(props.configuration)){
|
|
return props.peers.filter(
|
|
x => {
|
|
return !props.clientAssignedPeers[props.configuration].map(
|
|
x => x.id
|
|
).includes(x.id) &&
|
|
(!props.availablePeerSearchString ||
|
|
(props.availablePeerSearchString &&
|
|
(x.id.includes(props.availablePeerSearchString) || x.name.includes(props.availablePeerSearchString))))
|
|
}
|
|
)
|
|
}
|
|
}
|
|
return props.availablePeerSearchString ? props.peers.filter(
|
|
x => x.id.includes(props.availablePeerSearchString) || x.name.includes(props.availablePeerSearchString)
|
|
) : props.peers
|
|
})
|
|
const confirmDelete = ref(false)
|
|
const collapse = ref(false)
|
|
</script>
|
|
|
|
<template>
|
|
<div class="card rounded-0 border-0">
|
|
<div
|
|
@click="collapse = !collapse"
|
|
role="button"
|
|
class="card-header rounded-0 sticky-top bg-body-secondary border-0 border-bottom text-white d-flex">
|
|
<small><samp>{{ configuration }}</samp></small>
|
|
<a role="button" class="ms-auto text-white" >
|
|
<i class="bi bi-chevron-compact-down" v-if="collapse"></i>
|
|
<i class="bi bi-chevron-compact-up" v-else></i>
|
|
</a>
|
|
</div>
|
|
<div class="card-body p-0" v-if="!collapse">
|
|
<div class="list-group list-group-flush" >
|
|
<div
|
|
class="list-group-item d-flex border-bottom list-group-item-action d-flex align-items-center gap-3"
|
|
:key="peer.id"
|
|
v-for="peer in available" >
|
|
<div v-if="!confirmDelete">
|
|
<small class="text-body">
|
|
<RouterLink
|
|
class="text-decoration-none"
|
|
target="_blank"
|
|
:to="'/configuration/' + configuration +'/peers?id=' + encodeURIComponent(peer.id)">
|
|
<samp>{{ peer.id }}</samp>
|
|
</RouterLink>
|
|
</small><br>
|
|
<small class="text-muted">
|
|
{{ peer.name ? peer.name : 'Untitled Peer'}}
|
|
</small>
|
|
</div>
|
|
<div v-else>
|
|
<small class="text-body">
|
|
<LocaleText t="Are you sure to remove this peer?"></LocaleText>
|
|
</small><br>
|
|
<small class="text-muted">
|
|
<samp>{{ peer.id }}</samp>
|
|
</small>
|
|
</div>
|
|
<template v-if="clientAssignedPeers">
|
|
<button
|
|
@click="emits('assign', peer.id)"
|
|
:class="{disabled: assignmentStore.assigning}"
|
|
class="btn bg-success-subtle text-success-emphasis ms-auto">
|
|
<i class="bi bi-plus-circle-fill" ></i>
|
|
</button>
|
|
</template>
|
|
<button
|
|
v-else
|
|
@click="emits('unassign', peer.assignment_id)"
|
|
:class="{disabled: assignmentStore.unassigning}"
|
|
aria-label="Delete Assignment"
|
|
class="btn bg-danger-subtle text-danger-emphasis ms-auto">
|
|
<i class="bi bi-trash-fill"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
|
|
</style> |