87 lines
3.2 KiB
Vue
87 lines
3.2 KiB
Vue
<template>
|
|
<div class="content-l">
|
|
<Table columns="auto auto auto 1fr auto" :show-footer="clients.data.length === 0" v-if="clients.loading === false && clients.data">
|
|
<HeaderRow>
|
|
<HeaderCell>Client ID</HeaderCell>
|
|
<HeaderCell>Name</HeaderCell>
|
|
<HeaderCell>Redirect URI</HeaderCell>
|
|
<HeaderCell>Grants</HeaderCell>
|
|
<HeaderCell></HeaderCell>
|
|
</HeaderRow>
|
|
<ContentRow v-for="client in clients.data">
|
|
<ContentCell>{{ client.id }}</ContentCell>
|
|
<ContentCell>{{ client.name }}</ContentCell>
|
|
<ContentCell>{{ client.redirectURI }}</ContentCell>
|
|
<ContentCell><p v-if="client.allowedGrants">{{ client.allowedGrants.join(", ") }}</p></ContentCell>
|
|
<ContentCell style="padding: 0.25rem;">
|
|
<UiButton @click="editClient(client)"><UiIcon>edit</UiIcon></UiButton>
|
|
<UiButton @click="deleteClient(client)"><UiIcon>delete</UiIcon></UiButton>
|
|
</ContentCell>
|
|
</ContentRow>
|
|
<template #footer>
|
|
<p>No clients found.</p>
|
|
</template>
|
|
</Table>
|
|
<div>
|
|
<UiButton @click="addClient">Create</UiButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import {Client} from "~/client/Client"
|
|
import Table from "~/components/ui/table/Table.vue";
|
|
import HeaderRow from "~/components/ui/table/HeaderRow.vue";
|
|
import HeaderCell from "~/components/ui/table/HeaderCell.vue";
|
|
import ContentRow from "~/components/ui/table/ContentRow.vue";
|
|
import ContentCell from "~/components/ui/table/ContentCell.vue";
|
|
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
|
|
import ClientAdd from "~/client/ClientAdd.vue";
|
|
import ClientDelete from "~/client/ClientDelete.vue";
|
|
import ClientEdit from "~/client/ClientEdit.vue";
|
|
|
|
const realmKey = useRoute().params.realm_key;
|
|
|
|
const clients = useGet<Client[]>('/api/realms/' + realmKey + '/clients');
|
|
|
|
function addClient()
|
|
{
|
|
const callback = (client: Client) => {
|
|
if (clients.value.data)
|
|
{
|
|
clients.value.data.push(client);
|
|
}
|
|
};
|
|
usePopup().open(Popup.component<Client>(ClientAdd).setConfig({ heading: 'Add Client', size: PopupSize.MEDIUM, callback: callback }));
|
|
}
|
|
|
|
function editClient(client: Client)
|
|
{
|
|
const callback = (_client: Client) => {
|
|
if (clients.value.data)
|
|
{
|
|
const index = clients.value.data.findIndex(c => c.name === client.name);
|
|
if (index !== -1)
|
|
{
|
|
clients.value.data[index] = _client;
|
|
}
|
|
}
|
|
}
|
|
usePopup().open(Popup.component<Client>(ClientEdit).setConfig({ heading: 'Edit Client', size: PopupSize.MEDIUM, callback: callback }).setPayload(client));
|
|
}
|
|
|
|
function deleteClient(client: Client)
|
|
{
|
|
const callback = () => {
|
|
if (clients.value.data)
|
|
{
|
|
clients.value.data = clients.value.data.filter(c => c !== client);
|
|
}
|
|
}
|
|
usePopup().open(Popup.component<Client>(ClientDelete).setPayload(client).setConfig({ heading: 'Delete Client', size: PopupSize.MEDIUM, callback: callback }));
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |