$loader = new \Civi\Angular\AngularLoader();
$loader->setModules([$module, 'afformStandalone']);
$loader->setPageName(implode('/', $pagePath));
- $loader->useApp();
+ $loader->useApp([
+ 'file' => 'CRM/Afform/Page/AfformBase.tpl',
+ ]);
$loader->getRes()->addSetting([
'afform' => [
'open' => _afform_angular_module_name($pageArgs['afform'], 'dash'),
},
link: function($scope, $el, $attr, afModelListCtrl) {
$scope.afModelListCtrl = afModelListCtrl;
- // $scope.$watch('afName', function(newValue){
- // // $scope.myOptions = newValue;
- // $scope.modelDefn = afModelListCtrl.getEntity(newValue);
- // console.log('Lookup entity', newValue, $scope.modelDefn);
- // });
+ // This is faster than waiting for each field directive to register itself
+ $('af-field', $el).each(function() {
+ afModelListCtrl.registerField($scope.afName, $(this).attr('field-name'))
+ });
},
controller: function($scope){
this.getDefn = function getDefn() {
return $scope.afModelListCtrl.getEntity($scope.afName);
// return $scope.modelDefn;
+ };
+ this.getData = function getData() {
+ return $scope.afModelListCtrl.getData($scope.afName);
+ };
+ this.getName = function() {
+ return $scope.afName;
}
}
};
},
link: function($scope, $el, $attr) {},
controller: ['$scope', function($scope) {
- var entities = {};
+ var schema = {}, data = {};
$scope.$parent[$scope.ctrl] = this;
+ // Maybe there's a better way to export this controller to scope?
+ $scope.myCtrl = this;
this.registerEntity = function registerEntity(entity) {
- // console.log('register', entity.name);
- entities[entity.name] = entity;
+ schema[entity.name] = entity;
+ data[entity.name] = data[entity.name] || {};
+ };
+ this.registerField = function(entityName, fieldName) {
+ schema[entityName].fields.push(fieldName);
};
this.getEntity = function getEntity(name) {
- // console.log('get', name);
- return entities[name];
+ return schema[name];
+ };
+ this.getData = function getData(name) {
+ return data[name];
+ };
+ this.getSchema = function getSchema(name) {
+ return schema[name];
};
-
- // TODO: Support for tapping into load+save API calls
this.submit = function submit() {
CRM.alert('TODO: Submit');
};
- }]
+ }
};
});
})(angular, CRM.$, CRM._);
link: function($scope, $el, $attr, afModelListCtrl) {
var ts = $scope.ts = CRM.ts('afform');
afModelListCtrl.registerEntity({
+ id: null,
type: $scope.afType,
name: $scope.afName,
- label: $scope.afLabel
+ label: $scope.afLabel,
+ fields: [],
});
// $scope.$watch('afModelProp', function(newValue){$scope.myOptions = newValue;});
}
-<div>
- {{ts('Single field for %1::%2', {1: afModel.getDefn().type,2: fieldName})}}
-</div>
+<label class="crm-af-field-label" ng-if="fieldDefn.title" for="{{ fieldId }}">
+ {{ fieldDefn.title }}
+</label>
+<div class="crm-af-field" ng-include="'~/afField/widgets/' + fieldDefn.input_type + '.html'"></div>
// Example usage: <af-model af-name="myModel"><af-field field-name="do_not_email" /></af-model>
angular.module('afField').directive('afField', function() {
return {
- restrict: 'AE',
- require: ['^afModel'],
+ restrict: 'E',
+ require: ['^afModel', '^afModelList'],
templateUrl: '~/afField/afField.html',
scope: {
- fieldName: '@'
+ fieldName: '@',
+ fieldDefn: '='
},
link: function($scope, $el, $attr, ctrls) {
var ts = $scope.ts = CRM.ts('afform');
$scope.afModel = ctrls[0];
+ var modelList = ctrls[1];
+ $scope.fieldId = $scope.afModel.getDefn().name + '-' + $scope.fieldName;
+ $scope.getData = $scope.afModel.getData;
+
+ $scope.getOptions = function() {
+ return _.transform($scope.fieldDefn.options, function(result, val, key) {
+ result.push({id: key, text: val});
+ }, []);
+ };
+
+ $el.addClass('af-field-type-' + _.kebabCase($scope.fieldDefn.input_type));
}
};
});
--- /dev/null
+<ul class="crm-checkbox-list" id="{{ fieldId }}" ng-if="fieldDefn.options">
+ <li ng-repeat="(key, val) in fieldDefn.options" >
+ <input type="checkbox" checklist-model="getData()[fieldName]" id="{{ fieldId + key }}" checklist-value="key" />
+ <label for="{{ fieldId + key }}">{{ val }}</label>
+ </li>
+</ul>
+<input type="checkbox" ng-if="!fieldDefn.options" id="{{ fieldId }}" ng-model="getData()[fieldName]" />
--- /dev/null
+<input crm-ui-datepicker="fieldDefn.input_attrs" id="{{ fieldId }}" ng-model="getData()[fieldName]" />
--- /dev/null
+<input class="crm-form-text" type="number" id="{{ fieldId }}" ng-model="getData()[fieldName]" />
--- /dev/null
+<label ng-repeat="(key, val) in fieldDefn.options" >
+ <input class="crm-form-radio" type="radio" ng-model="getData()[fieldName]" value="{{ key }}" />
+ {{ val }}
+</label>
--- /dev/null
+<textarea crm-ui-richtext id="{{ fieldId }}" ng-model="getData()[fieldName]" ></textarea>
--- /dev/null
+<input crm-ui-select="{data: getOptions(), multiple: fieldDefn.input_attrs.multiple}" id="{{ fieldId }}" ng-model="getData()[fieldName]" />
--- /dev/null
+<input class="crm-form-text" type="text" id="{{ fieldId }}" ng-model="getData()[fieldName]" />
--- /dev/null
+<textarea class="crm-form-textarea" id="{{ fieldId }}" ng-model="getData()[fieldName]" ></textarea>
// in CiviCRM. See also:
// http://wiki.civicrm.org/confluence/display/CRMDOC/hook_civicrm_angularModules
-return array(
- 'js' => array(
- 0 => 'ang/afformCore.js',
- 1 => 'ang/afformCore/*.js',
- 2 => 'ang/afformCore/*/*.js',
- ),
- 'css' => array('ang/afformCore.css'),
- 'requires' => array('crmUi', 'crmUtil', 'api4'),
- 'partials' => array('ang/afformCore'),
- 'settings' => array(),
+return [
+ 'js' => [
+ 'ang/afformCore.js',
+ 'ang/afformCore/*.js',
+ 'ang/afformCore/*/*.js',
+ ],
+ 'css' => ['ang/afformCore.css'],
+ 'requires' => ['crmUi', 'crmUtil', 'api4', 'checklist-model'],
+ 'partials' => ['ang/afformCore'],
+ 'settings' => [],
'basePages' => [],
-);
+];
(function(angular, $, _) {
// Declare a list of dependencies.
- angular.module('afformCore', [
- 'crmUi', 'crmUtil', 'ngRoute', 'api4'
- ]);
+ angular.module('afformCore', CRM.angRequires('afformCore'));
// Use `afformCoreDirective(string name)` to generate an AngularJS directive.
angular.module('afformCore').service('afformCoreDirective', function($routeParams, crmApi4, crmStatus, crmUiAlert){
// in CiviCRM. See also:
// http://wiki.civicrm.org/confluence/display/CRMDOC/hook_civicrm_angularModules
-return array(
- 'js' => array(
+return [
+ 'js' => [
'ang/afformStandalone.js',
'ang/afformStandalone/*.js',
'ang/afformStandalone/*/*.js',
- ),
- 'css' => array(),
- 'partials' => array(
+ ],
+ 'css' => [],
+ 'partials' => [
'ang/afformStandalone',
- ),
- 'settings' => array(),
+ ],
+ 'settings' => [],
'requires' => ['ngRoute'],
-);
+];
-<h3>This new page is generated by CRM/Afform/Page/AfformBase.php</h3>
-
-{* Example: Display a variable directly *}
-<p>The current time is {$currentTime}</p>
-
-{* Example: Display a translated string -- which happens to include a variable *}
-<p>{ts 1=$currentTime}(In your native language) The current time is %1.{/ts}</p>
-
-<p>Please open "{$afform}"</p>
\ No newline at end of file
+{literal}
+ <div ng-app="crmApp">
+ <form ng-view></form>
+ </div>
+{/literal}