Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add boolean props, add table slot, remove pageIndex and pageSize even… #1025

Merged
merged 1 commit into from
Nov 26, 2024
Merged

add boolean props, add table slot, remove pageIndex and pageSize even… #1025

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
308 changes: 226 additions & 82 deletions packages/documentation/pages/usage/components/standard-table.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,35 +2,114 @@
<div>
<ComponentInfo v-bind="{ component }" />

<KtStandardTable id="example-local-data" title="Local Pagination">
<template #header-actions>
<KtButton label="Some Action" />
</template>
<template #controls-actions>
<KtButton label="Some Action" />
</template>
<template #info-actions>
<KtButton label="Some Action" />
</template>
</KtStandardTable>
<KtStandardTable id="example-local-data" title="Title" />

<br /><br />

<KtStandardTable
id="example-remote-data"
title="Remote Pagination"
@update:dataFetchDependencies="fetchData"
>
<template #header-actions>
<KtButton label="Some Action" />
</template>
<template #controls-actions>
<KtButton label="Some Action" />
</template>
<template #info-actions>
<KtButton label="Some Action" />
</template>
</KtStandardTable>
<KtI18nContext :locale="settings.locale">
<KtStandardTable
id="example-remote-data"
:options="options"
:title="settings.title"
@update:dataFetchDependencies="fetchData"
>
<template v-if="settings.slots.headerActionsSlot" #header-actions>
<KtButton label="Some Action" />
</template>
<template v-if="settings.slots.controlsActionsSlot" #controls-actions>
<KtButton label="Some Action" />
</template>
<template v-if="settings.slots.infoActionsSlot" #info-actions>
<KtButton label="Some Action" />
</template>
<template v-if="settings.slots.tableSlot" #table>
CUSTOM CONTENT
</template>
</KtStandardTable>
</KtI18nContext>

<br />

<KtForm v-model="settings" size="small">
<div class="wrapper">
<div>
<h4>Settings</h4>
<KtFieldSingleSelect
formKey="locale"
helpText="Can be set via KtI18nContext"
hideClear
label="Language"
leftIcon="global"
:options="[
{ label: 'German (de-DE)', value: 'de-DE' },
{ label: 'English (en-US)', value: 'en-US' },
{ label: 'Spanish (es-ES)', value: 'es-ES' },
{ label: 'French (fr-FR)', value: 'fr-FR' },
{ label: 'Japanese (ja-JP)', value: 'ja-JP' },
]"
/>
<KtFieldToggleGroup
formKey="booleanFlags"
helpText="Can be set via hideControls prop"
isOptional
label="Boolean Flags"
:options="[
{ key: 'hideColumns', label: 'Hide columns' },
{ key: 'hideFilters', label: 'Hide filters' },
{ key: 'hideSearch', label: 'Hide search' },
]"
type="switch"
/>
<KtFieldToggle
formKey="showInlineFilters"
helpText="Must set via filter definition: `displayInline: true`"
isOptional
label="Use inline filters"
type="switch"
/>
<KtFieldToggleGroup
formKey="slots"
isOptional
label="Slots"
:options="[
{ key: 'headerActionsSlot', label: 'Use header actions slot' },
{
key: 'controlsActionsSlot',
label: 'Use controls actions slot',
},
{ key: 'infoActionsSlot', label: 'Use info actions slot' },
{ key: 'tableSlot', label: 'Use table slot' },
]"
type="switch"
/>
<KtFieldSingleSelect
formKey="columnsPopoverSize"
helpText="Can be set via popoversSize prop"
hideClear
isOptional
label="Columns popover size"
:options="sizeOptions"
/>
<KtFieldSingleSelect
formKey="filtersPopoverSize"
helpText="Can be set via popoversSize prop"
hideClear
isOptional
label="Filters popover size"
:options="sizeOptions"
/>
</div>
<div>
<h4>Texts</h4>
<KtFieldText formKey="title" isOptional label="title" />
<KtFieldText
formKey="searchPlaceholder"
isOptional
label="searchPlaceholder"
/>
</div>
</div>
</KtForm>
</div>
</template>

Expand Down Expand Up @@ -169,7 +248,45 @@ export default defineComponent({
const recipesData = ref<RecipeRow[]>([])
const recipesRowCount = ref(0)

const filters = ref<Kotti.StandardTable.Filter[]>([
const settings = ref<{
booleanFlags: {
hideColumns: Kotti.FieldToggle.Value
hideFilters: Kotti.FieldToggle.Value
hideSearch: Kotti.FieldToggle.Value
}
columnsPopoverSize: Kotti.FieldSingleSelect.Value
filtersPopoverSize: Kotti.FieldSingleSelect.Value
locale: Kotti.I18n.SupportedLanguages
searchPlaceholder?: Kotti.FieldText.Value
showInlineFilters: Kotti.FieldToggle.Value
slots: {
controlsActionsSlot: Kotti.FieldToggle.Value
headerActionsSlot: Kotti.FieldToggle.Value
infoActionsSlot: Kotti.FieldToggle.Value
tableSlot: Kotti.FieldToggle.Value
}
title: Kotti.FieldText.Value
}>({
booleanFlags: {
hideColumns: false,
hideFilters: false,
hideSearch: false,
},
columnsPopoverSize: Kotti.Popover.Size.MEDIUM,
filtersPopoverSize: Kotti.Popover.Size.MEDIUM,
locale: 'en-US',
searchPlaceholder: undefined,
showInlineFilters: false,
slots: {
controlsActionsSlot: false,
headerActionsSlot: false,
infoActionsSlot: false,
tableSlot: false,
},
title: 'Title',
})

const filters = computed<Kotti.StandardTable.Filter[]>(() => [
{
dataTest: 'boolean-filter',
id: 'booleanFilter',
Expand Down Expand Up @@ -245,36 +362,71 @@ export default defineComponent({
type: Kotti.StandardTable.FilterType.NUMBER_RANGE,
unit: 'Kg',
},
{
dataTest: 'single-select-filter-inline',
displayInline: true,
id: 'singleSelectFilterInline',
isUnsorted: true,
label: 'Single select filter Inline',
options: [
{
dataTest: 'opt-1',
isDisabled: false,
label: 'Option 1',
value: 101,
},
{
dataTest: 'opt-2',
isDisabled: false,
label: 'Option 2',
value: 102,
},
{
dataTest: 'opt-3',
isDisabled: false,
label: 'Option 3',
value: 103,
},
],
type: Kotti.StandardTable.FilterType.SINGLE_SELECT,
},
...(settings.value.showInlineFilters
? [
{
dataTest: 'single-select-filter-inline',
displayInline: true,
id: 'singleSelectFilterInline',
isUnsorted: true,
label: 'Single select filter Inline',
options: [
{
dataTest: 'opt-1',
isDisabled: false,
label: 'Option 1',
value: 101,
},
{
dataTest: 'opt-2',
isDisabled: false,
label: 'Option 2',
value: 102,
},
{
dataTest: 'opt-3',
isDisabled: false,
label: 'Option 3',
value: 103,
},
],
type: Kotti.StandardTable.FilterType.SINGLE_SELECT,
},
]
: []),
])

useKottiStandardTable<TodoRow>(
computed(() => ({
columns: todosColumns.value,
data: todosData.value,
id: 'example-local-data',
pagination: {
pageSize: 5,
// eslint-disable-next-line no-magic-numbers
pageSizeOptions: [5, 10, 15, 20],
type: Kotti.StandardTable.PaginationType.LOCAL,
},
})),
)

useKottiStandardTable<RecipeRow>(
computed(() => ({
columns: recipesColumns.value,
data: recipesData.value,
filters: filters.value,
id: 'example-remote-data',
isLoading: isLoadingRecipes.value,
pagination: {
pageSize: 5,
// eslint-disable-next-line no-magic-numbers
pageSizeOptions: [5, 10, 15, 30, 50, 100],
rowCount: recipesRowCount.value,
type: Kotti.StandardTable.PaginationType.REMOTE,
},
})),
)

return {
component: KtStandardTable,
fetchData: async (
Expand Down Expand Up @@ -317,36 +469,28 @@ export default defineComponent({
}
},
isLoadingRecipes,
localStandardTableHook: useKottiStandardTable<TodoRow>(
computed(() => ({
columns: todosColumns.value,
data: todosData.value,
id: 'example-local-data',
pagination: {
pageSize: 5,
// eslint-disable-next-line no-magic-numbers
pageSizeOptions: [5, 10, 15, 20],
type: Kotti.StandardTable.PaginationType.LOCAL,
},
})),
),
remoteStandardTableHook: useKottiStandardTable<RecipeRow>(
computed(() => ({
columns: recipesColumns.value,
data: recipesData.value,
filters: filters.value,
id: 'example-remote-data',
isLoading: isLoadingRecipes.value,
pagination: {
pageSize: 5,
// eslint-disable-next-line no-magic-numbers
pageSizeOptions: [5, 10, 15, 30, 50, 100],
rowCount: recipesRowCount.value,
type: Kotti.StandardTable.PaginationType.REMOTE,
},
options: computed(() => ({
hideControls: {
columns: settings.value.booleanFlags.hideColumns,
filters: settings.value.booleanFlags.hideFilters,
search: settings.value.booleanFlags.hideSearch,
},
popoversSize: {
columns: settings.value.columnsPopoverSize,
filters: settings.value.filtersPopoverSize,
},
searchPlaceholder: settings.value.searchPlaceholder,
})),
settings,
sizeOptions: computed((): Kotti.FieldSingleSelect.Props['options'] =>
Object.entries(Kotti.Popover.Size).map(([key, value]) => ({
label: `Kotti.Popover.Size.${key} (${value})`,
value,
})),
),
}
},
})
</script>

<style src="../../../styles/form-fields.scss" lang="scss" scoped />
Loading