test/jcrm
1
0
Fork 0
forked from test/crm
Code Pull Requests Activity

fix: grid columns layout fix

Browse Source
This commit is contained in:
Shariq Ansari 2024-12-23 22:05:11 +05:30
parent 9167525656
commit e354ed5e55
1 changed files with 147 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -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
class="grid w-full truncate"
:style="{ gridTemplateColumns: gridTemplateColumns }"
>
<div <div
v-if="gridFields?.length" v-if="gridFields?.length"
class="inline-flex items-center border-r p-2" class="border-r p-2 truncate"
v-for="field in gridFields" v-for="field in gridFields"
:key="field.name" :key="field.name"
:title="field.label"
> >
{{ field.label }} {{ __(field.label) }}
</div> </div>
<div class="p-2" /> </div>
<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,10 +54,14 @@
/> />
</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
class="grid w-full h-9.5"
:style="{ gridTemplateColumns: gridTemplateColumns }"
>
<div <div
v-if="gridFields?.length" v-if="gridFields?.length"
class="border-r border-gray-100 h-full" class="border-r border-gray-100 h-full"
@ -181,15 +191,13 @@
" "
/> />
</div> </div>
<div class="edit-row"> </div>
<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(() => {