Skip to content

Commit

Permalink
feat(raw-table): add headers option to raw-table (#314)
Browse files Browse the repository at this point in the history 
* 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
  • Loading branch information
@sulmoJ
sulmoJ authored Feb 23, 2023
1 parent d997646 commit b13dc54
Show file tree
Hide file tree
Showing 13 changed files with 95 additions and 8 deletions.
4 changes: 4 additions & 0 deletions src/data-display/dynamic/dynamic-layout/mock.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -722,6 +722,10 @@ export default {
data: makeTableData(),
},
rawTable: {
options: {
headers: ['information', 'age', 'name', 'job'],
disable_search: false,
},
data: makeTableData(),
},
querySearchTable: {
Expand Down
2 changes: 1 addition & 1 deletion src/data-display/dynamic/dynamic-layout/templates/html/html.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion src/data-display/dynamic/dynamic-layout/templates/item/item.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |


Expand Down
1 change: 1 addition & 0 deletions src/data-display/dynamic/dynamic-layout/templates/list/list.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export const Template = (args, { argTypes }) => ({
| layouts | O |
| search | X |
| disable_search | X |
| headers | x |


## Supported Fetch Options
Expand Down
2 changes: 1 addition & 1 deletion src/data-display/dynamic/dynamic-layout/templates/markdown/markdown.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |


Expand Down
2 changes: 1 addition & 1 deletion src/data-display/dynamic/dynamic-layout/templates/popup/popup.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |


Expand Down
2 changes: 1 addition & 1 deletion ...amic/dynamic-layout/templates/query-search-table/query-search-table.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |


Expand Down
6 changes: 6 additions & 0 deletions src/data-display/dynamic/dynamic-layout/templates/raw-table/index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 [];
Expand Down
76 changes: 75 additions & 1 deletion src/data-display/dynamic/dynamic-layout/templates/raw-table/raw-table.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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()}/>
Expand Down Expand Up @@ -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 |


Expand Down Expand Up @@ -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/>

Expand Down
1 change: 1 addition & 0 deletions src/data-display/dynamic/dynamic-layout/templates/raw-table/story-helper.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
2 changes: 1 addition & 1 deletion src/data-display/dynamic/dynamic-layout/templates/raw/raw.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |


Expand Down
2 changes: 1 addition & 1 deletion ...-display/dynamic/dynamic-layout/templates/simple-table/simple-table.stories.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 |


Expand Down
1 change: 1 addition & 0 deletions src/data-display/dynamic/dynamic-layout/type/layout-schema.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,6 +51,7 @@ export interface SimpleTableOptions extends CommonOptions {

export interface RawTableOptions extends CommonOptions {
disable_search?: boolean;
headers?: string[];
}

export interface TableOptions extends CommonOptions {
Expand Down

0 comments on commit b13dc54

Please sign in to comment.