From f190b6aabb3da0158f1e2fd4f3d9dc4cd32ea578 Mon Sep 17 00:00:00 2001 From: Sebastian Kippe Date: Mon, 27 Nov 2017 20:23:21 +0100 Subject: [PATCH] Add inspect/details view --- .scss-lint.yml | 5 +- app/components/directory-listing/template.hbs | 2 +- app/controllers/index.js | 4 +- app/controllers/inspect.js | 15 ++++++ app/router.js | 4 +- app/routes/inspect.js | 52 +++++++++++++++++++ app/services/storage.js | 3 +- app/styles/_layout.scss | 32 ++++++++++++ app/styles/app.scss | 2 +- app/templates/inspect.hbs | 17 ++++++ tests/unit/controllers/inspect-test.js | 11 ++++ tests/unit/routes/inspect-test.js | 10 ++++ 12 files changed, 150 insertions(+), 7 deletions(-) create mode 100644 app/controllers/inspect.js create mode 100644 app/routes/inspect.js create mode 100644 app/templates/inspect.hbs create mode 100644 tests/unit/controllers/inspect-test.js create mode 100644 tests/unit/routes/inspect-test.js diff --git a/.scss-lint.yml b/.scss-lint.yml index 8c43684..7ecd5f0 100644 --- a/.scss-lint.yml +++ b/.scss-lint.yml @@ -123,7 +123,10 @@ linters: PropertySpelling: enabled: true - extra_properties: [] + extra_properties: [ + 'grid-template-columns', + 'grid-column-start' + ] disabled_properties: [] PropertyUnits: diff --git a/app/components/directory-listing/template.hbs b/app/components/directory-listing/template.hbs index 4082723..6a74444 100644 --- a/app/components/directory-listing/template.hbs +++ b/app/components/directory-listing/template.hbs @@ -10,7 +10,7 @@ {{/link-to}} {{else}} - {{#link-to "index"}} + {{#link-to "inspect" (query-params path=item.path)}} {{item-icon type=item.type}} {{item.name}} {{human-file-size item.size}} diff --git a/app/controllers/index.js b/app/controllers/index.js index 1eba4ab..75e1796 100644 --- a/app/controllers/index.js +++ b/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'), diff --git a/app/controllers/inspect.js b/app/controllers/inspect.js new file mode 100644 index 0000000..50ef1d0 --- /dev/null +++ b/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'], + +}); diff --git a/app/router.js b/app/router.js index 53c53c6..14bd061 100644 --- a/app/router.js +++ b/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; diff --git a/app/routes/inspect.js b/app/routes/inspect.js new file mode 100644 index 0000000..95c5649 --- /dev/null +++ b/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); + } + } + +}); diff --git a/app/services/storage.js b/app/services/storage.js index e1e5500..06ce5df 100644 --- a/app/services/storage.js +++ b/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'] })); }); diff --git a/app/styles/_layout.scss b/app/styles/_layout.scss index 436d3be..ad3659e 100644 --- a/app/styles/_layout.scss +++ b/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; + } + } + } + } +} diff --git a/app/styles/app.scss b/app/styles/app.scss index dbd25f9..f9c2df0 100644 --- a/app/styles/app.scss +++ b/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; } diff --git a/app/templates/inspect.hbs b/app/templates/inspect.hbs new file mode 100644 index 0000000..a6cbec2 --- /dev/null +++ b/app/templates/inspect.hbs @@ -0,0 +1,17 @@ +
+
+ Foo +
+
+
+
Name
+
{{model.documentMetaData.name}}
+
Content type
+
{{model.documentMetaData.type}}
+
Size
+
{{human-file-size model.documentMetaData.size}}
+
Revision (ETag)
+
{{model.documentMetaData.etag}}
+
+
+
\ No newline at end of file diff --git a/tests/unit/controllers/inspect-test.js b/tests/unit/controllers/inspect-test.js new file mode 100644 index 0000000..e778892 --- /dev/null +++ b/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); +}); diff --git a/tests/unit/routes/inspect-test.js b/tests/unit/routes/inspect-test.js new file mode 100644 index 0000000..114cd61 --- /dev/null +++ b/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); +});