feat(data-processing): add column header menu (#167)

The changes introduce a new `ColumnHeaderMenu` component that provides a dropdown menu with various options for the column header. This includes:

- Sorting the column in ascending or descending order
- Filtering the column
- Grouping by the column
- Applying common text transformations to the column cells (trim whitespace, collapse consecutive whitespace, convert to uppercase)

The component is added to the `DataTabPanel` component, where it is displayed next to the column header if the column is not a primary key. This provides users with more control and flexibility over the data processing features.

Author: DaxServer

frontend/.eslintrc-auto-import.json

@@ -36,6 +36,7 @@
     "Label": true,
     "MaybeRef": true,
     "MaybeRefOrGetter": true,
+    "MenuItem": true,
     "PageState": true,
     "ProjectColumn": true,
     "ProjectFile": true,
@@ -58,6 +59,7 @@
     "StatementSchema1": true,
     "StatementSchemaMapping": true,
     "TermsSchemaMapping": true,
+    "TieredMenu": true,
     "TransformationFunction": true,
     "TransformationParameter": true,
     "TransformationRule": true,

frontend/auto-imports.d.ts

@@ -9,6 +9,7 @@ declare global {
   const ApiKey: typeof import('./src/core/plugins/api')['ApiKey']
   const ApiPlugin: typeof import('./src/core/plugins/api')['ApiPlugin']
   const EffectScope: typeof import('vue')['EffectScope']
+  const MenuItem: typeof import('primevue/menuitem')['MenuItem']
   const ValidationMessages: typeof import('./src/shared/types/wikibase-schema')['ValidationMessages']
   const acceptHMRUpdate: typeof import('pinia')['acceptHMRUpdate']
   const api: typeof import('./src/core/plugins/api')['api']
@@ -359,9 +360,15 @@ declare global {
   export type { FileUploadUploaderEvent } from 'primevue/fileupload'
   import('primevue/fileupload')
   // @ts-ignore
+  export type { MenuItem } from 'primevue/menuitem'
+  import('primevue/menuitem')
+  // @ts-ignore
   export type { PageState } from 'primevue/paginator'
   import('primevue/paginator')
   // @ts-ignore
+  export type { TieredMenu } from 'primevue/tieredmenu'
+  import('primevue/tieredmenu')
+  // @ts-ignore
   export type { UUID } from 'crypto'
   import('crypto')
   // @ts-ignore

frontend/components.d.ts

@@ -15,6 +15,7 @@ declare module 'vue' {
     Chip: typeof import('primevue/chip')['default']
     ClaimEditor: typeof import('./src/features/wikibase-schema/components/ClaimEditor.vue')['default']
     Column: typeof import('primevue/column')['default']
+    ColumnHeaderMenu: typeof import('./src/features/data-processing/components/ColumnHeaderMenu.vue')['default']
     ColumnPalette: typeof import('./src/features/data-processing/components/ColumnPalette.vue')['default']
     ConfirmDialog: typeof import('primevue/confirmdialog')['default']
     CreateProject: typeof import('./src/features/project-management/pages/CreateProject.vue')['default']
@@ -54,6 +55,7 @@ declare module 'vue' {
     Tag: typeof import('primevue/tag')['default']
     TermSection: typeof import('./src/features/wikibase-schema/components/TermSection.vue')['default']
     TermsEditor: typeof import('./src/features/wikibase-schema/components/TermsEditor.vue')['default']
+    TieredMenu: typeof import('primevue/tieredmenu')['default']
     Toast: typeof import('primevue/toast')['default']
     ToggleSwitch: typeof import('primevue/toggleswitch')['default']
     ValidationDisplay: typeof import('./src/features/wikibase-schema/components/ValidationDisplay.vue')['default']

frontend/eslint.config.ts

@@ -2,6 +2,7 @@ import js from '@eslint/js'
 import prettierConfig from 'eslint-config-prettier'
 import pluginVue from 'eslint-plugin-vue'
 import { defineConfig } from 'eslint/config'
+import globals from 'globals'
 import tseslint from 'typescript-eslint'
 import vueParser from 'vue-eslint-parser'
 import autoImportGlobals from './.eslintrc-auto-import.json'
@@ -35,6 +36,7 @@ export default defineConfig(
         extraFileExtensions: ['.vue'],
       },
       globals: {
+        ...globals.browser,
         ...autoImportGlobals.globals,
       },
     },

frontend/src/features/data-processing/components/ColumnHeaderMenu.vue

@@ -0,0 +1,108 @@
+<script setup lang="ts">
+const props = defineProps<{
+  columnField: string
+  columnHeader: string
+  isPrimaryKey: boolean
+}>()
+
+const menu = ref()
+const isOpen = ref(false)
+
+const menuItems = ref<MenuItem[]>([
+  {
+    label: 'Sort',
+    icon: 'pi pi-sort-amount-down',
+    items: [
+      {
+        label: 'Ascending',
+        icon: 'pi pi-sort-amount-up',
+        command: () => console.log(`Sort ${props.columnHeader} Ascending`),
+      },
+      {
+        label: 'Descending',
+        icon: 'pi pi-sort-amount-down',
+        command: () => console.log(`Sort ${props.columnHeader} Descending`),
+      },
+    ],
+  },
+  {
+    separator: true,
+  },
+  {
+    label: 'Filter',
+    icon: 'pi pi-filter',
+    command: () => console.log(`Filter ${props.columnHeader}`),
+  },
+  {
+    label: 'Group By',
+    icon: 'pi pi-objects-column',
+    command: () => console.log(`Group By ${props.columnHeader}`),
+  },
+  {
+    separator: true,
+  },
+  {
+    label: 'Edit cells',
+    icon: 'pi pi-code',
+    items: [
+      {
+        label: 'Common transforms',
+        icon: 'pi pi-text',
+        items: [
+          {
+            label: 'Trim leading and trailing whitespace',
+            command: () => console.log(`Trim whitespace in ${props.columnHeader}`),
+          },
+          {
+            label: 'Collapse consecutive whitespace',
+            command: () => console.log(`Collapse consecutive whitespace in ${props.columnHeader}`),
+          },
+          {
+            separator: true,
+          },
+          {
+            label: 'To uppercase',
+            command: () => console.log(`Transform ${props.columnHeader} to Uppercase`),
+          },
+          {
+            label: 'To lowercase',
+            command: () => console.log(`Transform ${props.columnHeader} to Lowercase`),
+          },
+          {
+            label: 'To titlecase',
+            command: () => console.log(`Transform ${props.columnHeader} to Title Case`),
+          },
+        ],
+      },
+      {
+        label: 'Replace',
+        icon: 'pi pi-code',
+        command: () => console.log(`Replace in ${props.columnHeader}`),
+      },
+    ],
+  },
+])
+</script>
+
+<template>
+  <div class="flex items-center">
+    <Button
+      v-if="!isPrimaryKey"
+      type="button"
+      icon="pi pi-chevron-down"
+      class="p-button-rounded p-button-text p-button-sm"
+      :aria-controls="`column-menu-${columnField}`"
+      aria-haspopup="true"
+      :aria-expanded="isOpen"
+      @click="(event) => menu.toggle(event)"
+    />
+    <TieredMenu
+      :id="`column-menu-${columnField}`"
+      ref="menu"
+      :model="menuItems"
+      popup
+      @show="() => (isOpen = true)"
+      @hide="() => (isOpen = false)"
+    />
+  </div>
+</template>

frontend/src/features/data-processing/components/DataTabPanel.vue

@@ -58,6 +58,12 @@ onUnmounted(() => clearProject())
             v-if="col.pk"
             class="pi pi-key text-blue-600"
           />
+          <ColumnHeaderMenu
+            v-if="!col.pk"
+            :column-field="col.field"
+            :column-header="col.header"
+            :is-primary-key="col.pk"
+          />
           <span>{{ col.header }}</span>
         </div>
       </template>

frontend/vite.config.ts

@@ -34,11 +34,21 @@ export default defineConfig({
           imports: ['FileUploadUploaderEvent'],
           type: true,
         },
+        {
+          from: 'primevue/menuitem',
+          imports: ['MenuItem'],
+          type: true,
+        },
         {
           from: 'primevue/paginator',
           imports: ['PageState'],
           type: true,
         },
+        {
+          from: 'primevue/tieredmenu',
+          imports: ['TieredMenu'],
+          type: true,
+        },
         {
           from: 'primevue/useconfirm',
           imports: ['useConfirm'],