From e354ed5e556ccf4e7015990d16921c05d5699306 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 22:05:11 +0530
Subject: [PATCH] fix: grid columns layout fix

---
 frontend/src/components/Controls/Grid.vue | 290 +++++++++++-----------
 1 file changed, 147 insertions(+), 143 deletions(-)

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
index 64130fa4..0a42d7b4 100644
--- a/frontend/src/components/Controls/Grid.vue
+++ b/frontend/src/components/Controls/Grid.vue
@@ -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(() => {