From 55d750c3e80d9340f1eb2c51b668b9e2551ff0d4 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E3=82=AA=E3=82=B9=E3=82=AB=E3=83=BC=E3=80=81?=
 <oscar@oscar.surf>
Date: Wed, 11 Dec 2024 17:35:43 +0900
Subject: [PATCH] enhance(roles): use KeyValue to show policies

---
 .../frontend/src/components/MkRolePreview.vue |  2 +-
 .../frontend/src/pages/settings/roles.vue     | 23 +++++++++++++++----
 2 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/packages/frontend/src/components/MkRolePreview.vue b/packages/frontend/src/components/MkRolePreview.vue
index c1b922198..8ffa21333 100644
--- a/packages/frontend/src/components/MkRolePreview.vue
+++ b/packages/frontend/src/components/MkRolePreview.vue
@@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
 			<template v-else>
 				<i v-if="role.isAdministrator" class="ti ti-crown" style="color: var(--accent);"></i>
 				<i v-else-if="role.isModerator" class="ti ti-shield" style="color: var(--accent);"></i>
-				<i v-else class="ti ti-user" style="opacity: 0.7;"></i>
+				<i v-else class="ti ti-badge" style="opacity: 0.7;"></i>
 			</template>
 		</span>
 		<span :class="$style.name">{{ role.name }}</span>
diff --git a/packages/frontend/src/pages/settings/roles.vue b/packages/frontend/src/pages/settings/roles.vue
index ce3c4d4e9..9c549e256 100644
--- a/packages/frontend/src/pages/settings/roles.vue
+++ b/packages/frontend/src/pages/settings/roles.vue
@@ -13,11 +13,10 @@ SPDX-License-Identifier: AGPL-3.0-only
 	</FormSection>
 	<FormSection>
 		<template #label>{{ i18n.ts._role.policies }}</template>
-		<div class="_gaps_s">
-			<div v-for="policy in Object.keys($i.policies)" :key="policy">
-				{{ i18n.ts._role._options[`${policy}`] }} ... {{ $i.policies[policy] }}
-			</div>
-		</div>
+		<MkKeyValue v-for="policy in Object.keys($i.policies)" :key="policy" oneline style="margin: 1em 0;">
+			<template #key>{{ i18n.ts._role._options[`${policy}`] }}</template>
+			<template #value>{{ getValue(policy, $i.policies[policy]) }}</template>
+		</MkKeyValue>
 	</FormSection>
 </div>
 </template>
@@ -29,9 +28,23 @@ import { i18n } from '@/i18n.js';
 import { signinRequired } from '@/account.js';
 import { definePageMetadata } from '@/scripts/page-metadata.js';
 import MkRolePreview from '@/components/MkRolePreview.vue';
+import MkKeyValue from '@/components/MkKeyValue.vue';
 
 const $i = signinRequired();
 
+function getValue(policy, policyValue) {
+	if (typeof(policyValue) === 'boolean') {
+		return policyValue ? i18n.ts.yes : i18n.ts.no;
+	} else if (typeof(policyValue) === 'number') {
+		if (policy === 'driveCapacityMb') {
+			return `${policyValue}MB`;
+		}
+		return policyValue;
+	} else {
+		return policyValue;
+	}
+}
+
 const headerActions = computed(() => []);
 
 const headerTabs = computed(() => []);