Fix field width bug when editing
This commit is contained in:
Julien Nahum
parent
c97be832d7
commit
117ea8d9c1
|
|
@ -19,12 +19,12 @@
|
|||
</template>
|
||||
|
||||
<div class="px-4">
|
||||
<template v-if="properties.length > 0">
|
||||
<template v-if="form.properties.length > 0">
|
||||
<h4 class="font-bold mb-2">
|
||||
Form Fields
|
||||
</h4>
|
||||
<div class="border border-gray-300 rounded-md">
|
||||
<div v-for="(field,index) in properties" :key="field.id" class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
|
||||
<div v-for="(field,index) in form.properties" :key="field.id" class="p-2 border-gray-300 flex items-center" :class="{'border-t':index!=0}">
|
||||
<p class="flex-grow truncate">
|
||||
{{ field.name }}
|
||||
</p>
|
||||
|
|
@ -77,10 +77,12 @@
|
|||
<open-table
|
||||
ref="table"
|
||||
class="max-h-full"
|
||||
:columns="properties"
|
||||
:data="filteredData"
|
||||
:loading="isLoading"
|
||||
@resize="dataChanged()"
|
||||
@deleted="onDeleteRecord()"
|
||||
@update-columns="onColumnUpdated"
|
||||
/>
|
||||
</scroll-shadow>
|
||||
</div>
|
||||
|
|
@ -148,7 +150,7 @@ export default {
|
|||
|
||||
// Fuze search
|
||||
const fuzeOptions = {
|
||||
keys: this.form.properties.map((field) => field.id)
|
||||
keys: this.properties.map((field) => field.id)
|
||||
}
|
||||
const fuse = new Fuse(filteredData, fuzeOptions)
|
||||
return fuse.search(this.searchForm.search).map((res) => {
|
||||
|
|
@ -176,27 +178,21 @@ export default {
|
|||
}
|
||||
|
||||
// check if form properties already has a created_at column
|
||||
let hasCreatedAt = false
|
||||
this.form.properties.forEach((property) => {
|
||||
this.properties = clonedeep(this.form.properties)
|
||||
if (!this.properties.find((property) => {
|
||||
if (property.id === 'created_at') {
|
||||
hasCreatedAt = true
|
||||
return true
|
||||
}
|
||||
})
|
||||
|
||||
if (!hasCreatedAt) {
|
||||
}) ) {
|
||||
// Add a "created at" column
|
||||
const columns = clonedeep(this.form.properties)
|
||||
columns.push({
|
||||
this.properties.push({
|
||||
name: 'Created at',
|
||||
id: 'created_at',
|
||||
type: 'date',
|
||||
width: 140
|
||||
})
|
||||
this.form.properties = columns
|
||||
}
|
||||
this.formInitDone = true
|
||||
|
||||
this.properties = clonedeep(this.form.properties)
|
||||
this.removed_properties = (this.form.removed_properties) ? clonedeep(this.form.removed_properties) : []
|
||||
|
||||
// Get display columns from local storage
|
||||
|
|
@ -205,7 +201,7 @@ export default {
|
|||
this.displayColumns = JSON.parse(tmpColumns)
|
||||
this.onChangeDisplayColumns()
|
||||
} else {
|
||||
this.form.properties.forEach((field) => {
|
||||
this.properties.forEach((field) => {
|
||||
this.displayColumns[field.id] = true
|
||||
})
|
||||
}
|
||||
|
|
@ -237,10 +233,13 @@ export default {
|
|||
this.$refs.shadows.calcDimensions()
|
||||
}
|
||||
},
|
||||
onColumnUpdated(columns) {
|
||||
this.properties = columns
|
||||
},
|
||||
onChangeDisplayColumns () {
|
||||
if (process.client)
|
||||
if (!process.client) return
|
||||
window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns))
|
||||
this.form.properties = this.properties.concat(this.removed_properties).filter((field) => {
|
||||
this.properties = clonedeep(this.form.properties).concat(this.removed_properties).filter((field) => {
|
||||
return this.displayColumns[field.id] === true
|
||||
})
|
||||
},
|
||||
|
|
|
|||
|
|
@ -8,13 +8,13 @@
|
|||
style="will-change: transform; transform: translate3d(0px, 0px, 0px)"
|
||||
>
|
||||
<tr class="n-table-row overflow-x-hidden">
|
||||
<resizable-th v-for="col, index in form.properties" :id="'table-head-cell-' + col.id" :key="col.id"
|
||||
<resizable-th v-for="col, index in columns" :id="'table-head-cell-' + col.id" :key="col.id"
|
||||
scope="col" :allow-resize="allowResize" :width="(col.cell_width ? col.cell_width + 'px':'auto')"
|
||||
class="n-table-cell p-0 relative"
|
||||
@resize-width="resizeCol(col, $event)"
|
||||
>
|
||||
<p
|
||||
:class="{'border-r': index < form.properties.length - 1 || hasActions}"
|
||||
:class="{'border-r': index < columns.length - 1 || hasActions}"
|
||||
class="bg-gray-50 dark:bg-notion-dark truncate sticky top-0 border-b border-gray-200 dark:border-gray-800 px-4 py-2 text-gray-500 font-semibold tracking-wider uppercase text-xs"
|
||||
>
|
||||
{{ col.name }}
|
||||
|
|
@ -36,16 +36,16 @@
|
|||
class="action-row absolute w-full"
|
||||
style="will-change: transform; transform: translate3d(0px, 32px, 0px)"
|
||||
>
|
||||
<td :colspan="form.properties.length" class="p-1">
|
||||
<td :colspan="columns.length" class="p-1">
|
||||
<slot name="actions" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-for="row, index in data" :key="index" class="n-table-row" :class="{'first':index===0}">
|
||||
<td v-for="col, colIndex in form.properties"
|
||||
<td v-for="col, colIndex in columns"
|
||||
:key="col.id"
|
||||
:style="{width: col.cell_width + 'px'}"
|
||||
class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden"
|
||||
:class="[{'border-b': index !== data.length - 1, 'border-r': colIndex !== form.properties.length - 1 || hasActions},
|
||||
:class="[{'border-b': index !== data.length - 1, 'border-r': colIndex !== columns.length - 1 || hasActions},
|
||||
colClasses(col)]"
|
||||
>
|
||||
<component :is="fieldComponents[col.type]" class="border-gray-100 dark:border-gray-900"
|
||||
|
|
@ -55,18 +55,18 @@
|
|||
<td v-if="hasActions" class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
|
||||
style="width: 100px"
|
||||
>
|
||||
<record-operations :form="form" :structure="form.properties" :rowid="row.id" @deleted="$emit('deleted')" />
|
||||
<record-operations :form="form" :structure="columns" :rowid="row.id" @deleted="$emit('deleted')" />
|
||||
</td>
|
||||
</tr>
|
||||
<tr v-if="loading" class="n-table-row border-t bg-gray-50 dark:bg-gray-900">
|
||||
<td :colspan="form.properties.length" class="p-8 w-full">
|
||||
<td :colspan="columns.length" class="p-8 w-full">
|
||||
<Loader class="w-4 h-4 mx-auto" />
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
<tbody v-else key="body-content" class="n-table-body">
|
||||
<tr class="n-table-row loader w-full">
|
||||
<td :colspan="form.properties.length" class="n-table-cell w-full p-8">
|
||||
<td :colspan="columns.length" class="n-table-cell w-full p-8">
|
||||
<Loader v-if="loading" class="w-4 h-4 mx-auto" />
|
||||
<p v-else class="text-gray-500 text-center">
|
||||
No data found.
|
||||
|
|
@ -92,6 +92,10 @@ import {hash} from "~/lib/utils.js";
|
|||
export default {
|
||||
components: { ResizableTh, RecordOperations },
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
|
|
@ -153,7 +157,7 @@ export default {
|
|||
},
|
||||
|
||||
watch: {
|
||||
'form.properties': {
|
||||
'columns': {
|
||||
handler () {
|
||||
this.onStructureChange()
|
||||
},
|
||||
|
|
@ -212,11 +216,11 @@ export default {
|
|||
return [colAlign, colColor, colWrap, colFontWeight]
|
||||
},
|
||||
onStructureChange () {
|
||||
if (this.form && this.form.properties) {
|
||||
if (this.columns) {
|
||||
this.$nextTick(() => {
|
||||
this.form.properties.forEach(col => {
|
||||
this.columns.forEach(col => {
|
||||
if (!col.hasOwnProperty('cell_width')) {
|
||||
if (this.allowResize && this.form !== null && document.getElementById('table-head-cell-' + col.id)) {
|
||||
if (this.allowResize && this.columns.length && document.getElementById('table-head-cell-' + col.id)) {
|
||||
// Within editor
|
||||
this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth)
|
||||
}
|
||||
|
|
@ -227,10 +231,10 @@ export default {
|
|||
},
|
||||
resizeCol (col, width) {
|
||||
if (!this.form) return
|
||||
const columns = clonedeep(this.form.properties)
|
||||
const index = this.form.properties.findIndex(c => c.id === col.id)
|
||||
const columns = clonedeep(this.columns)
|
||||
const index = this.columns.findIndex(c => c.id === col.id)
|
||||
columns[index].cell_width = width
|
||||
this.form.properties = columns
|
||||
this.setColumns(columns)
|
||||
this.$nextTick(() => {
|
||||
this.$emit('resize')
|
||||
})
|
||||
|
|
@ -263,6 +267,9 @@ export default {
|
|||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
setColumns(val) {
|
||||
this.$emit('update-columns',val)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue