Add inspect/details view
This commit is contained in:
parent
674aff63cf
commit
f190b6aabb
|
@ -123,7 +123,10 @@ linters:
|
|||
|
||||
PropertySpelling:
|
||||
enabled: true
|
||||
extra_properties: []
|
||||
extra_properties: [
|
||||
'grid-template-columns',
|
||||
'grid-column-start'
|
||||
]
|
||||
disabled_properties: []
|
||||
|
||||
PropertyUnits:
|
||||
|
|
|
@ -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>
|
||||
|
|
|
@ -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'),
|
||||
|
||||
|
|
|
@ -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'],
|
||||
|
||||
});
|
|
@ -6,6 +6,8 @@ const Router = EmberRouter.extend({
|
|||
rootURL: config.rootURL
|
||||
});
|
||||
|
||||
Router.map(function() {});
|
||||
Router.map(function() {
|
||||
this.route('inspect');
|
||||
});
|
||||
|
||||
export default Router;
|
||||
|
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
});
|
|
@ -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']
|
||||
}));
|
||||
});
|
||||
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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;
|
||||
}
|
||||
|
|
|
@ -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>
|
|
@ -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);
|
||||
});
|
|
@ -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);
|
||||
});
|
Loading…
Reference in New Issue