From 7e2b8fb319b9f9da835f56079e5ec8da3b511fcc Mon Sep 17 00:00:00 2001
From: DaxServer <daxserver@icloud.com>
Date: Sun, 28 Sep 2025 18:37:51 +0200
Subject: [PATCH] feat(ColumnHeaderMenu): add replace functionality

This commit adds a new "Replace" functionality to the ColumnHeaderMenu component. The changes include:

- Adding a new `showReplaceDialog` ref to track the visibility of the replace dialog.
- Implementing a `handleReplaceCompleted` function that is called when the replace operation is completed, displaying a success message.
- Updating the "Replace" menu item to toggle the `showReplaceDialog` when clicked.
- Adding a new `ReplaceDialog` component that handles the replace operation.
- Updating the auto-imports to include the `useReplaceApi` composable and the `Dialog` component.

These changes allow users to easily replace values in a column directly from the column header menu.
---
 frontend/components.d.ts                      |   3 +
 .../components/ColumnHeaderMenu.vue           |  18 ++-
 .../components/ReplaceDialog.vue              | 151 ++++++++++++++++++
 3 files changed, 171 insertions(+), 1 deletion(-)
 create mode 100644 frontend/src/features/data-processing/components/ReplaceDialog.vue

diff --git a/frontend/components.d.ts b/frontend/components.d.ts
index c412eb1..0bd19af 100644
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -12,6 +12,7 @@ declare module 'vue' {
     BasePropertyValueEditor: typeof import('./src/features/wikibase-schema/components/BasePropertyValueEditor.vue')['default']
     Button: typeof import('primevue/button')['default']
     Card: typeof import('primevue/card')['default']
+    Checkbox: typeof import('primevue/checkbox')['default']
     Chip: typeof import('primevue/chip')['default']
     ClaimEditor: typeof import('./src/features/wikibase-schema/components/ClaimEditor.vue')['default']
     Column: typeof import('primevue/column')['default']
@@ -23,6 +24,7 @@ declare module 'vue' {
     DataTable: typeof import('primevue/datatable')['default']
     DataTabPanel: typeof import('./src/features/data-processing/components/DataTabPanel.vue')['default']
     DefaultLayout: typeof import('./src/core/layouts/DefaultLayout.vue')['default']
+    Dialog: typeof import('primevue/dialog')['default']
     DropZone: typeof import('./src/features/wikibase-schema/components/DropZone.vue')['default']
     FileUpload: typeof import('primevue/fileupload')['default']
     Header: typeof import('./src/shared/components/Header.vue')['default']
@@ -39,6 +41,7 @@ declare module 'vue' {
     QualifiersEditor: typeof import('./src/features/wikibase-schema/components/QualifiersEditor.vue')['default']
     ReferenceContainer: typeof import('./src/features/wikibase-schema/components/ReferenceContainer.vue')['default']
     ReferencesEditor: typeof import('./src/features/wikibase-schema/components/ReferencesEditor.vue')['default']
+    ReplaceDialog: typeof import('./src/features/data-processing/components/ReplaceDialog.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']
     SchemaSelector: typeof import('./src/features/wikibase-schema/components/SchemaSelector.vue')['default']
diff --git a/frontend/src/features/data-processing/components/ColumnHeaderMenu.vue b/frontend/src/features/data-processing/components/ColumnHeaderMenu.vue
index e846b4f..368033b 100644
--- a/frontend/src/features/data-processing/components/ColumnHeaderMenu.vue
+++ b/frontend/src/features/data-processing/components/ColumnHeaderMenu.vue
@@ -5,8 +5,15 @@ const props = defineProps<{
   isPrimaryKey: boolean
 }>()
 
+const { showSuccess } = useErrorHandling()
+
 const menu = ref()
 const isOpen = ref(false)
+const showReplaceDialog = ref(false)
+
+const handleReplaceCompleted = (affectedRows: number) => {
+  showSuccess(`Replace completed: ${affectedRows} rows affected`)
+}
 
 const menuItems = ref<MenuItem[]>([
   {
@@ -77,7 +84,9 @@ const menuItems = ref<MenuItem[]>([
       {
         label: 'Replace',
         icon: 'pi pi-code',
-        command: () => console.log(`Replace in ${props.columnHeader}`),
+        command: () => {
+          showReplaceDialog.value = true
+        },
       },
     ],
   },
@@ -104,5 +113,12 @@ const menuItems = ref<MenuItem[]>([
       @show="() => (isOpen = true)"
       @hide="() => (isOpen = false)"
     />
+    <ReplaceDialog
+      :visible="showReplaceDialog"
+      :column-field="columnField"
+      :column-header="columnHeader"
+      @update:visible="showReplaceDialog = $event"
+      @replace-completed="handleReplaceCompleted"
+    />
   </div>
 </template>
diff --git a/frontend/src/features/data-processing/components/ReplaceDialog.vue b/frontend/src/features/data-processing/components/ReplaceDialog.vue
new file mode 100644
index 0000000..0b9c413
--- /dev/null
+++ b/frontend/src/features/data-processing/components/ReplaceDialog.vue
@@ -0,0 +1,151 @@
+<script setup lang="ts">
+const props = defineProps<{
+  visible: boolean
+  columnField: string
+  columnHeader: string
+}>()
+
+const emit = defineEmits<{
+  'update:visible': [value: boolean]
+  'replace-completed': [affectedRows: number]
+}>()
+
+const api = useApi()
+const { showError } = useErrorHandling()
+const projectId = useRouteParams('id') as Ref<UUID>
+
+const findText = ref('')
+const replaceText = ref('')
+const caseSensitive = ref(false)
+const wholeWord = ref(false)
+const isLoading = ref(false)
+
+const handleReplace = async () => {
+  if (!findText.value) {
+    return
+  }
+
+  isLoading.value = true
+
+  try {
+    const { data, error } = await api.project({ projectId: projectId.value }).replace.post({
+      column: props.columnField,
+      find: findText.value,
+      replace: replaceText.value,
+      caseSensitive: caseSensitive.value,
+      wholeWord: wholeWord.value,
+    })
+
+    if (error) {
+      showError(error.value as ExtendedError[])
+      return
+    }
+
+    if (!data?.affectedRows) {
+      showError([{ code: 'NOT_FOUND', message: 'Replace operation failed' }])
+      return
+    }
+
+    if (data?.affectedRows !== undefined && data?.affectedRows !== null) {
+      emit('replace-completed', data.affectedRows)
+    }
+  } catch (error) {
+    console.error('Replace operation failed:', error)
+  } finally {
+    isLoading.value = false
+    closeDialog()
+  }
+}
+
+const closeDialog = () => {
+  emit('update:visible', false)
+  // Reset form
+  findText.value = ''
+  replaceText.value = ''
+  caseSensitive.value = false
+  wholeWord.value = false
+}
+
+const handleVisibleChange = (visible: boolean) => {
+  emit('update:visible', visible)
+  if (!visible) {
+    // Reset form when dialog is closed
+    findText.value = ''
+    replaceText.value = ''
+    caseSensitive.value = false
+    wholeWord.value = false
+  }
+}
+</script>
+
+<template>
+  <Dialog
+    :visible="visible"
+    modal
+    :header="`Replace in ${columnHeader}`"
+    :style="{ width: '30vw' }"
+    @update:visible="handleVisibleChange"
+  >
+    <div class="flex flex-col gap-4">
+      <div class="flex flex-col gap-2">
+        <label for="find-text" class="font-semibold">Find</label>
+        <InputText
+          id="find-text"
+          v-model="findText"
+          placeholder="Enter text to find"
+          :disabled="isLoading"
+        />
+      </div>
+
+      <div class="flex flex-col gap-2">
+        <label for="replace-text" class="font-semibold">Replace with</label>
+        <InputText
+          id="replace-text"
+          v-model="replaceText"
+          placeholder="Enter replacement text"
+          :disabled="isLoading"
+        />
+      </div>
+
+      <div class="flex flex-col gap-3">
+        <div class="flex items-center gap-2">
+          <Checkbox
+            id="case-sensitive"
+            v-model="caseSensitive"
+            binary
+            :disabled="isLoading"
+          />
+          <label for="case-sensitive" class="cursor-pointer">Case sensitive</label>
+        </div>
+
+        <div class="flex items-center gap-2">
+          <Checkbox
+            id="whole-word"
+            v-model="wholeWord"
+            binary
+            :disabled="isLoading"
+          />
+          <label for="whole-word" class="cursor-pointer">Whole word only</label>
+        </div>
+      </div>
+    </div>
+
+    <template #footer>
+      <Button
+        label="Cancel"
+        icon="pi pi-times"
+        text
+        severity="secondary"
+        :disabled="isLoading"
+        @click="closeDialog"
+      />
+      <Button
+        label="Replace"
+        icon="pi pi-check"
+        :loading="isLoading"
+        :disabled="!findText"
+        @click="handleReplace"
+      />
+    </template>
+  </Dialog>
+</template>