From c6a181a2e7190f8318f87852292ea3b1c3e50881 Mon Sep 17 00:00:00 2001 From: Deep Tailor Date: Fri, 7 Dec 2018 14:50:14 -0800 Subject: [PATCH] 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 | 20 +-- src/plugins/notebook/res/templates/entry.html | 7 +- .../notebook/res/templates/notebook.html | 24 ++-- .../src/controllers/EntryController.js | 37 ++--- .../src/controllers/NotebookController.js | 80 +++++++++-- .../notebook/src/directives/EntryDnd.js | 126 ------------------ src/ui/components/controls/search.vue | 1 - 7 files changed, 107 insertions(+), 188 deletions(-) delete mode 100644 src/plugins/notebook/src/directives/EntryDnd.js diff --git a/src/plugins/notebook/plugin.js b/src/plugins/notebook/plugin.js index 82630b7bdb..d8f68ff482 100644 --- a/src/plugins/notebook/plugin.js +++ b/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: [ diff --git a/src/plugins/notebook/res/templates/entry.html b/src/plugins/notebook/res/templates/entry.html index d2b4c98cac..6a1336aa2b 100644 --- a/src/plugins/notebook/res/templates/entry.html +++ b/src/plugins/notebook/res/templates/entry.html @@ -1,5 +1,5 @@
  • @@ -19,8 +19,9 @@
    diff --git a/src/plugins/notebook/res/templates/notebook.html b/src/plugins/notebook/res/templates/notebook.html index 7dfde29833..45785620b5 100644 --- a/src/plugins/notebook/res/templates/notebook.html +++ b/src/plugins/notebook/res/templates/notebook.html @@ -1,9 +1,10 @@
    + :value="entrySearch" + @input="search" + @clear="search"> +
    - - + +
    + @click="newEntry($event)" + @drop="newEntry($event)" + id="newEntry"> To start a new entry, click here or drag and drop any object
      - + +
    \ No newline at end of file diff --git a/src/plugins/notebook/src/controllers/EntryController.js b/src/plugins/notebook/src/controllers/EntryController.js index 2f0cbf9c6b..92f6bd98cd 100644 --- a/src/plugins/notebook/src/controllers/EntryController.js +++ b/src/plugins/notebook/src/controllers/EntryController.js @@ -105,23 +105,27 @@ function ( } }; - EntryController.prototype.dropOnEntry = function (entryId) { - var selectedObject = this.dndService.getData('mct-domain-object'), - selectedObjectId = selectedObject.getId(), - selectedModel = selectedObject.getModel(), - cssClass = selectedObject.getCapability('type').typeDef.cssClass, - entryPos = this.entryPosById(entryId), - currentEntryEmbeds = this.domainObject.entries[entryPos].embeds, - newEmbed = { - type: selectedObjectId, - id: '' + Date.now(), - cssClass: cssClass, - name: selectedModel.name, - snapshot: '' - }; + EntryController.prototype.dropOnEntry = function (entryid, event) { - currentEntryEmbeds.push(newEmbed); - this.openmct.objects.mutate(this.domainObject, 'entries[' + entryPos + '].embeds', currentEntryEmbeds); + var data = event.dataTransfer.getData('domainObject'); + + if (data) { + 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: 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 }; diff --git a/src/plugins/notebook/src/controllers/NotebookController.js b/src/plugins/notebook/src/controllers/NotebookController.js index 80ef869ea2..8ca414bd0f 100644 --- a/src/plugins/notebook/src/controllers/NotebookController.js +++ b/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: '' }; }, + computed: { + filteredAndSortedEntries() { + return this.sort(this.filterBySearch(this.entries, this.entrySearch), this.sortEntries); + } + }, methods: { - search: function (event) { - if (event.target.value) { - this.entrySearch = event.target.value; - } + 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, - lastEntry = entries[lastEntryIndex], - date = Date.now(); + lastEntryIndex = this.NotebookVue.sortEntries === 'newest' ? 0 : entries.length - 1, + lastEntry = entries[lastEntryIndex]; 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); - this.focusOnEntry.bind(this.NotebookVue.$children[lastEntryIndex])(); - } + if(embed) { + 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); }; diff --git a/src/plugins/notebook/src/directives/EntryDnd.js b/src/plugins/notebook/src/directives/EntryDnd.js deleted file mode 100644 index 9dc0509051..0000000000 --- a/src/plugins/notebook/src/directives/EntryDnd.js +++ /dev/null @@ -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; - -}); diff --git a/src/ui/components/controls/search.vue b/src/ui/components/controls/search.vue index 06bcd31147..f09d50c62f 100644 --- a/src/ui/components/controls/search.vue +++ b/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; }