diff --git a/app/assets/javascripts/my_modules.js b/app/assets/javascripts/my_modules.js
index dcd6e2b1a..4db6aa550 100644
--- a/app/assets/javascripts/my_modules.js
+++ b/app/assets/javascripts/my_modules.js
@@ -56,12 +56,12 @@
// Bind ajax for editing due dates
function initStartDatePicker() {
- window.initDateTimePickerComponent('#calendarStartDateContainer');
$('.datetime-picker-container#start-date').on('dp:ready', () => {
$('#calendarStartDate').data('dateTimePicker').onChange = () => {
updateStartDate();
};
});
+ window.initDateTimePickerComponent('#calendarStartDateContainer');
}
function updateDueDate() {
@@ -85,12 +85,12 @@
// Bind ajax for editing due dates
function initDueDatePicker() {
- window.initDateTimePickerComponent('#calendarDueDateContainer');
$('.datetime-picker-container#due-date').on('dp:ready', () => {
$('#calendarDueDate').data('dateTimePicker').onChange = () => {
updateDueDate();
};
});
+ window.initDateTimePickerComponent('#calendarDueDateContainer');
}
function initTagsSelector() {
diff --git a/app/assets/stylesheets/navigation/navigator.scss b/app/assets/stylesheets/navigation/navigator.scss
index 1b595fd38..e6474e082 100644
--- a/app/assets/stylesheets/navigation/navigator.scss
+++ b/app/assets/stylesheets/navigation/navigator.scss
@@ -1,4 +1,13 @@
.sci--layout-navigation-navigator {
+ .handle-mr {
+ display: block !important;
+ height: 100%;
+ opacity: 0;
+ right: -2px;
+ top: 0;
+ }
+
+
.menu-item:not(.active):hover {
background-color: var(--sn-super-light-grey);
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 3f72451c1..682823548 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -11,6 +11,7 @@ require('hammerjs');
import 'bootstrap';
require('bootstrap-select/js/bootstrap-select');
import '@vuepic/vue-datepicker/dist/main.css';
+import 'vue3-draggable-resizable/dist/Vue3DraggableResizable.css'
window.bwipjs = require('bwip-js');
window.Decimal = require('decimal.js');
diff --git a/app/javascript/packs/vue/action_toolbar.js b/app/javascript/packs/vue/action_toolbar.js
index 789ff6f07..4267a8d8c 100644
--- a/app/javascript/packs/vue/action_toolbar.js
+++ b/app/javascript/packs/vue/action_toolbar.js
@@ -1,16 +1,16 @@
/* global notTurbolinksPreview */
-import TurbolinksAdapter from 'vue-turbolinks';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import ActionToolbar from '../../vue/components/action_toolbar.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
window.initActionToolbar = () => {
- if (window.actionToolbarComponent) return;
+
if (notTurbolinksPreview()) {
const app = createApp({});
app.component('ActionToolbar', ActionToolbar);
- app.use(TurbolinksAdapter);
app.config.globalProperties.i18n = window.I18n;
app.mount('#actionToolbar');
+ handleTurbolinks(app);
}
}
diff --git a/app/javascript/packs/vue/assign_items_to_task_modal.js b/app/javascript/packs/vue/assign_items_to_task_modal.js
index 1dbf89f5a..4669f571c 100644
--- a/app/javascript/packs/vue/assign_items_to_task_modal.js
+++ b/app/javascript/packs/vue/assign_items_to_task_modal.js
@@ -1,8 +1,9 @@
-import TurbolinksAdapter from 'vue-turbolinks';
+
import PerfectScrollbar from 'vue3-perfect-scrollbar';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
import AssignItemsToTaskModalContainer from '../../vue/assign_items_to_tasks_modal/container.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
function initAssignItemsToTaskModalComponent() {
const container = $('.assign-items-to-task-modal-container');
@@ -31,10 +32,10 @@ function initAssignItemsToTaskModalComponent() {
}
});
app.component('AssignItemsToTaskModalContainer', AssignItemsToTaskModalContainer);
- app.use(TurbolinksAdapter);
app.use(PerfectScrollbar);
app.config.globalProperties.i18n = window.I18n;
app.mount('.assign-items-to-task-modal-container');
+ handleTurbolinks(app);
window.AssignItemsToTaskModalComponentContainer = app;
}
diff --git a/app/javascript/packs/vue/export_stock_consumption_modal.js b/app/javascript/packs/vue/export_stock_consumption_modal.js
index a1f1a4388..9726faf94 100644
--- a/app/javascript/packs/vue/export_stock_consumption_modal.js
+++ b/app/javascript/packs/vue/export_stock_consumption_modal.js
@@ -1,8 +1,7 @@
/* global notTurbolinksPreview */
-
-import TurbolinksAdapter from 'vue-turbolinks';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import ExportStockConsumptionModal from '../../vue/repository_row/export_stock_consumption_modal.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
window.initExportStockConsumptionModal = () => {
if (window.exportStockConsumptionModalComponent) return;
@@ -10,8 +9,8 @@ window.initExportStockConsumptionModal = () => {
if (notTurbolinksPreview()) {
const app = createApp({});
app.component('ExportStockConsumptionModal', ExportStockConsumptionModal);
- app.use(TurbolinksAdapter);
app.config.globalProperties.i18n = window.I18n;
app.mount('#exportStockConsumtionModal');
+ handleTurbolinks(app);
}
};
diff --git a/app/javascript/packs/vue/helpers/turbolinks.js b/app/javascript/packs/vue/helpers/turbolinks.js
new file mode 100644
index 000000000..83a89cf4c
--- /dev/null
+++ b/app/javascript/packs/vue/helpers/turbolinks.js
@@ -0,0 +1,7 @@
+function handleTurbolinks(app) {
+ document.addEventListener('turbolinks:before-cache', () => {
+ app.unmount();
+ }, { once: true });
+}
+
+export { handleTurbolinks };
\ No newline at end of file
diff --git a/app/javascript/packs/vue/label_template.js b/app/javascript/packs/vue/label_template.js
index a0f77ba9e..c5923350e 100644
--- a/app/javascript/packs/vue/label_template.js
+++ b/app/javascript/packs/vue/label_template.js
@@ -1,6 +1,6 @@
-import TurbolinksAdapter from 'vue-turbolinks';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import LabelTemplateContainer from '../../vue/label_template/container.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
window.initLabelTemplateComponent = () => {
const app = createApp({
@@ -14,9 +14,9 @@ window.initLabelTemplateComponent = () => {
}
});
app.component('LabelTemplateContainer', LabelTemplateContainer);
- app.use(TurbolinksAdapter);
app.config.globalProperties.i18n = window.I18n;
app.mount('#labelTemplateContainer');
+ handleTurbolinks(app);
};
initLabelTemplateComponent();
diff --git a/app/javascript/packs/vue/legacy/datetime_picker.js b/app/javascript/packs/vue/legacy/datetime_picker.js
index 369a5a919..9729ffd4f 100644
--- a/app/javascript/packs/vue/legacy/datetime_picker.js
+++ b/app/javascript/packs/vue/legacy/datetime_picker.js
@@ -1,7 +1,6 @@
-import TurbolinksAdapter from 'vue-turbolinks';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import DateTimePicker from '../../../vue/shared/date_time_picker.vue';
-
+import { handleTurbolinks } from '../helpers/turbolinks.js';
/*
@@ -66,11 +65,9 @@ window.initDateTimePickerComponent = (id) => {
}
});
app.component('DateTimePicker', DateTimePicker);
- app.use(TurbolinksAdapter);
app.config.globalProperties.i18n = window.I18n;
app.mount(id);
-
-
+ handleTurbolinks(app);
};
document.addEventListener('turbolinks:load', () => {
diff --git a/app/javascript/packs/vue/navigation/breadcrumbs.js b/app/javascript/packs/vue/navigation/breadcrumbs.js
index d484fc959..dc79e25b1 100644
--- a/app/javascript/packs/vue/navigation/breadcrumbs.js
+++ b/app/javascript/packs/vue/navigation/breadcrumbs.js
@@ -1,14 +1,15 @@
-import TurbolinksAdapter from 'vue-turbolinks';
+
import PerfectScrollbar from 'vue3-perfect-scrollbar';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import 'vue3-perfect-scrollbar/dist/vue3-perfect-scrollbar.css';
import Breadcrumbs from '../../../vue/navigation/breadcrumbs/breadcrumbs.vue';
+import { handleTurbolinks } from '../helpers/turbolinks.js';
const app = createApp({});
app.component('Breadcrumbs', Breadcrumbs);
app.use(PerfectScrollbar);
-app.use(TurbolinksAdapter);
app.config.globalProperties.i18n = window.I18n;
app.mount('#breadcrumbs');
+handleTurbolinks(app);
window.breadcrumbsComponent = app;
diff --git a/app/javascript/packs/vue/open_vector_editor.js b/app/javascript/packs/vue/open_vector_editor.js
index b8c73c01a..2057c0154 100644
--- a/app/javascript/packs/vue/open_vector_editor.js
+++ b/app/javascript/packs/vue/open_vector_editor.js
@@ -1,9 +1,9 @@
-import TurbolinksAdapter from 'vue-turbolinks';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import OpenVectorEditor from '../../vue/ove/OpenVectorEditor.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
const app = createApp({});
app.component('OpenVectorEditor', OpenVectorEditor);
-app.use(TurbolinksAdapter);
app.config.globalProperties.i18n = window.I18n;
app.mount('#open-vector-editor');
+handleTurbolinks(app);
diff --git a/app/javascript/packs/vue/protocol.js b/app/javascript/packs/vue/protocol.js
index 0cb26398a..c3cf7eb9c 100644
--- a/app/javascript/packs/vue/protocol.js
+++ b/app/javascript/packs/vue/protocol.js
@@ -1,10 +1,10 @@
/* global HelperModule */
-import TurbolinksAdapter from 'vue-turbolinks';
import PerfectScrollbar from 'vue3-perfect-scrollbar';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import ProtocolContainer from '../../vue/protocol/container.vue';
import outsideClick from './directives/outside_click';
+import { handleTurbolinks } from './helpers/turbolinks.js';
window.initProtocolComponent = () => {
const app = createApp({
@@ -16,13 +16,13 @@ window.initProtocolComponent = () => {
});
app.component('ProtocolContainer', ProtocolContainer);
app.use(PerfectScrollbar);
- app.use(TurbolinksAdapter);
app.directive('click-outside', outsideClick);
app.config.globalProperties.i18n = window.I18n;
app.config.globalProperties.inlineEditing = window.inlineEditing;
app.config.globalProperties.ActiveStoragePreviews = window.ActiveStoragePreviews;
app.config.globalProperties.dateFormat = $('#protocolContainer').data('date-format');
app.mount('#protocolContainer');
+ handleTurbolinks(app);
$('.protocols-show').on('click', '#protocol-versions-modal .delete-draft', (e) => {
const url = e.currentTarget.dataset.url;
diff --git a/app/javascript/packs/vue/protocol_file_import_modal.js b/app/javascript/packs/vue/protocol_file_import_modal.js
index 71f85c01f..f0b3d8016 100644
--- a/app/javascript/packs/vue/protocol_file_import_modal.js
+++ b/app/javascript/packs/vue/protocol_file_import_modal.js
@@ -1,13 +1,13 @@
-import TurbolinksAdapter from 'vue-turbolinks';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import ProtocolFileImportModal from '../../vue/protocol_import/file_import_modal.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
window.initProtocolFileImportModalComponent = () => {
const app = createApp({});
app.component('ProtocolFileImportModal', ProtocolFileImportModal);
- app.use(TurbolinksAdapter);
app.config.globalProperties.i18n = window.I18n;
app.mount('#protocolFileImportModal');
+ handleTurbolinks(app);
};
initProtocolFileImportModalComponent();
diff --git a/app/javascript/packs/vue/repository_filter.js b/app/javascript/packs/vue/repository_filter.js
index 82f16b3a3..74be66ca9 100644
--- a/app/javascript/packs/vue/repository_filter.js
+++ b/app/javascript/packs/vue/repository_filter.js
@@ -1,8 +1,8 @@
/* global I18n */
-import TurbolinksAdapter from 'vue-turbolinks';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import FilterContainer from '../../vue/repository_filter/container.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
const DEFAULT_FILTERS = [
{
@@ -148,10 +148,10 @@ window.initRepositoryFilter = () => {
}
});
app.component('FilterContainer', FilterContainer);
- app.use(TurbolinksAdapter);
app.config.globalProperties.i18n = window.I18n;
app.config.globalProperties.dateFormat = $('#filterContainer').data('date-format');
app.mount('#filterContainer');
+ handleTurbolinks(app);
$('#filterContainer').on('click', (e) => {
$('#filterContainer .dropdown-selector-container').removeClass('open')
diff --git a/app/javascript/packs/vue/repository_item_sidebar.js b/app/javascript/packs/vue/repository_item_sidebar.js
index e60246652..7c134b677 100644
--- a/app/javascript/packs/vue/repository_item_sidebar.js
+++ b/app/javascript/packs/vue/repository_item_sidebar.js
@@ -1,16 +1,16 @@
/* global notTurbolinksPreview */
-import TurbolinksAdapter from 'vue-turbolinks';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import RepositoryItemSidebar from '../../vue/repository_item_sidebar/RepositoryItemSidebar.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
function initRepositoryItemSidebar() {
const app = createApp({});
app.component('RepositoryItemSidebar', RepositoryItemSidebar);
- app.use(TurbolinksAdapter);
app.config.globalProperties.i18n = window.I18n;
app.mount('#repositoryItemSidebar');
+ handleTurbolinks(app);
}
initRepositoryItemSidebar();
diff --git a/app/javascript/packs/vue/repository_print_modal.js b/app/javascript/packs/vue/repository_print_modal.js
index 79e44190c..935d1431b 100644
--- a/app/javascript/packs/vue/repository_print_modal.js
+++ b/app/javascript/packs/vue/repository_print_modal.js
@@ -1,6 +1,6 @@
-import TurbolinksAdapter from 'vue-turbolinks';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import PrintModalContainer from '../../vue/repository_print_modal/container.vue';
+import { handleTurbolinks } from './helpers/turbolinks.js';
function initPrintModalComponent() {
const container = $('.print-label-modal-container');
@@ -29,9 +29,9 @@ function initPrintModalComponent() {
}
});
app.component('PrintModalContainer', PrintModalContainer);
- app.use(TurbolinksAdapter);
app.config.globalProperties.i18n = window.I18n;
app.mount('.print-label-modal-container');
+ handleTurbolinks(app);
window.PrintModalComponent = app;
}
}
diff --git a/app/javascript/packs/vue/repository_search.js b/app/javascript/packs/vue/repository_search.js
index 65265d259..abf9791ef 100644
--- a/app/javascript/packs/vue/repository_search.js
+++ b/app/javascript/packs/vue/repository_search.js
@@ -1,15 +1,15 @@
-import TurbolinksAdapter from 'vue-turbolinks';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import RepositorySearchContainer from '../../vue/repository_search/container.vue';
import outsideClick from './directives/outside_click';
+import { handleTurbolinks } from './helpers/turbolinks.js';
window.initRepositorySearch = () => {
const app = createApp({});
app.component('RepositorySearchContainer', RepositorySearchContainer);
- app.use(TurbolinksAdapter);
app.directive('click-outside', outsideClick);
app.config.globalProperties.i18n = window.I18n;
app.mount('#inventorySearchComponent');
+ handleTurbolinks(app);
window.RepositorySearchComponent = app;
}
diff --git a/app/javascript/packs/vue/results.js b/app/javascript/packs/vue/results.js
index 033a9cc27..8e4f5757a 100644
--- a/app/javascript/packs/vue/results.js
+++ b/app/javascript/packs/vue/results.js
@@ -1,14 +1,14 @@
-import TurbolinksAdapter from 'vue-turbolinks';
import PerfectScrollbar from 'vue3-perfect-scrollbar';
import { createApp } from 'vue/dist/vue.esm-bundler.js';
import Results from '../../vue/results/results.vue';
import outsideClick from './directives/outside_click';
+import { handleTurbolinks } from './helpers/turbolinks.js';
const app = createApp({});
app.component('Results', Results);
-app.use(TurbolinksAdapter);
app.use(PerfectScrollbar);
app.directive('click-outside', outsideClick);
app.config.globalProperties.i18n = window.I18n;
app.config.globalProperties.ActiveStoragePreviews = window.ActiveStoragePreviews;
app.mount('#results');
+handleTurbolinks(app);
diff --git a/app/javascript/vue/assign_items_to_tasks_modal/container.vue b/app/javascript/vue/assign_items_to_tasks_modal/container.vue
index aed6d0568..f1ed120c8 100644
--- a/app/javascript/vue/assign_items_to_tasks_modal/container.vue
+++ b/app/javascript/vue/assign_items_to_tasks_modal/container.vue
@@ -184,7 +184,7 @@ export default {
this.$emit("close");
});
},
- beforeDestroy() {
+ beforeUnmount() {
delete window.AssignItemsToTaskModalComponent;
},
computed: {
diff --git a/app/javascript/vue/components/action_toolbar.vue b/app/javascript/vue/components/action_toolbar.vue
index 6564ac3f2..aa514b51a 100644
--- a/app/javascript/vue/components/action_toolbar.vue
+++ b/app/javascript/vue/components/action_toolbar.vue
@@ -111,7 +111,7 @@
this.$nextTick(this.setWidth);
window.addEventListener('scroll', this.setLeftOffset);
},
- beforeDestroy() {
+ beforeUnmount() {
delete window.actionToolbarComponent;
window.removeEventListener('scroll', this.setLeftOffset);
},
diff --git a/app/javascript/vue/mixins/moduleNameObserver.js b/app/javascript/vue/mixins/moduleNameObserver.js
index 66eb09545..afd67079d 100644
--- a/app/javascript/vue/mixins/moduleNameObserver.js
+++ b/app/javascript/vue/mixins/moduleNameObserver.js
@@ -14,7 +14,7 @@ export default {
mounted() {
this.observeChanges();
},
- beforeDestroy() {
+ beforeUnmount() {
if (this.observer) {
this.observer.disconnect();
}
diff --git a/app/javascript/vue/mixins/stackableHeadersMixin.js b/app/javascript/vue/mixins/stackableHeadersMixin.js
index 4477b2ce3..a56bc51ea 100644
--- a/app/javascript/vue/mixins/stackableHeadersMixin.js
+++ b/app/javascript/vue/mixins/stackableHeadersMixin.js
@@ -35,7 +35,7 @@ export default {
this.handleTinyMCEOpened(e.detail.target);
});
},
- beforeDestroy() {
+ beforeUnmount() {
if (this.resizeObserver) {
this.resizeObserver.disconnect();
}
diff --git a/app/javascript/vue/navigation/navigator.vue b/app/javascript/vue/navigation/navigator.vue
index e60ed72c0..0d312d319 100644
--- a/app/javascript/vue/navigation/navigator.vue
+++ b/app/javascript/vue/navigation/navigator.vue
@@ -1,14 +1,16 @@
-
@@ -30,20 +32,20 @@
:archived="archived" />
-
+