From b13dc54c1fc189a127a4e634844a7181a6076005 Mon Sep 17 00:00:00 2001
From: sulmo <50662170+sulmoJ@users.noreply.github.com>
Date: Thu, 23 Feb 2023 18:19:21 +0900
Subject: [PATCH] feat(raw-table): add headers option to raw-table (#314)

* feat(raw-table): add headers option to raw-table

* feat(mock): add raw-table mock data

* feat: update raw-table mdx

* chore: fix component docs & minor things
---
 .../dynamic/dynamic-layout/mock.ts            |  4 +
 .../templates/html/html.stories.mdx           |  2 +-
 .../templates/item/item.stories.mdx           |  2 +-
 .../templates/list/list.stories.mdx           |  1 +
 .../templates/markdown/markdown.stories.mdx   |  2 +-
 .../templates/popup/popup.stories.mdx         |  2 +-
 .../query-search-table.stories.mdx            |  2 +-
 .../templates/raw-table/index.vue             |  6 ++
 .../templates/raw-table/raw-table.stories.mdx | 76 ++++++++++++++++++-
 .../templates/raw-table/story-helper.ts       |  1 +
 .../templates/raw/raw.stories.mdx             |  2 +-
 .../simple-table/simple-table.stories.mdx     |  2 +-
 .../dynamic-layout/type/layout-schema.ts      |  1 +
 13 files changed, 95 insertions(+), 8 deletions(-)

diff --git a/src/data-display/dynamic/dynamic-layout/mock.ts b/src/data-display/dynamic/dynamic-layout/mock.ts
index a8947b938..bb77686e0 100644
--- a/src/data-display/dynamic/dynamic-layout/mock.ts
+++ b/src/data-display/dynamic/dynamic-layout/mock.ts
@@ -722,6 +722,10 @@ export default {
         data: makeTableData(),
     },
     rawTable: {
+        options: {
+            headers: ['information', 'age', 'name', 'job'],
+            disable_search: false,
+        },
         data: makeTableData(),
     },
     querySearchTable: {
diff --git a/src/data-display/dynamic/dynamic-layout/templates/html/html.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/html/html.stories.mdx
index 1a0e601f8..ce68b1bf5 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/html/html.stories.mdx
+++ b/src/data-display/dynamic/dynamic-layout/templates/html/html.stories.mdx
@@ -42,9 +42,9 @@ export const Template = (args, { argTypes }) => ({
 | translation_id | O |
 | fields | X |
 | markdown | X |
-| layouts | X |
 | search | X |
 | disable_search | X |
+| headers | x |
 | layout | X |
 
 ## Supported Fetch Options
diff --git a/src/data-display/dynamic/dynamic-layout/templates/item/item.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/item/item.stories.mdx
index 233fb1f47..9c9eb1260 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/item/item.stories.mdx
+++ b/src/data-display/dynamic/dynamic-layout/templates/item/item.stories.mdx
@@ -41,9 +41,9 @@ export const Template = (args, { argTypes }) => ({
 | translation_id | O |
 | fields | X |
 | markdown | X |
-| layouts | X |
 | search | X |
 | disable_search | X |
+| headers | x |
 | layout | X |
 
 
diff --git a/src/data-display/dynamic/dynamic-layout/templates/list/list.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/list/list.stories.mdx
index e246fa70a..d8ca1f892 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/list/list.stories.mdx
+++ b/src/data-display/dynamic/dynamic-layout/templates/list/list.stories.mdx
@@ -70,6 +70,7 @@ export const Template = (args, { argTypes }) => ({
 | layouts | O |
 | search | X |
 | disable_search | X |
+| headers | x |
 
 
 ## Supported Fetch Options
diff --git a/src/data-display/dynamic/dynamic-layout/templates/markdown/markdown.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/markdown/markdown.stories.mdx
index c8001a216..9218cf331 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/markdown/markdown.stories.mdx
+++ b/src/data-display/dynamic/dynamic-layout/templates/markdown/markdown.stories.mdx
@@ -42,9 +42,9 @@ export const Template = (args, { argTypes }) => ({
 | translation_id | O |
 | fields | X |
 | markdown | O |
-| layouts | X |
 | search | X |
 | disable_search | X |
+| headers | x |
 | layout | X |
 
 
diff --git a/src/data-display/dynamic/dynamic-layout/templates/popup/popup.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/popup/popup.stories.mdx
index 84d0def22..eb5a85d84 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/popup/popup.stories.mdx
+++ b/src/data-display/dynamic/dynamic-layout/templates/popup/popup.stories.mdx
@@ -42,9 +42,9 @@ export const Template = (args, { argTypes }) => ({
 | translation_id | O |
 | fields | X |
 | markdown | O |
-| layouts | X |
 | search | X |
 | disable_search | X |
+| headers | x |
 | layout | O |
 
 
diff --git a/src/data-display/dynamic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx
index e9e9a0924..a7bbc6c90 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx
+++ b/src/data-display/dynamic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx
@@ -67,9 +67,9 @@ export const Template = (args, { argTypes }) => ({
 | translation_id | O |
 | fields | O |
 | markdown | X |
-| layouts | X |
 | search | O |
 | disable_search | O |
+| headers | x |
 | layout | X |
 
 
diff --git a/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue b/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue
index 54ae30b5f..afd99bcdb 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue
+++ b/src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue
@@ -74,6 +74,12 @@ export default defineComponent<RawTableDynamicLayoutProps>({
             fields: computed(() => {
                 if (state.rootData[0]) {
                     const firstItem = state.rootData[0];
+                    if (Array.isArray(props.options?.headers) && props.options?.headers?.length) {
+                        return props.options.headers.map((header) => ({
+                            key: header,
+                            name: header,
+                        }));
+                    }
                     return sortBy(map(firstItem, (value, key) => ({ key, name: key })), (item) => item.key);
                 }
                 return [];
diff --git a/src/data-display/dynamic/dynamic-layout/templates/raw-table/raw-table.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/raw-table/raw-table.stories.mdx
index b4a0766b5..38ded738e 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/raw-table/raw-table.stories.mdx
+++ b/src/data-display/dynamic/dynamic-layout/templates/raw-table/raw-table.stories.mdx
@@ -2,6 +2,7 @@ import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs/blocks';
 import PDynamicLayout from '@/data-display/dynamic/dynamic-layout/PDynamicLayout.vue';
 import {i18n} from '@/translations'
 import { getDynamicLayoutRawTableArgTypes } from '@/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper';
+import mock from '@/data-display/dynamic/dynamic-layout/mock';
 
 <Meta title='Data Display/Dynamic/Dynamic Layout/- [Table] Raw Table'
       argTypes={getDynamicLayoutRawTableArgTypes()}/>
@@ -60,9 +61,9 @@ export const Template = (args, { argTypes }) => ({
 | translation_id | O |
 | fields | X |
 | markdown | X |
-| layouts | X |
 | search | X |
 | disable_search | O |
+| headers | O |
 | layout | X |
 
 
@@ -107,6 +108,79 @@ export const Template = (args, { argTypes }) => ({
 | click-settings | X |
 | update-popup-visible | X |
 
+<br/>
+<br/>
+
+## Options Example
+
+<br/>
+
+### Options: Disable Search
+
+```js
+{
+    disable_search: true
+}
+```
+
+<Canvas>
+    <Story name="Disable Search">
+        {{
+            components: { PDynamicLayout },
+            template: `
+                <p-dynamic-layout
+                      name="Disable Search Raw Table"
+                      type="raw-table"
+                      :options="options"
+                      :data="data"
+                       class="w-full"
+                ></p-dynamic-layout>
+            `,
+            setup() {
+                return {
+                    data: mock.rawTable.data,
+                    options: {
+                        disable_search: true,
+                    },
+                }
+            }
+        }}
+    </Story>
+</Canvas>
+
+### Options: Headers
+"headers" option is used to specify the order of the table headers.
+```js
+{
+    headers: ['information', 'age', 'name', 'job']
+}
+```
+<Canvas>
+    <Story name="Headers">
+        {{
+            components: { PDynamicLayout },
+            template: `
+                <p-dynamic-layout
+                      name="Disable Search Raw Table"
+                      type="raw-table"
+                      :options="options"
+                      :data="data"
+                       class="w-full"
+                ></p-dynamic-layout>
+            `,
+            setup() {
+                return {
+                    data: mock.rawTable.data,
+                    options: {
+                        headers: ['information', 'age', 'name', 'job']
+                    },
+                }
+            }
+        }}
+    </Story>
+</Canvas>
+
+
 <br/>
 <br/>
 
diff --git a/src/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper.ts b/src/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper.ts
index 1959c6803..54358a34a 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper.ts
+++ b/src/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper.ts
@@ -6,6 +6,7 @@ import { getDynamicLayoutArgTypes } from '@/data-display/dynamic/dynamic-layout/
 export const getDynamicLayoutRawTableArgTypes = (): ArgTypes => {
     const argTypes = getDynamicLayoutArgTypes();
 
+    argTypes.options.defaultValue = mock.rawTable.options;
     argTypes.data.defaultValue = mock.rawTable.data;
 
     return {
diff --git a/src/data-display/dynamic/dynamic-layout/templates/raw/raw.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/raw/raw.stories.mdx
index e4f80a305..232a275d3 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/raw/raw.stories.mdx
+++ b/src/data-display/dynamic/dynamic-layout/templates/raw/raw.stories.mdx
@@ -42,9 +42,9 @@ export const Template = (args, { argTypes }) => ({
 | translation_id | O |
 | fields | X |
 | markdown | X |
-| layouts | X |
 | search | X |
 | disable_search | X |
+| headers | x |
 | layout | X |
 
 
diff --git a/src/data-display/dynamic/dynamic-layout/templates/simple-table/simple-table.stories.mdx b/src/data-display/dynamic/dynamic-layout/templates/simple-table/simple-table.stories.mdx
index c2293db4f..bff8301e0 100644
--- a/src/data-display/dynamic/dynamic-layout/templates/simple-table/simple-table.stories.mdx
+++ b/src/data-display/dynamic/dynamic-layout/templates/simple-table/simple-table.stories.mdx
@@ -45,9 +45,9 @@ export const Template = (args, { argTypes }) => ({
 | translation_id | O |
 | fields | O |
 | markdown | X |
-| layouts | X |
 | search | X |
 | disable_search | X |
+| headers | x |
 | layout | X |
 
 
diff --git a/src/data-display/dynamic/dynamic-layout/type/layout-schema.ts b/src/data-display/dynamic/dynamic-layout/type/layout-schema.ts
index 3d647cb96..e57ebda6b 100644
--- a/src/data-display/dynamic/dynamic-layout/type/layout-schema.ts
+++ b/src/data-display/dynamic/dynamic-layout/type/layout-schema.ts
@@ -51,6 +51,7 @@ export interface SimpleTableOptions extends CommonOptions {
 
 export interface RawTableOptions extends CommonOptions {
     disable_search?: boolean;
+    headers?: string[];
 }
 
 export interface TableOptions extends CommonOptions {