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

Add data-e2e to result page [SCI-12198]

Browse source
This commit is contained in:
Klemen Benedicic 2025-08-05 15:41:08 +02:00
parent e1e72b171d
commit b31f8638c5
2 changed files with 97 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

124
app/javascript/vue/results/result.vue
View file

@ -6,6 +6,7 @@
@dragover.prevent @dragover.prevent
:data-id="result.id" :data-id="result.id"
:class="{ 'bg-sn-super-light-blue': dragingFile, 'bg-white': !dragingFile, 'locked': locked, 'pointer-events-none': addingContent }" :class="{ 'bg-sn-super-light-blue': dragingFile, 'bg-white': !dragingFile, 'locked': locked, 'pointer-events-none': addingContent }"
:data-e2e="`e2e-CO-task-result${result.id}`"
> >
<div class="text-xl items-center flex flex-col text-sn-blue h-full justify-center left-0 absolute top-0 w-full" <div class="text-xl items-center flex flex-col text-sn-blue h-full justify-center left-0 absolute top-0 w-full"
v-if="dragingFile" v-if="dragingFile"
@ -20,6 +21,7 @@
:href="'#resultBody' + result.id" :href="'#resultBody' + result.id"
data-toggle="collapse" data-toggle="collapse"
data-remote="true" data-remote="true"
:data-e2e="`e2e-BT-task-result${result.id}-visibilityToggle`"
@click="toggleCollapsed"> @click="toggleCollapsed">
<span class="sn-icon sn-icon-right "></span> <span class="sn-icon sn-icon-right "></span>
</a> </a>
@ -35,6 +37,7 @@
:placeholder="i18n.t('my_modules.results.placeholder')" :placeholder="i18n.t('my_modules.results.placeholder')"
:defaultValue="i18n.t('my_modules.results.default_name')" :defaultValue="i18n.t('my_modules.results.default_name')"
:timestamp="i18n.t('protocols.steps.timestamp', {date: result.attributes.created_at, user: result.attributes.created_by })" :timestamp="i18n.t('protocols.steps.timestamp', {date: result.attributes.created_at, user: result.attributes.created_by })"
:data-e2e="`task-result${result.id}`"
@editingEnabled="editingName = true" @editingEnabled="editingName = true"
@editingDisabled="editingName = false" @editingDisabled="editingName = false"
:editOnload="result.newResult == true" :editOnload="result.newResult == true"
@ -48,6 +51,7 @@
:btnText="i18n.t('my_modules.results.insert.button')" :btnText="i18n.t('my_modules.results.insert.button')"
:position="'right'" :position="'right'"
:caret="true" :caret="true"
:data-e2e="`e2e-DD-task-result${result.id}-insertContent`"
@create:custom_well_plate="openCustomWellPlateModal" @create:custom_well_plate="openCustomWellPlateModal"
@create:table="(...args) => this.createElement('table', ...args)" @create:table="(...args) => this.createElement('table', ...args)"
@create:checklist="createElement('checklist')" @create:checklist="createElement('checklist')"
@ -65,14 +69,26 @@
:data-object-type="result.attributes.type" :data-object-type="result.attributes.type"
tabindex="0" tabindex="0"
></span> <!-- Hidden element to support legacy code --> ></span> <!-- Hidden element to support legacy code -->
<tempplate v-if="result.attributes.steps.length == 0"> <template v-if="result.attributes.steps.length == 0">
<button v-if="urls.update_url" ref="linkButton" :title="i18n.t('my_modules.results.link_steps')" class="btn btn-light icon-btn" @click="this.openLinkStepsModal = true"> <button
v-if="urls.update_url"
ref="linkButton"
:title="i18n.t('my_modules.results.link_steps')"
class="btn btn-light icon-btn"
@click="this.openLinkStepsModal = true"
:data-e2e="`e2e-BT-task-result${result.id}-linkStep`"
>
{{ i18n.t('my_modules.results.link_to_step') }} {{ i18n.t('my_modules.results.link_to_step') }}
</button> </button>
</tempplate> </template>
<GeneralDropdown v-else ref="linkedStepsDropdown" position="right"> <GeneralDropdown v-else ref="linkedStepsDropdown" position="right">
<template v-slot:field> <template v-slot:field>
<button ref="linkButton" class="btn btn-light icon-btn" :title="i18n.t('my_modules.results.linked_steps')"> <button
ref="linkButton"
class="btn btn-light icon-btn"
:title="i18n.t('my_modules.results.linked_steps')"
:data-e2e="`e2e-DD-task-result${result.id}-linkStep-showLinked`"
>
<i class="sn-icon sn-icon-steps"></i> <i class="sn-icon sn-icon-steps"></i>
<span class="absolute top-1 -right-1 h-4 min-w-4 bg-sn-science-blue text-white flex items-center justify-center rounded-full text-[10px]"> <span class="absolute top-1 -right-1 h-4 min-w-4 bg-sn-science-blue text-white flex items-center justify-center rounded-full text-[10px]">
{{ result.attributes.steps.length }} {{ result.attributes.steps.length }}
@ -86,14 +102,18 @@
:title="step.name" :title="step.name"
:href="protocolUrl(step.id)" :href="protocolUrl(step.id)"
class="py-2.5 px-3 hover:bg-sn-super-light-grey cursor-pointer block hover:no-underline text-sn-blue truncate" class="py-2.5 px-3 hover:bg-sn-super-light-grey cursor-pointer block hover:no-underline text-sn-blue truncate"
:data-e2e="`e2e-BT-task-result${result.id}-linkStep-step${step.id}`"
> >
{{ step.name }} {{ step.name }}
</a> </a>
</div> </div>
<template v-if="urls.update_url"> <template v-if="urls.update_url">
<hr class="my-0"> <hr class="my-0">
<div class="py-2.5 px-3 hover:bg-sn-super-light-grey cursor-pointer text-sn-blue" <div
@click="this.openLinkStepsModal = true; $refs.linkedStepsDropdown.closeMenu()"> class="py-2.5 px-3 hover:bg-sn-super-light-grey cursor-pointer text-sn-blue"
@click="this.openLinkStepsModal = true; $refs.linkedStepsDropdown.closeMenu()"
:data-e2e="`e2e-BT-task-result${result.id}-linkStep-manage`"
>
{{ i18n.t('protocols.steps.manage_links') }} {{ i18n.t('protocols.steps.manage_links') }}
</div> </div>
</template> </template>
@ -104,7 +124,9 @@
class="open-comments-sidebar btn icon-btn btn-light" class="open-comments-sidebar btn icon-btn btn-light"
data-turbolinks="false" data-turbolinks="false"
data-object-type="Result" data-object-type="Result"
:data-object-id="result.id"> :data-object-id="result.id"
:data-e2e="`e2e-BT-task-result${result.id}-comments`"
>
<i class="sn-icon sn-icon-comments"></i> <i class="sn-icon sn-icon-comments"></i>
<span class="comments-counter" :class="{ 'hidden': !result.attributes.comments_count }" <span class="comments-counter" :class="{ 'hidden': !result.attributes.comments_count }"
:id="`comment-count-${result.id}`"> :id="`comment-count-${result.id}`">
@ -118,6 +140,7 @@
:btnClasses="'btn btn-light icon-btn'" :btnClasses="'btn btn-light icon-btn'"
:position="'right'" :position="'right'"
:btnIcon="'sn-icon sn-icon-more-hori'" :btnIcon="'sn-icon sn-icon-more-hori'"
:data-e2e="`e2e-DD-task-result${result.id}-optionsMenu`"
@reorder="openReorderModal" @reorder="openReorderModal"
@duplicate="duplicateResult" @duplicate="duplicateResult"
@archive="archiveResult" @archive="archiveResult"
@ -243,14 +266,46 @@ export default {
customWellPlate: false, customWellPlate: false,
openLinkStepsModal: false, openLinkStepsModal: false,
wellPlateOptions: [ wellPlateOptions: [
{ text: I18n.t('protocols.steps.insert.well_plate_options.custom'), emit: 'create:custom_well_plate'}, {
{ text: I18n.t('protocols.steps.insert.well_plate_options.32_x_48'), emit: 'create:table', params: [32, 48] }, text: I18n.t('protocols.steps.insert.well_plate_options.custom'),
{ text: I18n.t('protocols.steps.insert.well_plate_options.16_x_24'), emit: 'create:table', params: [16, 24] }, emit: 'create:custom_well_plate',
{ text: I18n.t('protocols.steps.insert.well_plate_options.8_x_12'), emit: 'create:table', params: [8, 12] }, data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-wellPlate-custom`
{ text: I18n.t('protocols.steps.insert.well_plate_options.6_x_8'), emit: 'create:table', params: [6, 8] }, },
{ text: I18n.t('protocols.steps.insert.well_plate_options.4_x_6'), emit: 'create:table', params: [4, 6] }, {
{ text: I18n.t('protocols.steps.insert.well_plate_options.3_x_4'), emit: 'create:table', params: [3, 4] }, text: I18n.t('protocols.steps.insert.well_plate_options.32_x_48'), emit: 'create:table',
{ text: I18n.t('protocols.steps.insert.well_plate_options.2_x_3'), emit: 'create:table', params: [2, 3] } params: [32, 48],
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-wellPlate-32`
},
{
text: I18n.t('protocols.steps.insert.well_plate_options.16_x_24'), emit: 'create:table',
params: [16, 24],
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-wellPlate-16`
},
{
text: I18n.t('protocols.steps.insert.well_plate_options.8_x_12'), emit: 'create:table',
params: [8, 12],
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-wellPlate-8`
},
{
text: I18n.t('protocols.steps.insert.well_plate_options.6_x_8'), emit: 'create:table',
params: [6, 8],
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-wellPlate-6`
},
{
text: I18n.t('protocols.steps.insert.well_plate_options.4_x_6'), emit: 'create:table',
params: [4, 6],
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-wellPlate-4`
},
{
text: I18n.t('protocols.steps.insert.well_plate_options.3_x_4'), emit: 'create:table',
params: [3, 4],
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-wellPlate-3`
},
{
text: I18n.t('protocols.steps.insert.well_plate_options.2_x_3'), emit: 'create:table',
params: [2, 3],
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-wellPlate-2`
}
], ],
editingName: false, editingName: false,
confirmingDelete: false, confirmingDelete: false,
@ -328,25 +383,29 @@ export default {
if (this.urls.upload_attachment_url) { if (this.urls.upload_attachment_url) {
menu = menu.concat([{ menu = menu.concat([{
text: this.i18n.t('my_modules.results.insert.add_file'), text: this.i18n.t('my_modules.results.insert.add_file'),
emit: 'create:file' emit: 'create:file',
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-file-addFromPc`
}]); }]);
} }
if (this.result.attributes.wopi_enabled) { if (this.result.attributes.wopi_enabled) {
menu = menu.concat([{ menu = menu.concat([{
text: this.i18n.t('assets.create_wopi_file.button_text'), text: this.i18n.t('assets.create_wopi_file.button_text'),
emit: 'create:wopi_file' emit: 'create:wopi_file',
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-file-wopi`
}]); }]);
} }
if (this.result.attributes.open_vector_editor_context.new_sequence_asset_url) { if (this.result.attributes.open_vector_editor_context.new_sequence_asset_url) {
menu = menu.concat([{ menu = menu.concat([{
text: this.i18n.t('open_vector_editor.new_sequence_file'), text: this.i18n.t('open_vector_editor.new_sequence_file'),
emit: 'create:ove_file' emit: 'create:ove_file',
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-file-sequence`
}]); }]);
} }
if (this.result.attributes.marvinjs_enabled) { if (this.result.attributes.marvinjs_enabled) {
menu = menu.concat([{ menu = menu.concat([{
text: this.i18n.t('marvinjs.new_button'), text: this.i18n.t('marvinjs.new_button'),
emit: 'create:marvinjs_file' emit: 'create:marvinjs_file',
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-file-chemical`
}]); }]);
} }
return menu; return menu;
@ -357,21 +416,25 @@ export default {
menu = menu.concat([{ menu = menu.concat([{
text: this.i18n.t('my_modules.results.insert.text'), text: this.i18n.t('my_modules.results.insert.text'),
icon: 'sn-icon sn-icon-result-text', icon: 'sn-icon sn-icon-result-text',
emit: 'create:text' emit: 'create:text',
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-text`
}, { }, {
text: this.i18n.t('my_modules.results.insert.attachment'), text: this.i18n.t('my_modules.results.insert.attachment'),
submenu: this.filesMenu, submenu: this.filesMenu,
icon: 'sn-icon sn-icon-file', icon: 'sn-icon sn-icon-file',
position: 'left' position: 'left',
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-file`
}, { }, {
text: this.i18n.t('my_modules.results.insert.table'), text: this.i18n.t('my_modules.results.insert.table'),
icon: 'sn-icon sn-icon-tables', icon: 'sn-icon sn-icon-tables',
emit: 'create:table' emit: 'create:table',
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-table`
}, { }, {
text: this.i18n.t('my_modules.results.insert.well_plate'), text: this.i18n.t('my_modules.results.insert.well_plate'),
icon: 'sn-icon sn-icon-tables', icon: 'sn-icon sn-icon-tables',
submenu: this.wellPlateOptions, submenu: this.wellPlateOptions,
position: 'left' position: 'left',
data_e2e: `e2e-DO-task-result${this.result.id}-insertMenu-wellPlate`
}]); }]);
} }
@ -382,31 +445,36 @@ export default {
if (this.urls.reorder_elements_url && this.elements.length > 1) { if (this.urls.reorder_elements_url && this.elements.length > 1) {
menu = menu.concat([{ menu = menu.concat([{
text: this.i18n.t('my_modules.results.actions.rearrange'), text: this.i18n.t('my_modules.results.actions.rearrange'),
emit: 'reorder' emit: 'reorder',
data_e2e: `e2e-DO-task-result${this.result.id}-optionsMenu-reorder`
}]); }]);
} }
if (this.urls.duplicate_url && !this.result.attributes.archived) { if (this.urls.duplicate_url && !this.result.attributes.archived) {
menu = menu.concat([{ menu = menu.concat([{
text: this.i18n.t('my_modules.results.actions.duplicate'), text: this.i18n.t('my_modules.results.actions.duplicate'),
emit: 'duplicate' emit: 'duplicate',
data_e2e: `e2e-DO-task-result${this.result.id}-optionsMenu-duplicate`
}]); }]);
} }
if (this.urls.archive_url) { if (this.urls.archive_url) {
menu = menu.concat([{ menu = menu.concat([{
text: this.i18n.t('my_modules.results.actions.archive'), text: this.i18n.t('my_modules.results.actions.archive'),
emit: 'archive' emit: 'archive',
data_e2e: `e2e-DO-task-result${this.result.id}-optionsMenu-archive`
}]); }]);
} }
if (this.urls.restore_url) { if (this.urls.restore_url) {
menu = menu.concat([{ menu = menu.concat([{
text: this.i18n.t('my_modules.results.actions.restore'), text: this.i18n.t('my_modules.results.actions.restore'),
emit: 'restore' emit: 'restore',
data_e2e: `e2e-DO-task-result${this.result.id}-optionsMenu-restore`
}]); }]);
} }
if (this.urls.delete_url) { if (this.urls.delete_url) {
menu = menu.concat([{ menu = menu.concat([{
text: this.i18n.t('my_modules.results.actions.delete'), text: this.i18n.t('my_modules.results.actions.delete'),
emit: 'delete' emit: 'delete',
data_e2e: `e2e-DO-task-result${this.result.id}-optionsMenu-delete`
}]); }]);
} }
return menu; return menu;

2
app/views/results/index.html.erb
View file

@ -17,7 +17,7 @@
<%= render partial: 'my_modules/header' %> <%= render partial: 'my_modules/header' %>
<%= render partial: 'my_modules/header_actions' %> <%= render partial: 'my_modules/header_actions' %>
<div id="results" data-behaviour="vue"> <div id="results" data-behaviour="vue" data-e2e="e2e-CO-task-results">
<results url="<%= my_module_results_url(@my_module, view_mode: params[:view_mode]) %>" <results url="<%= my_module_results_url(@my_module, view_mode: params[:view_mode]) %>"
active_url="<%= my_module_results_url(@my_module) %>" active_url="<%= my_module_results_url(@my_module) %>"
protocol-id="<%= @my_module.protocol.id %>" protocol-id="<%= @my_module.protocol.id %>"