Added filter actions to detailed list (sheet)

Author: Jurredr

example/src/main.ts

@@ -179,6 +179,17 @@ export const createMynahUI = (initialData?: MynahUIDataModel): MynahUI => {
                                         }]
                                     },
                                     list: [],
+                                    filterActions: [
+                                        {
+                                            id: 'cancel-mcp',
+                                            text: 'Cancel',
+                                        },
+                                        {
+                                            id: 'save-mcp',
+                                            text: 'Save',
+                                            status: 'primary'
+                                        }
+                                    ],
                                     filterOptions: [
                                         {
                                             type: 'select',

src/components/detailed-list/detailed-list.ts

@@ -23,6 +23,7 @@ export class DetailedListWrapper {
   render: ExtendedHTMLElement;
   private readonly detailedListItemGroupsContainer: ExtendedHTMLElement;
   private readonly filtersContainer: ExtendedHTMLElement;
+  private readonly filterActionsContainer: ExtendedHTMLElement;
   private readonly headerContainer: ExtendedHTMLElement;
   private readonly props: DetailedListWrapperProps;
   private detailedListItemsBlockData: Array<{
@@ -44,6 +45,11 @@ export class DetailedListWrapper {
       classNames: [ 'mynah-detailed-list-filters-wrapper' ],
       children: this.getFilters()
     });
+    this.filterActionsContainer = DomBuilder.getInstance().build({
+      type: 'div',
+      classNames: [ 'mynah-detailed-list-filter-actions-wrapper' ],
+      children: this.getFilterActions()
+    });
     this.detailedListItemGroupsContainer = DomBuilder.getInstance().build({
       type: 'div',
       classNames: [ 'mynah-detailed-list-item-groups-wrapper' ],
@@ -78,6 +84,7 @@ export class DetailedListWrapper {
         this.headerContainer,
         this.filtersContainer,
         this.detailedListItemGroupsContainer,
+        this.filterActionsContainer
       ]
     });
   }
@@ -106,6 +113,13 @@ export class DetailedListWrapper {
     return [ '' ];
   };
 
+  private readonly getFilterActions = (): ExtendedHTMLElement[] => {
+    return [ new ChatItemButtonsWrapper({
+      buttons: this.props.detailedList.filterActions ?? [],
+      // onActionClick: this.props.onActionClick ?? ((action) => {}),
+    }).render ];
+  };
+
   private readonly getDetailedListItemGroups = (): Array<ExtendedHTMLElement | string> => {
     const groups = this.props.detailedList.list?.map((detailedListGroup: DetailedListItemGroup) => {
       return DomBuilder.getInstance().build({
@@ -228,6 +242,13 @@ export class DetailedListWrapper {
       });
     }
 
+    if (detailedList.filterActions != null) {
+      this.props.detailedList.filterActions = detailedList.filterActions;
+      this.filterActionsContainer.update({
+        children: this.getFilterActions()
+      });
+    }
+
     if (detailedList.list != null) {
       this.detailedListItemsBlockData = [];
       this.detailedListItemGroupsContainer.clear();

src/static.ts

@@ -257,6 +257,7 @@ export enum ChatItemType {
 
 export interface DetailedList {
   filterOptions?: FilterOption[] | null;
+  filterActions?: ChatItemButton[];
   list?: DetailedListItemGroup[];
   header?: {
     title?: string;

src/styles/components/_detailed-list.scss

@@ -41,6 +41,9 @@
             gap: var(--mynah-sizing-3);
         }
     }
+    > .mynah-detailed-list-filter-actions-wrapper {
+        align-self: flex-end;
+    }
     > .mynah-detailed-list-item-groups-wrapper {
         flex: 1;
         display: flex;