From d43a4a2d46bd6ec09a7146958b0769ea5a690746 Mon Sep 17 00:00:00 2001
From: syuilo <Syuilotan@yahoo.co.jp>
Date: Fri, 13 Jan 2023 11:51:36 +0900
Subject: [PATCH] =?UTF-8?q?fix(client):=20=E3=83=AD=E3=83=BC=E3=83=AB?=
 =?UTF-8?q?=E3=81=AE=E6=9D=A1=E4=BB=B6=E3=82=92=E5=89=8A=E9=99=A4=E3=81=99?=
 =?UTF-8?q?=E3=82=8B=E6=89=8B=E6=AE=B5=E3=81=8C=E7=84=A1=E3=81=8B=E3=81=A3?=
 =?UTF-8?q?=E3=81=9F=E3=81=AE=E3=82=92=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/pages/admin/RolesEditorFormula.vue     | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/pages/admin/RolesEditorFormula.vue b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
index 76ba63927..1cce5e58e 100644
--- a/packages/frontend/src/pages/admin/RolesEditorFormula.vue
+++ b/packages/frontend/src/pages/admin/RolesEditorFormula.vue
@@ -13,6 +13,9 @@
 		<button v-if="draggable" class="drag-handle _button" :class="$style.dragHandle">
 			<i class="ti ti-menu-2"></i>
 		</button>
+		<button v-if="draggable" class="_button" :class="$style.remove" @click="removeSelf">
+			<i class="ti ti-x"></i>
+		</button>
 	</div>
 
 	<div v-if="type === 'and' || type === 'or'" :class="$style.values" class="_gaps">
@@ -20,7 +23,7 @@
 			<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)"/>
+					<RolesEditorFormula :model-value="element" draggable @update:model-value="updated => valuesItemUpdated(updated)" @remove="removeItem(element)"/>
 				</div>
 			</template>
 		</Sortable>
@@ -55,6 +58,7 @@ const Sortable = defineAsyncComponent(() => import('vuedraggable').then(x => x.d
 
 const emit = defineEmits<{
 	(ev: 'update:modelValue', value: any): void;
+	(ev: 'remove'): void;
 }>();
 
 const props = defineProps<{
@@ -93,6 +97,14 @@ function valuesItemUpdated(item) {
 	const i = v.value.values.findIndex(_item => _item.id === item.id);
 	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>
 
 <style lang="scss" module>
@@ -113,6 +125,10 @@ function valuesItemUpdated(item) {
 	margin-left: 10px;
 }
 
+.remove {
+	margin-left: 10px;
+}
+
 .item {
 	border: solid 2px var(--divider);
 	border-radius: var(--radius);