Allow the operation-list group by tag to be enabled by default (#353)

Author: j12n

src/components/operations/operation-list/ko/operationListEditor.html

@@ -6,6 +6,13 @@
         </label>
     </div>
 
+    <div class="form-group">
+        <label for="defaultGroupByTagToEnabled" class="form-label">
+            <input type="checkbox" id="defaultGroupByTagToEnabled" name="defaultGroupByTagToEnabled" data-bind="checked: defaultGroupByTagToEnabled" />
+            Default Group by tag to enabled
+        </label>
+    </div>
+
     <div class="form-group">
         <label class="form-label">
             Link to operation details page

src/components/operations/operation-list/ko/operationListEditor.ts

@@ -11,11 +11,13 @@ import { HyperlinkModel } from "@paperbits/common/permalinks";
 })
 export class OperationListEditor {
     public readonly allowSelection: ko.Observable<boolean>;
+    public readonly defaultGroupByTagToEnabled: ko.Observable<boolean>;
     public readonly hyperlink: ko.Observable<HyperlinkModel>;
     public readonly hyperlinkTitle: ko.Computed<string>;
 
     constructor() {
         this.allowSelection = ko.observable(false);
+        this.defaultGroupByTagToEnabled = ko.observable(false);
         this.hyperlink = ko.observable();
         this.hyperlinkTitle = ko.computed<string>(() => this.hyperlink() ? this.hyperlink().title : "Add a link...");
     }
@@ -29,13 +31,16 @@ export class OperationListEditor {
     @OnMounted()
     public async initialize(): Promise<void> {
         this.allowSelection(this.model.allowSelection);
+        this.defaultGroupByTagToEnabled(this.model.defaultGroupByTagToEnabled);
         this.hyperlink(this.model.detailsPageHyperlink);
 
         this.allowSelection.subscribe(this.applyChanges);
+        this.defaultGroupByTagToEnabled.subscribe(this.applyChanges);
     }
 
     private applyChanges(): void {
         this.model.allowSelection = this.allowSelection();
+        this.model.defaultGroupByTagToEnabled = this.defaultGroupByTagToEnabled();
         this.model.detailsPageHyperlink = this.hyperlink();
         this.onChange(this.model);
     }

src/components/operations/operation-list/ko/operationListViewModelBinder.ts

@@ -14,6 +14,7 @@ export class OperationListViewModelBinder implements ViewModelBinder<OperationLi
 
         viewModel.runtimeConfig(JSON.stringify({
             allowSelection: model.allowSelection,
+            defaultGroupByTagToEnabled: model.defaultGroupByTagToEnabled,
             detailsPageUrl: model.detailsPageHyperlink
                 ? model.detailsPageHyperlink.href
                 : undefined

src/components/operations/operation-list/ko/runtime/operation-list.ts

@@ -44,6 +44,7 @@ export class OperationList {
         this.selectedOperationName = ko.observable().extend(<any>{ acceptChange: this.allowSelection });
         this.working = ko.observable(false);
         this.groupByTag = ko.observable(false);
+        this.defaultGroupByTagToEnabled = ko.observable(false);
         this.pattern = ko.observable();
         this.pageNumber = ko.observable(1);
         this.hasNextPage = ko.observable();
@@ -54,6 +55,9 @@ export class OperationList {
     @Param()
     public allowSelection: ko.Observable<boolean>;
 
+    @Param()
+    public defaultGroupByTagToEnabled: ko.Observable<boolean>;
+
     @Param()
     public detailsPageUrl: ko.Observable<string>;
 
@@ -69,6 +73,8 @@ export class OperationList {
             return;
         }
 
+        this.groupByTag(this.defaultGroupByTagToEnabled());
+
         await this.loadOperations();
 
         this.pattern

src/components/operations/operation-list/operationListContract.ts

@@ -10,6 +10,11 @@ export interface OperationListContract extends Contract {
      */
     allowSelection: boolean;
 
+    /**
+     * Default GroupByTag to enabled.
+     */
+    defaultGroupByTagToEnabled?: boolean;
+
     /**
      * Link to a page that contains operation details.
      */

src/components/operations/operation-list/operationListModel.ts

@@ -6,6 +6,11 @@ export class OperationListModel {
      */
     public allowSelection: boolean;
 
+    /**
+     * Default GroupByTag to enabled.
+     */
+    public defaultGroupByTagToEnabled: boolean;
+
     /**
      * Link to a page that contains operation details.
      */

src/components/operations/operation-list/operationListModelBinder.ts

@@ -20,6 +20,7 @@ export class OperationListModelBinder implements IModelBinder<OperationListModel
         const model = new OperationListModel();
 
         model.allowSelection = contract.allowSelection;
+        model.defaultGroupByTagToEnabled = contract.defaultGroupByTagToEnabled === true;
 
         if (contract.detailsPageHyperlink) {
             model.detailsPageHyperlink = await this.permalinkResolver.getHyperlinkFromConfig(contract.detailsPageHyperlink);
@@ -32,6 +33,7 @@ export class OperationListModelBinder implements IModelBinder<OperationListModel
         const contract: OperationListContract = {
             type: "operationList",
             allowSelection: model.allowSelection,
+            defaultGroupByTagToEnabled: model.defaultGroupByTagToEnabled,
             detailsPageHyperlink: model.detailsPageHyperlink
                 ? {
                     target: model.detailsPageHyperlink.target,