Skip to content

Commit

Permalink
Merge pull request #1025 from 3YOURMIND/kt-standard-table-add-boolean…
Browse files Browse the repository at this point in the history 
…-props-table-slot

add boolean props, add table slot, remove pageIndex and pageSize even…
  • Loading branch information
@Isokaeder
Isokaeder authored Nov 26, 2024
2 parents 7e4a367 + 8852225 commit 818f8ef
Show file tree
Hide file tree
Showing 8 changed files with 325 additions and 109 deletions.
308 changes: 226 additions & 82 deletions packages/documentation/pages/usage/components/standard-table.vue
View file
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

0 comments on commit 818f8ef

Please sign in to comment.