Skip to content

Commit

Permalink
Merge pull request #35 from adiwg/feature-33-record-dashboards
Browse files Browse the repository at this point in the history 
Feature 33 record dashboards
  • Loading branch information
@stansmith907
stansmith907 committed May 24, 2016
2 parents 8113a5a + b46097d commit f8f4a92
Show file tree
Hide file tree
Showing 9 changed files with 270 additions and 78 deletions.
29 changes: 29 additions & 0 deletions app/pods/contacts/route.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,33 @@
import Ember from 'ember';

export default Ember.Route.extend({
model() {
return this.store.findAll('contact');
},

actions: {
deleteItem: function(item) {
let message =
"Do you really want to delete this contact?\n\n" +
"Be sure this contact is not referenced by a metadata record or dictionary " +
"or it's deletion may cause those records to not validate.";
this._deleteItem(item, message);
},

editItem: function(item) {
this.transitionTo('contact.show.edit', item);
}
},

// action methods
_deleteItem(item, message) {
if (window.confirm(message)) {
item.destroyRecord().then(function() {
console.log('+-- deleted contact ID:', item.id);
}, function() {
console.log('+-- delete contact failed');
});
}
}

});
34 changes: 34 additions & 0 deletions app/pods/contacts/template.hbs
View file
Original file line number Diff line number Diff line change
@@ -1 +1,35 @@
<h3>Contacts Dashboard</h3>
<div class="container-fluid">
<br>
<table class="table table-striped table-hover">
<thead>
<th></th>
<th>#</th>
<th>Contact ID</th>
<th>Individual Name</th>
<th>Organization Name</th>
<th></th>
</thead>
<tbody>
{{#each model key="@index" as |item index|}}
<tr>
<td>{{input type="checkbox" name="isChecked"}}</td>
<td>{{index}}</td>
<td>{{item.json.contactId}}</td>
<td>{{item.json.individualName}}</td>
<td>{{item.json.organizationName}}</td>
<td>
<button class="btn btn-xs btn-danger pull-right" {{action "deleteItem" item}}>
<span class="fa fa-times"></span> Delete
</button>
<span class="pull-right">&nbsp;</span>
<button class="btn btn-xs btn-warning pull-right" {{action "editItem" item}}>
<span class="fa fa-pencil"></span> Edit
</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{outlet}}
29 changes: 29 additions & 0 deletions app/pods/dictionaries/route.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,33 @@
import Ember from 'ember';

export default Ember.Route.extend({
model() {
return this.store.findAll('dictionary');
},

actions: {
deleteItem: function(item) {
let message =
"Do you really want to delete this dictionary?\n\n" +
"Be sure this dictionary is not referenced by an metadata records " +
"or it's deletion may cause those records to not validate.";
this._deleteItem(item, message);
},

editItem: function(item) {
this.transitionTo('dictionary.show.edit', item);
}
},

// action methods
_deleteItem(item, message) {
if (window.confirm(message)) {
item.destroyRecord().then(function() {
console.log('+-- deleted dictionary ID:', item.id);
}, function() {
console.log('+-- delete dictionary failed');
});
}
}

});
33 changes: 32 additions & 1 deletion app/pods/dictionaries/template.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,2 +1,33 @@
List Dictionaries
<h3>Dictionary Dashboard</h3>
<div class="container-fluid">
<br>
<table class="table table-striped table-hover">
<thead>
<th></th>
<th>#</th>
<th>Dictionary Name</th>
<th>Data Resource Type</th>
<th></th>
</thead>
<tbody>
{{#each model key="@index" as |item index|}}
<tr>
<td>{{input type="checkbox" name="isChecked"}}</td>
<td>{{index}}</td>
<td>{{item.json.dictionaryInfo.citation.title}}</td>
<td>{{item.json.dictionaryInfo.resourceType}}</td>
<td>
<button class="btn btn-xs btn-danger pull-right" {{action "deleteItem" item}}>
<span class="fa fa-times"></span> Delete
</button>
<span class="pull-right">&nbsp;</span>
<button class="btn btn-xs btn-warning pull-right" {{action "editItem" item}}>
<span class="fa fa-pencil"></span> Edit
</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{outlet}}
30 changes: 27 additions & 3 deletions app/pods/records/route.js
View file
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import Ember from 'ember';

export default Ember.Route.extend({
/*beforeModel() {
this.transitionTo('records.list');
},*/
model() {
return this.store.findAll('record');
},

renderTemplate() {
this.render('records.nav', {
Expand All @@ -13,5 +13,29 @@ export default Ember.Route.extend({
this.render('records', {
into: 'application'
});
},

actions: {
deleteItem: function(item) {
let message =
"Do you really want to delete this record?";
this._deleteItem(item, message);
},

editItem: function(item) {
this.transitionTo('record.show.edit', item);
}
},

// action methods
_deleteItem(item, message) {
if (window.confirm(message)) {
item.destroyRecord().then(function() {
console.log('+-- deleted record ID:', item.id);
}, function() {
console.log('+-- delete record failed');
});
}
}

});
99 changes: 31 additions & 68 deletions app/pods/records/template.hbs
View file
Original file line number Diff line number Diff line change
@@ -1,70 +1,33 @@
<h3>List of records.</h3>

<div class="bs-example" data-example-id="contextual-table">
<table class="table">
<thead>
<tr>
<h3>Metadata Record Dashboard</h3>
<div class="container-fluid">
<br>
<table class="table table-striped table-hover">
<thead>
<th></th>
<th>#</th>
<th>Column heading</th>
<th>Column heading</th>
<th>Column heading</th>
</tr>
</thead>
<tbody>
<tr class="active">
<th scope="row">1</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="success">
<th scope="row">3</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="info">
<th scope="row">5</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="warning">
<th scope="row">7</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
<tr class="danger">
<th scope="row">9</th>
<td>Column content</td>
<td>Column content</td>
<td>Column content</td>
</tr>
</tbody>
</table>
<th>Record Name</th>
<th>Resource Type</th>
<th></th>
</thead>
<tbody>
{{#each model key="@index" as |item index|}}
<tr>
<td>{{input type="checkbox" name="isChecked"}}</td>
<td>{{index}}</td>
<td>{{item.json.metadata.resourceInfo.citation.title}}</td>
<td>{{item.json.metadata.resourceInfo.resourceType}}</td>
<td>
<button class="btn btn-xs btn-danger pull-right" {{action "deleteItem" item}}>
<span class="fa fa-times"></span> Delete
</button>
<span class="pull-right">&nbsp;</span>
<button class="btn btn-xs btn-warning pull-right" {{action "editItem" item}}>
<span class="fa fa-pencil"></span> Edit
</button>
</td>
</tr>
{{/each}}
</tbody>
</table>
</div>
{{outlet}}
31 changes: 29 additions & 2 deletions tests/unit/pods/contacts/route-test.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,38 @@
import { moduleFor, test } from 'ember-qunit';

let originalConfirm;

moduleFor('route:contacts', 'Unit | Route | contacts', {
// Specify the other units that are required for this test.
// needs: ['controller:foo']
beforeEach() {
originalConfirm = window.confirm;
},

afterEach() {
window.confirm = originalConfirm;
}
});

test('it exists', function(assert) {
var route = this.subject();
assert.ok(route);
});

test('should display a confirm', function(assert) {
assert.expect(2);

let route = this.subject();

// test _deleteItem to displays the expected window.confirm message
const expectedTextFoo = 'foo';
window.confirm = (message) => {
assert.equal(message, expectedTextFoo, 'expect confirm to display ${expectedTextFoo}');
};
route._deleteItem(0, expectedTextFoo);

// test action deleteItem calls _deleteItem and displays a window.confirm
window.confirm = (message) => {
assert.ok(message, 'expect confirm to display a message');
};
route.send('deleteItem', 0);

});
32 changes: 30 additions & 2 deletions tests/unit/pods/dictionaries/route-test.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,39 @@
import { moduleFor, test } from 'ember-qunit';

let originalConfirm;

moduleFor('route:dictionaries', 'Unit | Route | dictionaries', {
// Specify the other units that are required for this test.
// needs: ['controller:foo']
beforeEach() {
originalConfirm = window.confirm;
},

afterEach() {
window.confirm = originalConfirm;
}
});

test('it exists', function(assert) {
var route = this.subject();
assert.ok(route);
});

test('should display a confirm', function(assert) {
assert.expect(2);

let route = this.subject();

// test _deleteItem to displays the expected window.confirm message
const expectedTextFoo = 'foo';
window.confirm = (message) => {
assert.equal(message, expectedTextFoo, 'expect confirm to display ${expectedTextFoo}');
};
route._deleteItem(0, expectedTextFoo);

// test action deleteItem calls _deleteItem and displays a window.confirm
window.confirm = (message) => {
assert.ok(message, 'expect confirm to display a message');
};
route.send('deleteItem', 0);

});

Loading

10 comments on commit f8f4a92

@jlblcc
Copy link
Member

@jlblcc jlblcc commented on f8f4a92 Jun 6, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Need to fix before merging:

  • Remove calls to console.log
  • Don't use <br> tags for layout, use CSS if needed
  • Don't use <span class="pull-right">&nbsp;</span> for layout, use CSS if needed
  • key=@index is unnecessary, see here and here

@stansmith907
Copy link
Contributor Author

@stansmith907 stansmith907 commented on f8f4a92 Jun 7, 2016 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stansmith907
Copy link
Contributor Author

@stansmith907 stansmith907 commented on f8f4a92 Jun 7, 2016 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stansmith907
Copy link
Contributor Author

@stansmith907 stansmith907 commented on f8f4a92 Jun 7, 2016 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stansmith907
Copy link
Contributor Author

@stansmith907 stansmith907 commented on f8f4a92 Jun 7, 2016 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@stansmith907
Copy link
Contributor Author

@stansmith907 stansmith907 commented on f8f4a92 Jun 7, 2016 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@jlblcc
Copy link
Member

@jlblcc jlblcc commented on f8f4a92 Jun 7, 2016 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm fine with eliminating the </br>and just letting the <h3> and <div>
butt up without whitespace. That keeps the bootstrap design in place.

We can easily adjust this with CSS. For example:

.row.placeholders {
    padding-top: 15px;
}

.placeholder .img-responsive {
    margin: auto;
}

I'm not sure what the dashboard is going to look like in the end, so I wouldn't worry about it too much right now.

@jlblcc
Copy link
Member

@jlblcc jlblcc commented on f8f4a92 Jun 7, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure you want to eliminate key=@Index? see
http://emberjs.com/api/classes/Ember.Templates.helpers.html#toc_specifying-keys

Per the link above, the key defaults to @guid or @item. See also here. It's just redundant unless you want to use something other than the defaults.

@jlblcc
Copy link
Member

@jlblcc jlblcc commented on f8f4a92 Jun 7, 2016

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Sure you want to delete the console messages? They are info about deleting
records...

// action methods
_deleteItem(item, message) {
if (window.confirm(message)) {
item.destroyRecord().then(function() {
console.log('+-- deleted contact ID:', item.id);
}, function() {
console.log('+-- delete contact failed');
});
}
}

Do you want a window message if the record fails to delete?

WE shouldn't have console.logs in the production app (or dev branch). We really should employ a universal messaging framework, some thing like this: http://simonwade.me/assets/ember-demos/#/ember-notify

@stansmith907
Copy link
Contributor Author

@stansmith907 stansmith907 commented on f8f4a92 Jun 8, 2016 via email

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.