merge: Conditional role tester (!1201)
View MR for information: https://activitypub.software/TransFem-org/Sharkey/-/merge_requests/1201 Closes #897 Approved-by: dakkar <dakkar@thenautilus.net> Approved-by: Hazelnoot <acomputerdog@gmail.com>
This commit is contained in:
Hazelnoot
commit
49901cc46b
7 changed files with 221 additions and 4 deletions
|
|
@ -6,6 +6,10 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template>
|
||||
<div class="_gaps">
|
||||
<div :class="$style.header">
|
||||
<div style="display: flex; align-items: center;">
|
||||
<i v-if="results !== null && results[v.id]" class="ti ti-check" :class="$style.testResultTrue"></i>
|
||||
<i v-else-if="results !== null" class="ti ti-x" :class="$style.testResultFalse"></i>
|
||||
</div>
|
||||
<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>
|
||||
|
|
@ -50,7 +54,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<template #item="{element}">
|
||||
<div :class="$style.item">
|
||||
<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
|
||||
<RolesEditorFormula :modelValue="element" draggable @update:modelValue="updated => valuesItemUpdated(updated)" @remove="removeItem(element)"/>
|
||||
<RolesEditorFormula :modelValue="element" :results="results" draggable @update:modelValue="updated => valuesItemUpdated(updated)" @remove="removeItem(element)"/>
|
||||
</div>
|
||||
</template>
|
||||
</Sortable>
|
||||
|
|
@ -58,7 +62,7 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</div>
|
||||
|
||||
<div v-else-if="type === 'not'" :class="$style.item">
|
||||
<RolesEditorFormula v-model="v.value"/>
|
||||
<RolesEditorFormula v-model="v.value" :results="results"/>
|
||||
</div>
|
||||
|
||||
<MkInput v-else-if="type === 'createdLessThan' || type === 'createdMoreThan'" v-model="v.sec" type="number">
|
||||
|
|
@ -127,6 +131,7 @@ const emit = defineEmits<{
|
|||
const props = defineProps<{
|
||||
modelValue: any;
|
||||
draggable?: boolean;
|
||||
results: object | null;
|
||||
}>();
|
||||
|
||||
const v = ref(deepClone(props.modelValue));
|
||||
|
|
@ -229,4 +234,16 @@ function removeSelf() {
|
|||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.testResultFalse {
|
||||
color: var(--MI_THEME-error);
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.testResultTrue {
|
||||
color: var(--MI_THEME-success);
|
||||
align-self: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -48,7 +48,39 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
<MkFolder v-if="role.target === 'conditional'" defaultOpen>
|
||||
<template #label>{{ i18n.ts._role.condition }}</template>
|
||||
<div class="_gaps">
|
||||
<RolesEditorFormula v-model="role.condFormula"/>
|
||||
<RolesEditorFormula v-model="role.condFormula" :results="conditionResults"/>
|
||||
<div>
|
||||
<div :class="$style.userSelectLabel">{{ i18n.ts._role.selectTestUser }}</div>
|
||||
<MkButton
|
||||
v-if="conditionTestUser == null"
|
||||
transparent
|
||||
:class="$style.userSelectButton"
|
||||
@click="selectUser"
|
||||
>
|
||||
<div :class="$style.userSelectButtonInner">
|
||||
<span><i class="ti ti-plus"></i></span>
|
||||
<span>{{ i18n.ts.selectUser }}</span>
|
||||
</div>
|
||||
</MkButton>
|
||||
<div v-else :class="$style.userSelectedButtons">
|
||||
<div style="overflow: hidden;">
|
||||
<MkUserCardMini
|
||||
:user="conditionTestUser"
|
||||
:withChart="false"
|
||||
:class="$style.userSelectedCard"
|
||||
/>
|
||||
</div>
|
||||
<div>
|
||||
<button
|
||||
class="_button"
|
||||
:class="$style.userSelectedSwitchButton"
|
||||
@click="selectUser"
|
||||
>
|
||||
<i class="ph-user-switch ph-bold ph-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</MkFolder>
|
||||
|
||||
|
|
@ -843,10 +875,11 @@ SPDX-License-Identifier: AGPL-3.0-only
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { watch, ref, computed } from 'vue';
|
||||
import { watch, ref, computed, shallowRef } from 'vue';
|
||||
import { throttle } from 'throttle-debounce';
|
||||
import { ROLE_POLICIES } from '@@/js/const.js';
|
||||
import RolesEditorFormula from './RolesEditorFormula.vue';
|
||||
import type * as Misskey from 'misskey-js';
|
||||
import MkInput from '@/components/MkInput.vue';
|
||||
import MkColorInput from '@/components/MkColorInput.vue';
|
||||
import MkSelect from '@/components/MkSelect.vue';
|
||||
|
|
@ -854,10 +887,14 @@ import MkTextarea from '@/components/MkTextarea.vue';
|
|||
import MkFolder from '@/components/MkFolder.vue';
|
||||
import MkSwitch from '@/components/MkSwitch.vue';
|
||||
import MkRange from '@/components/MkRange.vue';
|
||||
import MkButton from '@/components/MkButton.vue';
|
||||
import MkUserCardMini from '@/components/MkUserCardMini.vue';
|
||||
import FormSlot from '@/components/form/slot.vue';
|
||||
import { i18n } from '@/i18n.js';
|
||||
import { instance } from '@/instance.js';
|
||||
import { deepClone } from '@/utility/clone.js';
|
||||
import * as os from '@/os.js';
|
||||
import { misskeyApi } from '@/utility/misskey-api.js';
|
||||
|
||||
const emit = defineEmits<{
|
||||
(ev: 'update:modelValue', v: any): void;
|
||||
|
|
@ -870,6 +907,10 @@ const props = defineProps<{
|
|||
|
||||
const role = ref(deepClone(props.modelValue));
|
||||
|
||||
const conditionTestUser = shallowRef<Misskey.entities.UserDetailed | null>(null);
|
||||
|
||||
const conditionResults = ref(null);
|
||||
|
||||
// fill missing policy
|
||||
for (const ROLE_POLICY of ROLE_POLICIES) {
|
||||
if (role.value.policies[ROLE_POLICY] == null) {
|
||||
|
|
@ -908,6 +949,19 @@ function matchQuery(keywords: string[]): boolean {
|
|||
return keywords.some(keyword => keyword.toLowerCase().includes(q.value.toLowerCase()));
|
||||
}
|
||||
|
||||
async function updateTestResults() {
|
||||
conditionResults.value = await misskeyApi('admin/roles/annotate-condition', { userId: conditionTestUser.value.id, condFormula: role.value.condFormula });
|
||||
}
|
||||
|
||||
function selectUser() {
|
||||
os.selectUser({
|
||||
includeSelf: true,
|
||||
}).then((_user) => {
|
||||
conditionTestUser.value = _user;
|
||||
updateTestResults();
|
||||
});
|
||||
}
|
||||
|
||||
const save = throttle(100, () => {
|
||||
const data = {
|
||||
name: role.value.name,
|
||||
|
|
@ -926,6 +980,10 @@ const save = throttle(100, () => {
|
|||
policies: role.value.policies,
|
||||
};
|
||||
|
||||
if (conditionTestUser.value !== null) {
|
||||
updateTestResults();
|
||||
}
|
||||
|
||||
emit('update:modelValue', data);
|
||||
});
|
||||
|
||||
|
|
@ -940,4 +998,36 @@ watch(role, save, { deep: true });
|
|||
.priorityIndicator {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.userSelectLabel {
|
||||
font-size: 0.85em;
|
||||
padding: 0 0 8px;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.userSelectButton {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding: 12px;
|
||||
border: 2px dashed color(from var(--MI_THEME-fg) srgb r g b / 0.5);
|
||||
}
|
||||
|
||||
.userSelectButtonInner {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
min-height: 38px;
|
||||
}
|
||||
|
||||
.userSelectedButtons {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr auto;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.userSelectedSwitchButton {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue