Create planning-v0.3.md
authorTim Otten <totten@civicrm.org>
Fri, 3 May 2019 02:12:06 +0000 (19:12 -0700)
committerCiviCRM <info@civicrm.org>
Wed, 16 Sep 2020 02:13:17 +0000 (19:13 -0700)
ext/afform/docs/sandbox/planning-v0.3.md [new file with mode: 0644]

diff --git a/ext/afform/docs/sandbox/planning-v0.3.md b/ext/afform/docs/sandbox/planning-v0.3.md
new file mode 100644 (file)
index 0000000..3fdbb73
--- /dev/null
@@ -0,0 +1,145 @@
+# Progression of sketches of canvas content
+
+```html
+<script class="afform-meta-1234abcd" type="text/json"> {
+  "entities": [
+    "parent": {
+      "title": "Parent",
+      "type": "Individual"
+    },
+    "spouse": {
+      "title": "Spouse".
+      "type": "Individual"
+    }
+  ]
+}
+</script>
+  
+<div afform-entity-ctrl="afform-meta-1234abcd">
+  <af-address contact-id="entities.parent.id" af-label="Address" ng-if="" ng-classes="{foo: name == 'Frank'}" />
+  <af-field entity="entities.parent" entity-type="contact" field="first_name" af-label="First Name"/>
+  <af-field entity="entities.parent" entity-type="contact" field="last_name" af-label="Last Name"/>
+</div>
+```
+
+
+-------------
+
+```html
+<div afform-entity-ctrl="myEntities">
+  <afform-entity type="Individual" name="parent" title="Parent" />
+  <afform-entity type="Individual" name="spouse" title="Spouse" />
+  
+  <af-name entity="myEntities.parent" af-label="Address" />
+  <af-address entity="myEntities.parent" af-label="Address" />
+  <af-field entity="myEntities.parent" entity-type="contact" field="first_name" af-label="First Name"/>
+  <af-field entity="myEntities.parent" entity-type="contact" field="last_name" af-label="Last Name"/>
+</div>
+```
+
+------------------
+
+```html
+<div afform-entity-ctrl="myEntities">
+
+  <af-entity af-type="Individual" af-name="parent" af-label="Parent">
+    <af-name af-label="Name" />
+    <af-email af-label="Email" />
+  </af-entity>
+  
+  <af-entity af-type="Individual" af-name="spouse" af-title="Spouse">
+    <af-name af-label="Spouse Name" />
+    <af-email af-label="Spouse Email" />
+  </af-entity>
+
+  <af-entity af-type="Individual" af-name="parent" af-title="Parent">
+    <af-address af-label="Address" />
+  </af-entity>
+
+</div>
+```
+
+---------
+
+```html
+<!-- 1. s/entity/model-->
+<af-model-list>
+
+  <af-model af-type="Individual" af-name="parent" af-label="Parent">
+    <af-name af-label="Name" />
+    <af-email af-label="Email" />
+  </af-model>
+
+  <af-model af-type="Individual" af-name="spouse" af-title="Spouse">
+    <af-name af-label="Spouse Name" />
+    <af-email af-label="Spouse Email" />
+  </af-model>
+
+  <af-model af-type="Individual" af-name="parent" af-title="Parent">
+    <af-address af-label="Address" />
+  </af-model>
+
+</af-model-list>
+```
+
+--------------
+
+```html
+<af-model-list ctrl="modelListCtrl">
+  <af-model-prop
+    af-type="Individual"
+    af-name="parent"
+    af-label="Parent"
+    af-api4-params="{where: ['id','=', routeParams.cid]}"
+  />
+  <af-model-prop
+    af-type="Individual"
+    af-name="spouse"
+    af-label="Spouse"
+    af-contact-relationship="['Spouse of', 'parent']"
+  />
+  <!-- "parent" and "spouse" should be exported as variables in this scope -->
+
+  <af-model af-name="parent">
+    <af-name af-label="Name" />
+    <af-email af-label="Email" />
+  </af-model>
+
+  <af-model af-name="spouse">
+    <af-name af-label="Spouse Name" />
+    <af-email af-label="Spouse Email" only-primary="true" />
+  </af-model>
+
+  <p ng-if="spouse.display_name.contains('Thor')">
+    Your spouse should go to the gym.
+  </p>
+
+  <af-model af-name="parent">
+    <af-address af-label="Address" />
+  </af-model>
+
+  <!-- General elements: FIELDSET, UL, BUTTON, P, H1 should work anywhere -->
+  <button ng-model="modelListCtrl.submit()">Submit</button>
+
+</af-model-list>
+```
+
+------
+
+```html
+<!-- afform/Blocks/Email.html -->
+<!-- input: options.parent.id -->
+<!-- Decision: These blocks are written in straight AngularJS rather than Afform -->
+<!--<af-model-list>-->
+  <!--<af-model-prop -->
+    <!--af-type="Email"-->
+    <!--af-name="email"-->
+    <!--af-label="Emails"-->
+    <!--af-api4-params="{where: ['contact_id', '=', options.parent.id]}"-->
+  <!--/>-->
+  <!--<af-model af-name="email">-->
+    <!---->
+  <!--</af-model>-->
+<!--</af-model-list>-->
+
+```