Skip to content

Commit d55a127

Browse files
DaxServerDaxServer
authored
feat(wikibase-schema-editor): create statement editor (#87)
1 parent 7023574 commit d55a127

9 files changed

Lines changed: 899 additions & 551 deletions

‎frontend/.eslintrc-auto-import.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -338,6 +338,7 @@
338338
"useSorted": true,
339339
"useSpeechRecognition": true,
340340
"useSpeechSynthesis": true,
341+
"useStatementConfig": true,
341342
"useStepper": true,
342343
"useStorage": true,
343344
"useStorageAsync": true,

‎frontend/auto-imports.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -279,6 +279,7 @@ declare global {
279279
const useSorted: typeof import('@vueuse/core')['useSorted']
280280
const useSpeechRecognition: typeof import('@vueuse/core')['useSpeechRecognition']
281281
const useSpeechSynthesis: typeof import('@vueuse/core')['useSpeechSynthesis']
282+
const useStatementConfig: typeof import('./src/composables/useStatementConfig')['useStatementConfig']
282283
const useStepper: typeof import('@vueuse/core')['useStepper']
283284
const useStorage: typeof import('@vueuse/core')['useStorage']
284285
const useStorageAsync: typeof import('@vueuse/core')['useStorageAsync']
@@ -647,6 +648,7 @@ declare module 'vue' {
647648
readonly useSorted: UnwrapRef<typeof import('@vueuse/core')['useSorted']>
648649
readonly useSpeechRecognition: UnwrapRef<typeof import('@vueuse/core')['useSpeechRecognition']>
649650
readonly useSpeechSynthesis: UnwrapRef<typeof import('@vueuse/core')['useSpeechSynthesis']>
651+
readonly useStatementConfig: UnwrapRef<typeof import('./src/composables/useStatementConfig')['useStatementConfig']>
650652
readonly useStepper: UnwrapRef<typeof import('@vueuse/core')['useStepper']>
651653
readonly useStorage: UnwrapRef<typeof import('@vueuse/core')['useStorage']>
652654
readonly useStorageAsync: UnwrapRef<typeof import('@vueuse/core')['useStorageAsync']>

‎frontend/components.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ declare module 'vue' {
1919
DataTabPanel: typeof import('./src/components/DataTabPanel.vue')['default']
2020
DefaultLayout: typeof import('./src/layouts/DefaultLayout.vue')['default']
2121
Header: typeof import('./src/components/Header.vue')['default']
22+
InputText: typeof import('primevue/inputtext')['default']
2223
ItemEditor: typeof import('./src/components/ItemEditor.vue')['default']
2324
LanguageDropZone: typeof import('./src/components/LanguageDropZone.vue')['default']
2425
MainContent: typeof import('./src/components/MainContent.vue')['default']
@@ -32,16 +33,21 @@ declare module 'vue' {
3233
SchemaTabPanel: typeof import('./src/components/SchemaTabPanel.vue')['default']
3334
Select: typeof import('primevue/select')['default']
3435
Sidebar: typeof import('./src/components/Sidebar.vue')['default']
36+
StatementConfigEditor: typeof import('./src/components/StatementConfigEditor.vue')['default']
3537
StatementsEditor: typeof import('./src/components/StatementsEditor.vue')['default']
3638
Tab: typeof import('primevue/tab')['default']
3739
TabList: typeof import('primevue/tablist')['default']
3840
TabPanel: typeof import('primevue/tabpanel')['default']
3941
TabPanels: typeof import('primevue/tabpanels')['default']
4042
Tabs: typeof import('primevue/tabs')['default']
43+
Tag: typeof import('primevue/tag')['default']
4144
TermsEditor: typeof import('./src/components/TermsEditor.vue')['default']
4245
Toast: typeof import('primevue/toast')['default']
4346
ToggleSwitch: typeof import('primevue/toggleswitch')['default']
4447
ValidationErrorDisplay: typeof import('./src/components/ValidationErrorDisplay.vue')['default']
4548
WikibaseSchemaEditor: typeof import('./src/components/WikibaseSchemaEditor.vue')['default']
4649
}
50+
export interface GlobalDirectives {
51+
Tooltip: typeof import('primevue/tooltip')['default']
52+
}
4753
}

‎frontend/src/components/StatementConfigEditor.vue‎

Lines changed: 157 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,157 @@
1+
<script setup lang="ts">
2+
// Use statement configuration composable
3+
const {
4+
currentStatement,
5+
valueTypes,
6+
dataTypes,
7+
rankOptions,
8+
canSaveStatement,
9+
sourceLabel,
10+
sourcePlaceholder,
11+
sourceValue,
12+
resetStatement,
13+
} = useStatementConfig()
14+
</script>
15+
16+
<template>
17+
<div class="statement-config-editor space-y-6">
18+
<!-- Property Configuration Section -->
19+
<div class="border border-surface-200 rounded-lg p-4">
20+
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
21+
<i class="pi pi-cog" />
22+
Property Configuration
23+
</h3>
24+
25+
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
26+
<!-- Property ID -->
27+
<div class="space-y-2">
28+
<label class="text-sm font-medium text-surface-700">Property ID</label>
29+
<InputText
30+
v-model="currentStatement.property.id"
31+
placeholder="P123"
32+
class="w-full"
33+
/>
34+
</div>
35+
36+
<!-- Property Label -->
37+
<div class="space-y-2">
38+
<label class="text-sm font-medium text-surface-700">Property Label</label>
39+
<InputText
40+
v-model="currentStatement.property.label"
41+
placeholder="Property name"
42+
class="w-full"
43+
/>
44+
</div>
45+
46+
<!-- Property Data Type -->
47+
<div class="space-y-2">
48+
<label class="text-sm font-medium text-surface-700">Property Data Type</label>
49+
<Select
50+
v-model="currentStatement.property.dataType"
51+
:options="dataTypes"
52+
option-label="label"
53+
option-value="value"
54+
placeholder="Select data type"
55+
class="w-full"
56+
/>
57+
</div>
58+
</div>
59+
</div>
60+
61+
<!-- Value Configuration Section -->
62+
<div class="border border-surface-200 rounded-lg p-4">
63+
<h3 class="text-lg font-semibold mb-3 flex items-center gap-2">
64+
<i class="pi pi-database" />
65+
Value Configuration
66+
</h3>
67+
68+
<div class="grid grid-cols-1 md:grid-cols-4 gap-4">
69+
<!-- Value Type -->
70+
<div class="space-y-2">
71+
<label class="text-sm font-medium text-surface-700">Value Type</label>
72+
<Select
73+
v-model="currentStatement.value.type"
74+
:options="valueTypes"
75+
option-label="label"
76+
option-value="value"
77+
placeholder="Select type"
78+
class="w-full"
79+
/>
80+
</div>
81+
82+
<!-- Value Source -->
83+
<div class="space-y-2">
84+
<label class="text-sm font-medium text-surface-700">
85+
{{ sourceLabel }}
86+
</label>
87+
<InputText
88+
v-model="sourceValue"
89+
:placeholder="sourcePlaceholder"
90+
class="w-full"
91+
/>
92+
</div>
93+
94+
<!-- Value Data Type -->
95+
<div class="space-y-2">
96+
<label class="text-sm font-medium text-surface-700">Value Data Type</label>
97+
<Select
98+
v-model="currentStatement.value.dataType"
99+
:options="dataTypes"
100+
option-label="label"
101+
option-value="value"
102+
placeholder="Select data type"
103+
class="w-full"
104+
/>
105+
</div>
106+
107+
<!-- Statement Rank -->
108+
<div class="space-y-2">
109+
<label class="text-sm font-medium text-surface-700">Statement Rank</label>
110+
<Select
111+
v-model="currentStatement.rank"
112+
:options="rankOptions"
113+
option-label="label"
114+
option-value="value"
115+
placeholder="Select rank"
116+
class="w-full"
117+
/>
118+
</div>
119+
</div>
120+
</div>
121+
122+
<!-- Auto-save Status -->
123+
<div class="border border-surface-200 rounded-lg p-4">
124+
<div class="flex items-center justify-between">
125+
<div class="flex items-center gap-2">
126+
<i class="pi pi-info-circle text-primary-500" />
127+
<span class="font-medium">Statement Configuration</span>
128+
</div>
129+
130+
<div class="flex items-center gap-2">
131+
<div
132+
v-if="canSaveStatement"
133+
class="flex items-center gap-2 text-green-600"
134+
>
135+
<i class="pi pi-check-circle" />
136+
<span class="text-sm">Auto-saved to schema</span>
137+
</div>
138+
<div
139+
v-else
140+
class="flex items-center gap-2 text-gray-500"
141+
>
142+
<i class="pi pi-clock" />
143+
<span class="text-sm">Complete fields to auto-save</span>
144+
</div>
145+
<Button
146+
label="Reset"
147+
icon="pi pi-refresh"
148+
severity="secondary"
149+
outlined
150+
size="small"
151+
@click="resetStatement"
152+
/>
153+
</div>
154+
</div>
155+
</div>
156+
</div>
157+
</template>

0 commit comments

Comments
 (0)