From 04417491c71f040c4dd2d5ae77591391a0250e34 Mon Sep 17 00:00:00 2001
From: Coleman Watts <coleman@civicrm.org>
Date: Sun, 24 Jan 2021 21:24:15 -0500
Subject: [PATCH] Afform - Drop directive support for attribute, only support
 elements as afforms.

This changes every afform directive from AE to only E.
Passing options is now done through the 'options' attribute rather than the directive name.
---
 ext/afform/core/afform.php                         |  2 +-
 ext/afform/core/ang/afCore.js                      |  4 ++--
 ext/afform/core/ang/afformStandalone.js            |  2 +-
 ext/afform/docs/embed.md                           | 14 +++++++-------
 ext/afform/html/ang/afHtmlAdmin.aff.html           | 12 +++++-------
 ext/afform/mock/ang/mockPage.aff.html              |  4 ++--
 .../mock/tests/phpunit/api/v4/AfformTest.php       |  2 +-
 7 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/ext/afform/core/afform.php b/ext/afform/core/afform.php
index 4c7ff432de..39c03d99e0 100644
--- a/ext/afform/core/afform.php
+++ b/ext/afform/core/afform.php
@@ -198,7 +198,7 @@ function afform_civicrm_angularModules(&$angularModules) {
       'partialsCallback' => '_afform_get_partials',
       '_afform' => $afform['name'],
       'exports' => [
-        $afform['directive_name'] => 'AE',
+        $afform['directive_name'] => 'E',
       ],
     ];
   }
diff --git a/ext/afform/core/ang/afCore.js b/ext/afform/core/ang/afCore.js
index 7d43c99dcc..9e4bceb31c 100644
--- a/ext/afform/core/ang/afCore.js
+++ b/ext/afform/core/ang/afCore.js
@@ -5,9 +5,9 @@
   // Use `afCoreDirective(string name)` to generate an AngularJS directive.
   angular.module('afCore').service('afCoreDirective', function($routeParams, crmApi4, crmStatus, crmUiAlert) {
     return function(camelName, meta, d) {
-      d.restrict = 'AE';
+      d.restrict = 'E';
       d.scope = {};
-      d.scope.options = '=' + camelName;
+      d.scope.options = '<';
       d.link = {
         pre: function($scope, $el, $attr) {
           $scope.ts = CRM.ts(camelName);
diff --git a/ext/afform/core/ang/afformStandalone.js b/ext/afform/core/ang/afformStandalone.js
index 4cdf39a0d3..6de4b39192 100644
--- a/ext/afform/core/ang/afformStandalone.js
+++ b/ext/afform/core/ang/afformStandalone.js
@@ -7,7 +7,7 @@
       $routeProvider.when('/', {
         controller: 'AfformStandalonePageCtrl',
         template: function() {
-          return '<div id="bootstrap-theme" ' + CRM.afform.open + '="{}"></div>';
+          return '<div id="bootstrap-theme"><' + CRM.afform.open + '></' + CRM.afform.open + '></div>';
         }
       });
     })
diff --git a/ext/afform/docs/embed.md b/ext/afform/docs/embed.md
index 3e291dab41..d550a2bf68 100644
--- a/ext/afform/docs/embed.md
+++ b/ext/afform/docs/embed.md
@@ -8,13 +8,13 @@ sub-forms*.
 How does this work?  Every `afform` is an *AngularJS directive*.  For example, `hello-world` can be embedded with:
 
 ```html
-<div hello-world=""></div>
+<hello-world></hello-world>
 ```
 
 Moreover, you can pass options to `helloWorld`:
 
 ```html
-<div hello-world="{phaseOfMoon: 'waxing'}"></div>
+<hello-world options="{phaseOfMoon: 'waxing'}"></hello-world>
 ```
 
 Now, in `ang/helloWorld.aff.html`, you can use `options.phaseOfMoon`:
@@ -38,13 +38,13 @@ Next, we should create an overall `ang/myContact.aff.html` which uses these buil
 ```html
 <div ng-form="contactForm">
   <div crm-ui-accordion="{title: ts('Name')}">
-    <div my-contact-name="{cid: routeParams.cid}"></div>
+    <my-contact-name options="{cid: routeParams.cid}"></my-contact-name>
   </div>
   <div crm-ui-accordion="{title: ts('Street Addresses')}">
-    <div my-contact-addresses="{cid: routeParams.cid}"></div>
+    <my-contact-addresses options="{cid: routeParams.cid}"></my-contact-addresses>
   </div>
   <div crm-ui-accordion="{title: ts('Emails')}">
-    <div my-contact-emails="{cid: routeParams.cid}"></div>
+    <my-contact-emails options="{cid: routeParams.cid}"></my-contact-emails>
   </div>
 </div>
 ```
@@ -53,11 +53,11 @@ And we should create a `ang/myContact.aff.json` looking like
 
 ```json
 {
-  "server_route": "civicrm/contact", 
+  "server_route": "civicrm/contact",
   "requires" : ["myContactName", "myContactEmails", "myContactAddresses"]
 }
 ```
-> *(FIXME: In the parent form's `*.aff.json`, we need to manually add `myContactName`, `myContactAddresses`, `myContactEmails` to the `requires` list. We should autodetect these instead.)*
+> *Note: The parent afform will automatically require the `myContactName`, `myContactAddresses`, `myContactEmails` directives. You do not need to manually include them.*
 
 We've created new files, so we'll need to flush the file-index
 
diff --git a/ext/afform/html/ang/afHtmlAdmin.aff.html b/ext/afform/html/ang/afHtmlAdmin.aff.html
index f953a8e749..6c80cc3644 100644
--- a/ext/afform/html/ang/afHtmlAdmin.aff.html
+++ b/ext/afform/html/ang/afHtmlAdmin.aff.html
@@ -1,9 +1,7 @@
-<div class="bootstrap-theme">
-  <div ng-if="!routeParams.name">
-    <div af-html-list=""></div>
-  </div>
+<div ng-if="!routeParams.name">
+  <af-html-list></af-html-list>
+</div>
 
-  <div ng-if="routeParams.name">
-    <div af-html-editor="{name: routeParams.name}"></div>
-  </div>
+<div ng-if="routeParams.name">
+  <af-html-editor options="{name: routeParams.name}"></af-html-editor>
 </div>
diff --git a/ext/afform/mock/ang/mockPage.aff.html b/ext/afform/mock/ang/mockPage.aff.html
index d3300ca8b7..c40934e256 100644
--- a/ext/afform/mock/ang/mockPage.aff.html
+++ b/ext/afform/mock/ang/mockPage.aff.html
@@ -1,3 +1,3 @@
 <div>Hello {{routeParams.name}}.</div>
-<div>The foo says "<span mock-foo/>".</div>
-<div>The bare file says "<span mock-bare-file/>"</div>
+<div>The foo says "<mock-foo></mock-foo>".</div>
+<div>The bare file says "<mock-bare-file></mock-bare-file>"</div>
diff --git a/ext/afform/mock/tests/phpunit/api/v4/AfformTest.php b/ext/afform/mock/tests/phpunit/api/v4/AfformTest.php
index 66c80aa4b1..9f5132a31a 100644
--- a/ext/afform/mock/tests/phpunit/api/v4/AfformTest.php
+++ b/ext/afform/mock/tests/phpunit/api/v4/AfformTest.php
@@ -258,7 +258,7 @@ class api_v4_AfformTest extends api_v4_AfformTestCase {
     Civi\Api4\Afform::update()
       ->addWhere('name', '=', $formName)
       ->setLayoutFormat('html')
-      ->setValues(['layout' => '<div>The bare file says "<span mock-bare-file/>"</div>'])
+      ->setValues(['layout' => '<div>The bare file says "<mock-bare-file/>"</div>'])
       ->execute();
     $angModule = Civi::service('angular')->getModule($formName);
     $this->assertEquals(['afCore', 'mockBespoke', 'mockBareFile'], $angModule['requires']);
-- 
2.25.1