Skip to content
Permalink
Browse files

Added comments as a directive to wing.vue.js to be used in conjunctio…

…n with Wing::Role::Result::Comment.
  • Loading branch information...
rizen committed Jun 4, 2019
1 parent 3fa5f74 commit e63b9874b8d182bb74a91031b11992b19643cb32
Showing with 80 additions and 0 deletions.
  1. +3 −0 CHANGES.txt
  2. +28 −0 lib/Wing/WingVue.pod
  3. +49 −0 public/wing.vue.js
@@ -4,6 +4,9 @@ This file tracks the changes to Wing over time. Especially
with respect to new features and compatibility changes.
==========================================================

2019-06-04
* Added comments as a directive to wing.vue.js to be used in conjunction with Wing::Role::Result::Comment.

2019-06-03
* Upgrade to Facebook::OpenGraph
* Requires Net::Amazon::S3 0.86 or higher.
@@ -63,6 +63,34 @@ Generates a float-right div that shows how many characters a field has left.

<characters-remaining max="100" :property="user.properties.bio"></characters-remaining>


=head2 comments

Used in comjunction with L<Wing::Role::Result::Comment> to generate a comments section.

<div id="app">
<comments :comments="comments" current_user_id="[% current_user.id %]" is_admin="[% current_user.is_admin || 0 %]" special_badge_label="designer" :special_badge_user_id="designer.properties.user_id"></comments>
</div>

<script type="text/javascript">
const app = new Vue({
el : '#app',
data : {
comments : wing.object_list({
list_api : '[% designasset._relationships.comments %]',
create_api : '/api/designassetcomment',
new_defaults : {
designasset_id : '[% designasset.id %]',
},
params : {
_include_related_objects : ['user'],
_order_by : ['date_created'],
},
}),
},
});
</script>

=head2 confirmation-toggle

Generates a button that toggles C<wing.confirmations> on/off.
@@ -249,6 +249,55 @@ Vue.component('confirmation-toggle', {
<button v-else class="btn btn-secondary" @click="wing.confirmations.toggle()"><i class="fas fa-check-circle"></i> Enable Confirmations</button>`,
});

/*
* Comments.
*/

Vue.component('comments', {
template : `<template>
<div class="table-responsive">
<table class="table table-striped">
<tr v-for="comment in comments.objects">
<td>
<textarea class="form-control" v-if="comment.stash('edit')" rows="5" v-model="comment.properties.comment" v-autosave="comment"></textarea>
<div v-if="!comment.stash('edit')" style="white-space: pre-wrap;">{{comment.properties.comment}}</div>
</td>
<td style="width: 40%">
<a :href="comment.properties.user.profile_uri"><img v-if="comment.properties.user.avatar_uri" :src="comment.properties.user.avatar_uri" class="rounded" alt="avatar" style="height: 30px"> {{comment.properties.user.display_name}}</a>
<span class="badge badge-secondary" v-if="special_badge_user_id == comment.properties.user_id">{{special_badge_label}}</span>
<br>
{{comment.properties.date_created|timeago}}
<br>
<i class="far fa-heart" v-show="!comment.properties.i_like" @click="like_comment(comment)"></i>
<i class="fas fa-heart" v-show="comment.properties.i_like" @click="unlike_comment(comment)"></i>
({{comment.properties.like_count}} likes)
<br>
<button class="btn btn-primary btn-sm" @click="comment.stash('edit', !comment.stash('edit'))" v-if="!comment.stash('edit')" v-show="comment.properties.user_id == current_user_id || is_admin == 1"><i class="fas fa-edit"></i> Edit</button>
<button class="btn btn-success btn-sm" @click="comment.stash('edit', !comment.stash('edit'))" v-if="comment.stash('edit')" v-show="comment.properties.user_id == current_user_id || is_admin == 1"><i class="fas fa-edit"></i> Save</button>
<button class="btn btn-danger btn-sm" @click="comment.delete()" v-show="comment.properties.user_id == current_user_id || is_admin == 1"><i class="fas fa-trash-alt"></i> Delete</button>
</td>
</tr>
<tr>
<td>
<textarea class="form-control" rows="5" v-model="comments.new.comment"></textarea>
</td>
<td>
<button class="btn btn-success" @click="comments.create()"><i class="fas fa-edit"></i> Add Comment</button>
</td>
</tr>
</table>
</div>
</template>`,
props: ['comments','special_badge_label','special_badge_user_id', 'current_user_id', 'is_admin'],
methods : {
like_comment(comment) {
comment.call('POST', comment.properties._relationships.self+'/like', {});
},
unlike_comment(comment) {
comment.call('DELETE', comment.properties._relationships.self+'/like', {});
},
},
});

/*
* Wing Factories, Services, and Utilities

0 comments on commit e63b987

Please sign in to comment.
You can’t perform that action at this time.