diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml index 4eb7794a30093704914a4c645ad43b8537d04d0b..6817020fcabf4b7551e264709fc89cc487e4f0a0 100644 --- a/.gitlab-ci.yml +++ b/.gitlab-ci.yml @@ -102,18 +102,13 @@ build-testenv: # stage: deploy # Special job for serving a static website. See https://docs.gitlab.com/ee/ci/yaml/README.html#pages -pages: - tags: [ docker ] +pages_prepare: &pages_prepare + tags: [ cached-dind ] stage: deploy only: refs: - /^release-.*$/i - - master - variables: - # run pages only on gitlab.com - - $CI_SERVER_HOST == "gitlab.com" script: - # TODO is this a good location here? - npm install jsdoc - npm install jsdoc-sphinx - echo "Deploying" @@ -122,3 +117,8 @@ pages: artifacts: paths: - public +pages: + <<: *pages_prepare + only: + refs: + - main diff --git a/CHANGELOG.md b/CHANGELOG.md index 58063e36939287c205cd539df1b3fc8ff59dc8d3..198820c33553f34451f125d92eaed33876490df5 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -36,6 +36,9 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 ### Fixed +- #202 - Make filter fields in edit mode toolbox visible +- #117 - Reload data model after adding an RT or a Property +* #214 - Paging panel is hidden. * #156 - Edit mode for Safari 11 * #160 - Entity preview for Safari 11 * Several minor cosmetic flaws diff --git a/src/core/js/caosdb.js b/src/core/js/caosdb.js index e5f77ab21d27de1e8a36d6b5ba1d09994934f343..19e4bc95a1aa6e0bceabd40c3882e5c9a35205f3 100644 --- a/src/core/js/caosdb.js +++ b/src/core/js/caosdb.js @@ -1163,6 +1163,8 @@ async function retrieve_dragged_property(id) { * a web page using a specialized XSLT named entity palette. * @return An array of entities. */ +//TODO the name is inaccurate; actually the existing RT/Property panel is +//created; Suggestion: Split it or rename async function retrieve_data_model() { // TODO possibly allow single query let props = await connection.get("Entity/?query=FIND Property"); diff --git a/src/core/js/edit_mode.js b/src/core/js/edit_mode.js index cd11e24d4af2aa5966780c75c5251ff1f337172b..2012e05118f7bd87910edff0fce255596d62f309 100644 --- a/src/core/js/edit_mode.js +++ b/src/core/js/edit_mode.js @@ -564,6 +564,9 @@ var edit_mode = new function() { this.leave_edit_mode = function() {} + /** + * Initializes the edit mode and loads the tool box. + */ this.enter_edit_mode = async function(editApp = undefined) { window.localStorage.edit_mode = "true"; @@ -593,18 +596,47 @@ var edit_mode = new function() { } } + /** + * Reload the toolbox, e.g. when new Properties or RecordTypes have been added. + */ + this.reload_edit_mode_toolbox = async function() { + const model = await edit_mode.retrieve_data_model(); + edit_mode.load_tool_box(model); + } - this.retrieve_data_model = retrieve_data_model; + /** + * Make all draggable elements in this model (as defined by the css class + * caosdb-f-edit-drag draggable by adding the html attribute draggable and + * setting it to true + */ + this.add_draggable_property_to_model = function (model) { + var props = model.querySelectorAll(".caosdb-f-edit-drag"); + for (var pel of props) { + pel.setAttribute("draggable", true); + } + } + this.retrieve_data_model = retrieve_data_model; + /** + * Load the tool box and make it draggable. + */ this.init_tool_box = function(model) { + edit_mode.load_tool_box(model); + edit_mode.init_dragable(); + } + /** + * Remove all warnings and set the HTML of the toolbox panel to + * the model given by model. + */ + this.load_tool_box = function(model) { + edit_mode.add_draggable_property_to_model(model); var editPanel = edit_mode.get_edit_panel(); removeAllWaitingNotifications(editPanel); - - editPanel.innerHTML = xml2str(model); - edit_mode.init_dragable(); - + // remove previously added model + $(".caosdb-f-edit-mode-existing").remove() + $(editPanel).children()[0].appendChild(model); } @@ -1215,6 +1247,13 @@ var edit_mode = new function() { edit_mode.add_property_trash_button($(element).find(".caosdb-property-edit")[0],element); } + + /** + * Create a new Record using an existing RecordType. + * The RecordType can be specified using recordtype_id. + * + * Currently name is ignored. TODO: check whether that behavior is intended. + */ this.create_new_record = async function(recordtype_id, name = undefined) { var rt = await retrieve(recordtype_id); var newrecord = createEntityXML("Record", undefined, undefined, @@ -1229,16 +1268,22 @@ var edit_mode = new function() { return x[0]; } - + /** + * All draggable elements (that are those which have a css class + * caosdb-f-edit-drag are added the correct drag listener and the attribute draggable. + * + * This is now done using bubbling so that the listeners are also dynamically updated. + */ this.init_dragable = function() { - var props = document.getElementsByClassName("caosdb-f-edit-drag"); - for (var pel of props) { - pel.addEventListener("dragstart", edit_mode.dragstart); - pel.setAttribute("draggable", true); - } + // Bubbling: Add the listener to the document and check whether the class is present. + document.addEventListener("dragstart", function(event) { + if (event.target.classList.contains("caosdb-f-edit-drag")) { + edit_mode.dragstart(event); + } + }); } - /* + /** * This function treats the deletion of entities, i.e. when the "delete" * button is clicked. */ @@ -1602,6 +1647,7 @@ var edit_mode = new function() { app.entity.dispatchEvent(edit_mode.end_edit); resolve_references.init(); preview.init(); + edit_mode.reload_edit_mode_toolbox(); } app.waiting = createWaitingNotification("Please wait."); $(app.waiting).hide(); diff --git a/src/core/js/webcaosdb.js b/src/core/js/webcaosdb.js index 6d374824d0ecc1feebe13f33142b52e3ac9ce7f3..221b8b5a12da92395efcc4e52bfec0d7d6561ce9 100644 --- a/src/core/js/webcaosdb.js +++ b/src/core/js/webcaosdb.js @@ -1287,7 +1287,10 @@ var paging = new function () { } this.init = function () { - paging.initPaging(window.location.href, document.body.getAttribute("data-response-count")); + var response_count = document.body.getAttribute("data-response-count"); + if (parseInt(response_count) >= 0) { + paging.initPaging(window.location.href, response_count); + } } }; @@ -1867,18 +1870,12 @@ this.user_management = function ($, connection, createWaitingNotification, creat }; }($, connection, createWaitingNotification, createErrorNotification); -/** - * When the page is scrolled down 100 pixels, the scroll-back button appears. - * - * @return FIXME - */ /** - * Every initial function calling is done here. - * - * @return TODO + * Initialize all the submodules. */ function initOnDocumentReady() { + paging.init(); hintMessages.init(); // init query form diff --git a/src/core/xsl/entity_palette.xsl b/src/core/xsl/entity_palette.xsl index e45364c80a4ba3849d5b9abaf29c5b85c1b76af1..f1d27d3a3ab793d7284025101fd8aa8abde8aa79 100644 --- a/src/core/xsl/entity_palette.xsl +++ b/src/core/xsl/entity_palette.xsl @@ -3,11 +3,6 @@ <xsl:output method="html"/> <xsl:template match="/Response"> - <div class="list-group list-group-flush"> - <div class="list-group-item btn-group-vertical caosdb-v-editmode-btngroup caosdb-f-edit-mode-create-buttons"> - <button type="button" class="btn btn-secondary caosdb-f-edit-panel-new-button new-property">Create Property</button> - <button type="button" class="btn btn-secondary caosdb-f-edit-panel-new-button new-recordtype">Create RecordType</button> - </div> <div title="Drag and drop Properties from this panel to the Entities on the left." class="caosdb-v-editmode-existing caosdb-f-edit-mode-existing d-none"> <div class="card-header"> <h6>Existing Properties</h6> @@ -15,7 +10,6 @@ <div class="card"> <div class="input-group" style="width: 100%;"> <input class="form-control" placeholder="filter..." title="Type a name (full or partial)." oninput="edit_mode.filter('properties');" id="caosdb-f-filter-properties" type="text"/> - <button class="btn btn-secondary caosdb-f-edit-panel-new-button new-property caosdb-f-hide-on-empty-input" title="Create this Property." ><i class="bi-plus"></i></button> </div> <ul class="caosdb-v-edit-list list-group"> <xsl:apply-templates select="./Property"/> @@ -29,13 +23,11 @@ <div class="card"> <div class="input-group" style="width: 100%;"> <input class="form-control" placeholder="filter..." title="Type a name (full or partial)." oninput="edit_mode.filter('recordtypes');" id="caosdb-f-filter-recordtypes" type="text"/> - <button class="btn btn-secondary caosdb-f-edit-panel-new-button new-recordtype caosdb-f-hide-on-empty-input" title="Create this RecordType"><i class="bi-plus"></i></button> </div> <ul class="caosdb-v-edit-list list-group"> <xsl:apply-templates select="./RecordType"/> </ul> </div> - </div> </div> </xsl:template> diff --git a/src/core/xsl/main.xsl b/src/core/xsl/main.xsl index 238f790fdcd93816d36adf35886e162575df9aa3..8dcaaa0157cd1730c4e14517bcde8f5c44c2a38a 100644 --- a/src/core/xsl/main.xsl +++ b/src/core/xsl/main.xsl @@ -120,7 +120,14 @@ <div class="card-header"> <span class="card-title">Edit Mode Toolbox</span> </div> - <div class="caosdb-f-edit-panel-body"></div> + <div class="caosdb-f-edit-panel-body"> + <div class="list-group list-group-flush"> + <div class="list-group-item btn-group-vertical caosdb-v-editmode-btngroup caosdb-f-edit-mode-create-buttons"> + <button type="button" class="btn btn-secondary caosdb-f-edit-panel-new-button new-property">Create Property</button> + <button type="button" class="btn btn-secondary caosdb-f-edit-panel-new-button new-recordtype">Create RecordType</button> + </div> + </div> + </div> </div> </div> </div> diff --git a/test/core/js/modules/edit_mode.js.js b/test/core/js/modules/edit_mode.js.js index 905b57ef0947f652e5d4959acd802244f0d4998d..cfac13a0bd81bb0c17baca846420ad3872736bdf 100644 --- a/test/core/js/modules/edit_mode.js.js +++ b/test/core/js/modules/edit_mode.js.js @@ -487,8 +487,11 @@ QUnit.test("remove_delete_button", function (assert) { { + //TODO this is not really ... readable. This also speaks in favor of + //splitting the retrieval of the data model from the conversion to the panel. + //The xml of a couple of entities would not be as bad. const datamodel = ` -<div><div class=\"btn-group-vertical\"><button type=\"button\" class=\"btn btn-secondary caosdb-f-edit-panel-new-button new-property\">Create new Property</button><button type=\"button\" class=\"btn btn-secondary caosdb-f-edit-panel-new-button new-recordtype\">Create new RecordType</button></div><div title=\"Drag and drop Properties from this panel to the Entities on the left.\" class=\"card\"><div class=\"card-header\"><h5>Existing Properties</h5></div><div class=\"card-body\"><div class=\"input-group\" style=\"width: 100%;\"><input class=\"form-control\" placeholder=\"filter...\" title=\"Type a name (full or partial).\" oninput=\"edit_mode.filter('properties');\" id=\"caosdb-f-filter-properties\" type=\"text\" /><span class=\"input-group-btn\"><button class=\"btn btn-secondary caosdb-f-edit-panel-new-button new-property caosdb-f-hide-on-empty-input\" title=\"Create this Property.\"><span class=\"glyphicon glyphicon-plus\"></span></button></span></div><ul class=\"caosdb-v-edit-list\"><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-p-20\">name</li><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-p-21\">unit</li><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-p-24\">description</li></ul></div></div><div title=\"Drag and drop RecordTypes from this panel to the Entities on the left.\" class=\"card\"><div class=\"card-header\"><h5>Existing RecordTypes</h5></div><div class=\"card-body\"><div class=\"input-group\" style=\"width: 100%;\"><input class=\"form-control\" placeholder=\"filter...\" title=\"Type a name (full or partial).\" oninput=\"edit_mode.filter('recordtypes');\" id=\"caosdb-f-filter-recordtypes\" type=\"text\" /><span class=\"input-group-btn\"><button class=\"btn btn-secondary caosdb-f-edit-panel-new-button new-recordtype caosdb-f-hide-on-empty-input\" title=\"Create this RecordType\"><span class=\"glyphicon glyphicon-plus\"></span></button></span></div><ul class=\"caosdb-v-edit-list\"><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-rt-30992\">Test</li><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-rt-31015\">Test2</li></ul></div></div></div>`; +<div title=\"Drag and drop Properties from this panel to the Entities on the left.\" class=\"card\"><div class=\"card-header\"><h5>Existing Properties</h5></div><div class=\"card-body\"><div class=\"input-group\" style=\"width: 100%;\"><input class=\"form-control\" placeholder=\"filter...\" title=\"Type a name (full or partial).\" oninput=\"edit_mode.filter('properties');\" id=\"caosdb-f-filter-properties\" type=\"text\" /><span class=\"input-group-btn\"><button class=\"btn btn-secondary caosdb-f-edit-panel-new-button new-property caosdb-f-hide-on-empty-input\" title=\"Create this Property.\"><span class=\"glyphicon glyphicon-plus\"></span></button></span></div><ul class=\"caosdb-v-edit-list\"><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-p-20\">name</li><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-p-21\">unit</li><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-p-24\">description</li></ul></div></div><div title=\"Drag and drop RecordTypes from this panel to the Entities on the left.\" class=\"card\"><div class=\"card-header\"><h5>Existing RecordTypes</h5></div><div class=\"card-body\"><div class=\"input-group\" style=\"width: 100%;\"><input class=\"form-control\" placeholder=\"filter...\" title=\"Type a name (full or partial).\" oninput=\"edit_mode.filter('recordtypes');\" id=\"caosdb-f-filter-recordtypes\" type=\"text\" /><span class=\"input-group-btn\"><button class=\"btn btn-secondary caosdb-f-edit-panel-new-button new-recordtype caosdb-f-hide-on-empty-input\" title=\"Create this RecordType\"><span class=\"glyphicon glyphicon-plus\"></span></button></span></div><ul class=\"caosdb-v-edit-list\"><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-rt-30992\">Test</li><li class=\"caosdb-f-edit-drag list-group-item caosdb-v-edit-drag\" id=\"caosdb-f-edit-rt-31015\">Test2</li></ul></div></div>`; edit_mode.query = async function(q) { return []; @@ -497,7 +500,7 @@ QUnit.test("remove_delete_button", function (assert) { QUnit.test("test case 1 - insert property", async function (assert) { // here lives the test tool box - const test_tool_box = $('<div class="caosdb-f-edit-panel-body" />'); + const test_tool_box = $('<div class="caosdb-f-edit-panel-body" > <div class="list-group list-group-flush"> <div class="list-group-item btn-group-vertical caosdb-v-editmode-btngroup caosdb-f-edit-mode-create-buttons"> <button type="button" class="btn btn-secondary caosdb-f-edit-panel-new-button new-property">Create Property</button> <button type="button" class="btn btn-secondary caosdb-f-edit-panel-new-button new-recordtype">Create RecordType</button> </div> </div>'); // here live the entities const main_panel = $('<div class="caosdb-f-main-entities"/>'); @@ -510,7 +513,7 @@ QUnit.test("remove_delete_button", function (assert) { assert.equal(edit_mode.is_edit_mode(), false, "edit_mode should not be active"); // fake server response edit_mode.retrieve_data_model = async function () { - return str2xml(datamodel); + return $(datamodel)[0]; } var app = await edit_mode.enter_edit_mode(); assert.equal(edit_mode.is_edit_mode(), true, "now, edit_mode should be active");