mirror of
https://github.com/nasa/openmct.git
synced 2024-12-22 06:27:48 +00:00
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
This commit is contained in:
parent
981392ea07
commit
c6a181a2e7
@ -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: [
|
||||
|
@ -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"
|
||||
v-bind:entry="entry"
|
||||
:key="index"
|
||||
:embed="embed"
|
||||
:entry="entry"
|
||||
></notebook-embed>
|
||||
</div>
|
||||
</div>
|
||||
|
@ -1,9 +1,10 @@
|
||||
<div class="c-notebook">
|
||||
<div class="c-notebook__head">
|
||||
<search class="c-notebook__search"
|
||||
v-model="entrySearch"
|
||||
v-on:input="search($event)"
|
||||
v-on:clear="entrySearch = ''; search($event)"></search>
|
||||
:value="entrySearch"
|
||||
@input="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="createdOn">Oldest first</option>
|
||||
<option value="newest" :selected="sortEntries === 'newest'">Newest 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)"
|
||||
id="newEntry" mct-entry-dnd>
|
||||
@click="newEntry($event)"
|
||||
@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-bind:entry="entry"
|
||||
></notebook-entry>
|
||||
v-for="entry in filteredAndSortedEntries"
|
||||
v-bind:entry="entry">
|
||||
</notebook-entry>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
@ -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),
|
||||
EntryController.prototype.dropOnEntry = function (entryid, event) {
|
||||
|
||||
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: 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
|
||||
};
|
||||
|
@ -90,19 +90,23 @@ function (
|
||||
return {
|
||||
entrySearch: self.entrySearch,
|
||||
showTime: '0',
|
||||
sortEntries: '-createdOn',
|
||||
sortEntries: self.domainObject.defaultSort,
|
||||
entries: self.domainObject.entries,
|
||||
currentEntryValue: ''
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
search: function (event) {
|
||||
if (event.target.value) {
|
||||
this.entrySearch = event.target.value;
|
||||
computed: {
|
||||
filteredAndSortedEntries() {
|
||||
return this.sort(this.filterBySearch(this.entries, this.entrySearch), this.sortEntries);
|
||||
}
|
||||
},
|
||||
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,
|
||||
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);
|
||||
};
|
||||
|
@ -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;
|
||||
|
||||
});
|
@ -67,7 +67,6 @@
|
||||
methods: {
|
||||
clearInput() {
|
||||
// Clear the user's input and set 'active' to false
|
||||
this.value = '';
|
||||
this.$emit('clear','');
|
||||
this.active = false;
|
||||
}
|
||||
|
Loading…
Reference in New Issue
Block a user