54 lines
1.8 KiB
Vue
54 lines
1.8 KiB
Vue
<template>
|
|
<div class="content-l">
|
|
<Table columns="1fr auto">
|
|
<HeaderRow>
|
|
<HeaderCell>Name</HeaderCell>
|
|
<HeaderCell></HeaderCell>
|
|
</HeaderRow>
|
|
<ContentRow v-for="role in roles.data">
|
|
<ContentCell>{{ role.name }}</ContentCell>
|
|
<ContentCell style="padding: 0.25rem;">
|
|
<UiButton><UiIcon>edit</UiIcon></UiButton>
|
|
<UiButton @click="deleteRole(role)"><UiIcon>delete</UiIcon></UiButton>
|
|
</ContentCell>
|
|
</ContentRow>
|
|
</Table>
|
|
<div>
|
|
<UiButton @click="addRole">Create</UiButton>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import HeaderRow from "~/components/ui/table/HeaderRow.vue";
|
|
import Table from "~/components/ui/table/Table.vue";
|
|
import HeaderCell from "~/components/ui/table/HeaderCell.vue";
|
|
import ContentRow from "~/components/ui/table/ContentRow.vue";
|
|
import {Popup, PopupSize, usePopup} from "~/components/ui/popup/Popup";
|
|
import RoleAdd from "~/role/RoleAdd.vue";
|
|
import type {Role} from "~/role/Role";
|
|
import ContentCell from "~/components/ui/table/ContentCell.vue";
|
|
import RoleDelete from "~/role/RoleDelete.vue";
|
|
|
|
const roles = useGet<Role[]>("/api/realms/" + useRoute().params.realm_key + "/roles");
|
|
|
|
function addRole()
|
|
{
|
|
const callback = (role: Role) => {
|
|
if (roles.value.data)
|
|
{
|
|
roles.value.data.push(role);
|
|
}
|
|
}
|
|
usePopup().open(Popup.component(RoleAdd).setConfig({ heading: 'Add Role', size: PopupSize.MEDIUM, callback: callback }))
|
|
}
|
|
|
|
function deleteRole(role: Role)
|
|
{
|
|
usePopup().open(Popup.component<Role>(RoleDelete).setConfig({ heading: 'Add Role', size: PopupSize.MEDIUM }).setPayload(role))
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |