Notebook bug fixes from Testathon - 12/4/2018 (#2236)

* fix add links by drag and drop

* fix dialog component logging errors

* fix search component errors

* fix sort

* remove unused entrydnd file

* remove unnecessary console logs

src/plugins/notebook/plugin.js

@@ -27,7 +27,6 @@ define([
     "./src/actions/NewEntryContextual",
     "./src/actions/AnnotateSnapshot",
     "./src/directives/MCTSnapshot",
-    "./src/directives/EntryDnd",
     "./res/templates/controls/snapSelect.html",
     "./res/templates/controls/embedControl.html",
     "./res/templates/annotation.html",
@@ -39,7 +38,6 @@ define([
     newEntryAction,
     AnnotateSnapshotAction,
     MCTSnapshotDirective,
-    EntryDndDirective,
     snapSelectTemplate,
     embedControlTemplate,
     annotationTemplate,
@@ -67,9 +65,8 @@ define([
                             features: 'creation',
                             model: {
                                 entries: [],
-                                composition: [],
                                 entryTypes: [],
-                                defaultSort: '-createdOn'
+                                defaultSort: 'oldest'
                             },
                             properties: [
                                 {
@@ -79,11 +76,11 @@ define([
                                     options: [
                                         {
                                             name: 'Newest First',
-                                            value: "-createdOn",
+                                            value: "newest"
                                         },
                                         {
                                             name: 'Oldest First',
-                                            value: "createdOn"
+                                            value: "oldest"
                                         }
                                     ],
                                     cssClass: 'l-inline'
@@ -167,17 +164,6 @@ define([
                                 "dialogService",
                                 "notificationService"
                             ]
-                        },
-                        {
-                            "key": "mctEntryDnd",
-                            "implementation": EntryDndDirective,
-                            "depends": [
-                                "$rootScope",
-                                "$compile",
-                                "dndService",
-                                "typeService",
-                                "notificationService"
-                            ]
                         }
                     ],
                     representations: [

src/plugins/notebook/res/templates/entry.html

@@ -1,5 +1,5 @@
 <li class="c-notebook__entry c-ne has-local-controls"
-    v-on:drop="dropOnEntry(entry.id)"
+    v-on:drop="dropOnEntry(entry.id, $event)"
     v-on:dragover="dragoverOnEntry"
     >
     <div class="c-ne__time-and-content">
@@ -19,8 +19,9 @@
             <div class="c-ne__embeds">
                 <notebook-embed
                     v-for="(embed, index) in entry.embeds"
-                    v-bind:embed="embed"
+                    :key="index"
-                    v-bind:entry="entry"
+                    :embed="embed"
+                    :entry="entry"
                 ></notebook-embed>
             </div>
         </div>

src/plugins/notebook/res/templates/notebook.html

@@ -1,9 +1,10 @@
 <div class="c-notebook">
     <div class="c-notebook__head">
         <search class="c-notebook__search"
-                v-model="entrySearch"
+                :value="entrySearch"
-                v-on:input="search($event)"
+                @input="search"
-                v-on:clear="entrySearch = ''; search($event)"></search>
+                @clear="search">
+            </search>
         <div class="c-notebook__controls">
             <div class="select c-notebook__controls__time">
                 <select v-model="showTime">
@@ -15,23 +16,24 @@
             </div>
             <div class="select c-notebook__controls__sort">
                 <select v-model="sortEntries">
-                    <option value="-createdOn" selected="selected">Newest first</option>
+                    <option value="newest" :selected="sortEntries === 'newest'">Newest first</option>
-                    <option value="createdOn">Oldest first</option>
+                    <option value="oldest" :selected="sortEntries === 'oldest'">Oldest first</option>
                 </select>
             </div>
         </div>
     </div>
     <div class="c-notebook__drag-area icon-plus"
-         v-on:click="newEntry($event)"
+         @click="newEntry($event)"
-         id="newEntry" mct-entry-dnd>
+         @drop="newEntry($event)"
+         id="newEntry">
         <span class="c-notebook__drag-area__label">To start a new entry, click here or drag and drop any object</span>
     </div>
     <div class="c-notebook__entries" ng-mouseover="handleActive()">
         <ul>
             <notebook-entry
-                v-for="entry in filterBySearch(entries, entrySearch)"
+                v-for="entry in filteredAndSortedEntries"
-                v-bind:entry="entry"
+                v-bind:entry="entry">
-           ></notebook-entry>
+            </notebook-entry>
         </ul>
     </div>
 </div>

src/plugins/notebook/src/controllers/EntryController.js

@@ -105,23 +105,27 @@ function (
         }
     };
 
-    EntryController.prototype.dropOnEntry = function (entryId) {
+    EntryController.prototype.dropOnEntry = function (entryid, event) {
-        var selectedObject = this.dndService.getData('mct-domain-object'),
+
-            selectedObjectId = selectedObject.getId(),
+        var data = event.dataTransfer.getData('domainObject');
-            selectedModel = selectedObject.getModel(),
+
-            cssClass = selectedObject.getCapability('type').typeDef.cssClass,
+        if (data) {
-            entryPos = this.entryPosById(entryId),
+            var selectedObject = JSON.parse(data),
+                selectedObjectId = selectedObject.identifier.key,
+                cssClass = this.openmct.types.get(selectedObject.type),
+                entryPos = this.entryPosById(entryid),
                 currentEntryEmbeds = this.domainObject.entries[entryPos].embeds,
                 newEmbed = {
                     type: selectedObjectId,
                     id: '' + Date.now(),
                     cssClass: cssClass,
-                name: selectedModel.name,
+                    name: selectedObject.name,
                     snapshot: ''
                 };
 
             currentEntryEmbeds.push(newEmbed);
             this.openmct.objects.mutate(this.domainObject, 'entries[' + entryPos + '].embeds', currentEntryEmbeds);
+        }
     };
 
     EntryController.prototype.dragoverOnEntry = function () {
@@ -132,7 +136,6 @@ function (
         return {
             openmct: this.openmct,
             domainObject: this.domainObject,
-            dndService: this.dndService,
             dialogService: this.dialogService,
             currentEntryValue: this.currentEntryValue
         };

src/plugins/notebook/src/controllers/NotebookController.js

@@ -90,19 +90,23 @@ function (
                 return {
                     entrySearch: self.entrySearch,
                     showTime: '0',
-                    sortEntries: '-createdOn',
+                    sortEntries: self.domainObject.defaultSort,
                     entries: self.domainObject.entries,
                     currentEntryValue: ''
                 };
             },
-            methods: {
+            computed: {
-                search: function (event) {
+                filteredAndSortedEntries() {
-                    if (event.target.value) {
+                    return this.sort(this.filterBySearch(this.entries, this.entrySearch), this.sortEntries);
-                        this.entrySearch = event.target.value;
                 }
             },
+            methods: {
+                search(value) {
+                    this.entrySearch = value;
+                },
                 newEntry: self.newEntry,
-                filterBySearch: self.filterBySearch
+                filterBySearch: self.filterBySearch,
+                sort: self.sort
             }
         });
 
@@ -111,25 +115,48 @@ function (
     };
 
     NotebookController.prototype.newEntry = function (event) {
+        this.NotebookVue.search('');
+
+        var date = Date.now(),
+            embed;
+
+        if (event.dataTransfer && event.dataTransfer.getData('domainObject')) {
+            var selectedObject = JSON.parse(event.dataTransfer.getData('domainObject')),
+                selectedObjectId = selectedObject.identifier.key,
+                cssClass = this.openmct.types.get(selectedObject.type);
+
+            embed = {
+                type: selectedObjectId,
+                id: '' + date,
+                cssClass: cssClass,
+                name: selectedObject.name,
+                snapshot: ''
+            };
+        }
 
         var entries = this.domainObject.entries,
-            lastEntryIndex = entries.length - 1,
+            lastEntryIndex = this.NotebookVue.sortEntries === 'newest' ? 0 : entries.length - 1,
-            lastEntry = entries[lastEntryIndex],
+            lastEntry = entries[lastEntryIndex];
-            date = Date.now();
 
         if (lastEntry === undefined || lastEntry.text || lastEntry.embeds.length) {
             var createdEntry = {'id': 'entry-' + date, 'createdOn': date, 'embeds':[]};
 
+            if (embed) {
+                createdEntry.embeds.push(embed);
+            }
+
             entries.push(createdEntry);
             this.openmct.objects.mutate(this.domainObject, 'entries', entries);
         } else {
             lastEntry.createdOn = date;
 
-            this.openmct.objects.mutate(this.domainObject, 'entries[entries.length-1]', lastEntry);
+            if(embed) {
-            this.focusOnEntry.bind(this.NotebookVue.$children[lastEntryIndex])();
+                lastEntry.embeds.push(embed);
             }
 
-        this.entrySearch = '';
+            this.openmct.objects.mutate(this.domainObject, 'entries[entries.length-1]', lastEntry);
+            this.focusOnEntry.bind(this.NotebookVue.$children[lastEntryIndex+1])();
+        }
     };
 
     NotebookController.prototype.entryPosById = function (entryId) {
@@ -167,6 +194,33 @@ function (
         }
     };
 
+    NotebookController.prototype.sort = function (array, sortDirection) {
+        let oldest = (a,b) => {
+                if (a.createdOn < b.createdOn) {
+                    return -1;
+                } else if (a.createdOn > b.createdOn) {
+                    return 1;
+                } else {
+                    return 0;
+                }
+            },
+            newest = (a,b) => {
+                if (a.createdOn < b.createdOn) {
+                    return 1;
+                } else if (a.createdOn > b.createdOn) {
+                    return -1;
+                } else {
+                    return 0;
+                }
+            };
+
+        if (sortDirection === 'newest') {
+            return array.sort(newest);
+        } else {
+            return array.sort(oldest);
+        }
+    };
+
     NotebookController.prototype.show = function (container) {
         this.initializeVue(container);
     };

src/plugins/notebook/src/directives/EntryDnd.js

@@ -1,126 +0,0 @@
-/*****************************************************************************
- * Open MCT, Copyright (c) 2014-2016, United States Government
- * as represented by the Administrator of the National Aeronautics and Space
- * Administration. All rights reserved.
- *
- * Open MCT is licensed under the Apache License, Version 2.0 (the
- * "License"); you may not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- * http://www.apache.org/licenses/LICENSE-2.0.
- *
- * Unless required by applicable law or agreed to in writing, software
- * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
- * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
- * License for the specific language governing permissions and limitations
- * under the License.
- *
- * Open MCT includes source code licensed under additional open source
- * licenses. See the Open Source Licenses file (LICENSES.md) included with
- * this source code distribution or the Licensing information page available
- * at runtime from the About dialog for additional information.
- *****************************************************************************/
-
-define(['zepto'], function ($) {
-
-    function EntryDnd($rootScope,$compile,dndService,typeService,notificationService) {
-
-        function link($scope, $element) {
-
-            function drop(e) {
-                var selectedObject = dndService.getData('mct-domain-object');
-                var selectedModel = selectedObject.getModel();
-                var cssClass = selectedObject.getCapability('type').typeDef.cssClass;
-                var entryId = -1;
-                var embedId = -1;
-                $scope.clearSearch();
-                if ($element[0].id === 'newEntry') {
-                    entryId = $scope.domainObject.model.entries.length;
-                    embedId = 0;
-                    var lastEntry = $scope.domainObject.model.entries[entryId - 1];
-                    if (lastEntry === undefined || lastEntry.text || lastEntry.embeds) {
-                        $scope.domainObject.useCapability('mutation', function (model) {
-                            model.entries.push({'createdOn': +Date.now(),
-                                                'id': +Date.now(),
-                                                'embeds': [{'type': selectedObject.getId(),
-                                                       'id': '' + Date.now(),
-                                                       'cssClass': cssClass,
-                                                       'name': selectedModel.name,
-                                                       'snapshot': ''
-                                                     }]
-                                            });
-                        });
-                    }else {
-                        $scope.domainObject.useCapability('mutation', function (model) {
-                            model.entries[entryId - 1] =
-                                                    {'createdOn': +Date.now(),
-                                                     'embeds': [{'type': selectedObject.getId(),
-                                                                'id': '' + Date.now(),
-                                                                'cssClass': cssClass,
-                                                                'name': selectedModel.name,
-                                                                'snapshot': ''
-                                                               }]
-                                                    };
-                        });
-                    }
-
-                    $scope.scrollToTop();
-                    notificationService.info({
-                        title: "Notebook Entry created"
-                    });
-
-                }else {
-                    entryId = $scope.findEntryPositionById(Number($element[0].id.replace('entry_', '')));
-
-                    if (!$scope.domainObject.model.entries[entryId].embeds) {
-                        $scope.domainObject.model.entries[entryId].embeds = [];
-                    }
-
-                    $scope.domainObject.useCapability('mutation', function (model) {
-                        model.entries[entryId].embeds.push({'type': selectedObject.getId(),
-                                                                          'id': '' + Date.now(),
-                                                                          'cssClass': cssClass,
-                                                                          'name': selectedModel.name,
-                                                                          'snapshot': ''
-                                                                        });
-                    });
-
-                    embedId = $scope.domainObject.model.entries[entryId].embeds.length - 1;
-
-                    if (selectedObject) {
-                        e.preventDefault();
-
-                    }
-                }
-
-                if ($(e.currentTarget).hasClass('drag-active')) {
-                    $(e.currentTarget).removeClass('drag-active');
-                }
-
-            }
-
-            function dragover(e) {
-                if (!$(e.currentTarget).hasClass('drag-active')) {
-                    $(e.currentTarget).addClass('drag-active');
-                }
-            }
-
-            // Listen for the drop itself
-            $element.on('dragover', dragover);
-            $element.on('drop', drop);
-
-
-            $scope.$on('$destroy', function () {
-                $element.off('dragover', dragover);
-                $element.off('drop', drop);
-            });
-        }
-
-        return {
-            restrict: 'A',
-            link: link
-        };
-    }
-
-    return EntryDnd;
-
-});

src/ui/components/controls/search.vue

@@ -67,7 +67,6 @@
         methods: {
             clearInput() {
                 // Clear the user's input and set 'active' to false
-                this.value = '';
                 this.$emit('clear','');
                 this.active = false;
             }