mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-12-29 03:35:25 +08:00
Merge branch 'features/october-release' of https://github.com/scinote-eln/scinote-web into aj_SCI_9155_tmp
This commit is contained in:
Andrej
commit
4e6ccce9dd
6 changed files with 101 additions and 155 deletions
|
|
@ -77,7 +77,6 @@
|
|||
@import "shared/assets";
|
||||
@import "shared/avatar";
|
||||
@import "shared/cards";
|
||||
@import "shared/repository_item_sidebar";
|
||||
@import "shared/comments_sidebar";
|
||||
@import "shared/comments";
|
||||
@import "shared/content_pane";
|
||||
|
|
|
|||
|
|
@ -1,47 +0,0 @@
|
|||
// Should use tailwind; commented out for reference when refactoring
|
||||
|
||||
// // scss-lint:disable IdSelector
|
||||
// // scss-lint:disable SelectorDepth
|
||||
// // scss-lint:disable NestingDepth
|
||||
|
||||
// .repository-item-sidebar {
|
||||
// font-size: 14px;
|
||||
// font-weight: 400;
|
||||
// line-height: 20px;
|
||||
|
||||
// .header {
|
||||
// border-bottom: 1px solid var(--sn-sleepy-grey);
|
||||
// height: var(--top-navigation-height);
|
||||
|
||||
// .item-name {
|
||||
// font-size: 20px;
|
||||
// line-height: 30px;
|
||||
// width: calc(100% - 2rem);
|
||||
// }
|
||||
// }
|
||||
|
||||
// .title {
|
||||
// font-size: 18px;
|
||||
// font-weight: 600;
|
||||
// line-height: 28px;
|
||||
// }
|
||||
|
||||
// #information {
|
||||
// width: 70%;
|
||||
// }
|
||||
|
||||
// .item-details {
|
||||
// div {
|
||||
// border-bottom: 1px solid var(--sn-sleepy-grey);
|
||||
|
||||
// span {
|
||||
// &.repository-name {
|
||||
// -webkit-box-orient: vertical;
|
||||
// display: -webkit-box;
|
||||
// -webkit-line-clamp: 3;
|
||||
// overflow: hidden;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
@ -1,26 +1,46 @@
|
|||
<template>
|
||||
<div id="repository-item-sidebar" class="w-ful h-full py-6 px-6 bg-white flex flex-col">
|
||||
<div class="header flex w-full">
|
||||
<h4 class="item-name my-auto truncate" :title="defaultColumns?.name">
|
||||
<div id="repository-item-sidebar" class="w-ful h-full bg-white flex flex-col relative">
|
||||
<div class="header fixed w-full">
|
||||
<div class="flex justify-between m-6 h-[31px]">
|
||||
<h4 class="my-auto truncate" :title="defaultColumns?.name">
|
||||
{{ !defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
|
||||
{{ defaultColumns?.name }}
|
||||
</h4>
|
||||
<i @click="toggleShowHideSidebar" class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex my-6 items-center self-stretch h-px "></div>
|
||||
|
||||
<div id="body-wrapper" class="flex flex-1 justify-between">
|
||||
<div id="left-col" class="flex flex-col gap-4 mb-4">
|
||||
<div id="information">
|
||||
<div id="title" class="font-inter text-xl font-semibold leading-7 mb-4">{{
|
||||
i18n.t('repositories.item_card.title.information') }}</div>
|
||||
<div class="item-details">
|
||||
<div id="divider" class="bg-sn-sleepy-grey flex mt-[79px] mx-6 items-center self-stretch h-px"></div>
|
||||
<div class="overflow-auto content flex flex-col justify-between px-6 h-full relative scroll-smooth">
|
||||
<aside class="navigations fixed top-28 right-6">
|
||||
<nav class="w-full">
|
||||
<ul class="flex flex-col gap-3 text-right list-none">
|
||||
<li v-for="nav in navigations" :key="nav.value" class="cursor-pointer inline-block relative">
|
||||
<span
|
||||
:class="`${activeNav === nav.value ? 'text-sn-science-blue' : 'text-sn-grey'} mr-8 transition-colors`"
|
||||
@click.prevent="hightlightContent(nav.value)"
|
||||
>
|
||||
{{ nav.label }}
|
||||
</span>
|
||||
<span
|
||||
:class="`${activeNav === nav.value ? 'bg-sn-science-blue w-1 inset-y-0 right-0.5' : 'transparent hidden'} absolute transition-all rounded`"
|
||||
>
|
||||
</span>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
<div id="body-wrapper" class="grow-1">
|
||||
<div class="flex flex-col gap-4 mb-4 mt-4 w-[350px]">
|
||||
<section id="information_wrapper">
|
||||
<h4 class="font-inter text-base font-semibold leading-7 mb-4">
|
||||
{{ i18n.t('repositories.item_card.title.information') }}
|
||||
</h4>
|
||||
<div class="flex flex-col gap-4">
|
||||
<div class="flex flex-col ">
|
||||
<span class="inline-block font-semibold pb-[6px]">{{
|
||||
i18n.t('repositories.item_card.default_columns.repository_name') }}</span>
|
||||
<span class="repository-name flex text-sn-dark-grey" :title="repositoryName">
|
||||
<span class="text-sn-dark-grey line-clamp-3" :title="repositoryName">
|
||||
{{ repositoryName }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -30,7 +50,7 @@
|
|||
<div class="flex flex-col ">
|
||||
<span class="inline-block font-semibold pb-[6px]">{{ i18n.t('repositories.item_card.default_columns.id')
|
||||
}}</span>
|
||||
<span class="inline-block text-sn-dark-grey" :title="defaultColumns?.code">
|
||||
<span class="inline-block text-sn-dark-grey">
|
||||
{{ defaultColumns?.code }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -41,7 +61,7 @@
|
|||
<span class="inline-block font-semibold pb-[6px]">{{
|
||||
i18n.t('repositories.item_card.default_columns.added_on')
|
||||
}}</span>
|
||||
<span class="inline-block text-sn-dark-grey" :title="defaultColumns?.added_on">
|
||||
<span class="inline-block text-sn-dark-grey">
|
||||
{{ defaultColumns?.added_on }}
|
||||
</span>
|
||||
</div>
|
||||
|
|
@ -52,21 +72,20 @@
|
|||
<span class="inline-block font-semibold pb-[6px]">{{
|
||||
i18n.t('repositories.item_card.default_columns.added_by')
|
||||
}}</span>
|
||||
<span class="inline-block text-sn-dark-grey" :title="defaultColumns?.added_by">
|
||||
<span class="inline-block text-sn-dark-grey">
|
||||
{{ defaultColumns?.added_by }}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex items-center self-stretch h-px "></div>
|
||||
|
||||
<div id="custom-col-assigned-qr-wrapper" class="flex flex-col gap-4">
|
||||
<div id="custom-columns-wrapper" class="flex flex-col min-h-[64px] h-auto">
|
||||
|
||||
<div id="custom-columns-label" class="font-inter text-base font-semibold leading-7 pb-4">Custom columns</div>
|
||||
<section id="custom_columns_wrapper" class="flex flex-col min-h-[64px] h-auto">
|
||||
<h4 id="custom-columns-label" class="font-inter text-base font-semibold leading-7 pb-4">
|
||||
{{ i18n.t('repositories.item_card.navigations.custom_columns') }}
|
||||
</h4>
|
||||
<!-- start of custom columns -->
|
||||
<div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
|
||||
<div v-for="(column, index) in customColumns" class="flex flex-col gap-4 w-[350px] h-auto">
|
||||
|
|
@ -84,11 +103,11 @@
|
|||
<div v-else id="custom-columns-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.no_custom_columns_label') }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div>
|
||||
|
||||
<div class="assigned-wrapper">
|
||||
<section id="assigned_wrapper" class="flex flex-col ">
|
||||
<div class="text-base font-semibold w-[350px] my-3 leading-7">
|
||||
{{ i18n.t('repositories.item_card.section.assigned', { count: assignedModules ? assignedModules.total_assigned_size : 0 }) }}
|
||||
</div>
|
||||
|
|
@ -117,11 +136,11 @@
|
|||
<div v-else class="mb-3">
|
||||
{{ i18n.t('repositories.item_card.assigned.empty') }}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div>
|
||||
|
||||
<section id="qr-wrapper">
|
||||
<section id="qr_wrapper">
|
||||
<h4 class="font-inter text-base font-semibold leading-7 mb-4 mt-0">{{ i18n.t('repositories.item_card.navigations.qr') }}</h4>
|
||||
<div class="bar-code-container">
|
||||
<canvas id="bar-code-canvas" class="hidden"></canvas>
|
||||
|
|
@ -130,32 +149,17 @@
|
|||
</section>
|
||||
</div>
|
||||
</div>
|
||||
<div id="navigation" class="min-w-[130px] h-[130px] flex item-end gap-x-4 ">
|
||||
<div class="flex flex-col py-2 px-0 gap-3 self-stretch w-[130px] h-[130px] justify-center items-center">
|
||||
<div class="flex flex-col w-[130px] h-[130px] justify-between text-right">
|
||||
<div @click="handleSideNavClick" id="text-item-1" class="hover:cursor-pointer text-sn-grey">Information</div>
|
||||
<div @click="handleSideNavClick" id="text-item-2" class="hover:cursor-pointer text-sn-grey">Custom columns
|
||||
</div>
|
||||
<div @click="handleSideNavClick" id="text-item-3" class="hover:cursor-pointer text-sn-grey">Assigned</div>
|
||||
<div @click="handleSideNavClick" id="text-item-4" class="hover:cursor-pointer text-sn-grey">QR</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<highlight-component
|
||||
:items-to-create="['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4']">
|
||||
</highlight-component>
|
||||
</div>
|
||||
|
||||
<div id="bottom" class="h-[100px] flex flex-col justify-end" :class="{ 'pb-6': customColumns?.length }">
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px mb-6"></div>
|
||||
<div id="bottom-button-wrapper" class="flex h-10 justify-end">
|
||||
<div class="footer">
|
||||
<div id="divider" class="w-full bg-sn-sleepy-grey flex items-center self-stretch h-px mb-6"></div>
|
||||
<div id="bottom-button-wrapper" class="flex mb-6 justify-end">
|
||||
<button type="button" class="btn btn-primary print-label-button" :data-rows="JSON.stringify([repositoryRowId])">
|
||||
{{ i18n.t('repository_row.modal_print_label.print_label') }}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -171,7 +175,6 @@ import RepositoryDateTimeRangeValue from './repository_values/RepositoryDateTime
|
|||
import RepositoryDateValue from './repository_values/RepositoryDateValue.vue';
|
||||
import RepositoryDateRangeValue from './repository_values/RepositoryDateRangeValue.vue';
|
||||
import RepositoryTimeRangeValue from './repository_values/RepositoryTimeRangeValue.vue'
|
||||
import HighlightComponent from './repository_values/HighlightComponent.vue';
|
||||
|
||||
export default {
|
||||
name: 'RepositoryItemSidebar',
|
||||
|
|
@ -188,10 +191,8 @@ export default {
|
|||
RepositoryDateValue,
|
||||
RepositoryDateRangeValue,
|
||||
RepositoryTimeRangeValue,
|
||||
'highlight-component': HighlightComponent
|
||||
},
|
||||
data() {
|
||||
// using dummy data for now
|
||||
return {
|
||||
repositoryRowId: null,
|
||||
repositoryName: null,
|
||||
|
|
@ -199,6 +200,8 @@ export default {
|
|||
customColumns: null,
|
||||
assignedModules: null,
|
||||
isShowing: false,
|
||||
navClicked: false,
|
||||
activeNav: 'information',
|
||||
sequenceExpanded: false,
|
||||
barCodeSrc: null
|
||||
}
|
||||
|
|
@ -217,6 +220,13 @@ export default {
|
|||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
navigations() {
|
||||
return ['information', 'custom_columns', 'assigned', 'qr'].map(nav => (
|
||||
{ label: I18n.t(`repositories.item_card.navigations.${nav}`), value: nav }
|
||||
));
|
||||
}
|
||||
},
|
||||
beforeDestroy() {
|
||||
delete window.repositoryItemSidebarComponent;
|
||||
},
|
||||
|
|
@ -248,42 +258,39 @@ export default {
|
|||
this.assignedModules = result.assigned_modules;
|
||||
this.$nextTick(() => {
|
||||
this.generateBarCode(this.defaultColumns.code);
|
||||
this.attachScrollEvent();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// determine the identifier value according to the text-item (target) value
|
||||
handleSideNavClick(e) {
|
||||
let highlightItemId
|
||||
const targetId = e.target.id
|
||||
switch (targetId) {
|
||||
case 'text-item-1':
|
||||
highlightItemId = 'highlight-item-1'
|
||||
break
|
||||
case 'text-item-2':
|
||||
highlightItemId = 'highlight-item-2'
|
||||
break
|
||||
case 'text-item-3':
|
||||
highlightItemId = 'highlight-item-3'
|
||||
break
|
||||
case 'text-item-4':
|
||||
highlightItemId = 'highlight-item-4'
|
||||
break
|
||||
default: null
|
||||
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;
|
||||
}
|
||||
|
||||
const arrOfBurgerItemIds = ['text-item-1', 'text-item-2', 'text-item-3', 'text-item-4']
|
||||
const arrOfBurgerHighlightItemIds = ['highlight-item-1', 'highlight-item-2', 'highlight-item-3', 'highlight-item-4']
|
||||
const arrToUnhighlight_1 = arrOfBurgerItemIds.filter((i) => i !== targetId)
|
||||
const arrToUnhighlight_2 = arrOfBurgerHighlightItemIds.filter((i) => i !== highlightItemId)
|
||||
|
||||
// highlight the target text and corresponding identifier
|
||||
document.getElementById(targetId).classList.add('text-sn-science-blue')
|
||||
document.getElementById(highlightItemId).classList.add('bg-sn-science-blue')
|
||||
|
||||
//unhighlight the rest of the text and identifiers
|
||||
arrToUnhighlight_1.forEach(id => document.getElementById(id).classList.remove('text-sn-science-blue'))
|
||||
arrToUnhighlight_2.forEach(id => document.getElementById(id).classList.remove('bg-sn-science-blue'))
|
||||
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;
|
||||
|
|
|
|||
|
|
@ -1,16 +0,0 @@
|
|||
<template>
|
||||
<div id="highlight-container" class="w-[1px] h-[130px] flex flex-col justify-evenly bg-sn-light-grey">
|
||||
<div v-for="(item, index) in itemsToCreate">
|
||||
<div :key="index" :id="item" class="w-[5px] h-[28px] rounded-[11px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'HighlightComponent',
|
||||
props: {
|
||||
itemsToCreate: Array
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<div
|
||||
id="repositoryItemSidebar"
|
||||
data-behaviour="vue"
|
||||
class='bg-white fixed top-0 right-0 h-screen w-[565px] overflow-auto gap-2.5 self-stretch z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'>
|
||||
class='bg-white fixed top-0 right-0 h-screen w-[565px] z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'>
|
||||
<repository-item-sidebar />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2126,10 +2126,13 @@ en:
|
|||
id: "Item ID"
|
||||
added_on: "Added on"
|
||||
added_at: "Added at"
|
||||
added_by: 'Added by'
|
||||
no_custom_columns_label: 'This item has no custom columns'
|
||||
added_by: "Added by"
|
||||
navigations:
|
||||
information: "Information"
|
||||
custom_columns: "Custom columns"
|
||||
assigned: "Assigned"
|
||||
qr: "QR"
|
||||
no_custom_columns_label: 'This item has no custom columns'
|
||||
repository_time_range_value:
|
||||
no_time_range: 'No time range'
|
||||
repository_text_value:
|
||||
|
|
|
|||
Loading…
Reference in a new issue