added relation name autocomplete to relation map connection creation

This commit is contained in:
azivner 2018-11-13 10:42:55 +01:00
parent 8dc32e581e
commit 144e814b02
4 changed files with 28 additions and 8 deletions

View File

@ -236,7 +236,7 @@ async function showDialog() {
$dialog.on('focus', '.attribute-name', function (e) { $dialog.on('focus', '.attribute-name', function (e) {
attributeAutocompleteService.initAttributeNameAutocomplete({ attributeAutocompleteService.initAttributeNameAutocomplete({
$el: $(this), $el: $(this),
attrTypeFunc: () => { attributeType: () => {
const attribute = attributesModel.getTargetAttribute(this); const attribute = attributesModel.getTargetAttribute(this);
return (attribute().type === 'relation' || attribute().type === 'relation-definition') ? 'relation' : 'label'; return (attribute().type === 'relation' || attribute().type === 'relation-definition') ? 'relation' : 'label';
}, },

View File

@ -4,19 +4,28 @@ const $answer = $("#prompt-dialog-answer");
const $form = $("#prompt-dialog-form"); const $form = $("#prompt-dialog-form");
let resolve; let resolve;
let shownCb;
function ask(message, defaultValue = '') { function ask({ message, defaultValue, shown }) {
glob.activeDialog = $dialog; glob.activeDialog = $dialog;
shownCb = shown;
$question.text(message); $question.text(message);
$answer.val(defaultValue); $answer.val(defaultValue || "");
$dialog.modal(); $dialog.modal();
return new Promise((res, rej) => { resolve = res; }); return new Promise((res, rej) => { resolve = res; });
} }
$dialog.on('shown.bs.modal', () => $answer.focus().select()); $dialog.on('shown.bs.modal', () => {
if (shownCb) {
shownCb({ $dialog, $question, $answer, $form });
}
$answer.focus().select();
});
$dialog.on("hidden.bs.modal", () => { $dialog.on("hidden.bs.modal", () => {
if (resolve) { if (resolve) {

View File

@ -2,10 +2,10 @@ import server from "./server.js";
/** /**
* @param $el - element on which to init autocomplete * @param $el - element on which to init autocomplete
* @param attrTypeFunc - callback providing "relation" or "label" as a type of autocompleted attributes * @param attributeType - "relation" or "label" or callback providing one of those values as a type of autocompleted attributes
* @param open - should the autocomplete be opened after init? * @param open - should the autocomplete be opened after init?
*/ */
function initAttributeNameAutocomplete({ $el, attrTypeFunc, open }) { function initAttributeNameAutocomplete({ $el, attributeType, open }) {
if (!$el.hasClass("aa-input")) { if (!$el.hasClass("aa-input")) {
$el.autocomplete({ $el.autocomplete({
appendTo: document.querySelector('body'), appendTo: document.querySelector('body'),
@ -16,7 +16,9 @@ function initAttributeNameAutocomplete({ $el, attrTypeFunc, open }) {
}, [{ }, [{
displayKey: 'name', displayKey: 'name',
source: async (term, cb) => { source: async (term, cb) => {
const names = await server.get('attributes/names/?type=' + attrTypeFunc() + '&query=' + encodeURIComponent(term)); const type = typeof attributeType === "function" ? attributeType() : attributeType;
const names = await server.get(`attributes/names/?type=${type}&query=${encodeURIComponent(term)}`);
const result = names.map(name => { const result = names.map(name => {
return {name}; return {name};
}); });

View File

@ -5,6 +5,7 @@ import libraryLoader from "./library_loader.js";
import treeService from "./tree.js"; import treeService from "./tree.js";
import contextMenuWidget from "./context_menu.js"; import contextMenuWidget from "./context_menu.js";
import infoService from "./info.js"; import infoService from "./info.js";
import attributeAutocompleteService from "./attribute_autocomplete.js";
import promptDialog from "../dialogs/prompt.js"; import promptDialog from "../dialogs/prompt.js";
import infoDialog from "../dialogs/info.js"; import infoDialog from "../dialogs/info.js";
@ -260,7 +261,15 @@ async function connectionCreatedHandler(info, originalEvent) {
return; return;
} }
const name = await promptDialog.ask("Specify new relation name:"); const name = await promptDialog.ask({
message: "Specify new relation name:",
shown: ({ $answer }) =>
attributeAutocompleteService.initAttributeNameAutocomplete({
$el: $answer,
attributeType: "relation",
open: true
})
});
if (!name || !name.trim()) { if (!name || !name.trim()) {
jsPlumbInstance.deleteConnection(connection); jsPlumbInstance.deleteConnection(connection);