# HG changeset patch
# User Alexandre Segura <mex.zktk@gmail.com>
# Date 1487612614 -3600
# Node ID b962ae7926166f079c1d78d4539850b85e32baa9
# Parent  8f158a4c7759ae4908db81faebc722ce373591dd
Make CommentList more isolated.

diff -r 8f158a4c7759 -r b962ae792616 src/iconolab/templates/iconolab/detail_image.html
--- a/src/iconolab/templates/iconolab/detail_image.html	Mon Feb 20 18:33:36 2017 +0100
+++ b/src/iconolab/templates/iconolab/detail_image.html	Mon Feb 20 18:43:34 2017 +0100
@@ -50,7 +50,8 @@
           action="{% url 'annotation_edit' collection_name image_guid ':annotation_guid' %}">
           {% csrf_token %}
         </annotation-form>
-        <comment-list ref="commentList"></comment-list>
+        <comment-list v-bind:annotation="annotation"
+          fetch="{% url 'get_annotation_comments_json' ':annotation_guid' %}"></comment-list>
         <div id="form-comment">
           <form>
               <div class="form-group">
@@ -93,21 +94,17 @@
     // Load the form for selected annotation via AJAX
     $.get('/comments/annotation/' + annotation + '/comment-form', { next: currentPath + '#' + annotation })
       .then(function(form) {
-        $.getJSON('/comments/annotation/' + annotation + '/comments.json')
-          .then(function(comments) {
 
-            $('#form-comment form').replaceWith(form);
+        $('.list-group a[data-annotation-id]').removeClass('active');
+        $el.addClass('active');
 
-            $('.list-group a[data-annotation-id]').removeClass('active');
-            $el.addClass('active');
+        $('#form-comment form').replaceWith(form);
 
-            vm.annotation = annotations[revision];
-            vm.$refs.commentList.comments = comments;
+        vm.annotation = annotations[revision];
 
-            location.hash = '#' + annotation;
+        location.hash = '#' + annotation;
 
-          });
-        });
+      });
   }
 
   $('.list-group a[data-annotation-id]').on('click', function(e) {
@@ -141,7 +138,6 @@
     $target.closest('.list-group-item').removeClass('active');
 
     vm.annotation = null;
-    vm.$refs.commentList.comments = [];
 
     $('#form-comment form').find('textarea, [type="submit"]').attr('disabled', true);
 
diff -r 8f158a4c7759 -r b962ae792616 src_js/iconolab-bundle/src/components/editor/CommentList.vue
--- a/src_js/iconolab-bundle/src/components/editor/CommentList.vue	Mon Feb 20 18:33:36 2017 +0100
+++ b/src_js/iconolab-bundle/src/components/editor/CommentList.vue	Mon Feb 20 18:43:34 2017 +0100
@@ -1,7 +1,7 @@
 <template>
     <div v-show="comments.length > 0">
         <label class="form-label">Commentaires</label>
-        <comment ref="comments"
+        <comment
             v-for="comment in comments"
             v-bind:comment="comment.comment"
             v-bind:username="comment.user_name"
@@ -14,6 +14,7 @@
     import Comment from './Comment.vue'
 
     export default {
+        props: ['annotation', 'fetch'],
         components: {
             Comment
         },
@@ -22,6 +23,20 @@
                 'comments': []
             }
         },
+        computed: {
+            commentsURL: function() {
+                return this.fetch.replace(':annotation_guid', this.annotation.annotation_guid);
+            }
+        },
+        watch: {
+            annotation: function(annotation) {
+                if (annotation) {
+                    $.getJSON(this.commentsURL).then((comments) => this.comments = comments);
+                } else {
+                    this.comments = [];
+                }
+            }
+        }
     }
 
 </script>