Display properties and events (#43)

Author: Gaurav0

app/controllers/events.js

@@ -0,0 +1,6 @@
+import Ember from "ember";
+import AnchorControllerSupport from "ember-anchor/mixins/controller-support";
+
+export default Ember.Controller.extend(AnchorControllerSupport, {
+  queryParams: ['anchor']
+});

app/controllers/properties.js

@@ -0,0 +1,6 @@
+import Ember from "ember";
+import AnchorControllerSupport from "ember-anchor/mixins/controller-support";
+
+export default Ember.Controller.extend(AnchorControllerSupport, {
+  queryParams: ['anchor']
+});

app/models/class.js

@@ -6,6 +6,8 @@ const {attr, belongsTo} = DS;
 export default DS.Model.extend({
   name: attr(),
   methods: attr(),
+  properties: attr(),
+  events: attr(),
   description: attr(),
   ogDescription: attr(),
   parentClass: belongsTo('class', {async: true, inverse: null}),

app/router.js

@@ -13,6 +13,12 @@ Router.map(function() {
       this.route('methods', {resetNamespace: true}, function() {
         this.route('method', {path: '/:method'});
       });
+      this.route('properties', {resetNamespace: true}, function() {
+        this.route('property', {path: '/:property'});
+      });
+      this.route('events', {resetNamespace: true}, function() {
+        this.route('event', {path: '/:event'});
+      });
     });
   });
 });

app/routes/project-version.js

@@ -40,6 +40,9 @@ export default Ember.Route.extend({
         case 'project-version.class':
           endingRoute = `classes/${this.modelFor(routeName).get('name')}`;
           break;
+        case 'project-version.class.index':
+          endingRoute = `classes/${this.modelFor('project-version.class').get('name')}`;
+          break;
         default:
           break;
       }

app/routes/project-version/class.js

@@ -14,7 +14,9 @@ export default Ember.Route.extend({
     const version = transition.params['project-version'].project_version;
     const klass = params.class;
 
-    return this.store.find('class', `${projectID}-${version}-${klass}`);
+    return this.store.find('class', `${projectID}-${version}-${klass}`).catch((error) => {
+      this.transitionTo('project-version'); // class doesn't exist in new version
+    });
   },
 
   afterModel(klass) {

app/styles/_class.scss

@@ -0,0 +1,13 @@
+article.chapter ul {
+  list-style-type: none;
+  -webkit-column-count: 2;
+  column-count: 2;
+  -webkit-column-gap: 1em;
+  column-count: 1em;
+  vertical-align: baseline;
+
+  li {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+}

app/styles/app.scss

@@ -3,6 +3,8 @@
 @import "neat";
 @import "./components/all";
 
+@import "class";
+
 body {
   margin: 0;
 }

app/styles/base/_lists.scss

@@ -81,10 +81,10 @@ dl {
   }
 }
 
-.method {
+.method, .property, .event {
   border-bottom: $base-border;
 
-  .method-name {
+  .method-name, .property-name, .event-name {
     font-family: $monospace-font-family;
   }
 }

app/templates/components/class-field-description.hbs

@@ -0,0 +1,20 @@
+<section class="{{type}}">
+  <h3 data-anchor="{{field.name}}">
+    <span class="{{field}}-name">{{field.name}}</span>
+    {{#if field.params}}
+      <span class="args">
+        ({{join ", " (map-by "name" field.params)}})
+      </span>
+    {{/if}}
+  </h3>
+  <dl class="parameters">
+    {{#each field.params as |param|}}
+      <div class="parameter">
+        <dt>{{param.name}}</dt>
+        <dd>{{param.type}}</dd>
+        <dd>{{param.description}}</dd>
+      </div>
+    {{/each}}
+  </dl>
+  {{{field.description}}}
+</section>

app/templates/events.hbs

@@ -0,0 +1,5 @@
+{{ember-anchor a="anchor" anchor=anchor}}
+
+{{#each model.events as |event|}}
+  {{class-field-description type="event" field=event}}
+{{/each}}

app/templates/methods.hbs

@@ -1,24 +1,5 @@
 {{ember-anchor a="anchor" anchor=anchor}}
 
 {{#each model.methods as |method|}}
-  <section class="method">
-    <h3 data-anchor="{{method.name}}">
-      <span class="method-name">{{method.name}}</span>
-      {{#if method.params}}
-        <span class="args">
-          ({{join ", " (map-by "name" method.params)}})
-        </span>
-      {{/if}}
-    </h3>
-    <dl class="parameters">
-      {{#each method.params as |param|}}
-        <div class="parameter">
-          <dt>{{param.name}}</dt>
-          <dd>{{param.type}}</dd>
-          <dd>{{param.description}}</dd>
-        </div>
-      {{/each}}
-    </dl>
-    {{{method.description}}}
-  </section>
+  {{class-field-description type="method" field=method}}
 {{/each}}

app/templates/project-version/class.hbs

@@ -16,6 +16,32 @@
     </ul>
   </section>
 
+  <section>
+    <h2>Properties</h2>
+    <ul class="spec-property-list">
+      {{#each model.properties as |property|}}
+        <li>
+          {{#link-to 'properties.property' model.project.id model.projectVersion.version model.name property.name (query-params anchor=property.name)}}
+            {{property.name}}
+          {{/link-to}}
+        </li>
+      {{/each}}
+    </ul>
+  </section>
+
+  <section>
+    <h2>Events</h2>
+    <ul class="spec-event-list">
+      {{#each model.events as |event|}}
+        <li>
+          {{#link-to 'events.event' model.project.id model.projectVersion.version model.name event.name (query-params anchor=event.name)}}
+            {{event.name}}
+          {{/link-to}}
+        </li>
+      {{/each}}
+    </ul>
+  </section>
+
   {{outlet}}
 
 </article>

app/templates/properties.hbs

@@ -0,0 +1,5 @@
+{{ember-anchor a="anchor" anchor=anchor}}
+
+{{#each model.properties as |property|}}
+  {{class-field-description type="property" field=property}}
+{{/each}}

tests/acceptance/class-test.js

@@ -0,0 +1,28 @@
+import moduleForAcceptance from 'ember-api-docs/tests/helpers/module-for-acceptance';
+import {test} from 'qunit';
+import $ from 'jquery';
+
+moduleForAcceptance('Class', {
+  beforeEach() {
+    return visit('/ember/1.0.0/classes/Container');
+  }
+});
+
+test('lists all the methods on the class page', function (assert) {
+  const store = this.application.__container__.lookup('service:store');
+  const container = store.peekRecord('class', 'ember-1.0.0-Container');
+  assert.equal($(findWithAssert('.spec-method-list li')).length, container.get('methods.length'));
+});
+
+test('lists all the properties on the class page', function (assert) {
+  const store = this.application.__container__.lookup('service:store');
+  const container = store.peekRecord('class', 'ember-1.0.0-Container');
+  assert.equal($(findWithAssert('.spec-property-list li')).length, container.get('properties.length'));
+});
+
+test('lists all the events on the class page', function (assert) {
+  const store = this.application.__container__.lookup('service:store');
+  const container = store.peekRecord('class', 'ember-1.0.0-Container');
+  assert.equal($(find('.spec-event-list li')).length, container.get('events.length'));
+});
+