Skip to content

Commit

Permalink
Polished off annoation-comments
Browse files Browse the repository at this point in the history 
- Adpated annotation comments to the new API format
- Converted links to buttons where appropriate
- Fully implemented reporting comments functionality (and reported warning icon / font color)
- Ensured basic form validation was working.
- Fixed the date formatting for comments
- Simplified and refactored the forms
- Added functionality to bawResource so that it does not expect an array result for `query()` calls
  • Loading branch information
@atruskie
atruskie committed Dec 12, 2014
1 parent 8a7b1d0 commit b6573cf
Show file tree
Hide file tree
Showing 8 changed files with 136 additions and 57 deletions.
9 changes: 9 additions & 0 deletions src/app/annotationLibrary/_annotationLibrary.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,15 @@ $loadGifPath: image-url('load.gif');

.library-single-info {
margin: 0 auto 0 auto;

& .reported {
color: $brand-danger;
margin: 0 $padding-base-horizontal;
}

& .reported-comment {
color: $gray-lighter;
}
}

/* Shared spectrogram and grid */
Expand Down
52 changes: 31 additions & 21 deletions src/app/annotationLibrary/annotationItem.tpl.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ <h3 class="panel-title pull-left">Details</h3>

class="list-group-item" title="Reference tag.">
<span class="glyphicon glyphicon-book"></span>&nbsp;
Reference Tag
Reference Annotation
</a>
<a ng-href="{{annotation.urls.listen}}" class="list-group-item" title="Start date.">
<span class="glyphicon glyphicon-record"></span>&nbsp;
Expand Down Expand Up @@ -116,17 +116,19 @@ <h4 class="media-heading">
<small title="now">now</small>
</h4>

<form role="form">
<form role="form" name="createCommentForm">
<div class="form-group" ng-class="{'has-error': newComment.errors.length > 0}">
<textarea class="form-control"
<textarea class="form-control" required
placeholder="{{comments.length < 1 ? 'Add a comment' : 'Continue the discussion'}}"
style="width:90%" id="addAnnotationComment"
ng-model="newComment.text"></textarea>
<span class="help-block" ng-show="newComment.errors.length > 0"
ng-repeat="error in newComment.errors">{{error}}</span>
</div>
<button type="submit" class="btn btn-default" ng-click="createComment()">Post
</button>
<div class="form-group">
<button type="submit" class="btn btn-default" ng-click="createComment()">Post
</button>
</div>
</form>

</div>
Expand All @@ -140,40 +142,48 @@ <h4 class="media-heading">
</a>

<div class="media-body">
<p class="pull-right" ng-show="comment.updaterId == profile.id">
<a href="{{$parent.createCommentLinkUrl(comment.id)}}">link</a> |
<a href="" ng-click="editComment(comment.comment, comment.id)">edit</a> |
<a href="" ng-click="deleteComment(comment.comment, comment.id)">delete</a>
</p>
<div class="pull-right">
<a href="{{$parent.createCommentLinkUrl(comment.id)}}">link</a>

<ng-switch class="btn-group btn-group-xs"
role="group" on="comment.creatorId == profile.id">
<button ng-switch-when="true" type="button" class="btn btn-default"
ng-click="editComment(comment)">edit</button>
<button ng-switch-when="true" type="button" class="btn btn-default"
ng-click="deleteComment(comment.comment, comment.id)">delete</button>
<button ng-switch-when="false" type="button" class="btn btn-default"
ng-show="!comment.flag"
ng-click="reportComment(comment)">report</button>
</ng-switch>
<span class="reported glyphicon glyphicon-warning-sign"
ng-show="comment.flag"
title="This comment has been reported as inappropriate" ></span>
</div>

<p class="pull-right" ng-show="comment.updaterId != profile.id">
<a href="{{$parent.createCommentLinkUrl(comment.id)}}">link</a> |
<a href="" ng-click="reportComment(comment.id)">report</a>
</p>
<h4 class="media-heading">
{{comment.updater.userName}}
<small title="{{comment.updatedAt}}">
last change {{$parent.formatTimeAgo(comment.updatedAt, 'YYYY-MM-DDTHH:mm:ssZZ')}}
last change {{formatTimeAgo(comment.updatedAt)}}
</small>
</h4>
<p ng-show="$parent.editComment.id != comment.id">
<p ng-show="!comment.editing" ng-class="{'reported-comment':comment.flag}">
{{comment.comment}}
</p>

<form role="form" ng-show="$parent.editComment.id == comment.id">
<form role="form" name="updateForm" ng-show="comment.editing" >
<div class="form-group" ng-class="{'has-error': editComment.errors.length > 0}">
<textarea class="form-control"
<textarea class="form-control" required
placeholder="Add a comment / Continue the discussion"
style="width:90%" id="{{'editAnnotationComment'+comment.id}}"
ng-model="$parent.editComment.text"></textarea>
ng-model="comment.comment"></textarea>
<span class="help-block" ng-show="$parent.editComment.errors.length > 0"
ng-repeat="error in $parent.editComment.errors">{{error}}</span>
</div>
<button type="submit" class="btn btn-primary" ng-click="updateComment(comment.id)">
<button type="submit" class="btn btn-primary" ng-click="updateComment(comment, updateForm)">
Update
</button>
<button type="submit" class="btn btn-default"
ng-click="$parent.editComment.id = null">
ng-click="comment.editing = false">
cancel
</button>
</form>
Expand Down
85 changes: 57 additions & 28 deletions src/app/annotationLibrary/annotationLibrary.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -313,15 +313,15 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
}])
.controller('AnnotationItemCtrl',
['$scope', '$location', '$resource', '$routeParams', '$url',
'conf.paths', 'conf.constants', 'bawApp.unitConverter',
'conf.paths', 'conf.constants', 'bawApp.unitConverter', 'moment',
'AudioEvent', 'Tag',
'Media', 'baw.models.Media', 'UserProfile', 'AudioEventComment',
'Media', 'baw.models.Media', 'UserProfileEvents', 'UserProfile', 'AudioEventComment',
function ($scope, $location, $resource, $routeParams, $url,
paths, constants, unitConverter,
paths, constants, unitConverter, moment,
AudioEvent, Tag,
MediaService, Media, UserProfile, AudioEventComment) {
MediaService, Media, UserProfileEvents, UserProfile, AudioEventComment) {

$scope.$on(UserProfile.eventKeys.loaded, profileLoaded);
$scope.$on(UserProfileEvents.loaded, profileLoaded);
if (UserProfile.profile && UserProfile.profile.preferences) {
profileLoaded(null, UserProfile);
}
Expand Down Expand Up @@ -399,24 +399,31 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
$routeParams.audioEventId + '#' + audioEventCommentId
};

$scope.formatTimeAgo = function formatTimeAgo(time, formatString) {
return moment(time, formatString).fromNow();
$scope.formatTimeAgo = function formatTimeAgo(date) {
if (date) {
return moment(date).fromNow();
}
else {
return "unknown";
}
};

$scope.createComment = function createComment() {
AudioEventComment.save(
{audioEventId: $routeParams.audioEventId}, // parameters
{comment: $scope.newComment.text}, // post data
function createCommentSuccess(value, responseHeaders) {
console.log('create success', arguments);
$scope.newComment.errors = [];
$scope.newComment.text = '';
reloadComments();
},
function createCommentError(httpResponse) {
console.log('create failure', arguments);
$scope.newComment.errors = httpResponse.data.comment;
});
if($scope.createCommentForm.$valid) {
AudioEventComment.save(
{audioEventId: $routeParams.audioEventId}, // parameters
{comment: $scope.newComment.text}, // post data
function createCommentSuccess(value, responseHeaders) {
console.log('create success', arguments);
$scope.newComment.errors = [];
$scope.newComment.text = '';
reloadComments();
},
function createCommentError(httpResponse) {
console.log('create failure', arguments);
$scope.newComment.errors = httpResponse.data.comment;
});
}
};

$scope.deleteComment = function deleteComment(commentText, audioEventCommentId) {
Expand All @@ -441,13 +448,15 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
}
};

$scope.updateComment = function updateComment(audioEventCommentId) {
function updateCommentBase(id, body) {
AudioEventComment.update(
// url parameters
{
audioEventId: $routeParams.audioEventId,
audioEventCommentId: audioEventCommentId
}, // parameters
{comment: $scope.editComment.text}, // post data
audioEventCommentId: id
},
// body
body,
function updateCommentSuccess(value, responseHeaders) {
console.log('update success', arguments);
$scope.editComment.errors = [];
Expand All @@ -459,11 +468,27 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
console.log('update failure', arguments);
$scope.editComment.errors = httpResponse.data.comment;
});
}

$scope.updateComment = function updateComment(comment, updateForm) {
if(updateForm.$valid) {
updateCommentBase(comment.id, {
comment: comment.comment
});
comment.editing = false;
}
};

$scope.editComment = function editComment(commentText, audioEventCommentId) {
$scope.editComment.id = audioEventCommentId;
$scope.editComment.text = commentText;
$scope.editComment = function editComment(comment) {
comment.editing = true;
};

$scope.reportComment = function reportComment(comment) {
comment.flag = "report";
updateCommentBase(comment.id, {
flag: comment.flag
});

};

function profileLoaded(event, userProfile) {
Expand All @@ -475,7 +500,11 @@ angular.module('bawApp.annotationLibrary', ['bawApp.configuration'])
AudioEventComment.query(
{audioEventId: $routeParams.audioEventId},
function audioEventCommentSuccess(value, responseHeaders) {
$scope.comments = value;
$scope.comments = value.data;

$scope.comments.forEach(function(value) {

});
});

}
Expand Down
1 change: 1 addition & 0 deletions src/app/listen/listen.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ angular.module('bawApp.listen', ['decipher.tags', 'ui.bootstrap.typeahead'])
* @param UserProfile
* @param Bookmark
* @param UserProfileEvents
* @param moment
*/
function ListenCtrl(
$scope, $resource, $location, $routeParams, $route, $q, paths, constants, $url, ngAudioEvents,
Expand Down
2 changes: 1 addition & 1 deletion src/baw.configuration.tpl.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,7 +57,7 @@ angular.module('bawApp.configuration', ['url'])
settings: "/my_account/prefs"
},
audioEventComment: {
show: '/audio_events/{audioEventId}/audio_event_comments/{audioEventCommentId}'
show: '/audio_events/{audioEventId}/comments/{audioEventCommentId}'
},
bookmark: {
show: "/bookmarks/{bookmarkId}"
Expand Down
1 change: 1 addition & 0 deletions src/components/services/bawResource.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ angular.module("bawApp.services.resource", ["ngResource"])

var a = actions || {};
a.update = a.update || { method: 'PUT' };
a.query = {method: "GET", isArray: false};
var resource = $resource(convertedPath, paramDefaults, a);

resource.modifiedPath = convertedPath;
Expand Down
33 changes: 29 additions & 4 deletions src/components/services/bawResource.spec.js
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,22 @@
describe("The bawResource service", function () {

var Bookmark;
var $httpBackend, bawResource, $rootScope;

beforeEach(module('bawApp.services'));

beforeEach(inject(["Bookmark", function (providedBookmark) {
Bookmark = providedBookmark;
beforeEach(inject(["$injector", "bawResource", "$rootScope", function ($injector, providedBawResource, _$rootScope) {
$httpBackend = $injector.get('$httpBackend');

$httpBackend.when("GET", "/test").respond({data:[], meta:{}});

bawResource = providedBawResource;
$rootScope = _$rootScope;
}]));


it("should return a resource constructor that includes update/put", function () {

expect(Bookmark).toImplement({
expect(bawResource("/test")).toImplement({
"get": null,
"save": null,
"query": null,
Expand All @@ -21,4 +26,24 @@ describe("The bawResource service", function () {
"modifiedPath": null
});
});

it("should override $resource's query", function(done) {

// make "new" resource
var testResource = bawResource("/test");

var pass;
var result = testResource
.query().$promise
.then(function() {
pass = true;
}, function() {
pass = false;
});
$httpBackend.flush();

expect(pass).toBeTrue();

done();
});
});
10 changes: 7 additions & 3 deletions src/components/services/services.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,12 +93,16 @@
// NOTE: deleted user resource, API for users no longer exposed


bawss.factory('AudioEventComment', [ '$resource', 'conf.paths', function ($resource, paths) {
return resourcePut($resource, uriConvert(paths.api.routes.audioEventComment.showAbsolute),
bawss.factory('AudioEventComment', [ "bawResource", 'conf.paths', function (bawResource, paths) {
return bawResource(
paths.api.routes.audioEventComment.showAbsolute,
{audioEventId: "@audioEventId", audioEventCommentId: '@audioEventCommentId'});
}]);

bawss.factory('AudioRecording', [ '$resource', '$http', 'conf.paths', 'QueryBuilder', function ($resource, $http, paths, QueryBuilder) {
bawss.factory(
'AudioRecording',
[ '$resource', '$http', 'conf.paths', 'QueryBuilder',
function ($resource, $http, paths, QueryBuilder) {
var resource = resourcePut($resource, uriConvert(paths.api.routes.audioRecording.showAbsolute),
{projectId: "@projectId", siteId: "@siteId", recordingId: '@recordingId'});

Expand Down

0 comments on commit b6573cf

Please sign in to comment.