Add region-scoping for waypoints

gathering/app/components/waypoint-row.gjs

@@ -1,3 +1,4 @@
+import { hash } from '@ember/helper';
 import { on } from '@ember/modifier';
 import { action } from '@ember/object';
 import { LinkTo } from '@ember/routing';
@@ -16,8 +17,10 @@ export default class WaypointRowComponent extends Component {
           {{on 'click' this.toggleStatus}}
           data-test-status
         >{{this.status}}</td>{{/if}}
-      <td data-test-region>
-        {{@waypoint.region.name}}
+      <td>
+        <LinkTo @route='waypoints.index' @query={{hash region-id=@waypoint.region.id}} data-test-region>
+          {{@waypoint.region.name}}
+        </LinkTo>
       </td>
       <td data-test-name>
         {{@waypoint.name}}

gathering/app/controllers/waypoints.js

@@ -0,0 +1,19 @@
+import Controller from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { tracked } from '@glimmer/tracking';
+
+export default class WaypointsController extends Controller {
+  queryParams = [{ regionId: 'region-id' }];
+
+  @service store;
+
+  @tracked regionId = null;
+
+  get region() {
+    if (this.regionId) {
+      return this.store.peekRecord('region', this.regionId);
+    }
+
+    return null;
+  }
+}

gathering/app/controllers/waypoints/index.js

@@ -1,16 +1,34 @@
-import Controller from '@ember/controller';
+import Controller, { inject as controller } from '@ember/controller';
 import { action } from '@ember/object';
 import { tracked } from '@glimmer/tracking';
 import orderBy from 'lodash.orderby';
 
 export default class WaypointIndexController extends Controller {
+  @controller('waypoints') waypointsController;
+
   @tracked defaultSort = true;
 
+  get region() {
+    return this.waypointsController.region;
+  }
+
   get waypoints() {
+    let filteredWaypoints = this.model.slice();
+
+    if (this.region) {
+      filteredWaypoints = filteredWaypoints.filter(
+        (w) => w.region === this.region
+      );
+    }
+
     if (this.defaultSort) {
-      return orderBy(this.model, ['updatedAt'], ['desc']);
+      return orderBy(filteredWaypoints, ['updatedAt'], ['desc']);
     } else {
-      return orderBy(this.model, ['region.name', 'createdAt'], ['asc', 'asc']);
+      return orderBy(
+        filteredWaypoints,
+        ['region.name', 'createdAt'],
+        ['asc', 'asc']
+      );
     }
   }
 

gathering/app/routes/waypoints/new.js

@@ -11,6 +11,12 @@ export default class NewRoute extends WaypointRoute {
   @service store;
 
   model() {
+    if (this.controllerFor('waypoints').region) {
+      return this.store.createRecord('waypoint', {
+        region: this.controllerFor('waypoints').region,
+      });
+    }
+
     const lastRegion = this.lastRegion.getLastRegion();
 
     return lastRegion.then((region) => {

gathering/app/templates/application.hbs

@@ -11,8 +11,10 @@
             class='destinations new'
           >+</LinkTo></li>
         {{#if this.puzzles.implementation.hasWaypoints}}
-          <li class='pair'><LinkTo
+          <li class='pair'>
+            <LinkTo
               @route='waypoints'
+              @query={{(hash regionId=null)}}
               data-test-waypoints
             >way<span class='show-for-medium'>points</span></LinkTo>
             <LinkTo

gathering/app/templates/waypoints/index.hbs

@@ -1,5 +1,13 @@
 <div class='row'>
   <div class='small-12 columns'>
+    {{#if this.region}}
+      <section data-test-waypoint-region-scope>
+        <strong data-test-title>
+          {{this.region.name}}
+        </strong>
+        <LinkTo @route='waypoints' @query={{(hash regionId=null)}} data-test-leave>leave</LinkTo>
+      </section>
+    {{/if}}
     <table>
       <thead>
         <tr>

gathering/tests/acceptance/waypoints-test.js

@@ -1,6 +1,7 @@
 import { waitUntil } from '@ember/test-helpers';
 import clearDatabase from 'adventure-gathering/tests/helpers/clear-database';
 import homePage from 'adventure-gathering/tests/pages/home';
+import nav from 'adventure-gathering/tests/pages/nav';
 import page from 'adventure-gathering/tests/pages/waypoints';
 import { setupApplicationTest } from 'ember-qunit';
 import { module, test } from 'qunit';
@@ -77,13 +78,13 @@ module('Acceptance | waypoints', function (hooks) {
     let one = page.waypoints[0];
     assert.strictEqual(one.name, 'The Shadowed Sun');
     assert.strictEqual(one.author, 'N. K. Jemisin');
-    assert.strictEqual(one.region, 'Harvey Smith');
+    assert.strictEqual(one.region.text, 'Harvey Smith');
     assert.notOk(one.isIncomplete);
 
     let two = page.waypoints[1];
     assert.strictEqual(two.name, 'The Killing Moon');
     assert.strictEqual(two.author, 'N. K. Jemisin');
-    assert.strictEqual(two.region, 'Henderson');
+    assert.strictEqual(two.region.text, 'Henderson');
     assert.ok(two.isIncomplete);
   });
 
@@ -151,6 +152,32 @@ module('Acceptance | waypoints', function (hooks) {
     assert.strictEqual(page.waypoints[0].author, 'Ruthanna Emrys');
   });
 
+  test('a region can be entered and waypoints will be scoped to it', async function (assert) {
+    await homePage.visit();
+    await homePage.waypoints.click();
+
+    await page.waypoints[0].region.click();
+    assert.strictEqual(page.region.title, 'Harvey Smith');
+    assert.strictEqual(page.waypoints.length, 1);
+
+    await nav.waypoints.click();
+    assert.ok(page.region.isHidden);
+    assert.strictEqual(page.waypoints.length, 2);
+
+    await page.waypoints[0].region.click();
+    await page.region.leave();
+    assert.ok(page.region.isHidden);
+
+    await page.waypoints[0].region.click();
+    await page.new();
+    assert.strictEqual(page.regionField.text, 'Harvey Smith');
+
+    await page.save();
+    await waitUntil(() => page.waypoints.length);
+
+    assert.strictEqual(page.waypoints.length, 2);
+  });
+
   test('the status fieldset doesn’t show when the feature isn’t on', async function (assert) {
     await homePage.visit();
     await homePage.waypoints.click();

gathering/tests/pages/nav.js

@@ -3,4 +3,5 @@ import PageObject from 'ember-cli-page-object';
 export default PageObject.create({
   scope: '[data-test-nav]',
   destinations: { scope: '[data-test-destinations]' },
+  waypoints: { scope: '[data-test-waypoints]' },
 });

gathering/tests/pages/waypoints.js

@@ -40,6 +40,13 @@ const fillSelectByText = function (selector) {
 };
 
 export default PageObject.create({
+  region: {
+    scope: '[data-test-waypoint-region-scope]',
+
+    title: text('[data-test-title]'),
+    leave: clickable('[data-test-leave]'),
+  },
+
   headerRegion: {
     scope: '[data-test-header-region]',
     click: clickable(),
@@ -48,7 +55,7 @@ export default PageObject.create({
   waypoints: collection('[data-test-waypoint]', {
     name: text('[data-test-name]'),
     author: text('[data-test-author]'),
-    region: text('[data-test-region]'),
+    region: { scope: '[data-test-region]' },
 
     isIncomplete: hasClass('incomplete'),