neo.mjs 6.9.10 → 6.9.12

package/resources/data/deck/training/p/2023-01-21T20-35-54-947Z.md

@@ -0,0 +1,20 @@
+
+<pre>
+model: {
+    fields: [{
+        name: 'humanReadableLocation'
+    }, {
+        name: 'size',
+        <s>ntype: 'data-field-float'</s>, // Not supported yet 
+    }, {
+        name: 'timestamp',
+        type: 'Date'
+    }, {
+        name: 'title',
+        mapping: 'humanReadableLocation'
+    }, {
+        name: 'position',
+        calculate: (rec, field, data) => ({lat: data.latitude, lng: data.longitude })
+    }]
+},
+</pre>

package/resources/data/deck/training/p/2023-01-21T20-54-47-603Z.md

@@ -0,0 +1,39 @@
+In <a href="https://nameless-tundra-27404.herokuapp.com/go/?fn=yelp&latitude=43.084&longitude=-89.546&term=pizza&limit=1" target="_blank">the Yelp data feed</a> the array of values is nested in _businesses_.
+
+The url has three query fields we'll change dynamically.
+
+    latitude=43.084&longitude=-89.546&term=pizza
+<div class="expander" caption="Data">
+<pre style='color:lightgray'>
+{
+    "id": "nsw3tlB-hwz4KbPYcuaSww",
+    <span style="color:firebrick">"name": "Novanta"</span>,
+    <span style="color:firebrick">"image_url": "https://s3-media1.fl.yelpcdn.com/bphoto/2QtMzHr1ZNoflLzXKRza9A/o.jpg"</span>,
+    <span style="color:firebrick">"coordinates": {"latitude": 43.0753733442932,"longitude": -89.5296266588608}</span>,
+    <span style="color:firebrick">"rating": 4.5</span>,
+    "location": {
+        <span style="color:firebrick">"display_address": [ "8452 Old Sauk Rd", "Madison, WI 53562" ]</span>,
+        "address1": "8452 Old Sauk Rd",
+        "address2": "",
+        "address3": "",
+        "city": "Madison",
+        "zip_code": "53562",
+        "country": "US",
+        "state": "WI"
+    },
+    "is_closed": false,
+    "url": "https://www.yelp.com/biz/novanta-madison?adjust_creative=hAlq2S6c7S0nxZcdmjtkhA&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=hAlq2S6c7S0nxZcdmjtkhA",
+    "review_count": 329,
+    "categories": [
+        {"alias": "pizza", "title": "Pizza"},{"alias": "italian","title": "Italian"},
+        {"alias": "mediterranean","title": "Mediterranean"}
+    ],
+    "transactions": ["pickup","delivery"],
+    "price": "$$",
+    "phone": "+16088317740",
+    "display_phone": "(608) 831-7740",
+    "distance": 1639.6643113166895,
+    "alias": "novanta-madison"
+}
+</pre>
+</div>

package/resources/data/deck/training/p/2023-01-21T20-56-28-184Z.md

@@ -0,0 +1,25 @@
+`responseRoot` specifies the value in the feed that holds the array of items
+used to populate the store. 
+
+For example, the Yelp feed returns a single object which contains a _businesses_
+property whose value is the array of businesses. Therefore, the store that reads
+it should specify 
+
+`responseRoot: businesses`.
+
+    {
+    "businesses": [
+        {
+        "id": "nsw3tlB-hwz4KbPYcuaSww",
+        "alias": "novanta-madison",
+        "name": "Novanta",
+        "image_url": "https://s3-media1.fl.yelpcdn.com/bphoto/2QtMzHr1ZNoflLzXKRza9A/o.jpg",
+        "is_closed": false,
+        "url": "https://www.yelp.com/biz/novanta-madison?adjust_creative=hAlq2S6c7S0nxZcdmjtkhA&utm_campaign=yelp_api_v3&utm_medium=api_v3_business_search&utm_source=hAlq2S6c7S0nxZcdmjtkhA",
+        "review_count": 329,
+        "categories": [
+            {
+            "alias": "pizza",
+            "title": "Pizza"
+            },
+        ...

package/resources/data/deck/training/p/2023-01-21T20-57-32-927Z.md

@@ -0,0 +1,4 @@
+
+- `url`
+- `autoLoad`
+- `responseRoot`

package/resources/data/deck/training/p/2023-01-21T23-13-33-394Z.md

@@ -0,0 +1,6 @@
+We've done a lot of talking, but the resulting code is pretty simple.
+
+- Fewer than 20 (yes, twenty) lines of procedural code 
+- A simple store config, with two fields
+- A well-encapsulated `Filter` class
+- A simple, declaratively defined, main view and tabs

package/resources/data/deck/training/p/2023-01-28T19-11-37-464Z.md

@@ -0,0 +1,24 @@
+Grids show a store's data as a table of rows and columns.
+
+<pre style="font-size: 14pt;color:gray;">
+items: [{
+    module: Table,
+    store: {
+        module: Store,
+        model: {
+            fields: [{ name: <span style="color:blue;">'name'</span> }, { name: <span style="color:blue;">'hp'</span> }, { name: <span style="color:blue;">'attack'</span> }, { name: <span style="color:blue;">'defense'</span> }]
+        },
+        data: [
+            { <span style="color:blue;">"name"</span>: "Bulbasaur" , "pokedex": 1 , <span style="color:blue;">"hp"</span>: 45 , <span style="color:blue;">"defense"</span>: 49 , <span style="color:blue;">"attack"</span>: 49 , <span style="color:blue;">"speed"</span>: 45 },
+            { <span style="color:blue;">"name"</span>: "Ivysaur"   , "pokedex": 2 , <span style="color:blue;">"hp"</span>: 60 , <span style="color:blue;">"defense"</span>: 63 , <span style="color:blue;">"attack"</span>: 62 , <span style="color:blue;">"speed"</span>: 60 },
+            { <span style="color:blue;">"name"</span>: "Venusaur"  , "pokedex": 3 , <span style="color:blue;">"hp"</span>: 80 , <span style="color:blue;">"defense"</span>: 83 , <span style="color:blue;">"attack"</span>: 82 , <span style="color:blue;">"speed"</span>: 80 },
+        ]
+    },
+    columns: [
+        { dataField: <span style="color:blue;">'name'</span>   , text: 'Name' },
+        { dataField: <span style="color:blue;">'hp'</span>     , text: 'HP' },
+        { dataField: <span style="color:blue;">'attack'</span> , text: 'Attack' },
+        { dataField: <span style="color:blue;">'defense'</span>, text: 'Defense' },
+    ],
+}]
+</pre>

package/resources/data/deck/training/p/2023-01-28T20-43-41-188Z.md

@@ -0,0 +1,9 @@
+Neo implements Tables as a `Neo.table.header.Toolbar` followed by a `Neo.table.View`.
+
+You don't reference these directly — they are created automatically using
+the configs you provide for the table.
+
+If needed, you can provide header configs via `headerToolbarConfig`
+
+
+And you can provide view configuration via `viewConfig`.

package/resources/data/deck/training/p/2023-01-28T20-53-56-476Z.md

@@ -0,0 +1,8 @@
+Each item in `columns:[]` configures a column.
+
+- `text` — the column title 
+- `dataField`  —  the record value
+- `width`
+- `align`
+
+- `renderer`

package/resources/data/deck/training/p/2023-01-28T20-58-43-776Z.md

@@ -0,0 +1,10 @@
+
+By default, Neo simply shows the `dataField` value for the record, but you can provide
+your own value by configuring a `renderer` function.
+
+An object is passed to the function.
+
+- dataField
+- index
+- record
+- value — the `record[dataField]` value

package/resources/data/deck/training/p/2023-01-28T22-18-41-259Z.md

@@ -0,0 +1,33 @@
+<pre style="font-size: 13pt; color: gray; ">
+{
+    module: Table,
+    store: {
+        module: Store,
+        model: { fields: [{ name: 'timestamp', type: 'Date' }, { name: 'humanReadableLocation' }, { name: 'quality' }] },
+        data: [
+            { "timestamp": "2017-10-13T12:07:24.000Z", "latitude": 63.976, "longitude": -21.949, "depth": 1.1, "size": 0.6, "quality": 58.73, "humanReadableLocation": "6,1 km SV af Helgafelli" },
+            { "timestamp": "2017-10-13T09:50:50.000Z", "latitude": 65.124, "longitude": -16.288, "depth": 7.2, "size": 0.9, "quality": 78.51, "humanReadableLocation": "6,1 km NA af Herðubreiðartöglum" },
+        ]
+    },
+    columns: [
+        { dataField: 'humanReadableLocation', text: 'Location' },
+        {
+            dataField: 'timestamp', 
+            text: 'Date', 
+            <span style="font-weight: bold; color: #b91010">renderer: data => new Intl.DateTimeFormat('en-US', {
+                year: 'numeric', month: 'long', day: 'numeric', weekday: 'long',
+                hour: 'numeric', minute: 'numeric', second: 'numeric',
+                hour12: false,
+                timeZone: 'America/Los_Angeles'
+            }).format(data.value)</span>
+        },
+        {
+            dataField: 'quality', 
+            text: 'quality', 
+            <span style="font-weight: bold; color: #b91010">renderer: data => new Intl.NumberFormat('en-US', {
+                minimumFractionDigits: 3
+            }).format(data.value)</span>
+        },
+    ]
+}
+</pre>

package/resources/data/deck/training/p/2023-01-28T22-24-34-808Z.md

@@ -0,0 +1,24 @@
+You can use the _record_ reference to include other values from the record.
+
+<pre style="font-size: 14pt; color: gray; ">
+{
+    module: Table,
+    store: {
+        module: Store,
+        model: {
+            fields: [{ name: 'name' }, { name: 'hp' }, { name: 'attack' }, { name: 'defense' }, { name: 'pokedex' }]
+        },
+        data: [
+            { "name": "Bulbasaur", "pokedex": 1, "hp": 45, "defense": 49, "attack": 49, "speed": 45 },
+            { "name": "Ivysaur", "pokedex": 2, "hp": 60, "defense": 63, "attack": 62, "speed": 60 },
+            { "name": "Venusaur", "pokedex": 3, "hp": 80, "defense": 83, "attack": 82, "speed": 80 },
+        ]
+    },
+    columns: [
+        { text: 'Name', <span style="font-weight: bold; color: #b91010">renderer: data => `${data.record.name} (${data.record.pokedex})`</span> }, // Ivysaur (2)
+        { dataField: 'hp', text: 'HP' },
+        { dataField: 'attack', text: 'Attack' },
+        { dataField: 'defense', text: 'Defense' }
+    ]
+}
+</pre>

package/resources/data/deck/training/p/2023-01-29T16-25-24-528Z.md

@@ -0,0 +1,44 @@
+<table>
+<tr>
+<td><ul>
+<li>RowModel (default)
+<li>CellModel
+<li>ColumnModel
+</ul></td>
+<td><ul>
+<li>CellRowModel
+<li>CellColumnModel
+<li>CellColumnRowModel
+</ul></td>
+<td>
+</tr>
+</table>
+
+<pre style="font-size:13pt; color: gray">
+{
+    module: Table,
+    store: {
+        module: Store,
+        model: {
+            fields: [{ name: 'name' }, { name: 'hp' }, { name: 'attack' }, { name: 'defense' }, { name: 'pokedex' }]
+        },
+        data: [
+            { "name": "Bulbasaur", "pokedex": 1, "hp": 45, "defense": 49, "attack": 49, "speed": 45 },
+            { "name": "Ivysaur", "pokedex": 2, "hp": 60, "defense": 63, "attack": 62, "speed": 60 },
+        ]
+    },
+    <span style="font-weight: bold; color: #b91010">selectionModel: {
+        module: CellModel
+    },</span>
+    columns: [
+        { text: 'Name', renderer: data => `${data.record.name} (${data.record.pokedex})` },
+        { dataField: 'hp', text: 'HP' },
+        { dataField: 'attack', text: 'Attack' },
+        { dataField: 'defense', text: 'Defense' }
+    ],
+}
+</pre>
+
+
+
+

package/resources/data/deck/training/p/2023-01-29T21-14-32-588Z.md

@@ -0,0 +1,12 @@
+The selection model has an `items[]` property that holds the 
+_row id_ for each record. 
+
+Call the table's view `getRecordByRowId()` method to get the corresponding record.
+
+    onSelectedItemsClick(data) {
+        const table = this.getReference('table');
+        const view = table.getView();
+        const records = table.selectionModel.items
+            .map(rowId => view.getRecordByRowId(rowId));
+        console.log(records);
+    }

package/resources/data/deck/training/p/2023-01-31T19-24-53-504Z.md

@@ -0,0 +1,8 @@
+A form container is a simple container with some convenience methods for gathering
+field values and testing validation.
+
+- `getFields()` 
+- `getField()` — get a field using its id or name
+- `getValues()`
+- `isValid()`
+- `reset()`

package/resources/data/deck/training/p/2023-01-31T20-33-55-855Z.md

@@ -0,0 +1,11 @@
+Conceptually, a field represents a name/value pair that can be sent to 
+the backend via a form submit or Ajax call.
+
+    {
+        module: Text,
+        labelText: 'First Name',
+
+        name: 'fname', // Typically, the name sent to the backend
+        value: 'Homer', 
+
+    }, 

package/resources/data/deck/training/p/2023-01-31T20-34-30-261Z.md

@@ -0,0 +1,7 @@
+A `Neo.form.Container` is a simple container that can hold any
+component, including fields
+
+Fields are input components, such as text fields, checkboxes, and select fields.
+
+A form has convenience methods for setting and getting field values, and testing validation.
+

package/resources/data/deck/training/p/2023-01-31T20-52-53-367Z.md

@@ -0,0 +1,43 @@
+<div class="expander" caption="config">
+<p>
+<kbd>name          </kbd><br>
+<kbd>value\_        </kbd><br>
+<br>
+<kbd>labelText\_        </kbd><br>
+<kbd>subLabelText\_     </kbd><br>
+<kbd>labelPosition\_     </kbd><br>
+<kbd>placeholderText\_     </kbd><br>
+<br>
+<kbd>clearable\_    </kbd><br>
+<br>
+<kbd>maxLength\_     </kbd><br>
+<kbd>minLength\_     </kbd><br>
+<br>
+<kbd>readOnly\_      </kbd><br>
+<kbd>required\_      </kbd><br>
+<br>
+<kbd>inputPattern\_  </kbd>&mdash; A regular expression that limits keyboard input<br>
+<kbd>validator     </kbd><br>
+</p>
+</div>
+
+
+<div class="expander" caption="Methods">
+<p>
+<kbd>clearToOriginalValue()</kbd><br>
+<kbd>isEmpty()        </kbd><br>
+<kbd>isValid()        </kbd><br>
+<kbd>validate()        </kbd><br>
+
+</p>
+</div>
+
+<div class="expander" caption="Events">
+<p>
+<i>change</i><br>
+<i>clear</i><br>
+<i>changeClearToOriginalValue</i><br>
+
+</p>
+</div>
+

package/resources/data/deck/training/p/2023-02-04T15-18-35-682Z.md

@@ -0,0 +1,20 @@
+The `Clear` and `CopyToClipboard` triggers might be used directly, 
+but the others are used via the corresponding pre-configured
+component.<small><sup>*</sup></small>
+
+`Neo.form.field.trigger.*`
+
+
+- `Clear`
+- `CopyToClipboard`
+
+
+- `Date`
+- `Search`
+- `SpinDown`
+- `SpinUp`
+- `Time`
+
+
+<br><br>
+<small>* Many triggers require setting up trigger click event handlers.</small>

package/resources/data/deck/training/p/2023-02-04T15-49-47-597Z.md

@@ -0,0 +1,14 @@
+Most validation configs have a corresponding message
+which is used when the validation fails. 
+
+
+| Validation Config   | Validation Error           |
+| ------------------- | -------------------------- |
+| `maxLength`         | `errorTextMaxLength`<small><sup>*</sup></small>|
+| `minLength`         | `errorTextMinLength`       |
+| `required`          | `errorTextRequired`        |
+| `validator`         |                            |
+
+<br>
+<br>
+<small>* Text is limited to the max length.</small>

package/resources/data/deck/training/p/2023-02-04T18-58-57-808Z.md

@@ -0,0 +1 @@
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="1000" height="600" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2F2Xzb3mL9nwSprFN3lMweja%2FNeo.form.field-Hierarchy%3Fnode-id%3D0%253A1%26t%3DxfeBL4RWaRZGyAic-1%2Fhide-ui" allowfullscreen></iframe>

package/resources/data/deck/training/p/2023-02-04T20-07-11-288Z.md

@@ -0,0 +1 @@
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="1000" height="600" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FVz2o2oFk8mFdwJ7nQIzmK0%2FNeo.form.field.Picker%3Fnode-id%3D0%253A1%26t%3DlAG8QtmPJatN3LP2-1" allowfullscreen></iframe>

package/resources/data/deck/training/p/2023-02-04T20-09-50-169Z.md

@@ -0,0 +1 @@
+<iframe style="border: 1px solid rgba(0, 0, 0, 0.1);" width="1000" height="600" src="https://www.figma.com/embed?embed_host=share&url=https%3A%2F%2Fwww.figma.com%2Ffile%2FW4rsTDe84bUaVe9Fa8HuRV%2FNeo.form.field.*%3Fnode-id%3D0%253A1%26t%3D7Y1XOS0oVKMWmYnI-1" allowfullscreen></iframe>

package/resources/data/deck/training/p/2023-02-04T20-19-42-740Z.md

@@ -0,0 +1,8 @@
+| Config              | Methods                    | Events             |
+| ------------------- | -------------------------- | -------------------|
+| `name`              | `isValid()`                | _change_           |
+| `value_`            | `reset()`                  |                    |
+|                | `validate()`               |                    |    
+|                     |                            |                    |
+
+

package/resources/data/deck/training/p/2023-02-04T20-23-56-013Z.md

@@ -0,0 +1,12 @@
+    {
+        module: TextField,
+        labelText: 'First Name',
+        name: 'fname',
+    }, 
+
+
+Text fields let the user type input.
+
+The `Neo.form.field.Text` class is an important base class. There
+are many kinds of field, including search fields, passwords fields,
+and many others.

package/resources/data/deck/training/p/2023-02-04T20-28-12-391Z.md

@@ -0,0 +1,20 @@
+Use the _validator_ config function for non-trivial validation.
+
+The function receives a reference to the field.
+Return `true` for a valid field, or an error string for an invalid field.
+
+
+The function can be in-line, or a string which names a controller method.
+
+    {
+        module: Text,
+        labelText: 'Name',
+        validator: field => field.value.match(/^\w+$/)?true:'Special characters are not allowed',
+    }, 
+
+
+    {
+        module: Text,
+        labelText: 'Name',
+        validator: 'nameValidator'
+    }, 

package/resources/data/deck/training/p/2023-02-05T00-20-32-554Z.md

@@ -0,0 +1,16 @@
+- `Neo.form.field.Date`
+- `Neo.form.field.Time`
+- `Neo.form.field.Select`
+    - `Neo.form.field.Chip`
+    - `Neo.form.field.Color`
+
+A picker is a base class that introduces a `tigger:[]` config. 
+
+A trigger is a widget docked on the right of a field. A text
+field can configure any set of triggers that are needed.
+(A _clearable_ text field is just a text field with a `Clear` trigger
+dynamically added.)
+
+Picker sub-classes are components that are pre-configured to use
+one of the `Neo.form.field.trigger.*` triggers. 
+

package/resources/data/deck/training/p/2023-02-05T00-35-56-282Z.md

@@ -0,0 +1,13 @@
+##ntype:'selectfield'
+
+    {
+        module: SelectField,
+        labelText: 'Select field',
+        store: {
+            data: [ { name: 'Munich', id: '9031' }, { name: 'Nuremberg', id: '6524' }, { name: 'Augsburg', id: '8456' }, { name: 'Regensburg', id: '5826' }, { name: 'Ingolstadt', id: '3492' } { name: 'Würzburg', id: '8892' } ]
+        },
+        listeners: {
+            select: data=>console.log('select', data),
+            change: data=>console.log('change', data)
+        }
+    }

package/resources/data/deck/training/p/2023-02-05T15-36-57-182Z.md

@@ -0,0 +1,24 @@
+
+
+| Config           | Description |
+| --------------   | ---------------------------------------   |
+| `store_`         | The store providing the dropdown values   |
+| `displayField`   | The record property displayed to the user |
+| `valueField`     | The record property reflected by `value` |
+| `forceSelection` | `value` is only change via record selection |
+| `triggerActions` | Dropdown shows _all_ or values _filtered_ by typed value. |
+
+<br>
+
+| Methods                         | Description                               |
+| --------------                  | ---------------------------------------   |
+| `selectListItem()`  | Selects the specified record or record index  |
+
+
+<br>
+
+| Events         | Description |
+| -------------- | ---------------------------------------   |
+| _change_       | Any change to the input field value       |
+| _select_       | The selected record   |
+

package/resources/data/deck/training/p/2023-02-05T17-39-51-712Z.md

@@ -0,0 +1,70 @@
+#Introduction
+
+In this lab you'll add a _business_ property to the businesses tab panel.
+
+#Steps
+
+??Plan your work
+
+The main view needs to detect when a business is selected, and pass that
+value to the detail panel. 
+
+The map and table could detect business selection and update the detail 
+panel directly. But that would break principles of encapsulation and 
+coupling. A given view should have no knowledge of other views that 
+may be in the app, and only communicates to the app via property 
+binding and event handling.
+
+The rule of thumb is that the container that creates views is responsible
+for coordinating how information is passed between the views.
+
+Following those guidelines, in Yelp we need to do a few things:
+
+- Define a `business_` property on the tab panel class, along with an event
+- Have the main view detect the business change event and pass the record to the detail panel
+
+??Add `business` as a tab panel property
+
+Add a `business_:null` config property to `Yelp.view.businesses.Tabs`.
+
+Add an `afterSetBusiness(business)` method that logs the business.
+
+You can test this by saving, refreshing, then on the console update the property.
+
+    Neo.findFirst({ntype: 'yelp-businesses-tabs'}).business = {name: 'Some business'}
+
+You should see the data being logged.
+
+
+??Detect changes to the map selection
+
+Set up an event handler to detect the map's _markerChange_ event.
+
+    listeners: {
+        markerClick: data => data.data.component
+            .up({ntype: 'yelp-businesses-tabs'}).business = data.data.record
+    }
+
+Save and refresh, then verify that as you click on map markers the 
+corresponding record is being logged. 
+
+??Fire a _businessChange_ event
+
+Update the `afterSetBusiness` method to fire the event. Note the 
+addition of the first statement that ignores empty values. We don't
+need the `console.log` statement any more.
+
+    afterSetBusiness (business){
+        if (!business) return;
+        this.fire('businessChange', {component: this, business});
+    }
+
+
+??Detect the event in the main view
+
+Add an `onBusinessChange` event handler in the main view. It should log the business.
+
+Then in the main view, configure the _businessChange_ listener to use that handler.
+
+Save and refresh. As you choose map markers you should see the log emanating from
+the main view controller.