BookStack Code Mirror - bookstack/blob - resources/assets/js/controllers.js

   1 "use strict";
   2
   3 const moment = require('moment');
   4 require('moment/locale/en-gb');
   5 const editorOptions = require("./pages/page-form");
   6
   7 moment.locale('en-gb');
   8
   9 module.exports = function (ngApp, events) {
  10
  11     ngApp.controller('ImageManagerController', ['$scope', '$attrs', '$http', '$timeout', 'imageManagerService',
  12         function ($scope, $attrs, $http, $timeout, imageManagerService) {
  13
  14             $scope.images = [];
  15             $scope.imageType = $attrs.imageType;
  16             $scope.selectedImage = false;
  17             $scope.dependantPages = false;
  18             $scope.showing = false;
  19             $scope.hasMore = false;
  20             $scope.imageUpdateSuccess = false;
  21             $scope.imageDeleteSuccess = false;
  22             $scope.uploadedTo = $attrs.uploadedTo;
  23             $scope.view = 'all';
  24
  25             $scope.searching = false;
  26             $scope.searchTerm = '';
  27
  28             let page = 0;
  29             let previousClickTime = 0;
  30             let previousClickImage = 0;
  31             let dataLoaded = false;
  32             let callback = false;
  33
  34             let preSearchImages = [];
  35             let preSearchHasMore = false;
  36
  37             /**
  38              * Used by dropzone to get the endpoint to upload to.
  39              * @returns {string}
  40              */
  41             $scope.getUploadUrl = function () {
  42                 return window.baseUrl('/images/' + $scope.imageType + '/upload');
  43             };
  44
  45             /**
  46              * Cancel the current search operation.
  47              */
  48             function cancelSearch() {
  49                 $scope.searching = false;
  50                 $scope.searchTerm = '';
  51                 $scope.images = preSearchImages;
  52                 $scope.hasMore = preSearchHasMore;
  53             }
  54             $scope.cancelSearch = cancelSearch;
  55
  56
  57             /**
  58              * Runs on image upload, Adds an image to local list of images
  59              * and shows a success message to the user.
  60              * @param file
  61              * @param data
  62              */
  63             $scope.uploadSuccess = function (file, data) {
  64                 $scope.$apply(() => {
  65                     $scope.images.unshift(data);
  66                 });
  67                 events.emit('success', trans('components.image_upload_success'));
  68             };
  69
  70             /**
  71              * Runs the callback and hides the image manager.
  72              * @param returnData
  73              */
  74             function callbackAndHide(returnData) {
  75                 if (callback) callback(returnData);
  76                 $scope.hide();
  77             }
  78
  79             /**
  80              * Image select action. Checks if a double-click was fired.
  81              * @param image
  82              */
  83             $scope.imageSelect = function (image) {
  84                 let dblClickTime = 300;
  85                 let currentTime = Date.now();
  86                 let timeDiff = currentTime - previousClickTime;
  87
  88                 if (timeDiff < dblClickTime && image.id === previousClickImage) {
  89                     // If double click
  90                     callbackAndHide(image);
  91                 } else {
  92                     // If single
  93                     $scope.selectedImage = image;
  94                     $scope.dependantPages = false;
  95                 }
  96                 previousClickTime = currentTime;
  97                 previousClickImage = image.id;
  98             };
  99
 100             /**
 101              * Action that runs when the 'Select image' button is clicked.
 102              * Runs the callback and hides the image manager.
 103              */
 104             $scope.selectButtonClick = function () {
 105                 callbackAndHide($scope.selectedImage);
 106             };
 107
 108             /**
 109              * Show the image manager.
 110              * Takes a callback to execute later on.
 111              * @param doneCallback
 112              */
 113             function show(doneCallback) {
 114                 callback = doneCallback;
 115                 $scope.showing = true;
 116                 $('#image-manager').find('.overlay').css('display', 'flex').hide().fadeIn(240);
 117                 // Get initial images if they have not yet been loaded in.
 118                 if (!dataLoaded) {
 119                     fetchData();
 120                     dataLoaded = true;
 121                 }
 122             }
 123
 124             // Connects up the image manger so it can be used externally
 125             // such as from TinyMCE.
 126             imageManagerService.show = show;
 127             imageManagerService.showExternal = function (doneCallback) {
 128                 $scope.$apply(() => {
 129                     show(doneCallback);
 130                 });
 131             };
 132             window.ImageManager = imageManagerService;
 133
 134             /**
 135              * Hide the image manager
 136              */
 137             $scope.hide = function () {
 138                 $scope.showing = false;
 139                 $('#image-manager').find('.overlay').fadeOut(240);
 140             };
 141
 142             let baseUrl = window.baseUrl('/images/' + $scope.imageType + '/all/');
 143
 144             /**
 145              * Fetch the list image data from the server.
 146              */
 147             function fetchData() {
 148                 let url = baseUrl + page + '?';
 149                 let components = {};
 150                 if ($scope.uploadedTo) components['page_id'] = $scope.uploadedTo;
 151                 if ($scope.searching) components['term'] = $scope.searchTerm;
 152
 153
 154                 url += Object.keys(components).map((key) => {
 155                     return key + '=' + encodeURIComponent(components[key]);
 156                 }).join('&');
 157
 158                 $http.get(url).then((response) => {
 159                     $scope.images = $scope.images.concat(response.data.images);
 160                     $scope.hasMore = response.data.hasMore;
 161                     page++;
 162                 });
 163             }
 164             $scope.fetchData = fetchData;
 165
 166             /**
 167              * Start a search operation
 168              */
 169             $scope.searchImages = function() {
 170
 171                 if ($scope.searchTerm === '') {
 172                     cancelSearch();
 173                     return;
 174                 }
 175
 176                 if (!$scope.searching) {
 177                     preSearchImages = $scope.images;
 178                     preSearchHasMore = $scope.hasMore;
 179                 }
 180
 181                 $scope.searching = true;
 182                 $scope.images = [];
 183                 $scope.hasMore = false;
 184                 page = 0;
 185                 baseUrl = window.baseUrl('/images/' + $scope.imageType + '/search/');
 186                 fetchData();
 187             };
 188
 189             /**
 190              * Set the current image listing view.
 191              * @param viewName
 192              */
 193             $scope.setView = function(viewName) {
 194                 cancelSearch();
 195                 $scope.images = [];
 196                 $scope.hasMore = false;
 197                 page = 0;
 198                 $scope.view = viewName;
 199                 baseUrl = window.baseUrl('/images/' + $scope.imageType  + '/' + viewName + '/');
 200                 fetchData();
 201             };
 202
 203             /**
 204              * Save the details of an image.
 205              * @param event
 206              */
 207             $scope.saveImageDetails = function (event) {
 208                 event.preventDefault();
 209                 let url = window.baseUrl('/images/update/' + $scope.selectedImage.id);
 210                 $http.put(url, this.selectedImage).then(response => {
 211                     events.emit('success', trans('components.image_update_success'));
 212                 }, (response) => {
 213                     if (response.status === 422) {
 214                         let errors = response.data;
 215                         let message = '';
 216                         Object.keys(errors).forEach((key) => {
 217                             message += errors[key].join('\n');
 218                         });
 219                         events.emit('error', message);
 220                     } else if (response.status === 403) {
 221                         events.emit('error', response.data.error);
 222                     }
 223                 });
 224             };
 225
 226             /**
 227              * Delete an image from system and notify of success.
 228              * Checks if it should force delete when an image
 229              * has dependant pages.
 230              * @param event
 231              */
 232             $scope.deleteImage = function (event) {
 233                 event.preventDefault();
 234                 let force = $scope.dependantPages !== false;
 235                 let url = window.baseUrl('/images/' + $scope.selectedImage.id);
 236                 if (force) url += '?force=true';
 237                 $http.delete(url).then((response) => {
 238                     $scope.images.splice($scope.images.indexOf($scope.selectedImage), 1);
 239                     $scope.selectedImage = false;
 240                     events.emit('success', trans('components.image_delete_success'));
 241                 }, (response) => {
 242                     // Pages failure
 243                     if (response.status === 400) {
 244                         $scope.dependantPages = response.data;
 245                     } else if (response.status === 403) {
 246                         events.emit('error', response.data.error);
 247                     }
 248                 });
 249             };
 250
 251             /**
 252              * Simple date creator used to properly format dates.
 253              * @param stringDate
 254              * @returns {Date}
 255              */
 256             $scope.getDate = function (stringDate) {
 257                 return new Date(stringDate);
 258             };
 259
 260         }]);
 261
 262     ngApp.controller('PageEditController', ['$scope', '$http', '$attrs', '$interval', '$timeout', '$sce',
 263         function ($scope, $http, $attrs, $interval, $timeout, $sce) {
 264
 265         $scope.editorOptions = editorOptions();
 266         $scope.editContent = '';
 267         $scope.draftText = '';
 268         let pageId = Number($attrs.pageId);
 269         let isEdit = pageId !== 0;
 270         let autosaveFrequency = 30; // AutoSave interval in seconds.
 271         let isMarkdown = $attrs.editorType === 'markdown';
 272         $scope.draftsEnabled = $attrs.draftsEnabled === 'true';
 273         $scope.isUpdateDraft = Number($attrs.pageUpdateDraft) === 1;
 274         $scope.isNewPageDraft = Number($attrs.pageNewDraft) === 1;
 275         $scope.commentsLoaded = false;
 276
 277         // Set initial header draft text
 278         if ($scope.isUpdateDraft || $scope.isNewPageDraft) {
 279             $scope.draftText = trans('entities.pages_editing_draft');
 280         } else {
 281             $scope.draftText = trans('entities.pages_editing_page');
 282         }
 283
 284         let autoSave = false;
 285
 286         let currentContent = {
 287             title: false,
 288             html: false
 289         };
 290
 291         if (isEdit && $scope.draftsEnabled) {
 292             setTimeout(() => {
 293                 startAutoSave();
 294             }, 1000);
 295         }
 296
 297         // Actions specifically for the markdown editor
 298         if (isMarkdown) {
 299             $scope.displayContent = '';
 300             // Editor change event
 301             $scope.editorChange = function (content) {
 302                 $scope.displayContent = $sce.trustAsHtml(content);
 303             }
 304         }
 305
 306         if (!isMarkdown) {
 307             $scope.editorChange = function() {};
 308         }
 309
 310         let lastSave = 0;
 311
 312         /**
 313          * Start the AutoSave loop, Checks for content change
 314          * before performing the costly AJAX request.
 315          */
 316         function startAutoSave() {
 317             currentContent.title = $('#name').val();
 318             currentContent.html = $scope.editContent;
 319
 320             autoSave = $interval(() => {
 321                 // Return if manually saved recently to prevent bombarding the server
 322                 if (Date.now() - lastSave < (1000*autosaveFrequency)/2) return;
 323                 let newTitle = $('#name').val();
 324                 let newHtml = $scope.editContent;
 325
 326                 if (newTitle !== currentContent.title || newHtml !== currentContent.html) {
 327                     currentContent.html = newHtml;
 328                     currentContent.title = newTitle;
 329                     saveDraft();
 330                 }
 331
 332             }, 1000 * autosaveFrequency);
 333         }
 334
 335         let draftErroring = false;
 336         /**
 337          * Save a draft update into the system via an AJAX request.
 338          */
 339         function saveDraft() {
 340             if (!$scope.draftsEnabled) return;
 341             let data = {
 342                 name: $('#name').val(),
 343                 html: isMarkdown ? $sce.getTrustedHtml($scope.displayContent) : $scope.editContent
 344             };
 345
 346             if (isMarkdown) data.markdown = $scope.editContent;
 347
 348             let url = window.baseUrl('/ajax/page/' + pageId + '/save-draft');
 349             $http.put(url, data).then(responseData => {
 350                 draftErroring = false;
 351                 let updateTime = moment.utc(moment.unix(responseData.data.timestamp)).toDate();
 352                 $scope.draftText = responseData.data.message + moment(updateTime).format('HH:mm');
 353                 if (!$scope.isNewPageDraft) $scope.isUpdateDraft = true;
 354                 showDraftSaveNotification();
 355                 lastSave = Date.now();
 356             }, errorRes => {
 357                 if (draftErroring) return;
 358                 events.emit('error', trans('errors.page_draft_autosave_fail'));
 359                 draftErroring = true;
 360             });
 361         }
 362
 363         function showDraftSaveNotification() {
 364             $scope.draftUpdated = true;
 365             $timeout(() => {
 366                 $scope.draftUpdated = false;
 367             }, 2000)
 368         }
 369
 370         $scope.forceDraftSave = function() {
 371             saveDraft();
 372         };
 373
 374         // Listen to shortcuts coming via events
 375         $scope.$on('editor-keydown', (event, data) => {
 376             // Save shortcut (ctrl+s)
 377             if (data.keyCode == 83 && (navigator.platform.match("Mac") ? data.metaKey : data.ctrlKey)) {
 378                 data.preventDefault();
 379                 saveDraft();
 380             }
 381         });
 382
 383         /**
 384          * Discard the current draft and grab the current page
 385          * content from the system via an AJAX request.
 386          */
 387         $scope.discardDraft = function () {
 388             let url = window.baseUrl('/ajax/page/' + pageId);
 389             $http.get(url).then((responseData) => {
 390                 if (autoSave) $interval.cancel(autoSave);
 391                 $scope.draftText = trans('entities.pages_editing_page');
 392                 $scope.isUpdateDraft = false;
 393                 $scope.$broadcast('html-update', responseData.data.html);
 394                 $scope.$broadcast('markdown-update', responseData.data.markdown || responseData.data.html);
 395                 $('#name').val(responseData.data.name);
 396                 $timeout(() => {
 397                     startAutoSave();
 398                 }, 1000);
 399                 events.emit('success', trans('entities.pages_draft_discarded'));
 400             });
 401         };
 402
 403     }]);
 404
 405     ngApp.controller('PageTagController', ['$scope', '$http', '$attrs',
 406         function ($scope, $http, $attrs) {
 407
 408             const pageId = Number($attrs.pageId);
 409             $scope.tags = [];
 410
 411             $scope.sortOptions = {
 412                 handle: '.handle',
 413                 items: '> tr',
 414                 containment: "parent",
 415                 axis: "y"
 416             };
 417
 418             /**
 419              * Push an empty tag to the end of the scope tags.
 420              */
 421             function addEmptyTag() {
 422                 $scope.tags.push({
 423                     name: '',
 424                     value: ''
 425                 });
 426             }
 427             $scope.addEmptyTag = addEmptyTag;
 428
 429             /**
 430              * Get all tags for the current book and add into scope.
 431              */
 432             function getTags() {
 433                 let url = window.baseUrl(`/ajax/tags/get/page/${pageId}`);
 434                 $http.get(url).then((responseData) => {
 435                     $scope.tags = responseData.data;
 436                     addEmptyTag();
 437                 });
 438             }
 439             getTags();
 440
 441             /**
 442              * Set the order property on all tags.
 443              */
 444             function setTagOrder() {
 445                 for (let i = 0; i < $scope.tags.length; i++) {
 446                     $scope.tags[i].order = i;
 447                 }
 448             }
 449
 450             /**
 451              * When an tag changes check if another empty editable
 452              * field needs to be added onto the end.
 453              * @param tag
 454              */
 455             $scope.tagChange = function(tag) {
 456                 let cPos = $scope.tags.indexOf(tag);
 457                 if (cPos !== $scope.tags.length-1) return;
 458
 459                 if (tag.name !== '' || tag.value !== '') {
 460                     addEmptyTag();
 461                 }
 462             };
 463
 464             /**
 465              * When an tag field loses focus check the tag to see if its
 466              * empty and therefore could be removed from the list.
 467              * @param tag
 468              */
 469             $scope.tagBlur = function(tag) {
 470                 let isLast = $scope.tags.length - 1 === $scope.tags.indexOf(tag);
 471                 if (tag.name === '' && tag.value === '' && !isLast) {
 472                     let cPos = $scope.tags.indexOf(tag);
 473                     $scope.tags.splice(cPos, 1);
 474                 }
 475             };
 476
 477             /**
 478              * Remove a tag from the current list.
 479              * @param tag
 480              */
 481             $scope.removeTag = function(tag) {
 482                 let cIndex = $scope.tags.indexOf(tag);
 483                 $scope.tags.splice(cIndex, 1);
 484             };
 485
 486         }]);
 487
 488
 489     ngApp.controller('PageAttachmentController', ['$scope', '$http', '$attrs',
 490         function ($scope, $http, $attrs) {
 491
 492             const pageId = $scope.uploadedTo = $attrs.pageId;
 493             let currentOrder = '';
 494             $scope.files = [];
 495             $scope.editFile = false;
 496             $scope.file = getCleanFile();
 497             $scope.errors = {
 498                 link: {},
 499                 edit: {}
 500             };
 501
 502             function getCleanFile() {
 503                 return {
 504                     page_id: pageId
 505                 };
 506             }
 507
 508             // Angular-UI-Sort options
 509             $scope.sortOptions = {
 510                 handle: '.handle',
 511                 items: '> tr',
 512                 containment: "parent",
 513                 axis: "y",
 514                 stop: sortUpdate,
 515             };
 516
 517             /**
 518              * Event listener for sort changes.
 519              * Updates the file ordering on the server.
 520              * @param event
 521              * @param ui
 522              */
 523             function sortUpdate(event, ui) {
 524                 let newOrder = $scope.files.map(file => {return file.id}).join(':');
 525                 if (newOrder === currentOrder) return;
 526
 527                 currentOrder = newOrder;
 528                 $http.put(window.baseUrl(`/attachments/sort/page/${pageId}`), {files: $scope.files}).then(resp => {
 529                     events.emit('success', resp.data.message);
 530                 }, checkError('sort'));
 531             }
 532
 533             /**
 534              * Used by dropzone to get the endpoint to upload to.
 535              * @returns {string}
 536              */
 537             $scope.getUploadUrl = function (file) {
 538                 let suffix = (typeof file !== 'undefined') ? `/${file.id}` : '';
 539                 return window.baseUrl(`/attachments/upload${suffix}`);
 540             };
 541
 542             /**
 543              * Get files for the current page from the server.
 544              */
 545             function getFiles() {
 546                 let url = window.baseUrl(`/attachments/get/page/${pageId}`);
 547                 $http.get(url).then(resp => {
 548                     $scope.files = resp.data;
 549                     currentOrder = resp.data.map(file => {return file.id}).join(':');
 550                 }, checkError('get'));
 551             }
 552             getFiles();
 553
 554             /**
 555              * Runs on file upload, Adds an file to local file list
 556              * and shows a success message to the user.
 557              * @param file
 558              * @param data
 559              */
 560             $scope.uploadSuccess = function (file, data) {
 561                 $scope.$apply(() => {
 562                     $scope.files.push(data);
 563                 });
 564                 events.emit('success', trans('entities.attachments_file_uploaded'));
 565             };
 566
 567             /**
 568              * Upload and overwrite an existing file.
 569              * @param file
 570              * @param data
 571              */
 572             $scope.uploadSuccessUpdate = function (file, data) {
 573                 $scope.$apply(() => {
 574                     let search = filesIndexOf(data);
 575                     if (search !== -1) $scope.files[search] = data;
 576
 577                     if ($scope.editFile) {
 578                         $scope.editFile = angular.copy(data);
 579                         data.link = '';
 580                     }
 581                 });
 582                 events.emit('success', trans('entities.attachments_file_updated'));
 583             };
 584
 585             /**
 586              * Delete a file from the server and, on success, the local listing.
 587              * @param file
 588              */
 589             $scope.deleteFile = function(file) {
 590                 if (!file.deleting) {
 591                     file.deleting = true;
 592                     return;
 593                 }
 594                   $http.delete(window.baseUrl(`/attachments/${file.id}`)).then(resp => {
 595                       events.emit('success', resp.data.message);
 596                       $scope.files.splice($scope.files.indexOf(file), 1);
 597                   }, checkError('delete'));
 598             };
 599
 600             /**
 601              * Attach a link to a page.
 602              * @param file
 603              */
 604             $scope.attachLinkSubmit = function(file) {
 605                 file.uploaded_to = pageId;
 606                 $http.post(window.baseUrl('/attachments/link'), file).then(resp => {
 607                     $scope.files.push(resp.data);
 608                     events.emit('success', trans('entities.attachments_link_attached'));
 609                     $scope.file = getCleanFile();
 610                 }, checkError('link'));
 611             };
 612
 613             /**
 614              * Start the edit mode for a file.
 615              * @param file
 616              */
 617             $scope.startEdit = function(file) {
 618                 $scope.editFile = angular.copy(file);
 619                 $scope.editFile.link = (file.external) ? file.path : '';
 620             };
 621
 622             /**
 623              * Cancel edit mode
 624              */
 625             $scope.cancelEdit = function() {
 626                 $scope.editFile = false;
 627             };
 628
 629             /**
 630              * Update the name and link of a file.
 631              * @param file
 632              */
 633             $scope.updateFile = function(file) {
 634                 $http.put(window.baseUrl(`/attachments/${file.id}`), file).then(resp => {
 635                     let search = filesIndexOf(resp.data);
 636                     if (search !== -1) $scope.files[search] = resp.data;
 637
 638                     if ($scope.editFile && !file.external) {
 639                         $scope.editFile.link = '';
 640                     }
 641                     $scope.editFile = false;
 642                     events.emit('success', trans('entities.attachments_updated_success'));
 643                 }, checkError('edit'));
 644             };
 645
 646             /**
 647              * Get the url of a file.
 648              */
 649             $scope.getFileUrl = function(file) {
 650                 return window.baseUrl('/attachments/' + file.id);
 651             };
 652
 653             /**
 654              * Search the local files via another file object.
 655              * Used to search via object copies.
 656              * @param file
 657              * @returns int
 658              */
 659             function filesIndexOf(file) {
 660                 for (let i = 0; i < $scope.files.length; i++) {
 661                     if ($scope.files[i].id == file.id) return i;
 662                 }
 663                 return -1;
 664             }
 665
 666             /**
 667              * Check for an error response in a ajax request.
 668              * @param errorGroupName
 669              */
 670             function checkError(errorGroupName) {
 671                 $scope.errors[errorGroupName] = {};
 672                 return function(response) {
 673                     if (typeof response.data !== 'undefined' && typeof response.data.error !== 'undefined') {
 674                         events.emit('error', response.data.error);
 675                     }
 676                     if (typeof response.data !== 'undefined' && typeof response.data.validation !== 'undefined') {
 677                         $scope.errors[errorGroupName] = response.data.validation;
 678                         console.log($scope.errors[errorGroupName])
 679                     }
 680                 }
 681             }
 682
 683         }]);
 684
 685     // CommentCrudController
 686     ngApp.controller('CommentReplyController', ['$scope', '$http', function ($scope, $http) {
 687         const MarkdownIt = require("markdown-it");
 688         const md = new MarkdownIt({html: true});
 689         let vm = this;
 690         $scope.errors = {};
 691         vm.saveComment = function () {
 692             let pageId = $scope.comment.pageId || $scope.pageId;
 693             let comment = $scope.comment.text;
 694             let commentHTML = md.render($scope.comment.text);
 695             let serviceUrl = `/ajax/page/${pageId}/comment/`;
 696             let httpMethod = 'post';
 697             let errorOp = 'add';
 698             let reqObj = {
 699                 text: comment,
 700                 html: commentHTML
 701             };
 702
 703             if ($scope.isEdit === true) {
 704                 // this will be set when editing the comment.
 705                 serviceUrl = `/ajax/page/${pageId}/comment/${$scope.comment.id}`;
 706                 httpMethod = 'put';
 707                 errorOp = 'update';
 708             } else if ($scope.isReply === true) {
 709                 // if its reply, get the parent comment id
 710                 reqObj.parent_id = $scope.parentId;
 711             }
 712             $http[httpMethod](window.baseUrl(serviceUrl), reqObj).then(resp => {
 713                 if (!resp.data || resp.data.status !== 'success') {
 714                      return events.emit('error', trans('error'));
 715                 }
 716                 if ($scope.isEdit) {
 717                     $scope.comment.html = commentHTML;
 718                     $scope.$emit('evt.comment-success', $scope.comment.id);
 719                 } else {
 720                     $scope.comment.text = '';
 721                     $scope.$emit('evt.comment-success', null, true);
 722                 }
 723                 events.emit('success', trans(resp.data.message));
 724
 725             }, checkError(errorOp));
 726
 727         };
 728
 729         function checkError(errorGroupName) {
 730             $scope.errors[errorGroupName] = {};
 731             return function(response) {
 732                 if (typeof response.data !== 'undefined' && typeof response.data.error !== 'undefined') {
 733                     events.emit('error', response.data.error);
 734                 }
 735                 if (typeof response.data !== 'undefined' && typeof response.data.validation !== 'undefined') {
 736                     $scope.errors[errorGroupName] = response.data.validation;
 737                     console.log($scope.errors[errorGroupName])
 738                 }
 739             }
 740         }
 741     }]);
 742
 743
 744     // CommentListController
 745     ngApp.controller('CommentListController', ['$scope', '$http', '$timeout', function ($scope, $http, $timeout) {
 746         let vm = this;
 747         $scope.errors = {};
 748         $scope.defaultAvatar = defaultAvatar;
 749         vm.totalCommentsStr = 'Loading...';
 750         $scope.editorChange = function (content) {
 751             console.log(content);
 752         }
 753
 754         $timeout(function() {
 755             $http.get(window.baseUrl(`/ajax/page/${$scope.pageId}/comments/`)).then(resp => {
 756                 if (!resp.data || resp.data.success !== true) {
 757                     // TODO : Handle error
 758                     return;
 759                 }
 760                 vm.comments = resp.data.comments.data;
 761                 vm.totalComments = resp.data.total;
 762                 // TODO : Fetch message from translate.
 763                 if (vm.totalComments === 0) {
 764                     vm.totalCommentsStr = 'No comments found.';
 765                 } else if (vm.totalComments === 1) {
 766                     vm.totalCommentsStr = '1 Comments';
 767                 } else {
 768                     vm.totalCommentsStr = vm.totalComments + ' Comments'
 769                 }
 770             }, checkError('app'));
 771         });
 772
 773         vm.loadSubComments = function(event, comment) {
 774             event.preventDefault();
 775             $http.get(window.baseUrl(`/ajax/page/${$scope.pageId}/comments/${comment.id}/sub-comments`)).then(resp => {
 776                 if (!resp.data || resp.data.success !== true) {
 777                     return;
 778                 }
 779                 comment.is_loaded = true;
 780                 comment.comments = resp.data.comments.data;
 781             }, checkError('app'));
 782         };
 783
 784         function checkError(errorGroupName) {
 785             $scope.errors[errorGroupName] = {};
 786             return function(response) {
 787                 console.log(resp);
 788             }
 789         }
 790     }]);
 791
 792 };