refactor(wikibase-schema-editor): harmonize qualifiers and references editors (#130)

Author: DaxServer

frontend/.eslintrc-auto-import.json

@@ -41,6 +41,9 @@
     "ProjectFile": true,
     "PropType": true,
     "PropertyReference": true,
+    "PropertyValueEditorActions": true,
+    "PropertyValueEditorOptions": true,
+    "PropertyValueEditorState": true,
     "PropertyValueMap": true,
     "Ref": true,
     "ReferenceSchemaMapping": true,
@@ -53,6 +56,7 @@
     "Slot": true,
     "Slots": true,
     "StatementRank": true,
+    "StatementSchema": true,
     "StatementSchemaMapping": true,
     "TermsSchemaMapping": true,
     "TransformationFunction": true,
@@ -321,6 +325,8 @@
     "useProjectListStore": true,
     "useProjectStore": true,
     "usePropertySelection": true,
+    "usePropertyValueDisplay": true,
+    "usePropertyValueEditor": true,
     "useRafFn": true,
     "useRefHistory": true,
     "useReferenceValueMapping": true,

frontend/auto-imports.d.ts

@@ -259,6 +259,8 @@ declare global {
   const useProjectListStore: typeof import('./src/features/project-management/stores/project-list.store')['useProjectListStore']
   const useProjectStore: typeof import('./src/features/project-management/stores/project.store')['useProjectStore']
   const usePropertySelection: typeof import('./src/features/wikibase-schema/composables/usePropertySelection')['usePropertySelection']
+  const usePropertyValueDisplay: typeof import('./src/features/wikibase-schema/composables/usePropertyValueDisplay')['usePropertyValueDisplay']
+  const usePropertyValueEditor: typeof import('./src/features/wikibase-schema/composables/usePropertyValueEditor')['usePropertyValueEditor']
   const useRafFn: typeof import('@vueuse/core')['useRafFn']
   const useRefHistory: typeof import('@vueuse/core')['useRefHistory']
   const useReferenceValueMapping: typeof import('./src/features/wikibase-schema/composables/useReferenceValueMapping')['useReferenceValueMapping']
@@ -373,6 +375,9 @@ declare global {
   export type { ProjectColumn } from './src/features/data-processing/composables/useColumnGeneration'
   import('./src/features/data-processing/composables/useColumnGeneration')
   // @ts-ignore
+  export type { PropertyValueEditorState, PropertyValueEditorActions, PropertyValueEditorOptions } from './src/features/wikibase-schema/composables/usePropertyValueEditor'
+  import('./src/features/wikibase-schema/composables/usePropertyValueEditor')
+  // @ts-ignore
   export type { SchemaRequest } from './src/features/wikibase-schema/composables/useSchemaApi'
   import('./src/features/wikibase-schema/composables/useSchemaApi')
   // @ts-ignore
@@ -394,7 +399,7 @@ declare global {
   export type { ProjectFile, FileSelectEvent, FileRemoveEvent, ApiClient } from './src/shared/types/index'
   import('./src/shared/types/index')
   // @ts-ignore
-  export type { ValidationErrorType, ValidationErrorCode, ValidationError, ValidationResult, ValidationContext, WikibaseSchemaMapping, TransformationFunction, TransformationParameter, ColumnInfo } from './src/shared/types/wikibase-schema'
+  export type { ValidationErrorType, ValidationErrorCode, ValidationError, ValidationResult, ValidationContext, WikibaseSchemaMapping, TransformationFunction, TransformationParameter, StatementSchema, ColumnInfo } from './src/shared/types/wikibase-schema'
   import('./src/shared/types/wikibase-schema')
 }
 
@@ -656,6 +661,8 @@ declare module 'vue' {
     readonly useProjectListStore: UnwrapRef<typeof import('./src/features/project-management/stores/project-list.store')['useProjectListStore']>
     readonly useProjectStore: UnwrapRef<typeof import('./src/features/project-management/stores/project.store')['useProjectStore']>
     readonly usePropertySelection: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/usePropertySelection')['usePropertySelection']>
+    readonly usePropertyValueDisplay: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/usePropertyValueDisplay')['usePropertyValueDisplay']>
+    readonly usePropertyValueEditor: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/usePropertyValueEditor')['usePropertyValueEditor']>
     readonly useRafFn: UnwrapRef<typeof import('@vueuse/core')['useRafFn']>
     readonly useRefHistory: UnwrapRef<typeof import('@vueuse/core')['useRefHistory']>
     readonly useReferenceValueMapping: UnwrapRef<typeof import('./src/features/wikibase-schema/composables/useReferenceValueMapping')['useReferenceValueMapping']>

frontend/components.d.ts

@@ -9,6 +9,7 @@ export {}
 declare module 'vue' {
   export interface GlobalComponents {
     AutoComplete: typeof import('primevue/autocomplete')['default']
+    BasePropertyValueEditor: typeof import('./src/features/wikibase-schema/components/BasePropertyValueEditor.vue')['default']
     Button: typeof import('primevue/button')['default']
     Card: typeof import('primevue/card')['default']
     Chip: typeof import('primevue/chip')['default']
@@ -31,8 +32,11 @@ declare module 'vue' {
     ProgressSpinner: typeof import('primevue/progressspinner')['default']
     ProjectView: typeof import('./src/features/project-management/pages/ProjectView.vue')['default']
     PropertySelector: typeof import('./src/features/wikibase-schema/components/PropertySelector.vue')['default']
+    PropertyValueItem: typeof import('./src/features/wikibase-schema/components/PropertyValueItem.vue')['default']
+    PropertyValueList: typeof import('./src/features/wikibase-schema/components/PropertyValueList.vue')['default']
     PropertyValueMappingEditor: typeof import('./src/features/wikibase-schema/components/PropertyValueMappingEditor.vue')['default']
     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']
     RouterLink: typeof import('vue-router')['RouterLink']
     RouterView: typeof import('vue-router')['RouterView']

frontend/src/features/wikibase-schema/components/BasePropertyValueEditor.vue

@@ -0,0 +1,101 @@
+<script setup lang="ts" generic="T">
+// Props
+interface Props<T> {
+  items: T[]
+  title: string
+  singularLabel: string
+  pluralLabel: string
+  addButtonLabel: string
+  addButtonTestId?: string
+  emptyMessage: string
+  headerIcon?: string
+  emptyIcon?: string
+  getItemKey?: (item: T, index: number) => string
+  showEditor?: boolean
+  currentItem?: T
+  isEditing?: boolean
+}
+
+withDefaults(defineProps<Props<T>>(), {
+  addButtonTestId: 'add-item-button',
+  headerIcon: 'pi pi-list',
+  emptyIcon: 'pi pi-inbox',
+  getItemKey: (_, index) => `item-${index}`,
+  showEditor: false,
+  currentItem: undefined,
+  isEditing: false,
+})
+
+// Emits
+interface Emits<T> {
+  add: []
+  edit: [index: number]
+  remove: [index: number]
+  save: [item: T]
+  cancel: []
+}
+
+const emit = defineEmits<Emits<T>>()
+
+// Event handlers
+const handleAdd = () => {
+  emit('add')
+}
+
+const handleEdit = (index: number) => {
+  emit('edit', index)
+}
+
+const handleRemove = (index: number) => {
+  emit('remove', index)
+}
+
+const handleSave = (item: T) => {
+  emit('save', item)
+}
+
+const handleCancel = () => {
+  emit('cancel')
+}
+</script>
+
+<template>
+  <div class="space-y-4">
+    <!-- Header with Add Button -->
+    <PropertyValueList
+      :items="items"
+      :title="title"
+      :singular-label="singularLabel"
+      :plural-label="pluralLabel"
+      :add-button-label="addButtonLabel"
+      :add-button-test-id="addButtonTestId"
+      :empty-message="emptyMessage"
+      :header-icon="headerIcon"
+      :empty-icon="emptyIcon"
+      :get-item-key="getItemKey"
+      @add="handleAdd"
+      @edit="handleEdit"
+      @remove="handleRemove"
+    >
+      <template #item="{ item, index, onEdit, onRemove }">
+        <slot
+          name="item"
+          :item="item"
+          :index="index"
+          :on-edit="onEdit"
+          :on-remove="onRemove"
+        />
+      </template>
+    </PropertyValueList>
+
+    <!-- Single Item Editor -->
+    <slot
+      v-if="showEditor"
+      name="editor"
+      :current-item="currentItem"
+      :is-editing="isEditing"
+      :on-save="handleSave"
+      :on-cancel="handleCancel"
+    />
+  </div>
+</template>