FEATURE: Grounding an existing memo

When the user fills the add/create input field, a list of existing memos is suggested (as #83 proposed), allowing to add the current memo among the groundings of the selected memo.

If the user requests an already existing grounding, s/he is prompted that it already exists. If the memo is already grounded, but on a different fragment/paragraph, the grounding is quietly updated.

This feature can contribute to smoother coding sessions, as @benel indicates (#112). That's why it is reserved to field memos and transcripts at this stage.

app/_attachments/grounding.js

@@ -98,6 +98,10 @@ $(".groundings").on('hide.bs.collapse', function () {
   $("#groundings .close").tooltip('hide');
 });
 
+$('#add').on('show.bs.tooltip', function () {
+  $('.ui-autocomplete').hide();
+})
+
 function show_grounding(i, id, type, name, href, preview) {
   $('#groundings .spinner').addClass('d-none');
   $('#groundings li').eq(i)

app/_attachments/layout.js

@@ -99,19 +99,25 @@ $('#leave-name').on('keypress', function(key) {
   }
 });
 $('#link_leaf').on('click', function() {
+  add_leaf(this_id, leaf_id, $('#kwic').val(), anchor)
+});
+function add_leaf(grounding, leaf, highlight, anchor) {
   $.ajax({
-    url: "../adapt_memo/"+leaf_id,
+    url: "../adapt_memo/"+leaf,
     type: "PUT",
     contentType: "application/json",
     data: JSON.stringify({
      'action': 'add_grounding',
-     'highlight': $('#kwic').val(),
+     'highlight': highlight,
      'anchor': anchor,
-     'value': this_id
+     'value': grounding
     })
   }).done(reload)
   .fail(error_alert)
-});
+}
+$('#existing_memo').on('hidden.bs.modal', function () {
+  $('.spinner').addClass('d-none');
+})
 function create(type, name, highlight, anchor) {
   $('.spinner').removeClass('d-none');
   name = name.replace(/\t/g, ' ');
@@ -148,8 +154,12 @@ function create(type, name, highlight, anchor) {
         } else {
           leaf_type = existing_memos.rows[i].value.type,
           leaf_id = existing_memos.rows[i].value.id;
-          if (['diagram','graph','table'].indexOf(leaf_type) > -1) $('.linkLeaf').addClass('d-none');
-          $('#existing_memo').modal('show');
+          if (['diagram','graph','table'].indexOf(leaf_type) > -1) {
+            $('.linkLeaf').addClass('d-none');
+            $('#existing_memo').modal('show');
+          } else {
+            add_leaf(this_id, leaf_id, $('#kwic').val(), anchor)
+          }
         }
       } else {
         if (anchor > 0) ground = [{'_id': this_id, 'preview':[{'text': highlight, 'anchor': anchor}]}];

app/_attachments/main.css

@@ -284,6 +284,12 @@ a.dropdown-item, .create-leave, a.dropdown-toggle,
   color: transparent;
 }
 
+.ui-autocomplete .header {
+  color: white;
+  background-color: black;
+  text-align: center;
+}
+
 .spinner-border, .create-leave:hover {
   color: black !important;
 }

app/_attachments/memo.js

@@ -35,6 +35,34 @@ $('#add').on('click', function() {
   }
 });
 
+$('#leave-name').on('keypress', function(key) {
+  if (['interview', 'field', 'transcript'].indexOf(this_type) > -1) {
+    $('#leave-name').autocomplete({
+      minLength: 3,
+      appendTo: '#add-leaves',
+      open: function(event, ui) {
+        $('ul.ui-autocomplete').prepend('<li><div class="pl-1 header">'+reuse+'</div></li>');
+        var p = $(event.target).autocomplete("widget").height();
+        $(event.target).autocomplete("widget").css('top', '-'+p+'px');
+      },
+      source: function(request, response) {
+        $.getJSON('../codes/'+diary_id+'/'+request.term, function (data) {
+          response($.map(data.rows, function (value, key) {
+            return {
+              key: value.id,
+              title: value.value.name,
+              value: value.value.name
+            };
+          }));
+        });
+      },
+      select: function (event, ui) {
+        create($('#add').attr('class').split(' ').pop(), ui.item.value, $('#kwic').val(), anchor);
+      }
+    });
+  }
+});
+
 $('#revert').on('click', function() {
   self.location = '../revert/' + this_id;
 });

app/l10n/i18n.json

@@ -122,6 +122,7 @@
     "i_remote_version": "Version on the server",
     "i_this-one": "this one",
     "i_link_leaf": "Do you want to ground it here ?",
+    "i_reuse": "Grounding here an existing memo",
     "i_lost_connection": "Your connection expired. Don't worry : your work is not lost. In order to recover it, connect then click on the \"resume\" button (left of the bottom bar)",
     "i_my_diary": "My diary",
     "i_my_research_question": "My research question",
@@ -374,6 +375,7 @@
     "i_remote_version": "Version sur le serveur",
     "i_this-one": "celle-ci",
     "i_link_leaf": "Voulez-vous l'ancrer ici ?",
+    "i_reuse": "Ancrer ici un compte-rendu existant",
     "i_lost_connection": "Votre connection a expiré. Pas d'inquietude : votre travail n'est pas perdu. Reconnectez-vous puis utilisez le bouton \"reprendre\", en bas à gauche, pour recupérer votre travail",
     "i_my_diary": "Mon journal de bord",
     "i_my_research_question": "Ma question de recherche",

app/lib/shared.js

@@ -290,6 +290,7 @@ var shared = {
         name_situation = '{{i18n.i_name.situation}}',\
         name_statement = '{{i18n.i_name.statement}}',\
         on_a_date = '{{i18n.i_on-a-date}}',\
+        reuse = '{{i18n.i_reuse}}',\
         readable_by = '{{i18n.i_readable-by}}',\
         relpath = '../',\
         sign_out = '{{i18n.i_sign-out}}',\

app/rewrites.js

@@ -50,6 +50,13 @@ function(req2) {
         "endkey":   '["'+diary+'", '+logged+', "'+type+'", {}]'
       };
     break;
+    case 'codes':
+      reply.path = "_view/memo_type";
+      reply.query = {
+        "startkey": '["'+path[1]+'", '+logged+', "coding", "'+path[2]+'"]',
+        "limit": '3'
+      };
+    break;
     case 'satellites':
       var diary = path[1],
           memo = path[2];

app/templates/memo.html

@@ -282,37 +282,42 @@ <h1 {{#editable}}class="editable"{{/editable}}><img src="../style/{{type}}.svg"/
       case ('field'):
         $("h1>img").attr("title", "{{i18n.i_memo.field}}".replace('&#39;',"'"));
         $("#name").attr("placeHolder", "{{i18n.i_name.field}}");
-        $('#add').addClass('coding');
-        $("#add").attr("title", "{{i18n.i_create.coding}}");
+        $('#add')
+          .addClass('coding')
+          .attr("title", "{{i18n.i_create.coding}}");
         $("#leave-name").attr("placeHolder", "{{i18n.i_name.coding}}");
         break;
       case ('transcript'):
         $("h1>img").attr("title", "{{i18n.i_memo.transcript}}".replace('&#39;',"'"));
         $("#name").attr("placeHolder", "{{{i18n.i_name.transcript}}}");
-        $('#add').addClass('coding');
-        $("#add").attr("title", "{{i18n.i_create.coding}}");
+        $('#add')
+          .addClass('coding')
+          .attr("title", "{{i18n.i_create.coding}}");
         $("#leave-name").attr("placeHolder", "{{i18n.i_name.coding}}");
         $('.writing').removeClass('writing').addClass('words');
         break;
       case ('interview'):
         $("h1>img").attr("title", "{{i18n.i_memo.transcript}}".replace('&#39;',"'"));
         $("#name").attr("placeHolder", "{{{i18n.i_name.transcript}}}");
-        $('#add').addClass('coding');
-        $("#add").attr("title", "{{i18n.i_create.coding}}");
+        $('#add')
+           .addClass('coding')
+          .attr("title", "{{i18n.i_create.coding}}");
         $("#leave-name").attr("placeHolder", "{{i18n.i_name.coding}}");
         $('#lexical').removeClass('hidden');
         $('.post').children('font').wrapAll('<p></p>');
         break;
       case ('coding'):
         $("h1>img").attr("title", "{{i18n.i_memo.coding}}");
         $("#name").attr("placeHolder", "{{i18n.i_name.coding}}");
-        $('#add').addClass('theoretical');
-        $("#add").attr("title", "{{i18n.i_create.theoretical}}");
+        $('#add')
+          .addClass('theoretical')
+          .attr("title", "{{i18n.i_create.theoretical}}");
         $("#leave-name").attr("placeHolder", "{{i18n.i_name.theoretical}}");
         if ($('#name').val().length > 0) {
-          $('#create').removeClass('hidden');
-          $('#create').addClass('diagram');
-          $("#create").attr("title", "{{i18n.i_create.diagram}}");
+          $('#create')
+            .removeClass('hidden')
+            .addClass('diagram')
+            .attr("title", "{{i18n.i_create.diagram}}");
           $('#create-table').removeClass('hidden');
         }
         $('#add').parent().append($('#create'));
@@ -321,21 +326,25 @@ <h1 {{#editable}}class="editable"{{/editable}}><img src="../style/{{type}}.svg"/
       case ('theoretical'):
         $("h1>img").attr("title", "{{i18n.i_memo.theoretical}}");
         $("#name").attr("placeHolder", "{{i18n.i_name.theoretical}}");
-        $('#add').addClass('operational');
-        $("#add").attr("title", "{{i18n.i_create.operational}}");
+        $('#add')
+          .addClass('operational')
+          .attr("title", "{{i18n.i_create.operational}}");
         $("#leave-name").attr("placeHolder", "{{i18n.i_name.operational}}");
         break;
       case ('operational'):
         $("h1>img").attr("title", "{{i18n.i_memo.operational}}");
         $("#name").attr("placeHolder", "{{i18n.i_name.operational}}");
-        $('#add').addClass('field');
-        $("#add").attr("title", "{{i18n.i_create.field}}".replace('&#39;',"'"));
-        $('#create').addClass('interview');
-        $('#create').attr("title", "{{i18n.i_create.transcript}}".replace('&#39;',"'"));
-        $('#create').removeClass('hidden');
-        $("#leave-name").attr("placeHolder", "{{i18n.i_name.field}}");
-        $('#leave-name').prop("disabled", true);
-        $('#add').parent().append($('#create'));
+        $('#create')
+          .addClass('interview')
+          .attr("title", "{{i18n.i_create.transcript}}".replace('&#39;',"'"))
+          .removeClass('hidden');
+        $("#leave-name")
+          .attr("placeHolder", "{{i18n.i_name.field}}")
+          .prop("disabled", true);
+        $('#add')
+          .addClass('field')
+          .attr("title", "{{i18n.i_create.field}}".replace('&#39;',"'"))
+          .parent().append($('#create'));
         break;
       case ('diagram'):
         self.location = '../diagram/'+diary_id+'/'+this_id;
@@ -349,8 +358,7 @@ <h1 {{#editable}}class="editable"{{/editable}}><img src="../style/{{type}}.svg"/
       case ('storyline'):
         $("h1>img").attr("title", "{{i18n.i_memo.storyline}}");
         $("#name").attr("placeHolder", "{{i18n.i_name.storyline}}");
-        $('#add').addClass('storyline');
-        $("#add").attr("title", "{{i18n.i_create.storyline}}");
+        $('#add').addClass('storyline').attr("title", "{{i18n.i_create.storyline}}");
         $("#leave-name").attr("placeHolder", "{{i18n.i_name.storyline}}");
         break;
     }

app/updates/adapt_memo.js

@@ -2,6 +2,9 @@ function (doc, req) {
   var obj = JSON.parse(req.body);
   switch(obj.action) {
     case ('add_grounding'):
+      var i = doc.groundings.map(function(g){
+        if (g._id) {return g._id} else return g;
+      }).indexOf(obj.value);
       if (!doc.groundings) doc.groundings = [];
       if (doc.type == 'coding' && obj.highlight) {
         var highlight = obj.highlight,
@@ -15,9 +18,6 @@ function (doc, req) {
             };
         if (obj.anchor > 0) highlight = '['+highlight+']('+obj.value+'#'+obj.anchor+')';
         doc.body = doc.body + '\n \n>'+highlight+' \n \n';
-        var i = doc.groundings.map(function(g){
-          if (g._id) {return g._id} else return g;
-        }).indexOf(obj.value);
         if (i > -1) {
           if (doc.groundings[i].preview) {
             doc.groundings[i].preview.push(preview);
@@ -28,7 +28,7 @@ function (doc, req) {
           doc.groundings.push(grounding);
         }
       } else {
-        if (doc.groundings.indexOf(obj.value) == -1) doc.groundings.push(obj.value);
+        if (i == -1) doc.groundings.push(obj.value);
       }
     break;
     case ('remove_grounding'):