Initial commit: Aurora Admin plugin
This commit is contained in:
Kris Parish
@@ -0,0 +1,201 @@
|
||||
<script setup>
|
||||
import { ref, reactive, computed, onMounted } from 'vue';
|
||||
import AppListShell from '../_shared/AppListShell.vue';
|
||||
import AppListItem from '../_shared/AppListItem.vue';
|
||||
|
||||
const props = defineProps({
|
||||
serverData: { type: Object, required: true },
|
||||
});
|
||||
|
||||
const api = (path, opts = {}) =>
|
||||
fetch(`${props.serverData.restUrl}aurora-admin/v1${path}`, {
|
||||
...opts,
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
'X-WP-Nonce': props.serverData.restNonce,
|
||||
...(opts.headers || {}),
|
||||
},
|
||||
}).then((r) => {
|
||||
if (!r.ok) throw new Error('Request failed');
|
||||
return r.json();
|
||||
});
|
||||
|
||||
const roles = ref([]);
|
||||
const allCapabilities = ref([]);
|
||||
const search = ref('');
|
||||
const selectedSlug = ref(null);
|
||||
const isCreating = ref(false);
|
||||
const errorMsg = ref('');
|
||||
|
||||
const load = async () => {
|
||||
const data = await api('/roles');
|
||||
roles.value = data.roles;
|
||||
allCapabilities.value = data.allCapabilities;
|
||||
};
|
||||
|
||||
onMounted(load);
|
||||
|
||||
const filtered = computed(() => {
|
||||
const q = search.value.trim().toLowerCase();
|
||||
if (!q) return roles.value;
|
||||
return roles.value.filter((r) => r.name.toLowerCase().includes(q));
|
||||
});
|
||||
|
||||
const selected = computed(() => roles.value.find((r) => r.slug === selectedSlug.value) || null);
|
||||
|
||||
const draft = reactive({ slug: '', name: '', capabilities: [] });
|
||||
|
||||
const selectRole = (r) => {
|
||||
selectedSlug.value = r.slug;
|
||||
isCreating.value = false;
|
||||
errorMsg.value = '';
|
||||
Object.assign(draft, { slug: r.slug, name: r.name, capabilities: [...r.capabilities] });
|
||||
};
|
||||
|
||||
const newRole = () => {
|
||||
selectedSlug.value = null;
|
||||
isCreating.value = true;
|
||||
errorMsg.value = '';
|
||||
Object.assign(draft, { slug: '', name: '', capabilities: ['read'] });
|
||||
};
|
||||
|
||||
const toggleCap = (cap) => {
|
||||
const idx = draft.capabilities.indexOf(cap);
|
||||
if (idx === -1) draft.capabilities.push(cap);
|
||||
else draft.capabilities.splice(idx, 1);
|
||||
};
|
||||
|
||||
const saving = ref(false);
|
||||
const save = async () => {
|
||||
saving.value = true;
|
||||
errorMsg.value = '';
|
||||
try {
|
||||
if (isCreating.value) {
|
||||
await api('/roles', {
|
||||
method: 'POST',
|
||||
body: JSON.stringify({ slug: draft.slug, displayName: draft.name, capabilities: draft.capabilities }),
|
||||
});
|
||||
await load();
|
||||
isCreating.value = false;
|
||||
selectRole(roles.value.find((r) => r.slug === draft.slug));
|
||||
} else if (selectedSlug.value) {
|
||||
await api(`/roles/${selectedSlug.value}`, {
|
||||
method: 'PUT',
|
||||
body: JSON.stringify({ displayName: draft.name, capabilities: draft.capabilities }),
|
||||
});
|
||||
await load();
|
||||
}
|
||||
} catch (e) {
|
||||
errorMsg.value = 'Could not save — check the role slug is unique.';
|
||||
} finally {
|
||||
saving.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const remove = async () => {
|
||||
if (!selectedSlug.value || selected.value?.isDefault) return;
|
||||
await api(`/roles/${selectedSlug.value}`, { method: 'DELETE' });
|
||||
selectedSlug.value = null;
|
||||
await load();
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<AppListShell
|
||||
v-model:search="search"
|
||||
title="Role Editor"
|
||||
search-placeholder="Search roles…"
|
||||
:count-label="`${filtered.length} ROLES`"
|
||||
detail-icon="dashicons-groups"
|
||||
detail-title="Role Details"
|
||||
detail-text="Select a role from the list to view and edit its capabilities."
|
||||
:has-selection="!!selected || isCreating"
|
||||
>
|
||||
<template #header-actions>
|
||||
<button type="button" class="is-primary" @click="newRole">+ New Role</button>
|
||||
</template>
|
||||
|
||||
<template #list>
|
||||
<AppListItem
|
||||
v-for="r in filtered"
|
||||
:key="r.slug"
|
||||
icon="dashicons-groups"
|
||||
:title="r.name"
|
||||
:subtitle="`${r.userCount} user${r.userCount === 1 ? '' : 's'}`"
|
||||
:active="r.slug === selectedSlug"
|
||||
@click="selectRole(r)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<template #detail>
|
||||
<div class="role-editor">
|
||||
<div class="role-editor__row">
|
||||
<input
|
||||
v-if="isCreating"
|
||||
v-model="draft.slug"
|
||||
type="text"
|
||||
placeholder="role_slug"
|
||||
class="role-editor__slug"
|
||||
/>
|
||||
<input v-model="draft.name" type="text" placeholder="Display name" class="role-editor__name" />
|
||||
</div>
|
||||
|
||||
<p v-if="errorMsg" class="role-editor__error">{{ errorMsg }}</p>
|
||||
|
||||
<div class="role-editor__section">
|
||||
<h3>Capabilities</h3>
|
||||
<div class="role-editor__caps">
|
||||
<label v-for="cap in allCapabilities" :key="cap" class="role-editor__cap">
|
||||
<input type="checkbox" :checked="draft.capabilities.includes(cap)" @change="toggleCap(cap)" />
|
||||
{{ cap }}
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="role-editor__actions">
|
||||
<button
|
||||
type="button"
|
||||
class="is-danger"
|
||||
:disabled="!selectedSlug || selected?.isDefault"
|
||||
:title="selected?.isDefault ? 'Default WordPress roles cannot be deleted' : ''"
|
||||
@click="remove"
|
||||
>
|
||||
Delete
|
||||
</button>
|
||||
<button type="button" class="is-primary" :disabled="saving" @click="save">
|
||||
{{ saving ? 'Saving…' : 'Save' }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</AppListShell>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.role-editor { display: flex; flex-direction: column; gap: 18px; }
|
||||
.role-editor__row { display: flex; gap: 10px; }
|
||||
.role-editor__slug, .role-editor__name {
|
||||
padding: 8px 10px; border-radius: 8px; border: 1px solid var(--aurora-border);
|
||||
background: var(--aurora-bg-subtle); color: var(--aurora-text); font-size: 0.875rem;
|
||||
}
|
||||
.role-editor__name { flex: 1; font-weight: 700; }
|
||||
.role-editor__slug { width: 160px; }
|
||||
.role-editor__error { color: #ef4444; font-size: 0.8125rem; margin: 0; }
|
||||
.role-editor__section h3 {
|
||||
font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.03em;
|
||||
color: var(--aurora-text-muted); margin: 0 0 8px;
|
||||
}
|
||||
.role-editor__caps {
|
||||
display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
|
||||
gap: 8px 16px; max-height: 380px; overflow-y: auto;
|
||||
}
|
||||
.role-editor__cap { display: flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--aurora-text); }
|
||||
.role-editor__actions { display: flex; justify-content: flex-end; gap: 8px; }
|
||||
.role-editor__actions button {
|
||||
border: none; border-radius: 8px; padding: 9px 18px; font-size: 0.875rem; cursor: pointer;
|
||||
background: var(--aurora-bg-subtle); color: var(--aurora-text);
|
||||
}
|
||||
.role-editor__actions .is-primary { background: var(--aurora-accent); color: #fff; }
|
||||
.role-editor__actions .is-danger { color: #ef4444; }
|
||||
.role-editor__actions button:disabled { opacity: 0.5; cursor: default; }
|
||||
</style>
|
||||
Reference in New Issue
Block a user