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">
|
||||
<!-- Header -->
|
||||
<div
|
||||
class="grid items-center rounded-t-sm bg-gray-100 text-gray-600"
|
||||
:style="{ gridTemplateColumns: gridTemplateColumns }"
|
||||
class="grid-header flex items-center rounded-t-sm bg-gray-100 text-gray-600 truncate"
|
||||
>
|
||||
<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
|
||||
class="cursor-pointer duration-300"
|
||||
:modelValue="allRowsSelected"
|
||||
@click.stop="toggleSelectAllRows($event.target.checked)"
|
||||
/>
|
||||
</div>
|
||||
<div class="inline-flex items-center justify-center border-r py-2 px-1">
|
||||
{{ __('No.') }}
|
||||
<div
|
||||
class="inline-flex items-center justify-center border-r py-2 px-1 w-12"
|
||||
>
|
||||
{{ __('No') }}
|
||||
</div>
|
||||
<div
|
||||
v-if="gridFields?.length"
|
||||
class="inline-flex items-center border-r p-2"
|
||||
v-for="field in gridFields"
|
||||
:key="field.name"
|
||||
class="grid w-full truncate"
|
||||
:style="{ gridTemplateColumns: gridTemplateColumns }"
|
||||
>
|
||||
{{ 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 class="p-2" />
|
||||
<div class="w-12" />
|
||||
</div>
|
||||
<!-- Rows -->
|
||||
<template v-if="rows.length">
|
||||
<Draggable class="w-full" v-model="rows" group="rows" item-key="name">
|
||||
<template #item="{ element: row, index }">
|
||||
<div
|
||||
class="grid-row grid cursor-pointer items-center border-b border-gray-100 bg-white last:rounded-b last:border-b-0"
|
||||
:style="{ gridTemplateColumns: gridTemplateColumns }"
|
||||
class="grid-row flex cursor-pointer items-center border-b border-gray-100 bg-white last:rounded-b last:border-b-0"
|
||||
>
|
||||
<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
|
||||
class="cursor-pointer duration-300"
|
||||
@ -48,148 +54,150 @@
|
||||
/>
|
||||
</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 }}
|
||||
</div>
|
||||
<div
|
||||
v-if="gridFields?.length"
|
||||
class="border-r border-gray-100 h-full"
|
||||
v-for="field in gridFields"
|
||||
:key="field.name"
|
||||
class="grid w-full h-9.5"
|
||||
:style="{ gridTemplateColumns: gridTemplateColumns }"
|
||||
>
|
||||
<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
|
||||
v-else-if="field.type === 'Check'"
|
||||
class="flex h-full justify-center items-center"
|
||||
v-if="gridFields?.length"
|
||||
class="border-r border-gray-100 h-full"
|
||||
v-for="field in gridFields"
|
||||
:key="field.name"
|
||||
>
|
||||
<Checkbox
|
||||
class="cursor-pointer duration-300"
|
||||
<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
|
||||
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]"
|
||||
variant="outline"
|
||||
@change="
|
||||
(e: Event) =>
|
||||
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,
|
||||
)
|
||||
"
|
||||
/>
|
||||
</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 class="edit-row">
|
||||
<div class="edit-row w-12">
|
||||
<Button
|
||||
class="flex w-full items-center justify-center rounded"
|
||||
@click="showRowList[index] = true"
|
||||
>
|
||||
<FeatherIcon
|
||||
name="edit-2"
|
||||
class="h-3.5 w-3.5 text-gray-700"
|
||||
/>
|
||||
<EditIcon class="h-4 w-4 text-gray-700" />
|
||||
</Button>
|
||||
</div>
|
||||
<Dialog
|
||||
@ -234,6 +242,7 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import EditIcon from '@/components/Icons/EditIcon.vue'
|
||||
import FieldLayout from '@/components/FieldLayout.vue'
|
||||
import Link from '@/components/Controls/Link.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 gridTemplateColumns = computed(() => {
|
||||
if (!props.gridFields?.length) return '1fr 1fr 9fr'
|
||||
if (!props.gridFields?.length) return '1fr'
|
||||
// for the checkbox & sr no. columns
|
||||
let columns = '0.5fr 0.5fr'
|
||||
columns +=
|
||||
' ' +
|
||||
props.gridFields.map((col) => `minmax(0, ${col.width || 2}fr)`).join(' ')
|
||||
// for the edit button column
|
||||
columns += ' 0.5fr'
|
||||
|
||||
return columns
|
||||
return props.gridFields
|
||||
.map((col) => `minmax(0, ${col.width || 2}fr)`)
|
||||
.join(' ')
|
||||
})
|
||||
|
||||
const allRowsSelected = computed(() => {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user