BookStack Code Mirror - bookstack/blob - resources/js/components/page-comment.js

   1 import {Component} from './component';
   2 import {getLoading, htmlToDom} from '../services/dom';
   3
   4 export class PageComment extends Component {
   5
   6     setup() {
   7         // Options
   8         this.commentId = this.$opts.commentId;
   9         this.commentLocalId = this.$opts.commentLocalId;
  10         this.commentParentId = this.$opts.commentParentId;
  11         this.deletedText = this.$opts.deletedText;
  12         this.updatedText = this.$opts.updatedText;
  13
  14         // Element References
  15         this.container = this.$el;
  16         this.contentContainer = this.$refs.contentContainer;
  17         this.form = this.$refs.form;
  18         this.formCancel = this.$refs.formCancel;
  19         this.editButton = this.$refs.editButton;
  20         this.deleteButton = this.$refs.deleteButton;
  21         this.replyButton = this.$refs.replyButton;
  22         this.input = this.$refs.input;
  23
  24         this.setupListeners();
  25     }
  26
  27     setupListeners() {
  28         this.replyButton.addEventListener('click', () => this.$emit('reply', {
  29             id: this.commentLocalId,
  30             element: this.container,
  31         }));
  32         this.editButton.addEventListener('click', this.startEdit.bind(this));
  33         this.deleteButton.addEventListener('click', this.delete.bind(this));
  34         this.form.addEventListener('submit', this.update.bind(this));
  35         this.formCancel.addEventListener('click', () => this.toggleEditMode(false));
  36     }
  37
  38     toggleEditMode(show) {
  39         this.contentContainer.toggleAttribute('hidden', show);
  40         this.form.toggleAttribute('hidden', !show);
  41     }
  42
  43     startEdit() {
  44         this.toggleEditMode(true);
  45         const lineCount = this.$refs.input.value.split('\n').length;
  46         this.$refs.input.style.height = `${(lineCount * 20) + 40}px`;
  47     }
  48
  49     async update(event) {
  50         event.preventDefault();
  51         const loading = this.showLoading();
  52         this.form.toggleAttribute('hidden', true);
  53
  54         const reqData = {
  55             text: this.input.value,
  56             parent_id: this.parentId || null,
  57         };
  58
  59         try {
  60             const resp = await window.$http.put(`/comment/${this.commentId}`, reqData);
  61             const newComment = htmlToDom(resp.data);
  62             this.container.replaceWith(newComment);
  63             window.$events.success(this.updatedText);
  64         } catch (err) {
  65             console.error(err);
  66             window.$events.showValidationErrors(err);
  67             this.form.toggleAttribute('hidden', false);
  68             loading.remove();
  69         }
  70     }
  71
  72     async delete() {
  73         this.showLoading();
  74
  75         await window.$http.delete(`/comment/${this.commentId}`);
  76         this.container.closest('.comment-branch').remove();
  77         window.$events.success(this.deletedText);
  78         this.$emit('delete');
  79     }
  80
  81     showLoading() {
  82         const loading = getLoading();
  83         loading.classList.add('px-l');
  84         this.container.append(loading);
  85         return loading;
  86     }
  87
  88 }