Afform GUI - Rename service from afAdmin to afGiu

[civicrm-core.git] / ext / afform / admin / ang / afGuiEditor / elements / afGuiContainer.component.js

// https://civicrm.org/licensing
(function(angular, $, _) {
  "use strict";

  angular.module('afGuiEditor').component('afGuiContainer', {
    templateUrl: '~/afGuiEditor/elements/afGuiContainer.html',
    bindings: {
      node: '<',
      join: '<',
      entityName: '<',
      deleteThis: '&'
    },
    require: {editor: '^^afGuiEditor'},
    controller: function($scope, crmApi4, dialogService, afGui) {
      var ts = $scope.ts = CRM.ts(),
        ctrl = this;

      this.$onInit = function() {
        if ((ctrl.node['#tag'] in afGui.meta.blocks) || ctrl.join) {
          initializeBlockContainer();
        }
      };

      $scope.isSelectedFieldset = function(entityName) {
        return entityName === ctrl.editor.getSelectedEntityName();
      };

      $scope.selectEntity = function() {
        if (ctrl.node['af-fieldset']) {
          ctrl.editor.selectEntity(ctrl.node['af-fieldset']);
        }
      };

      $scope.tags = {
        div: ts('Container'),
        fieldset: ts('Fieldset')
      };

      // Block settings
      var block = {};
      $scope.block = null;

      $scope.getSetChildren = function(val) {
        var collection = block.layout || (ctrl.node && ctrl.node['#children']);
        return arguments.length ? (collection = val) : collection;
      };

      $scope.isRepeatable = function() {
        return ctrl.node['af-fieldset'] || (block.directive && afGui.meta.blocks[block.directive].repeat) || ctrl.join;
      };

      $scope.toggleRepeat = function() {
        if ('af-repeat' in ctrl.node) {
          delete ctrl.node.max;
          delete ctrl.node.min;
          delete ctrl.node['af-repeat'];
          delete ctrl.node['add-icon'];
        } else {
          ctrl.node.min = '1';
          ctrl.node['af-repeat'] = ts('Add');
        }
      };

      $scope.getSetMin = function(val) {
        if (arguments.length) {
          if (ctrl.node.max && val > parseInt(ctrl.node.max, 10)) {
            ctrl.node.max = '' + val;
          }
          if (!val) {
            delete ctrl.node.min;
          }
          else {
            ctrl.node.min = '' + val;
          }
        }
        return ctrl.node.min ? parseInt(ctrl.node.min, 10) : null;
      };

      $scope.getSetMax = function(val) {
        if (arguments.length) {
          if (ctrl.node.min && val && val < parseInt(ctrl.node.min, 10)) {
            ctrl.node.min = '' + val;
          }
          if (typeof val !== 'number') {
            delete ctrl.node.max;
          }
          else {
            ctrl.node.max = '' + val;
          }
        }
        return ctrl.node.max ? parseInt(ctrl.node.max, 10) : null;
      };

      $scope.pickAddIcon = function() {
        afGui.pickIcon().then(function(val) {
          ctrl.node['add-icon'] = val;
        });
      };

      function getBlockNode() {
        return !ctrl.join ? ctrl.node : (ctrl.node['#children'] && ctrl.node['#children'].length === 1 ? ctrl.node['#children'][0] : null);
      }

      function setBlockDirective(directive) {
        if (ctrl.join) {
          ctrl.node['#children'] = [{'#tag': directive}];
        } else {
          delete ctrl.node['#children'];
          delete ctrl.node['class'];
          ctrl.node['#tag'] = directive;
        }
      }

      function overrideBlockContents(layout) {
        ctrl.node['#children'] = layout || [];
        if (!ctrl.join) {
          ctrl.node['#tag'] = 'div';
          ctrl.node['class'] = 'af-container';
        }
        block.layout = block.directive = null;
      }

      $scope.layouts = {
        'af-layout-rows': ts('Contents display as rows'),
        'af-layout-cols': ts('Contents are evenly-spaced columns'),
        'af-layout-inline': ts('Contents are arranged inline')
      };

      $scope.getLayout = function() {
        if (!ctrl.node) {
          return '';
        }
        return _.intersection(afGui.splitClass(ctrl.node['class']), _.keys($scope.layouts))[0] || 'af-layout-rows';
      };

      $scope.setLayout = function(val) {
        var classes = ['af-container'];
        if (val !== 'af-layout-rows') {
          classes.push(val);
        }
        afGui.modifyClasses(ctrl.node, _.keys($scope.layouts), classes);
      };

      $scope.selectBlockDirective = function() {
        if (block.directive) {
          block.layout = _.cloneDeep(afGui.meta.blocks[block.directive].layout);
          block.original = block.directive;
          setBlockDirective(block.directive);
        }
        else {
          overrideBlockContents(block.layout);
        }
      };

      function initializeBlockContainer() {

        // Cancel the below $watch expressions if already set
        _.each(block.listeners, function(deregister) {
          deregister();
        });

        block = $scope.block = {
          directive: null,
          layout: null,
          original: null,
          options: [],
          listeners: []
        };

        _.each(afGui.meta.blocks, function(blockInfo, directive) {
          if (directive === ctrl.node['#tag'] || blockInfo.join === ctrl.getFieldEntityType()) {
            block.options.push({
              id: directive,
              text: blockInfo.title
            });
          }
        });

        if (getBlockNode() && getBlockNode()['#tag'] in afGui.meta.blocks) {
          block.directive = block.original = getBlockNode()['#tag'];
          block.layout = _.cloneDeep(afGui.meta.blocks[block.directive].layout);
        }

        block.listeners.push($scope.$watch('block.layout', function (layout, oldVal) {
          if (block.directive && layout && layout !== oldVal && !angular.equals(layout, afGui.meta.blocks[block.directive].layout)) {
            overrideBlockContents(block.layout);
          }
        }, true));
      }

      $scope.saveBlock = function() {
        var options = CRM.utils.adjustDialogDefaults({
          width: '500px',
          height: '300px',
          autoOpen: false,
          title: ts('Save block')
        });
        var model = {
          title: '',
          name: null,
          layout: ctrl.node['#children']
        };
        if (ctrl.join) {
          model.join = ctrl.join;
        }
        if ($scope.block && $scope.block.original) {
          model.title = afGui.meta.blocks[$scope.block.original].title;
          model.name = afGui.meta.blocks[$scope.block.original].name;
          model.block = afGui.meta.blocks[$scope.block.original].block;
        }
        else {
          model.block = ctrl.container.getFieldEntityType() || '*';
        }
        dialogService.open('saveBlockDialog', '~/afGuiEditor/saveBlock.html', model, options)
          .then(function(block) {
            afGui.meta.blocks[block.directive_name] = block;
            setBlockDirective(block.directive_name);
            initializeBlockContainer();
          });
      };

      this.node = ctrl.node;

      this.getNodeType = function(node) {
        if (!node) {
          return null;
        }
        if (node['#tag'] === 'af-field') {
          return 'field';
        }
        if (node['af-fieldset']) {
          return 'fieldset';
        }
        if (node['af-join']) {
          return 'join';
        }
        if (node['#tag'] && node['#tag'] in afGui.meta.blocks) {
          return 'container';
        }
        var classes = afGui.splitClass(node['class']),
          types = ['af-container', 'af-text', 'af-button', 'af-markup'],
          type = _.intersection(types, classes);
        return type.length ? type[0].replace('af-', '') : null;
      };

      this.removeElement = function(element) {
        afGui.removeRecursive($scope.getSetChildren(), {$$hashKey: element.$$hashKey});
      };

      this.getEntityName = function() {
        return ctrl.entityName.split('-join-')[0];
      };

      // Returns the primary entity type for this container e.g. "Contact"
      this.getMainEntityType = function() {
        return ctrl.editor && ctrl.editor.getEntity(ctrl.getEntityName()).type;
      };

      // Returns the entity type for fields within this conainer (join entity type if this is a join, else the primary entity type)
      this.getFieldEntityType = function() {
        var joinType = ctrl.entityName.split('-join-');
        return joinType[1] || (ctrl.editor && ctrl.editor.getEntity(joinType[0]).type);
      };

    }
  });

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