mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-11-10 17:36:33 +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
9ca96145d5
21 changed files with 847 additions and 287 deletions
|
|
@ -1,45 +1,47 @@
|
|||
// scss-lint:disable IdSelector
|
||||
// scss-lint:disable SelectorDepth
|
||||
// scss-lint:disable NestingDepth
|
||||
// Should use tailwind; commented out for reference when refactoring
|
||||
|
||||
.repository-item-sidebar {
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
line-height: 20px;
|
||||
// // scss-lint:disable IdSelector
|
||||
// // scss-lint:disable SelectorDepth
|
||||
// // scss-lint:disable NestingDepth
|
||||
|
||||
.header {
|
||||
border-bottom: 1px solid var(--sn-sleepy-grey);
|
||||
height: var(--top-navigation-height);
|
||||
// .repository-item-sidebar {
|
||||
// font-size: 14px;
|
||||
// font-weight: 400;
|
||||
// line-height: 20px;
|
||||
|
||||
.item-name {
|
||||
font-size: 20px;
|
||||
line-height: 30px;
|
||||
width: calc(100% - 2rem);
|
||||
}
|
||||
}
|
||||
// .header {
|
||||
// border-bottom: 1px solid var(--sn-sleepy-grey);
|
||||
// height: var(--top-navigation-height);
|
||||
|
||||
.title {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
line-height: 28px;
|
||||
}
|
||||
// .item-name {
|
||||
// font-size: 20px;
|
||||
// line-height: 30px;
|
||||
// width: calc(100% - 2rem);
|
||||
// }
|
||||
// }
|
||||
|
||||
#information {
|
||||
width: 70%;
|
||||
}
|
||||
// .title {
|
||||
// font-size: 18px;
|
||||
// font-weight: 600;
|
||||
// line-height: 28px;
|
||||
// }
|
||||
|
||||
.item-details {
|
||||
div {
|
||||
border-bottom: 1px solid var(--sn-sleepy-grey);
|
||||
// #information {
|
||||
// width: 70%;
|
||||
// }
|
||||
|
||||
span {
|
||||
&.repository-name {
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
// .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;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
|
||||
import TurbolinksAdapter from 'vue-turbolinks';
|
||||
import Vue from 'vue/dist/vue.esm';
|
||||
import RepositoryItemSidebar from '../../vue/components/RepositoryItemSidebar.vue';
|
||||
import RepositoryItemSidebar from '../../vue/repository_item_sidebar/RepositoryItemSidebar.vue';
|
||||
|
||||
Vue.use(TurbolinksAdapter);
|
||||
Vue.prototype.i18n = window.I18n;
|
||||
|
|
@ -17,4 +17,3 @@ function initRepositoryItemSidebar() {
|
|||
}
|
||||
|
||||
initRepositoryItemSidebar();
|
||||
|
||||
|
|
|
|||
|
|
@ -1,240 +0,0 @@
|
|||
<template>
|
||||
<div v-if="defaultColumns" id="repository-item-sidebar" class="repository-item-sidebar w-full h-full px-4 bg-white flex flex-col">
|
||||
<div class="header flex w-full">
|
||||
<h4 class="item-name 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 class="body mt-4">
|
||||
<section id="information">
|
||||
<h4 class="title mb-0">{{ i18n.t('repositories.item_card.title.information') }}</h4>
|
||||
<div class="item-details">
|
||||
<div class="flex flex-col py-3">
|
||||
<span class="inline-block font-semibold pb-2">{{ i18n.t('repositories.item_card.default_columns.repository_name') }}</span>
|
||||
<span class="repository-name inline-block text-sn-dark-grey"
|
||||
:title="repositoryName">
|
||||
{{ repositoryName }}
|
||||
</span>
|
||||
<span class="inline-block font-semibold pb-2">{{ i18n.t('repositories.item_card.default_columns.id') }}</span>
|
||||
<span class="inline-block text-sn-dark-grey"
|
||||
:title="defaultColumns.code">
|
||||
{{ defaultColumns.code }}
|
||||
</span>
|
||||
<span class="inline-block font-semibold pb-2">{{ i18n.t('repositories.item_card.default_columns.added_on') }}</span>
|
||||
<span class="inline-block text-sn-dark-grey"
|
||||
:title="defaultColumns.added_on">
|
||||
{{ defaultColumns.added_on }}
|
||||
</span>
|
||||
<span class="inline-block font-semibold pb-2">{{ i18n.t('repositories.item_card.default_columns.added_by') }}</span>
|
||||
<span class="inline-block text-sn-dark-grey"
|
||||
:title="defaultColumns.added_by">
|
||||
{{ defaultColumns.added_by }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
<div>
|
||||
<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 mb-2">Custom columns</div>
|
||||
<!-- start of custom columns -->
|
||||
<div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
|
||||
<div v-for="column in customColumns" class="flex flex-col gap-4 w-[350px] h-auto">
|
||||
<div id="" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">
|
||||
{{ column.value_type }}
|
||||
</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ column.value }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of custom columns -->
|
||||
<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>
|
||||
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div>
|
||||
|
||||
<div class="assigned-wrapper">
|
||||
<div class="text-base font-semibold w-[350px] my-3 leading-7">
|
||||
{{ i18n.t('repositories.item_card.section.assigned', { count: assignedModules.total_assigned_count }) }}
|
||||
</div>
|
||||
|
||||
<div v-if="assignedModules.total_assigned_count > 0">
|
||||
<div v-if="assignedModules.private_count > 0" class="pb-6">
|
||||
{{ i18n.t('repositories.item_card.assigned.private', { count: assignedModules.private_count }) }}
|
||||
|
||||
<hr v-if="assignedModules.viewable_modules.length > 0"
|
||||
class="h-1 w-[350px] m-0 mt-6 border-dashed border-1 border-sn-light-grey"/>
|
||||
</div>
|
||||
|
||||
<div v-for="(assigned, index) in assignedModules.viewable_modules"
|
||||
:key="`assigned_module_${index}`"
|
||||
class="flex flex-col w-[350px] mb-6 h-auto">
|
||||
|
||||
<div class="flex flex-col gap-3">
|
||||
<div v-for="(object, index_assigned) in assigned"
|
||||
:key="`assigned_element_${index_assigned}`">
|
||||
{{ object.label }}
|
||||
<a :href="object.url">{{ object.value }}</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr v-if="index < assignedModules.viewable_modules.length - 1"
|
||||
class="h-1 w-[350px] mt-6 mb-0 border-dashed border-1 border-sn-light-grey"/>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="mb-3">
|
||||
{{ i18n.t('repositories.item_card.assigned.empty') }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div>
|
||||
|
||||
<div id="QR-wrapper" class="block">
|
||||
<div id="QR-label" class="font-inter text-base font-semibold leading-7 mb-4">QR</div>
|
||||
<canvas id="bar-code-canvas" class="hidden" data-id='dummyDataId'></canvas>
|
||||
<img id="bar-code-image" />
|
||||
</div>
|
||||
</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 id="highlight-container" class="w-[1px] h-[130px] flex flex-col justify-evenly bg-sn-light-grey">
|
||||
<div id="highlight-item-1" class="w-[5px] h-[28px] rounded-[11px]"></div>
|
||||
<div id="highlight-item-2" class="w-[5px] h-[28px] rounded-[11px]"></div>
|
||||
<div id="highlight-item-3" class="w-[5px] h-[28px] rounded-[11px]"></div>
|
||||
<div id="highlight-item-4" class="w-[5px] h-[28px] rounded-[11px]"></div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="bottom" class="h-[100px] flex flex-col justify-end">
|
||||
<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">
|
||||
<button class="btn btn-primary">Print Label</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
<script>
|
||||
|
||||
export default {
|
||||
name: 'RepositoryItemSidebar',
|
||||
data() {
|
||||
// using dummy data for now
|
||||
return {
|
||||
repositoryName: null,
|
||||
defaultColumns: null,
|
||||
customColumns: null,
|
||||
assignedModules: null,
|
||||
isShowing: false,
|
||||
sequenceExpanded: false,
|
||||
}
|
||||
},
|
||||
created() {
|
||||
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');
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
// generate the QR code
|
||||
// let barCodeCanvas = bwipjs.toCanvas('bar-code-canvas', {
|
||||
// bcid: 'qrcode',
|
||||
// text: $('#repository-item-sidebar #bar-code-canvas').data('id').toString(),
|
||||
// scale: 3
|
||||
// });
|
||||
// $('#repository-item-sidebar #bar-code-image').attr('src', barCodeCanvas.toDataURL('image/png'));
|
||||
},
|
||||
beforeDestroy() {
|
||||
delete window.repositoryItemSidebarComponent;
|
||||
},
|
||||
computed: {
|
||||
},
|
||||
methods: {
|
||||
// component is currently shown/hidden by calling window.repositoryItemSidebarComponent.toggleShowHideSidebar()
|
||||
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]')
|
||||
}
|
||||
this.sequenceExpanded = !this.sequenceExpanded
|
||||
},
|
||||
loadRepositoryRow(repositoryRowUrl) {
|
||||
$.ajax({
|
||||
method: 'GET',
|
||||
url: repositoryRowUrl,
|
||||
dataType: 'json',
|
||||
success: (result) => {
|
||||
this.repositoryName = result.repository_name;
|
||||
this.defaultColumns = result.default_columns;
|
||||
this.customColumns = result.custom_columns;
|
||||
this.assignedModules = result.assigned_modules;
|
||||
}
|
||||
});
|
||||
},
|
||||
// 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
|
||||
}
|
||||
|
||||
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'))
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,286 @@
|
|||
<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">
|
||||
{{ !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 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 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">
|
||||
{{ repositoryName }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<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">
|
||||
{{ defaultColumns?.code }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div class="flex flex-col ">
|
||||
<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">
|
||||
{{ defaultColumns?.added_on }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div class="flex flex-col ">
|
||||
<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">
|
||||
{{ defaultColumns?.added_by }}
|
||||
</span>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<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>
|
||||
<!-- 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">
|
||||
|
||||
<component :is="column.data_type" :key="index" :data_type="column.data_type" :colId="column.id"
|
||||
:colName="column.name" :colVal="column.value" />
|
||||
|
||||
<div id="dashed-divider" :class="{ 'hidden': index === customColumns.length - 1 }"
|
||||
class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey">
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<!-- end of custom columns -->
|
||||
<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>
|
||||
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div>
|
||||
|
||||
<div id="assigned-wrapper" class="flex flex-col h-[64px] ">
|
||||
|
||||
<div v-if="this.assigned" id="assigned-label" class="font-inter text-base font-semibold leading-7 pb-4">
|
||||
Assigned (3)
|
||||
</div>
|
||||
<div v-else class="flex justify-between">
|
||||
<div id="assigned-label" class="font-inter text-base font-semibold leading-7 pb-4">
|
||||
Assigned (0)
|
||||
</div>
|
||||
<div class="text-sn-blue hover:cursor-pointer text-right font-inter text-sm font-normal leading-5 h-fit">
|
||||
Assign to task
|
||||
</div>
|
||||
</div>
|
||||
<div id="assigned-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.assigned }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div>
|
||||
|
||||
<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>
|
||||
<img id="bar-code-image" />
|
||||
</div>
|
||||
</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">
|
||||
<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>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import RepositoryStockValue from './repository_values/RepositoryStockValue.vue';
|
||||
import RepositoryTextValue from './repository_values/RepositoryTextValue.vue';
|
||||
import RepositoryNumberValue from './repository_values/RepositoryNumberValue.vue';
|
||||
import RepositoryAssetValue from './repository_values/RepositoryAssetValue.vue';
|
||||
import RepositoryListValue from './repository_values/RepositoryListValue.vue';
|
||||
import RepositoryChecklistValue from './repository_values/RepositoryChecklistValue.vue';
|
||||
import RepositoryStatusValue from './repository_values/RepositoryStatusValue.vue';
|
||||
import RepositoryDateTimeValue from './repository_values/RepositoryDateTimeValue.vue';
|
||||
import RepositoryDateTimeRangeValue from './repository_values/RepositoryDateTimeRangeValue.vue';
|
||||
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',
|
||||
components: {
|
||||
RepositoryStockValue,
|
||||
RepositoryTextValue,
|
||||
RepositoryNumberValue,
|
||||
RepositoryAssetValue,
|
||||
RepositoryListValue,
|
||||
RepositoryChecklistValue,
|
||||
RepositoryStatusValue,
|
||||
RepositoryDateTimeValue,
|
||||
RepositoryDateTimeRangeValue,
|
||||
RepositoryDateValue,
|
||||
RepositoryDateRangeValue,
|
||||
RepositoryTimeRangeValue,
|
||||
'highlight-component': HighlightComponent
|
||||
},
|
||||
data() {
|
||||
// using dummy data for now
|
||||
return {
|
||||
repositoryRowId: null,
|
||||
repositoryName: null,
|
||||
defaultColumns: null,
|
||||
customColumns: null,
|
||||
isShowing: false,
|
||||
sequenceExpanded: false,
|
||||
assigned: 'Assigned to 3 private tasks that will not be displayed',
|
||||
barCodeSrc: null
|
||||
}
|
||||
},
|
||||
created() {
|
||||
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');
|
||||
}
|
||||
}
|
||||
},
|
||||
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]')
|
||||
}
|
||||
this.sequenceExpanded = !this.sequenceExpanded
|
||||
},
|
||||
loadRepositoryRow(repositoryRowUrl) {
|
||||
$.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.$nextTick(() => {
|
||||
this.generateBarCode(this.defaultColumns.code);
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
// 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
|
||||
}
|
||||
|
||||
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'))
|
||||
},
|
||||
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'));
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<template>
|
||||
<div id="repository-asset-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="file_name" @mouseover="tooltipShowing = true" @mouseout="tooltipShowing = false"
|
||||
class="w-fit cursor-pointer text-sn-science-blue">
|
||||
{{ file_name }}
|
||||
<tooltip-preview v-if="tooltipShowing" :url="url" :file_name="file_name" :preview_url="preview_url"
|
||||
:icon_html="icon_html"></tooltip-preview>
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_asset_value.no_asset') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import TooltipPreview from './TooltipPreview.vue'
|
||||
|
||||
export default {
|
||||
name: 'RepositoryAssetvalue',
|
||||
components: {
|
||||
"tooltip-preview": TooltipPreview
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
tooltipShowing: false,
|
||||
id: null,
|
||||
url: null,
|
||||
preview_url: null,
|
||||
file_name: null,
|
||||
icon_html: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object
|
||||
},
|
||||
created() {
|
||||
this.id = this.colVal.id
|
||||
this.url = this.colVal.url
|
||||
this.preview_url = this.colVal.preview_url
|
||||
this.file_name = this.colVal.file_name
|
||||
this.icon_html = this.colVal.icon_html
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,53 @@
|
|||
<template>
|
||||
<div id="repository-checklist-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="allChecklistItems">
|
||||
<div v-if="isEditing"
|
||||
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 grid grid-rows-2 grid-cols-2 overflow-auto h-12">
|
||||
<div v-for="(checklistItem, index) in allChecklistItems" :key="index">
|
||||
<div class="sci-checkbox-container">
|
||||
<input type="checkbox" class="sci-checkbox" :value="checklistItem.value" v-model="selectedChecklistItems" />
|
||||
<span class="sci-checkbox-label"></span>
|
||||
</div>
|
||||
{{ checklistItem.label }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else
|
||||
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 h-12 overflow-auto grid auto-rows-auto grid-cols-3">
|
||||
<div v-for="(checklistItem, index) in allChecklistItems" :key="index">
|
||||
<div id="checklist-item" class="min-w-max">
|
||||
{{ `${checklistItem.label} |` }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_checklist_value.no_checklist') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryChecklistValue',
|
||||
data() {
|
||||
return {
|
||||
isEditing: false,
|
||||
id: null,
|
||||
allChecklistItems: [],
|
||||
selectedChecklistItems: []
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Array
|
||||
},
|
||||
created() {
|
||||
this.allChecklistItems = this.colVal
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div id="repository-date-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="start_time?.formatted && end_time?.formatted"
|
||||
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
||||
<div>{{ start_time.formatted }} - {{ end_time.formatted }}</div>
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_date_range_value.no_date_range') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryDateRangeValue',
|
||||
data() {
|
||||
return {
|
||||
start_time: null,
|
||||
end_time: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object
|
||||
},
|
||||
created() {
|
||||
this.start_time = this.colVal.start_time
|
||||
this.end_time = this.colVal.end_time
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div id="repository-date-time-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="start_time?.formatted && end_time?.formatted"
|
||||
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
||||
<div>{{ start_time?.formatted }} - {{ end_time.formatted }}</div>
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_date_time_range_value.no_date_time_range') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryDateTimeRangeValue',
|
||||
data() {
|
||||
return {
|
||||
start_time: null,
|
||||
end_time: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object
|
||||
},
|
||||
created() {
|
||||
this.start_time = this.colVal.start_time
|
||||
this.end_time = this.colVal.end_time
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,39 @@
|
|||
<template>
|
||||
<div id="repository-date-time-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
||||
<div>{{ formatted }}</div>
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_date_time_value.no_date_time') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryDateTimeValue',
|
||||
data() {
|
||||
return {
|
||||
formatted: null,
|
||||
date_formatted: null,
|
||||
time_formatted: null,
|
||||
datetime: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object
|
||||
},
|
||||
created() {
|
||||
this.formatted = this.colVal.formatted
|
||||
this.date_formatted = this.colVal.date_formatted
|
||||
this.time_formatted = this.colVal.time_formatted
|
||||
this.formatdatetimeted = this.colVal.datetime
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div id="repository-date-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
||||
<div>{{ formatted }}</div>
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_date_value.no_date') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryDateValue',
|
||||
data() {
|
||||
return {
|
||||
formatted: null,
|
||||
datetime: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object
|
||||
},
|
||||
created() {
|
||||
this.formatted = this.colVal.formatted
|
||||
this.datetime = this.colVal.datetime
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div id="repository-list-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="text" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ text }}
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_list_value.no_list') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryListValue',
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
text: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object
|
||||
},
|
||||
created() {
|
||||
this.id = this.colVal.id
|
||||
this.text = this.colVal.text
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,25 @@
|
|||
<template>
|
||||
<div id="repository-number-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="colVal" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ colVal }}
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_number_value.no_number') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryNumberValue',
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Number
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,38 @@
|
|||
<template>
|
||||
<div id="repository-status-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="status && icon" class="text-sn-dark-grey font-inter text-sm font-normal leading-5 ">
|
||||
<i class="text-lg">{{ icon }}</i>
|
||||
{{ status }}
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_status_value.no_status') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryStatusValue',
|
||||
data() {
|
||||
return {
|
||||
id: null,
|
||||
icon: null,
|
||||
status: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object
|
||||
},
|
||||
created() {
|
||||
this.id = this.colVal.id
|
||||
this.icon = this.colVal.icon
|
||||
this.status = this.colVal.status
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div id="repository-stock-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="stock_formatted" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ stock_formatted }}
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_stock_value.no_stock') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryStockValue',
|
||||
data() {
|
||||
return {
|
||||
stock_formatted: null,
|
||||
stock_amount: null,
|
||||
low_stock_threshold: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object
|
||||
},
|
||||
created() {
|
||||
this.stock_formatted = this.colVal.stock_formatted
|
||||
this.stock_amount = this.colVal.stock_amount
|
||||
this.low_stock_threshold = this.colVal.low_stock_threshold
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,35 @@
|
|||
<template>
|
||||
<div id="repository-text-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="edit" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ edit }}
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ i18n.t('repositories.item_card.repository_text_value.no_text') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryTextValue',
|
||||
data() {
|
||||
return {
|
||||
edit: null,
|
||||
view: null,
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object
|
||||
},
|
||||
created() {
|
||||
this.edit = this.colVal.edit
|
||||
this.view = this.colVal.view
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,36 @@
|
|||
<template>
|
||||
<div id="repository-time-range-value-wrapper" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div class="font-inter text-sm font-semibold leading-5">
|
||||
{{ colName }}
|
||||
</div>
|
||||
<div v-if="start_time?.formatted && end_time?.formatted"
|
||||
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex">
|
||||
<div>{{ start_time.formatted }} - {{ end_time.formatted }}</div>
|
||||
</div>
|
||||
<div v-else class="text-sn-dark-grey font-inter text-sm font-normal leading-5">{{
|
||||
i18n.t('repositories.item_card.repository_time_range_value.no_time_range') }}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'RepositoryTimeRangeValue',
|
||||
data() {
|
||||
return {
|
||||
start_time: null,
|
||||
end_time: null
|
||||
}
|
||||
},
|
||||
props: {
|
||||
data_type: String,
|
||||
colId: Number,
|
||||
colName: String,
|
||||
colVal: Object
|
||||
},
|
||||
created() {
|
||||
this.start_time = this.colVal.start_time
|
||||
this.end_time = this.colVal.end_time
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,19 @@
|
|||
<template>
|
||||
<div class="absolute">
|
||||
<img :src="this.url"
|
||||
class="absolute bg-sn-light-grey text-sn-black w-[300px] h-[260px] rounded pointer-events-none flex shadow-lg shrink-0" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'TooltipPreview',
|
||||
props: {
|
||||
tooltipId: String,
|
||||
url: String,
|
||||
preview_url: String,
|
||||
file_name: String,
|
||||
icon_html: String || null,
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
|
@ -75,9 +75,4 @@
|
|||
<% end %>
|
||||
</li>
|
||||
<% end %>
|
||||
<li class="form-dropdown-item">
|
||||
<div class="form-dropdown-item-info">
|
||||
<small><%= t('experiments.experiment_id') %>: <strong><%= experiment.code %></strong></small>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
|
|
|
|||
|
|
@ -11,7 +11,9 @@ json.default_columns do
|
|||
end
|
||||
json.custom_columns do
|
||||
json.array! @repository_row.repository_cells do |repository_cell|
|
||||
json.merge! serialize_repository_cell_value(repository_cell, @repository.team, @repository)
|
||||
json.merge! serialize_repository_cell_value(repository_cell, @repository.team, @repository).merge(
|
||||
repository_cell.repository_column.as_json(only: %i(id name data_type))
|
||||
)
|
||||
end
|
||||
end
|
||||
|
||||
|
|
|
|||
|
|
@ -1616,7 +1616,7 @@ en:
|
|||
disclaimer: "Anyone with the link can view the protocol and results pages of this task."
|
||||
too_long_text: "Text is too long (maximum number is %{counter} characters)"
|
||||
copy_success: "Shared link copied to clipboard"
|
||||
destroy_modal:
|
||||
destroy_modal:
|
||||
title: "Deactivate shared link"
|
||||
description: "This action will permanently deactivate the shared link. Any user who has this link will no longer be able to access the task."
|
||||
deactivate: "Deactivate"
|
||||
|
|
@ -2128,6 +2128,32 @@ en:
|
|||
added_at: "Added at"
|
||||
added_by: 'Added by'
|
||||
no_custom_columns_label: 'This item has no custom columns'
|
||||
navigations:
|
||||
qr: "QR"
|
||||
repository_time_range_value:
|
||||
no_time_range: 'No time range'
|
||||
repository_text_value:
|
||||
no_text: 'No text'
|
||||
repository_stock_value:
|
||||
no_stock: 'No stock'
|
||||
repository_status_value:
|
||||
no_status: 'No selection'
|
||||
repository_number_value:
|
||||
no_number: 'No number'
|
||||
repository_list_value:
|
||||
no_list: 'No selection'
|
||||
repository_date_value:
|
||||
no_date: 'No date'
|
||||
repositoy_date_time_value:
|
||||
no_date_time: 'No date & time'
|
||||
repository_date_time_range_value:
|
||||
no_date_time_range: 'No date & time range'
|
||||
repository_date_range_value:
|
||||
no_date_range_value: 'No date range'
|
||||
repository_checklist_value:
|
||||
no_checklist: 'No selection'
|
||||
repository_asset_value:
|
||||
no_asset: 'No file'
|
||||
repository_stock_values:
|
||||
manage_modal:
|
||||
title: "Stock %{item}"
|
||||
|
|
|
|||
Loading…
Reference in a new issue