2
0
mirror of https://github.com/frappe/books.git synced 2024-12-23 11:29:03 +00:00

feat: add a 'how to' component

- to be used in place of the empty state
This commit is contained in:
18alantom 2022-02-25 12:07:15 +05:30
parent 478e48eac9
commit f87da9a6ef
2 changed files with 49 additions and 1 deletions

38
src/components/HowTo.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<button
@click="openHelpLink"
class="
text-gray-900
shadow-md
px-3
py-2
flex
items-center
mb-3
z-10
bg-white
rounded-lg
text-base
"
>
<FeatherIcon class="h-6 w-6 mr-3 text-blue-400" name="help-circle" />
<p class="mr-1"><slot></slot></p>
</button>
</template>
<script>
import { IPC_MESSAGES } from '@/messages';
import { ipcRenderer } from 'electron';
import FeatherIcon from './FeatherIcon.vue';
export default {
props: {
link: String,
},
methods: {
openHelpLink() {
ipcRenderer.send(IPC_MESSAGES.OPEN_EXTERNAL, this.link);
},
},
components: { FeatherIcon },
};
</script>

View File

@ -144,7 +144,7 @@
>
<div
v-for="(f, k) in importer.assignableLabels"
:key="'assigner-' + k"
:key="'assigner-' + f + '-' + k"
>
<p class="text-gray-600 text-sm mb-1">
{{ f }}
@ -304,6 +304,14 @@
}}</Button>
</div>
</div>
<div
v-if="!importType"
class="flex justify-center h-full items-center mb-16"
>
<HowTo link="https://youtu.be/ukHAgcnVxTQ">
{{ t`How to Use Data Import?` }}
</HowTo>
</div>
</div>
</template>
<script>
@ -311,6 +319,7 @@ import Button from '@/components/Button.vue';
import FormControl from '@/components/Controls/FormControl';
import DropdownWithActions from '@/components/DropdownWithActions.vue';
import FeatherIcon from '@/components/FeatherIcon.vue';
import HowTo from '@/components/HowTo.vue';
import PageHeader from '@/components/PageHeader.vue';
import { importable, Importer } from '@/dataImport';
import { IPC_ACTIONS } from '@/messages';
@ -324,6 +333,7 @@ export default {
Button,
DropdownWithActions,
FeatherIcon,
HowTo,
},
data() {
return {