scinote-eln/scinote-web
1
1
Fork 0
mirror of https://github.com/scinote-eln/scinote-web.git synced 2024-09-20 14:45:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

(dev) Placeholder for new import modal [SCI-10494]

Browse source
This commit is contained in:
Martin Artnik 2024-04-08 11:35:41 +02:00
parent eeffe05c53
commit 743d0f57b7
10 changed files with 73 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
app/assets/javascripts/repositories/show.js
View file

@ -87,9 +87,7 @@
function initImportRecordsModal() {
$('.repository-show').on('click', '#importRecordsButton', function() {
$('#modal-import-records').modal('show');
$('#modal-import-records').find('#file').val('');
initParseRecordsModal();
window.importRepositoryModalComponent.open();
});
// Handling cancel click in #modal-import-records

20
app/javascript/packs/vue/design_system/modals.js
View file

@ -28,19 +28,19 @@ const app = createApp({
steps: [
{
id: 'step1',
icon: 'sn-icon sn-icon-open',
icon: 'sn-icon-open',
label: 'Step 1',
component: shallowRef(Step1)
},
{
id: 'step2',
icon: 'sn-icon sn-icon-edit',
icon: 'sn-icon-edit',
label: 'Step 2',
component: shallowRef(Step2)
},
{
id: 'step3',
icon: 'sn-icon sn-icon-inventory',
icon: 'sn-icon-inventory',
label: 'Step 3',
component: shallowRef(Step3)
}
@ -53,37 +53,37 @@ const app = createApp({
// Info modal
infoParams: {
componentTitle: 'Guide for updating the inventory',
title: 'Guide for updating the inventory',
modalTitle: 'Update inventory',
helpText: 'Help',
elements: [
steps: [
{
id: 'el1',
icon: 'sn-icon sn-icon-export',
icon: 'sn-icon-export',
label: 'Export inventory',
subtext: "Before making edits, we advise you to export the latest inventory information. If you're only adding new items, consider exporting empty inventory."
},
{
id: 'el2',
icon: 'sn-icon sn-icon-edit',
icon: 'sn-icon-edit',
label: 'Edit your data',
subtext: 'Make sure to include header names in first row, followed by item data.'
},
{
id: 'el3',
icon: 'sn-icon sn-icon-import',
icon: 'sn-icon-import',
label: 'Import new or update items',
subtext: 'Upload your data using .xlsx, .csv or .txt files.'
},
{
id: 'el4',
icon: 'sn-icon sn-icon-tables',
icon: 'sn-icon-tables',
label: 'Merge your data',
subtext: 'Complete the process by merging the columns you want to update.'
},
{
id: 'el5',
icon: 'sn-icon sn-icon-open',
icon: 'sn-icon-open',
label: 'Learn more',
linkTo: 'https://knowledgebase.scinote.net/en/knowledge/how-to-add-items-to-an-inventory'
}

16
app/javascript/vue/shared/info_component.vue
View file

@ -1,25 +1,25 @@
<template>
<div class="!w-[300px] rounded bg-sn-super-light-grey gap-4 p-6 flex flex-col h-full">
<div id="info-component-header">
<h3 class="modal-title text-sn-dark-grey">{{ params.componentTitle }}</h3>
<h3 class="modal-title text-sn-dark-grey">{{ params.title }}</h3>
</div>
<div class="grid grid-flow-row h-fit" v-for="(step, _index) in params.elements" :key="step.id">
<a v-if="step.linkTo" :href="step.linkTo" target="_blank" class="flex flex-row gap-3 w-fit text-sn-blue hover:no-underline hover:text-sn-blue-hover">
<div class="grid grid-flow-row h-fit" v-for="(element, _index) in params.elements" :key="element.id">
<a v-if="element.linkTo" :href="element.linkTo" target="_blank" class="flex flex-row gap-3 w-fit text-sn-blue hover:no-underline hover:text-sn-blue-hover">
<button class="btn btn-secondary btn-sm icon-btn hover:!border-sn-light-grey">
<i :class="step.icon" class="h-fit"></i>
<i :class="element.icon" class="h-fit"></i>
</button>
<div class="flex flex-col gap-2 w-fit">
<div class="text-sn-blue font-bold hover:text-sn-blue-hover my-auto">{{ step.label }}</div>
<div class="text-sn-blue font-bold hover:text-sn-blue-hover my-auto">{{ element.label }}</div>
</div>
</a>
<div v-else class="flex flex-row gap-3">
<button class="btn btn-secondary btn-sm icon-btn hover:!border-sn-light-grey hover:cursor-auto">
<i :class="step.icon" class="h-fit text-sn-dark-grey size-9"></i>
<i :class="`sn-icon ${element.icon}`" class="h-fit text-sn-dark-grey size-9"></i>
</button>
<div class="flex flex-col gap-2 w-52">
<div class="text-sn-dark-grey font-bold">{{ step.label }}</div>
<div class="text-sn-dark-grey">{{ step.subtext }}</div>
<div class="text-sn-dark-grey font-bold">{{ element.label }}</div>
<div class="text-sn-dark-grey">{{ element.subtext }}</div>
</div>
</div>
</div>

18
app/javascript/vue/shared/info_modal.vue
View file

@ -7,7 +7,7 @@
<div id="info-part">
<info-component
v-if="showingInfo"
:params="this.params"
:params="this.infoParams"
/>
</div>
<!-- content -->
@ -15,10 +15,10 @@
<!-- header -->
<div id="info-modal-header" class="flex flex-row h-fit w-full justify-between">
<div id="title-with-help" class="flex flex-row gap-3">
<h3 class="modal-title text-sn-dark-grey">{{ params.modalTitle }}</h3>
<h3 class="modal-title text-sn-dark-grey">{{ title }}</h3>
<button class="btn btn-light btn-sm" @click="showingInfo = !showingInfo">
<i class="sn-icon sn-icon-help-s"></i>
{{ params.helpText }}
{{ helpText }}
</button>
</div>
<button id="close-btn" type="button" class="close my-auto" data-dismiss="modal" aria-label="Close">
@ -43,9 +43,19 @@ import InfoComponent from './info_component.vue';
export default {
name: 'InfoModal',
props: {
params: {
title: {
type: String, required: true
},
helpText: {
type: String, required: true
},
infoParams: {
type: Object,
required: true
},
startHidden: {
type: Boolean,
default: false
}
},
mixins: [modalMixin],

9
app/javascript/vue/shared/modal_mixin.js
View file

@ -1,6 +1,9 @@
export default {
mounted() {
$(this.$refs.modal).modal('show');
if (!this.startHidden) {
$(this.$refs.modal).modal('show');
}
this.$refs.input?.focus();
$(this.$refs.modal).on('hidden.bs.modal', () => {
this.$emit('close');
@ -13,6 +16,10 @@ export default {
close() {
this.$emit('close');
$(this.$refs.modal).modal('hide');
},
open() {
this.$emit('open');
$(this.$refs.modal).modal('show');
}
},
}

2
app/views/design_elements/_modals.html.erb
View file

@ -17,7 +17,7 @@
<info-modal
v-if="showInfo"
@close="showInfo = false"
:params="infoParams"
:infoParams="infoParams"
>
<div>I am a component that gets consumed by the slot</div>
</info-modal>

4
app/views/repositories/_toolbar_buttons.html.erb
View file

@ -22,7 +22,7 @@
class="btn btn-light editImport auto-shrink-button"
id="importRecordsButton" data-view-mode="active">
<span class="sn-icon sn-icon-import"></span>
<span class="button-text"><%= t('repositories.index.options_dropdown.import_items') %></span>
<span class="button-text"><%= t('repositories.import_records.update_inventory') %></span>
</button>
<% end %>
@ -57,7 +57,7 @@
<div class="toolbar-middle-block">
<div id='repositoryStateMenu' data-behaviour="vue">
<repository-state-menu
view-mode="<%= view_mode %>"
view-mode="<%= params[:archived] %>"
active-url="<%= repository_url(@repository) %>"
archived-url="<%= repository_url(@repository, params: { archived: true }) %>">
</repository-state-menu>

4
app/views/repositories/show.html.erb
View file

@ -79,9 +79,13 @@
<%= render partial: 'repository_filters' %>
<%= render partial: 'save_repository_filter_modal' %>
<div id="importRepositoryModal" data-behaviour="vue">
<import-repository-modal repositoryUrl="<%= repository_path(@repository) %>" />
</div>
<%= javascript_include_tag 'vue_components_action_toolbar' %>
<%= javascript_include_tag 'vue_repository_search' %>
<%= javascript_include_tag 'vue_import_repository_modal' %>
<%= javascript_include_tag 'repositories/repository_datatable' %>
<%= javascript_include_tag "repositories/show" %>
<%= javascript_include_tag 'inputmask' %>

24
config/locales/en.yml
View file

@ -2134,6 +2134,30 @@ en:
list_row: "Row %{row}"
list_error: "%{key}: %{val}"
import_records:
update_inventory: 'Update inventory'
info_sidebar:
title: 'Guide for updating the inventory'
elements:
element0:
icon: 'sn-icon-export'
label: 'Export inventory'
subtext: "Before making edits, we advise you to export the latest inventory information. If you're only adding new items, consider exporting empty inventory."
element1:
icon: 'sn-icon-edit'
label: 'Edit your data'
subtext: 'Make sure to include header names in first row, followed by item data.'
element2:
icon: 'sn-icon-import'
label: 'Import new or update items'
subtext: 'Upload your data using .xlsx, .csv or .txt files.'
element3:
icon: 'sn-icon-tables'
label: 'Merge your data'
subtext: 'Complete the process by merging the columns you want to update.'
element4:
icon: 'sn-icon-open'
label: 'Learn more'
linkTo: 'https://knowledgebase.scinote.net/en/knowledge/how-to-add-items-to-an-inventory'
import: 'Import'
no_header_name: 'No column name'
success_flash: "%{number_of_rows} of %{total_nr} new item(s) successfully imported."

1
config/webpack/webpack.config.js
View file

@ -55,6 +55,7 @@ const entryList = {
vue_design_system_select: './app/javascript/packs/vue/design_system/select.js',
vue_protocols_list: './app/javascript/packs/vue/protocols_list.js',
vue_repositories_table: './app/javascript/packs/vue/repositories_table.js',
vue_import_repository_modal: './app/javascript/packs/vue/import_repository_modal.js',
vue_reports_table: './app/javascript/packs/vue/reports_table.js',
vue_open_locally_menu: './app/javascript/packs/vue/open_locally_menu.js',
vue_scinote_edit_download: './app/javascript/packs/vue/scinote_edit_download.js',