mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2024-09-21 15:36:22 +08:00
Merge pull request #6229 from wandji20/wb-SCI-9151
Add default columns to inventory item card [SCI-9151]
This commit is contained in:
Alex Kriuchykhin
GitHub
commit
06516cadb0
|
|
@ -77,6 +77,7 @@
|
|||
@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";
|
||||
|
|
|
|||
45
app/assets/stylesheets/shared/repository_item_sidebar.scss
Normal file
45
app/assets/stylesheets/shared/repository_item_sidebar.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
|||
// 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,284 +1,250 @@
|
|||
<template>
|
||||
<div id="repository-item-sidebar" class="w-[500px] min-h-[1032px] h-auto m-[24px] bg-white justify-between flex flex-col">
|
||||
<div id="top" class="flex flex-col items-center gap-6 self-stretch min-h-[763px] h-full">
|
||||
|
||||
<div id="modal-title-and-subtitle" class="h-[48px] w-full">
|
||||
<div id="title" class="h-[30px] w-full flex justify-between">
|
||||
<p class="my-auto mx-0 w-fit font-inter text-base font-semibold leading-7">
|
||||
{{ this.title }}
|
||||
</p>
|
||||
<i @click="toggleShowHideSidebar" class="sn-icon sn-icon-close ml-auto cursor-pointer my-auto mx-0"></i>
|
||||
</div>
|
||||
<div id="subtitle" class="h-[18px] w-full flex">
|
||||
{{ this.subtitle }}
|
||||
</div>
|
||||
<div 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="repositoryRow.name">
|
||||
{{ !repositoryRow.archived ? i18n.t('labels.archived') : '' }}
|
||||
{{ repositoryRow.name }}
|
||||
</h4>
|
||||
<i @click="toggleShowHide" 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 v-for="column in defaultColumns" class="flex flex-col py-3">
|
||||
<span class="inline-block font-semibold pb-2">{{ column.label }}</span>
|
||||
<span
|
||||
class="inline-block text-sn-dark-grey"
|
||||
:class="{ 'repository-name': column.label === 'Inventory'}"
|
||||
:title="column.label === 'Inventory' ? column.value : null"
|
||||
>
|
||||
{{ column.value }}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div>
|
||||
|
||||
<div id="content" class="min-h-[684px] h-auto flex flex-row">
|
||||
<div id="items" class="min-w-[350px] h-auto flex flex-col gap-4">
|
||||
<div id="information" class="h-[28px] font-inter text-lg font-semibold leading-7">Information</div>
|
||||
|
||||
<div id="inventory-wrapper" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="inventory-label" class="font-inter text-sm font-semibold leading-5">Inventory</div>
|
||||
<div id="inventory-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.inventory }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="item-id-wrapper" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="item-id-label" class="font-inter text-sm font-semibold leading-5">Item ID</div>
|
||||
<div id="item-id-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.itemId }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="added-on-wrapper" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="added-on-label" class="font-inter text-sm font-semibold leading-5">Added on</div>
|
||||
<div id="added-on-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.addedOn }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="added-by-wrapper" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="added-by-label" class="font-inter text-sm font-semibold leading-5">Added by</div>
|
||||
<div id="added-by-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.addedBy }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></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>
|
||||
<div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
|
||||
<!-- start of custom columns -->
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="flex justify-between">
|
||||
<div class="font-inter text-sm font-semibold leading-5">Solvent stock</div>
|
||||
<div class="font-inter text-sm font-normal leading-5 text-sn-blue cursor-pointer">Export</div>
|
||||
</div>
|
||||
<div id="">
|
||||
<div v-if="this.customColumns[0]?.solventStock" class="flex flex-row justify-between">
|
||||
<div class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.solventStock }}
|
||||
</div>
|
||||
<i class="sn-icon sn-icon-notifications"></i>
|
||||
</div>
|
||||
<div v-else>No stock</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Items in warehouse</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.itemsInWarehouse ? 'In stock' : 'No text' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Storage temperature</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.storageTemp || 'No text' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling date & time range</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingDateTimeRange || 'No date & time range' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling date & time reminder</div>
|
||||
<div id="">
|
||||
<div v-if="this.customColumns[0]?.samplingDateTimeReminder" class="flex flex-row justify-between">
|
||||
<div class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingDateTimeReminder }}
|
||||
</div>
|
||||
<i class="sn-icon sn-icon-notifications"></i>
|
||||
</div>
|
||||
<div v-else>No Date & time</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling date range</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingDateRange || 'No date range' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling date</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingDate || 'No date' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling date reminder</div>
|
||||
<div id="">
|
||||
<div v-if="this.customColumns[0]?.samplingDateReminder" class="flex flex-row justify-between">
|
||||
<div class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingDateReminder }}
|
||||
</div>
|
||||
<i class="sn-icon sn-icon-notifications"></i>
|
||||
</div>
|
||||
<div v-else>No Date</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling time range</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingTimeRange || 'No time range' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Incubation time</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.incubationTime || 'No time' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">DNA File</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
<a v-if="this.customColumns[0]?.dnaFile">
|
||||
{{ this.customColumns[0]?.dnaFile }}
|
||||
</a>
|
||||
<div v-else>No file</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Number of aliquots</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.numOfAliquots || 'No number' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Color</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.color || 'No selection' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Option</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
<div v-if="this.customColumns[0]?.optionArr.length > 0"
|
||||
class="flex flex-row overflow-auto break-normal w-[350px] gap-1 flex-wrap h-auto">
|
||||
<div v-for="(option, index) in this.customColumns[0].optionArr" :key="index" class="flex min-w-fit">
|
||||
{{ option + ' |' }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-else>No number</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<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">Item status</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.itemStatus || 'No selection' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="flex justify-between">
|
||||
<div class="font-inter text-sm font-semibold leading-5">Sequence</div>
|
||||
<div @click="toggleExpandSequence" class="font-inter text-sm font-normal leading-5 text-sn-blue cursor-pointer">
|
||||
{{ this.sequenceExpanded ? 'Hide' : 'Show' }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="sequence-container"
|
||||
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex flex-row overflow-auto break-normal w-[350px] h-[60px] gap-1 flex-wrap">
|
||||
{{ this.customColumns[0]?.sequence || 'No text' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- end of custom columns -->
|
||||
</div>
|
||||
<div v-else id="custom-columns-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumnsFallback }}
|
||||
</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] gap-[6px]">
|
||||
<div id="assigned-label" class="font-inter text-base font-semibold leading-7">Assigned (3)</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>
|
||||
|
||||
<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>
|
||||
</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>
|
||||
<div v-if="customColumns?.length > 0" class="flex flex-col gap-4 w-[350px] h-auto">
|
||||
<!-- start of custom columns -->
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="flex justify-between">
|
||||
<div class="font-inter text-sm font-semibold leading-5">Solvent stock</div>
|
||||
<div class="font-inter text-sm font-normal leading-5 text-sn-blue cursor-pointer">Export</div>
|
||||
</div>
|
||||
<div id="">
|
||||
<div v-if="this.customColumns[0]?.solventStock" class="flex flex-row justify-between">
|
||||
<div class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.solventStock }}
|
||||
</div>
|
||||
<i class="sn-icon sn-icon-notifications"></i>
|
||||
</div>
|
||||
<div v-else>No stock</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Items in warehouse</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.itemsInWarehouse ? 'In stock' : 'No text' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Storage temperature</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.storageTemp || 'No text' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></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 id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling date & time range</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingDateTimeRange || 'No date & time range' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling date & time reminder</div>
|
||||
<div id="">
|
||||
<div v-if="this.customColumns[0]?.samplingDateTimeReminder" class="flex flex-row justify-between">
|
||||
<div class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingDateTimeReminder }}
|
||||
</div>
|
||||
<i class="sn-icon sn-icon-notifications"></i>
|
||||
</div>
|
||||
<div v-else>No Date & time</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling date range</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingDateRange || 'No date range' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling date</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingDate || 'No date' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling date reminder</div>
|
||||
<div id="">
|
||||
<div v-if="this.customColumns[0]?.samplingDateReminder" class="flex flex-row justify-between">
|
||||
<div class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingDateReminder }}
|
||||
</div>
|
||||
<i class="sn-icon sn-icon-notifications"></i>
|
||||
</div>
|
||||
<div v-else>No Date</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Sampling time range</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.samplingTimeRange || 'No time range' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Incubation time</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.incubationTime || 'No time' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">DNA File</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
<a v-if="this.customColumns[0]?.dnaFile">
|
||||
{{ this.customColumns[0]?.dnaFile }}
|
||||
</a>
|
||||
<div v-else>No file</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Number of aliquots</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.numOfAliquots || 'No number' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Color</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.color || 'No selection' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="font-inter text-sm font-semibold leading-5">Option</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
<div v-if="this.customColumns[0]?.optionArr.length > 0"
|
||||
class="flex flex-row overflow-auto break-normal w-[350px] gap-1 flex-wrap h-auto">
|
||||
<div v-for="(option, index) in this.customColumns[0].optionArr" :key="index" class="flex min-w-fit">
|
||||
{{ option + ' |' }}
|
||||
</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 v-else>No number</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<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">Item status</div>
|
||||
<div id="" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumns[0]?.itemStatus || 'No selection' }}
|
||||
</div>
|
||||
</div>
|
||||
<div id="dashed-divider" class="flex h-[1px] py-0 border-dashed border-[1px] border-sn-light-grey"></div>
|
||||
|
||||
<div id="" class="flex flex-col min-min-h-[46px] h-auto gap-[6px]">
|
||||
<div id="" class="flex justify-between">
|
||||
<div class="font-inter text-sm font-semibold leading-5">Sequence</div>
|
||||
<div @click="toggleExpandSequence" class="font-inter text-sm font-normal leading-5 text-sn-blue cursor-pointer">
|
||||
{{ this.sequenceExpanded ? 'Hide' : 'Show' }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
id="sequence-container"
|
||||
class="text-sn-dark-grey font-inter text-sm font-normal leading-5 flex flex-row overflow-auto break-normal w-[350px] h-[60px] gap-1 flex-wrap">
|
||||
{{ this.customColumns[0]?.sequence || 'No text' }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- end of custom columns -->
|
||||
</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 v-else id="custom-columns-value" class="text-sn-dark-grey font-inter text-sm font-normal leading-5">
|
||||
{{ this.customColumnsFallback }}
|
||||
</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] gap-[6px]">
|
||||
<div id="assigned-label" class="font-inter text-base font-semibold leading-7">Assigned (3)</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>
|
||||
|
||||
<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>
|
||||
|
||||
|
|
@ -287,6 +253,14 @@
|
|||
data() {
|
||||
// using dummy data for now
|
||||
return {
|
||||
repositoryRow: {
|
||||
name: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et ma',
|
||||
repository_name: 'Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus etma',
|
||||
code: 'IT32823',
|
||||
added_on: '27 June 2023',
|
||||
added_by: 'Alexander Cansbridge',
|
||||
archived: false,
|
||||
},
|
||||
customColumns: [{
|
||||
solventStock: '120 mL',
|
||||
itemsInWarehouse: true,
|
||||
|
|
@ -307,12 +281,6 @@
|
|||
}],
|
||||
isShowing: false,
|
||||
sequenceExpanded: false,
|
||||
title: 'DNA sample 01',
|
||||
subtitle: 'subtitle',
|
||||
inventory: 'Sample',
|
||||
itemId: 'IT32823',
|
||||
addedOn: '27 June 2023',
|
||||
addedBy: 'Alexander Cansbridge',
|
||||
customColumnsFallback: 'No custom columns',
|
||||
assigned: 'Assigned to 3 private tasks that will not be displayed'
|
||||
}
|
||||
|
|
@ -344,6 +312,14 @@
|
|||
delete window.repositoryItemSidebarComponent;
|
||||
},
|
||||
computed: {
|
||||
defaultColumns() {
|
||||
return [
|
||||
{ label: I18n.t('repositories.item_card.default.repository_name'), value: this.repositoryRow.repository_name },
|
||||
{ label: I18n.t('repositories.item_card.default.id'), value: this.repositoryRow.code },
|
||||
{ label: I18n.t('repositories.item_card.default.added_on'), value: this.repositoryRow.added_on },
|
||||
{ label: I18n.t('repositories.item_card.default.added_by'), value: this.repositoryRow.added_by }
|
||||
]
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// component is currently shown/hidden by calling window.repositoryItemSidebarComponent.toggleShowHideSidebar()
|
||||
|
|
@ -397,4 +373,4 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@
|
|||
<div
|
||||
id="repositoryItemSidebar"
|
||||
data-behaviour="vue"
|
||||
class='bg-white fixed top-0 right-0 h-screen w-[565px] overflow-scroll 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] overflow-auto gap-2.5 self-stretch z-[9999] rounded-tl-4 rounded-bl-4 transition-transform ease-in-out transform translate-x-full'>
|
||||
<repository-item-sidebar />
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -2106,6 +2106,15 @@ en:
|
|||
invalid_arguments: "Can't find %{key}"
|
||||
my_module_assigned_snapshot_service:
|
||||
invalid_arguments: "Can't find %{key}"
|
||||
item_card:
|
||||
title:
|
||||
information: "Information"
|
||||
default:
|
||||
repository_name: "Inventory"
|
||||
id: "Item ID"
|
||||
added_on: "Added on"
|
||||
added_at: "Added at"
|
||||
added_by: 'Added by'
|
||||
repository_stock_values:
|
||||
manage_modal:
|
||||
title: "Stock %{item}"
|
||||
|
|
|
|||
Loading…
Reference in a new issue