A carousel is a representation of actions cards, with an optional image card and a title.
Actions for a carousel are represented by an ActionsCollection
.
Since these collections of actions aren't necessarily rendered via a carousel, the ActionsCollection
DTO is independent of front end concerns.
type Action = {
// ...however it's defined now
}
type ActionsCollectionId = UUID
type ActionsCollection = {
actionsCollectionId: ActionsCollectionId;
actions: Action[];
}
For private beta we will be displaying actions carousels in one place, and the order of carousels within that page should be customizable.
Because the order of carousels within a page is specifically a front end concern, note the terminology shift.
Additionally, the carousel rendering itself also includes an optional image card at a certain position within the list of actions.
type Carousel = {
actionsCollection: ActionsCollection;
title: string;
imageCardSrc: Url;
imageCardRank: number; // Actions within ActionsCollection is an arry. The image card needs to fit into that array, bumping in at position `imageCardRank`.
}
A query is needed to return one or more carousels. For private beta, only one such query needs to be implemented - that for the actions management page.
This query must be accompanied with the customer ID, needed for the "roadmap-actions" collection.
function findCarousels(context: CarouselContext): Carousel[] {
// ...
}
const actionMgmtCarouselData = findCarousels({contextName: "action-management-home"});
actionMgmtCarouselData = [
{
title: "Roadmap Actions",
imageCardSrc: "/a/b/c.svg",
imageCardRank: 0,
actionsCollection: {
actionsCollectionId: "xyz321",
actions: [
{
actionId: 2,
actionTitle: "Print less",
// ...
},
{
actionId: 12,
actionTitle: "Cycle to work",
// ...
}
]}
},
{
title: "High Impact High Priority Actions",
imageCardSrc: "/d/e/f.svg",
imageCardRank: 2,
actionsCollection: {
actionsCollectionId: "abc-123",
actions: [
{
actionId: 44,
actionTitle: "Save trees",
// ...
},
{
actionId: 9,
actionTitle: "Use public transport",
// ...
}
]}
},
{
title: "High Priority Actions",
// ...
},,
{
title: "High Impact Actions",
// ...
},
]
Later there be many contexts in which carousels appear, with an example of their context definition:
type ActionRelatedContext = {
subjectAction: Action; // or I guess just an action id
contextName: string; // e.g. "related-actions"
}
type CustomerRelatedContext = {
// There's no need to explicitly pass the customer ID as a param, because it's in the headers.
contextName: string; // e.g. "action-management-home", "roadmap-actions", "dashboard"
}
type GlobalContext = "new-actions" | "etc...";
type Context = GlobalContext | ActionRelatedContext | CustomerRelatedContext;
For private beta we need only one context - that for the actions management page.