shihaam/akaunting
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

akaunting 3.0 (the last dance)

Browse Source
This commit is contained in:
Burak Civan
2022-06-01 10:15:55 +03:00
parent cead09f6d4
commit d9c0764572
3812 changed files with 126831 additions and 102949 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
resources/assets/js/views/auth/reset.js → resources/assets/js/views/auth/common.js vendored
View File

@ -9,24 +9,44 @@ require('./../../bootstrap');
import Vue from 'vue';
import Form from './../../plugins/form';
import Swiper, { Navigation, Pagination, Autoplay } from 'swiper';
const app = new Vue({
const login = new Vue({
el: '#app',
data: function () {
return {
form: new Form('reset')
form: new Form('auth'),
}
},
mounted() {
Swiper.use([Navigation, Pagination, Autoplay]);
new Swiper(".swiper-container", {
loop: true,
speed: 1000,
allowTouchMove: true,
autoplay: {
delay: 3000,
},
pagination: {
el: ".swiper-pagination",
clickable: true,
},
});
this.checkNotify();
},
methods: {
onSubmit() {
this.form.submit();
},
// Check Default set notify > store / update action
checkNotify: function () {
if (!flash_notification) {
if (! flash_notification) {
return false;
}
@ -36,15 +56,10 @@ const app = new Vue({
this.$notify({
message: notify.message,
timeout: 5000,
icon: 'fas fa-bell',
icon: '',
type
});
});
},
// Form Submit
onSubmit() {
this.form.submit();
},
}
});

27
resources/assets/js/views/auth/forgot.js vendored
View File

@ -1,27 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
import Vue from 'vue';
import Form from './../../plugins/form';
const app = new Vue({
el: '#app',
data: function () {
return {
form: new Form('forgot')
}
},
methods: {
onSubmit() {
this.form.submit();
},
}
});

27
resources/assets/js/views/auth/login.js vendored
View File

@ -1,27 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
import Vue from 'vue';
import Form from './../../plugins/form';
const app = new Vue({
el: '#app',
data: function () {
return {
form: new Form('login')
}
},
methods: {
onSubmit() {
this.form.submit();
},
}
});

34
resources/assets/js/views/auth/permissions.js vendored
View File

@ -1,34 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from './../../mixins/global';
import Form from './../../plugins/form';
import BulkAction from './../../plugins/bulk-action';
// plugin setup
Vue.use(DashboardPlugin);
const app = new Vue({
el: '#app',
mixins: [
Global
],
data: function () {
return {
form: new Form('permission'),
bulk_action: new BulkAction('permissions')
}
}
});

107
resources/assets/js/views/auth/roles.js vendored
View File

@ -1,107 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from './../../mixins/global';
import Form from './../../plugins/form';
import BulkAction from './../../plugins/bulk-action';
// plugin setup
Vue.use(DashboardPlugin);
const app = new Vue({
el: '#app',
mixins: [
Global
],
mounted() {
if (typeof this.form.permissions !== 'undefined' && !this.form.permissions.length) {
this.form.permissions = [];
}
},
data: function () {
return {
form: new Form('role'),
bulk_action: new BulkAction('roles'),
permissions: {
'all': $('input:checkbox').serializeAll().permissions,
'read': $('#tab-read input:checkbox').serializeAll(),
'create': $('#tab-create input:checkbox').serializeAll(),
'update': $('#tab-update input:checkbox').serializeAll(),
'delete': $('#tab-delete input:checkbox').serializeAll(),
'read_admin_panel': $('#read-admin-panel').val(),
'read_client_portal': $('#read-client-portal').val(),
}
}
},
methods:{
permissionSelectAll() {
if (this.permissions.all.length) {
this.permissions.all.forEach(function (value) {
this.setFormPermission(value);
}, this);
}
},
permissionUnselectAll() {
this.form.permissions = [];
},
select(type) {
let values = this.permissions[type].permissions;
if (values.length) {
values.forEach(function (value) {
this.setFormPermission(value);
}, this);
}
},
unselect(type) {
var values = this.permissions[type].permissions;
if (values.length) {
for (var i = 0; i < values.length; i++) {
var index = this.form.permissions.indexOf(values[i]);
if (index > -1) {
this.form.permissions.splice(index, 1);
}
}
}
},
setFormPermission(permission) {
if (this.form.permissions.includes(permission)) {
return;
}
if ((this.permissions.read_admin_panel == permission) || (this.permissions.read_client_portal == permission)) {
if (this.permissions.read_admin_panel == permission && this.form.permissions.includes(this.permissions.read_client_portal)) {
return;
} else if(this.permissions.read_client_portal == permission && this.form.permissions.includes(this.permissions.read_admin_panel)) {
return;
}
this.form.permissions.push(permission);
return;
}
this.form.permissions.push(permission);
},
}
});

23
resources/assets/js/views/auth/users.js vendored
View File

@ -28,7 +28,28 @@ const app = new Vue({
data: function () {
return {
form: new Form('user'),
bulk_action: new BulkAction('users')
bulk_action: new BulkAction('users'),
show_password: false,
}
},
mounted() {
this.form.password = '';
},
methods: {
onChangePassword(event) {
if (this.show_password == false) {
event.target.closest('.grid-rows-3').classList.replace('grid-rows-3', 'grid-rows-4');
event.target.closest('.grid-rows-4').nextElementSibling.classList.replace('grid-rows-3', 'grid-rows-4');
this.show_password = true;
} else {
event.target.closest('.grid-rows-4').classList.replace('grid-rows-4', 'grid-rows-3');
event.target.closest('.grid-rows-3').nextElementSibling.classList.replace('grid-rows-4', 'grid-rows-3');
this.show_password = false;
}
},
}
});

25
resources/assets/js/views/banking/accounts.js vendored
View File

@ -31,4 +31,29 @@ const app = new Vue({
bulk_action: new BulkAction('accounts'),
}
},
methods: {
onType(event) {
return;
let type = event.target.value;
switch(type) {
case 'credit_card':
this.onCreditCard();
break;
case 'bank':
default:
this.onBank();
break;
}
},
onCreditCard() {
},
onBank() {
},
}
});

254
resources/assets/js/views/banking/reconciliations.js vendored
View File

@ -4,136 +4,136 @@
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from './../../mixins/global';
import Form from './../../plugins/form';
import BulkAction from './../../plugins/bulk-action';
// plugin setup
Vue.use(DashboardPlugin);
const app = new Vue({
el: '#app',
mixins: [
Global
],
data: function () {
return {
form: new Form('reconciliation'),
bulk_action: new BulkAction('reconciliations'),
reconcile: true,
difference: null,
totals: {
closing_balance: 0,
cleared_amount: 0,
difference: 0,
},
min_due_date: false
}
},
mounted() {
if (document.getElementById('closing_balance') != null) {
this.totals.closing_balance = parseFloat(document.getElementById('closing_balance').value);
}
if (this.form._method == 'PATCH') {
this.onCalculate();
}
this.currencyConversion();
},
methods:{
setDueMinDate(date) {
this.min_due_date = date;
},
import Vue from 'vue';
currencyConversion() {
setTimeout(() => {
if(document.querySelectorAll('.js-conversion-input')) {
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from './../../mixins/global';
import Form from './../../plugins/form';
import BulkAction from './../../plugins/bulk-action';
// plugin setup
Vue.use(DashboardPlugin);
const app = new Vue({
el: '#app',
mixins: [
Global
],
data: function () {
return {
form: new Form('reconciliation'),
bulk_action: new BulkAction('reconciliations'),
reconcile: true,
difference: null,
totals: {
closing_balance: 0,
cleared_amount: 0,
difference: 0,
},
min_due_date: false,
}
},
mounted() {
if (document.getElementById('closing_balance') != null) {
this.totals.closing_balance = parseFloat(document.getElementById('closing_balance').value);
}
if (this.form._method == 'PATCH') {
this.onCalculate();
}
this.currencyConversion();
},
methods:{
setDueMinDate(date) {
this.min_due_date = date;
},
currencyConversion() {
setTimeout(() => {
if (document.querySelectorAll('.js-conversion-input')) {
let currency_input = document.querySelectorAll('.js-conversion-input');
for(let input of currency_input) {
for (let input of currency_input) {
input.setAttribute('size', input.value.length);
}
}
}, 250)
},
onReconcilition() {
let form = document.getElementById('form-create-reconciliation');
let path = form.action +'?started_at=' + this.form.started_at + '&ended_at=' + this.form.ended_at + '&closing_balance=' + this.form.closing_balance + '&account_id=' + this.form.account_id;
window.location.href = path;
},
onCalculate() {
this.reconcile = true;
this.difference = null;
let transactions = this.form.transactions;
let cleared_amount = 0;
let closing_balance = parseFloat(this.form.closing_balance);
let difference = 0;
let income_total = 0;
let expense_total = 0;
this.totals.closing_balance = closing_balance;
if (transactions) {
// get all transactions.
Object.keys(transactions).forEach(function(transaction) {
if (!transactions[transaction]) {
return;
}
let type = transaction.split('_');
if (type[0] == 'income') {
income_total += parseFloat(document.getElementById('transaction-' + type[1] + '-' + type[0]).value);
} else {
expense_total += parseFloat(document.getElementById('transaction-' + type[1] + '-' + type[0]).value);
}
});
let transaction_total = income_total - expense_total;
cleared_amount = parseFloat(this.form.opening_balance) + transaction_total;
}
if (cleared_amount > 0) {
difference = (parseFloat(this.form.closing_balance) - parseFloat(cleared_amount)).toFixed(this.currency.precision);
} else {
difference = (parseFloat(this.form.closing_balance) + parseFloat(cleared_amount)).toFixed(this.currency.precision);
}
if (difference != 0) {
this.difference = 'table-danger';
this.reconcile = true;
} else {
this.difference = 'table-success';
this.reconcile = false;
}
this.totals.cleared_amount = parseFloat(cleared_amount);
this.totals.difference = difference;
},
onReconcileSubmit() {
this.form.reconcile = 1;
this.form.submit();
}
},
});
}, 250)
},
onReconcilition() {
let form = document.getElementById('form-create-reconciliation');
let path = form.action + '?started_at=' + this.form.started_at + '&ended_at=' + this.form.ended_at + '&closing_balance=' + this.form.closing_balance + '&account_id=' + this.form.account_id;
window.location.href = path;
},
onCalculate() {
this.reconcile = true;
this.difference = null;
let transactions = this.form.transactions;
let cleared_amount = 0;
let closing_balance = parseFloat(this.form.closing_balance);
let difference = 0;
let income_total = 0;
let expense_total = 0;
this.totals.closing_balance = closing_balance;
if (transactions) {
// get all transactions.
Object.keys(transactions).forEach(function(transaction) {
if (! transactions[transaction]) {
return;
}
let type = transaction.split('_');
if (type[0] == 'income') {
income_total += parseFloat(document.getElementById('transaction-' + type[1] + '-' + type[0]).value);
} else {
expense_total += parseFloat(document.getElementById('transaction-' + type[1] + '-' + type[0]).value);
}
});
let transaction_total = income_total - expense_total;
cleared_amount = parseFloat(this.form.opening_balance) + transaction_total;
}
if (cleared_amount > 0) {
difference = (parseFloat(this.form.closing_balance) - parseFloat(cleared_amount)).toFixed(this.currency.precision);
} else {
difference = (parseFloat(this.form.closing_balance) + parseFloat(cleared_amount)).toFixed(this.currency.precision);
}
if (difference != 0) {
this.difference = 'bg-orange-300';
this.reconcile = true;
} else {
this.difference = 'bg-green-100';
this.reconcile = false;
}
this.totals.cleared_amount = parseFloat(cleared_amount);
this.totals.difference = difference;
},
onReconcileSubmit() {
this.form.reconcile = 1;
this.form.submit();
},
}
});

82
resources/assets/js/views/banking/transactions.js vendored
View File

@ -28,8 +28,88 @@ const app = new Vue({
data: function () {
return {
form: new Form('transaction'),
bulk_action: new BulkAction('transactions')
bulk_action: new BulkAction('transactions'),
connect: {
show: false,
currency: {},
documents: [],
},
}
},
methods: {
onConnect(transaction, currency, documents) {
this.connect.show = true;
this.connect.transaction = transaction;
this.connect.currency = {
decimal_mark: currency.decimal_mark,
precision: currency.precision,
symbol: currency.symbol,
symbol_first: currency.symbol_first,
thousands_separator: currency.thousands_separator,
};
this.connect.documents = documents;
},
async onEmail(route) {
let email = {
modal: false,
route: route,
title: '',
html: '',
buttons:{}
};
let email_promise = Promise.resolve(window.axios.get(email.route));
email_promise.then(response => {
email.modal = true;
email.title = response.data.data.title;
email.html = response.data.html;
email.buttons = response.data.data.buttons;
this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({
template: '<div id="dynamic-email-component"><akaunting-modal-add-new modal-dialog-class="max-w-screen-lg" :show="email.modal" @submit="onSubmit" @cancel="onCancel" :buttons="email.buttons" :title="email.title" :is_component=true :message="email.html"></akaunting-modal-add-new></div>',
mixins: [
Global
],
data: function () {
return {
form:{},
email: email,
}
},
methods: {
onSubmit(event) {
this.$emit('submit', event);
event.submit();
},
onCancel() {
this.email.modal = false;
this.email.html = null;
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
},
}
})
});
})
.catch(error => {
})
.finally(function () {
// always executed
});
},
},
});

6
resources/assets/js/views/sales/customers.js → resources/assets/js/views/common/contacts.js vendored
View File

@ -14,6 +14,8 @@ import Global from './../../mixins/global';
import Form from './../../plugins/form';
import BulkAction from './../../plugins/bulk-action';
import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
// plugin setup
Vue.use(DashboardPlugin);
@ -27,8 +29,8 @@ const app = new Vue({
data: function () {
return {
form: new Form('customer'),
bulk_action: new BulkAction('customers'),
form: new Form('contact'),
bulk_action: new BulkAction('contacts'),
can_login : false
}
},

264
resources/assets/js/views/common/documents.js vendored
View File

@ -1,14 +1,13 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import { addDays, format } from 'date-fns';
import { setPromiseTimeout } from './../../plugins/functions';
import Global from './../../mixins/global';
@ -67,6 +66,9 @@ const app = new Vue({
},
dropdown_visible: true,
dynamic_taxes: [],
show_discount: false,
show_discount_text: true,
delete_discount: false
}
},
@ -77,7 +79,7 @@ const app = new Vue({
this.colspan = document.getElementById("items").rows[0].cells.length - 1;
}
if (!this.edit.status) {
if (! this.edit.status) {
this.dropdown_visible = false;
}
@ -87,18 +89,22 @@ const app = new Vue({
let default_currency_symbol = null;
for (let symbol of this.currencies) {
if(symbol.code == company_currency_code) {
if (symbol.code == company_currency_code) {
default_currency_symbol = symbol.symbol;
}
}
this.currency_symbol.symbol = default_currency_symbol;
};
if (document_app_env == 'production') {
this.onFormCapture();
}
},
methods: {
onRefFocus(ref) {
let index = this.form.items.length - 1;
let index = this.form.items.length - 1;
this.$refs['items-' + index + '-' + ref][0].focus();
},
@ -350,7 +356,7 @@ const app = new Vue({
return amount_before_discount_and_tax;
},
calculateTotalsTax(totals_taxes, id, name, type, price) {
calculateTotalsTax(totals_taxes, id, name, price) {
let total_tax_index = totals_taxes.findIndex(total_tax => {
if (total_tax.id === id) {
return true;
@ -380,7 +386,7 @@ const app = new Vue({
let inputRef = `${itemType === 'newItem' ? 'name' : 'description'}`; // indication for which input to focus first
let total = 1 * item.price;
let item_taxes = [];
if (item.tax_ids) {
item.tax_ids.forEach(function (tax_id, index) {
if (this.taxes.includes(tax_id)) {
@ -415,7 +421,7 @@ const app = new Vue({
description: item.description,
quantity: 1,
price: item.price,
add_tax: (document.getElementById('invoice-item-discount-rows') != null) ? false : true,
add_tax: false,
tax_ids: item_taxes,
add_discount: false,
discount: 0,
@ -435,7 +441,7 @@ const app = new Vue({
},
onSelectedTax(item_index) {
if (!this.tax_id) {
if (! this.tax_id) {
return;
}
@ -525,6 +531,22 @@ const app = new Vue({
this.items[item_index].add_tax = true;
},
onAddDiscount() {
this.show_discount = !this.show_discount;
if (this.show_discount) {
this.show_discount_text = false;
this.delete_discount = true;
}
},
onRemoveDiscountArea() {
this.show_discount = false;
this.show_discount_text = true;
this.discount = false;
this.delete_discount = false;
},
onDeleteTax(item_index, tax_index) {
if (tax_index == '999') {
this.items[item_index].add_tax = false;
@ -563,7 +585,7 @@ const app = new Vue({
this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({
template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="modal-md" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="max-w-screen-lg" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
mixins: [
Global
@ -660,6 +682,181 @@ const app = new Vue({
});
},
async onEditPayment(transaction_id) {
let document_id = document.getElementById('document_id').value;
let payment = {
modal: false,
url: url + '/modals/documents/' + document_id + '/transactions/edit/' + transaction_id,
title: '',
html: '',
buttons:{}
};
let payment_promise = Promise.resolve(window.axios.get(payment.url));
payment_promise.then(response => {
payment.modal = true;
payment.title = response.data.data.title;
payment.html = response.data.html;
payment.buttons = response.data.data.buttons;
this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({
template: '<div id="dynamic-payment-component"><akaunting-modal-add-new modal-dialog-class="max-w-screen-lg" :show="payment.modal" @submit="onSubmit" @cancel="onCancel" :buttons="payment.buttons" :title="payment.title" :is_component=true :message="payment.html"></akaunting-modal-add-new></div>',
mixins: [
Global
],
data: function () {
return {
form:{},
payment: payment,
}
},
methods: {
onSubmit(event) {
this.form = event;
this.form.response = {};
this.loading = true;
let data = this.form.data();
FormData.prototype.appendRecursive = function(data, wrapper = null) {
for(var name in data) {
if (wrapper) {
if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
this.appendRecursive(data[name], wrapper + '[' + name + ']');
} else {
this.append(wrapper + '[' + name + ']', data[name]);
}
} else {
if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
this.appendRecursive(data[name], name);
} else {
this.append(name, data[name]);
}
}
}
};
let form_data = new FormData();
form_data.appendRecursive(data);
window.axios({
method: this.form.method,
url: this.form.action,
data: form_data,
headers: {
'X-CSRF-TOKEN': window.Laravel.csrfToken,
'X-Requested-With': 'XMLHttpRequest',
'Content-Type': 'multipart/form-data'
}
})
.then(response => {
if (response.data.success) {
if (response.data.redirect) {
this.form.loading = true;
window.location.href = response.data.redirect;
}
}
if (response.data.error) {
this.form.loading = false;
this.form.response = response.data;
}
})
.catch(error => {
this.form.loading = false;
this.form.onFail(error);
this.method_show_html = error.message;
});
},
onCancel() {
this.payment.modal = false;
this.payment.html = null;
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
},
}
})
});
})
.catch(error => {
})
.finally(function () {
// always executed
});
},
async onEmail(route) {
let email = {
modal: false,
route: route,
title: '',
html: '',
buttons:{}
};
let email_promise = Promise.resolve(window.axios.get(email.route));
email_promise.then(response => {
email.modal = true;
email.title = response.data.data.title;
email.html = response.data.html;
email.buttons = response.data.data.buttons;
this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({
template: '<div id="dynamic-email-component"><akaunting-modal-add-new modal-dialog-class="max-w-screen-lg" :show="email.modal" @submit="onSubmit" @cancel="onCancel" :buttons="email.buttons" :title="email.title" :is_component=true :message="email.html"></akaunting-modal-add-new></div>',
mixins: [
Global
],
data: function () {
return {
form:{},
email: email,
}
},
methods: {
onSubmit(event) {
this.$emit('submit', event);
event.submit();
},
onCancel() {
this.email.modal = false;
this.email.html = null;
let documentClasses = document.body.classList;
documentClasses.remove("modal-open");
},
}
})
});
})
.catch(error => {
})
.finally(function () {
// always executed
});
},
// Change currency get money
onChangeCurrency(currency_code) {
if (this.edit.status && this.edit.currency <= 2) {
@ -710,7 +907,38 @@ const app = new Vue({
}
}
}, 250);
}
},
onBeforeUnload() {
window.onbeforeunload = function() {
return 'Are you sure you want to leave this page';
};
},
onFormCapture() {
let form_html = document.querySelector('form');
if (form_html && form_html.getAttribute('id') == 'document') {
form_html.querySelectorAll('input, textarea, select, ul, li, a, [type="button"]').forEach((element) => {
element.addEventListener('click', () => {
this.onBeforeUnload();
});
});
form_html.querySelectorAll('[type="submit"]').forEach((submit) => {
submit.addEventListener('click', () => {
window.onbeforeunload = null;
});
});
}
},
onChangeRecurringDate() {
let started_at = new Date(this.form.recurring_started_at);
let due_at = format(addDays(started_at, this.form.payment_terms), 'YYYY-MM-DD');
this.form.due_at = due_at;
},
},
created() {
@ -764,7 +992,7 @@ const app = new Vue({
description: item.description === null ? "" : item.description,
quantity: item.quantity,
price: (item.price).toFixed(2),
add_tax: (!item_taxes.length && document.getElementById('invoice-item-discount-rows') != null) ? false : true,
add_tax: false,
tax_ids: item_taxes,
add_discount: (item.discount_rate) ? true : false,
discount: item.discount_rate,
@ -796,8 +1024,6 @@ const app = new Vue({
}, this);
}
this.page_loaded = true;
if (typeof document_currencies !== 'undefined' && document_currencies) {
this.currencies = document_currencies;
@ -813,5 +1039,7 @@ const app = new Vue({
if (typeof document_taxes !== 'undefined' && document_taxes) {
this.dynamic_taxes = document_taxes;
}
this.page_loaded = true;
}
});

66
resources/assets/js/views/common/items.js vendored
View File

@ -35,6 +35,8 @@ const app = new Vue({
',.',
',,'
],
sale_information : false,
purchase_information : false
}
},
@ -44,11 +46,11 @@ const app = new Vue({
this.form.sale_price = oldVal;
return;
}
for (let item of this.regex_condition) {
if (this.form.sale_price.includes(item)) {
const removeLastChar = newVal.length - 1
const inputShown = newVal.slice(0, removeLastChar)
const removeLastChar = newVal.length - 1;
const inputShown = newVal.slice(0, removeLastChar);
this.form.sale_price = inputShown;
}
}
@ -62,11 +64,63 @@ const app = new Vue({
for (let item of this.regex_condition) {
if (this.form.purchase_price.includes(item)) {
const removeLastChar = newVal.length - 1
const inputShown = newVal.slice(0, removeLastChar)
const removeLastChar = newVal.length - 1;
const inputShown = newVal.slice(0, removeLastChar);
this.form.purchase_price = inputShown;
}
}
},
},
},
mounted() {
if (this.form.sale_price != '' && this.form.purchase_price == '') {
this.form.sale_information = true;
this.form.purchase_information = false;
this.purchase_information = true;
} else if (this.form.sale_price == '' && this.form.purchase_price != '') {
this.form.sale_information = false;
this.form.purchase_information = true;
this.sale_information = true;
} else {
this.form.sale_information = true;
this.form.purchase_information = true;
}
},
methods:{
onInformation(event, type) {
if (event.target.checked) {
if (type == 'sale') {
this.sale_information = false;
this.form.sale_price = '';
this.form.purchase_information = true;
} else {
this.purchase_information = false;
this.form.purchase_price = '';
}
} else {
if (type == 'sale') {
if (! this.form.purchase_information) {
this.purchase_information = false;
this.form.purchase_information = true;
}
this.sale_information = true;
} else {
if (! this.form.sale_information) {
this.sale_information = false;
this.form.sale_information = true;
}
this.purchase_information = true;
}
}
},
onType(event) {
return;
this.form.type = type;
}
}
});

30
resources/assets/js/views/common/reports.js vendored
View File

@ -22,7 +22,7 @@ const app = new Vue({
el: '#app',
mixins: [
Global
Global,
],
data: function () {
@ -30,13 +30,7 @@ const app = new Vue({
form: new Form('report'),
bulk_action: new BulkAction('reports'),
report_fields: '',
reports_total: [],
}
},
created() {
if (typeof reports_total !== 'undefined' && reports_total) {
this.reports_total = reports_total;
showPreferences: false,
}
},
@ -46,15 +40,20 @@ const app = new Vue({
params: {
class: class_name
}
})
})
.then(response => {
if (class_name) {
this.showPreferences = true;
} else {
this.showPreferences = false;
}
let form = this.form;
let html = response.data.html;
this.report_fields = Vue.component('add-new-component', (resolve, reject) => {
resolve({
template : '<div id="report-fields" class="row col-md-12">' + html + '</div>',
template : '<div id="report-fields" class="grid sm:grid-cols-6 sm:col-span-6 gap-x-8 gap-y-6 my-3.5">' + html + '</div>',
mixins: [
Global
],
@ -84,14 +83,5 @@ const app = new Vue({
onChangeReportFields(event) {
this.form = event;
},
onRefreshTotal(report_id) {
axios.get(url + '/common/reports/' + report_id + '/clear')
.then(response => {
this.reports_total[report_id] = response.data.data;
})
.catch(error => {
});
},
}
});

135
resources/assets/js/views/install/Database.vue
View File

@ -1,91 +1,72 @@
<template>
<div class="card">
<div class="card-header wizard-header p-3">
<el-steps :active="active" finish-status="success" align-center>
<el-step title="Language"></el-step>
<el-step title="Database"></el-step>
<el-step title="Admin"></el-step>
</el-steps>
</div>
<div>
<InstallSteps :active_state="active"></InstallSteps>
<div class="card-body">
<div role="alert" class="alert alert-danger d-none" :class="(form.response.error) ? 'show' : ''" v-if="form.response.error" v-html="form.response.message"></div>
<div role="alert" class="alert alert-danger d-none" :class="(form.response.error) ? 'show' : ''" v-if="form.response.error" v-html="form.response.message"></div>
<div class="row">
<div class="col-md-12 form-group required" :class="[{'has-error': form.errors.get('hostname')}]">
<label for="hostname" class="form-control-label">Hostname</label>
<div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 mt-0">
<div class="sm:col-span-6 form-group required" :class="[{'has-error': form.errors.get('hostname')}]">
<label for="hostname" class="form-control-label">Hostname</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-server"></i>
</span>
<div class="input-group input-group-merge">
<input
class="form-element"
data-name="hostname"
data-value="localhost"
@keydown="form.errors.clear('hostname')"
v-model="form.hostname"
required="required"
name="hostname"
type="text"
value="localhost"
id="hostname"
/>
</div>
<input class="form-control" data-name="hostname" data-value="localhost" @keydown="form.errors.clear('hostname')" v-model="form.hostname" required="required" name="hostname" type="text" value="localhost" id="hostname">
<div class="text-red text-sm mt-1 block" v-if="form.errors.has('hostname')" v-html="form.errors.get('hostname')"></div>
</div>
<div class="invalid-feedback d-block" v-if="form.errors.has('hostname')" v-html="form.errors.get('hostname')"></div>
</div>
<div class="sm:col-span-6 form-group required" :class="[{'has-error': form.errors.get('username')}]">
<label for="username" class="form-control-label">Username</label>
<div class="col-md-12 form-group required" :class="[{'has-error': form.errors.get('username')}]">
<label for="username" class="form-control-label">Username</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-user"></i>
</span>
<div class="input-group input-group-merge">
<input class="form-element" data-name="username" @keydown="form.errors.clear('username')" v-model="form.username" required="required" name="username" type="text" id="username" />
</div>
<input class="form-control" data-name="username" @keydown="form.errors.clear('username')" v-model="form.username" required="required" name="username" type="text" id="username">
<div class="text-red text-sm mt-1 block" v-if="form.errors.has('username')" v-html="form.errors.get('username')"></div>
</div>
<div class="invalid-feedback d-block" v-if="form.errors.has('username')" v-html="form.errors.get('username')"></div>
</div>
<div class="sm:col-span-6 form-group" :class="[{'has-error': form.errors.get('password')}]">
<label for="password" class="form-control-label">Password</label>
<div class="col-md-12 form-group" :class="[{'has-error': form.errors.get('password')}]">
<label for="password" class="form-control-label">Password</label>
<div class="input-group input-group-merge ">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-key"></i>
</span>
<div class="input-group input-group-merge">
<input class="form-element" data-name="password" v-model="form.password" name="password" type="password" value="" id="password" />
</div>
<input class="form-control" data-name="password" v-model="form.password" name="password" type="password" value="" id="password">
<div class="text-red text-sm mt-1 block" v-if="form.errors.has('password')" v-html="form.errors.get('password')"></div>
</div>
<div class="invalid-feedback d-block" v-if="form.errors.has('password')" v-html="form.errors.get('password')"></div>
</div>
<div class="sm:col-span-6 form-group mb--2 required" :class="[{'has-error': form.errors.get('database')}]">
<label for="database" class="form-control-label">Database</label>
<div class="col-md-12 form-group mb--2 required" :class="[{'has-error': form.errors.get('database')}]">
<label for="database" class="form-control-label">Database</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-database"></i>
</span>
<div class="input-group input-group-merge">
<input class="form-element" data-name="database" @keydown="form.errors.clear('database')" v-model="form.database" required="required" name="database" type="text" id="database" />
</div>
<input class="form-control" data-name="database" @keydown="form.errors.clear('database')" v-model="form.database" required="required" name="database" type="text" id="database">
</div>
<div class="invalid-feedback d-block" v-if="form.errors.has('database')" v-html="form.errors.get('database')"></div>
<div class="text-red text-sm mt-1 block" v-if="form.errors.has('database')" v-html="form.errors.get('database')"></div>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="row save-buttons">
<div class="col-md-12">
<button type="submit" @click="onSubmit" :disabled="form.loading" id="next-button" class="btn btn-icon btn-success button-submit header-button-top">
<div v-if="form.loading" class="aka-loader-frame">
<div class="aka-loader"></div>
</div>
<span v-if="!form.loading" class="btn-inner--text">
Next &nbsp;
</span>
</button>
</div>
<div class="relative__footer">
<div class="sm:col-span-6 flex items-center justify-end mt-3.5">
<button type="submit" @click="onSubmit" :disabled="form.loading" id="next-button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100">
<i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': form.loading}]">
Next
</span>
</button>
</div>
</div>
</div>
@ -93,22 +74,24 @@
<script>
import axios from "axios";
import Form from './../../plugins/form';
import {Step, Steps} from 'element-ui';
import Form from "./../../plugins/form";
import { Step, Steps } from "element-ui";
import InstallSteps from "./Steps.vue";
export default {
name: 'database',
name: "database",
components: {
[Step.name]: Step,
[Steps.name]: Steps
[Steps.name]: Steps,
InstallSteps,
},
data() {
return {
form: new Form('form-install'),
active: 1
}
form: new Form("form-install"),
active: 1,
};
},
methods: {
@ -119,7 +102,7 @@
next() {
if (this.active++ > 2);
}
}
}
},
},
};
</script>

94
resources/assets/js/views/install/Language.vue
View File

@ -1,39 +1,23 @@
<template>
<div class="card">
<div class="card-header wizard-header p-3">
<el-steps :active="active" finish-status="success" align-center>
<el-step title="Language"></el-step>
<el-step title="Database"></el-step>
<el-step title="Admin"></el-step>
</el-steps>
<div>
<InstallSteps :active_state="active"></InstallSteps>
<div class="form-group mb-0">
<select v-model="form.lang" name="lang" id="lang" size="13" class="w-full form-control-label">
<option v-for="(name, code) in languages" :value="code">
{{ name }}
</option>
</select>
</div>
<div class="card-body">
<div class="row">
<div class="col-md-12">
<div class="form-group mb-0">
<select v-model="form.lang" name="lang" id="lang" size="13" class="col-xl-12 form-control-label">
<option v-for="(name, code) in languages" :value="code">
{{ name }}
</option>
</select>
</div>
</div>
</div>
</div>
<div class="card-footer">
<div class="row save-buttons">
<div class="col-md-12">
<button type="submit" @click="onSubmit" :disabled="form.loading" id="next-button" class="btn btn-icon btn-success button-submit header-button-top">
<div v-if="form.loading" class="aka-loader-frame">
<div class="aka-loader"></div>
</div>
<span v-if="!form.loading" class="btn-inner--text">
Next &nbsp;
</span>
</button>
</div>
<div class="relative__footer">
<div class="sm:col-span-6 flex items-center justify-end mt-3.5">
<button type="submit" @click="onSubmit" :disabled="form.loading" id="next-button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100">
<i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': form.loading}]">
Next
</span>
</button>
</div>
</div>
</div>
@ -41,34 +25,36 @@
<script>
import axios from "axios";
import Form from './../../plugins/form';
import {Step, Steps} from 'element-ui';
import Form from "./../../plugins/form";
import { Step, Steps } from "element-ui";
import InstallSteps from "./Steps.vue";
var base_path = url.replace(window.location.origin, '');
var base_path = url.replace(window.location.origin, "");
export default {
name: 'language',
name: "language",
components: {
[Step.name]: Step,
[Steps.name]: Steps
[Steps.name]: Steps,
InstallSteps,
},
mounted() {
axios.get(base_path + '/install/language/getLanguages')
.then(response => {
this.languages = response.data.languages;
this.form.lang = 'en-GB';
})
.catch(error => {
});
axios
.get(base_path + "/install/language/getLanguages")
.then((response) => {
this.languages = response.data.languages;
this.form.lang = "en-GB";
})
.catch((error) => {});
},
data() {
return {
form: new Form('form-install'),
form: new Form("form-install"),
languages: [],
active: 0
}
active: 0,
};
},
methods: {
// Form Submit
@ -78,7 +64,13 @@
next() {
if (this.active++ > 2);
}
}
}
},
},
};
</script>
<style scoped>
select {
background-image: none;
}
</style>

53
resources/assets/js/views/install/Requirements.vue
View File

@ -1,33 +1,19 @@
<template>
<div class="card">
<div class="card-header wizard-header p-3">
<el-steps finish-status="success" align-center>
<el-step title="Language"></el-step>
<el-step title="Database"></el-step>
<el-step title="Admin"></el-step>
</el-steps>
</div>
<div>
<InstallSteps :active_state="active"></InstallSteps>
<div class="card-body">
<el-alert
v-for="requirement in requirements"
:key="requirement"
:title="requirement"
:closable="false"
type="error"
effect="dark">
</el-alert>
<el-alert v-for="requirement in requirements" :key="requirement" :title="requirement" :closable="false" type="error" effect="dark"> </el-alert>
</div>
<div class="card-footer">
<div class="row save-buttons">
<div class="col-md-12">
<button type="button" @click="onRefresh" class="btn btn-icon btn-success button-submit header-button-top">
<span class="btn-inner--text">
Refresh &nbsp;
</span>
</button>
</div>
<div class="relative__footer">
<div class="sm:col-span-6 flex items-center justify-end mt-3.5">
<button type="button" @click="onRefresh" :disabled="button_loading" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100">
<i v-if="button_loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': button_loading}]">
Refresh
</span>
</button>
</div>
</div>
</div>
@ -35,27 +21,32 @@
<script>
import axios from "axios";
import {Step, Steps, Alert} from 'element-ui';
import { Step, Steps, Alert } from "element-ui";
import InstallSteps from "./Steps.vue";
export default {
name: 'requirements',
name: "requirements",
components: {
[Step.name]: Step,
[Steps.name]: Steps,
[Alert.name]: Alert,
InstallSteps
},
data() {
return {
requirements: flash_requirements,
}
button_loading: false,
active:null
};
},
methods: {
onRefresh() {
this.button_loading = true;
window.location.reload();
}
}
}
},
},
};
</script>

124
resources/assets/js/views/install/Settings.vue
View File

@ -1,89 +1,57 @@
<template>
<div class="card">
<div class="card-header wizard-header p-3">
<el-steps :active="active" finish-status="success" align-center>
<el-step title="Language"></el-step>
<el-step title="Database"></el-step>
<el-step title="Admin"></el-step>
</el-steps>
</div>
<div>
<InstallSteps :active_state="active"></InstallSteps>
<div class="card-body">
<div class="row">
<div class="col-md-12 form-group required" :class="[{'has-error': form.errors.get('company_name')}]">
<label for="company_name" class="form-control-label">Company Name</label>
<div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 mt-0">
<div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('company_name')}]">
<label for="company_name" class="form-control-label">Company Name</label>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-building"></i>
</span>
</div>
<input class="form-control" data-name="company_name" @keydown="form.errors.clear('company_name')" v-model="form.company_name" required="required" name="company_name" type="text" id="company_name">
</div>
<div class="invalid-feedback d-block" v-if="form.errors.has('company_name')" v-html="form.errors.get('company_name')"></div>
<div class="input-group input-group-merge">
<input class="form-element" data-name="company_name" @keydown="form.errors.clear('company_name')" v-model="form.company_name" required="required" name="company_name" type="text" id="company_name" />
</div>
<div class="col-md-12 form-group required" :class="[{'has-error': form.errors.get('company_email')}]">
<label for="company_email" class="form-control-label">Company Email</label>
<div class="text-red text-sm mt-1 block" v-if="form.errors.has('company_name')" v-html="form.errors.get('company_name')"></div>
</div>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-envelope"></i>
</span>
</div>
<input class="form-control" data-name="company_email" @keydown="form.errors.clear('company_email')" v-model="form.company_email" required="required" name="company_email" type="text" id="company_email">
</div>
<div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('company_email')}]">
<label for="company_email" class="form-control-label">Company Email</label>
<div class="invalid-feedback d-block" v-if="form.errors.has('company_email')" v-html="form.errors.get('company_email')"></div>
<div class="input-group input-group-merge">
<input class="form-element" data-name="company_email" @keydown="form.errors.clear('company_email')" v-model="form.company_email" required="required" name="company_email" type="text" id="company_email" />
</div>
<div class=" col-md-12 form-group required" :class="[{'has-error': form.errors.get('user_email')}]">
<label for="user_email" class="form-control-label">Admin Email</label>
<div class="text-red text-sm mt-1 block" v-if="form.errors.has('company_email')" v-html="form.errors.get('company_email')"></div>
</div>
<div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-envelope"></i>
</span>
</div>
<input class="form-control" data-name="user_email" @keydown="form.errors.clear('user_email')" v-model="form.user_email" required="required" name="user_email" type="text" id="user_email">
</div>
<div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('user_email')}]">
<label for="user_email" class="form-control-label">Admin Email</label>
<div class="invalid-feedback d-block" v-if="form.errors.has('user_email')" v-html="form.errors.get('user_email')"></div>
<div class="input-group input-group-merge">
<input class="form-element" data-name="user_email" @keydown="form.errors.clear('user_email')" v-model="form.user_email" required="required" name="user_email" type="text" id="user_email" />
</div>
<div class="col-md-12 form-group mb--2 required" :class="[{'has-error': form.errors.get('user_password')}]">
<label for="user_password" class="form-control-label">Admin Password</label>
<div class="text-red text-sm mt-1 block" v-if="form.errors.has('user_email')" v-html="form.errors.get('user_email')"></div>
</div>
<div class="input-group input-group-merge ">
<div class="input-group-prepend">
<span class="input-group-text">
<i class="fa fa-key"></i>
</span>
</div>
<input class="form-control" data-name="user_password" @keydown="form.errors.clear('user_password')" v-model="form.user_password" required="required" name="user_password" type="password" value="" id="user_password">
</div>
<div class="sm:col-span-6 required" :class="[{'has-error': form.errors.get('user_password')}]">
<label for="user_password" class="form-control-label">Admin Password</label>
<div class="invalid-feedback d-block" v-if="form.errors.has('user_password')" v-html="form.errors.get('user_password')"></div>
<div class="input-group input-group-merge">
<input class="form-element" data-name="user_password" @keydown="form.errors.clear('user_password')" v-model="form.user_password" required="required" name="user_password" type="password" value="" id="user_password" />
</div>
<div class="text-red text-sm mt-1 block" v-if="form.errors.has('user_password')" v-html="form.errors.get('user_password')"></div>
</div>
</div>
<div class="card-footer">
<div class="row save-buttons">
<div class="col-md-12">
<button type="submit" @click="onSubmit" :disabled="form.loading" id="next-button" class="btn btn-icon btn-success button-submit header-button-top">
<div v-if="form.loading" class="aka-loader-frame">
<div class="aka-loader"></div>
</div>
<span v-if="!form.loading" class="btn-inner--text">
Next &nbsp;
</span>
</button>
</div>
<div class="relative__footer">
<div class="sm:col-span-6 flex items-center justify-end mt-3.5">
<button type="submit" @click="onSubmit" :disabled="form.loading" id="next-button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100">
<i v-if="form.loading" class="animate-submit delay-[0.28s] absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto before:absolute before:w-2 before:h-2 before:rounded-full before:animate-submit before:delay-[0.14s] after:absolute after:w-2 after:h-2 after:rounded-full after:animate-submit before:-left-3.5 after:-right-3.5 after:delay-[0.42s]"></i>
<span :class="[{'opacity-0': form.loading}]">
Next
</span>
</button>
</div>
</div>
</div>
@ -91,23 +59,25 @@
<script>
import axios from "axios";
import Form from './../../plugins/form';
import {Step, Steps} from 'element-ui';
import Form from "./../../plugins/form";
import { Step, Steps } from "element-ui";
import InstallSteps from "./Steps.vue";
export default {
name: 'settings',
name: "settings",
components: {
[Step.name]: Step,
[Steps.name]: Steps
[Steps.name]: Steps,
InstallSteps,
},
data() {
return {
form: new Form('form-install'),
form: new Form("form-install"),
languages: [],
active: 2
}
active: 2,
};
},
methods: {
// Form Submit
@ -117,7 +87,7 @@
next() {
if (this.active++ > 2);
}
}
}
},
},
};
</script>

48
resources/assets/js/views/install/Steps.vue Normal file
View File

@ -0,0 +1,48 @@
<template>
<div>
<nav aria-label="Progress">
<ol role="list" class="flex mb-10">
<li class="w-1/3">
<span class="pr-6 flex flex-col">
<span
:class="[{'bg-purple': active_state > 0}, {'bg-purple': active_state == 0}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent">Text</span>
<span :class="[{'font-bold': active_state == 0}, {'font-bold': active_state > 0}]" class="text-sm font-normal mt-2">Language</span>
</span>
</li>
<li class="w-1/3">
<span class="px-3 flex flex-col">
<span
:class="[{'bg-purple': active_state > 1}, {'bg-purple': active_state == 1}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent">Text</span>
<span :class="[{'font-bold': active_state == 1}, {'font-bold': active_state > 1}]" class="text-sm font-normal mt-2">Database</span>
</span>
</li>
<li class="w-1/3">
<span class="px-3 flex flex-col">
<span
:class="[{'bg-purple': active_state > 2}, {'bg-purple': active_state == 2}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent">Text</span>
<span :class="[{'font-bold': active_state == 2}, {'font-bold': active_state > 2}]" class="text-sm font-normal mt-2">Admin</span>
</span>
</li>
</ol>
</nav>
</div>
</template>
<script>
export default {
name: "Steps",
components: {},
props: {
active_state: {
type: [Boolean, String, Number],
}
},
};
</script>

4
resources/assets/js/views/install/update.js vendored
View File

@ -110,7 +110,7 @@ const app = new Vue({
if (data) {
this.update.total = parseInt((100 - ((this.update.steps.length / this.update.steps_total) * 100)).toFixed(0));
this.update.html = '<span class="text-default"><i class="fa fa-spinner fa-spin update-spin"></i> ' + data['text'] + '</span> </br>';
this.update.html = '<span class="text-default"><i class=""></i> ' + data['text'] + '</span> </br>';
let step_promise = Promise.resolve(axios.post(data.url, {
name: name,
@ -123,7 +123,7 @@ const app = new Vue({
step_promise.then(response => {
if (response.data.error) {
this.update.status = 'exception';
this.update.html = '<div class="text-danger"><i class="fa fa-times update-error"></i> ' + response.data.message + '</div>';
this.update.html = '<div class="text-danger"><i class="submit-spin absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto"></i> ' + response.data.message + '</div>';
}
if (response.data.success) {

279
resources/assets/js/views/modules/apps.js vendored
View File

@ -9,13 +9,13 @@ require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from './../../mixins/global';
import Form from './../../plugins/form';
import { Progress } from 'element-ui';
import AkauntingSlider from './../../components/AkauntingSlider.vue';
// plugin setup
Vue.use(DashboardPlugin);
Vue.use(DashboardPlugin, Progress);
const app = new Vue({
el: '#app',
@ -24,27 +24,276 @@ const app = new Vue({
Global
],
components: {
[Progress.name]: Progress,
AkauntingSlider
},
mounted() {
if (typeof app_slug !== 'undefined') {
this.onReleases(1);
this.onReviews(1);
}
},
data: function () {
return {
form: new Form('form-app')
keyword: '',
form: new Form('form-app'),
page: 2,
current_page: 1,
releases: {
status: false,
html: '',
pagination: {
current_page: 1,
last_page: 1
}
},
reviews: {
status: false,
html: '',
pagination: {
current_page: 1,
last_page: 1
}
},
page: {
reviews: 2,
releases: 2,
},
reviewPage: 2,
faq: false,
installation: {
show: false,
steps: [],
steps_total: 0,
total: 0,
path: '',
alias: '',
version: '',
status: 'success',
html: ''
},
loadMoreLoading: false,
}
},
methods: {
onChangeCategory(category) {
if (!category.length) {
return;
addToCart(alias, subscription_type) {
let add_to_cart_promise = Promise.resolve(axios.get(url + '/apps/' + alias + '/' + subscription_type +'/add'));
add_to_cart_promise.then(response => {
if (response.data.success) {
this.$notify({
message: response.data.message,
timeout: 0,
icon: "fas fa-bell",
type: 'success'
});
}
if (response.data.error) {
this.installation.status = 'exception';
this.installation.html = '<div class="text-red">' + response.data.message + '</div>';
}
// Set steps
if (response.data.data) {
this.installation.steps = response.data.data;
this.installation.steps_total = this.installation.steps.length;
this.next();
}
})
.catch(error => {
});
},
async onloadMore() {
this.loadMoreLoading = true;
this.current_page++;
let path = document.getElementById('see_more_path').value;
let alias = '';
let keyword = '';
if (document.getElementById('see_more_alias')) {
alias = document.getElementById('see_more_alias').value;
}
let path = document.getElementById('category_page').value;
if (category != '*') {
path += '/' + encodeURIComponent(category);
} else {
path = app_home;
if (document.getElementById('see_more_keyword')) {
keyword = document.getElementById('see_more_keyword').value;
}
location = path;
}
if (this.keyword !== '') {
keyword = this.keyword;
}
document.getElementById("button-pre-load").setAttribute("disabled", true);
let more_promise = Promise.resolve(window.axios.post(path, {
page: this.current_page,
alias: alias,
keyword: keyword,
}));
more_promise.then(response => {
if (response.data.success) {
document.querySelector("[data-apps-content]").innerHTML += response.data.html;
}
if (response.data.last_page == this.current_page) {
document.getElementById("button-pre-load").remove();
}
this.loadMoreLoading = false;
})
.catch(error => {
this.loadMoreLoading = false;
});
},
async onReleases(page) {
let releases_promise = Promise.resolve(window.axios.post(url + '/apps/' + app_slug + '/releases', {
page: page
}));
releases_promise.then(response => {
if (response.data.success) {
this.releases.status= true;
this.releases.html = response.data.html;
this.releases.pagination.current_page = page;
this.releases.pagination.last_page = response.data.data.last_page;
}
})
.catch(error => {
});
},
async onReviews(page) {
let reviews_promise = Promise.resolve(window.axios.post(url + '/apps/' + app_slug + '/reviews', {
page: page
}));
reviews_promise.then(response => {
if (response.data.success) {
this.reviews.status= true;
this.reviews.html = response.data.html;
this.reviews.pagination.current_page = page;
this.reviews.pagination.last_page = response.data.data.last_page;
}
})
.catch(error => {
});
},
onShowFaq() {
this.faq = true;
},
async onInstall(path, alias, name, version) {
this.installation.alias = alias;
this.installation.show = true;
this.installation.total = 0;
this.installation.path = path;
this.installation.version = version;
let steps_promise = Promise.resolve(axios.post(url + '/apps/steps', {
name: name,
alias: alias,
version: version
}));
steps_promise.then(response => {
if (response.data.error) {
this.installation.status = 'exception';
this.installation.html = '<div class="text-danger">' + response.data.message + '</div>';
}
// Set steps
if (response.data.data) {
this.installation.steps = response.data.data;
this.installation.steps_total = this.installation.steps.length;
this.next();
}
})
.catch(error => {
});
},
async next() {
let data = this.installation.steps.shift();
if (data) {
this.installation.total = parseInt((100 - ((this.installation.steps.length / this.installation.steps_total) * 100)).toFixed(0));
this.installation.html = '<span class="text-default"><i class="submit-spin absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto"></i> ' + data['text'] + '</span> </br>';
let step_promise = Promise.resolve(axios.post(data.url, {
alias: this.installation.alias,
version: this.installation.version,
path: this.installation.path,
}));
step_promise.then(response => {
if (response.data.error) {
this.installation.status = 'exception';
this.installation.html = '<div class="text-danger"><i class="submit-spin absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto"></i> ' + response.data.message + '</div>';
}
if (response.data.success) {
this.installation.status = 'success';
}
if (response.data.data.path) {
this.installation.path = response.data.data.path;
}
if (!response.data.error && !response.data.redirect) {
setTimeout(function() {
this.next();
}.bind(this), 800);
}
if (response.data.redirect) {
window.location = response.data.redirect;
}
})
.catch(error => {
});
}
},
async onModuleLoadMore(type) {
this.loadMoreLoading = true;
let module_promise = Promise.resolve(window.axios.post(url + '/apps/' + app_slug + '/' + type, {
page: this.page[type]
}));
module_promise.then(response => {
if (response.data.success) {
this.page[type]++;
document.querySelector('.js-'+ type + '-content').innerHTML += response.data.html;
this.loadMoreLoading = false;
}
})
.catch(error => {
this.loadMoreLoading = false;
});
},
}
});

233
resources/assets/js/views/modules/item.js vendored
View File

@ -1,233 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from '../../mixins/global';
import {Progress} from 'element-ui';
import AkauntingCarousel from './../../components/AkauntingCarousel';
// plugin setup
Vue.use(DashboardPlugin, Progress);
const app = new Vue({
el: '#app',
mixins: [
Global
],
components: {
[Progress.name]: Progress,
AkauntingCarousel
},
mounted() {
this.onReleases(1);
this.onReviews(1);
},
data: function () {
return {
releases: {
status: false,
html: '',
pagination: {
current_page: 1,
last_page: 1
}
},
reviews: {
status: false,
html: '',
pagination: {
current_page: 1,
last_page: 1
}
},
faq: false,
installation: {
show: false,
steps: [],
steps_total: 0,
total: 0,
path: '',
alias: '',
version: '',
status: 'success',
html: ''
},
}
},
methods: {
addToCart(alias, subscription_type) {
let add_to_cart_promise = Promise.resolve(axios.get(url + '/apps/' + alias + '/' + subscription_type +'/add'));
add_to_cart_promise.then(response => {
if (response.data.success) {
this.$notify({
message: response.data.message,
timeout: 0,
icon: "fas fa-bell",
type: 'success'
});
}
if (response.data.error) {
this.installation.status = 'exception';
this.installation.html = '<div class="text-danger">' + response.data.message + '</div>';
}
// Set steps
if (response.data.data) {
this.installation.steps = response.data.data;
this.installation.steps_total = this.installation.steps.length;
this.next();
}
})
.catch(error => {
});
},
onChangeCategory(category) {
if (!category.length) {
return;
}
let path = document.getElementById('category_page').value;
if (category != '*') {
path += '/' + encodeURIComponent(category);
} else {
path = app_home;
}
location = path;
},
async onReleases(page) {
let releases_promise = Promise.resolve(window.axios.post(url + '/apps/' + app_slug + '/releases', {
page: page
}));
releases_promise.then(response => {
if (response.data.success) {
this.releases.status= true;
this.releases.html = response.data.html;
this.releases.pagination.current_page = page;
this.releases.pagination.last_page = response.data.data.last_page;
}
})
.catch(error => {
});
},
async onReviews(page) {
let reviews_promise = Promise.resolve(window.axios.post(url + '/apps/' + app_slug + '/reviews', {
page: page
}));
reviews_promise.then(response => {
if (response.data.success) {
this.reviews.status= true;
this.reviews.html = response.data.html;
this.reviews.pagination.current_page = page;
this.reviews.pagination.last_page = response.data.data.last_page;
}
})
.catch(error => {
});
},
onShowFaq() {
this.faq = true;
},
async onInstall(path, alias, name, version) {
this.installation.alias = alias;
this.installation.show = true;
this.installation.total = 0;
this.installation.path = path;
this.installation.version = version;
let steps_promise = Promise.resolve(axios.post(url + '/apps/steps', {
name: name,
alias: alias,
version: version
}));
steps_promise.then(response => {
if (response.data.error) {
this.installation.status = 'exception';
this.installation.html = '<div class="text-danger">' + response.data.message + '</div>';
}
// Set steps
if (response.data.data) {
this.installation.steps = response.data.data;
this.installation.steps_total = this.installation.steps.length;
this.next();
}
})
.catch(error => {
});
},
async next() {
let data = this.installation.steps.shift();
if (data) {
this.installation.total = parseInt((100 - ((this.installation.steps.length / this.installation.steps_total) * 100)).toFixed(0));
this.installation.html = '<span class="text-default"><i class="fa fa-spinner fa-spin update-spin"></i> ' + data['text'] + '</span> </br>';
let step_promise = Promise.resolve(axios.post(data.url, {
alias: this.installation.alias,
version: this.installation.version,
path: this.installation.path,
}));
step_promise.then(response => {
if (response.data.error) {
this.installation.status = 'exception';
this.installation.html = '<div class="text-danger"><i class="fa fa-times update-error"></i> ' + response.data.message + '</div>';
}
if (response.data.success) {
this.installation.status = 'success';
}
if (response.data.data.path) {
this.installation.path = response.data.data.path;
}
if (!response.data.error && !response.data.redirect) {
setTimeout(function() {
this.next();
}.bind(this), 800);
}
if (response.data.redirect) {
window.location = response.data.redirect;
}
})
.catch(error => {
});
}
}
}
});

89
resources/assets/js/views/portal/invoices.js → resources/assets/js/views/portal/apps.js vendored
View File

@ -1,4 +1,3 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
@ -10,11 +9,14 @@ require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import BulkAction from './../../plugins/bulk-action';
import Global from './../../mixins/global';
import Form from './../../plugins/form';
import CardForm from './../../components/CreditCard/CardForm';
import Swiper, { Navigation, Pagination } from 'swiper';
Swiper.use([Navigation, Pagination]);
// plugin setup
Vue.use(DashboardPlugin);
@ -30,9 +32,22 @@ const app = new Vue({
CardForm
},
data: function () {
data: function() {
return {
form: new Form('invoice-payment'),
form: new Form('portal'),
bulk_action: new BulkAction('portal'),
// for profile
show_password: false,
// for payments
connect: {
show: false,
currency: {},
documents: [],
},
// for invoices
redirectForm: new Form('redirect-form'),
method_show_html: '',
formData: {
@ -43,13 +58,65 @@ const app = new Vue({
cardCvv: '',
storeCard: false,
card_id: 0,
}
},
}
},
methods:{
mounted() {
if (typeof this.form.password !== 'undefined') {
this.form.password = '';
}
new Swiper(".swiper-links", {
loop: false,
slidesPerView: 3,
pagination: {
el: ".swiper-pagination",
clickable: true
},
navigation: {
nextEl: ".swiper-button-next",
prevEl: ".swiper-button-prev",
},
});
},
methods: {
// for profile
onChangePassword(event) {
if (this.show_password == false) {
event.target.closest('.grid-rows-4').classList.replace('grid-rows-4', 'grid-rows-5');
event.target.closest('.grid-rows-5').nextElementSibling.classList.replace('grid-rows-4', 'grid-rows-5');
this.show_password = true;
} else {
event.target.closest('.grid-rows-5').classList.replace('grid-rows-5', 'grid-rows-4');
event.target.closest('.grid-rows-4').nextElementSibling.classList.replace('grid-rows-5', 'grid-rows-4');
this.show_password = false;
}
},
// for payments
onConnect(transaction, currency, documents) {
this.connect.show = true;
this.connect.transaction = transaction;
this.connect.currency = {
decimal_mark: currency.decimal_mark,
precision: currency.precision,
symbol: currency.symbol,
symbol_first: currency.symbol_first,
thousands_separator: currency.thousands_separator,
};
this.connect.documents = documents;
},
// for invoices
onChangePaymentMethod(payment_method) {
if (!payment_method) {
if (! payment_method) {
return;
}
@ -59,7 +126,7 @@ const app = new Vue({
this.method_show_html = Vue.component('payment-method-confirm', function (resolve, reject) {
resolve({
template:'<div id="loading" class="description text-center"><i class="fa fa-spinner fa-spin fa-5x checkout-spin"></i></div>'
template:'<div id="loading" class="description text-center"><i class="submit-spin absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto"></i></div>'
})
});
@ -138,7 +205,7 @@ const app = new Vue({
},
onChangePaymentMethodSigned(payment_method) {
if (!payment_method) {
if (! payment_method) {
return;
}
@ -150,7 +217,7 @@ const app = new Vue({
this.method_show_html = Vue.component('payment-method-confirm', function (resolve, reject) {
resolve({
template:'<div id="loading" class="description text-center"><i class="fa fa-spinner fa-spin fa-5x checkout-spin"></i></div>'
template:'<div id="loading" class="description text-center"><i class="submit-spin absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto"></i></div>'
})
});
@ -209,5 +276,5 @@ const app = new Vue({
this.method_show_html = error.message;
});
},
}
},
});

62
resources/assets/js/views/portal/dashboard.js vendored
View File

@ -1,62 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from './../../mixins/global';
import {getQueryVariable} from './../../plugins/functions';
import {DatePicker, Tooltip} from 'element-ui';
Vue.use(DatePicker, Tooltip);
// plugin setup
Vue.use(DashboardPlugin, DatePicker, Tooltip);
const app = new Vue({
el: '#main-body',
components: {
[DatePicker.name]: DatePicker,
[Tooltip.name]: Tooltip,
},
mixins: [
Global
],
data: function () {
return {
filter_date: [],
};
},
mounted() {
let start_date = getQueryVariable('start_date');
if (start_date) {
let end_date = getQueryVariable('end_date');
this.filter_date.push(start_date);
this.filter_date.push(end_date);
}
},
methods: {
// Global filter change date column
onChangeFilterDate() {
if (this.filter_date) {
window.location.href = url + '/portal?start_date=' + this.filter_date[0] + '&end_date=' + this.filter_date[1];
} else {
window.location.href = url + '/portal';
}
},
}
});

25
resources/assets/js/views/portal/payments.js vendored
View File

@ -1,25 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from './../../mixins/global';
// plugin setup
Vue.use(DashboardPlugin);
const app = new Vue({
el: '#app',
mixins: [
Global
],
});

34
resources/assets/js/views/portal/profile.js vendored
View File

@ -1,34 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from './../../mixins/global';
import Form from './../../plugins/form';
// plugin setup
Vue.use(DashboardPlugin);
const app = new Vue({
el: '#app',
mixins: [
Global
],
data: function () {
return {
form: new Form('profile'),
}
}
});

34
resources/assets/js/views/purchases/vendors.js vendored
View File

@ -1,34 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from './../../mixins/global';
import Form from './../../plugins/form';
import BulkAction from './../../plugins/bulk-action';
// plugin setup
Vue.use(DashboardPlugin);
const app = new Vue({
el: '#main-body',
mixins: [
Global
],
data: function () {
return {
form: new Form('vendor'),
bulk_action: new BulkAction('vendors')
}
}
});

50
resources/assets/js/views/settings/categories.js vendored
View File

@ -15,50 +15,46 @@ import Global from './../../mixins/global';
import Form from './../../plugins/form';
import BulkAction from './../../plugins/bulk-action';
import {ColorPicker} from 'element-ui';
// plugin setup
Vue.use(DashboardPlugin, ColorPicker);
Vue.use(DashboardPlugin);
const app = new Vue({
el: '#app',
mixins: [
Global
Global,
],
components: {
[ColorPicker.name]: ColorPicker,
},
mounted() {
this.color = this.form.color;
},
data: function () {
return {
form: new Form('category'),
bulk_action: new BulkAction('categories'),
color: '#55588b',
predefineColors: [
'#3c3f72',
'#55588b',
'#e5e5e5',
'#328aef',
'#efad32',
'#ef3232',
'#efef32'
]
categoriesBasedTypes: null,
isParentCategoryDisabled: true,
}
},
methods: {
onChangeColor() {
this.form.color = this.color;
},
updateParentCategories(event) {
if (event === '') {
return;
}
onChangeColorInput() {
this.color = this.form.color;
if (typeof JSON.parse(this.form.categories)[event] === 'undefined') {
this.categoriesBasedTypes = [];
this.isParentCategoryDisabled = true;
return;
}
if (this.form.parent_category_id) {
this.form.parent_category_id = null;
return;
}
this.categoriesBasedTypes = JSON.parse(this.form.categories)[event];
this.isParentCategoryDisabled = false;
}
}
});

33
resources/assets/js/views/settings/modules.js vendored
View File

@ -1,33 +0,0 @@
/**
* First we will load all of this project's JavaScript dependencies which
* includes Vue and other libraries. It is a great starting point when
* building robust, powerful web applications using Vue and Laravel.
*/
require('./../../bootstrap');
import Vue from 'vue';
import DashboardPlugin from './../../plugins/dashboard-plugin';
import Global from './../../mixins/global';
import Form from './../../plugins/form';
import BulkAction from './../../plugins/bulk-action';
// plugin setup
Vue.use(DashboardPlugin);
const app = new Vue({
el: '#app',
mixins: [
Global
],
data: function () {
return {
form: new Form('module')
}
}
});

57
resources/assets/js/views/settings/settings.js vendored
View File

@ -25,12 +25,6 @@ const app = new Vue({
Global
],
mounted() {
this.onChangeProtocol(this.form.protocol);
this.color = this.form.color;
},
data: function () {
return {
form: new Form('setting'),
@ -43,6 +37,8 @@ const app = new Vue({
smtpPassword:true,
smtpEncryption:true,
},
tags: null,
template_title: '',
invoice_form: new Form('template'),
template: {
@ -52,17 +48,9 @@ const app = new Vue({
html: '',
errors: new Error()
},
color: '#55588b',
predefineColors: [
'#3c3f72',
'#55588b',
'#e5e5e5',
'#328aef',
'#efad32',
'#ef3232',
'#efef32'
],
item_name_input: false,
price_name_input: false,
quantity_name_input: false
}
},
@ -138,12 +126,39 @@ const app = new Vue({
};
},
onChangeColor() {
this.form.color = this.color;
onEditEmailTemplate(template_id) {
axios.get(url + '/settings/email-templates/get', {
params: {
id: template_id
}
})
.then(response => {
this.template_title = response.data.data.title;
this.form.subject = response.data.data.subject;
this.form.body = response.data.data.body;
this.form.id = response.data.data.id;
this.tags = response.data.data.tags;
});
},
onChangeColorInput() {
this.color = this.form.color;
settingsInvoice() {
if (this.form.item_name == 'custom') {
this.item_name_input = true;
} else {
this.item_name_input = false;
}
if (this.form.price_name == 'custom') {
this.price_name_input = true;
} else {
this.price_name_input = false;
}
if (this.form.quantity_name == 'custom') {
this.quantity_name_input = true;
} else {
this.quantity_name_input = false;
}
}
}
});

202
resources/assets/js/views/wizard/Company.vue
View File

@ -1,135 +1,80 @@
<template>
<div>
<h1 class="text-white">
{{ translations.company.title }}
</h1>
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
<WizardSteps :active_state="active"></WizardSteps>
<div class="card">
<div class="card-header wizard-header p-3">
<el-steps :active="active" finish-status="success" align-center>
<el-step :title="translations.company.title"></el-step>
<el-step :title="translations.currencies.title"></el-step>
<el-step :title="translations.taxes.title"></el-step>
<el-step :title="translations.finish.title"></el-step>
</el-steps>
</div>
<form ref="form" class="w-100 mb-0">
<div class="card-body">
<div class="document-loading" v-if="pageLoad">
<div>
<i class="fas fa-spinner fa-pulse fa-7x"></i>
</div>
<form ref="form" class="w-full">
<div class="relative">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
</div>
<div class="row mb-0">
<div class="col-12 mb-4">
<base-input
:label="translations.company.api_key"
name="api_key"
data-name="api_key"
:placeholder="translations.company.api_key"
prepend-icon="fas fa-key"
v-model="company.api_key"
/>
<div class="flex flex-col justify-between">
<div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 my-3.5 menu-scroll gap-10">
<div class="sm:col-span-6">
<base-input :label="translations.company.api_key" name="api_key" data-name="api_key" :placeholder="translations.company.api_key" v-model="company.api_key"/>
<p class="mb-0 mt--3">
<small>
<div>
<a href="https://akaunting.com/dashboard" target="_blank">Click here</a>
to get your API key.
</div>
</small>
</p>
<div class="mt-2">
<small>
<a href="https://akaunting.com/dashboard" class="text-green" target="_blank">Click here</a>
to get your API key.
</small>
</div>
</div>
<div class="sm:col-span-3">
<base-input type="text" :label="translations.company.tax_number" name="tax_number" data-name="tax_number" :placeholder="translations.company.tax_number" v-model="company.tax_number"/>
</div>
<div class="sm:col-span-3">
<akaunting-date :title="translations.company.financial_start" data-name="financial_start" :placeholder="translations.company.financial_start" icon="calendar_today"
:date-config="{
dateFormat: 'd-m',
allowInput: false,
altInput: true,
altFormat: 'j F'
}"
v-model="company.financial_start"
></akaunting-date>
</div>
<div class="sm:col-span-3 grid gap-10">
<div class="sm:col-span-3">
<base-input :label="translations.company.address">
<textarea class="form-element" name="address" data-name="address" rows="3" :placeholder="translations.company.address" v-model="company.address"></textarea>
</base-input>
</div>
<div class="sm:col-span-3">
<base-input :label="translations.company.country">
<el-select v-model="company.country" filterable>
<el-option
v-for="(country, index) in sortedCountries"
:key="index"
:label="country.value"
:value="country.key"
>
</el-option>
</el-select>
</base-input>
<input name="country" type="hidden" class="d-none" v-model="company.country">
</div>
</div>
<div class="sm:col-span-3">
<label class="form-control-label">{{ translations.company.logo }}</label>
<akaunting-dropzone-file-upload ref="dropzoneWizard" class="form-file dropzone-column w-2/5" style="height:12.2rem" preview-classes="single" :attachments="logo" :v-model="logo">
</akaunting-dropzone-file-upload>
</div>
</div>
<div class="col-6">
<base-input
type="text"
:label="translations.company.tax_number"
name="tax_number"
data-name="tax_number"
:placeholder="translations.company.tax_number"
prepend-icon="fas fa-percent"
v-model="company.tax_number"
/>
</div>
<div class="flex items-center justify-center mt-5 gap-x-10">
<base-button class="w-1/2 flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100" @click="next()">{{ translations.company.skip }}</base-button>
<div class="col-6">
<akaunting-date
:title="translations.company.financial_start"
data-name="financial_start"
:placeholder="translations.company.financial_start"
icon="fas fa-calendar"
:date-config="{
dateFormat: 'd-m',
allowInput: false,
altInput: true,
altFormat: 'j F'
}"
v-model="real_date"
></akaunting-date>
</div>
<div class="col-12">
<base-input :label="translations.company.address">
<textarea
class="form-control"
name="address"
data-name="address"
rows="3"
:placeholder="translations.company.address"
v-model="company.address"
></textarea>
</base-input>
</div>
<div class="col-6">
<base-input :label="translations.company.country">
<el-select v-model="company.country" filterable>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fas fa-globe-americas'"></i>
</span>
</template>
<el-option
v-for="(country, index) in sortedCountries"
:key="index"
:label="country.value"
:value="country.key"
>
</el-option>
</el-select>
</base-input>
<input name="country" type="hidden" class="d-none" v-model="company.country"></input>
</div>
<div class="col-6 mb-0">
<label class="form-control-label">{{ translations.company.logo }}</label>
<akaunting-dropzone-file-upload
ref="dropzoneWizard"
class="form-file"
preview-classes="single"
:attachments="logo"
:v-model="logo"
>
</akaunting-dropzone-file-upload>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-12 text-right">
<base-button
id="button"
type="success"
native-type="button"
@click="onEditSave()"
>{{ translations.company.save }}</base-button>
<base-button type="white" native-type="submit" @click="next()">{{ translations.company.skip }}</base-button>
<base-button id="button" class="w-1/2 relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="onEditSave()">
{{ translations.company.save }}
</base-button>
</div>
</div>
</div>
@ -139,10 +84,11 @@
</template>
<script>
import { Step, Steps, Select, Option } from "element-ui";
import { Select, Option } from "element-ui";
import AkauntingDropzoneFileUpload from "./../../components/AkauntingDropzoneFileUpload";
import AkauntingDate from "./../../components/AkauntingDate";
import WizardAction from "./../../mixins/wizardAction";
import WizardSteps from "./Steps.vue";
export default {
name: "Company",
@ -150,12 +96,11 @@ export default {
mixins: [WizardAction],
components: {
[Step.name]: Step,
[Steps.name]: Steps,
[Select.name]: Select,
[Option.name]: Option,
AkauntingDropzoneFileUpload,
AkauntingDate,
WizardSteps
},
props: {
@ -296,11 +241,8 @@ export default {
size: company.logo.size,
downloadPath: false,
}];
this.logo.push(logo_arr);
}
this.real_date = company.financial_start;
}
},
@ -362,6 +304,8 @@ export default {
formData.appendRecursive(data_name);
this.company.financial_start = data_name.financial_start;
window.axios({
method: "POST",
url: url + "/wizard/companies",

464
resources/assets/js/views/wizard/Currencies.vue
View File

@ -1,312 +1,195 @@
<template>
<div>
<h1 class="text-white">
{{ translations.currencies.title }}
</h1>
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
<WizardSteps :active_state="active"></WizardSteps>
<div class="card">
<div class="card-header wizard-header p-3">
<el-steps :active="active" finish-status="success" align-center>
<el-step :title="translations.company.title"></el-step>
<el-step :title="translations.currencies.title"></el-step>
<el-step :title="translations.taxes.title"></el-step>
<el-step :title="translations.finish.title"></el-step>
</el-steps>
</div>
<div class="flex flex-col justify-between overflow-y-auto" style="height: calc(100% - 53px)">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
</div>
<div class="card-body">
<div class="document-loading" v-if="pageLoad">
<div>
<i class="fas fa-spinner fa-pulse fa-7x"></i>
</div>
</div>
<div class="overflow-x-visible menu-scroll mt-1">
<form ref="form" class="py-2 align-middle inline-block min-w-full">
<table id="tbl-currencies" class="min-w-full divide-y divide-gray-200">
<thead>
<tr class="flex items-center px-1">
<th class="w-4/12 ltr:pr-6 rtl:pl-6 py-3 ltr:text-left rtl:text-right text-sm font-bold text-black tracking-wider">
{{ translations.currencies.name }}
</th>
<div class="d-flex justify-content-end mb-3">
<base-button
type="success"
native-type="button"
class="btn-sm"
@click="onAddItem()"
>{{ translations.currencies.add_new }}</base-button
>
</div>
<th class="w-4/12 ltr:pr-6 rtl:pl-6 py-3 text-center text-sm font-bold text-black tracking-wider">
{{ translations.currencies.code }}
</th>
<div class="row flex-column">
<form ref="form">
<table class="table table-flush table-hover" id="tbl-currencies">
<thead class="thead-light">
<tr class="row table-head-line">
<th class="col-xs-4 col-sm-4 col-md-3">
{{ translations.currencies.name }}
</th>
<th class="col-md-3 d-none d-md-block">
{{ translations.currencies.code }}
</th>
<th class="col-md-2 d-none d-md-block">
{{ translations.currencies.rate }}
</th>
<th class="col-xs-4 col-sm-4 col-md-2">
{{ translations.currencies.enabled }}
</th>
<th class="col-xs-4 col-sm-4 col-md-2 text-center">
{{ translations.currencies.actions }}
</th>
</tr>
</thead>
<th class="w-4/12 ltr:pr-6 rtl:pl-6 py-3 ltr:text-right rtl:text-left text-sm font-bold text-black tracking-wider">
{{ translations.currencies.rate }}
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in currencies"
:key="index"
class="row align-items-center border-top-1"
>
<td class="col-xs-4 col-sm-4 col-md-3">
<a href="javascript:void(0);"> {{ item.name }} </a>
</td>
<td class="col-md-3 d-none d-md-block">{{ item.code }}</td>
<td class="col-md-2 d-none d-md-block">{{ item.rate }}</td>
<td class="col-xs-4 col-sm-4 col-md-2">
<label class="custom-toggle d-inline-block" name="staus-1">
<input
type="checkbox"
:checked="item.enabled"
@input="onSwitchUpdate(item)"
/>
<span
class="custom-toggle-slider rounded-circle status-green"
:data-label-on="translations.currencies.yes"
:data-label-off="translations.currencies.no"
>
</span>
</label>
</td>
<td class="col-xs-4 col-sm-4 col-md-2 text-center">
<div class="dropdown">
<a
class="btn btn-neutral btn-sm text-light items-align-center py-2"
href="#"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="fa fa-ellipsis-h text-muted"></i>
</a>
<tbody data-table-body>
<tr v-for="(item, index) in currencies" :key="index" data-table-list class="relative flex items-center border-b hover:bg-gray-100 px-1 flex-wrap group">
<td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-medium text-black">
{{ item.name }}
</td>
<td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 ltr:pr-6 rtl:pl-6 py-4 text-center whitespace-nowrap text-sm font-medium text-black">
{{ item.code }}
</td>
<td :class="current_tab == index ? 'hidden' : ''" class="w-4/12 relative ltr:pr-6 rtl:pl-6 py-4 ltr:text-right rtl:text-left whitespace-nowrap text-sm font-medium text-black">
{{ item.rate }}
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
>
<button
type="button"
class="dropdown-item"
@click="onEditItem(item, index)"
>
{{ translations.currencies.edit }}
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions " @click="onEditItem(item, index)">
<span class="material-icons-outlined text-purple text-lg">edit</span>
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
<span>{{ translations.currencies.edit }}</span>
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
</div>
</button>
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions " @click="onClickDelete(item)">
<span class="material-icons-outlined text-purple text-lg">delete</span>
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
<span>{{ translations.currencies.delete }}</span>
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
</div>
</button>
</div>
</td>
<td class="w-full p-0 current-tab" v-if="current_tab == index">
<div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 py-3">
<base-input name="name" data-name="name"
form-classes="sm:col-span-2"
class="required"
v-model="model.name"
:error="onFailErrorGet('name')"
/>
<base-input class="sm:col-span-2 required" :error="onFailErrorGet('code')">
<el-select name="code" v-model="model.select" @change="onChangeCodeItem(model.select)" filterable>
<el-option
v-for="option in currency_codes"
:key="option"
:label="option"
:value="option"
>
</el-option>
</el-select>
</base-input>
<base-input name="rate" data-name="rate" :placeholder="translations.currencies.rate"
form-classes="sm:col-span-2"
class="required"
v-model="model.rate"
:error="onFailErrorGet('rate')"
/>
<div class="flex justify-end items-center sm:col-span-6">
<base-button class=" flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100 ltr:mr-2 rtl:ml-2" @click="onCancelItem()">
{{ translations.currencies.cancel }}
</base-button>
<base-button class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="onEditForm(item)">
{{ translations.currencies.save }}
</base-button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="flex flex-col items-center">
<div v-if="!currencies.length" class="flex flex-col items-center gap-y-2">
<span class="text-dark">
{{ translations.currencies.no_currency }}
</span>
<span class="text-gray-700">
{{ translations.currencies.create_currency }}
</span>
</div>
<div v-if="currencies.length" class="w-full border-b hover:bg-gray-100" style="height:53px;">
<button type="button" class="w-full h-full flex items-center justify-center text-purple font-medium disabled:bg-gray-200" @click="onAddItem()">
<span class="material-icons-outlined text-base font-bold ltr:mr-1 rtl:ml-1">add</span>
<span class="border-b border-transparent transition-all">{{ translations.currencies.new_currency }}</span>
</button>
</div>
<button v-else type="button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100 mt-3" @click="onAddItem()">
{{ translations.currencies.new_currency }}
</button>
<div class="dropdown-divider"></div>
<button
type="button"
class="dropdown-item"
@click="onClickDelete(item)"
>
{{ translations.currencies.delete }}
</button>
</div>
</div>
</td>
<td class="w-100 p-0 current-tab" v-if="current_tab == index">
<div class="row pt-3 pb-3">
<div
class="form-container col-12 d-flex justify-content-between align-items-start"
>
<base-input
:label="translations.currencies.name"
name="name"
data-name="name"
:placeholder="translations.currencies.name"
prepend-icon="fas fa-font"
form-classes="col-md-3"
class="required"
v-model="model.name"
:error="onFailErrorGet('name')"
/>
<base-input
:label="translations.currencies.code"
class="required"
form-classes="col-md-3"
:error="onFailErrorGet('code')"
>
<el-select
name="code"
v-model="model.select"
@change="onChangeCodeItem(model.select)"
filterable
>
<template slot="prefix">
<span
class="el-input__suffix-inner el-select-icon"
>
<i
:class="'select-icon-position el-input__icon fa fa-code'"
></i>
</span>
</template>
<el-option
v-for="option in currency_codes"
:key="option"
:label="option"
:value="option"
>
</el-option> </el-select
></base-input>
<base-input
:label="translations.currencies.rate"
name="rate"
data-name="rate"
:placeholder="translations.currencies.rate"
prepend-icon="fas fa-percentage"
form-classes="col-md-3"
class="required"
v-model="model.rate"
:error="onFailErrorGet('rate')"
/>
<div class="mt-4 col-md-3 current-tab-btn">
<base-button
type="white"
native-type="button"
@click="onCancelItem()"
>
{{ translations.currencies.cancel }}</base-button
>
<base-button
type="success"
native-type="button"
@click="onEditForm(item)"
>
{{ translations.currencies.save }}</base-button
>
<div v-if="new_datas" class="grid sm:grid-cols-7 gap-x-8 gap-y-6 my-3.5 w-full">
<base-input :label="translations.currencies.name" name="name" data-name="name" :placeholder="translations.currencies.name"
class="sm:col-span-3 required"
v-model="model.name"
:error="onFailErrorGet('name')"
/>
<base-input :label="translations.currencies.code" class="sm:col-span-2 required" :error="onFailErrorGet('code')">
<el-select name="code" v-model="model.select" required="required" @change="onChangeCodeItem(model.select)"filterable>
<el-option
v-for="option in currency_codes"
:key="option"
:label="option"
:value="option"
>
</el-option>
</el-select>
</base-input>
<base-input :label="translations.currencies.rate" name="rate" data-name="rate" :placeholder="translations.currencies.rate"
class="sm:col-span-2 required"
v-model="model.rate"
:error="onFailErrorGet('rate')"
/>
<div class="flex items-center justify-end sm:col-span-7">
<base-button class=" flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100 ltr:mr-2 rtl:ml-2" @click="new_datas = false">
{{ translations.currencies.cancel }}
</base-button>
<base-button :disabled="button_loading" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="onSubmitForm()">
<i v-if="button_loading" class="submit-spin absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto"></i>
<span :class="[{'opacity-0': button_loading}]">
{{ translations.currencies.save }}
</span>
</base-button>
</div>
</div>
</div>
</div>
</td>
</tr>
<tr v-if="new_datas">
<td class="p-0">
<div class="row pt-3 pb-3">
<div
class="form-container col-12 d-flex justify-content-between align-items-start"
>
<base-input
:label="translations.currencies.name"
name="name"
data-name="name"
:placeholder="translations.currencies.name"
prepend-icon="fas fa-font"
class="required"
v-model="model.name"
:error="onFailErrorGet('name')"
/>
<base-input
:label="translations.currencies.code"
class="required"
:error="onFailErrorGet('code')"
>
<el-select
name="code"
v-model="model.select"
required="required"
@change="onChangeCodeItem(model.select)"
filterable
>
<template slot="prefix">
<span
class="el-input__suffix-inner el-select-icon"
>
<i
:class="'select-icon-position el-input__icon fa fa-code'"
></i>
</span>
</template>
<el-option
v-for="option in currency_codes"
:key="option"
:label="option"
:value="option"
>
</el-option> </el-select
></base-input>
<base-input
:label="translations.currencies.rate"
name="rate"
data-name="rate"
:placeholder="translations.currencies.rate"
prepend-icon="fas fa-percentage"
class="required"
v-model="model.rate"
:error="onFailErrorGet('rate')"
/>
<div>
<div class="d-flex">
<akaunting-radio-group
name="enabled"
:text="translations.currencies.enabled"
:enable="translations.currencies.yes"
:disable="translations.currencies.no"
:value="model.enabled"
>
</akaunting-radio-group>
</div>
</div>
<div class="mt-4">
<base-button
type="success"
native-type="button"
@click="onSubmitForm()"
>{{ translations.currencies.save }}</base-button
>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</form>
</div>
<div class="flex items-center justify-center mt-5 gap-x-10">
<base-button class="w-1/2 flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100" @click="prev()">
{{ translations.currencies.previous }}
</base-button>
<base-button class="w-1/2 relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="next()">
{{translations.currencies.next}}
</base-button>
</div>
</div>
<notifications></notifications>
<form id="form-dynamic-component" method="POST" action="#"></form>
<component
v-bind:is="component"
@deleted="onDeleteCurrency($event)"
></component>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-12 d-flex justify-content-between">
<base-button type="white" native-type="submit" @click="prev()">{{
translations.currencies.previous
}}</base-button>
<base-button type="white" native-type="submit" @click="next()">{{
translations.currencies.next
}}</base-button>
</div>
</div>
</div>
<component v-bind:is="component" @deleted="onDeleteCurrency($event)"></component>
</div>
</div>
</template>
<script>
import { Step, Steps, Select, Option } from "element-ui";
import AkauntingRadioGroup from "./../../components/forms/AkauntingRadioGroup";
import { Select, Option } from "element-ui";
import AkauntingRadioGroup from "./../../components/AkauntingRadioGroup";
import BulkAction from "./../../plugins/bulk-action";
import MixinsGlobal from "./../../mixins/global";
import WizardAction from "./../../mixins/wizardAction";
import WizardSteps from "./Steps.vue";
export default {
name: "Currencies",
@ -314,11 +197,10 @@ export default {
mixins: [MixinsGlobal, WizardAction],
components: {
[Step.name]: Step,
[Steps.name]: Steps,
[Select.name]: Select,
[Option.name]: Option,
AkauntingRadioGroup,
WizardSteps
},
props: {
@ -347,12 +229,6 @@ export default {
},
methods: {
onSwitchUpdate(item) {
this.onStatus(item.id, event);
this.onStatusControl(this.currencies, item.id, event);
},
onClickDelete(item) {
this.confirmDelete(
`${

134
resources/assets/js/views/wizard/Finish.vue
View File

@ -1,102 +1,65 @@
<template>
<div>
<h1 class="text-white">{{ translations.finish.title }}</h1>
<div class="card">
<div class="card-header wizard-header p-3">
<el-steps :active="active" finish-status="success" align-center>
<el-step :title="translations.company.title"></el-step>
<el-step :title="translations.currencies.title"></el-step>
<el-step :title="translations.taxes.title"></el-step>
<el-step :title="translations.finish.title"></el-step>
</el-steps>
</div>
<div class="card-body bg-default">
<div class="document-loading" v-if="pageLoad">
<div>
<i class="fas fa-spinner fa-pulse fa-7x"></i>
</div>
<div class="relative bg-body z-10 rounded-lg shadow-2xl py-10 ltr:pl-10 rtl:pr-10 overflow-hidden">
<div class="pr-10">
<WizardSteps :active_state="active"></WizardSteps>
</div>
<div class="row">
<div class="col-sm-12 col-md-12 col-lg-12 col-xl-12">
<div class="content-header">
<h3 class="text-white">
{{ translations.finish.recommended_apps }}
</h3>
<div class="flex flex-col justify-between" style="height:565px;">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin text-lg animate-spin text-9xl">data_usage</span>
</div>
<div class="row">
<div
v-for="(item, index) in modules"
:key="index"
class="col-md-3"
>
<div class="card">
<div class="card-header py-2">
<h4 class="ml--3 mb-0 float-left">
<a :href="route_url + '/apps/' + item.slug">{{ item.name }}</a>
</h4>
</div>
<a :href="route_url + '/apps/' + item.slug"
><img
v-for="(file, indis) in item.files"
:key="indis"
v-if="
file.media_type == 'image' &&
file.pivot.zone == 'thumbnail'
"
:src="file.path_string"
:alt="item.name"
class="card-img-top border-radius-none"
/></a>
<div class="card-footer py-2">
<div class="float-left ml--3 mt--1">
<i
v-for="(stars, indis) in item.vote"
:key="indis"
class="fa fa-star text-xs text-yellow"
></i>
<small class="text-xs"> {{ item.total_review }} </small>
<div class="flex mt-6">
<div class="w-full lg:w-1/2 ltr:pr-10 rtl:pl-10 mt-3">
<div class="grid sm:grid-cols-6">
<h1 class="sm:col-span-6 text-black-300 mb-2">
{{ translations.finish.recommended_apps }}
</h1>
<div v-for="(item, index) in modules" :key="index" class="sm:col-span-6 mb-6">
<a :href="route_url + '/apps/' + item.slug" class="flex items-center">
<div class="w-1/4">
<img v-for="(file, indis) in item.files" :key="indis" v-if="file.media_type == 'image' && file.pivot.zone == 'thumbnail'"
:src="file.path_string"
:alt="item.name"
class="rounded-lg object-cover"
/>
</div>
<div class="w-3/4 lg:ltr:pl-8 lg:rtl:pr-8">
<span class="font-medium">{{ item.name }}</span>
<div class="text-black-300 text-sm my-2" style="overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;"
v-html="item.description"></div>
</div>
</a>
</div>
</div>
<div class="float-right mr--3">
<small
><strong> {{ item.price }} </strong></small
>
</div>
</div>
</div>
</div>
<div class="relative w-1/2 right-0 ltr:pl-10 rtl:pr-10 mt-3 hidden: lg:flex lg:flex-col">
<div class="bg-purple rounded-tl-lg rounded-bl-lg p-6">
<div class="w-48 text-white rtl:float-left rtl:text-left text-2xl font-semibold leading-9">
{{ translations.finish.apps_managing }}
</div>
<div style="width:372px; height:372px;"></div>
<img :src="image_src" class="absolute top-0 right-2 top-12" alt="" />
</div>
<base-button class="flex items-center justify-center text-base rounded-lg disabled:opacity-50 relative m-auto bottom-40 bg-white hover:bg-gray-100 text-purple rounded-md py-3 px-5 font-semibold btn-default" @click="finish()">
{{ translations.finish.go_to_dashboard }}
</base-button>
</div>
</div>
<div class="col-md-12"><ul></ul></div>
</div>
</div>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-12 d-flex justify-content-between">
<base-button type="white" native-type="submit" @click="prev()">{{
translations.finish.previous
}}</base-button>
<base-button
type="success"
native-type="submit"
@click="finish()"
>{{ translations.finish.go_to_dashboard }}</base-button
>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import { Step, Steps } from "element-ui";
import WizardSteps from "./Steps.vue";
export default {
name: "Finish",
components: {
[Step.name]: Step,
[Steps.name]: Steps,
WizardSteps
},
props: {
@ -117,6 +80,7 @@ export default {
return {
active: 3,
route_url: url,
image_src: app_url + "/public/img/wizard-modules.png",
};
},
@ -131,7 +95,7 @@ export default {
this.$notify({
message: this.translations.finish.error_message,
timeout: 1000,
icon: "fas fa-bell",
icon: "",
type: 0
});
@ -151,4 +115,4 @@ export default {
},
},
};
</script>
</script>

72
resources/assets/js/views/wizard/Steps.vue Normal file
View File

@ -0,0 +1,72 @@
<template>
<div>
<nav aria-label="Progress">
<ol role="list" class="flex mb-10">
<li class="w-1/4">
<span class="pr-6 flex flex-col">
<span
:class="[{'bg-purple': active_state > 0}, {'bg-purple': active_state == 0}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent">Text</span>
<span :class="[{'font-bold': active_state == 0}, {'font-bold': active_state > 0}]" class="text-sm font-normal mt-2">{{ translations.company.title }}</span>
</span>
</li>
<li class="w-1/4">
<span class="px-3 flex flex-col">
<span
:class="[{'bg-purple': active_state > 1}, {'bg-purple': active_state == 1}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent">Text</span>
<span :class="[{'font-bold': active_state == 1}, {'font-bold': active_state > 1}]" class="text-sm font-normal mt-2">{{ translations.currencies.title }}</span>
</span>
</li>
<li class="w-1/4">
<span class="px-3 flex flex-col">
<span
:class="[{'bg-purple': active_state > 2}, {'bg-purple': active_state == 2}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent">Text</span>
<span :class="[{'font-bold': active_state == 2}, {'font-bold': active_state > 2}]" class="text-sm font-normal mt-2">{{ translations.taxes.title }}</span>
</span>
</li>
<li class="w-1/4">
<span class="pl-6 flex flex-col">
<span
:class="[{'bg-purple': active_state == 3}]"
class="w-full h-1 bg-gray-300 rounded-xl text-transparent">Text</span>
<span :class="[{'font-bold': active_state == 3}]" class="text-sm font-normal mt-2">{{ translations.finish.title }}</span>
</span>
</li>
</ol>
</nav>
</div>
</template>
<script>
export default {
name: "Steps",
components: {},
props: {
active_state: {
type: [Boolean, String, Number],
}
},
created() {
this.translations = wizard_translations;
},
data() {
return {
translations: {
company: {},
currencies: {},
taxes: {},
finish: {},
},
};
},
};
</script>

388
resources/assets/js/views/wizard/Taxes.vue
View File

@ -1,237 +1,165 @@
<template>
<div>
<h1 class="text-white">{{ translations.taxes.title }}</h1>
<div class="card">
<div class="card-header wizard-header p-3">
<el-steps :active="active" finish-status="success" align-center>
<el-step :title="translations.company.title"></el-step>
<el-step :title="translations.currencies.title"></el-step>
<el-step :title="translations.taxes.title"></el-step>
<el-step :title="translations.finish.title"></el-step>
</el-steps>
</div>
<div class="card-body">
<div class="document-loading" v-if="pageLoad">
<div>
<i class="fas fa-spinner fa-pulse fa-7x"></i>
</div>
</div>
<div class="d-flex justify-content-end mb-3">
<base-button
type="success"
native-type="button"
class="btn-sm"
@click="onAddItem()"
>{{ translations.taxes.add_new }}</base-button
>
</div>
<div class="row flex-column">
<form ref="form">
<table class="table table-flush table-hover" id="tbl-taxes">
<thead class="thead-light">
<tr class="row table-head-line">
<th class="col-xs-4 col-sm-4 col-md-3">
{{ translations.taxes.name }}
</th>
<th class="col-md-3 d-none d-md-block">
{{ translations.taxes.rate }}
</th>
<th class="col-xs-4 col-sm-4 col-md-3">
{{ translations.taxes.enabled }}
</th>
<th class="col-xs-4 col-sm-4 col-md-3 text-center">
{{ translations.taxes.actions }}
</th>
</tr>
</thead>
<tbody>
<tr
v-for="(item, index) in taxes"
:key="index"
class="row align-items-center border-top-1"
>
<td class="col-xs-4 col-sm-4 col-md-3 tax-name">
<a href="javascript:void(0);"> {{ item.name }} </a>
</td>
<td class="col-md-3 d-none d-md-block">{{ item.rate }}</td>
<td class="col-xs-4 col-sm-4 col-md-3">
<label class="custom-toggle d-inline-block" name="staus-1">
<input
type="checkbox"
:checked="item.enabled"
@input="onSwitchUpdate(item)"
/>
<span
class="custom-toggle-slider rounded-circle status-green"
:data-label-on="translations.taxes.yes"
:data-label-off="translations.taxes.no"
>
</span>
</label>
</td>
<td class="col-xs-4 col-sm-4 col-md-3 text-center">
<div class="dropdown">
<a
class="btn btn-neutral btn-sm text-light items-align-center py-2"
href="#"
role="button"
data-toggle="dropdown"
aria-haspopup="true"
aria-expanded="false"
>
<i class="fa fa-ellipsis-h text-muted"></i>
</a>
<div class="relative bg-body z-10 rounded-lg shadow-2xl p-10" style="height:675px;">
<WizardSteps :active_state="active"></WizardSteps>
<div
class="dropdown-menu dropdown-menu-right dropdown-menu-arrow"
>
<button
type="button"
class="dropdown-item"
@click="onEditItem(item, index)"
>
{{ translations.taxes.edit }}
<div class="flex flex-col justify-between overflow-y-auto" style="height: calc(100% - 53px)">
<div v-if="pageLoad" class="absolute left-0 right-0 top-0 bottom-0 w-full h-full bg-white rounded-lg flex items-center justify-center z-50">
<span class="material-icons form-spin animate-spin text-9xl">data_usage</span>
</div>
<div class="overflow-x-visible menu-scroll mt-1">
<form ref="form" class="py-2 align-middle inline-block min-w-full">
<table id="tbl-taxes" v-if="taxes.length" class="min-w-full divide-y divide-gray-200">
<thead class="thead-light">
<tr class="flex items-center px-1">
<th class="w-6/12 ltr:pr-6 rtl:pl-6 py-3 ltr:text-left rtl:text-right text-xs font-medium text-black tracking-wider">
{{ translations.taxes.name }}
</th>
<th class="w-6/12 ltr:pr-6 rtl:pl-6 py-3 ltr:text-right rtl:text-left text-xs font-medium text-black tracking-wider">
{{ translations.taxes.rate }}
</th>
</tr>
</thead>
<tbody data-table-body>
<tr v-for="(item, index) in taxes" :key="index" data-table-list class="relative flex items-center border-b hover:bg-gray-100 px-1 flex-wrap group">
<td :class="current_tab == index ? 'hidden' : ''" class="w-6/12 ltr:pr-6 rtl:pl-6 py-4 ltr:text-left rtl:text-right whitespace-nowrap text-sm font-medium text-black">
{{ item.name }}
</td>
<td :class="current_tab == index ? 'hidden' : ''" class="w-6/12 relative ltr:pr-6 rtl:pl-6 py-4 ltr:text-right rtl:text-left whitespace-nowrap text-sm font-medium text-black">
{{ item.rate }}
<div class="absolute ltr:right-12 rtl:left-12 -top-4 hidden items-center group-hover:flex">
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions " @click="onEditItem(item, index)">
<span class="material-icons-outlined text-purple text-lg">edit</span>
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
<span>{{ translations.taxes.edit }}</span>
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
</div>
</button>
<button type="button" class="relative bg-white hover:bg-gray-100 border py-0.5 px-1 cursor-pointer index-actions " @click="onClickDelete(item)">
<span class="material-icons-outlined text-purple text-lg">delete</span>
<div class="inline-block absolute invisible z-20 py-1 px-2 text-sm font-medium text-gray-900 bg-white rounded-lg border border-gray-200 shadow-sm opacity-0 whitespace-nowrap tooltip-content -top-10 -left-2" data-tooltip-placement="top">
<span>{{ translations.taxes.delete }}</span>
<div class="absolute w-2 h-2 -bottom-1 before:content-[' '] before:absolute before:w-2 before:h-2 before:bg-white before:border-gray-200 before:transform before:rotate-45 before:border before:border-t-0 before:border-l-0" data-popper-arrow></div>
</div>
</button>
</div>
</td>
<td class="w-full p-0 current-tab" v-if="current_tab == index">
<div class="grid sm:grid-cols-6 gap-x-8 gap-y-6 py-3">
<base-input name="name" data-name="name" :placeholder="translations.taxes.name"
form-classes="sm:col-span-2"
class="required"
v-model="model.name"
:error="onFailErrorGet('name')"
/>
<div class="sm:col-span-2"></div>
<base-input name="rate" data-name="rate" :placeholder="translations.taxes.rate"
form-classes="sm:col-span-2"
class="required"
v-model="model.rate"
:error="onFailErrorGet('rate')"
/>
<div class="flex justify-end items-center sm:col-span-6">
<base-button class="flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100 ltr:mr-2 rtl:ml-2" @click="onCancelItem()">
{{ translations.taxes.cancel }}
</base-button>
<base-button class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="onEditForm(item)">
{{ translations.taxes.save }}
</base-button>
</div>
</div>
</td>
</tr>
</tbody>
</table>
<div class="flex flex-col items-center">
<div v-if="!taxes.length" class="flex flex-col items-center gap-y-2">
<span class="text-dark">
{{ translations.taxes.no_taxes }}
</span>
<span class="text-gray-700">
{{ translations.taxes.create_task }}
</span>
</div>
<div v-if="taxes.length" class="w-full border-b hover:bg-gray-100" style="height:53px;">
<button type="button" class="w-full h-full flex items-center justify-center text-purple font-medium disabled:bg-gray-200" @click="onAddItem()">
<span class="material-icons-outlined text-base font-bold ltr:mr-1 rtl:ml-1">add</span>
{{ translations.taxes.new_tax }}
</button>
</div>
<button v-else type="button" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100 mt-3" @click="onAddItem()">
{{ translations.taxes.new_tax }}
</button>
<div class="dropdown-divider"></div>
<button
type="button"
class="dropdown-item"
@click="onClickDelete(item)"
>
{{ translations.taxes.delete }}
</button>
</div>
</div>
</td>
<td class="w-100 p-0 current-tab" v-if="current_tab == index">
<div class="row pt-3 pb-3">
<div
class="form-container col-12 d-flex justify-content-between align-items-start"
>
<base-input
:label="translations.taxes.name"
name="name"
data-name="name"
:placeholder="translations.taxes.name"
prepend-icon="fas fa-font"
form-classes="col-md-4"
class="required"
v-model="model.name"
:error="onFailErrorGet('name')"
<div v-if="new_datas" class="grid sm:grid-cols-4 gap-x-8 gap-y-6 my-3.5 w-full">
<base-input :label="translations.taxes.name" name="name" data-name="name" :placeholder="translations.taxes.name"
class="sm:col-span-2 required"
v-model="model.name"
:error="onFailErrorGet('name')"
/>
<base-input
:label="translations.taxes.rate"
name="rate"
data-name="rate"
:placeholder="translations.taxes.rate"
prepend-icon="fas fa-percentage"
form-classes="col-md-4"
class="required"
v-model="model.rate"
:error="onFailErrorGet('rate')"
<base-input :label="translations.taxes.rate" name="rate" data-name="rate"
:placeholder="translations.taxes.rate"
class="sm:col-span-2 required"
v-model="model.rate"
:error="onFailErrorGet('rate')"
/>
<div class="mt-4 col-md-4 current-tab-btn">
<base-button
type="white"
native-type="button"
@click="onCancelItem()"
>
{{ translations.taxes.cancel }}</base-button
>
<base-button
type="success"
native-type="button"
@click="onEditForm(item)"
>{{ translations.taxes.save }}</base-button
>
<div class="flex items-center justify-end sm:col-span-4">
<base-button class="flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100 ltr:mr-2 rtl:ml-2" @click="new_datas = false">
{{ translations.taxes.cancel }}
</base-button>
<base-button :disabled="button_loading" class="relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="onSubmitForm()">
<i v-if="button_loading" class="submit-spin absolute w-2 h-2 rounded-full left-0 right-0 -top-3.5 m-auto"></i>
<span :class="[{'opacity-0': button_loading}]">
{{ translations.taxes.save }}
</span>
</base-button>
</div>
</div>
</div>
</td>
</tr>
<tr v-if="new_datas">
<td class="p-0">
<div class="row pt-3 pb-3">
<div
class="form-container col-12 d-flex justify-content-between align-items-start"
>
<base-input
:label="translations.taxes.name"
name="name"
data-name="name"
:placeholder="translations.taxes.name"
prepend-icon="fas fa-font"
class="required"
v-model="model.name"
:error="onFailErrorGet('name')"
/>
<base-input
:label="translations.taxes.rate"
name="rate"
data-name="rate"
:placeholder="translations.taxes.rate"
prepend-icon="fas fa-percentage"
class="required"
v-model="model.rate"
:error="onFailErrorGet('rate')"
/>
<div>
<div class="d-flex">
<akaunting-radio-group
name="enabled"
:text="translations.taxes.enabled"
:enable="translations.taxes.yes"
:disable="translations.taxes.no"
:value="model.enabled"
>
</akaunting-radio-group>
</div>
</div>
<div class="mt-4">
<base-button
type="success"
native-type="button"
@click="onSubmitForm()"
>{{ translations.taxes.save }}</base-button
>
</div>
</div>
</div>
</td>
</tr>
</tbody>
</table>
</form>
</form>
</div>
<div class="flex items-center justify-center mt-5 gap-x-10">
<base-button class="w-1/2 flex items-center justify-center px-6 py-1.5 text-base rounded-lg bg-transparent hover:bg-gray-100" @click="prev()">
{{ translations.taxes.previous }}
</base-button>
<base-button class="w-1/2 relative flex items-center justify-center bg-green hover:bg-green-700 text-white px-6 py-1.5 text-base rounded-lg disabled:bg-green-100" @click="next()">
{{ translations.taxes.next }}
</base-button>
</div>
</div>
<notifications></notifications>
<form id="form-dynamic-component" method="POST" action="#"></form>
<component
v-bind:is="component"
@deleted="onDeleteCurrency($event)"
></component>
</div>
<div class="card-footer">
<div class="row">
<div class="col-md-12 d-flex justify-content-between">
<base-button type="white" native-type="submit" @click="prev()">{{
translations.taxes.previous
}}</base-button>
<base-button type="white" native-type="submit" @click="next()">{{
translations.taxes.next
}}</base-button>
</div>
</div>
</div>
<component v-bind:is="component" @deleted="onDeleteCurrency($event)"></component>
</div>
</div>
</template>
<script>
import { Step, Steps } from "element-ui";
import AkauntingRadioGroup from "./../../components/forms/AkauntingRadioGroup";
import AkauntingRadioGroup from "./../../components/AkauntingRadioGroup";
import BulkAction from "./../../plugins/bulk-action";
import MixinsGlobal from "./../../mixins/global";
import WizardAction from "./../../mixins/wizardAction";
import WizardSteps from "./Steps.vue";
export default {
name: "Taxes",
@ -239,9 +167,8 @@ export default {
mixins: [MixinsGlobal, WizardAction],
components: {
[Step.name]: Step,
[Steps.name]: Steps,
AkauntingRadioGroup,
WizardSteps
},
props: {
@ -262,16 +189,12 @@ export default {
return {
active: 2,
bulk_action: new BulkAction(url + "/settings/taxes"),
add_taxes: true,
new_add_taxes: false
};
},
methods: {
onSwitchUpdate(item) {
this.onStatus(item.id, event);
this.onStatusControl(this.taxes, item.id, event);
},
onClickDelete(item) {
this.confirmDelete(
`${
@ -307,8 +230,19 @@ export default {
);
},
onNewTax() {
this.new_add_taxes = true;
this.add_taxes = false;
},
onCancelNewTax() {
this.new_add_taxes = false;
this.add_taxes = true;
},
onSubmitForm() {
this.onSubmitEvent("POST", url + "/wizard/taxes", "type", this.taxes);
},
prev() {
@ -323,9 +257,3 @@ export default {
},
};
</script>
<style scoped>
.current-tab-btn {
padding: 0 80px;
}
</style>