scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-11-10 16:31:22 +08:00
Code Issues Projects Releases Packages Wiki Activity

Fix repository item sidebar click away [SCI-9904]

Browse source
This commit is contained in:
Andrej 2023-12-22 08:21:37 +01:00
parent 7c0b5d437f
commit c0583343bf
1 changed files with 14 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
View file

@ -2,7 +2,8 @@
<transition enter-from-class="translate-x-full w-0" <transition enter-from-class="translate-x-full w-0"
enter-active-class="transition-all ease-sharp duration-[588ms]" enter-active-class="transition-all ease-sharp duration-[588ms]"
leave-active-class="transition-all ease-sharp duration-[588ms]" leave-active-class="transition-all ease-sharp duration-[588ms]"
leave-to-class="translate-x-full w-0"> leave-to-class="translate-x-full w-0"
v-click-outside="handleOutsideClick">
<div ref="wrapper" v-show="isShowing" id="repository-item-sidebar-wrapper" <div ref="wrapper" v-show="isShowing" id="repository-item-sidebar-wrapper"
class='items-sidebar-wrapper bg-white gap-2.5 self-stretch rounded-tl-4 rounded-bl-4 shadow-lg h-full w-[565px]'> class='items-sidebar-wrapper bg-white gap-2.5 self-stretch rounded-tl-4 rounded-bl-4 shadow-lg h-full w-[565px]'>
@ -247,6 +248,7 @@
</template> </template>
<script> <script>
import { vOnClickOutside } from '@vueuse/components';
import InlineEdit from '../shared/inline_edit.vue'; import InlineEdit from '../shared/inline_edit.vue';
import ScrollSpy from './repository_values/ScrollSpy.vue'; import ScrollSpy from './repository_values/ScrollSpy.vue';
import CustomColumns from './customColumns.vue'; import CustomColumns from './customColumns.vue';
@ -260,6 +262,9 @@ export default {
'inline-edit': InlineEdit, 'inline-edit': InlineEdit,
'scroll-spy': ScrollSpy, 'scroll-spy': ScrollSpy,
}, },
directives: {
'click-outside': vOnClickOutside
},
data() { data() {
return { return {
currentItemUrl: null, currentItemUrl: null,
@ -294,22 +299,23 @@ export default {
}, },
mounted() { mounted() {
// Add a click event listener to the document // Add a click event listener to the document
document.addEventListener('mousedown', this.handleOutsideClick);
this.inRepository = $('.assign-items-to-task-modal-container').length > 0; this.inRepository = $('.assign-items-to-task-modal-container').length > 0;
}, },
beforeUnmount() { beforeUnmount() {
delete window.repositoryItemSidebarComponent; delete window.repositoryItemSidebarComponent;
document.removeEventListener('mousedown', this.handleOutsideClick);
}, },
methods: { methods: {
handleOutsideClick(event) { handleOutsideClick(event) {
if (!this.isShowing) return if (!this.isShowing) return;
// Check if the clicked element is not within the sidebar and it's not another item link or belogs to modals const allowedSelectors = ['a', '.modal', '.label-printing-progress-modal', '.atwho-view'];
const selectors = ['a', '.modal', '.label-printing-progress-modal', '.atwho-view']; const excludeSelectors = ['#myModuleRepositoryFullViewModal'];
if (!$(event.target).parents('#repository-item-sidebar-wrapper').length && const isOutsideSidebar = !$(event.target).parents('#repository-item-sidebar-wrapper').length;
!selectors.some(selector => event.target.closest(selector))) { const isAllowedClick = !allowedSelectors.some((selector) => event.target.closest(selector));
const isExcludedClick = excludeSelectors.some((selector) => event.target.closest(selector));
if (isOutsideSidebar && (isAllowedClick || isExcludedClick)) {
this.toggleShowHideSidebar(null); this.toggleShowHideSidebar(null);
} }
}, },