enhance(roles): use KeyValue to show policies

This commit is contained in:
オスカー、 2024-12-11 17:35:43 +09:00
parent 95c84ebb69
commit 55d750c3e8
No known key found for this signature in database
GPG key ID: 8947F3AF5B0B4BFE
2 changed files with 19 additions and 6 deletions

View file

@ -13,7 +13,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<template v-else> <template v-else>
<i v-if="role.isAdministrator" class="ti ti-crown" style="color: var(--accent);"></i> <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-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> </template>
</span> </span>
<span :class="$style.name">{{ role.name }}</span> <span :class="$style.name">{{ role.name }}</span>

View file

@ -13,11 +13,10 @@ SPDX-License-Identifier: AGPL-3.0-only
</FormSection> </FormSection>
<FormSection> <FormSection>
<template #label>{{ i18n.ts._role.policies }}</template> <template #label>{{ i18n.ts._role.policies }}</template>
<div class="_gaps_s"> <MkKeyValue v-for="policy in Object.keys($i.policies)" :key="policy" oneline style="margin: 1em 0;">
<div v-for="policy in Object.keys($i.policies)" :key="policy"> <template #key>{{ i18n.ts._role._options[`${policy}`] }}</template>
{{ i18n.ts._role._options[`${policy}`] }} ... {{ $i.policies[policy] }} <template #value>{{ getValue(policy, $i.policies[policy]) }}</template>
</div> </MkKeyValue>
</div>
</FormSection> </FormSection>
</div> </div>
</template> </template>
@ -29,9 +28,23 @@ import { i18n } from '@/i18n.js';
import { signinRequired } from '@/account.js'; import { signinRequired } from '@/account.js';
import { definePageMetadata } from '@/scripts/page-metadata.js'; import { definePageMetadata } from '@/scripts/page-metadata.js';
import MkRolePreview from '@/components/MkRolePreview.vue'; import MkRolePreview from '@/components/MkRolePreview.vue';
import MkKeyValue from '@/components/MkKeyValue.vue';
const $i = signinRequired(); 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 headerActions = computed(() => []);
const headerTabs = computed(() => []); const headerTabs = computed(() => []);