fix: Refactor Review Area according to new Text Editor (#15536)

- depends on https://github.com/frappe/frappe/pull/6159
This commit is contained in:
Faris Ansari 2018-09-30 21:08:46 +05:30 committed by Rushabh Mehta
parent 1cf71d96b1
commit 6575e52942
2 changed files with 75 additions and 11 deletions

View File

@ -18,18 +18,19 @@ export default {
},
methods: {
make_input() {
this.message_input = new frappe.ui.CommentArea({
this.message_input = frappe.ui.form.make_control({
parent: this.$refs['comment-input'],
on_submit: (message) => {
this.message_input.reset();
this.$emit('change', message);
},
only_input: true,
no_wrapper: true
});
},
submit_input() {
if (!this.message_input) return;
const value = this.message_input.val();
const value = this.message_input.get_value();
if (!value) return;
this.message_input.submit();
}

View File

@ -1,6 +1,44 @@
<template>
<div>
<div ref="review-area" class="timeline-head"></div>
<div class="timeline-head">
<div class="comment-input-wrapper">
<div class="comment-input-header">
<span class="text-muted">{{ __('Add your review') }}</span>
<div class="btn btn-default btn-xs pull-right"
@click="on_submit_review"
:disabled="!(user_review.rating && user_review.subject)"
>
{{ __('Submit Review') }}
</div>
</div>
<div class="comment-input-container">
<div class="rating-area text-muted">
<span>{{ __('Your rating:') }}</span>
<div
v-for="i in [1, 2, 3, 4, 5]"
:key="i"
:class="['fa fa-fw', user_review.rating < i ? 'fa-star-o' : 'fa-star']"
:data-index="i"
@click="set_rating(i)"
>
</div>
</div>
<div class="comment-input-body margin-top" v-show="user_review.rating">
<input
type="text"
placeholder="Subject"
class="form-control margin-bottom"
style="border-color: #ebeff2"
v-model="user_review.subject"
>
<div ref="review-content"></div>
<div>
<span class="text-muted text-small">{{ __('Ctrl+Enter to submit') }}</span>
</div>
</div>
</div>
</div>
</div>
<div class="timeline-items">
<review-timeline-item v-for="review in reviews"
:key="review.user"
@ -22,6 +60,11 @@ export default {
props: ['hub_item_name'],
data() {
return {
user_review: {
rating: 0,
subject: '',
content: ''
},
reviews: []
}
},
@ -35,6 +78,10 @@ export default {
this.make_input();
},
methods: {
set_rating(i) {
this.user_review.rating = i;
},
when(datetime) {
return comment_when(datetime);
},
@ -48,21 +95,37 @@ export default {
},
make_input() {
this.review_area = new frappe.ui.ReviewArea({
parent: this.$refs['review-area'],
mentions: [],
on_submit: this.on_submit_review.bind(this)
this.review_content = frappe.ui.form.make_control({
parent: this.$refs['review-content'],
on_submit: this.on_submit_review.bind(this),
no_wrapper: true,
only_input: true,
render_input: true,
df: {
fieldtype: 'Comment',
fieldname: 'comment'
}
});
},
on_submit_review(values) {
this.review_area.reset();
on_submit_review() {
const review = Object.assign({}, this.user_review, {
content: this.review_content.get_value()
});
hub.call('add_item_review', {
hub_item_name: this.hub_item_name,
review: JSON.stringify(values)
review: JSON.stringify(review)
})
.then(this.push_review.bind(this));
this.reset_user_review();
},
reset_user_review() {
this.user_review.rating = 0;
this.user_review.subject = '';
this.review_content.set_value('');
},
push_review(review){
@ -70,4 +133,4 @@ export default {
}
}
}
</script>
</script>