From 1450163379c58a57d60aa12de98fa04f50c16166 Mon Sep 17 00:00:00 2001
From: Shariq Ansari <sharique.rik@gmail.com>
Date: Mon, 23 Dec 2024 16:04:18 +0530
Subject: [PATCH] feat: added grid (child table) control

---
 frontend/src/components/Controls/Grid.vue | 268 ++++++++++++++++++++++
 frontend/src/types/controls.ts            |  49 ++++
 frontend/src/utils/index.js               |  11 +
 3 files changed, 328 insertions(+)
 create mode 100644 frontend/src/components/Controls/Grid.vue
 create mode 100644 frontend/src/types/controls.ts

diff --git a/frontend/src/components/Controls/Grid.vue b/frontend/src/components/Controls/Grid.vue
new file mode 100644
index 00000000..c697b3be
--- /dev/null
+++ b/frontend/src/components/Controls/Grid.vue
@@ -0,0 +1,268 @@
+<template>
+  <div class="flex flex-col text-base">
+    <div v-if="label" class="mb-1.5 text-sm text-gray-600">{{ label }}</div>
+
+    <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 }"
+      >
+        <div class="inline-flex items-center justify-center border-r p-2">
+          <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>
+        <div
+          class="inline-flex items-center border-r p-2"
+          v-for="field in gridFields"
+          :key="field.fieldname"
+        >
+          {{ field.label }}
+        </div>
+        <div class="p-2" />
+      </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 }"
+            >
+              <div
+                class="inline-flex h-full items-center justify-center border-r p-2"
+              >
+                <Checkbox
+                  class="cursor-pointer duration-300"
+                  :modelValue="selectedRows.has(row.name)"
+                  @click.stop="toggleSelectRow(row)"
+                />
+              </div>
+              <div
+                class="flex h-full items-center justify-center border-r p-2 text-sm text-gray-800"
+              >
+                {{ index + 1 }}
+              </div>
+              <div
+                class="border-r border-gray-100 h-full"
+                v-for="field in gridFields"
+                :key="field.fieldname"
+              >
+                <Link
+                  v-if="field.fieldtype === 'Link'"
+                  class="text-sm text-gray-800"
+                  :value="row[field.fieldname]"
+                  :doctype="field.options"
+                  :placeholder="row.placeholder"
+                  @change="
+                    (data: String) =>
+                      field.onChange && field.onChange(data, index)
+                  "
+                />
+                <div
+                  v-else-if="field.fieldtype === 'Check'"
+                  class="flex h-full justify-center items-center"
+                >
+                  <Checkbox
+                    class="cursor-pointer duration-300"
+                    v-model="row[field.fieldname]"
+                    @change="
+                      (e: Event) =>
+                        field.onChange &&
+                        field.onChange(
+                          (e.target as HTMLInputElement).checked,
+                          index,
+                        )
+                    "
+                  />
+                </div>
+                <FormControl
+                  v-else
+                  class="text-sm text-gray-800"
+                  v-model="row[field.fieldname]"
+                  :type="field.fieldtype.toLowerCase()"
+                  :options="field.options"
+                  variant="outline"
+                  size="md"
+                  @change="
+                    (e: Event) =>
+                      field.onChange &&
+                      field.onChange(
+                        (e.target as HTMLInputElement).value,
+                        index,
+                      )
+                  "
+                />
+              </div>
+              <div class="edit-row">
+                <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"
+                  />
+                </Button>
+              </div>
+              <Dialog
+                v-model="showRowList[index]"
+                :options="{ title: `Editing Row ${index + 1}` }"
+              >
+                <template #body-content>
+                  <div v-for="field in fields" :key="field.fieldname">
+                    {{ field.label }}: {{ row[field.fieldname] }}
+                  </div>
+                </template>
+              </Dialog>
+            </div>
+          </template>
+        </Draggable>
+      </template>
+
+      <div
+        v-else
+        class="flex flex-col items-center rounded p-5 text-sm text-gray-600"
+      >
+        No Data
+      </div>
+    </div>
+
+    <div class="mt-2 flex flex-row gap-2">
+      <Button
+        v-if="showDeleteBtn"
+        label="Delete"
+        variant="solid"
+        theme="red"
+        @click="deleteRows"
+      />
+      <Button label="Add Row" @click="addRow" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import Link from '@/components/Controls/Link.vue'
+import { GridColumn, GridRow } from '@/types/controls'
+import { getRandom } from '@/utils'
+import { Dialog, FormControl, Checkbox } from 'frappe-ui'
+import Draggable from 'vuedraggable'
+import { ref, reactive, computed, PropType } from 'vue'
+
+const props = defineProps<{
+  label?: string
+  gridFields: GridColumn[]
+  fields: GridColumn[]
+}>()
+
+const rows = defineModel({
+  type: Array as PropType<GridRow[]>,
+  default: () => [],
+})
+const showRowList = ref(new Array(rows.value.length).fill(false))
+const selectedRows = reactive(new Set<string>())
+
+const gridTemplateColumns = computed(() => {
+  // 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
+})
+
+const allRowsSelected = computed(() => {
+  if (!rows.value.length) return false
+  return rows.value.length === selectedRows.size
+})
+
+const showDeleteBtn = computed(() => selectedRows.size > 0)
+
+const toggleSelectAllRows = (iSelected: boolean) => {
+  if (iSelected) {
+    rows.value.forEach((row: GridRow) => selectedRows.add(row.name))
+  } else {
+    selectedRows.clear()
+  }
+}
+
+const toggleSelectRow = (row: GridRow) => {
+  if (selectedRows.has(row.name)) {
+    selectedRows.delete(row.name)
+  } else {
+    selectedRows.add(row.name)
+  }
+}
+
+const addRow = () => {
+  const newRow = {} as GridRow
+  props.gridFields.forEach((field) => {
+    if (field.fieldtype === 'Check') newRow[field.fieldname] = false
+    else newRow[field.fieldname] = ''
+  })
+  newRow.name = getRandom(10)
+  showRowList.value.push(false)
+  newRow['__islocal'] = true
+  rows.value.push(newRow)
+}
+
+const deleteRows = () => {
+  rows.value = rows.value.filter((row) => !selectedRows.has(row.name))
+  showRowList.value.pop()
+  selectedRows.clear()
+}
+</script>
+
+<style scoped>
+/* For Input fields */
+:deep(.grid-row input:not([type='checkbox'])) {
+  border: none;
+  border-radius: 0;
+  height: 38px;
+}
+
+:deep(.grid-row input:focus, .grid-row input:hover) {
+  box-shadow: none;
+}
+
+:deep(.grid-row input:focus-within) {
+  border: 1px solid #d1d8dd;
+}
+
+/* For select field */
+:deep(.grid-row select) {
+  border: none;
+  border-radius: 0;
+  height: 38px;
+}
+
+/* For Autocomplete */
+:deep(.grid-row button) {
+  border: none;
+  border-radius: 0;
+  background-color: white;
+  height: 38px;
+}
+
+:deep(.grid-row .edit-row button) {
+  border-bottom-right-radius: 7px;
+}
+
+:deep(.grid-row button:focus, .grid-row button:hover) {
+  box-shadow: none;
+  background-color: white;
+}
+
+:deep(.grid-row button:focus-within) {
+  border: 1px solid #d1d8dd;
+}
+</style>
diff --git a/frontend/src/types/controls.ts b/frontend/src/types/controls.ts
new file mode 100644
index 00000000..9d27299e
--- /dev/null
+++ b/frontend/src/types/controls.ts
@@ -0,0 +1,49 @@
+export type FieldTypes =
+  | 'Data'
+  | 'Int'
+  | 'Float'
+  | 'Currency'
+  | 'Check'
+  | 'Text'
+  | 'Small Text'
+  | 'Long Text'
+  | 'Code'
+  | 'Text Editor'
+  | 'Date'
+  | 'Datetime'
+  | 'Time'
+  | 'HTML'
+  | 'Image'
+  | 'Attach'
+  | 'Select'
+  | 'Read Only'
+  | 'Section Break'
+  | 'Column Break'
+  | 'Table'
+  | 'Button'
+  | 'Link'
+  | 'Dynamic Link'
+  | 'Password'
+  | 'Signature'
+  | 'Color'
+  | 'Barcode'
+  | 'Geolocation'
+  | 'Duration'
+  | 'Percent'
+  | 'Rating'
+  | 'Icon'
+
+// Grid / Child Table
+export interface GridColumn {
+  label: string
+  fieldname: string
+  fieldtype: FieldTypes
+  options?: string | string[]
+  width?: number
+  onChange?: (value: string, index: number) => void
+}
+
+export interface GridRow {
+  name: string
+  [fieldname: string]: string | number | boolean
+}
diff --git a/frontend/src/utils/index.js b/frontend/src/utils/index.js
index 557e8588..c0306e4b 100644
--- a/frontend/src/utils/index.js
+++ b/frontend/src/utils/index.js
@@ -305,3 +305,14 @@ export function isImage(extention) {
     extention.toLowerCase(),
   )
 }
+
+export function getRandom(len) {
+  let text = ''
+  const possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'
+
+  Array.from({ length: len }).forEach(() => {
+    text += possible.charAt(Math.floor(Math.random() * possible.length))
+  })
+
+  return text
+}