fix: grid columns layout fix
This commit is contained in:
Shariq Ansari
parent
9167525656
commit
e354ed5e55
@ -7,39 +7,45 @@
|
|||||||
<div class="rounded border border-gray-100">
|
<div class="rounded border border-gray-100">
|
||||||
<!-- Header -->
|
<!-- Header -->
|
||||||
<div
|
<div
|
||||||
class="grid items-center rounded-t-sm bg-gray-100 text-gray-600"
|
class="grid-header flex items-center rounded-t-sm bg-gray-100 text-gray-600 truncate"
|
||||||
:style="{ gridTemplateColumns: gridTemplateColumns }"
|
|
||||||
>
|
>
|
||||||
<div class="inline-flex items-center justify-center border-r p-2">
|
<div class="inline-flex items-center justify-center border-r p-2 w-12">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
class="cursor-pointer duration-300"
|
class="cursor-pointer duration-300"
|
||||||
:modelValue="allRowsSelected"
|
:modelValue="allRowsSelected"
|
||||||
@click.stop="toggleSelectAllRows($event.target.checked)"
|
@click.stop="toggleSelectAllRows($event.target.checked)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="inline-flex items-center justify-center border-r py-2 px-1">
|
<div
|
||||||
{{ __('No.') }}
|
class="inline-flex items-center justify-center border-r py-2 px-1 w-12"
|
||||||
|
>
|
||||||
|
{{ __('No') }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="gridFields?.length"
|
class="grid w-full truncate"
|
||||||
class="inline-flex items-center border-r p-2"
|
:style="{ gridTemplateColumns: gridTemplateColumns }"
|
||||||
v-for="field in gridFields"
|
|
||||||
:key="field.name"
|
|
||||||
>
|
>
|
||||||
{{ field.label }}
|
<div
|
||||||
|
v-if="gridFields?.length"
|
||||||
|
class="border-r p-2 truncate"
|
||||||
|
v-for="field in gridFields"
|
||||||
|
:key="field.name"
|
||||||
|
:title="field.label"
|
||||||
|
>
|
||||||
|
{{ __(field.label) }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="p-2" />
|
<div class="w-12" />
|
||||||
</div>
|
</div>
|
||||||
<!-- Rows -->
|
<!-- Rows -->
|
||||||
<template v-if="rows.length">
|
<template v-if="rows.length">
|
||||||
<Draggable class="w-full" v-model="rows" group="rows" item-key="name">
|
<Draggable class="w-full" v-model="rows" group="rows" item-key="name">
|
||||||
<template #item="{ element: row, index }">
|
<template #item="{ element: row, index }">
|
||||||
<div
|
<div
|
||||||
class="grid-row grid cursor-pointer items-center border-b border-gray-100 bg-white last:rounded-b last:border-b-0"
|
class="grid-row flex cursor-pointer items-center border-b border-gray-100 bg-white last:rounded-b last:border-b-0"
|
||||||
:style="{ gridTemplateColumns: gridTemplateColumns }"
|
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
class="inline-flex h-full items-center justify-center border-r p-2"
|
class="inline-flex h-9.5 items-center justify-center border-r p-2 w-12"
|
||||||
>
|
>
|
||||||
<Checkbox
|
<Checkbox
|
||||||
class="cursor-pointer duration-300"
|
class="cursor-pointer duration-300"
|
||||||
@ -48,148 +54,150 @@
|
|||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
class="flex h-full items-center justify-center border-r p-2 text-sm text-gray-800"
|
class="flex h-9.5 items-center justify-center border-r py-2 px-1 text-sm text-gray-800 w-12"
|
||||||
>
|
>
|
||||||
{{ index + 1 }}
|
{{ index + 1 }}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="gridFields?.length"
|
class="grid w-full h-9.5"
|
||||||
class="border-r border-gray-100 h-full"
|
:style="{ gridTemplateColumns: gridTemplateColumns }"
|
||||||
v-for="field in gridFields"
|
|
||||||
:key="field.name"
|
|
||||||
>
|
>
|
||||||
<Link
|
|
||||||
v-if="field.type === 'Link'"
|
|
||||||
class="text-sm text-gray-800"
|
|
||||||
:value="row[field.name]"
|
|
||||||
:doctype="field.options"
|
|
||||||
:filters="field.filters"
|
|
||||||
@change="
|
|
||||||
(data: String) =>
|
|
||||||
field.onChange && field.onChange(data, index)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<Grid
|
|
||||||
v-else-if="field.type === 'Table'"
|
|
||||||
v-model="data[field.name]"
|
|
||||||
:fields="field.fields || []"
|
|
||||||
:gridFields="field.gridFields || []"
|
|
||||||
/>
|
|
||||||
<div
|
<div
|
||||||
v-else-if="field.type === 'Check'"
|
v-if="gridFields?.length"
|
||||||
class="flex h-full justify-center items-center"
|
class="border-r border-gray-100 h-full"
|
||||||
|
v-for="field in gridFields"
|
||||||
|
:key="field.name"
|
||||||
>
|
>
|
||||||
<Checkbox
|
<Link
|
||||||
class="cursor-pointer duration-300"
|
v-if="field.type === 'Link'"
|
||||||
|
class="text-sm text-gray-800"
|
||||||
|
:value="row[field.name]"
|
||||||
|
:doctype="field.options"
|
||||||
|
:filters="field.filters"
|
||||||
|
@change="
|
||||||
|
(data: String) =>
|
||||||
|
field.onChange && field.onChange(data, index)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<Grid
|
||||||
|
v-else-if="field.type === 'Table'"
|
||||||
|
v-model="data[field.name]"
|
||||||
|
:fields="field.fields || []"
|
||||||
|
:gridFields="field.gridFields || []"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
v-else-if="field.type === 'Check'"
|
||||||
|
class="flex h-full justify-center items-center"
|
||||||
|
>
|
||||||
|
<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]"
|
||||||
|
icon-left=""
|
||||||
|
variant="outline"
|
||||||
|
:formatter="(date) => getFormat(date, '', true)"
|
||||||
|
input-class="border-none text-sm text-gray-800"
|
||||||
|
@change="
|
||||||
|
(data: String) =>
|
||||||
|
field.onChange && field.onChange(data, index)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<DateTimePicker
|
||||||
|
v-else-if="field.type === 'Datetime'"
|
||||||
|
:value="row[field.name]"
|
||||||
|
icon-left=""
|
||||||
|
variant="outline"
|
||||||
|
:formatter="(date) => getFormat(date, '', true, true)"
|
||||||
|
input-class="border-none text-sm text-gray-800"
|
||||||
|
@change="
|
||||||
|
(data: String) =>
|
||||||
|
field.onChange && field.onChange(data, index)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="
|
||||||
|
['Small Text', 'Text', 'Long Text', 'Code'].includes(
|
||||||
|
field.type,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
type="textarea"
|
||||||
v-model="row[field.name]"
|
v-model="row[field.name]"
|
||||||
|
variant="outline"
|
||||||
@change="
|
@change="
|
||||||
(e: Event) =>
|
(e: Event) =>
|
||||||
field.onChange &&
|
field.onChange &&
|
||||||
field.onChange(
|
field.onChange(
|
||||||
(e.target as HTMLInputElement).checked,
|
(e.target as HTMLInputElement).value,
|
||||||
|
index,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<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,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else-if="field.type === 'Select'"
|
||||||
|
class="text-sm text-gray-800"
|
||||||
|
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,
|
||||||
|
)
|
||||||
|
"
|
||||||
|
/>
|
||||||
|
<FormControl
|
||||||
|
v-else
|
||||||
|
class="text-sm text-gray-800"
|
||||||
|
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,
|
index,
|
||||||
)
|
)
|
||||||
"
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<DatePicker
|
|
||||||
v-else-if="field.type === 'Date'"
|
|
||||||
:value="row[field.name]"
|
|
||||||
icon-left=""
|
|
||||||
variant="outline"
|
|
||||||
:formatter="(date) => getFormat(date, '', true)"
|
|
||||||
input-class="border-none text-sm text-gray-800"
|
|
||||||
@change="
|
|
||||||
(data: String) =>
|
|
||||||
field.onChange && field.onChange(data, index)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<DateTimePicker
|
|
||||||
v-else-if="field.type === 'Datetime'"
|
|
||||||
:value="row[field.name]"
|
|
||||||
icon-left=""
|
|
||||||
variant="outline"
|
|
||||||
:formatter="(date) => getFormat(date, '', true, true)"
|
|
||||||
input-class="border-none text-sm text-gray-800"
|
|
||||||
@change="
|
|
||||||
(data: String) =>
|
|
||||||
field.onChange && field.onChange(data, index)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="
|
|
||||||
['Small Text', 'Text', 'Long Text', 'Code'].includes(
|
|
||||||
field.type,
|
|
||||||
)
|
|
||||||
"
|
|
||||||
type="textarea"
|
|
||||||
v-model="row[field.name]"
|
|
||||||
variant="outline"
|
|
||||||
@change="
|
|
||||||
(e: Event) =>
|
|
||||||
field.onChange &&
|
|
||||||
field.onChange(
|
|
||||||
(e.target as HTMLInputElement).value,
|
|
||||||
index,
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<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,
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else-if="field.type === 'Select'"
|
|
||||||
class="text-sm text-gray-800"
|
|
||||||
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,
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
<FormControl
|
|
||||||
v-else
|
|
||||||
class="text-sm text-gray-800"
|
|
||||||
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,
|
|
||||||
)
|
|
||||||
"
|
|
||||||
/>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="edit-row">
|
<div class="edit-row w-12">
|
||||||
<Button
|
<Button
|
||||||
class="flex w-full items-center justify-center rounded"
|
class="flex w-full items-center justify-center rounded"
|
||||||
@click="showRowList[index] = true"
|
@click="showRowList[index] = true"
|
||||||
>
|
>
|
||||||
<FeatherIcon
|
<EditIcon class="h-4 w-4 text-gray-700" />
|
||||||
name="edit-2"
|
|
||||||
class="h-3.5 w-3.5 text-gray-700"
|
|
||||||
/>
|
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
<Dialog
|
<Dialog
|
||||||
@ -234,6 +242,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import EditIcon from '@/components/Icons/EditIcon.vue'
|
||||||
import FieldLayout from '@/components/FieldLayout.vue'
|
import FieldLayout from '@/components/FieldLayout.vue'
|
||||||
import Link from '@/components/Controls/Link.vue'
|
import Link from '@/components/Controls/Link.vue'
|
||||||
import Grid from '@/components/Controls/Grid.vue'
|
import Grid from '@/components/Controls/Grid.vue'
|
||||||
@ -263,16 +272,11 @@ const showRowList = ref(new Array(rows.value.length).fill(false))
|
|||||||
const selectedRows = reactive(new Set<string>())
|
const selectedRows = reactive(new Set<string>())
|
||||||
|
|
||||||
const gridTemplateColumns = computed(() => {
|
const gridTemplateColumns = computed(() => {
|
||||||
if (!props.gridFields?.length) return '1fr 1fr 9fr'
|
if (!props.gridFields?.length) return '1fr'
|
||||||
// for the checkbox & sr no. columns
|
// for the checkbox & sr no. columns
|
||||||
let columns = '0.5fr 0.5fr'
|
return props.gridFields
|
||||||
columns +=
|
.map((col) => `minmax(0, ${col.width || 2}fr)`)
|
||||||
' ' +
|
.join(' ')
|
||||||
props.gridFields.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
|
|
||||||
// for the edit button column
|
|
||||||
columns += ' 0.5fr'
|
|
||||||
|
|
||||||
return columns
|
|
||||||
})
|
})
|
||||||
|
|
||||||
const allRowsSelected = computed(() => {
|
const allRowsSelected = computed(() => {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user