🎨

packages/frontend/src/pages/admin/roles.edit.vue

@@ -1,22 +1,31 @@
 <template>
 <div>
 	<MkStickyContainer>
-		<template #header><XHeader :actions="headerActions" :tabs="headerTabs"/></template>
-		<MkSpacer :content-max="600">
-			<XEditor :role="role" @created="created" @updated="updated"/>
+		<template #header><XHeader :tabs="headerTabs"/></template>
+		<MkSpacer :content-max="600" :margin-min="16" :margin-max="32">
+			<XEditor v-if="data" v-model="data"/>
 		</MkSpacer>
+		<template #footer>
+			<div :class="$style.footer">
+				<MkSpacer :content-max="600" :margin-min="16" :margin-max="16">
+					<MkButton primary rounded @click="save"><i class="ti ti-check"></i> {{ i18n.ts.save }}</MkButton>
+				</MkSpacer>
+			</div>
+		</template>
 	</MkStickyContainer>
 </div>
 </template>
 
 <script lang="ts" setup>
 import { computed } from 'vue';
+import { v4 as uuid } from 'uuid';
 import XHeader from './_header_.vue';
 import XEditor from './roles.editor.vue';
 import * as os from '@/os';
 import { i18n } from '@/i18n';
 import { definePageMetadata } from '@/scripts/page-metadata';
 import { useRouter } from '@/router';
+import MkButton from '@/components/MkButton.vue';
 
 const router = useRouter();
 
@@ -25,23 +34,45 @@ const props = defineProps<{
 }>();
 
 let role = $ref(null);
+let data = $ref(null);
 
 if (props.id) {
 	role = await os.api('admin/roles/show', {
 		roleId: props.id,
 	});
+
+	data = role;
+} else {
+	data = {
+		name: 'New Role',
+		description: '',
+		rolePermission: 'normal',
+		color: null,
+		iconUrl: null,
+		target: 'manual',
+		condFormula: { id: uuid(), type: 'isRemote' },
+		isPublic: false,
+		asBadge: false,
+		canEditMembersByModerator: false,
+		policies: {},
+	};
 }
 
-function created(r) {
-	router.push('/admin/roles/' + r.id);
+async function save() {
+	if (role) {
+		os.apiWithDialog('admin/roles/update', {
+			roleId: role.id,
+			...data,
+		});
+		router.push('/admin/roles/' + role.id);
+	} else {
+		const created = await os.apiWithDialog('admin/roles/create', {
+			...data,
+		});
+		router.push('/admin/roles/' + created.id);
+	}
 }
 
-function updated() {
-	router.push('/admin/roles/' + role.id);
-}
-
-const headerActions = $computed(() => []);
-
 const headerTabs = $computed(() => []);
 
 definePageMetadata(computed(() => role ? {
@@ -54,5 +85,8 @@ definePageMetadata(computed(() => role ? {
 </script>
 
 <style lang="scss" module>
-
+.footer {
+	-webkit-backdrop-filter: var(--blur, blur(15px));
+	backdrop-filter: var(--blur, blur(15px));
+}
 </style>