Skip to content

Commit f8b63ab

Browse files
KocKoc
committed
Refactor: Extract table cell component for better reusability
Signed-off-by: Kostiantyn Miakshyn <molodchick@gmail.com>
1 parent 7901ff9 commit f8b63ab

2 files changed

Lines changed: 86 additions & 48 deletions

File tree

‎src/shared/components/ncTable/partials/TableCell.vue‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!--
2+
- SPDX-FileCopyrightText: 2026 Nextcloud GmbH and Nextcloud contributors
3+
- SPDX-License-Identifier: AGPL-3.0-or-later
4+
-->
5+
<template>
6+
<component :is="cellComponent"
7+
:column="column"
8+
:row-id="rowId"
9+
:value="value"
10+
:element-id="elementId"
11+
:is-view="isView"
12+
:can-edit="canEdit" />
13+
</template>
14+
15+
<script>
16+
import { ColumnTypes } from './../mixins/columnHandler.js'
17+
18+
import TableCellHtml from './TableCellHtml.vue'
19+
import TableCellProgress from './TableCellProgress.vue'
20+
import TableCellLink from './TableCellLink.vue'
21+
import TableCellNumber from './TableCellNumber.vue'
22+
import TableCellStars from './TableCellStars.vue'
23+
import TableCellYesNo from './TableCellYesNo.vue'
24+
import TableCellDateTime from './TableCellDateTime.vue'
25+
import TableCellTextLine from './TableCellTextLine.vue'
26+
import TableCellSelection from './TableCellSelection.vue'
27+
import TableCellMultiSelection from './TableCellMultiSelection.vue'
28+
import TableCellRelation from './TableCellRelation.vue'
29+
import TableCellTextRich from './TableCellEditor.vue'
30+
import TableCellUsergroup from './TableCellUsergroup.vue'
31+
32+
const COMPONENT_BY_COLUMN_TYPE = {
33+
[ColumnTypes.TextLine]: TableCellTextLine,
34+
[ColumnTypes.TextLink]: TableCellLink,
35+
[ColumnTypes.TextRich]: TableCellTextRich,
36+
[ColumnTypes.Number]: TableCellNumber,
37+
[ColumnTypes.NumberStars]: TableCellStars,
38+
[ColumnTypes.NumberProgress]: TableCellProgress,
39+
[ColumnTypes.Selection]: TableCellSelection,
40+
[ColumnTypes.SelectionMulti]: TableCellMultiSelection,
41+
[ColumnTypes.SelectionCheck]: TableCellYesNo,
42+
[ColumnTypes.Datetime]: TableCellDateTime,
43+
[ColumnTypes.DatetimeDate]: TableCellDateTime,
44+
[ColumnTypes.DatetimeTime]: TableCellDateTime,
45+
[ColumnTypes.Usergroup]: TableCellUsergroup,
46+
[ColumnTypes.Relation]: TableCellRelation,
47+
}
48+
49+
export default {
50+
name: 'TableCell',
51+
props: {
52+
column: {
53+
type: Object,
54+
default: () => {},
55+
},
56+
rowId: {
57+
type: Number,
58+
default: null,
59+
},
60+
value: {
61+
required: true,
62+
},
63+
elementId: {
64+
type: Number,
65+
default: null,
66+
},
67+
isView: {
68+
type: Boolean,
69+
default: true,
70+
},
71+
canEdit: {
72+
type: Boolean,
73+
default: false,
74+
},
75+
},
76+
computed: {
77+
cellComponent() {
78+
return COMPONENT_BY_COLUMN_TYPE[this.column?.type] || TableCellHtml
79+
},
80+
},
81+
}
82+
</script>

‎src/shared/components/ncTable/partials/TableRow.vue‎

Lines changed: 4 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -20,8 +20,7 @@
2020
'frozen-column--last': index === pinnedColumnIndex,
2121
}"
2222
@click="handleCellClick(col)">
23-
<component :is="getTableCell(col)"
24-
:column="col"
23+
<TableCell :column="col"
2524
:row-id="row.id"
2625
:value="getCellValue(col)"
2726
:element-id="elementId"
@@ -68,20 +67,8 @@ import { NcCheckboxRadioSwitch, NcActions, NcActionButton } from '@nextcloud/vue
6867
import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
6968
import Pencil from 'vue-material-design-icons/PencilOutline.vue'
7069
import TrashCanOutline from 'vue-material-design-icons/TrashCanOutline.vue'
71-
import TableCellHtml from './TableCellHtml.vue'
72-
import TableCellProgress from './TableCellProgress.vue'
73-
import TableCellLink from './TableCellLink.vue'
74-
import TableCellNumber from './TableCellNumber.vue'
75-
import TableCellStars from './TableCellStars.vue'
76-
import TableCellYesNo from './TableCellYesNo.vue'
77-
import TableCellDateTime from './TableCellDateTime.vue'
78-
import TableCellTextLine from './TableCellTextLine.vue'
79-
import TableCellSelection from './TableCellSelection.vue'
80-
import TableCellMultiSelection from './TableCellMultiSelection.vue'
81-
import TableCellRelation from './TableCellRelation.vue'
82-
import TableCellTextRich from './TableCellEditor.vue'
83-
import TableCellUsergroup from './TableCellUsergroup.vue'
84-
import { ColumnTypes, getColumnWidthStyle, getFrozenColumnStyle } from './../mixins/columnHandler.js'
70+
import TableCell from './TableCell.vue'
71+
import { getColumnWidthStyle, getFrozenColumnStyle } from './../mixins/columnHandler.js'
8572
import { translate as t } from '@nextcloud/l10n'
8673
import {
8774
TYPE_META_ID, TYPE_META_CREATED_BY, TYPE_META_CREATED_AT, TYPE_META_UPDATED_BY, TYPE_META_UPDATED_AT,
@@ -91,25 +78,13 @@ import activityMixin from '../../../mixins/activityMixin.js'
9178
export default {
9279
name: 'TableRow',
9380
components: {
94-
TableCellYesNo,
95-
TableCellStars,
96-
TableCellNumber,
97-
TableCellLink,
98-
TableCellProgress,
99-
TableCellHtml,
81+
TableCell,
10082
NcActions,
10183
NcActionButton,
10284
ContentCopy,
10385
Pencil,
10486
TrashCanOutline,
10587
NcCheckboxRadioSwitch,
106-
TableCellDateTime,
107-
TableCellTextLine,
108-
TableCellSelection,
109-
TableCellMultiSelection,
110-
TableCellRelation,
111-
TableCellTextRich,
112-
TableCellUsergroup,
11388
},
11489
11590
mixins: [activityMixin],
@@ -180,25 +155,6 @@ export default {
180155
this.$emit('edit-row', this.row.id)
181156
}
182157
},
183-
getTableCell(column) {
184-
switch (column.type) {
185-
case ColumnTypes.TextLine: return 'TableCellTextLine'
186-
case ColumnTypes.TextLink: return 'TableCellLink'
187-
case ColumnTypes.TextRich:return 'TableCellTextRich'
188-
case ColumnTypes.Number: return 'TableCellNumber'
189-
case ColumnTypes.NumberStars: return 'TableCellStars'
190-
case ColumnTypes.NumberProgress: return 'TableCellProgress'
191-
case ColumnTypes.Selection: return 'TableCellSelection'
192-
case ColumnTypes.SelectionMulti: return 'TableCellMultiSelection'
193-
case ColumnTypes.SelectionCheck: return 'TableCellYesNo'
194-
case ColumnTypes.Relation: return 'TableCellRelation'
195-
case ColumnTypes.Datetime: return 'TableCellDateTime'
196-
case ColumnTypes.DatetimeDate: return 'TableCellDateTime'
197-
case ColumnTypes.DatetimeTime: return 'TableCellDateTime'
198-
case ColumnTypes.Usergroup: return 'TableCellUsergroup'
199-
default: return 'TableCellHtml'
200-
}
201-
},
202158
getCell(columnId) {
203159
if (columnId < 0) {
204160
// See metaColumns.js for mapping

0 commit comments

Comments
 (0)