Added data-e2e to table info, top toolbar and project templates [SCI-10761]

This commit is contained in:
Klemen Benedicic 2024-05-31 17:57:24 +02:00
parent 52fc888c79
commit b56bb8d3c8
7 changed files with 31 additions and 24 deletions

View file

@ -6,7 +6,7 @@
position="right"
@dtEvent="changeSort"
btnIcon="sn-icon sn-icon-sort-down"
:e2eSortButton="e2eSortButton"
:e2eButton="e2eSortButton"
></MenuDropdown>
</template>

View file

@ -2,31 +2,32 @@
<div ref="modal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<form @submit.prevent="submit">
<div class="modal-content">
<div class="modal-content" data-e2e="e2e-MD-newProtocol">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<button type="button" class="close" data-dismiss="modal" aria-label="Close" data-e2e="e2e-BT-newProtocolModal-close">
<i class="sn-icon sn-icon-close"></i>
</button>
<h4 class="modal-title truncate !block" id="edit-project-modal-label">
<h4 class="modal-title truncate !block" id="edit-project-modal-label" data-e2e="e2e-TX-newProtocolModal-title">
{{ i18n.t("protocols.new_protocol_modal.title_new") }}
</h4>
</div>
<div class="modal-body">
<div class="mb-6">
<label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.name_label") }}</label>
<label class="sci-label" data-e2e="e2e-TX-newProtocolModal-inputLabel">{{ i18n.t("protocols.new_protocol_modal.name_label") }}</label>
<div class="sci-input-container-v2" :class="{'error': error}" :data-error="error">
<input type="text" v-model="name"
class="sci-input-field"
autofocus="true" ref="input"
data-e2e="e2e-IF-newProtocolModal-name"
:placeholder="i18n.t('protocols.new_protocol_modal.name_placeholder')" />
</div>
</div>
<div class="flex gap-2 text-xs items-center">
<div class="sci-checkbox-container">
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible"/>
<input type="checkbox" class="sci-checkbox" v-model="visible" value="visible" data-e2e="e2e-CB-newProtocolModal-grantAccess"/>
<span class="sci-checkbox-label"></span>
</div>
<span v-html="i18n.t('protocols.new_protocol_modal.access_label')"></span>
<span v-html="i18n.t('protocols.new_protocol_modal.access_label')" data-e2e="e2e-TX-newProtocolModal-grantAccess"></span>
</div>
<div class="mt-6" :class="{'hidden': !visible}">
<label class="sci-label">{{ i18n.t("protocols.new_protocol_modal.role_label") }}</label>
@ -34,8 +35,8 @@
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit" :disabled="visible && !defaultRole">
<button type="button" class="btn btn-secondary" data-dismiss="modal" data-e2e="e2e-BT-newProtocolModal-cancel">{{ i18n.t('general.cancel') }}</button>
<button class="btn btn-primary" type="submit" :disabled="visible && !defaultRole" data-e2e="e2e-BT-newProtocolModal-create">
{{ i18n.t('protocols.new_protocol_modal.create_new') }}
</button>
</div>

View file

@ -203,7 +203,8 @@ export default {
menuItems: [
{
emit: 'import_file',
text: this.i18n.t('protocols.index.import_eln')
text: this.i18n.t('protocols.index.import_eln'),
data_e2e: 'e2e-BT-topToolbar-importEln'
}
]
};
@ -214,13 +215,15 @@ export default {
text: `<span>${this.i18n.t('protocols.index.import_docx')}</span>
<span class="bg-sn-coral text-sn-white text-[8px] absolute leading-none p-1 top-px rounded-[1px] right-px">
${this.i18n.t('protocols.index.beta')}
</span>`
</span>`,
data_e2e: 'e2e-BT-topToolbar-importDocx'
});
}
importMenu.menuItems.push({
emit: 'import_protocols_io',
text: this.i18n.t('protocols.index.import_protocols_io')
text: this.i18n.t('protocols.index.import_protocols_io'),
data_e2e: 'e2e-BT-topToolbar-importProtocolsIo'
});
left.push(importMenu);

View file

@ -1,7 +1,7 @@
<template>
<div v-if="pages.length > 1" class="flex gap-3 select-none">
<div class="w-9 h-9">
<div class="w-9 h-9 cursor-pointer flex items-center justify-center"
<div class="w-9 h-9 cursor-pointer flex items-center justify-center" data-e2e="e2e-BT-tableInfo-left"
@click="$emit('setPage', currentPage - 1)"
v-if="currentPage > 1">
<i class="sn-icon sn-icon-left cursor-pointer"></i>
@ -11,11 +11,12 @@
v-for="page in pages"
:class="{ 'border-solid rounded border-sn-science-blue': page === currentPage }"
:key="page"
:data-e2e="`e2e-BT-tableInfo-page-${page}`"
@click="$emit('setPage', page)">
<span >{{ page }}</span>
</div>
<div class="w-9 h-9">
<div class="w-9 h-9 cursor-pointer flex items-center justify-center"
<div class="w-9 h-9 cursor-pointer flex items-center justify-center" data-e2e="e2e-BT-tableInfo-right"
@click="$emit('setPage', currentPage + 1)"
v-if="totalPage > currentPage">
<i class="sn-icon sn-icon-right cursor-pointer"></i>
@ -30,12 +31,12 @@ export default {
props: {
totalPage: {
type: Number,
required: true,
required: true
},
currentPage: {
type: Number,
required: true,
},
required: true
}
},
computed: {
pages() {
@ -50,7 +51,7 @@ export default {
}
}
return pages;
},
},
}
}
};
</script>

View file

@ -75,17 +75,18 @@
:params="actionsParams"
@toolbar:action="emitAction" />
</div>
<div v-if="scrollMode == 'pages'" class="flex items-center py-4" :class="{'opacity-0': initializing }">
<div class="flex items-center gap-4">
<div v-if="scrollMode == 'pages'" class="flex items-center py-4" :class="{'opacity-0': initializing }" data-e2e="e2e-CO-tableInfo">
<div class="flex items-center gap-4" data-e2e="e2e-TX-tableInfo-show">
{{ i18n.t('datatable.show') }}
<div class="w-36">
<SelectDropdown
:value="perPage"
:options="perPageOptions"
:data-e2e="'e2e-DD-tableInfo-rows'"
@change="setPerPage"
></SelectDropdown>
</div>
<div v-show="!dataLoading">
<div v-show="!dataLoading" data-e2e="e2e-TX-tableInfo-entries">
<span v-if="selectedRows.length">
{{ i18n.t('datatable.entries.selected', { count: totalEntries, selected: selectedRows.length }) }}
</span>

View file

@ -18,6 +18,7 @@
:btnIcon="action.icon"
:caret="true"
:position="'right'"
:data-e2e="`e2e-BT-topToolbar-${action.name}`"
@dtEvent="handleEvent"
></MenuDropdown>
</template>

View file

@ -1,6 +1,6 @@
<template>
<div class="relative" v-if="listItems.length > 0 || alwaysShow" v-click-outside="closeMenu" >
<button ref="field" :class="btnClasses" :title="title" @click="isOpen = !isOpen" :data-e2e="e2eSortButton">
<button ref="field" :class="btnClasses" :title="title" @click="isOpen = !isOpen" :data-e2e="e2eButton">
<i v-if="btnIcon" :class="btnIcon"></i>
{{ btnText }}
<i v-if="caret && isOpen" class="sn-icon sn-icon-up"></i>
@ -80,7 +80,7 @@ export default {
caret: { type: Boolean, default: false },
alwaysShow: { type: Boolean, default: false },
title: { type: String, default: '' },
e2eSortButton: { type: String, default: '' }
e2eButton: { type: String, default: '' }
},
data() {
return {