fix(client): ロールの条件を削除する手段が無かったのを修正

This commit is contained in:
syuilo 2023-01-13 11:51:36 +09:00
parent 8d2c3bb18d
commit d43a4a2d46

View file

@ -13,6 +13,9 @@
<button v-if="draggable" class="drag-handle _button" :class="$style.dragHandle"> <button v-if="draggable" class="drag-handle _button" :class="$style.dragHandle">
<i class="ti ti-menu-2"></i> <i class="ti ti-menu-2"></i>
</button> </button>
<button v-if="draggable" class="_button" :class="$style.remove" @click="removeSelf">
<i class="ti ti-x"></i>
</button>
</div> </div>
<div v-if="type === 'and' || type === 'or'" :class="$style.values" class="_gaps"> <div v-if="type === 'and' || type === 'or'" :class="$style.values" class="_gaps">
@ -20,7 +23,7 @@
<template #item="{element}"> <template #item="{element}">
<div :class="$style.item"> <div :class="$style.item">
<!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 --> <!-- divが無いとエラーになる https://github.com/SortableJS/vue.draggable.next/issues/189 -->
<RolesEditorFormula :model-value="element" draggable @update:model-value="updated => valuesItemUpdated(updated)"/> <RolesEditorFormula :model-value="element" draggable @update:model-value="updated => valuesItemUpdated(updated)" @remove="removeItem(element)"/>
</div> </div>
</template> </template>
</Sortable> </Sortable>
@ -55,6 +58,7 @@ const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.d
const emit = defineEmits<{ const emit = defineEmits<{
(ev: 'update:modelValue', value: any): void; (ev: 'update:modelValue', value: any): void;
(ev: 'remove'): void;
}>(); }>();
const props = defineProps<{ const props = defineProps<{
@ -93,6 +97,14 @@ function valuesItemUpdated(item) {
const i = v.value.values.findIndex(_item => _item.id === item.id); const i = v.value.values.findIndex(_item => _item.id === item.id);
v.value.values[i] = item; v.value.values[i] = item;
} }
function removeItem(item) {
v.value.values = v.value.values.filter(_item => _item.id !== item.id);
}
function removeSelf() {
emit('remove');
}
</script> </script>
<style lang="scss" module> <style lang="scss" module>
@ -113,6 +125,10 @@ function valuesItemUpdated(item) {
margin-left: 10px; margin-left: 10px;
} }
.remove {
margin-left: 10px;
}
.item { .item {
border: solid 2px var(--divider); border: solid 2px var(--divider);
border-radius: var(--radius); border-radius: var(--radius);