accounting/books
2
0
Fork 0
mirror of https://github.com/frappe/books.git synced 2025-02-02 20:18:26 +00:00
Code Issues Releases Activity

incr: use form container for form-ish layouts

Browse Source
This commit is contained in:
18alantom 2022-05-31 15:19:28 +05:30
parent b8cfddedaf
commit 97d2885475
4 changed files with 79 additions and 85 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

35
src/components/FormContainer.vue Normal file
View File

@ -0,0 +1,35 @@
<template>
<div class="flex flex-col">
<!-- Page Header (Title, Buttons, etc) -->
<PageHeader :backLink="backLink" :title="title">
<slot name="header" />
</PageHeader>
<!-- Invoice Form -->
<div
class="
border
rounded-lg
shadow
flex flex-col
self-center
w-form
h-full
my-4
bg-white
"
>
<slot name="body" />
</div>
</div>
</template>
<script>
import PageHeader from './PageHeader.vue';
export default {
components: { PageHeader },
props: {
backLink: { type: Boolean, default: false },
title: { type: String, default: '' },
},
};
</script>

33
src/pages/InvoiceForm.vue
View File

@ -1,7 +1,7 @@
<template> <template>
<div class="flex flex-col" v-if="doc"> <FormContainer :backLink="true">
<!-- Page Header (Title, Buttons, etc) --> <!-- Page Header (Title, Buttons, etc) -->
<PageHeader :backLink="true"> <template #header v-if="doc">
<StatusBadge :status="status" /> <StatusBadge :status="status" />
<Button <Button
v-if="doc?.submitted" v-if="doc?.submitted"
@ -27,23 +27,10 @@
@click="submit" @click="submit"
>{{ t`Submit` }}</Button >{{ t`Submit` }}</Button
> >
</PageHeader> </template>
<!-- Invoice Form --> <!-- Invoice Form -->
<div <template #body v-if="doc">
class="
border
rounded-lg
shadow
h-full
flex flex-col
mt-2
self-center
w-form
h-form
"
v-if="doc"
>
<div class="p-4 text-2xl font-semibold flex justify-between"> <div class="p-4 text-2xl font-semibold flex justify-between">
<h1> <h1>
{{ doc.notInserted ? t`New Entry` : doc.name }} {{ doc.notInserted ? t`New Entry` : doc.name }}
@ -180,8 +167,8 @@
</div> </div>
</div> </div>
</div> </div>
</div> </template>
</div> </FormContainer>
</template> </template>
<script> <script>
import { computed } from '@vue/reactivity'; import { computed } from '@vue/reactivity';
@ -191,7 +178,7 @@ import Button from 'src/components/Button.vue';
import FormControl from 'src/components/Controls/FormControl.vue'; import FormControl from 'src/components/Controls/FormControl.vue';
import Table from 'src/components/Controls/Table.vue'; import Table from 'src/components/Controls/Table.vue';
import DropdownWithActions from 'src/components/DropdownWithActions.vue'; import DropdownWithActions from 'src/components/DropdownWithActions.vue';
import PageHeader from 'src/components/PageHeader.vue'; import FormContainer from 'src/components/FormContainer.vue';
import StatusBadge from 'src/components/StatusBadge.vue'; import StatusBadge from 'src/components/StatusBadge.vue';
import { fyo } from 'src/initFyo'; import { fyo } from 'src/initFyo';
import { import {
@ -206,12 +193,12 @@ export default {
name: 'InvoiceForm', name: 'InvoiceForm',
props: { schemaName: String, name: String }, props: { schemaName: String, name: String },
components: { components: {
PageHeader,
StatusBadge, StatusBadge,
Button, Button,
FormControl, FormControl,
DropdownWithActions, DropdownWithActions,
Table, Table,
FormContainer,
}, },
provide() { provide() {
return { return {
@ -245,9 +232,7 @@ export default {
await this.handleError(error); await this.handleError(error);
} }
this.printSettings = await fyo.doc.getDoc('PrintSettings'); this.printSettings = await fyo.doc.getDoc('PrintSettings');
this.companyName = ( this.companyName = (await fyo.doc.getDoc('AccountingSettings')).companyName;
await fyo.doc.getDoc('AccountingSettings')
).companyName;
let query = this.$route.query; let query = this.$route.query;
if (query.values && query.schemaName === this.schemaName) { if (query.values && query.schemaName === this.schemaName) {

72
src/pages/JournalEntryForm.vue
View File

@ -1,43 +1,29 @@
<template> <template>
<div class="flex flex-col"> <FormContainer :backLink="true">
<!-- Page Header (Title, Buttons, etc) --> <!-- Page Header (Title, Buttons, etc) -->
<PageHeader :backLink="true"> <template #header v-if="doc">
<template v-if="doc"> <StatusBadge :status="status" />
<StatusBadge :status="status" /> <DropdownWithActions :actions="actions" />
<DropdownWithActions :actions="actions" /> <Button
<Button v-if="doc?.notInserted || doc?.dirty"
v-if="doc?.notInserted || doc?.dirty" type="primary"
type="primary" class="text-white text-xs"
class="text-white text-xs" @click="sync"
@click="sync" >
> {{ t`Save` }}
{{ t`Save` }} </Button>
</Button> <Button
<Button v-else-if="!doc.dirty && !doc.notInserted && !doc.submitted"
v-else-if="!doc.dirty && !doc.notInserted && !doc.submitted" type="primary"
type="primary" class="text-white text-xs"
class="text-white text-xs" @click="submit"
@click="submit" >
> {{ t`Submit` }}
{{ t`Submit` }} </Button>
</Button> </template>
</template>
</PageHeader>
<!-- Journal Entry Form --> <!-- Journal Entry Form -->
<div <template #body v-if="doc">
class="
self-center
border
rounded-lg
shadow
flex flex-col
mt-2
w-form
h-form
"
v-if="doc"
>
<div class="p-4 text-2xl font-semibold flex justify-between"> <div class="p-4 text-2xl font-semibold flex justify-between">
<h1> <h1>
{{ doc.notInserted ? t`New Entry` : doc.name }} {{ doc.notInserted ? t`New Entry` : doc.name }}
@ -139,18 +125,18 @@
</div> </div>
</div> </div>
</div> </div>
</div> </template>
</div> </FormContainer>
</template> </template>
<script> <script>
import { computed } from '@vue/reactivity'; import { computed } from '@vue/reactivity';
import { ModelNameEnum } from 'models/types'; import { ModelNameEnum } from 'models/types';
import Button from 'src/components/Button'; import Button from 'src/components/Button.vue';
import FormControl from 'src/components/Controls/FormControl.vue'; import FormControl from 'src/components/Controls/FormControl.vue';
import Table from 'src/components/Controls/Table.vue'; import Table from 'src/components/Controls/Table.vue';
import DropdownWithActions from 'src/components/DropdownWithActions'; import DropdownWithActions from 'src/components/DropdownWithActions.vue';
import PageHeader from 'src/components/PageHeader'; import FormContainer from 'src/components/FormContainer.vue';
import StatusBadge from 'src/components/StatusBadge'; import StatusBadge from 'src/components/StatusBadge.vue';
import { fyo } from 'src/initFyo'; import { fyo } from 'src/initFyo';
import { import {
getActionsForDocument, getActionsForDocument,
@ -163,12 +149,12 @@ export default {
name: 'JournalEntryForm', name: 'JournalEntryForm',
props: ['name'], props: ['name'],
components: { components: {
PageHeader,
Button, Button,
DropdownWithActions, DropdownWithActions,
StatusBadge, StatusBadge,
FormControl, FormControl,
Table, Table,
FormContainer,
}, },
provide() { provide() {
return { return {

24
src/pages/Settings/Settings.vue
View File

@ -1,20 +1,6 @@
<template> <template>
<div class="flex flex-col overflow-hidden"> <FormContainer :title="t`Settings`">
<PageHeader :title="t`Settings`" /> <template #body>
<div
class="
border
rounded-lg
shadow
h-full
flex flex-col
justify-between
self-center
mt-2
w-form
h-form
"
>
<!-- Icon Tab Bar --> <!-- Icon Tab Bar -->
<div class="flex justify-around mb-4 mt-6"> <div class="flex justify-around mb-4 mt-6">
<div <div
@ -39,13 +25,14 @@
<div class="flex-1 overflow-y-auto"> <div class="flex-1 overflow-y-auto">
<component :is="activeTabComponent" @change="handleChange" /> <component :is="activeTabComponent" @change="handleChange" />
</div> </div>
</div> </template>
</div> </FormContainer>
</template> </template>
<script> <script>
import { ipcRenderer } from 'electron'; import { ipcRenderer } from 'electron';
import { t } from 'fyo'; import { t } from 'fyo';
import Button from 'src/components/Button.vue'; import Button from 'src/components/Button.vue';
import FormContainer from 'src/components/FormContainer.vue';
import Icon from 'src/components/Icon.vue'; import Icon from 'src/components/Icon.vue';
import PageHeader from 'src/components/PageHeader.vue'; import PageHeader from 'src/components/PageHeader.vue';
import Row from 'src/components/Row.vue'; import Row from 'src/components/Row.vue';
@ -64,6 +51,7 @@ export default {
StatusBadge, StatusBadge,
Button, Button,
Row, Row,
FormContainer,
}, },
data() { data() {
return { return {