Skip to content

Commit 386c210

Browse files
jeffreytujeffreytu
committed
add modal and create function for save and delete
1 parent f66c099 commit 386c210

2 files changed

Lines changed: 324 additions & 13 deletions

File tree

‎client/spa/js/learning-resource/learning-resources.html‎

Lines changed: 192 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,209 @@
1+
<style>
2+
.page-title {
3+
height: 50px;
4+
/*line-height: 50px;*/
5+
font-size: 26px;
6+
display: inline-block;
7+
bac
8+
}
9+
.btn-lrs-add, .btn-lrs-del {
10+
float: right;
11+
padding: 0 0 0 15px;
12+
}
13+
table[class^="lrs-tbl-h"] {
14+
border: 1px solid #4F4D4D;
15+
}
16+
.lrs-tbl th:hover {
17+
cursor: pointer;
18+
}
19+
.tbl-ft {
20+
height: 20px;
21+
background: #D6D6D6;
22+
width: 100%;
23+
}
24+
.lrs-tbl {
25+
border-bottom: 2px solid #CDCBCB;
26+
border-left: 1px solid #CDCBCB;
27+
border-right: 1px solid #CDCBCB;
28+
border-radius-top-left: 20px;
29+
margin-bottom: 70px;
30+
}
31+
input#lrs-check {
32+
width: 20px;
33+
height: 20px;
34+
border: none !important;
35+
}
36+
.btn-lrs-add:hover {
37+
cursor: pointer;
38+
}
39+
.fa-plus {
40+
color: #4EC435;
41+
}
42+
.lrs-tbl>thead>tr>th, .lrs-tbl>tbody>tr>th, .lrs-tbl>tfoot>tr>th, .lrs-tbl>thead>tr>td, .lrs-tbl>tbody>tr>td, .lrs-tbl>tfoot>tr>td {
43+
padding: 12px 20px;
44+
}
45+
.table-curved {
46+
border-collapse: separate;
47+
}
48+
.table-curved {
49+
border: solid #ccc 1px;
50+
border-radius: 6px;
51+
border-left: 1px solid #ccc;
52+
}
53+
.table-curved td {
54+
/*border-left: 1px solid #ccc;*/
55+
border-top: 1px solid #ccc;
56+
}
57+
.table-curved th {
58+
border-top: none;
59+
}
60+
.table-curved th:first-child {
61+
border-radius: 6px 0 0 0;
62+
}
63+
.table-curved th:last-child {
64+
border-radius: 0 6px 0 0;
65+
}
66+
.table-curved th:only-child{
67+
border-radius: 6px 6px 0 0;
68+
}
69+
.table-curved tr:last-child td:first-child {
70+
border-radius: 0 0 0 6px;
71+
}
72+
.table-curved tr:last-child td:last-child {
73+
border-radius: 0 0 6px 0;
74+
}
75+
.btn-lrs-del:hover {
76+
cursor: pointer;
77+
}
78+
</style>
179
<div class="container">
2-
<h3>Learning Resources</h3>
80+
<span id="msg" class="btn"></span>
81+
<div class="content-head">
82+
<div class="page-title">Learning Resources</div>
83+
<!-- Button trigger modal -->
84+
<span type="button" class="btn-lrs-del"><i class="fa fa-trash-o fa-2x"></i></span>
85+
<span type="button" class="btn-lrs-add"><i class="fa fa-plus fa-2x"></i></span>
86+
<!-- <span type="button" class="btn-lrs-add" data-toggle="modal" data-target="#myModal"><i class="fa fa-plus fa-2x"></i></span> -->
87+
<!-- <button id="add-button" type="button" class="btn btn-default" data-toggle="modal" data-target="#dialog">Add</button> -->
88+
</div>
389
<div class="table-responsive">
4-
<table class="lrs-tbl table table-bordered">
90+
<table class="lrs-tbl table-curved">
591
<tr class="lrs-tbl-header">
6-
<!-- <th class="lrs-tbl-h-n">#</th> -->
792
<th class="lrs-tbl-h-t"><a class="sortByTitle">Title</a></th>
893
<th class="lrs-tbl-h-rt"><a class="sortByResourceType">Type</a></th>
994
<th class="lrs-tbl-h-a"><a class="sortByAuthors">Authors</th>
1095
<th class="lrs-tbl-h-d"><a class="sortByDescription">Description</th>
96+
<th class="lrs-tbl-h-de"><a class="delResource"></th>
1197
</tr>
1298
<% _.each( models, function( model ){ %>
1399
<tr>
14-
<!-- <td></td> -->
15-
<td><%- model.attributes.title %></td>
100+
<td><a href="#learning-resources/<%- model.attributes.id %>"><%- model.attributes.title.substr(0,50) %></a></td>
16101
<td><%- model.attributes.resourceType %></td>
17102
<td><%- model.attributes.authors %></td>
18-
<td><%- model.attributes.description %></td>
103+
<td><%- model.attributes.description.substr(0,60) %></td>
104+
<td><input type="checkbox" id="lrs-check" value="<% if (model.attributes.id) { %><%= model.attributes.id %><% } else { %><%= 'na' %><% } %>"></td>
19105
</tr>
20106
<% }); %>
21107
</table>
22108
</div>
23109
</div>
110+
111+
<!-- Modal No Backbone -->
112+
<!-- <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
113+
<div class="modal-dialog">
114+
<div class="modal-content">
115+
<div class="modal-header">
116+
<button type="button" class="close" data-dismiss="modal">&times;<span class="sr-only">Close</span></button>
117+
<h4 class="modal-title">Add Learning Resource</h4>
118+
</div>
119+
<div class="modal-body">
120+
<form role="form" class="form-horizontal">
121+
<div class="form-group">
122+
<label class="col-sm-2" for="title">Title</label>
123+
<div class="col-sm-10">
124+
<input id="lrs-add-title" class="form-control" type="text" placeholder="Title" value="">
125+
</div>
126+
</div>
127+
<div class="form-group">
128+
<label class="col-sm-2" for="title">Resource Type</label>
129+
<div class="col-sm-10">
130+
<select id="lrs-add-resourceType" class="form-control">
131+
<option value="document">Document</option>
132+
<option value="link">Link</option>
133+
<option value="presentation">Presentation</option>
134+
</select>
135+
</div>
136+
</div>
137+
<div class="form-group">
138+
<label class="col-sm-2" for="tags">Authors</label>
139+
<div class="col-sm-10">
140+
<input id="lrs-add-authors" type="text" class="form-control" placeholder="Authors" value="">
141+
</div>
142+
</div>
143+
<div class="form-group">
144+
<label class="col-sm-2" for="description">Description</label>
145+
<div class="col-sm-10">
146+
<textarea id="lrs-add-description" class="form-control" rows="3" placeholder="Description" value=""></textarea>
147+
</div>
148+
</div>
149+
</form>
150+
</div>
151+
<div class="modal-footer">
152+
<button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancel</button> -->
153+
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
154+
<!-- <button type="button" id="lrs-add-save" class="btn btn-primary">Add</button>
155+
<button type="button" id="lrs-dismiss" data-dismiss="modal" hidden></button>
156+
</div>
157+
</div>
158+
</div>
159+
</div>
160+
-->
161+
<script id="dialog-template" type="text/template">
162+
<div class="modal-dialog">
163+
<div class="modal-content">
164+
<div class="modal-header">
165+
<button type="button" class="close" data-dismiss="modal">&times;<span class="sr-only">Close</span></button>
166+
<h4 class="modal-title">Add Learning Resource</h4>
167+
</div>
168+
<div class="modal-body">
169+
<form role="form" class="form-horizontal">
170+
<div class="form-group">
171+
<label class="col-sm-2" for="title">Title</label>
172+
<div class="col-sm-10">
173+
<input id="lrs-add-title" class="form-control" type="text" placeholder="Title" value="">
174+
</div>
175+
</div>
176+
<div class="form-group">
177+
<label class="col-sm-2" for="title">Resource Type</label>
178+
<div class="col-sm-10">
179+
<select id="lrs-add-resourceType" class="form-control">
180+
<option value="document">Document</option>
181+
<option value="link">Link</option>
182+
<option value="presentation">Presentation</option>
183+
</select>
184+
</div>
185+
</div>
186+
<div class="form-group">
187+
<label class="col-sm-2" for="tags">Authors</label>
188+
<div class="col-sm-10">
189+
<input id="lrs-add-authors" type="text" class="form-control" placeholder="Authors" value="">
190+
</div>
191+
</div>
192+
<div class="form-group">
193+
<label class="col-sm-2" for="description">Description</label>
194+
<div class="col-sm-10">
195+
<textarea id="lrs-add-description" class="form-control" rows="3" placeholder="Description" value=""></textarea>
196+
</div>
197+
</div>
198+
</form>
199+
</div>
200+
<div class="modal-footer">
201+
<button type="button" class="btn btn-danger pull-left" data-dismiss="modal">Cancel</button>
202+
<!-- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> -->
203+
<button type="button" id="lrs-add-save" class="btn btn-primary">Add</button>
204+
<button type="button" id="lrs-dismiss" data-dismiss="modal" hidden></button>
205+
</div>
206+
</div>
207+
</div>
208+
</div>
209+
</script>

‎client/spa/js/learning-resource/learning-resources.view.js‎

Lines changed: 132 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -2,12 +2,36 @@
22

33
var Backbone = require('../vendor/index').Backbone;
44
var _ = require('../vendor/index')._;
5+
var $ = require('../vendor/index').$;
6+
var Model = require('./learning-resource.model');
57

68
var fs = require('fs'); //will be replaced by brfs in the browser
79

810
// readFileSync will be evaluated statically so errors can't be caught
911
var template = fs.readFileSync(__dirname + '/learning-resources.html', 'utf8');
1012

13+
var showMessage = function(type, msg) {
14+
$('#msg').empty().addClass(type)
15+
.html(msg).fadeIn().delay(2000)
16+
.fadeOut('slow').queue(function(remove) {
17+
$('#msg').removeClass(type);
18+
remove();
19+
});
20+
};
21+
22+
var Add = Backbone.Model.extend({
23+
24+
urlRoot: '/learning-resources',
25+
26+
defaults: {
27+
title: '',
28+
resourceType: '',
29+
authors: '',
30+
description: ''
31+
},
32+
33+
});
34+
1135
module.exports = Backbone.View.extend({
1236

1337
className: 'learning-resources',
@@ -19,7 +43,9 @@ module.exports = Backbone.View.extend({
1943
'click .sortByTitle': 'sortByTitle',
2044
'click .sortByResourceType': 'sortByResourceType',
2145
'click .sortByAuthors': 'sortByAuthors',
22-
'click .sortByDescription': 'sortByDescription'
46+
'click .sortByDescription': 'sortByDescription',
47+
'click .btn-lrs-add': 'renderModal',
48+
'click .btn-lrs-del': 'delConfirm'
2349
},
2450

2551
initialize: function() {
@@ -35,16 +61,12 @@ module.exports = Backbone.View.extend({
3561
},
3662

3763
render: function() {
64+
console.log(this.collection.models);
3865
var context = this.collection;
3966
this.$el.html(this.template(context));
4067
return this;
4168
},
4269

43-
sortById: function(){
44-
this.collection.trigger('sortById');
45-
this.render();
46-
},
47-
4870
sortByTitle: function(){
4971
this.collection.trigger('sortByTitle');
5072
this.render();
@@ -63,7 +85,110 @@ module.exports = Backbone.View.extend({
6385
sortByDescription: function(){
6486
this.collection.trigger('sortByDescription');
6587
this.render();
66-
}
88+
},
89+
90+
renderModal: function(){
91+
var view = new ResourceDialog();
92+
view.render();
93+
},
94+
95+
delConfirm: function() {
96+
var collection = this.collection;
97+
var checkedIds = [];
98+
if ($(':checkbox:checked').length === 0) {
99+
showMessage('alert-info', 'No resources selected');
100+
}
101+
else {
102+
$(':checkbox:checked').each(function () {
103+
console.log($(this).val());
104+
checkedIds.push($(this).val());
105+
});
106+
$.each(checkedIds, function(key, value) {
107+
console.log(value);
108+
var item = collection.get({id:value});
109+
item.destroy();
110+
collection.remove({id:value});
111+
});
112+
}
113+
},
67114

68115
});
69116

117+
var ResourceDialog = Backbone.View.extend({
118+
className: 'modal fade',
119+
attributes: {
120+
tabindex: '-1',
121+
role: 'dialog',
122+
},
123+
124+
initialize: function() {
125+
this.model = this.model || new Add();
126+
this.temp = _.template($('#dialog-template').html());
127+
},
128+
129+
events: {
130+
'click #lrs-add-save': 'saveNewResource',
131+
'click .close': 'close'
132+
},
133+
134+
render: function() {
135+
var context = this.model.toJSON();
136+
this.$el.html(this.temp(context)).appendTo(document.body);
137+
this.$el.modal();
138+
return this;
139+
},
140+
141+
close: function() {
142+
this.remove();
143+
},
144+
145+
saveNewResource: function(){
146+
147+
var newResource = new Model();
148+
149+
var authorsFormat = function(authored) {
150+
var authors = [];
151+
// console.log($('#auth').val().split(','));
152+
// if ($('#lrs-add-authors').val() === '') authors = null;
153+
// else {
154+
// $.each($('#lrs-add-authors').val().split(','), function(key,value){
155+
// console.log(value);
156+
// authors.push(value.trim());
157+
// });
158+
// }
159+
authored(authors);
160+
};
161+
162+
var saveArgs = {
163+
attributes: {
164+
title: $('#lrs-add-title').val().trim(),
165+
resourceType: $('#lrs-add-resourceType option:selected').val(),
166+
description: $('#lrs-add-description').val().trim(),
167+
authors: $('#lrs-add-authors').val().split(',')
168+
},
169+
options: {
170+
success: function(response){
171+
$('#lrs-dismiss').click();
172+
setTimeout(function() {
173+
// collection.fetch();
174+
// collection.add(saveArgs.attributes);
175+
$('table tr td').find('[value="na"]').attr('value', response.id);
176+
}, 400);
177+
178+
showMessage('alert-success', 'Successfully updated');
179+
console.log('success');
180+
},
181+
error: function(model, error){
182+
//server response errors if no validations specified
183+
}
184+
}
185+
};
186+
187+
newResource.save(saveArgs.attributes, saveArgs.options);
188+
189+
// if (newResource.validationError) {
190+
// showMessage('alert-danger', this.model.validationError);
191+
// }
192+
},
193+
194+
});

0 commit comments

Comments
 (0)