test/crm
1
0
Fork 1
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: change event is not needed in grid row fields

Browse Source
This commit is contained in:
Shariq Ansari 2024-12-29 13:43:54 +05:30
parent 8471cbd044
commit ecd10fb73b
3 changed files with 24 additions and 93 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
frontend/src/components/Activities/DataFields.vue
View File

@ -90,7 +90,7 @@ const data = createDocumentResource({
createToast({
title: 'Data Updated',
icon: 'check',
iconClasses: 'text-green-600',
iconClasses: 'text-ink-green-3',
})
},
onError: (err) => {
@ -117,24 +117,9 @@ function parseTabs(_tabs) {
tab.sections.forEach((section) => {
section.fields.forEach((field) => {
if (field.type === 'Table') {
let name = props.meta[field.name].df.fieldname
let fields = props.meta[field.name].fields
let _fields = fields.map((field) => {
return {
...getFieldObj(field),
onChange: (value, index) => {
data.doc[name][index][field.fieldname] = value
},
}
})
field.fields = [
{
no_tabs: true,
sections: [{ columns: 3, hideLabel: true, fields: _fields }],
},
]
field.gridFields = _fields.filter((field) => field.in_list_view)
field.fields = props.meta[field.name].fields
.filter((field) => field.in_list_view)
.map((field) => getFieldObj(field))
}
})
})

89
frontend/src/components/Controls/Grid.vue
View File

@ -28,9 +28,9 @@
:style="{ gridTemplateColumns: gridTemplateColumns }"
>
<div
v-if="gridFields?.length"
v-if="fields?.length"
class="border-r border-outline-gray-2 p-2 truncate"
v-for="field in gridFields"
v-for="field in fields"
:key="field.name"
:title="field.label"
>
@ -65,21 +65,17 @@
:style="{ gridTemplateColumns: gridTemplateColumns }"
>
<div
v-if="gridFields?.length"
v-if="fields?.length"
class="border-r border-outline-gray-modals h-full"
v-for="field in gridFields"
v-for="field in fields"
:key="field.name"
>
<Link
v-if="field.type === 'Link'"
class="text-sm text-ink-gray-8"
:value="row[field.name]"
v-model="row[field.name]"
:doctype="field.options"
:filters="field.filters"
@change="
(data: String) =>
field.onChange && field.onChange(data, index)
"
/>
<div
v-else-if="field.type === 'Check'"
@ -88,39 +84,23 @@
<Checkbox
class="cursor-pointer duration-300"
v-model="row[field.name]"
@change="
(e: Event) =>
field.onChange &&
field.onChange(
(e.target as HTMLInputElement).checked,
index,
)
"
/>
</div>
<DatePicker
v-else-if="field.type === 'Date'"
:value="row[field.name]"
v-model="row[field.name]"
icon-left=""
variant="outline"
:formatter="(date) => getFormat(date, '', true)"
input-class="border-none text-sm text-ink-gray-8"
@change="
(data: String) =>
field.onChange && field.onChange(data, index)
"
/>
<DateTimePicker
v-else-if="field.type === 'Datetime'"
:value="row[field.name]"
v-model="row[field.name]"
icon-left=""
variant="outline"
:formatter="(date) => getFormat(date, '', true, true)"
input-class="border-none text-sm text-ink-gray-8"
@change="
(data: String) =>
field.onChange && field.onChange(data, index)
"
/>
<FormControl
v-else-if="
@ -129,62 +109,30 @@
)
"
type="textarea"
v-model="row[field.name]"
variant="outline"
@change="
(e: Event) =>
field.onChange &&
field.onChange(
(e.target as HTMLInputElement).value,
index,
)
"
v-model="row[field.name]"
/>
<FormControl
v-else-if="['Int'].includes(field.type)"
type="number"
v-model="row[field.name]"
variant="outline"
@change="
(e: Event) =>
field.onChange &&
field.onChange(
(e.target as HTMLInputElement).value,
index,
)
"
v-model="row[field.name]"
/>
<FormControl
v-else-if="field.type === 'Select'"
class="text-sm text-ink-gray-8"
v-model="row[field.name]"
type="select"
:options="field.options"
variant="outline"
@change="
(e: Event) =>
field.onChange &&
field.onChange(
(e.target as HTMLInputElement).value,
index,
)
"
v-model="row[field.name]"
:options="field.options"
/>
<FormControl
v-else
class="text-sm text-ink-gray-8"
v-model="row[field.name]"
type="text"
:options="field.options"
variant="outline"
@change="
(e: Event) =>
field.onChange &&
field.onChange(
(e.target as HTMLInputElement).value,
index,
)
"
v-model="row[field.name]"
:options="field.options"
/>
</div>
</div>
@ -218,7 +166,7 @@
</div>
</div>
<div v-if="gridFields?.length" class="mt-2 flex flex-row gap-2">
<div v-if="fields?.length" class="mt-2 flex flex-row gap-2">
<Button
v-if="showDeleteBtn"
:label="__('Delete')"
@ -249,7 +197,6 @@ import { ref, reactive, computed, PropType } from 'vue'
const props = defineProps<{
label?: string
gridFields: GridColumn[]
fields: GridColumn[]
doctype: string
}>()
@ -264,11 +211,9 @@ const selectedRows = reactive(new Set<string>())
const showGridRowFieldsModal = ref(false)
const gridTemplateColumns = computed(() => {
if (!props.gridFields?.length) return '1fr'
if (!props.fields?.length) return '1fr'
// for the checkbox & sr no. columns
return props.gridFields
.map((col) => `minmax(0, ${col.width || 2}fr)`)
.join(' ')
return props.fields.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
})
const allRowsSelected = computed(() => {
@ -296,7 +241,7 @@ const toggleSelectRow = (row: GridRow) => {
const addRow = () => {
const newRow = {} as GridRow
props.gridFields?.forEach((field) => {
props.fields?.forEach((field) => {
if (field.type === 'Check') newRow[field.name] = false
else newRow[field.name] = ''
})

5
frontend/src/components/FieldLayout.vue
View File

@ -80,7 +80,6 @@
v-else-if="field.type === 'Table'"
v-model="data[field.name]"
:fields="field.fields"
:gridFields="field.gridFields"
:doctype="field.options"
/>
<FormControl
@ -185,7 +184,9 @@
/>
<FormControl
v-else-if="
['Small Text', 'Text', 'Long Text', 'Code'].includes(field.type)
['Small Text', 'Text', 'Long Text', 'Code'].includes(
field.type,
)
"
type="textarea"
:placeholder="getPlaceholder(field)"