#12826: Add new card layout support to the Resources Catalog - #12836
#12826: Add new card layout support to the Resources Catalog#12836dsuren1 wants to merge 4 commits into
Conversation
allyoucanmap
left a comment
allyoucanmap
left a comment
There was a problem hiding this comment.
Additional changes:
- The change name from list to table needs to be documented in the migration guide
- The default implementation should support all three types of layout, at the moment the new type is not visible. Please update the default configuration to support the new card layout
- Replace the cycle click with a drop down menu
- Replace the table icon with this new one table.zip
| column, | ||
| resource, | ||
| target, | ||
| showNoData = false, |
There was a problem hiding this comment.
Why we are introducing showNoData? this will prevent grid and list type to display the noDataLabelId, this is a regression
| storedParams | ||
| }); | ||
|
|
||
| const cardLayoutStyles = cardLayoutStylesProp ?? (isArray(metadataProp) ? [] : Object.keys(metadataProp || {})); |
There was a problem hiding this comment.
cardLayoutStylesProp already has a default, do we really need the fallback? The only case the fallback is needed is only when the cardLayoutStylesProp is passed explicitly as null
| }); | ||
| } | ||
|
|
||
| const mergedMetadata = isArray(metadata) ? metadata : { ...DEFAULT_METADATA, ...metadata }; |
There was a problem hiding this comment.
we should not merge metadata with the default one, this will not allow to remove an existing config, please remove this merge, if a user want to override metadata they need to update the whole metadata
|
|
||
| const content = renderEntryContent(); | ||
| const hasIcon = !isHtml && (entry.image?.value || entry.icon); | ||
| if (!content && !hasIcon && !column?.width) { |
There was a problem hiding this comment.
!content never catches empty arrays
| import HtmlRenderer from '../../../components/misc/HtmlRenderer'; | ||
| import { getTagColorVariables } from '../../../utils/ResourcesFiltersUtils'; | ||
| import { replaceResourcePaths, getResourceInfo, getResourceStatus } from '../../../utils/ResourcesUtils'; | ||
| import { CARD_LAYOUT_TYPES } from '../../../plugins/ResourcesCatalog/constants'; |
There was a problem hiding this comment.
We cannot import '../../../plugins/ResourcesCatalog/constants' inside the components folder, or the constant will be moved to utils or a local constants file in this folder is needed
| .ms-resource-card-img { | ||
| width: 220px; | ||
| min-width: 220px; | ||
| align-self: center; | ||
| border-radius: 2px; | ||
| margin: 4px; | ||
| height: 100%; | ||
| min-height: 130px; | ||
| } |
There was a problem hiding this comment.
Is it not clear if the thumbnail is enabled or not inside the list type, here I'm seeing style but from the default configuration it seems hidden by default. Is it possible to enable thumbnail for list view?
2 participants
Description
This PR adds a new card layout support to Resources Catalog.
listtotablelistPlease check if the PR fulfills these requirements
What kind of change does this PR introduce? (check one with "x", remove the others)
Issue
What is the current behavior?
What is the new behavior?
The new configurations supported are
cardLayoutStyles- array of card layout styles to support/show. Default is['grid', 'table']hideThumbnail- if true or{ grid: false, list: true }hides the thumbnail on the card for all or specific layout stylesmetadata.list- new layout support for resource catalogWith description
Sample cfg
{ "metadata": { "list": [ { "path": "name", "target": "header" }, { "path": "creator", "target": "footer", "filter": "filter{creator.in}", "icon": { "glyph": "user" }, "labelId": "resourcesCatalog.columnCreatedBy", "noDataLabelId": "resourcesCatalog.emptyUnknown", "disableIf": "{!state('userrole')}" }, { "path": "tags", "filter": "filter{tag.in}", "itemValue": "name", "itemColor": "color", "type": "tag", "noDataLabelId": "resourcesCatalog.emptyNA", "labelId": "resourcesCatalog.columnTags" }, { "path": "description", "target": "description" }, { "items": [ { "type": "text", "labelId": "resourcesCatalog.columnCreated" }, { "path": "creation", "type": "date", "format": "MMMM D, YYYY" } ] }, { "items": [ { "type": "text", "labelId": "Edited by" }, { "path": "editor", "filter": "filter{creator.in}" }, { "icon": { "glyph": "user" } } ] } ] } }Breaking change
Does this PR introduce a breaking change? (check one with "x", remove the other)
Other useful information