Skip to content

Commit

Permalink
refact(KtTable): move all other js and vue files in kotti-table to ty…
Browse files Browse the repository at this point in the history 
…pescript

Co-Authored-By: Florian Wendelborn <[email protected]>
  • Loading branch information
@Isokaeder @FlorianWendelborn
Isokaeder and FlorianWendelborn committed Jun 4, 2024
1 parent 7c3632e commit c4a2fca
Show file tree
Hide file tree
Showing 26 changed files with 669 additions and 486 deletions.
69 changes: 54 additions & 15 deletions packages/kotti-ui/source/kotti-table/KtTable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<slot />
<!-- NOTE: As the column prop should be the source of truth in case of conflict -->
<!-- the prop columns need to be added after the columns from the slot. -->
<!-- @vue-expect-error -->
<KtTableColumn
v-for="(column, index) in formattedColumns"
:key="`${column.prop}_${index}`"
Expand All @@ -20,8 +21,9 @@
</div>
</template>

<script>
<script lang="ts">
/* eslint-disable @typescript-eslint/explicit-module-boundary-types */
/* eslint-disable @typescript-eslint/no-explicit-any */
import isEqual from 'lodash/isEqual'
import pick from 'lodash/pick'
Expand All @@ -37,6 +39,7 @@ import {
import { KtTableColumn } from './KtTableColumn'
import { TableStore } from './logic/store'
import { TableLayout } from './table-layout'
import type { CreateElement } from 'vue'
let tableIdSeed = 1
Expand Down Expand Up @@ -66,7 +69,9 @@ export default {
provide() {
return {
[KT_TABLE]: this,
// @ts-expect-error store will exist at runtime
[KT_STORE]: this.store,
// @ts-expect-error layout will exist at runtime
[KT_LAYOUT]: this.layout,
}
},
Expand Down Expand Up @@ -138,16 +143,21 @@ export default {
data() {
let localStore
const initialState = pick(this, INITIAL_TABLE_STORE_PROPS)
// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
if (this[KT_TABLE_STATE_PROVIDER]) {
if (this.id) {
localStore = new TableStore(this, initialState)
// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
this[KT_TABLE_STATE_PROVIDER].addStore(this.id, localStore)
// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
this[KT_TABLE_STATE_PROVIDER].selectedTableId(this.id)
} else {
// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
localStore = this[KT_TABLE_STATE_PROVIDER].store
localStore.setTable(this)
localStore.setInitialState(initialState)
}
// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
this[KT_TABLE_STATE_PROVIDER].addTable(this)
} else {
localStore = new TableStore(this, initialState)
Expand All @@ -161,13 +171,16 @@ export default {
},
computed: {
store() {
// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
return this[KT_TABLE_STATE_PROVIDER]
? this[KT_TABLE_STATE_PROVIDER].store
: this.localStore
? // @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
this[KT_TABLE_STATE_PROVIDER].store
: // @ts-expect-error localStore will exist at runtime
this.localStore
},
formattedColumns() {
formattedColumns(): unknown[] {
return this.columns
? this.columns.map((column) => {
? this.columns.map((column: any) => {
if (column.key) {
// eslint-disable-next-line
console.warn(
Expand All @@ -181,8 +194,10 @@ export default {
: []
},
colSpan() {
// @ts-expect-error store will exist at runtime
let colSpan = this.store.state.columns.length
// @ts-expect-error isExpandable will exist at runtime
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (this.isExpandable) colSpan++
if (this.isSelectable) colSpan++
Expand All @@ -196,34 +211,37 @@ export default {
return Boolean(this.$slots.actions || this.renderActions)
},
_renderExpand() {
return (h, rowData) => {
return (h: CreateElement, rowData: any) => {
if (this.renderExpand) return this.renderExpand(h, rowData)
// @ts-expect-error $slots will exist at runtime
return this.$slots.expand(rowData)
}
},
_renderActions() {
return (h, rowData) => {
return (h: CreateElement, rowData: any) => {
if (this.renderActions) return this.renderActions(h, rowData)
// @ts-expect-error $slots will exist at runtime
return this.$slots.actions(rowData)
}
},
_renderLoading() {
return (h) => {
return (h: CreateElement) => {
if (this.renderLoading) return this.renderLoading(h)
return this.$slots.loading || h('div', { class: 'loading lg' })
}
},
_renderEmpty() {
return (h) => {
return (h: CreateElement) => {
if (this.renderEmpty) return this.renderEmpty(h)
return (
this.$slots.empty ||
this.emptyText ||
// FIXME: $t is not supposed to be used in kotti, probably a hack
// @ts-expect-error $t will exist at runtime (?)
this.$t?.('table.emptyText') ||
'No Data'
)
Expand All @@ -232,18 +250,21 @@ export default {
},
watch: {
id(newId, id) {
// @ts-expect-error `this[KT_TABLE_STATE_PROVIDER]` seems to emulate a provide/inject pattern of sorts
this[KT_TABLE_STATE_PROVIDER].updateStoreId(id, newId)
},
rows: {
immediate: true,
handler(value) {
// @ts-expect-error localStore will exist at runtime
this.localStore.commit('setRows', value)
},
},
selected: {
immediate: true,
handler(value, oldValue) {
if (!isEqual(value, oldValue)) {
// @ts-expect-error localStore will exist at runtime
this.localStore.commit('setSelected', value)
}
},
Expand All @@ -252,6 +273,7 @@ export default {
immediate: true,
handler(value, oldValue) {
if (value && !isEqual(value, oldValue)) {
// @ts-expect-error store will exist at runtime
this.store.commit('setColumns', value)
}
},
Expand All @@ -260,6 +282,7 @@ export default {
immediate: true,
handler(value, oldValue) {
if (value && !isEqual(value, oldValue)) {
// @ts-expect-error store will exist at runtime
this.store.commit('setSortedColumns', value)
}
},
Expand All @@ -268,6 +291,7 @@ export default {
immediate: true,
handler(value, oldValue) {
if (value && !isEqual(value, oldValue)) {
// @ts-expect-error store will exist at runtime
this.store.commit('setHiddenColumns', value)
}
},
Expand All @@ -276,6 +300,7 @@ export default {
immediate: true,
handler(value, oldValue) {
if (value && !isEqual(value, oldValue)) {
// @ts-expect-error store will exist at runtime
this.store.commit('setFilteredColumns', value)
}
},
Expand All @@ -284,52 +309,66 @@ export default {
immediate: true,
handler(value, oldValue) {
if (value && !isEqual(value, oldValue)) {
// @ts-expect-error store will exist at runtime
this.store.commit('setOrderedColumns', value)
}
},
},
disableRow: {
handler() {
// @ts-expect-error store will exist at runtime
this.store.commit('updateDisabledRows')
},
},
},
beforeCreate() {
// @ts-expect-error tableId will exist at runtime
this.tableId = `kt-table_${String(tableIdSeed)}`
tableIdSeed += 1
},
mounted() {
// @ts-expect-error $ready will exist at runtime
this.$ready = true
// @ts-expect-error store will exist at runtime
this.store.commit('updateColumns', { emitChange: false })
// eslint-disable-next-line vue/no-deprecated-events-api
this.$on('selectionChange', (selection) => {
this.$on('selectionChange', (selection: any) => {
// @ts-expect-error value will exist at runtime
if (this.value) {
this.$emit(
'input',
selection.map((row) => this.store.get('getIndexByRow', row)),
// @ts-expect-error store will exist at runtime
selection.map((row: any) => this.store.get('getIndexByRow', row)),
)
}
})
},
methods: {
isSelected(index) {
isSelected(index: unknown): unknown {
// @ts-expect-error store will exist at runtime
return this.store.isSelected(
// @ts-expect-error store will exist at runtime
this.store.get('getRowByVisibleIndex', index),
)
},
toggleExpand(index) {
toggleExpand(index: unknown): void {
// @ts-expect-error store will exist at runtime
this.store.commit(
'expandRow',
// @ts-expect-error store will exist at runtime
this.store.get('getRowByVisibleIndex', index),
)
},
toggleSelect(index) {
toggleSelect(index: unknown): void {
// @ts-expect-error store will exist at runtime
this.store.commit(
'selectRow',
// @ts-expect-error store will exist at runtime
this.store.get('getRowByVisibleIndex', index),
)
},
toggleSelectAll() {
toggleSelectAll(): void {
// @ts-expect-error store will exist at runtime
this.store.commit('toggleAllSelection')
},
},
Expand Down
3 changes: 0 additions & 3 deletions packages/kotti-ui/source/kotti-table/KtTableColumn.d.ts
View file

This file was deleted.

38 changes: 23 additions & 15 deletions ...ti-ui/source/kotti-table/KtTableColumn.js → ...ti-ui/source/kotti-table/KtTableColumn.ts
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
/* eslint-disable @typescript-eslint/no-explicit-any */
import pick from 'lodash/pick'

import {
Expand All @@ -9,19 +10,24 @@ import {
DEFAULT_RENDER_HEADER,
} from './constants'
import { KottiTable } from './types'
import type { CreateElement } from 'vue'

let columnIdSeed = 1

function updateColumnsfor(prop) {
return function updateColumnProp(newVal) {
function updateColumnsfor(prop: any) {
return function updateColumnProp(newVal: unknown) {
// @ts-expect-error columnConfig will exist at runtime
if (this.columnConfig) {
// @ts-expect-error columnConfig will exist at runtime
this.columnConfig[prop] = newVal
// @ts-expect-error columnConfig will exist at runtime
this[KT_STORE].commit('updateColumns')
}
}
}

export const KtTableColumn = {
// eslint-disable-next-line @typescript-eslint/naming-convention
export const KtTableColumn: any = {
name: 'KtTableColumn',
inheritAttrs: false,
props: {
Expand Down Expand Up @@ -49,7 +55,8 @@ export const KtTableColumn = {
type: [String, Number],
},
sortOrders: {
default: () => Object.values(KottiTable.Column.SortOrders),
default: (): KottiTable.Column.SortOrders[] =>
Object.values(KottiTable.Column.SortOrders),
type: Array,
},
// whether this column is sortable, string means sortOrder is remote
Expand Down Expand Up @@ -84,35 +91,36 @@ export const KtTableColumn = {
align: updateColumnsfor('align'),
default: updateColumnsfor('default'),
},
beforeCreate() {
beforeCreate(): void {
this.columnConfig = {}
},
created() {
created(): void {
// eslint-disable-next-line @typescript-eslint/no-use-before-define
this.columnConfig = createColumn(this)
},
mounted() {
mounted(): void {
const columnIndex = this[KT_TABLE].$children.indexOf(this)
this[KT_STORE].commit('insertColumn', {
column: this.columnConfig,
...(columnIndex !== -1 ? { index: columnIndex } : {}),
fromTableColumn: true,
})
},
destroyed() {
destroyed(): void {
if (!this.$parent) return
this.columnConfig &&
this[KT_STORE].commit('removeColumn', this.columnConfig)
},
render: () => null,
render: (): null => null,
inject: { KT_TABLE, KT_STORE, KT_LAYOUT },
}

function createColumn(column = {}) {
function createColumn(column: any = {}) {
const _self = column

let columnId = column.id
if (!columnId) {
// eslint-disable-next-line @typescript-eslint/restrict-template-expressions
columnId = `${_self[KT_TABLE].tableId}_column_${columnIdSeed}`
columnIdSeed++
}
Expand All @@ -122,7 +130,7 @@ function createColumn(column = {}) {
column.sortOrder = column.sortOrder || KottiTable.Column.SortOrders.NONE
column.sortOrders =
column.sortOrders || Object.values(KottiTable.Column.SortOrders)
column.formatter = column.formatter || ((value) => value)
column.formatter = column.formatter || ((value: any) => value)

column.id = columnId
column.type = COLUMN_TYPE
Expand All @@ -132,8 +140,8 @@ function createColumn(column = {}) {
let renderCell = column.renderCell
let renderHeader = column.renderHeader

column.renderCell = function render(h, data) {
if (_self.$scopedSlots && _self.$scopedSlots.default) {
column.renderCell = function render(h: CreateElement, data: any) {
if (_self.$scopedSlots?.default) {
renderCell = () => _self.$scopedSlots.default(data)
}

Expand All @@ -143,8 +151,8 @@ function createColumn(column = {}) {
return renderCell(h, data)
}

column.renderHeader = function render(h, data) {
if (_self.$scopedSlots && _self.$scopedSlots.header) {
column.renderHeader = function render(h: CreateElement, data: any) {
if (_self.$scopedSlots?.header) {
renderHeader = () => _self.$scopedSlots.header(data)
}

Expand Down
4 changes: 0 additions & 4 deletions packages/kotti-ui/source/kotti-table/KtTableConsumer.d.ts
View file

This file was deleted.

Loading

0 comments on commit c4a2fca

Please sign in to comment.