scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-09-12 08:04:34 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix step element reordering at importing protocol [SCI-7529] (#4677)

Browse source
This commit is contained in:
ajugo 2023-01-09 16:08:27 +01:00 • committed by GitHub
parent 83ba9d40dc
commit 9f6887ddcc
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 53 additions and 74 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

100
app/assets/javascripts/protocols/import_export/import.js
View file

@ -72,20 +72,8 @@ function importProtocolFromFile(
return template; return template;
} }
function addChildToPreviewElement(parentEl, name, childEl) {
parentEl.find("[data-hold='" + name + "']").append(childEl);
}
function hidePartOfElement(element, name) {
element.find("[data-toggle='" + name + "']").hide();
}
function showPartOfElement(element, name) {
element.find("[data-toggle='" + name + "']").show();
}
function newAssetElement(folder, stepGuid, fileRef, fileName, fileType) { function newAssetElement(folder, stepGuid, fileRef, fileName, fileType) {
var html = '<li>'; var html = '<li class="col-xs-12">';
var assetBytes; var assetBytes;
if ($.inArray(fileType, ['image/png', 'image/jpeg', 'image/gif', 'image/bmp']) > 0) { if ($.inArray(fileType, ['image/png', 'image/jpeg', 'image/gif', 'image/bmp']) > 0) {
assetBytes = getAssetBytes(folder, stepGuid, fileRef); assetBytes = getAssetBytes(folder, stepGuid, fileRef);
@ -176,6 +164,8 @@ function importProtocolFromFile(
var stepName = node.children('name').text(); var stepName = node.children('name').text();
var checklistNodes; var checklistNodes;
var tableNodes; var tableNodes;
var assetNodes;
var fileHeader;
var stepDescription = displayTinyMceAssetInDescription( var stepDescription = displayTinyMceAssetInDescription(
node, node,
protocolFolders[position], protocolFolders[position],
@ -191,39 +181,6 @@ function importProtocolFromFile(
} }
); );
// Iterate through step assets
var assetNodes = node.find('assets > asset');
if (assetNodes.length > 0) {
assetNodes.each(function() {
var fileRef = $(this).attr('fileRef');
var fileName = $(this).children('fileName').text();
var fileType = $(this).children('fileType').text();
var assetEl = newAssetElement(
protocolFolders[position],
stepGuid,
fileRef,
fileName,
fileType
);
// Append asset element to step
addChildToPreviewElement(stepEl, 'assets', assetEl);
});
} else {
hidePartOfElement(stepEl, 'assets');
}
// Iterate through step tables
tableNodes = node.find('elnTables > elnTable');
if (tableNodes.length > 0) {
tableNodes.each(function() {
addTablePreview(stepEl, this);
});
} else {
hidePartOfElement(stepEl, 'tables');
}
// Iterate through step checklists // Iterate through step checklists
checklistNodes = node.find('checklists > checklist'); checklistNodes = node.find('checklists > checklist');
if (checklistNodes.length > 0) { if (checklistNodes.length > 0) {
@ -232,21 +189,26 @@ function importProtocolFromFile(
}); });
} }
// Iterate through step tables
tableNodes = node.find('elnTables > elnTable');
if (tableNodes.length > 0) {
tableNodes.each(function() {
addTablePreview(stepEl, this);
});
}
// Parse step elements // Parse step elements
$(this).find('stepElements > stepElement').each(function() { $(this).find('stepElements > stepElement').sort(stepComparator).each(function() {
$element = $(this); $element = $(this);
switch ($(this).attr('type')) { switch ($(this).attr('type')) {
case 'Checklist': case 'Checklist':
addChecklistPreview(stepEl, $(this).find('checklist')); addChecklistPreview(stepEl, $(this).find('checklist'));
showPartOfElement(stepEl, 'checklists');
break; break;
case 'StepTable': case 'StepTable':
addTablePreview(stepEl, $(this).find('elnTable')); addTablePreview(stepEl, $(this).find('elnTable'));
showPartOfElement(stepEl, 'tables');
break; break;
case 'StepText': case 'StepText':
addStepTextPreview(stepEl, $(this).find('stepText'), protocolFolders[position], stepGuid); addStepTextPreview(stepEl, $(this).find('stepText'), protocolFolders[position], stepGuid);
showPartOfElement(stepEl, 'step-texts');
break; break;
default: default:
// nothing to do // nothing to do
@ -254,6 +216,32 @@ function importProtocolFromFile(
} }
}); });
// Iterate through step assets
assetNodes = node.find('assets > asset');
if (assetNodes.length > 0) {
fileHeader = newPreviewElement('asset-file-name', null);
stepEl.append(fileHeader);
assetNodes.each(function() {
var fileRef = $(this).attr('fileRef');
var fileName = $(this).children('fileName').text();
var fileType = $(this).children('fileType').text();
var assetEl;
assetEl = newAssetElement(
protocolFolders[position],
stepGuid,
fileRef,
fileName,
fileType
);
// Append asset element to step
stepEl.append(assetEl);
});
}
// Append step element to preview container // Append step element to preview container
previewContainer.append(stepEl); previewContainer.append(stepEl);
}); });
@ -270,10 +258,10 @@ function importProtocolFromFile(
{ name: tableName } { name: tableName }
); );
var elnTableEl = generateElnTable(tableId, tableContent); var elnTableEl = generateElnTable(tableId, tableContent);
addChildToPreviewElement(tableEl, 'table', elnTableEl); tableEl.append(elnTableEl);
// Now, append table element to step // Now, append table element to step
addChildToPreviewElement(stepEl, 'tables', tableEl); stepEl.append(tableEl);
} }
function addChecklistPreview(stepEl, checklistNode) { function addChecklistPreview(stepEl, checklistNode) {
@ -294,11 +282,11 @@ function importProtocolFromFile(
'checklist-item', 'checklist-item',
{ text: itemText } { text: itemText }
); );
addChildToPreviewElement(checklistEl, 'checklist-items', itemEl); checklistEl.append(itemEl);
}); });
// Now, add checklist item to step // Now, add checklist item to step
addChildToPreviewElement(stepEl, 'checklists', checklistEl); stepEl.append(stepEl, checklistEl);
} }
function addStepTextPreview(stepEl, stepTextNode, folder, stepGuid) { function addStepTextPreview(stepEl, stepTextNode, folder, stepGuid) {
@ -311,7 +299,7 @@ function importProtocolFromFile(
{ text: itemText } { text: itemText }
); );
addChildToPreviewElement(stepEl, 'step-texts', textEl); stepEl.append(textEl);
} }
// display tiny_mce_assets in step description // display tiny_mce_assets in step description
@ -743,7 +731,7 @@ function importProtocolFromFile(
// Parse step elements // Parse step elements
stepJson.stepElements = []; stepJson.stepElements = [];
$(this).find('stepElements > stepElement').each(function() { $(this).find('stepElements > stepElement').sort(stepComparator).each(function() {
stepJson.stepElements.push(stepElementJson($(this), index, stepGuid)); stepJson.stepElements.push(stepElementJson($(this), index, stepGuid));
}); });

27
app/views/protocols/import_export/_preview_templates.html.erb
View file

@ -17,40 +17,26 @@
<div data-val="description" class="ql-editor"></div> <div data-val="description" class="ql-editor"></div>
<hr> <hr>
<div class="row"> <div class="row">
<div class="col-xs-12">
<div data-hold="step-texts"></div>
</div>
<div data-toggle="tables" class="col-xs-12">
<div data-hold="tables"></div>
</div>
<div data-toggle="assets" class="col-xs-12">
<strong><%= t("protocols.import_export.import_modal.assets_header") %></strong>
<ul data-hold="assets">
</ul>
</div>
<div class="col-xs-12">
<div data-hold="checklists"></div>
</div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div data-template="table" style="display: none;"> <div data-template="table" class="col-xs-12">
<div> <div>
<strong data-val="name"></strong> <strong data-val="name"></strong>
</div> </div>
<div data-hold="table"></div> <div data-hold="table"></div>
</div> </div>
<div data-template="checklist" style="display: none;"> <div data-template="checklist" class="col-xs-12">
<div> <div>
<strong data-val="name"></strong> <strong data-val="name"></strong>
</div> </div>
<div data-hold="checklist-items"></div> <div data-hold="checklist-items"></div>
</div> </div>
<div data-template="checklist-item" style="display: none;"> <div data-template="checklist-item">
<div class="checkbox"> <div class="checkbox">
<label> <label>
<input type="checkbox" disabled="disabled"> <input type="checkbox" disabled="disabled">
@ -59,6 +45,11 @@
</div> </div>
</div> </div>
<div data-template="step-text" style="display: none;"> <div data-template="step-text" class="col-xs-12">
<div data-val="text"></div> <div data-val="text"></div>
</div> </div>
<div data-template="asset-file-name">
<strong><%= t("protocols.import_export.import_modal.assets_header") %></strong>
</div>