fix: close button doesn't work in expression editor dialog

EzzalddeenAli · Feb 20, 2024 · ae113e0 · ae113e0
1 parent a89899a
commit ae113e0
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 21 deletions.
diff --git a/frontend/src/query/visual/ColumnExpressionEditor.vue b/frontend/src/query/visual/ColumnExpressionEditor.vue
@@ -15,7 +15,7 @@ const emptyExpressionColumn = {
 }
 
 const assistedQuery = inject('assistedQuery')
-const emit = defineEmits(['save', 'discard', 'remove'])
+const emit = defineEmits(['save', 'remove'])
 const props = defineProps({ column: Object })
 
 const propsColumn = props.column || emptyExpressionColumn
@@ -83,12 +83,9 @@ function onSave() {
 			</div>
 		</div>
 
-		<div class="flex flex-col justify-between gap-2 lg:flex-row">
-			<Button variant="outline" @click="emit('discard')"> Discard </Button>
-			<div class="flex flex-col gap-2 lg:flex-row">
-				<Button variant="outline" theme="red" @click="emit('remove')">Remove</Button>
-				<Button variant="solid" :disabled="!isValid" @click="onSave"> Save </Button>
-			</div>
+		<div class="flex flex-col justify-end gap-2 lg:flex-row">
+			<Button variant="outline" theme="red" @click="emit('remove')">Remove</Button>
+			<Button variant="solid" :disabled="!isValid" @click="onSave"> Save </Button>
 		</div>
 	</div>
 </template>
diff --git a/frontend/src/query/visual/ColumnSection.vue b/frontend/src/query/visual/ColumnSection.vue
@@ -147,20 +147,21 @@ function onColumnSort(e) {
 		</DraggableList>
 	</div>
 
-	<Dialog
-		:modelValue="showExpressionEditor"
-		:options="{
-			title: 'Column Expression',
-			size: '3xl',
-		}"
-	>
-		<template #body-content>
-			<ColumnExpressionEditor
-				:column="columns[activeColumnIdx]"
-				@remove="onRemoveColumn"
-				@save="onSaveColumn"
-				@discard="activeColumnIdx = null"
-			/>
+	<Dialog :modelValue="showExpressionEditor" :options="{ size: '3xl' }">
+		<template #body>
+			<div class="bg-white px-4 pb-6 pt-5 sm:px-6">
+				<div class="flex items-center justify-between pb-4">
+					<h3 class="text-2xl font-semibold leading-6 text-gray-900">
+						Column Expression
+					</h3>
+					<Button variant="ghost" @click="activeColumnIdx = null" icon="x"> </Button>
+				</div>
+				<ColumnExpressionEditor
+					:column="columns[activeColumnIdx]"
+					@remove="onRemoveColumn"
+					@save="onSaveColumn"
+				/>
+			</div>
 		</template>
 	</Dialog>
 </template>