sim1222/misskey
1
0
Fork 0
mirror of https://github.com/sim1222/misskey.git synced 2025-08-06 08:43:56 +09:00
Code Issues Projects Releases Wiki Activity

feat: conditional role

Browse Source 
Resolve #9539
This commit is contained in:
syuilo
2023-01-13 11:03:54 +09:00
parent 74910f8d70
commit c5c40a73b7
9 changed files with 296 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

129
packages/frontend/src/pages/admin/RolesEditorFormula.vue Normal file
View File

@ -0,0 +1,129 @@
<template>
<div :class="$style.root" class="_gaps">
<div :class="$style.header">
<MkSelect v-model="type" :class="$style.typeSelect">
<option value="isLocal">{{ i18n.ts._role._condition.isLocal }}</option>
<option value="isRemote">{{ i18n.ts._role._condition.isRemote }}</option>
<option value="createdLessThan">{{ i18n.ts._role._condition.createdLessThan }}</option>
<option value="createdMoreThan">{{ i18n.ts._role._condition.createdMoreThan }}</option>
<option value="and">{{ i18n.ts._role._condition.and }}</option>
<option value="or">{{ i18n.ts._role._condition.or }}</option>
<option value="not">{{ i18n.ts._role._condition.not }}</option>
</MkSelect>
<button v-if="draggable" class="drag-handle _button" :class="$style.dragHandle">
<i class="ti ti-menu-2"></i>
</button>
</div>
<div v-if="type === 'and' || type === 'or'" :class="$style.values" class="_gaps">
<Sortable v-model="v.values" tag="div" class="_gaps" item-key="id" handle=".drag-handle" :group="{ name: 'roleFormula' }" :animation="150" :swap-threshold="0.5">
<template #item="{element}">
<div :class="$style.item">
<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
<RolesEditorFormula :model-value="element" draggable @update:model-value="updated => valuesItemUpdated(updated)"/>
</div>
</template>
</Sortable>
<MkButton rounded style="margin: 0 auto;" @click="addValue"><i class="ti ti-plus"></i> {{ i18n.ts.add }}</MkButton>
</div>
<div v-else-if="type === 'not'" :class="$style.item">
<RolesEditorFormula v-model="v.value"/>
</div>
<MkInput v-else-if="type === 'createdLessThan' || type === 'createdMoreThan'" v-model="v.sec" type="number">
<template #suffix>sec</template>
</MkInput>
</div>
</template>
<script lang="ts" setup>
import { computed, defineAsyncComponent, ref, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkTextarea from '@/components/MkTextarea.vue';
import MkFolder from '@/components/MkFolder.vue';
import MkSwitch from '@/components/MkSwitch.vue';
import MkButton from '@/components/MkButton.vue';
import FormSlot from '@/components/form/slot.vue';
import * as os from '@/os';
import { i18n } from '@/i18n';
import { deepClone } from '@/scripts/clone';
const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.default));
const emit = defineEmits<{
(ev: 'update:modelValue', value: any): void;
}>();
const props = defineProps<{
modelValue: any;
draggable?: boolean;
}>();
const v = ref(deepClone(props.modelValue));
watch(() => props.modelValue, () => {
if (JSON.stringify(props.modelValue) === JSON.stringify(v.value)) return;
v.value = deepClone(props.modelValue);
}, { deep: true });
watch(v, () => {
emit('update:modelValue', v.value);
}, { deep: true });
const type = computed({
get: () => v.value.type,
set: (t) => {
if (t === 'and') v.value.values = [];
if (t === 'or') v.value.values = [];
if (t === 'not') v.value.value = { id: uuid(), type: 'isRemote' };
if (t === 'createdLessThan') v.value.sec = 86400;
if (t === 'createdMoreThan') v.value.sec = 86400;
v.value.type = t;
},
});
function addValue() {
v.value.values.push({ id: uuid(), type: 'isRemote' });
}
function valuesItemUpdated(item) {
const i = v.value.values.findIndex(_item => _item.id === item.id);
v.value.values[i] = item;
}
</script>
<style lang="scss" module>
.root {
}
.header {
display: flex;
}
.typeSelect {
flex: 1;
}
.dragHandle {
cursor: move;
margin-left: 10px;
}
.item {
border: solid 2px var(--divider);
border-radius: var(--radius);
padding: 12px;
&:hover {
border-color: var(--accent);
}
}
.values {
}
</style>

30
packages/frontend/src/pages/admin/roles.editor.vue
View File

@ -15,12 +15,26 @@
<MkSelect v-model="rolePermission" :readonly="readonly">
<template #label>{{ i18n.ts._role.permission }}</template>
<template #caption><div v-html="i18n.ts._role.descriptionOfType.replaceAll('\n', '<br>')"></div></template>
<template #caption><div v-html="i18n.ts._role.descriptionOfPermission.replaceAll('\n', '<br>')"></div></template>
<option value="normal">{{ i18n.ts.normalUser }}</option>
<option value="moderator">{{ i18n.ts.moderator }}</option>
<option value="administrator">{{ i18n.ts.administrator }}</option>
</MkSelect>
<MkSelect v-model="target" :readonly="readonly">
<template #label>{{ i18n.ts._role.assignTarget }}</template>
<template #caption><div v-html="i18n.ts._role.descriptionOfAssignTarget.replaceAll('\n', '<br>')"></div></template>
<option value="manual">{{ i18n.ts._role.manual }}</option>
<option value="conditional">{{ i18n.ts._role.conditional }}</option>
</MkSelect>
<MkFolder v-if="target === 'conditional'" default-open>
<template #label>{{ i18n.ts._role.condition }}</template>
<div class="_gaps">
<RolesEditorFormula v-model="condFormula"/>
</div>
</MkFolder>
<FormSlot>
<template #label>{{ i18n.ts._role.options }}</template>
<div class="_gaps_s">
@ -107,7 +121,9 @@
</template>
<script lang="ts" setup>
import { computed } from 'vue';
import { computed, watch } from 'vue';
import { v4 as uuid } from 'uuid';
import RolesEditorFormula from './RolesEditorFormula.vue';
import MkInput from '@/components/MkInput.vue';
import MkSelect from '@/components/MkSelect.vue';
import MkTextarea from '@/components/MkTextarea.vue';
@ -134,6 +150,8 @@ let name = $ref(role?.name ?? 'New Role');
let description = $ref(role?.description ?? '');
let rolePermission = $ref(role?.isAdministrator ? 'administrator' : role?.isModerator ? 'moderator' : 'normal');
let color = $ref(role?.color ?? null);
let target = $ref(role?.target ?? 'manual');
let condFormula = $ref(role?.condFormula ?? { id: uuid(), type: 'isRemote' });
let isPublic = $ref(role?.isPublic ?? false);
let canEditMembersByModerator = $ref(role?.canEditMembersByModerator ?? false);
let options_gtlAvailable_useDefault = $ref(role?.options?.gtlAvailable?.useDefault ?? true);
@ -147,6 +165,10 @@ let options_driveCapacityMb_value = $ref(role?.options?.driveCapacityMb?.value ?
let options_antennaLimit_useDefault = $ref(role?.options?.antennaLimit?.useDefault ?? true);
let options_antennaLimit_value = $ref(role?.options?.antennaLimit?.value ?? 0);
watch($$(condFormula), () => {
console.log(condFormula);
}, { deep: true });
function getOptions() {
return {
gtlAvailable: { useDefault: options_gtlAvailable_useDefault, value: options_gtlAvailable_value },
@ -165,6 +187,8 @@ async function save() {
name,
description,
color: color === '' ? null : color,
target,
condFormula,
isAdministrator: rolePermission === 'administrator',
isModerator: rolePermission === 'moderator',
isPublic,
@ -177,6 +201,8 @@ async function save() {
name,
description,
color: color === '' ? null : color,
target,
condFormula,
isAdministrator: rolePermission === 'administrator',
isModerator: rolePermission === 'moderator',
isPublic,