From 17d153bd6af66342ce0fc856ed30ae72e21dadcd Mon Sep 17 00:00:00 2001 From: Coleman Watts Date: Tue, 25 Jun 2019 21:35:39 -0400 Subject: [PATCH] Add field widgets Add field widgets --- .../core/CRM/Afform/Page/AfformBase.php | 4 +++- ext/afform/core/ang/af/Model.js | 15 ++++++++---- ext/afform/core/ang/af/ModelList.js | 24 ++++++++++++------- ext/afform/core/ang/af/ModelProp.js | 4 +++- ext/afform/core/ang/afField/afField.html | 7 +++--- ext/afform/core/ang/afField/afField.js | 18 +++++++++++--- .../core/ang/afField/widgets/CheckBox.html | 7 ++++++ ext/afform/core/ang/afField/widgets/Date.html | 1 + .../core/ang/afField/widgets/Number.html | 1 + .../core/ang/afField/widgets/Radio.html | 4 ++++ .../ang/afField/widgets/RichTextEditor.html | 1 + .../core/ang/afField/widgets/Select.html | 1 + ext/afform/core/ang/afField/widgets/Text.html | 1 + .../core/ang/afField/widgets/TextArea.html | 1 + ext/afform/core/ang/afformCore.ang.php | 22 ++++++++--------- ext/afform/core/ang/afformCore.js | 4 +--- ext/afform/core/ang/afformStandalone.ang.php | 16 ++++++------- .../templates/CRM/Afform/Page/AfformBase.tpl | 14 ++++------- 18 files changed, 93 insertions(+), 52 deletions(-) create mode 100644 ext/afform/core/ang/afField/widgets/CheckBox.html create mode 100644 ext/afform/core/ang/afField/widgets/Date.html create mode 100644 ext/afform/core/ang/afField/widgets/Number.html create mode 100644 ext/afform/core/ang/afField/widgets/Radio.html create mode 100644 ext/afform/core/ang/afField/widgets/RichTextEditor.html create mode 100644 ext/afform/core/ang/afField/widgets/Select.html create mode 100644 ext/afform/core/ang/afField/widgets/Text.html create mode 100644 ext/afform/core/ang/afField/widgets/TextArea.html diff --git a/ext/afform/core/CRM/Afform/Page/AfformBase.php b/ext/afform/core/CRM/Afform/Page/AfformBase.php index 75daf17cba..ee666dacac 100644 --- a/ext/afform/core/CRM/Afform/Page/AfformBase.php +++ b/ext/afform/core/CRM/Afform/Page/AfformBase.php @@ -12,7 +12,9 @@ class CRM_Afform_Page_AfformBase extends CRM_Core_Page { $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'), diff --git a/ext/afform/core/ang/af/Model.js b/ext/afform/core/ang/af/Model.js index 8a07e9f5d3..3201e1af67 100644 --- a/ext/afform/core/ang/af/Model.js +++ b/ext/afform/core/ang/af/Model.js @@ -10,16 +10,21 @@ }, 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; } } }; diff --git a/ext/afform/core/ang/af/ModelList.js b/ext/afform/core/ang/af/ModelList.js index 1c6fc6f207..cdbe8b9f47 100644 --- a/ext/afform/core/ang/af/ModelList.js +++ b/ext/afform/core/ang/af/ModelList.js @@ -10,25 +10,33 @@ }, 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._); diff --git a/ext/afform/core/ang/af/ModelProp.js b/ext/afform/core/ang/af/ModelProp.js index ef44b79feb..399c6a60bf 100644 --- a/ext/afform/core/ang/af/ModelProp.js +++ b/ext/afform/core/ang/af/ModelProp.js @@ -13,9 +13,11 @@ 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;}); } diff --git a/ext/afform/core/ang/afField/afField.html b/ext/afform/core/ang/afField/afField.html index 3590517913..f54a4bfede 100644 --- a/ext/afform/core/ang/afField/afField.html +++ b/ext/afform/core/ang/afField/afField.html @@ -1,3 +1,4 @@ -
- {{ts('Single field for %1::%2', {1: afModel.getDefn().type,2: fieldName})}} -
+ +
diff --git a/ext/afform/core/ang/afField/afField.js b/ext/afform/core/ang/afField/afField.js index 911e8deed2..5d4fb7a1fa 100644 --- a/ext/afform/core/ang/afField/afField.js +++ b/ext/afform/core/ang/afField/afField.js @@ -2,15 +2,27 @@ // Example usage: 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)); } }; }); diff --git a/ext/afform/core/ang/afField/widgets/CheckBox.html b/ext/afform/core/ang/afField/widgets/CheckBox.html new file mode 100644 index 0000000000..d4401cc1d8 --- /dev/null +++ b/ext/afform/core/ang/afField/widgets/CheckBox.html @@ -0,0 +1,7 @@ + + diff --git a/ext/afform/core/ang/afField/widgets/Date.html b/ext/afform/core/ang/afField/widgets/Date.html new file mode 100644 index 0000000000..21d59e7a0b --- /dev/null +++ b/ext/afform/core/ang/afField/widgets/Date.html @@ -0,0 +1 @@ + diff --git a/ext/afform/core/ang/afField/widgets/Number.html b/ext/afform/core/ang/afField/widgets/Number.html new file mode 100644 index 0000000000..d04da06595 --- /dev/null +++ b/ext/afform/core/ang/afField/widgets/Number.html @@ -0,0 +1 @@ + diff --git a/ext/afform/core/ang/afField/widgets/Radio.html b/ext/afform/core/ang/afField/widgets/Radio.html new file mode 100644 index 0000000000..1149785509 --- /dev/null +++ b/ext/afform/core/ang/afField/widgets/Radio.html @@ -0,0 +1,4 @@ + diff --git a/ext/afform/core/ang/afField/widgets/RichTextEditor.html b/ext/afform/core/ang/afField/widgets/RichTextEditor.html new file mode 100644 index 0000000000..cedb722104 --- /dev/null +++ b/ext/afform/core/ang/afField/widgets/RichTextEditor.html @@ -0,0 +1 @@ + diff --git a/ext/afform/core/ang/afField/widgets/Select.html b/ext/afform/core/ang/afField/widgets/Select.html new file mode 100644 index 0000000000..298c16f9bf --- /dev/null +++ b/ext/afform/core/ang/afField/widgets/Select.html @@ -0,0 +1 @@ + diff --git a/ext/afform/core/ang/afField/widgets/Text.html b/ext/afform/core/ang/afField/widgets/Text.html new file mode 100644 index 0000000000..6f94d24a59 --- /dev/null +++ b/ext/afform/core/ang/afField/widgets/Text.html @@ -0,0 +1 @@ + diff --git a/ext/afform/core/ang/afField/widgets/TextArea.html b/ext/afform/core/ang/afField/widgets/TextArea.html new file mode 100644 index 0000000000..f19d4c9771 --- /dev/null +++ b/ext/afform/core/ang/afField/widgets/TextArea.html @@ -0,0 +1 @@ + diff --git a/ext/afform/core/ang/afformCore.ang.php b/ext/afform/core/ang/afformCore.ang.php index c93f304502..ff3e7a48f9 100644 --- a/ext/afform/core/ang/afformCore.ang.php +++ b/ext/afform/core/ang/afformCore.ang.php @@ -3,15 +3,15 @@ // 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' => [], -); +]; diff --git a/ext/afform/core/ang/afformCore.js b/ext/afform/core/ang/afformCore.js index b583486da3..9ee3732d3a 100644 --- a/ext/afform/core/ang/afformCore.js +++ b/ext/afform/core/ang/afformCore.js @@ -1,8 +1,6 @@ (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){ diff --git a/ext/afform/core/ang/afformStandalone.ang.php b/ext/afform/core/ang/afformStandalone.ang.php index 2fbf67d02f..3b145af59c 100644 --- a/ext/afform/core/ang/afformStandalone.ang.php +++ b/ext/afform/core/ang/afformStandalone.ang.php @@ -3,16 +3,16 @@ // 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'], -); +]; diff --git a/ext/afform/core/templates/CRM/Afform/Page/AfformBase.tpl b/ext/afform/core/templates/CRM/Afform/Page/AfformBase.tpl index 4beb737db3..aeaf3848e8 100644 --- a/ext/afform/core/templates/CRM/Afform/Page/AfformBase.tpl +++ b/ext/afform/core/templates/CRM/Afform/Page/AfformBase.tpl @@ -1,9 +1,5 @@ -

This new page is generated by CRM/Afform/Page/AfformBase.php

- -{* Example: Display a variable directly *} -

The current time is {$currentTime}

- -{* Example: Display a translated string -- which happens to include a variable *} -

{ts 1=$currentTime}(In your native language) The current time is %1.{/ts}

- -

Please open "{$afform}"

\ No newline at end of file +{literal} +
+
+
+{/literal} -- 2.25.1