mirror of
https://github.com/scinote-eln/scinote-web.git
synced 2025-03-07 05:03:26 +08:00
(dev) Create info modal attached to update inventory modal [SCI-10493]
This commit is contained in:
Gregor Lasnibat
parent
8b815ca15d
commit
1525d82425
4 changed files with 167 additions and 9 deletions
|
|
@ -2,6 +2,7 @@ import { createApp } from 'vue/dist/vue.esm-bundler.js';
|
|||
import { shallowRef } from 'vue';
|
||||
|
||||
import WizardModal from '../../../vue/shared/wizard_modal.vue';
|
||||
import InfoModal from '../../../vue/shared/info_modal.vue';
|
||||
import Step1 from './wizard_steps/step_1.vue';
|
||||
import Step2 from './wizard_steps/step_2.vue';
|
||||
import Step3 from './wizard_steps/step_3.vue';
|
||||
|
|
@ -20,6 +21,7 @@ const app = createApp({
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
// Wizard modal
|
||||
wizardConfig: {
|
||||
title: 'Wizard steps',
|
||||
subtitle: 'Wizard subtitle description',
|
||||
|
|
@ -47,10 +49,51 @@ const app = createApp({
|
|||
wizardParams: {
|
||||
text: 'Some text'
|
||||
},
|
||||
showWizard: false
|
||||
showWizard: false,
|
||||
|
||||
// Info modal
|
||||
infoParams: {
|
||||
componentTitle: 'Guide for updating the inventory',
|
||||
modalTitle: 'Update inventory',
|
||||
helpText: 'Help',
|
||||
elements: [
|
||||
{
|
||||
id: 'el1',
|
||||
icon: 'sn-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',
|
||||
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',
|
||||
label: 'Import new or update items',
|
||||
subtext: 'Upload your data using .xlsx, .csv or .txt files.'
|
||||
},
|
||||
{
|
||||
id: 'el4',
|
||||
icon: 'sn-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',
|
||||
label: 'Learn more',
|
||||
linkTo: 'https://knowledgebase.scinote.net/en/knowledge/how-to-add-items-to-an-inventory'
|
||||
}
|
||||
]
|
||||
},
|
||||
showInfo: false
|
||||
};
|
||||
}
|
||||
});
|
||||
app.component('WizardModal', WizardModal);
|
||||
app.component('InfoModal', InfoModal);
|
||||
app.config.globalProperties.i18n = window.I18n;
|
||||
mountWithTurbolinks(app, '#modals');
|
||||
|
|
|
|||
39
app/javascript/vue/shared/info_component.vue
Normal file
39
app/javascript/vue/shared/info_component.vue
Normal file
|
|
@ -0,0 +1,39 @@
|
|||
<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>
|
||||
</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">
|
||||
<button class="btn btn-secondary btn-sm icon-btn hover:!border-sn-light-grey">
|
||||
<i :class="step.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>
|
||||
</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>
|
||||
</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>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'InfoComponent',
|
||||
props: {
|
||||
params: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
61
app/javascript/vue/shared/info_modal.vue
Normal file
61
app/javascript/vue/shared/info_modal.vue
Normal file
|
|
@ -0,0 +1,61 @@
|
|||
<template>
|
||||
<div ref="modal" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
|
||||
<div class="modal-dialog" role="document" :class="[{'!w-[900px]' : showingInfo}, {'!w-[600px]' : !showingInfo}]">
|
||||
<div class="modal-content !p-0 bg-sn-white w-full h-full flex" :class="[{'flex-row': showingInfo}, {'flex-col': !showingInfo}]">
|
||||
<div id="body-container" class="flex flex-row w-full h-full">
|
||||
<!-- info -->
|
||||
<div id="info-part">
|
||||
<info-component
|
||||
v-if="showingInfo"
|
||||
:params="this.params"
|
||||
/>
|
||||
</div>
|
||||
<!-- content -->
|
||||
<div id="content-part" class="flex flex-col w-full p-6 gap-3">
|
||||
<!-- 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>
|
||||
<button class="btn btn-light btn-sm" @click="showingInfo = !showingInfo">
|
||||
<i class="sn-icon sn-icon-help-s"></i>
|
||||
{{ params.helpText }}
|
||||
</button>
|
||||
</div>
|
||||
<button id="close-btn" type="button" class="close my-auto" data-dismiss="modal" aria-label="Close">
|
||||
<i class="sn-icon sn-icon-close"></i>
|
||||
</button>
|
||||
</div>
|
||||
<!-- main content -->
|
||||
<div id="info-modal-main-content">
|
||||
<slot></slot>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import modalMixin from './modal_mixin';
|
||||
import InfoComponent from './info_component.vue';
|
||||
|
||||
export default {
|
||||
name: 'InfoModal',
|
||||
props: {
|
||||
params: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
mixins: [modalMixin],
|
||||
components: {
|
||||
'info-component': InfoComponent
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showingInfo: true
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,15 +1,30 @@
|
|||
<div>
|
||||
<h1>Modals</h1>
|
||||
<div id="modals" class="flex items-center gap-4 flex-wrap mb-6">
|
||||
<button @click="showWizard = true" class="btn btn-primary">Show Wizard Modal</button>
|
||||
<wizard-modal
|
||||
v-if="showWizard"
|
||||
@close="showWizard = false"
|
||||
@alert="fireAlert"
|
||||
:params="wizardParams"
|
||||
:config="wizardConfig"
|
||||
/>
|
||||
<div ref="wizardModal">
|
||||
<button @click="showWizard = true" class="btn btn-primary">Show Wizard Modal</button>
|
||||
<wizard-modal
|
||||
v-if="showWizard"
|
||||
@close="showWizard = false"
|
||||
@alert="fireAlert"
|
||||
:params="wizardParams"
|
||||
:config="wizardConfig"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div ref="infoModal">
|
||||
<button @click="showInfo = true" class="btn btn-primary">Show Info Modal</button>
|
||||
<info-modal
|
||||
v-if="showInfo"
|
||||
@close="showInfo = false"
|
||||
:params="infoParams"
|
||||
>
|
||||
<div>I am a component that gets consumed by the slot</div>
|
||||
</info-modal>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</div>
|
||||
|
||||
|
||||
|
|
|
|||
Loading…
Reference in a new issue