mirror of
https://github.com/lukevella/rallly.git
synced 2025-05-25 14:56:22 +02:00
Improved inline edit feature
This commit is contained in:
parent
10c035e359
commit
0eeb4866f4
10 changed files with 65 additions and 21 deletions
|
@ -13,7 +13,7 @@ exports.create = function(req, res){
|
|||
exports.show = function(req, res, next){
|
||||
Event.findById(req.params.id, function(err, event){
|
||||
if (err) return handleError(res, err);
|
||||
if (!event) return res.status(404);
|
||||
if (!event) return res.status(404).end();
|
||||
return res.json(event);
|
||||
});
|
||||
}
|
||||
|
@ -39,6 +39,23 @@ exports.createParticipant = function(req, res, next){
|
|||
});
|
||||
}
|
||||
|
||||
exports.updateParticipant = function(req, res, next){
|
||||
var eventId = req.params.id;
|
||||
var participantId = req.params.pid;
|
||||
Event.update({
|
||||
'_id' : eventId,
|
||||
'participants._id': participantId
|
||||
}, {
|
||||
'$set': {
|
||||
'updated' : Date.now(),
|
||||
'participants.$' : req.body
|
||||
}
|
||||
}, function(err, num){
|
||||
if (err) return next(err);
|
||||
res.status(204).end();
|
||||
});
|
||||
}
|
||||
|
||||
exports.deleteParticipant = function(req, res, next){
|
||||
var eventId = req.params.id;
|
||||
var participantId = req.params.pid;
|
||||
|
|
|
@ -9,4 +9,5 @@ router.get('/:id', controller.show);
|
|||
router.post('/:id/participant', controller.createParticipant);
|
||||
router.put('/:id', controller.update);
|
||||
router.delete('/:id/participant/:pid', controller.deleteParticipant);
|
||||
router.put('/:id/participant/:pid', controller.updateParticipant);
|
||||
module.exports = router;
|
||||
|
|
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -1,7 +1,9 @@
|
|||
angular.module('rallly')
|
||||
.controller('EventCtrl', function($scope, $http, $state, Event, Participant){
|
||||
var id = $state.params.id;
|
||||
$scope.event = Event.get({id:id});
|
||||
$scope.event = Event.get({id:id}, function(data){}, function(e){
|
||||
$state.go('notfound');
|
||||
});
|
||||
$scope.delete = function(participant){
|
||||
if (confirm("Are you sure you want to remove "+participant.name+"?")){
|
||||
Participant.remove({ id : id , pid : participant._id }, function(event){
|
||||
|
@ -12,7 +14,11 @@ angular.module('rallly')
|
|||
$scope.defaults = [];
|
||||
|
||||
$scope.update = function(participant){
|
||||
Event.update({'_id':$scope.event.id}, $scope.event);
|
||||
Participant.update({
|
||||
id : $scope.event._id,
|
||||
pid : participant._id
|
||||
}, participant);
|
||||
// Event.update({'_id':$scope.event.id}, $scope.event);
|
||||
}
|
||||
$scope.edit = function(participant){
|
||||
$scope.defaults[$scope.event.participants.indexOf(participant)] = angular.copy(participant);
|
||||
|
|
|
@ -28,5 +28,7 @@ angular.module('rallly', ['ui.router','ngResource','ngFx'])
|
|||
});
|
||||
})
|
||||
.factory('Participant', function($resource){
|
||||
return $resource('/api/event/:id/participant/:pid', { id: '@_id', pid : '@pid'});
|
||||
return $resource('/api/event/:id/participant/:pid', { id: '@_id', pid : '@pid'}, {
|
||||
'update' : { method : 'PUT' }
|
||||
});
|
||||
});
|
||||
|
|
|
@ -16,6 +16,9 @@
|
|||
color: $dark-gray-clr;
|
||||
text-decoration:none;
|
||||
padding: em(8px) em(20px);
|
||||
&.danger {
|
||||
color: $red-clr;
|
||||
}
|
||||
&:focus {
|
||||
outline:0;
|
||||
}
|
||||
|
|
|
@ -15,6 +15,23 @@
|
|||
padding-bottom:em(10px);
|
||||
box-shadow: 0 3px 0 rgba(black, 0.05);
|
||||
}
|
||||
tr:nth-child(even){
|
||||
td {
|
||||
background: #F9FAFA;
|
||||
}
|
||||
}
|
||||
tr:hover {
|
||||
td {
|
||||
color: $blue-clr;
|
||||
background: rgba(#F6FBFF,0.5);
|
||||
}
|
||||
.hover {
|
||||
visibility:visible;
|
||||
}
|
||||
}
|
||||
.hover {
|
||||
visibility: hidden;
|
||||
}
|
||||
td {
|
||||
&.center {
|
||||
text-align:center;
|
||||
|
@ -29,7 +46,7 @@
|
|||
.event-poll-user {
|
||||
text-align:left;
|
||||
font-size: em(14px);
|
||||
padding: em(12px) em(10px);
|
||||
padding: em(12px) em(20px);
|
||||
img {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
@ -37,6 +54,7 @@
|
|||
border:1px solid #ddd;
|
||||
padding: em(5px) em(10px);
|
||||
border-radius: 3px;
|
||||
color: $text-clr;
|
||||
&:focus {
|
||||
outline:0;
|
||||
border-color: $primary-clr;
|
||||
|
|
|
@ -1,22 +1,19 @@
|
|||
<div ng-show="event">
|
||||
<div ng-show="event._id">
|
||||
<div class="event-details">
|
||||
<h1>{{event.title}}</h1>
|
||||
<h1 class="fx-rotate-clock">{{event.title}}</h1>
|
||||
<ul class="event-detail-list">
|
||||
<li class="event-created-by">
|
||||
Created by <a href="{{event.creator.email}}">{{event.creator.name}}</a>
|
||||
Created by: <a href="{{event.creator.email}}">{{event.creator.name}}</a>
|
||||
</li>
|
||||
<li>
|
||||
Created on {{event.created | date : 'short'}}
|
||||
Created on: {{event.created | date : 'medium'}}
|
||||
</li>
|
||||
<li>
|
||||
Last updated {{event.updated | date : 'short'}}
|
||||
Last updated: {{event.updated | date : 'medium'}}
|
||||
</li>
|
||||
<li ng-show="event.location" class="event-location">
|
||||
{{event.location}}
|
||||
</li>
|
||||
<li ng-show="event.participants.length">
|
||||
{{event.participants.length}} participants
|
||||
</li>
|
||||
</ul>
|
||||
<div ng-show="event.description" class="event-description">{{event.description}}</div>
|
||||
</div>
|
||||
|
@ -61,10 +58,10 @@
|
|||
<input ng-model="participant.dates[$index]" ng-show="editMode" ng-false-value="false" type="checkbox" />
|
||||
</td>
|
||||
<td>
|
||||
<a ng-hide="editMode" href="javascript:" ng-click="editMode = true; edit(participant)" class="btn-primary">Edit</a>
|
||||
<a ng-hide="editMode" href="javascript:" ng-click="delete(participant)" class="btn-primary">Delete</a>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; update(participant)" class="btn-primary">Save</a>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; cancel($index)" class="btn-primary">Cancel</a>
|
||||
<a ng-hide="editMode" href="javascript:" ng-click="editMode = true; edit(participant)" class="btn-primary hover">Edit</a>
|
||||
<a ng-hide="editMode" href="javascript:" ng-click="delete(participant)" class="btn-primary danger hover">Delete</a>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; update(participant)" class="btn-primary hover">Save</a>
|
||||
<a ng-show="editMode" href="javascript:" ng-click="editMode = false; cancel($index)" class="btn-primary hover">Cancel</a>
|
||||
</td>
|
||||
</tr>
|
||||
<tr class="event-poll-input">
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue