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

72
src/pages/JournalEntryForm.vue
View File

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

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

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