Skip to content

Commit

Permalink
Add possibility to save listing configurations (#738)
Browse files Browse the repository at this point in the history
* Add possibility to save configurations

* Add possibility to save listing configurations

* Automatic frontend build

---------

Co-authored-by: vin0401 <[email protected]>
  • Loading branch information
vin0401 and vin0401 authored Nov 25, 2024
1 parent d449a88 commit cf23d72
Show file tree
Hide file tree
Showing 47 changed files with 2,270 additions and 1,876 deletions.
2 changes: 1 addition & 1 deletion assets/build/api/docs.jsonopenapi.json

Large diffs are not rendered by default.

20 changes: 20 additions & 0 deletions assets/js/src/core/app/api/pimcore/tags.ts
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,9 @@ export const tagNames = {
ASSET: 'ASSET',
ASSET_DETAIL: 'ASSET_DETAIL',
ASSET_TREE: 'ASSET_TREE',
ASSET_GRID_CONFIGURATION: 'ASSET_GRID_CONFIGURATION',
ASSET_GRID_CONFIGURATION_LIST: 'ASSET_GRID_CONFIGURATION_LIST',
ASSET_GRID_CONFIGURATION_DETAIL: 'ASSET_GRID_CONFIGURATION_DETAIL',
DATA_OBJECT: 'DATA_OBJECT',
DATA_OBJECT_DETAIL: 'DATA_OBJECT_DETAIL',
DATA_OBJECT_TREE: 'DATA_OBJECT_TREE',
Expand All @@ -42,6 +45,20 @@ export const providingTags = {
ASSET_TREE: () => [tagNames.ASSET, tagNames.ASSET_TREE],
ASSET_TREE_ID: (id: number) => [tagNames.ASSET, tagNames.ASSET_TREE, { type: tagNames.ASSET_TREE, id }],
ASSET_VERSIONS: (id: number) => [{ type: tagNames.ASSET_DETAIL, id }, tagNames.VERSIONS],
ASSET_GRID_CONFIGURATION: () => [tagNames.ASSET_GRID_CONFIGURATION],
ASSET_GRID_CONFIGURATION_LIST: (folderId: number) => [
tagNames.ASSET,
{ type: tagNames.ASSET_DETAIL, id: folderId },
tagNames.ASSET_GRID_CONFIGURATION,
{ type: tagNames.ASSET_GRID_CONFIGURATION_LIST, id: folderId }
],
ASSET_GRID_CONFIGURATION_DETAIL: (folderId?: number, configurationId?: number) => [
tagNames.ASSET,
{ type: tagNames.ASSET_DETAIL, id: folderId },
tagNames.ASSET_GRID_CONFIGURATION,
{ type: tagNames.ASSET_GRID_CONFIGURATION_DETAIL, id: `${folderId}-${configurationId}` },
{ type: tagNames.ASSET_GRID_CONFIGURATION_DETAIL, id: `-${configurationId}` }
],
DATA_OBJECT_DETAIL: () => [tagNames.DATA_OBJECT, tagNames.DATA_OBJECT_DETAIL],
DATA_OBJECT_DETAIL_ID: (id: number) => [tagNames.DATA_OBJECT, { type: tagNames.DATA_OBJECT_DETAIL, id }],
DATA_OBJECT_TREE: () => [tagNames.DATA_OBJECT, tagNames.DATA_OBJECT_TREE],
Expand All @@ -63,6 +80,9 @@ export const invalidatingTags = {
ASSET_TREE: () => [tagNames.ASSET_TREE],
ASSET_TREE_ID: (id: number) => [{ type: tagNames.ASSET_TREE, id }],
ASSET_VERSIONS: (id: number) => [{ type: tagNames.ASSET_DETAIL, id }],
ASSET_GRID_CONFIGURATION: () => [tagNames.ASSET_GRID_CONFIGURATION],
ASSET_GRID_CONFIGURATION_DETAIL: (folderId?: number, configurationId?: number) => [{ type: tagNames.ASSET_GRID_CONFIGURATION_DETAIL, id: `${folderId}-${configurationId}` }, { type: tagNames.ASSET_GRID_CONFIGURATION_DETAIL, id: `${folderId}-${configurationId}` }],
ASSET_GRID_CONFIGURATION_LIST: (folderId: number) => [{ type: tagNames.ASSET_GRID_CONFIGURATION_LIST, id: folderId }],
DATA_OBJECT: () => [tagNames.DATA_OBJECT],
DATA_OBJECT_DETAIL: () => [tagNames.DATA_OBJECT_DETAIL],
DATA_OBJECT_DETAIL_ID: (id: number) => [{ type: tagNames.DATA_OBJECT_DETAIL, id }],
Expand Down
3 changes: 3 additions & 0 deletions assets/js/src/core/assets/icons/edit-03.inline.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion assets/js/src/core/assets/icons/filter-outlined.inline.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions assets/js/src/core/assets/icons/save-01.inline.svg
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
34 changes: 33 additions & 1 deletion assets/js/src/core/modules/asset/asset-api-slice-enhanced.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,6 +47,34 @@ const api = baseApi.enhanceEndpoints({

assetAdd: {
invalidatesTags: (result, error, args) => invalidatingTags.ASSET_TREE_ID(args.parentId)
},

assetGetGrid: {
invalidatesTags: []
},

assetGetGridConfigurationByFolderId: {
providesTags: (result, error, args) => providingTags.ASSET_GRID_CONFIGURATION_DETAIL(args.folderId, args.configurationId)
},

assetSaveGridConfiguration: {
invalidatesTags: (result, error, args) => invalidatingTags.ASSET_GRID_CONFIGURATION_LIST(args.body.folderId)
},

assetSetGridConfigurationAsFavorite: {
invalidatesTags: (result, error, args) => invalidatingTags.ASSET_GRID_CONFIGURATION_LIST(args.folderId)
},

assetUpdateGridConfiguration: {
invalidatesTags: (result, error, args) => invalidatingTags.ASSET_GRID_CONFIGURATION_DETAIL(undefined, args.configurationId)
},

assetDeleteGridConfigurationByConfigurationId: {
invalidatesTags: (result, error, args) => [...invalidatingTags.ASSET_GRID_CONFIGURATION_DETAIL(args.folderId), ...invalidatingTags.ASSET_GRID_CONFIGURATION_LIST(args.folderId)]
},

assetGetSavedGridConfigurations: {
providesTags: (result, error, args) => providingTags.ASSET_GRID_CONFIGURATION_LIST(args.folderId)
}
}
})
Expand All @@ -69,7 +97,11 @@ export const {
useAssetExportCsvAssetMutation,
useAssetExportCsvFolderMutation,
useAssetGetSavedGridConfigurationsQuery,
useAssetSaveGridConfigurationMutation
useAssetSaveGridConfigurationMutation,
useAssetSetGridConfigurationAsFavoriteMutation,
useAssetUpdateGridConfigurationMutation,
useAssetDeleteGridConfigurationByConfigurationIdMutation,
useAssetGetGridConfigurationByFolderIdQuery
} = api

export { api }
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,9 @@ import {
ListPageContext,
ListPageSizeContext,
ListSelectedRowsContext,
ListSortingContext
ListSortingContext,
type IListSelectedGridConfigIdContext,
ListSelectedGridConfigIdContext
} from '../list-provider'
import { type GridColumnConfiguration } from '@Pimcore/modules/asset/asset-api-slice-enhanced'
import type { DropdownMenuProps } from '@Pimcore/components/dropdown/dropdown'
Expand Down Expand Up @@ -226,3 +228,14 @@ export const useListData = (): UseListDataHookReturn => {
data
}
}

export interface UseListSelectedConfigIdHookReturn extends IListSelectedGridConfigIdContext {}

export const useListSelectedConfigId = (): UseListSelectedConfigIdHookReturn => {
const { selectedGridConfigId, setSelectedGridConfigId } = useContext(ListSelectedGridConfigIdContext)

return {
selectedGridConfigId,
setSelectedGridConfigId
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,8 @@ import {
useListGridConfig,
useListSelectedRows,
useListSorting,
useListGridAvailableColumns
useListGridAvailableColumns,
useListSelectedConfigId
} from './hooks/use-list'
import { useAppDispatch } from '@Pimcore/app/store'
import { type GridProps, type OnUpdateCellDataEvent } from '@Pimcore/types/components/types'
Expand All @@ -51,6 +52,7 @@ export const ListContainerInner = (): React.JSX.Element => {
const { columns, setGridColumns } = useListColumns()
const { setGridConfig } = useListGridConfig()
const { availableColumns, setAvailableColumns } = useListGridAvailableColumns()
const { selectedGridConfigId } = useListSelectedConfigId()
const assetId = assetContext.id
const [data, setData] = useState<AssetGetGridApiResponse | undefined>()
const [fetchListing, fetchListingResult] = useAssetGetGridMutation()
Expand Down Expand Up @@ -83,7 +85,7 @@ export const ListContainerInner = (): React.JSX.Element => {
useEffect(() => {
async function fetchGridConfiguration (): Promise<void> {
const availableGridConfigPromise = dispatch(api.endpoints.assetGetAvailableGridColumns.initiate())
const initialGridConfigPromise = dispatch(api.endpoints.assetGetGridConfigurationByFolderId.initiate({ folderId: assetId }))
const initialGridConfigPromise = dispatch(api.endpoints.assetGetGridConfigurationByFolderId.initiate({ folderId: assetId, configurationId: selectedGridConfigId }))

Promise.all([availableGridConfigPromise, initialGridConfigPromise]).then(([availableGridConfig, initialGridConfig]) => {
setAvailableColumns(availableGridConfig.data?.columns)
Expand All @@ -100,6 +102,8 @@ export const ListContainerInner = (): React.JSX.Element => {
})

setGridColumns(initialColumns)
availableGridConfigPromise.unsubscribe()
initialGridConfigPromise.unsubscribe()
}).then(() => {
setIsLoading(false)
}).catch((error) => {
Expand All @@ -110,7 +114,7 @@ export const ListContainerInner = (): React.JSX.Element => {
fetchGridConfiguration().catch((error) => {
console.error(error)
})
}, [])
}, [selectedGridConfigId])

const updateData = (dataUpdate: AssetGetGridApiResponse | undefined = undefined): void => {
setDataPatches((currentDataPatches) => {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -250,6 +250,30 @@ export const ListDataProvider = ({ children, data }: ListDataProviderProps): Rea
), [internalData, children])
}

export interface IListSelectedGridConfigIdContext {
selectedGridConfigId: number | undefined
setSelectedGridConfigId: React.Dispatch<React.SetStateAction<number | undefined>>
}

export const ListSelectedGridConfigIdContext = createContext<IListSelectedGridConfigIdContext>({
selectedGridConfigId: undefined,
setSelectedGridConfigId: () => {}
})

export interface ListSelectedGridConfigIdProviderProps {
children: React.ReactNode
}

export const ListSelectedGridConfigIdProvider = ({ children }: ListSelectedGridConfigIdProviderProps): React.JSX.Element => {
const [selectedGridConfigId, setSelectedGridConfigId] = useState<number | undefined>(undefined)

return useMemo(() => (
<ListSelectedGridConfigIdContext.Provider value={ { selectedGridConfigId, setSelectedGridConfigId } }>
{children}
</ListSelectedGridConfigIdContext.Provider>
), [selectedGridConfigId, children])
}

export interface ListProviderProps extends ICommonListProviderProps {}

export const ListProvider = ({ children }: ListProviderProps): React.JSX.Element => {
Expand All @@ -262,7 +286,9 @@ export const ListProvider = ({ children }: ListProviderProps): React.JSX.Element
<ListSelectedRowsProvider>
<ListSortingProvider>
<ListGridAvailableColumnsProvider>
{children}
<ListSelectedGridConfigIdProvider>
{children}
</ListSelectedGridConfigIdProvider>
</ListGridAvailableColumnsProvider>
</ListSortingProvider>
</ListSelectedRowsProvider>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Space } from '@Pimcore/components/space/space'
import { Checkbox, Flex, Input } from 'antd'
import { Form, type FormProps } from '@Pimcore/components/form/form'
import { Switch } from '@Pimcore/components/switch/switch'
import React, { useState } from 'react'
import React, { useEffect, useState } from 'react'
import { Text } from '@Pimcore/components/text/text'

export interface SaveFormProps extends FormProps {}
Expand All @@ -31,6 +31,10 @@ export const defaultValues = {
export const SaveForm = (props: SaveFormProps): React.JSX.Element => {
const [isSharedGlobally, setIsSharedGlobally] = useState(props.initialValues?.shareGlobally ?? defaultValues.shareGlobally)

useEffect(() => {
props.form?.resetFields()
}, [])

const onValuesChange = (changedValues: any, values: any): void => {
props.onValuesChange?.(changedValues, values)

Expand All @@ -56,6 +60,7 @@ export const SaveForm = (props: SaveFormProps): React.JSX.Element => {
<Form.Item
label="Description"
name="description"
rules={ [{ required: true, message: 'Please provide a description' }] }
>
<Input.TextArea />
</Form.Item>
Expand Down
Loading

0 comments on commit cf23d72

Please sign in to comment.