nexus/vuefilemanager
2
0
Fork 0
mirror of https://github.com/VueFileManager/vuefilemanager.git synced 2026-05-15 17:55:02 +00:00
Code Issues Packages Projects Releases Wiki Activity

Mobile optimization

Browse Source
This commit is contained in:
Peter Papp
2021-05-04 16:39:59 +02:00
parent 0332f8b1fb
commit 7cc27938bf
6 changed files with 550 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files
resources/js/Oasis/Invoices/Invoice.vue
+1 -3
View File
@@ -59,9 +59,7 @@
</ContentGroup>
</ContentSidebar>
<keep-alive>
<router-view :class="{'is-scaled-down': isScaledDown}" />
</keep-alive>
<router-view :class="{'is-scaled-down': isScaledDown}" />
</div>
</div>
</template>
resources/js/Oasis/Invoices/Invoices/CreateInvoice.vue
+29 -25
View File
@@ -4,7 +4,7 @@
<PageHeader :title="pageTitle" />
<div id="page-content">
<div class="content-page">
<div class="content-page" v-if="! isLoadingPage">
<ValidationObserver @submit.prevent="createInvoice" ref="createInvoice" v-slot="{ invalid }" tag="form" class="form block-form">
<PageTab>
@@ -183,7 +183,7 @@
<div class="block-wrapper">
<label>Price:</label>
<ValidationProvider tag="div" mode="passive" class="input-wrapper" name="price" rules="required" v-slot="{ errors }">
<input v-model.number="item.price" placeholder="Type the item price..." type="number" step="0.01" :class="{'is-error': errors[0]}" class="focus-border-theme" />
<input v-model.number="item.price" placeholder="Type the item price..." type="text" pattern="[0-9]{1,4}(\.[0-9]{2})?" step="0.01" :class="{'is-error': errors[0]}" class="focus-border-theme" />
<span class="error-message" v-if="errors[0]">{{ errors[0] }}</span>
</ValidationProvider>
</div>
@@ -294,7 +294,7 @@
</div>
</div>
<div class="row row-summary">
<div class="row" :class="{'row-summary': total > 0}">
<div class="cell">
<b>Spolu</b>
</div>
@@ -312,6 +312,9 @@
</div>
</div>
</div>
<div id="loader" v-if="isLoadingPage">
<Spinner />
</div>
</div>
</div>
</template>
@@ -328,6 +331,7 @@
import PageTab from '@/components/Others/Layout/PageTab'
import PageHeader from '@/components/Others/PageHeader'
import InfoBox from '@/components/Others/Forms/InfoBox'
import Spinner from '@/components/FilesView/Spinner'
import {required} from 'vee-validate/dist/rules'
import {XIcon} from 'vue-feather-icons'
import {mapGetters} from 'vuex'
@@ -348,6 +352,7 @@
ButtonBase,
FormLabel,
required,
Spinner,
InfoBox,
PageTab,
XIcon,
@@ -499,9 +504,10 @@
},
data() {
return {
isLoading: true,
isLoadingPage: true,
isLoading: false,
isError: false,
isDiscount: true,
isDiscount: false,
isVatPayer: false,
clients: [],
latestInvoiceNumber: undefined,
@@ -541,23 +547,8 @@
invoice_number: undefined,
variable_number: undefined,
delivery_at: '2021-04-09',
items: [
{
id: 1,
description: 'Item 1',
amount: 2,
tax_rate: 20,
price: 200,
},
{
id: 2,
description: 'Item 2',
amount: 1,
tax_rate: 10,
price: 100,
},
],
discount_type: 'value',
items: [],
discount_type: 'percent',
discount_rate: 10,
client: '0354bab9-1b23-4d17-aa5f-fd8e9aaaf0a2',
client_avatar: '',
@@ -647,7 +638,12 @@
message: 'Invoice was created successfully',
})
// Go to invoice page
// Reload invoices and go to invoice page
this.$store.dispatch({
'regular-invoice': 'getRegularInvoices',
'advance-invoice': 'getAdvanceInvoices',
}[this.invoice.invoice_type])
this.$router.push({name: 'InvoicesList'})
})
.catch(error => {
@@ -681,7 +677,7 @@
id: Math.floor(Math.random() * 10000000),
description: '',
amount: 1,
tax_rate: lastTaxRate?.tax_rate || 0,
tax_rate: lastTaxRate?.tax_rate || 20,
price: 1,
})
@@ -709,7 +705,7 @@
this.latestInvoiceNumber = response.data.latestInvoiceNumber
})
.finally(() => {
this.isLoading = false
this.isLoadingPage = false
})
}
}
@@ -809,4 +805,12 @@
}
}
}
@media only screen and (max-width: 970px) {
.content-page {
grid-template-columns: 1fr;
margin-bottom: 30px;
gap: 0;
}
}
</style>
resources/sass/vuefilemanager/_forms.scss
Vendored
+2 -2
View File
@@ -25,7 +25,7 @@
.wrapper-inline {
display: flex;
margin: 0 -15px;
margin: 0 -15px 32px;
.block-wrapper {
width: 100%;
@@ -34,7 +34,7 @@
}
.block-wrapper {
margin-bottom: 32px;
margin-bottom: 22px;
label {
@include font-size(14);
resources/views/oasis/invoices/invoice.blade.php
+242 -230
View File
@@ -17,260 +17,272 @@
</style>
@else
<link rel="stylesheet" href="{{ public_path('css/oasis-invoice.css') }}">
<style>
.page-break {
page-break-after: always;
page-break-inside: avoid;
}
</style>
@endif
<title>Invoice</title>
</head>
<body>
{{--Invoice header--}}
<header class="invoice-header">
<div class="row">
<div class="col-left">
@if($user->invoiceProfile->logo)
<img class="logo" src="{{ base64_from_storage_image($user->invoiceProfile->logo) }}">
@else
<h1>{{ $user->invoiceProfile->company }}</h1>
@endif
<div class="{{ count($invoice->items) > 8 ? 'page-break' : '' }}">
{{--Invoice header--}}
<header class="invoice-header">
<div class="row">
<div class="col-left">
<b class="email">{{ $user->invoiceProfile->email }}</b>
<b class="phone">{{ $user->invoiceProfile->phone }}</b>
</div>
<div class="col-right align-right">
@if($invoice->invoice_type === 'regular-invoice')
<h1>Faktúra - daňový doklad</h1>
@endif
@if($invoice->invoice_type === 'advance-invoice')
<h1>Faktúra - zálohový doklad</h1>
@endif
<h2>Číslo: {{ $invoice->invoice_number }}</h2>
<h4>Variabilný symbol: {{ $invoice->variable_number }}</h4>
</div>
</div>
</header>
<!--Supplier-->
<section>
<div class="supplier">
<div class="box">
<h3>Odberateľ:</h3>
<p>{{ $invoice->client['name'] }}</p>
<p>{{ $invoice->client['address'] }}, {{ $invoice->client['city'] }}</p>
<p>{{ $invoice->client['postal_code'] }} {{ $invoice->client['country'] }}</p>
<div class="single-row">
<span>
@isset($invoice->client['ico'])
<span class="highlight">IČO</span>: {{ $invoice->client['ico'] }}
@endisset
@isset($invoice->client['dic'])
<span class="highlight">DIČ</span>: {{ $invoice->client['dic'] }}
@endisset
@isset($invoice->client['ic_dph'])
<span class="highlight">IC DPH</span>: {{ $invoice->client['ic_dph'] }}
@endisset
</span>
</div>
</div>
<div class="dates">
<p>Dátum vystavenia: {{ format_date($invoice->created_at, '%d. %B %Y') }}</p>
<p>Dátum dodania: {{ format_date($invoice->delivery_at, '%d. %B %Y') }}</p>
<p>Dátum splatnosti: {{ format_date($invoice->due_at, '%d. %B %Y') }}</p>
</div>
</div>
<div class="content-box">
<h3>Dodávateľ:</h3>
<p style="padding-bottom: 0">{{ $invoice->user['company'] }}</p>
<small>{{ $invoice->user['registration_notes'] }}</small>
</div>
<div class="content-box">
<h3>Sídlo:</h3>
<p>{{ $invoice->user['address'] }} {{ $invoice->user['city'] }}</p>
<p>{{ $invoice->user['postal_code'] }}, {{ $invoice->user['country'] }}</p>
</div>
<div class="content-box" style="padding-bottom: 0px">
<h3>Faktúračné údaje:</h3>
@isset($invoice->user['ico'])
<p>IČO: {{ $invoice->user['ico'] }}</p>
@endisset
@isset($invoice->user['dic'])
<p>DIČ: {{ $invoice->user['dic'] }}</p>
@endisset
@isset($invoice->user['ic_dph'])
<p>IČ DPH: {{ $invoice->user['ic_dph'] }}</p>
@endisset
<p>{{ $invoice->user['bank'] }}</p>
<p>IBAN: {{ $invoice->user['iban'] }}, BIC kód/SWIFT: {{ $invoice->user['swift'] }}</p>
</div>
</section>
{{--Special info--}}
<div class="special-wrapper">
<div class="special-item">
<div class="padding">
<b>Číslo účtu:</b>
<span>{{ $invoice->user['iban'] }}</span>
</div>
</div>
<div class="special-item">
<div class="padding">
<b>Variabilný symbol:</b>
<span>{{ $invoice->variable_number }}</span>
</div>
</div>
<div class="special-item">
<div class="padding">
<b>Dátum splatnosti:</b>
<span>{{ format_date($invoice->due_at, '%d. %h. %Y') }}</span>
</div>
</div>
<div class="special-item">
<div class="padding">
<b>Suma na úhradu:</b>
<span>{{ format_to_currency($invoice->total_net) }}</span>
</div>
</div>
</div>
{{--Items table--}}
<table class="table">
<thead>
<tr class="table-row">
<td class="table-cell">
<span>Názov produktu</span>
</td>
<td class="table-cell">
<span>Množstvo</span>
</td>
<td class="table-cell">
<span>J. Cena</span>
</td>
<td class="table-cell">
<span>Celkom</span>
</td>
@if($invoice->user['ic_dph'])
<td class="table-cell">
<span>Sadzba DPH</span>
</td>
<td class="table-cell">
<span>DPH</span>
</td>
<td class="table-cell">
<span>Celkom s DPH</span>
</td>
@endif
</tr>
</thead>
<tbody>
@foreach($invoice->items as $item)
<tr class="table-row">
<td class="table-cell">
<span style="word-break: break-word">{{ $item['description'] }}</span>
</td>
<td class="table-cell">
<span>{{ $item['amount'] }}</span>
</td>
<td class="table-cell">
<span>{{ format_to_currency($item['price']) }}</span>
</td>
<td class="table-cell">
<span>{{ format_to_currency($item['price'] * $item['amount']) }}</span>
</td>
@if($invoice->user['ic_dph'])
<td class="table-cell">
<span>{{ $item['tax_rate'] }} %</span>
</td>
@if($user->invoiceProfile->logo)
<img class="logo" src="{{ base64_from_storage_image($user->invoiceProfile->logo) }}">
@else
<h1>{{ $user->invoiceProfile->company }}</h1>
@endif
<b class="email">{{ $user->invoiceProfile->email }}</b>
<b class="phone">{{ $user->invoiceProfile->phone }}</b>
</div>
<div class="col-right align-right">
@if($invoice->invoice_type === 'regular-invoice')
<h1>Faktúra - daňový doklad</h1>
@endif
@if($invoice->invoice_type === 'advance-invoice')
<h1>Faktúra - zálohový doklad</h1>
@endif
<h2>Číslo: {{ $invoice->invoice_number }}</h2>
<h4>Variabilný symbol: {{ $invoice->variable_number }}</h4>
</div>
</div>
</header>
<!--Supplier-->
<section>
<div class="supplier">
<div class="box">
<h3>Odberateľ:</h3>
<p>{{ $invoice->client['name'] }}</p>
<p>{{ $invoice->client['address'] }}, {{ $invoice->client['city'] }}</p>
<p>{{ $invoice->client['postal_code'] }} {{ $invoice->client['country'] }}</p>
<div class="single-row">
<span>
@isset($invoice->client['ico'])
<span class="highlight">IČO</span>: {{ $invoice->client['ico'] }}
@endisset
@isset($invoice->client['dic'])
<span class="highlight">DIČ</span>: {{ $invoice->client['dic'] }}
@endisset
@isset($invoice->client['ic_dph'])
<span class="highlight">IC DPH</span>: {{ $invoice->client['ic_dph'] }}
@endisset
</span>
</div>
</div>
<div class="dates">
<p>Dátum vystavenia: {{ format_date($invoice->created_at, '%d. %B %Y') }}</p>
<p>Dátum dodania: {{ format_date($invoice->delivery_at, '%d. %B %Y') }}</p>
<p>Dátum splatnosti: {{ format_date($invoice->due_at, '%d. %B %Y') }}</p>
</div>
</div>
<div class="content-box">
<h3>Dodávateľ:</h3>
<p style="padding-bottom: 0">{{ $invoice->user['company'] }}</p>
<small>{{ $invoice->user['registration_notes'] }}</small>
</div>
<div class="content-box">
<h3>Sídlo:</h3>
<p>{{ $invoice->user['address'] }} {{ $invoice->user['city'] }}</p>
<p>{{ $invoice->user['postal_code'] }}, {{ $invoice->user['country'] }}</p>
</div>
<div class="content-box" style="padding-bottom: 0px">
<h3>Faktúračné údaje:</h3>
@isset($invoice->user['ico'])
<p>IČO: {{ $invoice->user['ico'] }}</p>
@endisset
@isset($invoice->user['dic'])
<p>DIČ: {{ $invoice->user['dic'] }}</p>
@endisset
@isset($invoice->user['ic_dph'])
<p>IČ DPH: {{ $invoice->user['ic_dph'] }}</p>
@endisset
<p>{{ $invoice->user['bank'] }}</p>
<p>IBAN: {{ $invoice->user['iban'] }}, BIC kód/SWIFT: {{ $invoice->user['swift'] }}</p>
</div>
</section>
{{--Special info--}}
<div class="special-wrapper">
<div class="special-item">
<div class="padding">
<b>Číslo účtu:</b>
<span>{{ $invoice->user['iban'] }}</span>
</div>
</div>
<div class="special-item">
<div class="padding">
<b>Variabilný symbol:</b>
<span>{{ $invoice->variable_number }}</span>
</div>
</div>
<div class="special-item">
<div class="padding">
<b>Dátum splatnosti:</b>
<span>{{ format_date($invoice->due_at, '%d. %h. %Y') }}</span>
</div>
</div>
<div class="special-item">
<div class="padding">
<b>Suma na úhradu:</b>
<span>{{ format_to_currency($invoice->total_net) }}</span>
</div>
</div>
</div>
{{--Items table--}}
<table class="table">
<thead>
<tr class="table-row">
<td class="table-cell">
<span>Názov produktu</span>
</td>
<td class="table-cell">
<span>Množstvo</span>
</td>
<td class="table-cell">
<span>J. Cena</span>
</td>
<td class="table-cell">
<span>Celkom</span>
</td>
@if($invoice->user['ic_dph'])
<td class="table-cell">
<span>{{ format_to_currency(invoice_item_only_tax_price($item)) }}</span>
<span>Sadzba DPH</span>
</td>
<td class="table-cell">
<span>{{ format_to_currency(invoice_item_with_tax_price($item)) }}</span>
<span>DPH</span>
</td>
<td class="table-cell">
<span>Celkom s DPH</span>
</td>
@endif
</tr>
@endforeach
</tbody>
</table>
</thead>
{{--Item Summary--}}
<ul class="summary">
<tbody>
@foreach($invoice->items as $item)
<tr class="table-row">
<td class="table-cell">
<span style="word-break: break-word">{{ $item['description'] }}</span>
</td>
<td class="table-cell">
<span>{{ $item['amount'] }}</span>
</td>
<td class="table-cell">
<span>{{ format_to_currency($item['price']) }}</span>
</td>
@if($invoice->discount_type)
<li class="row" style="padding-bottom: 8px">
<span>Zlava za doklad:</span>
<span>-{{ $invoice->discount_type === 'percent' ? $invoice->discount_rate . '%' : format_to_currency($invoice->discount_rate) }}</span>
<td class="table-cell">
<span>{{ format_to_currency($item['price'] * $item['amount']) }}</span>
</td>
@if($invoice->user['ic_dph'])
<td class="table-cell">
<span>{{ $item['tax_rate'] }} %</span>
</td>
@endif
@if($invoice->user['ic_dph'])
<td class="table-cell">
<span>{{ format_to_currency(invoice_item_only_tax_price($item)) }}</span>
</td>
<td class="table-cell">
<span>{{ format_to_currency(invoice_item_with_tax_price($item)) }}</span>
</td>
@endif
</tr>
@endforeach
</tbody>
</table>
</div>
<div class="page-break">
{{--Item Summary--}}
<ul class="summary">
@if($invoice->discount_type)
<li class="row" style="padding-bottom: 8px">
<span>Zlava za doklad:</span>
<span>-{{ $invoice->discount_type === 'percent' ? $invoice->discount_rate . '%' : format_to_currency($invoice->discount_rate) }}</span>
</li>
@endif
{{--VAT Base--}}
@if($invoice->user['ic_dph'])
<div style="padding-bottom: 8px">
@foreach(invoice_tax_base($invoice) as $item)
<li class="row">
<span>Základ DPH {{ $item['rate'] }}%: </span>
<span>{{ format_to_currency($item['total']) }}</span>
</li>
@endforeach
</div>
@endif
{{--VAT Summary--}}
@if($invoice->user['ic_dph'])
<div style="padding-bottom: 8px">
@foreach(invoice_tax_summary($invoice) as $item)
<li class="row">
<span>DPH {{ $item['rate'] }}%: </span>
<span>{{ format_to_currency($item['total']) }}</span>
</li>
@endforeach
</div>
@endif
<li class="row">
<b>Spolu k úhrade:</b>
<b>{{ format_to_currency(invoice_total($invoice)) }}</b>
</li>
@endif
</ul>
{{--VAT Base--}}
@if($invoice->user['ic_dph'])
<div style="padding-bottom: 8px">
@foreach(invoice_tax_base($invoice) as $item)
<li class="row">
<span>VAT Base {{ $item['rate'] }}%: </span>
<span>{{ format_to_currency($item['total']) }}</span>
</li>
@endforeach
</div>
@endif
{{--VAT Summary--}}
@if($invoice->user['ic_dph'])
<div style="padding-bottom: 8px">
@foreach(invoice_tax_summary($invoice) as $item)
<li class="row">
<span>VAT {{ $item['rate'] }}%: </span>
<span>{{ format_to_currency($item['total']) }}</span>
</li>
@endforeach
</div>
@endif
<li class="row">
<b>Spolu k úhrade:</b>
<b>{{ format_to_currency(invoice_total($invoice)) }}</b>
</li>
</ul>
<!--Notes-->
<div class="notes">
<p>Ďakujeme, že ste sa rozhodli pre naše služby.</p>
</div>
{{--Invoice header--}}
<div class="invoice-author">
<div class="tax-note">
@if(! $invoice->user['ic_dph'])
<p>Nie sme platci DPH</p>
@endif
<!--Notes-->
<div class="notes">
<p>Ďakujeme, že ste sa rozhodli pre naše služby.</p>
</div>
<div class="sign">
@if(is_route('invoice-debug') && $user->invoiceProfile->stamp)
<img src="/{{ $user->invoiceProfile->stamp }}">
@endif
@if(! is_route('invoice-debug') && $user->invoiceProfile->stamp)
<img src="{{ base64_from_storage_image($user->invoiceProfile->stamp) }}">
@endif
{{--Invoice author--}}
<div class="invoice-author">
<div class="tax-note">
@if(! $invoice->user['ic_dph'])
<p>Nie sme platci DPH</p>
@endif
</div>
<div class="sign">
@if(is_route('invoice-debug') && $user->invoiceProfile->stamp)
<img src="/{{ $user->invoiceProfile->stamp }}">
@endif
<span class="highlight">Faktúru vystavil:</span> {{ $invoice->user['author'] }}
@if(! is_route('invoice-debug') && $user->invoiceProfile->stamp)
<img src="{{ base64_from_storage_image($user->invoiceProfile->stamp) }}">
@endif
<span class="highlight">Faktúru vystavil:</span> {{ $invoice->user['author'] }}
</div>
</div>
</div>
{{--Invoice Footer--}}
<footer class="invoice-footer">
<p>Vygenerované aplikáciou <a href="https://oasisdrive.cz">OasisDrive.cz</a></p>
</footer>
{{--Invoice Footer--}}
<footer class="invoice-footer">
<p>Vygenerované aplikáciou <a href="https://oasisdrive.cz">OasisDrive.cz</a></p>
</footer>
</div>
</body>
</html>