Fix resizeable navigator

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() {

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);
 

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');

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);
   }
 }

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;
   }

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);
   }
 };

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 };

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();

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';
 /*
 <div  id="date-time-picker" class="vue-date-time-picker">
   <input ref="input" type="hidden" v-model="date" id="legacy-id" data-default="" />
@@ -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', () => {

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;

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);

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;

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();

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')

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();

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;
   }
 }

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;
 }

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);

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: {

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);
     },

app/javascript/vue/mixins/moduleNameObserver.js

@@ -14,7 +14,7 @@ export default {
   mounted() {
     this.observeChanges();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     if (this.observer) {
       this.observer.disconnect();
     }

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();
     }

app/javascript/vue/navigation/navigator.vue

@@ -1,14 +1,16 @@
 <template>
-  <vue-resizable
+  <Vue3DraggableResizable
+    :initW="getNavigatorWidth()"
     ref="vueResizable"
-    :max-width="400"
-    :min-width="208"
-    width="auto"
-    height="100%"
-    :active="['r']"
-    @resize:start="onResizeStart"
-    @resize:move="onResizeMove"
-    @resize:end="onResizeEnd"
+    :minW="208"
+    :disabledH="true"
+    :handles="['mr']"
+    :resizable="true"
+    :draggable="false"
+    class="max-w-[400px] !h-full"
+    @resize-start="onResizeStart"
+    @resizing="onResizeMove"
+    @resize-end="onResizeEnd"
   >
     <div class="ml-4 h-full border rounded relative bg-sn-white flex flex-col right-0 absolute navigator-container">
       <div class="px-3 py-2.5 flex items-center relative leading-4">
@@ -30,20 +32,20 @@
                       :archived="archived" />
       </perfect-scrollbar>
     </div>
-  </vue-resizable>
+  </Vue3DraggableResizable>
 </template>
 
 <script>
 
 import NavigatorItem from './navigator_item.vue'
-import VueResizable from 'vue-resizable'
 import axios from '../../packs/custom_axios.js';
+import Vue3DraggableResizable from 'vue3-draggable-resizable'
 
 export default {
   name : 'NavigatorContainer',
   components: {
     NavigatorItem,
-    VueResizable
+    Vue3DraggableResizable
   },
   data() {
     return {
@@ -53,7 +55,7 @@ export default {
       navigatorYScroll: 0,
       navigatorXScroll: 0,
       currentItemId: null,
-      archived: null
+      archived: null,
     }
   },
   props: {
@@ -127,10 +129,11 @@ export default {
     },
     getNavigatorWidth() {
       const computedStyle = getComputedStyle(document.documentElement);
-      return computedStyle.getPropertyValue('--navigator-navigation-width').trim();
+      return parseInt(computedStyle.getPropertyValue('--navigator-navigation-width').trim());
     },
     onResizeMove(event) {
-      document.documentElement.style.setProperty('--navigator-navigation-width', event.width + 'px');
+      if (event.w > 400) event.w = 400;
+      document.documentElement.style.setProperty('--navigator-navigation-width', event.w + 'px');
     },
     onResizeStart() {
       document.body.style.cursor = 'url(/images/icon_small/Resize.svg) 0 0, auto';
@@ -138,10 +141,11 @@ export default {
       $('.sci--layout').addClass('!transition-none');
     },
     onResizeEnd(event) {
+      if (event.w > 400) event.w = 400;
       document.body.style.cursor = 'default';
       $('.sci--layout-navigation-navigator').removeClass('!transition-none');
       $('.sci--layout').removeClass('!transition-none');
-      this.changeNavigatorState(event.width)
+      this.changeNavigatorState(event.w)
     },
     async changeNavigatorState(newWidth) {
       try {

app/javascript/vue/navigation/top_menu.vue

@@ -107,7 +107,7 @@
       // Track name update in user profile settings
       $(document).on('inlineEditing::updated', '.inline-editing-container[data-field-to-update="full_name"]', this.fetchData);
     },
-    beforeDestroy: function(){
+    beforeUnmount: function(){
       clearTimeout(this.unseenNotificationsTimeout);
     },
     computed: {

app/javascript/vue/protocol/container.vue

@@ -286,7 +286,7 @@
         })
       });
     },
-    beforeDestroy() {
+    beforeUnmount() {
       if (!this.inRepository) {
         window.removeEventListener('scroll', this.initStackableHeaders, false);
       }

app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue

@@ -293,7 +293,7 @@ export default {
     document.addEventListener('click', this.handleOutsideClick);
     this.inRepository = $('.assign-items-to-task-modal-container').length > 0;
   },
-  beforeDestroy() {
+  beforeUnmount() {
     delete window.repositoryItemSidebarComponent;
     document.removeEventListener('click', this.handleDocumentClick);
   },

app/javascript/vue/repository_row/export_stock_consumption_modal.vue

@@ -1,6 +1,6 @@
 <template>
   <div ref="modal"
-       class="modal fade" 
+       class="modal fade"
        id="exportStockConsumptionModal"
        tabindex="-1"
        role="dialog"
@@ -22,7 +22,7 @@
           <button type='button' class='btn btn-secondary' data-dismiss='modal' id='close-modal-export-stock-consumption'>
             {{ i18n.t('general.cancel') }}
           </button>
-          
+
           <button class="btn btn-success" id="export-stock-consumption" @click="exportConsumption">
             {{ i18n.t('zip_export.consumption_generate') }}
           </button>
@@ -47,7 +47,7 @@
     created() {
       window.exportStockConsumptionModalComponent = this;
     },
-    beforeDestroy() {
+    beforeUnmount() {
       delete window.exportStockConsumptionModalComponent;
     },
     methods: {

app/javascript/vue/results/results.vue

@@ -83,7 +83,7 @@
       this.loadResults();
       this.initStackableHeaders();
     },
-    beforeDestroy() {
+    beforeUnmount() {
       window.removeEventListener('scroll', this.loadResults, false);
       window.removeEventListener('scroll', this.initStackableHeaders, false);
     },

app/javascript/vue/shared/content/table.vue

@@ -129,7 +129,7 @@
     created() {
       window.addEventListener('beforeunload', this.showSaveWarning);
     },
-    beforeDestroy() {
+    beforeUnmount() {
       window.removeEventListener('beforeunload', this.showSaveWarning);
     },
     updated() {

app/javascript/vue/shared/select.vue

@@ -70,7 +70,7 @@
     mounted() {
       document.addEventListener('scroll', this.updateOptionPosition);
     },
-    beforeDestroy() {
+    beforeUnmount() {
       document.removeEventListener('scroll', this.updateOptionPosition);
     },
     methods: {

package.json

@@ -82,7 +82,6 @@
     "twemoji": "^12.1.4",
     "vue": "^3.3.4",
     "vue-loader": "^16.0.0",
-    "vue-turbolinks": "^2.2.1",
     "vue3-draggable-resizable": "^1.6.5",
     "vue3-perfect-scrollbar": "^1.6.1",
     "vuedraggable": "^4.1.0",

yarn.lock

@@ -7785,11 +7785,6 @@ vue-loader@^16.0.0:
     hash-sum "^2.0.0"
     loader-utils "^2.0.0"
 
-vue-turbolinks@^2.2.1:
-  version "2.2.2"
-  resolved "https://registry.yarnpkg.com/vue-turbolinks/-/vue-turbolinks-2.2.2.tgz#6b7b5c4120f5586907ef977be4b63a734bf8cd36"
-  integrity sha512-pPO2Fr+1UgdhUK9dc5OhjLSeYi5LZAm/VZBXOVQgLHCO31bRjAof/+W/e/6SHCbnb1xdZb1gW5T9MX0k9ejSAQ==
-
 vue3-draggable-resizable@^1.6.5:
   version "1.6.5"
   resolved "https://registry.yarnpkg.com/vue3-draggable-resizable/-/vue3-draggable-resizable-1.6.5.tgz#021b2c00bff2885ab4fa5981e03bf4f56f12cdac"