Create Category search display

ang/crmSearchDisplayContactCat.js

@@ -0,0 +1,73 @@
+console.log(123);
+// see https://docs.civicrm.org/dev/en/latest/searchkit/displays/
+(function(angular, $, _) {
+  // Declare a list of dependencies.
+  angular.module('crmSearchDisplayContactCat', CRM.angRequires('crmSearchDisplayContactCat'));
+  // angular.module('crmContactcats').component();
+
+  // This is to be the display
+  // NOTE: the component name is {CamelCaseNameFromOptionValue}
+  // Standard seems to be to name crmSearchDisplay{YourName}
+  angular.module("crmSearchDisplayContactCat").component("crmSearchDisplayContactCat", {
+    templateUrl: "~/crmSearchDisplayContactCat/crmSearchDisplayContactCat.html",
+    bindings: {
+      apiEntity: '@',
+      search: '<',
+      display: '<',
+      apiParams: '<',
+      settings: '<',
+      filters: '<',
+      totalCount: '=?'
+    },
+    // controller: function($scope, $timeout, crmApi4, crmStatus, $document) {
+    controller: function($scope, $element, searchDisplayBaseTrait, searchDisplayTasksTrait) {
+      // Mix in required traits
+      ctrl = angular.extend(this, _.cloneDeep(searchDisplayBaseTrait), _.cloneDeep(searchDisplayTasksTrait));
+      console.log("hello display");
+      var ts = ($scope.ts = CRM.ts(null)),
+        ctrl = this;
+
+      // this.$onInit gets run after the this controller is called, and after the bindings have been applied.
+      this.$onInit = function() {
+        console.log("calling initializeDisplay");
+        this.initializeDisplay($scope, $element);
+      };
+    }
+  });
+
+  // This is to be the admin settings for the display
+  // NOTE: the component name is 'searchAdminDisplay'{CamelCaseValueFromOptionValue}
+  angular.module("crmSearchDisplayContactCat").component("searchAdminDisplayContactCat", {
+    templateUrl: "~/crmSearchDisplayContactCat/searchAdminDisplayContactCat.html",
+    bindings: {
+      display: '<',
+      apiEntity: '<',
+      apiParams: '<'
+    },
+    require: {
+      parent: '^crmSearchAdminDisplay'
+    },
+    controller: function($scope, searchMeta, crmUiHelp) {
+      console.log("hello admin");
+      let ctrl = this;
+      // var ts = ($scope.ts = CRM.ts(null)),
+      //   ctrl = this;
+      this.getColTypes = function() {
+        return ctrl.parent.colTypes;
+      };
+      // this.$onInit gets run after the this controller is called, and after the bindings have been applied.
+      this.$onInit = async function() {
+        if (!ctrl.display.settings) {
+          console.log("applying display.settings as was nonwl");
+          ctrl.display.settings = {
+            something: 'nothing',
+            limit: ctrl.parent.getDefaultLimit(),
+            sort: ctrl.parent.getDefaultSort(),
+            pager: {}
+          };
+        }
+        ctrl.parent.initColumns({});
+      };
+    }});
+
+})(angular, CRM.$, CRM._);