Item button and document content added spinner

This commit is contained in:
Cüneyt Şentürk
2020-12-29 17:13:06 +03:00
parent 9e3fd260bb
commit 34279db46b
6 changed files with 67 additions and 24 deletions

36
public/css/custom.css vendored
View File

@ -1255,12 +1255,26 @@ table .align-items-center td span.badge {
} }
.aka-select.aka-select--fluid { .aka-select.aka-select--fluid {
max-width: 96%; max-width: 100%;
min-width: 0; min-width: 0;
} }
.product-select .item-add-new:hover {
background-color: #f1f3f3;
text-decoration: none;
}
.product-select .item-add-new button {
height: 54px;
}
.product-select .aka-select.aka-select--fluid {
margin: -54px 0 !important
}
.product-select .aka-select-menu { .product-select .aka-select-menu {
width: 100%; margin-left: 4%;
width: 92%;
min-width: 0; min-width: 0;
padding: 0; padding: 0;
top: 0; top: 0;
@ -1307,6 +1321,7 @@ table .align-items-center td span.badge {
.product-select .aka-select.aka-select--fluid.is-open { .product-select .aka-select.aka-select--fluid.is-open {
position: absolute; position: absolute;
display: block; display: block;
margin-top: -50px;
} }
.item-select { .item-select {
@ -1340,3 +1355,20 @@ table .align-items-center td span.badge {
color: #8898aa; color: #8898aa;
} }
/* Akaunting Item Button Finish */ /* Akaunting Item Button Finish */
/* Document Loading Start */
.document-loading {
position: absolute;
overflow: auto;
width: 100%;
height: 100%;
background: #f8f9fe;
z-index: 99;
border-radius: 0.375rem;
}
.document-loading div {
margin-top: 20%;
margin-left: 45%;
}
/* Document Loading Finish */

View File

@ -1,12 +1,12 @@
<template> <template>
<div :id="'select-item-button-' + _uid" class="product-select"> <div :id="'select-item-button-' + _uid" class="product-select">
<div class="aka-select aka-select--fluid" :class="[{'is-open': show.item_list}]" tabindex="-1"> <div class="item-add-new">
<div>
<button type="button" class="btn btn-link w-100" @click="onItemList"> <button type="button" class="btn btn-link w-100" @click="onItemList">
<i class="fas fa-plus-circle"></i> &nbsp; {{ addItemText }} <i class="fas fa-plus-circle"></i> &nbsp; {{ addItemText }}
</button> </button>
</div> </div>
<div class="aka-select aka-select--fluid" :class="[{'is-open': show.item_list}]" tabindex="-1">
<div class="aka-select-menu" v-if="show.item_list"> <div class="aka-select-menu" v-if="show.item_list">
<div class="aka-select-search-container"> <div class="aka-select-search-container">
<span class="aka-prefixed-input aka-prefixed-input--fluid"> <span class="aka-prefixed-input aka-prefixed-input--fluid">

View File

@ -53,6 +53,7 @@ const app = new Vue({
items: [], items: [],
taxes: [], taxes: [],
page_loaded: false,
} }
}, },
@ -800,5 +801,7 @@ const app = new Vue({
}, this); }, this);
}, this); }, this);
} }
this.page_loaded = true;
} }
}); });

View File

@ -19,7 +19,9 @@
<thead class="thead-light"> <thead class="thead-light">
<tr> <tr>
@stack('move_th_start') @stack('move_th_start')
<th class="text-left border-top-0 border-right-0 border-bottom-0"></th> <th class="border-top-0 border-right-0 border-bottom-0" style="max-width: 40px">
<div ></div>
</th>
@stack('move_th_end') @stack('move_th_end')
@if (!$hideItems) @if (!$hideItems)
@ -69,7 +71,9 @@
@stack('total_th_end') @stack('total_th_end')
@stack('remove_th_start') @stack('remove_th_start')
<th class="text-left border-top-0 border-right-0 border-bottom-0"></th> <th class="border-top-0 border-right-0 border-bottom-0" style="max-width: 40px">
<div ></div>
</th>
@stack('remove_th_end') @stack('remove_th_end')
</tr> </tr>
</thead> </thead>
@ -79,7 +83,7 @@
@stack('add_item_td_start') @stack('add_item_td_start')
<tr id="addItem"> <tr id="addItem">
<td class="text-right border-bottom-0" colspan="{{ '7' }}"> <td class="text-right border-bottom-0 p-0" colspan="{{ '7' }}">
<x-select-item-button <x-select-item-button
type="{{ $type }}" type="{{ $type }}"
is-sale="{{ $isSalePrice }}" is-sale="{{ $isSalePrice }}"

View File

@ -17,7 +17,7 @@
<tbody> <tbody>
<tr> <tr>
@stack('move_td_start') @stack('move_td_start')
<td class="pb-4 align-middle" colspan="1" style="color: #8898aa;"> <td class="pb-3 align-middle border-bottom-0" colspan="1" style="color: #8898aa;">
<div draggable="true"> <div draggable="true">
<i class="fas fa-grip-vertical"></i> <i class="fas fa-grip-vertical"></i>
</div> </div>
@ -28,7 +28,7 @@
@if (!$hideItems || (!$hideName && !$hideDescription)) @if (!$hideItems || (!$hideName && !$hideDescription))
@stack('name_td_start') @stack('name_td_start')
@if (!$hideName) @if (!$hideName)
<td class="pb-4 align-middle" colspan="1"> <td class="pb-3 align-middle border-bottom-0" colspan="1">
<span class="aka-text aka-text--body" tabindex="0" v-html="row.name"></span> <span class="aka-text aka-text--body" tabindex="0" v-html="row.name"></span>
</td> </td>
@endif @endif
@ -36,11 +36,11 @@
@stack('description_td_start') @stack('description_td_start')
@if (!$hideDescription) @if (!$hideDescription)
<td class="pb-4" colspan="1"> <td class="pb-3 border-bottom-0" colspan="1">
<textarea <textarea
class="form-control" class="form-control"
placeholder="Enter item description" placeholder="Enter item description"
style="height: 38px;" style="height: 46px; overflow: hidden;"
:name="'items.' + index + '.description'" :name="'items.' + index + '.description'"
v-model="row.description" v-model="row.description"
data-item="description" data-item="description"
@ -54,7 +54,7 @@
@stack('quantity_td_start') @stack('quantity_td_start')
@if (!$hideQuantity) @if (!$hideQuantity)
<td colspan="1" class="pb-4" style="padding-right: 5px; padding-left: 5px;"> <td colspan="1" class="pb-3 border-bottom-0" style="padding-right: 5px; padding-left: 5px;">
<div> <div>
@stack('quantity_input_start') @stack('quantity_input_start')
<input type="text" <input type="text"
@ -79,7 +79,7 @@
@stack('price_td_start') @stack('price_td_start')
@if (!$hidePrice) @if (!$hidePrice)
<td colspan="1" class="pb-4" style="padding-right: 5px; padding-left: 5px;"> <td colspan="1" class="pb-3 border-bottom-0" style="padding-right: 5px; padding-left: 5px;">
<div> <div>
@stack('price_input_start') @stack('price_input_start')
{{ Form::moneyGroup('price', '', '', ['required' => 'required', 'row-input' => 'true', 'v-model' => 'row.price', 'v-error' => 'form.errors.get(\'items.\' + index + \'.price\')', 'v-error-message' => 'form.errors.get(\'items.\' + index + \'.price\')' , 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; form.errors.clear(\'items.\' + index + \'.price\'); onCalculateTotal'], 0.00, 'text-right input-price p-0') }} {{ Form::moneyGroup('price', '', '', ['required' => 'required', 'row-input' => 'true', 'v-model' => 'row.price', 'v-error' => 'form.errors.get(\'items.\' + index + \'.price\')', 'v-error-message' => 'form.errors.get(\'items.\' + index + \'.price\')' , 'data-item' => 'price', 'currency' => $currency, 'dynamic-currency' => 'currency', 'change' => 'row.price = $event; form.errors.clear(\'items.\' + index + \'.price\'); onCalculateTotal'], 0.00, 'text-right input-price p-0') }}
@ -92,7 +92,7 @@
@if (!$hideDiscount) @if (!$hideDiscount)
@if (in_array(setting('localisation.discount_location', 'total'), ['item', 'both'])) @if (in_array(setting('localisation.discount_location', 'total'), ['item', 'both']))
@stack('discount_td_start') @stack('discount_td_start')
<td colspan="1" class="pb-4" <td colspan="1" class="pb-3 border-bottom-0"
:class="[{'has-error': form.errors.has('items.' + index + '.discount') }]"> :class="[{'has-error': form.errors.has('items.' + index + '.discount') }]">
@stack('discount_input_start') @stack('discount_input_start')
<div class="input-group input-group-merge"> <div class="input-group input-group-merge">
@ -127,7 +127,7 @@
@stack('total_td_start') @stack('total_td_start')
@if (!$hideAmount) @if (!$hideAmount)
<td colspan="1" class="text-right long-texts pb-4"> <td colspan="1" class="text-right long-texts pb-3 border-bottom-0">
<div> <div>
{{ Form::moneyGroup('total', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row.total', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }} {{ Form::moneyGroup('total', '', '', ['required' => 'required', 'disabled' => 'true' , 'row-input' => 'true', 'v-model' => 'row.total', 'data-item' => 'total', 'currency' => $currency, 'dynamic-currency' => 'currency'], 0.00, 'text-right input-price disabled-money') }}
</div> </div>
@ -136,7 +136,7 @@
@stack('total_td_end') @stack('total_td_end')
@stack('delete_td_start') @stack('delete_td_start')
<td colspan="1" class="pb-4 align-middle"> <td colspan="1" class="pb-3 align-middle border-bottom-0">
<div> <div>
<button type="button" @click="onDeleteItem(index)" class="btn btn-link btn-delete p-0"> <button type="button" @click="onDeleteItem(index)" class="btn btn-link btn-delete p-0">
<i class="far fa-trash-alt"></i> <i class="far fa-trash-alt"></i>
@ -147,11 +147,11 @@
</tr> </tr>
<tr> <tr>
<td colspan="3"> <td class="border-top-0" colspan="3">
@stack('item_custom_fields') @stack('item_custom_fields')
</td> </td>
<td colspan="4" class="p-0"> <td class="border-top-0 p-0" colspan="4">
<table class="w-100"> <table class="w-100">
<colgroup> <colgroup>
<col style="width: 100px;"> <col style="width: 100px;">

View File

@ -1,4 +1,8 @@
<div class="card"> <div class="card">
<div class="document-loading" v-if="!page_loaded">
<div><i class="fas fa-spinner fa-pulse fa-7x"></i></div>
</div>
<div class="card-body"> <div class="card-body">
<x-documents.form.metadata <x-documents.form.metadata
type="{{ $type }}" type="{{ $type }}"