Skip to content

Commit a94d637

Browse files
KocKoc
committed
feat: add relation lookup column type (more refactoring)
Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>
1 parent 3605fd7 commit a94d637

4 files changed

Lines changed: 66 additions & 37 deletions

File tree

‎src/modules/main/partials/ColumnFormComponent.vue‎

Lines changed: 17 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@ import DatetimeTimeForm from '../../../shared/components/ncTable/partials/rowTyp
2323
import TextRichForm from '../../../shared/components/ncTable/partials/rowTypePartials/TextRichForm.vue'
2424
import UsergroupForm from '../../../shared/components/ncTable/partials/rowTypePartials/UsergroupForm.vue'
2525
import RelationForm from '../../../shared/components/ncTable/partials/rowTypePartials/RelationForm.vue'
26+
import RelationLookupForm from '../../../shared/components/ncTable/partials/rowTypePartials/RelationLookupForm.vue'
2627
2728
export default {
2829
name: 'ColumnFormComponent',
@@ -42,6 +43,7 @@ export default {
4243
DatetimeTimeForm,
4344
UsergroupForm,
4445
RelationForm,
46+
RelationLookupForm,
4547
},
4648
props: {
4749
column: {
@@ -55,7 +57,7 @@ export default {
5557
},
5658
data() {
5759
return {
58-
value_data: this.value,
60+
value_data: this.getValueForColumn(),
5961
}
6062
},
6163
computed: {
@@ -71,15 +73,13 @@ export default {
7173
}
7274
},
7375
},
74-
watch: {
75-
value_data() {
76-
this.$emit('update:value', this.value_data)
77-
},
78-
value() {
79-
this.value_data = this.value
80-
},
81-
},
8276
methods: {
77+
getValueForColumn() {
78+
if (this.column.type === 'relation_lookup' && this.column.customSettings?.relationColumnId) {
79+
return this.value?.[this.column.customSettings.relationColumnId] ?? null
80+
}
81+
return this.value
82+
},
8383
snakeToCamel(str) {
8484
str = str.toLowerCase().replace(/([-_][a-z])/g, group =>
8585
group
@@ -90,6 +90,14 @@ export default {
9090
return str.charAt(0).toUpperCase() + str.slice(1)
9191
},
9292
},
93+
watch: {
94+
value_data() {
95+
this.$emit('update:value', this.value_data)
96+
},
97+
value() {
98+
this.value_data = this.getValueForColumn()
99+
},
100+
},
93101
}
94102
</script>
95103

‎src/modules/modals/CreateRow.vue‎

Lines changed: 8 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -10,19 +10,14 @@
1010
@closing="actionCancel">
1111
<div class="modal__content" @keydown="onKeydown">
1212
<div v-for="column in nonMetaColumns" :key="column.id" :data-cy="column.title">
13-
<!-- fixme: move logic to get row for component -->
14-
<RowFormWrapper v-if="column.type === 'relation_lookup'" :title="column.title" :mandatory="column.mandatory" :description="column.description" :readonly="column.readonly">
15-
<TableCellRelationLookup :column="column"
16-
:value="row[column.customSettings.relationColumnId]" />
17-
</RowFormWrapper>
18-
<ColumnFormComponent v-else
13+
<ColumnFormComponent
1914
:column="column"
20-
:value.sync="row[column.id]" />
21-
<NcNoteCard v-if="isMandatory(column) && !isValueValidForColumn(row[column.id], column)"
15+
:value.sync="row[getValueColumnId(column)]" />
16+
<NcNoteCard v-if="isMandatory(column) && !isValueValidForColumn(row[getValueColumnId(column)], column)"
2217
type="error">
2318
{{ t('tables', '"{columnTitle}" should not be empty', { columnTitle: column.title }) }}
2419
</NcNoteCard>
25-
<NcNoteCard v-if="row[column.id] && column.type === 'text-link' && !isValidUrlProtocol(row[column.id])"
20+
<NcNoteCard v-if="row[getValueColumnId(column)] && column.type === 'text-link' && !isValidUrlProtocol(row[getValueColumnId(column)])"
2621
type="error">
2722
{{ t('tables', 'Invalid protocol. Allowed: {allowed}', {allowed: allowedProtocols.join(', ')}) }}
2823
</NcNoteCard>
@@ -53,8 +48,6 @@ import rowHelper from '../../shared/components/ncTable/mixins/rowHelper.js'
5348
import { useDataStore } from '../../store/data.js'
5449
import { mapActions } from 'pinia'
5550
import { ALLOWED_PROTOCOLS } from '../../shared/constants.ts'
56-
import TableCellRelationLookup from '../../shared/components/ncTable/partials/TableCellRelationLookup.vue'
57-
import RowFormWrapper from '../../shared/components/ncTable/partials/rowTypePartials/RowFormWrapper.vue'
5851
5952
export default {
6053
name: 'CreateRow',
@@ -64,8 +57,6 @@ export default {
6457
NcCheckboxRadioSwitch,
6558
NcNoteCard,
6659
NcButton,
67-
TableCellRelationLookup,
68-
RowFormWrapper,
6960
},
7061
mixins: [rowHelper],
7162
props: {
@@ -110,7 +101,7 @@ export default {
110101
return this.checkMandatoryFields(this.row)
111102
},
112103
hasInvalidUrlProtocol() {
113-
return this.nonMetaColumns.some(col => col.type === 'text-link' && !this.isValidUrlProtocol(this.row[col.id]))
104+
return this.nonMetaColumns.some(col => col.type === 'text-link' && !this.isValidUrlProtocol(this.row[this.getValueColumnId(col)]))
114105
},
115106
dialogTitle() {
116107
return this.isFormMode ? t('tables', 'Fill form') : t('tables', 'Create row')
@@ -141,6 +132,9 @@ export default {
141132
methods: {
142133
...mapActions(useDataStore, ['insertNewRow', 'insertPublicRow']),
143134
t,
135+
getValueColumnId(column) {
136+
return column.getValueColumnId ? column.getValueColumnId() : column.id
137+
},
144138
actionCancel() {
145139
this.reset()
146140
this.addNewAfterSave = false

‎src/modules/modals/EditRow.vue‎

Lines changed: 9 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -36,19 +36,15 @@
3636

3737
<div v-if="activeTabId === 'edit'" class="row">
3838
<div v-for="column in nonMetaColumns" :key="column.id">
39-
<RowFormWrapper v-if="column.type === 'relation_lookup'" :title="column.title" :mandatory="column.mandatory" :description="column.description" :readonly="column.readonly">
40-
<TableCellRelationLookup :column="column"
41-
:row-id="row.id"
42-
:value="localRow[column.customSettings.relationColumnId]" />
43-
</RowFormWrapper>
44-
<ColumnFormComponent v-else-if="column.type !== 'relation_lookup' && column.type !== 'text-template'"
39+
<ColumnFormComponent
40+
v-if="column.type !== 'text-template'"
4541
:column="column"
46-
:value.sync="localRow[column.id]" />
47-
<NcNoteCard v-if="isMandatory(column) && !isValueValidForColumn(localRow[column.id], column)"
42+
:value.sync="localRow[getValueColumnId(column)]" />
43+
<NcNoteCard v-if="isMandatory(column) && !isValueValidForColumn(localRow[getValueColumnId(column)], column)"
4844
type="error">
4945
{{ t('tables', '"{columnTitle}" should not be empty', { columnTitle: column.title }) }}
5046
</NcNoteCard>
51-
<NcNoteCard v-if="localRow[column.id] && column.type === 'text-link' && !isValidUrlProtocol(localRow[column.id])"
47+
<NcNoteCard v-if="localRow[getValueColumnId(column)] && column.type === 'text-link' && !isValidUrlProtocol(localRow[getValueColumnId(column)])"
5248
type="error">
5349
{{ t('tables', 'Invalid protocol. Allowed: {allowed}', {allowed: allowedProtocols.join(', ')}) }}
5450
</NcNoteCard>
@@ -107,8 +103,6 @@ import HomeIcon from 'vue-material-design-icons/Home.vue'
107103
import HomeOutlineIcon from 'vue-material-design-icons/HomeOutline.vue'
108104
import ActivityList from '../../shared/components/ActivityList.vue'
109105
import activityMixin from '../../shared/mixins/activityMixin.js'
110-
import TableCellRelationLookup from '../../shared/components/ncTable/partials/TableCellRelationLookup.vue'
111-
import RowFormWrapper from '../../shared/components/ncTable/partials/rowTypePartials/RowFormWrapper.vue'
112106
113107
export default {
114108
name: 'EditRow',
@@ -122,8 +116,6 @@ export default {
122116
ActivityOutlineIcon,
123117
HomeIcon,
124118
HomeOutlineIcon,
125-
TableCellRelationLookup,
126-
RowFormWrapper,
127119
},
128120
mixins: [permissionsMixin, rowHelper, activityMixin],
129121
props: {
@@ -168,7 +160,7 @@ export default {
168160
return this.checkMandatoryFields(this.localRow)
169161
},
170162
hasInvalidUrlProtocol() {
171-
return this.nonMetaColumns.some(col => col.type === 'text-link' && !this.isValidUrlProtocol(this.localRow[col.id]))
163+
return this.nonMetaColumns.some(col => col.type === 'text-link' && !this.isValidUrlProtocol(this.localRow[this.getValueColumnId(col)]))
172164
},
173165
},
174166
watch: {
@@ -193,6 +185,9 @@ export default {
193185
...mapActions(useDataStore, ['updateRow', 'removeRow', 'updatePublicRow', 'removePublicRow']),
194186
...mapActions(useTablesStore, ['setActiveRowId']),
195187
t,
188+
getValueColumnId(column) {
189+
return column.getValueColumnId ? column.getValueColumnId() : column.id
190+
},
196191
loadValues() {
197192
if (this.row) {
198193
const tmp = {}

‎src/shared/components/ncTable/partials/rowTypePartials/RelationLookupForm.vue‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
<template>
6+
<RowFormWrapper :title="column.title" :mandatory="column.mandatory" :description="column.description" :readonly="column.readonly">
7+
<TableCellRelationLookup :column="column" :value="value" />
8+
</RowFormWrapper>
9+
</template>
10+
11+
<script>
12+
import RowFormWrapper from './RowFormWrapper.vue'
13+
import TableCellRelationLookup from '../TableCellRelationLookup.vue'
14+
15+
export default {
16+
name: 'RelationLookupForm',
17+
components: {
18+
RowFormWrapper,
19+
TableCellRelationLookup,
20+
},
21+
props: {
22+
column: {
23+
type: Object,
24+
required: true,
25+
},
26+
value: {
27+
type: [String, Number, Array, Object, Boolean, null],
28+
default: null,
29+
},
30+
},
31+
}
32+
</script>

0 commit comments

Comments
 (0)