contactcats/ang/crmSearchDisplayContactCat.js

// see https://docs.civicrm.org/dev/en/latest/searchkit/displays/
(function(angular, $, _) {
  // Declare a list of dependencies.
  angular.module('crmSearchDisplayContactCat', CRM.angRequires('crmSearchDisplayContactCat'));

  // 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, crmApi4, searchDisplayBaseTrait, searchDisplayTasksTrait) {
      console.log('crmSearchDisplayContactCat controller called');
      // 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;

      ctrl.catDefs = null;
      ctrl.resultsVM = {};
      ctrl.n = 1;
      // this.$onInit gets run after the this controller is called, and after the bindings have been applied.
      this.$onInit = function() {
        console.log("calling initializeDisplay");
        // Grab all the category definitions
        crmApi4('ContactCategoryDefinition', 'get', {
          orderBy: {presentation_order: 'ASC'}
        }, 'id').then(r => { ctrl.catDefs = r; console.log('catDefs', ctrl.catDefs); ctrl.n++; });
        this.initializeDisplay($scope, $element);
      };

      $scope.$watch('$ctrl.results', () => { ctrl.n++; }, true);
      $scope.$watch('$ctrl.n', () => {
        console.log("watch n running");
        if (!ctrl.catDefs || !ctrl.results?.count) {
          console.log("...waiting for all the data we need");
          ctrl.ourData = {
            rows: [],
            count: 0,
          };
          return ctrl.n;
        }

        const rows = ctrl.results.map((row) => {
          const d = (new Date(row.data.activity_date_time.replace(' ', 'T'))).toLocaleString('UTC', {
            weekday: 'short',
            day: 'numeric',
            month: 'short',
            year: 'numeric',
          });
          return {
            contact_id: row.data['Activity_ActivityContact_Contact_01.id'],
            new: ctrl.catDefs[row.data['Category_changes.new_category_id']],
            when: d,
          };
        });
        ctrl.ourData = {rows, count:rows.length};
        console.log("new ourData", ctrl.ourData);
        return ctrl.n;
      });
    }
  });

  console.log('crmSearchDisplayContactCat registering admin bit');
  // 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 controller");
      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({});
      };
    }});
  console.log('crmSearchDisplayContactCat ends');

})(angular, CRM.$, CRM._);