diff --git a/app/assets/images/sn-loader.svg b/app/assets/images/sn-loader.svg new file mode 100644 index 000000000..8d7159575 --- /dev/null +++ b/app/assets/images/sn-loader.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/app/assets/javascripts/sitewide/repository_row_card.js b/app/assets/javascripts/sitewide/repository_row_card.js index 768f2d892..e5f8983d4 100644 --- a/app/assets/javascripts/sitewide/repository_row_card.js +++ b/app/assets/javascripts/sitewide/repository_row_card.js @@ -7,7 +7,8 @@ e.stopPropagation(); e.preventDefault(); - window.repositoryItemSidebarComponent.toggleShowHideSidebar($(this).attr('href')); + const repositoryRowURL = $(this).attr('href'); + window.repositoryItemSidebarComponent.toggleShowHideSidebar(repositoryRowURL); }); $(document).on('click', '.print-label-button', function(e) { diff --git a/app/assets/stylesheets/application.tailwind.css b/app/assets/stylesheets/application.tailwind.css index ce964b0f3..703ee0481 100644 --- a/app/assets/stylesheets/application.tailwind.css +++ b/app/assets/stylesheets/application.tailwind.css @@ -2,6 +2,7 @@ @import "tailwind/buttons"; @import "tailwind/modals"; @import "tailwind/flyouts"; +@import "tailwind/loader.css"; @tailwind base; @tailwind components; diff --git a/app/assets/stylesheets/tailwind/loader.css b/app/assets/stylesheets/tailwind/loader.css new file mode 100644 index 000000000..91655d80c --- /dev/null +++ b/app/assets/stylesheets/tailwind/loader.css @@ -0,0 +1,6 @@ +@layer components { + .sci-loader { + @apply flex m-auto h-[30px] w-[30px] animate-spin; + background: image-url("sn-loader.svg") center center no-repeat; + } +} diff --git a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue index de8f0b840..03ae80b83 100644 --- a/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue +++ b/app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue @@ -1,161 +1,179 @@ @@ -174,6 +192,7 @@ import RepositoryDateValue from './repository_values/RepositoryDateValue.vue'; import RepositoryDateRangeValue from './repository_values/RepositoryDateRangeValue.vue'; import RepositoryTimeRangeValue from './repository_values/RepositoryTimeRangeValue.vue' import RepositoryTimeValue from './repository_values/RepositoryTimeValue.vue' +import ScrollSpy from './repository_values/ScrollSpy.vue'; export default { name: 'RepositoryItemSidebar', @@ -190,19 +209,19 @@ export default { RepositoryDateValue, RepositoryDateRangeValue, RepositoryTimeRangeValue, - RepositoryTimeValue + RepositoryTimeValue, + 'scroll-spy': ScrollSpy }, data() { return { - repositoryRowId: null, + currentItemUrl: null, + dataLoading: false, repositoryName: null, defaultColumns: null, customColumns: null, assignedModules: null, isShowing: false, - navClicked: false, - activeNav: 'information', - sequenceExpanded: false, + assigned: 'Assigned to 3 private tasks that will not be displayed', barCodeSrc: null } }, @@ -210,98 +229,59 @@ export default { window.repositoryItemSidebarComponent = this; }, watch: { - isShowing(newVal, oldVal) { - const element = document.getElementById('repositoryItemSidebar') - if (this.isShowing) { - element.classList.remove('translate-x-full'); - element.classList.add('translate-x-0'); - } else { - element.classList.add('transition-transform', 'ease-in-out', 'duration-300', 'transform', 'translate-x-0', 'translate-x-full'); + defaultColumns(newCol, oldCol) { + const canvasEl = document.getElementById('bar-code-canvas') + if (newCol.code && bwipjs && canvasEl) { + // generate the QR code + let barCodeCanvas = bwipjs.toCanvas('bar-code-canvas', { + bcid: 'qrcode', + text: newCol.code, + scale: 3 + }); + this.barCodeSrc = barCodeCanvas.toDataURL('image/png') } - } - }, - computed: { - navigations() { - return ['information', 'custom_columns', 'assigned', 'qr'].map(nav => ( - { label: I18n.t(`repositories.item_card.navigations.${nav}`), value: nav } - )); - } + }, }, beforeDestroy() { delete window.repositoryItemSidebarComponent; }, methods: { toggleShowHideSidebar(repositoryRowUrl) { - this.isShowing = !this.isShowing - this.loadRepositoryRow(repositoryRowUrl); - }, - toggleExpandSequence() { - if (this.sequenceExpanded) { - document.getElementById('sequence-container').classList.remove('h-fit', 'max-h-[600px]') - document.getElementById('sequence-container').classList.add('h-[60px]') - } else { - document.getElementById('sequence-container').classList.remove('h-[60px]') - document.getElementById('sequence-container').classList.add('h-fit', 'max-h-[600px]') + // initial click + if (this.currentItemUrl === null) { + this.isShowing = true + this.loadRepositoryRow(repositoryRowUrl) + this.currentItemUrl = repositoryRowUrl + return + } + // click on the same item - should just open/close it + else if (this.currentItemUrl === repositoryRowUrl) { + this.isShowing = false + this.currentItemUrl = null + return + } + // click on a different item - should just fetch new data + else { + this.loadRepositoryRow(repositoryRowUrl) + this.currentItemUrl = repositoryRowUrl + return } - this.sequenceExpanded = !this.sequenceExpanded }, loadRepositoryRow(repositoryRowUrl) { + this.dataLoading = true $.ajax({ method: 'GET', url: repositoryRowUrl, dataType: 'json', success: (result) => { - this.repositoryRowId = result.id; this.repositoryName = result.repository_name; this.defaultColumns = result.default_columns; this.customColumns = result.custom_columns; + this.dataLoading = false this.assignedModules = result.assigned_modules; - this.$nextTick(() => { - this.generateBarCode(this.defaultColumns.code); - this.attachScrollEvent(); - }); } }); }, - hightlightContent(nav) { - this.activeNav = nav; - this.navClicked = true; - this.$nextTick(function () { - $(`#repository-item-sidebar #${nav}_wrapper`)[0].scrollIntoView(); - }) - }, - attachScrollEvent() { - const topOffsets = {} - const sections = ['information', 'custom_columns', 'assigned', 'qr']; - for (let idx = 0; idx < sections.length; idx++) { - topOffsets[sections[idx]] = $(`#repository-item-sidebar #${sections[idx]}_wrapper`).offset().top; - } - let isScrolling; - $('.content').on('scroll', () => { - if (isScrolling !== null) clearTimeout(isScrolling); - isScrolling = setTimeout(() => { - const scrollPosition = $('.content').scrollTop(); - for (let idx = 0; idx < sections.length; idx++) { - if (scrollPosition < topOffsets[sections[idx + 1]] - topOffsets['information']) { - // Set nav only when scrolling is not triggered by ckicking nav - if (sections[idx] !== this.activeNav && !this.navClicked) this.activeNav = sections[idx]; - break; - } - } - this.navClicked = false; - }, 150) - }) - }, - generateBarCode(text) { - if (!text) return; - - const barCodeCanvas = bwipjs.toCanvas('bar-code-canvas', { - bcid: 'qrcode', - text, - scale: 3 - }); - $('#repository-item-sidebar #bar-code-image').attr('src', barCodeCanvas.toDataURL('image/png')); - }, privateModuleSize() { return this.assignedModules.total_assigned_size - this.assignedModules.viewable_modules.length; } diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue index ea2f2cb8e..0247247ee 100644 --- a/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue +++ b/app/javascript/vue/repository_item_sidebar/repository_values/RepositoryChecklistValue.vue @@ -15,7 +15,7 @@
+ class="text-sn-dark-grey font-inter text-sm font-normal leading-5 h-fit overflow-auto grid auto-rows-auto grid-cols-3">
{{ `${checklistItem.label} |` }} diff --git a/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue b/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue new file mode 100644 index 000000000..fa5ded9ff --- /dev/null +++ b/app/javascript/vue/repository_item_sidebar/repository_values/ScrollSpy.vue @@ -0,0 +1,76 @@ + + + diff --git a/app/views/shared/_repository_row_sidebar.html.erb b/app/views/shared/_repository_row_sidebar.html.erb index c08ee42cf..fe751a4de 100644 --- a/app/views/shared/_repository_row_sidebar.html.erb +++ b/app/views/shared/_repository_row_sidebar.html.erb @@ -1,6 +1,7 @@
+ class="fixed top-0 right-0 h-full z-[9999]" + >
diff --git a/config/locales/en.yml b/config/locales/en.yml index 4e8945635..f8bd8a206 100644 --- a/config/locales/en.yml +++ b/config/locales/en.yml @@ -2227,12 +2227,8 @@ en: id: "Item ID" added_on: "Added on" added_at: "Added at" - added_by: "Added by" - navigations: - information: "Information" - custom_columns: "Custom columns" - assigned: "Assigned" - qr: "QR" + added_by: 'Added by' + custom_columns_label: 'Custom columns' no_custom_columns_label: 'This item has no custom columns' repository_time_range_value: no_time_range: 'No time range' @@ -2260,6 +2256,11 @@ en: no_asset: 'No file' repository_time_value: no_time: 'No time' + highlight_component: + information_label: 'Information' + custom_columns_label: 'Custom columns' + assigned_label: 'Assigned' + QR_label: 'QR' repository_stock_values: manage_modal: title: "Stock %{item}"