Add inspect/details view

.scss-lint.yml

@@ -123,7 +123,10 @@ linters:
 
   PropertySpelling:
     enabled: true
-    extra_properties: []
+    extra_properties: [
+      'grid-template-columns',
+      'grid-column-start'
+    ]
     disabled_properties: []
 
   PropertyUnits:

app/components/directory-listing/template.hbs

@@ -10,7 +10,7 @@
       {{/link-to}}
     {{else}}
       <!-- TODO link to item -->
-      {{#link-to "index"}}
+      {{#link-to "inspect" (query-params path=item.path)}}
         <span class="icon">{{item-icon type=item.type}}</span>
         <span class="name">{{item.name}}</span>
         <span class="size">{{human-file-size item.size}}</span>

app/controllers/index.js

@@ -9,8 +9,8 @@ export default Controller.extend({
   application: controller(),
   storage: service(),
 
-  connecting: alias('storage.connecting'),
-  connected: alias('storage.connected'),
+  // connecting: alias('storage.connecting'),
+  // connected: alias('storage.connected'),
   rootListing: alias('storage.rootListing'),
   currentDirPath: alias('application.currentDirPath'),
 

app/controllers/inspect.js

@@ -0,0 +1,15 @@
+import Controller from '@ember/controller';
+import { inject as controller } from '@ember/controller';
+import { inject as service } from '@ember/service';
+import { alias } from '@ember/object/computed';
+
+export default Controller.extend({
+
+  application: controller(),
+  storage: service(),
+
+  currentDirPath: alias('application.currentDirPath'),
+
+  queryParams: ['path'],
+
+});

app/router.js

@@ -6,6 +6,8 @@ const Router = EmberRouter.extend({
   rootURL: config.rootURL
 });
 
-Router.map(function() {});
+Router.map(function() {
+  this.route('inspect');
+});
 
 export default Router;

app/routes/inspect.js

@@ -0,0 +1,52 @@
+import Route from '@ember/routing/route';
+import { inject as service } from '@ember/service';
+import { isEmpty, isPresent } from '@ember/utils';
+
+export default Route.extend({
+
+  storage: service(),
+
+  queryParams: {
+    path: {
+      refreshModel: true
+    }
+  },
+
+  model(params) {
+    let path = params.path;
+
+    if (isEmpty(params.path)) {
+      // TODO redirect to root
+    }
+    if (path.substr(-1) === '/') {
+      // TODO redirect to parent dir
+    }
+
+    let parentDirPath = path.match(/^(.*\/).+$/)[1];
+    let documentName  = path.match(/^.*\/(.+)$/)[1];
+
+    // FIXME do a HEAD request instead of fetching parent listing
+    return this.get('storage').fetchListing(parentDirPath).then(listing => {
+      let metaData = listing.findBy('name', documentName);
+      return metaData;
+    }).then(metaData => {
+      return {
+        documentMetaData: metaData,
+        currentDirPath: parentDirPath
+      };
+    });
+  },
+
+  setupController(controller, model) {
+    this._super(controller, model);
+
+    if (isEmpty(this.get('storage.categories')) && this.get('storage.connected')) {
+      this.get('storage').fetchRootListing();
+    }
+
+    if (isPresent(model)) {
+      controller.set('currentDirPath', model.currentDirPath);
+    }
+  }
+
+});

app/services/storage.js

@@ -92,7 +92,8 @@ export default Service.extend({
           type: type,
           isFolder: type === 'folder',
           size: item['Content-Length'] || null,
-          path: path + name
+          path: path + name,
+          etag: item['ETag']
         }));
       });
 

app/styles/_layout.scss

@@ -42,3 +42,35 @@
     }
   }
 }
+
+.inspect-details {
+  width: 100%;
+  display: grid;
+  grid-template-columns: 1.618fr 2rem 1fr;
+
+  section {
+    border-top: 1px solid $light-grey-2;
+    padding: 1.5rem 1px;
+
+    &.content {
+      // foo
+    }
+
+    &.meta {
+      grid-column-start: 3;
+      dl {
+        margin: 0;
+        dt, dd {
+          display: block;
+        }
+        dt {
+          color: $dark-grey-3;
+          margin-bottom: 0.5rem;
+        }
+        dd {
+          margin: 0 0 1.5rem 0;
+        }
+      }
+    }
+  }
+}

app/styles/app.scss

@@ -11,7 +11,7 @@ body {
   background-color: white;
   font-size: 16px;
   font-family: Open Sans, sans-serif;
-  color: #222;
+  color: $dark-grey-1;
   margin: 0;
   padding: 0;
 }

app/templates/inspect.hbs

@@ -0,0 +1,17 @@
+<div class="inspect-details">
+  <section class="content">
+    Foo
+  </section>
+  <section class="meta">
+    <dl>
+      <dt>Name</dt>
+      <dd>{{model.documentMetaData.name}}</dd>
+      <dt>Content type</dt>
+      <dd>{{model.documentMetaData.type}}</dd>
+      <dt>Size</dt>
+      <dd>{{human-file-size model.documentMetaData.size}}</dd>
+      <dt>Revision (ETag)</dt>
+      <dd>{{model.documentMetaData.etag}}</dd>
+    </dl>
+  </section>
+</div>

tests/unit/controllers/inspect-test.js

@@ -0,0 +1,11 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('controller:inspect', 'Unit | Controller | inspect', {
+  needs: ['controller:application', 'service:storage']
+});
+
+// Replace this with your real tests.
+test('it exists', function(assert) {
+  let controller = this.subject();
+  assert.ok(controller);
+});

tests/unit/routes/inspect-test.js

@@ -0,0 +1,10 @@
+import { moduleFor, test } from 'ember-qunit';
+
+moduleFor('route:inspect', 'Unit | Route | inspect', {
+  needs: ['service:storage']
+});
+
+test('it exists', function(assert) {
+  let route = this.subject();
+  assert.ok(route);
+});