scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2025-10-25 13:37:12 +08:00
Code Issues Projects Releases Packages Wiki Activity

Add qr code and print label to item card [SCI-9471 (#6364)

Browse source 
* Add qr acode and print label to item card [SCI-9471

* Remove jQuery handler for setting barcode image src [SCI-9471]
This commit is contained in:
wandji 2023-10-12 14:10:54 +01:00 • committed by GitHub
parent 357eebee40
commit 45cfe77ef7
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
2 changed files with 21 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

34
app/javascript/vue/repository_item_sidebar/RepositoryItemSidebar.vue
View file

@ -8,7 +8,7 @@
<div id="sticky-header-wrapper"> <div id="sticky-header-wrapper">
<div class="header flex w-full"> <div class="header flex w-full">
<h4 class="item-name my-auto truncate" :title="defaultColumns?.name"> <h4 class="item-name my-auto truncate" :title="defaultColumns?.name">
{{ !defaultColumns?.archived ? i18n.t('labels.archived') : '' }} {{ defaultColumns?.archived ? i18n.t('labels.archived') : '' }}
{{ defaultColumns?.name }} {{ defaultColumns?.name }}
</h4> </h4>
<i id="close-icon" @click="toggleShowHideSidebar(currentItemUrl)" <i id="close-icon" @click="toggleShowHideSidebar(currentItemUrl)"
@ -30,9 +30,9 @@
<div id="information"> <div id="information">
<div ref="information-label" id="information-label" <div ref="information-label" id="information-label"
class="font-inter text-base font-semibold leading-7 mb-4 transition-colors duration-300">{{ class="font-inter text-base font-semibold leading-7 mb-4 transition-colors duration-300">{{
i18n.t('repositories.item_card.title.information') }} i18n.t('repositories.item_card.section.information') }}
</div> </div>
<div class="item-details"> <div>
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
<!-- REPOSITORY NAME --> <!-- REPOSITORY NAME -->
<div class="flex flex-col "> <div class="flex flex-col ">
@ -148,12 +148,13 @@
<div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div> <div id="divider" class="w-500 bg-sn-light-grey flex px-8 items-center self-stretch h-px "></div>
<!-- QR --> <!-- QR -->
<div id="QR-wrapper" class="block"> <section id="qr-wrapper">
<div ref="QR-label" id="QR-label" <div class="font-inter text-base font-semibold leading-7 mb-4 mt-0">{{ i18n.t('repositories.item_card.section.qr') }}</div>
class="font-inter text-base font-semibold leading-7 mb-4 transition-colors duration-300">QR</div> <div class="bar-code-container">
<canvas id="bar-code-canvas" class="hidden"></canvas> <canvas id="bar-code-canvas" class="hidden"></canvas>
<img :src="barCodeSrc" /> <img :src="barCodeSrc" />
</div> </div>
</section>
</div> </div>
</div> </div>
@ -170,10 +171,12 @@
</div> </div>
<!-- BOTTOM --> <!-- BOTTOM -->
<div id="bottom" class="h-[100px] flex flex-col justify-end" :class="{ 'pb-6': customColumns?.length }"> <div id="bottom" class="h-[100px] flex flex-col justify-end mt-4" :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="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 id="bottom-button-wrapper" class="flex h-10 justify-end">
<button class="btn btn-primary">Print Label</button> <button type="button" class="btn btn-primary print-label-button" :data-rows="JSON.stringify([repositoryRowId])">
{{ i18n.t('repositories.item_card.print_label') }}
</button>
</div> </div>
</div> </div>
@ -221,12 +224,12 @@ export default {
return { return {
currentItemUrl: null, currentItemUrl: null,
dataLoading: false, dataLoading: false,
repositoryRowId: null,
repository: null, repository: null,
defaultColumns: null, defaultColumns: null,
customColumns: null, customColumns: null,
assignedModules: null, assignedModules: null,
isShowing: false, isShowing: false,
assigned: 'Assigned to 3 private tasks that will not be displayed',
barCodeSrc: null, barCodeSrc: null,
permissions: null permissions: null
} }
@ -272,7 +275,7 @@ export default {
url: repositoryRowUrl, url: repositoryRowUrl,
dataType: 'json', dataType: 'json',
success: (result) => { success: (result) => {
this.repositoryRowId = result.id this.repositoryRowId = result.id;
this.repository = result.repository; this.repository = result.repository;
this.defaultColumns = result.default_columns; this.defaultColumns = result.default_columns;
this.customColumns = result.custom_columns; this.customColumns = result.custom_columns;
@ -286,14 +289,13 @@ export default {
}); });
}, },
generateBarCode(text) { generateBarCode(text) {
if (!text) return if(!text) return;
// generate the QR code
const barCodeCanvas = bwipjs.toCanvas('bar-code-canvas', { const barCodeCanvas = bwipjs.toCanvas('bar-code-canvas', {
bcid: 'qrcode', bcid: 'qrcode',
text, text,
scale: 3 scale: 3
}); });
this.barCodeSrc = barCodeCanvas.toDataURL('image/png') this.barCodeSrc = barCodeCanvas.toDataURL('image/png');
}, },
privateModuleSize() { privateModuleSize() {
return this.assignedModules.total_assigned_size - this.assignedModules.viewable_modules.length; return this.assignedModules.total_assigned_size - this.assignedModules.viewable_modules.length;

5
config/locales/en.yml
View file

@ -2220,10 +2220,11 @@ en:
my_module_assigned_snapshot_service: my_module_assigned_snapshot_service:
invalid_arguments: "Can't find %{key}" invalid_arguments: "Can't find %{key}"
item_card: item_card:
title:
information: "Information"
section: section:
information: "Information"
assigned: "Assigned (%{count})" assigned: "Assigned (%{count})"
qr: "QR"
print_label: "Print label"
assigned: assigned:
empty: "This item is not assigned to any task." empty: "This item is not assigned to any task."
private: private: