village-hall
/
opnform
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fix field width bug when editing

This commit is contained in:
Julien Nahum 2024-01-18 12:02:09 +01:00
parent c97be832d7
commit 117ea8d9c1
2 changed files with 38 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

33
client/components/open/forms/components/FormSubmissions.vue
View File

@ -19,12 +19,12 @@
</template> </template>
<div class="px-4"> <div class="px-4">
<template v-if="properties.length > 0"> <template v-if="form.properties.length > 0">
<h4 class="font-bold mb-2"> <h4 class="font-bold mb-2">
Form Fields Form Fields
</h4> </h4>
<div class="border border-gray-300 rounded-md"> <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"> <p class="flex-grow truncate">
{{ field.name }} {{ field.name }}
</p> </p>
@ -77,10 +77,12 @@
<open-table <open-table
ref="table" ref="table"
class="max-h-full" class="max-h-full"
:columns="properties"
:data="filteredData" :data="filteredData"
:loading="isLoading" :loading="isLoading"
@resize="dataChanged()" @resize="dataChanged()"
@deleted="onDeleteRecord()" @deleted="onDeleteRecord()"
@update-columns="onColumnUpdated"
/> />
</scroll-shadow> </scroll-shadow>
</div> </div>
@ -148,7 +150,7 @@ export default {
// Fuze search // Fuze search
const fuzeOptions = { const fuzeOptions = {
keys: this.form.properties.map((field) => field.id) keys: this.properties.map((field) => field.id)
} }
const fuse = new Fuse(filteredData, fuzeOptions) const fuse = new Fuse(filteredData, fuzeOptions)
return fuse.search(this.searchForm.search).map((res) => { return fuse.search(this.searchForm.search).map((res) => {
@ -176,27 +178,21 @@ export default {
} }
// check if form properties already has a created_at column // check if form properties already has a created_at column
let hasCreatedAt = false this.properties = clonedeep(this.form.properties)
this.form.properties.forEach((property) => { if (!this.properties.find((property) => {
if (property.id === 'created_at') { if (property.id === 'created_at') {
hasCreatedAt = true return true
} }
}) }) ) {
if (!hasCreatedAt) {
// Add a "created at" column // Add a "created at" column
const columns = clonedeep(this.form.properties) this.properties.push({
columns.push({
name: 'Created at', name: 'Created at',
id: 'created_at', id: 'created_at',
type: 'date', type: 'date',
width: 140 width: 140
}) })
this.form.properties = columns
} }
this.formInitDone = true this.formInitDone = true
this.properties = clonedeep(this.form.properties)
this.removed_properties = (this.form.removed_properties) ? clonedeep(this.form.removed_properties) : [] this.removed_properties = (this.form.removed_properties) ? clonedeep(this.form.removed_properties) : []
// Get display columns from local storage // Get display columns from local storage
@ -205,7 +201,7 @@ export default {
this.displayColumns = JSON.parse(tmpColumns) this.displayColumns = JSON.parse(tmpColumns)
this.onChangeDisplayColumns() this.onChangeDisplayColumns()
} else { } else {
this.form.properties.forEach((field) => { this.properties.forEach((field) => {
this.displayColumns[field.id] = true this.displayColumns[field.id] = true
}) })
} }
@ -237,10 +233,13 @@ export default {
this.$refs.shadows.calcDimensions() this.$refs.shadows.calcDimensions()
} }
}, },
onColumnUpdated(columns) {
this.properties = columns
},
onChangeDisplayColumns () { onChangeDisplayColumns () {
if (process.client) if (!process.client) return
window.localStorage.setItem('display-columns-formid-' + this.form.id, JSON.stringify(this.displayColumns)) 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 return this.displayColumns[field.id] === true
}) })
}, },

37
client/components/open/tables/OpenTable.vue
View File

@ -8,13 +8,13 @@
style="will-change: transform; transform: translate3d(0px, 0px, 0px)" style="will-change: transform; transform: translate3d(0px, 0px, 0px)"
> >
<tr class="n-table-row overflow-x-hidden"> <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')" scope="col" :allow-resize="allowResize" :width="(col.cell_width ? col.cell_width + 'px':'auto')"
class="n-table-cell p-0 relative" class="n-table-cell p-0 relative"
@resize-width="resizeCol(col, $event)" @resize-width="resizeCol(col, $event)"
> >
<p <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" 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 }} {{ col.name }}
@ -36,16 +36,16 @@
class="action-row absolute w-full" class="action-row absolute w-full"
style="will-change: transform; transform: translate3d(0px, 32px, 0px)" 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" /> <slot name="actions" />
</td> </td>
</tr> </tr>
<tr v-for="row, index in data" :key="index" class="n-table-row" :class="{'first':index===0}"> <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" :key="col.id"
:style="{width: col.cell_width + 'px'}" :style="{width: col.cell_width + 'px'}"
class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 overflow-hidden" 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)]" colClasses(col)]"
> >
<component :is="fieldComponents[col.type]" class="border-gray-100 dark:border-gray-900" <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" <td v-if="hasActions" class="n-table-cell border-gray-100 dark:border-gray-900 text-sm p-2 border-b"
style="width: 100px" 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> </td>
</tr> </tr>
<tr v-if="loading" class="n-table-row border-t bg-gray-50 dark:bg-gray-900"> <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" /> <Loader class="w-4 h-4 mx-auto" />
</td> </td>
</tr> </tr>
</tbody> </tbody>
<tbody v-else key="body-content" class="n-table-body"> <tbody v-else key="body-content" class="n-table-body">
<tr class="n-table-row loader w-full"> <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" /> <Loader v-if="loading" class="w-4 h-4 mx-auto" />
<p v-else class="text-gray-500 text-center"> <p v-else class="text-gray-500 text-center">
No data found. No data found.
@ -92,6 +92,10 @@ import {hash} from "~/lib/utils.js";
export default { export default {
components: { ResizableTh, RecordOperations }, components: { ResizableTh, RecordOperations },
props: { props: {
columns: {
type: Array,
default: () => []
},
data: { data: {
type: Array, type: Array,
default: () => [] default: () => []
@ -153,7 +157,7 @@ export default {
}, },
watch: { watch: {
'form.properties': { 'columns': {
handler () { handler () {
this.onStructureChange() this.onStructureChange()
}, },
@ -212,11 +216,11 @@ export default {
return [colAlign, colColor, colWrap, colFontWeight] return [colAlign, colColor, colWrap, colFontWeight]
}, },
onStructureChange () { onStructureChange () {
if (this.form && this.form.properties) { if (this.columns) {
this.$nextTick(() => { this.$nextTick(() => {
this.form.properties.forEach(col => { this.columns.forEach(col => {
if (!col.hasOwnProperty('cell_width')) { 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 // Within editor
this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth) this.resizeCol(col, document.getElementById('table-head-cell-' + col.id).offsetWidth)
} }
@ -227,10 +231,10 @@ export default {
}, },
resizeCol (col, width) { resizeCol (col, width) {
if (!this.form) return if (!this.form) return
const columns = clonedeep(this.form.properties) const columns = clonedeep(this.columns)
const index = this.form.properties.findIndex(c => c.id === col.id) const index = this.columns.findIndex(c => c.id === col.id)
columns[index].cell_width = width columns[index].cell_width = width
this.form.properties = columns this.setColumns(columns)
this.$nextTick(() => { this.$nextTick(() => {
this.$emit('resize') this.$emit('resize')
}) })
@ -263,6 +267,9 @@ export default {
} }
} }
} }
},
setColumns(val) {
this.$emit('update-columns',val)
} }
} }
} }