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

refs #1075 Selectbox add new button action added.

Browse Source
This commit is contained in:
Cüneyt Şentürk 2020-01-13 12:37:05 +03:00
parent 1c2ebeed67
commit 679911d0ef
8 changed files with 352 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

216
resources/assets/js/components/AkauntingModalAddNew.vue Normal file
View File

@ -0,0 +1,216 @@
<template>
<SlideYUpTransition :duration="animationDuration">
<div class="modal modal-add-new fade"
@click.self="closeModal"
:class="[{'show d-block': show}, {'d-none': !show}]"
v-show="show"
tabindex="-1"
role="dialog"
:aria-hidden="!show">
<div class="modal-dialog">
<slot name="modal-content">
<div class="modal-content">
<div class="card-header pb-2">
<slot name="card-header">
<h4 class="float-left"> {{ title }} </h4>
<button type="button" class="close" @click="onCancel" aria-hidden="true">&times;</button>
</slot>
</div>
<slot name="modal-body">
<div class="modal-body" v-if="!is_component" v-html="message">
</div>
<div class="modal-body" v-else>
<form id="form-create" method="POST" action="#"/>
<component v-bind:is="component"></component>
</div>
</slot>
<div class="card-footer border-top-0">
<slot name="card-footer">
<div class="float-right">
<button type="button" class="btn btn-icon" :class="buttons.cancel.class" @click="onCancel">
<span class="btn-inner--icon"><i :class="buttons.cancel.icon"></i></span>
<span class="btn-inner--text">{{ buttons.cancel.text }}</span>
</button>
<button :disabled="form.loading" type="button" class="btn btn-icon button-submit" :class="buttons.confirm.class" @click="onSubmit">
<div v-if="form.loading" class="aka-loader-frame btn-delete"><div class="aka-loader"></div></div>
<span v-if="!form.loading" class="btn-inner--icon"><i :class="buttons.confirm.icon"></i></span>
<span v-if="!form.loading" class="btn-inner--text">{{ buttons.confirm.text }}</span>
</button>
</div>
</slot>
</div>
</div>
</slot>
</div>
</div>
</SlideYUpTransition>
</template>
<script>
import { SlideYUpTransition } from "vue2-transitions";
import AkauntingModal from './AkauntingModal';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
import AkauntingDate from './AkauntingDate';
import AkauntingRecurring from './AkauntingRecurring';
import Form from './../plugins/form';
import { Alert, ColorPicker } from 'element-ui';
export default {
name: 'akaunting-modal-add-new',
components: {
SlideYUpTransition,
AkauntingRadioGroup,
AkauntingSelect,
AkauntingModal,
AkauntingDate,
AkauntingRecurring,
[ColorPicker.name]: ColorPicker,
},
props: {
show: Boolean,
is_component: Boolean,
title: {
type: String,
default: '',
description: "Modal header title"
},
message: {
type: String,
default: '',
description: "Modal body message"
},
buttons: {
type: Object,
default: function () {
return {
cancel: {
text: 'Cancel',
icon: 'fas fa-times',
class: 'btn-outline-secondary',
},
confirm: {
text: 'Save',
icon: 'fas fa-save',
class: 'btn-success',
}
};
},
description: "Modal footer button"
},
animationDuration: {
type: Number,
default: 800,
description: "Modal transition duration"
}
},
data() {
return {
form: new Form('form-create'),
display: this.show,
component:'',
};
},
mounted() {
if (this.is_component) {
this.component = Vue.component('add-new-component', (resolve, reject) => {
resolve({
template : '<div id="modal-add-new-form">' + this.message + '</div>',
components: {
AkauntingRadioGroup,
AkauntingSelect,
AkauntingModal,
AkauntingDate,
AkauntingRecurring,
[ColorPicker.name]: ColorPicker,
},
created: function() {
this.form = new Form('form-create');
},
mounted() {
let form_id = document.getElementById('modal-add-new-form').children[0].id;
this.form = new Form(form_id);
},
data: function () {
return {
form: {},
color: '#55588b',
predefineColors: [
'#3c3f72',
'#55588b',
'#e5e5e5',
'#328aef',
'#efad32',
'#ef3232',
'#efef32'
]
}
},
methods: {
onChangeColor() {
this.form.color = this.color;
},
onChangeColorInput() {
this.color = this.form.color;
}
}
})
});
}
},
methods: {
closeModal() {
this.$emit("update:show", false);
this.$emit("close");
},
onSubmit() {
this.form = this.$children[0].$children[0].form;
this.form.loading = true;
this.$emit("submit", this.form);
},
onCancel() {
this.$emit("cancel");
}
},
watch: {
show(val) {
let documentClasses = document.body.classList;
if (val) {
documentClasses.add("modal-open");
} else {
documentClasses.remove("modal-open");
}
}
}
}
</script>
<style>
.modal.show {
background-color: rgba(0, 0, 0, 0.3);
}
</style>

146
resources/assets/js/components/AkauntingSelect.vue
View File

@ -6,15 +6,16 @@
<el-select v-model="real_model" @input="change" disabled filterable v-if="disabled"
:placeholder="placeholder">
<div v-if="addNew.status && selectOptions.lenght > 0" class="el-select-dropdown__wrap" slot="empty">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<span></span>
</div>
<div v-if="selectOptions.lenght <= 0" class="el-select-dropdown__wrap" slot="empty">
<span>
<li v-if="addNew.status" class="el-select-dropdown__item hover" @click="onAddItem">
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</span>
</ul>
</div>
<template slot="prefix">
@ -49,10 +50,18 @@
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && !multiple"
:placeholder="placeholder">
<div v-if="addNew.status" class="el-select-dropdown__wrap" slot="empty">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<span></span>
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</ul>
</div>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
@ -85,10 +94,18 @@
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && !collapse" multiple
:placeholder="placeholder">
<div v-if="addNew.status" class="el-select-dropdown__wrap" slot="empty">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<span></span>
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</ul>
</div>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
@ -121,10 +138,18 @@
<el-select v-model="real_model" @input="change" filterable v-if="!disabled && multiple && collapse" multiple collapse-tags
:placeholder="placeholder">
<div v-if="addNew.status" class="el-select-dropdown__wrap" slot="empty">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<span></span>
</div>
<div v-else-if="addNew.status && options.length == 0" slot="empty">
<ul class="el-scrollbar__view el-select-dropdown__list">
<li class="el-select-dropdown__item hover" @click="onAddItem">
<span>{{ add_new_text }}</span>
</li>
</ul>
</div>
<template slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
@ -155,13 +180,14 @@
</li>
</el-select>
<component v-bind:is="add_new_html" @interface="onRedirectConfirm"></component>
<component v-bind:is="add_new_html" @submit="onSubmit"></component>
</base-input>
</template>
<script>
import { Select, Option, OptionGroup } from 'element-ui';
import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';
import AkauntingModalAddNew from './AkauntingModalAddNew';
import AkauntingModal from './AkauntingModal';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect';
@ -177,6 +203,13 @@ export default {
[Select.name]: Select,
[Option.name]: Option,
[OptionGroup.name]: OptionGroup,
[ColorPicker.name]: ColorPicker,
AkauntingModalAddNew,
AkauntingRadioGroup,
AkauntingSelect,
AkauntingModal,
AkauntingDate,
AkauntingRecurring,
},
props: {
@ -209,7 +242,8 @@ export default {
status: false,
path: null,
type: 'modal', // modal, inline
field: 'name'
field: 'name',
buttons: {}
};
},
description: "Selectbox Add New Item Feature"
@ -223,10 +257,12 @@ export default {
data() {
return {
add_new: this.addNew,
add_new_text: this.addNew.text,
selectOptions: this.options,
real_model: this.model,
add_new_html: '',
form: {},
}
},
@ -246,18 +282,11 @@ export default {
// Get Select Input value
var value = this.$children[0].$children[0].$children[0].$refs.input.value;
if (this.addNew.type == 'inline') {
if (this.add_new.type == 'inline') {
this.addInline(value);
} else {
this.onModal(value);
}
/*
this.$emit('new_item', {
value: value,
path: this.addNew.path,
title: this.addNew.text,
});
*/
},
addInline(value) {
@ -265,70 +294,42 @@ export default {
},
onModal(value) {
let add_new = this.addNew;
let add_new = this.add_new;
axios.get(this.addNew.path)
axios.get(this.add_new.path)
.then(response => {
add_new.modal = true;
add_new.status = true;
add_new.html = response.data.html;
this.$children[0].$children[0].visible = false;
this.add_new_html = Vue.component('add-new-component', function (resolve, reject) {
resolve({
template: '<div><akaunting-modal :show="addNew.modal" @cancel="addNew.modal = false" :title="addNew.text" :message="addNew.html">' +
+ '<template #card-footer>'
+ '<div class="float-right">'
+ '<button type="button" class="btn btn-outline-secondary">'
+ '<span>Cancel</span>'
+ '</button>'
+ '<button type="button" class="btn btn-success button-submit">'
+ '<div class="aka-loader d-none"></div>'
+ '<span>Confirm</span>'
+ '</button>'
+ '</div>'
+ '</template>'
+ '</akaunting-modal></div>',
template: '<div><akaunting-modal-add-new :show="add_new.status" @submit="onSubmit" @cancel="add_new.status = false" :buttons="add_new.buttons" :title="add_new.text" :is_component=true :message="add_new.html"></akaunting-modal-add-new></div>',
components: {
AkauntingModalAddNew,
AkauntingRadioGroup,
AkauntingSelect,
AkauntingModal,
AkauntingDate,
AkauntingRecurring,
[ColorPicker.name]: ColorPicker,
},
data: function () {
return {
form: new Form('form-create-category'),
addNew: add_new,
add_new: add_new,
}
},
methods: {
onRedirectConfirm() {
let redirect_form = new Form('redirect-form');
this.$emit('interface', redirect_form);
onSubmit(event) {
this.$emit('submit', event);
}
}
})
});
/*
this.selectOptions[3] = value;
let newOption = {
value: "3",
currentLabel: value,
label: value
};
this.$children[0].$children[0].handleOptionSelect(newOption);
this.$children[0].$children[0].onInputChange('3');
this.real_model = "3";
this.$emit('change', this.real_model);
*/
})
.catch(e => {
this.errors.push(e);
@ -338,20 +339,27 @@ export default {
});
},
onRedirectConfirm() {
this.redirectForm = new Form('redirect-form');
onSubmit(event) {
this.form = event;
axios.post(this.redirectForm.action, this.redirectForm.data())
axios.post(this.form.action, this.form.data())
.then(response => {
if (response.data.redirect) {
location = response.data.redirect;
}
this.form.loading = false;
if (response.data.success) {
location.reload();
this.selectOptions[response.data.data.id] = response.data.data['name'];
this.real_model = response.data.data.id.toString();
this.change();
this.add_new.status = false;
}
})
.catch(error => {
this.form.loading = false;
this.form.onFail(error);
this.method_show_html = error.message;
});
},
@ -364,8 +372,14 @@ export default {
watch: {
options: function (options) {
// update options
this.selectOptions = options;
//this.selectOptions = options;
}
},
}
</script>
<style scoped>
.form-group .modal {
z-index: 3050;
}
</style>

15
resources/views/modals/categories/create.blade.php
View File

@ -10,6 +10,21 @@
<div class="row">
{{ Form::textGroup('name', trans('general.name'), 'id-card-o') }}
@stack('color_input_start')
<div class="form-group col-md-6 required {{ $errors->has('color') ? 'has-error' : ''}}">
{!! Form::label('color', trans('general.color'), ['class' => 'form-control-label']) !!}
<div class="input-group input-group-merge" id="category-color-picker">
<div class="input-group-prepend">
<span class="input-group-text">
<el-color-picker v-model="color" size="mini" :predefine="predefineColors" @change="onChangeColor"></el-color-picker>
</span>
</div>
{!! Form::text('color', '#55588b', ['v-model' => 'form.color', '@input' => 'onChangeColorInput', 'id' => 'color', 'class' => 'form-control color-hex', 'required' => 'required']) !!}
</div>
{!! $errors->first('color', '<p class="help-block">:message</p>') !!}
</div>
@stack('color_input_end')
{!! Form::hidden('type', $type, []) !!}
{!! Form::hidden('enabled', '1', []) !!}
</div>

1
resources/views/modals/customers/create.blade.php
View File

@ -18,6 +18,7 @@
{{ Form::textareaGroup('address', trans('general.address')) }}
{{ Form::hidden('type', 'customer') }}
{!! Form::hidden('enabled', '1', []) !!}
</div>
{!! Form::close() !!}

1
resources/views/modals/vendors/create.blade.php vendored
View File

@ -18,6 +18,7 @@
{{ Form::textareaGroup('address', trans('general.address')) }}
{{ Form::hidden('type', 'vendor') }}
{!! Form::hidden('enabled', '1', []) !!}
</div>
{!! Form::close() !!}

14
resources/views/partials/form/multi_select_add_new_group.blade.php
View File

@ -15,7 +15,19 @@
'text' => trans('general.form.add_new', ['field' => $text]),
'path' => isset($attributes['path']) ? $attributes['path']: false,
'type' => isset($attributes['type']) ? $attributes['type'] : 'modal',
'field' => isset($attributes['field']) ? $attributes['field'] : 'name'
'field' => isset($attributes['field']) ? $attributes['field'] : 'name',
'buttons' => [
'cancel' => [
'text' => trans('general.cancel'),
'icon' => 'fas fa-times',
'class' => 'btn-outline-secondary'
],
'confirm' => [
'text' => trans('general.save'),
'icon' => 'fas fa-save',
'class' => 'btn-success'
]
]
])}}"
@if (!empty($attributes['collapse']))
:collapse="true"

14
resources/views/partials/form/select_add_new_group.blade.php
View File

@ -13,7 +13,19 @@
'text' => trans('general.form.add_new', ['field' => $text]),
'path' => isset($attributes['path']) ? $attributes['path']: false,
'type' => isset($attributes['type']) ? $attributes['type'] : 'modal',
'field' => isset($attributes['field']) ? $attributes['field'] : 'name'
'field' => isset($attributes['field']) ? $attributes['field'] : 'name',
'buttons' => [
'cancel' => [
'text' => trans('general.cancel'),
'icon' => 'fas fa-times',
'class' => 'btn-outline-secondary'
],
'confirm' => [
'text' => trans('general.save'),
'icon' => 'fas fa-save',
'class' => 'btn-success'
]
]
])}}"
@interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : 'form.' . $name . ' = $event' }}"
@if (!empty($attributes['change']))

14
resources/views/partials/form/select_group_add_new_group.blade.php
View File

@ -13,7 +13,19 @@
'text' => trans('general.form.add_new', ['field' => $text]),
'path' => isset($attributes['path']) ? $attributes['path']: false,
'type' => isset($attributes['type']) ? $attributes['type'] : 'modal',
'field' => isset($attributes['field']) ? $attributes['field'] : 'name'
'field' => isset($attributes['field']) ? $attributes['field'] : 'name',
'buttons' => [
'cancel' => [
'text' => trans('general.cancel'),
'icon' => 'fas fa-times',
'class' => 'btn-outline-secondary'
],
'confirm' => [
'text' => trans('general.save'),
'icon' => 'fas fa-save',
'class' => 'btn-success'
]
]
])}}"
:group="true"
@interface="{{ !empty($attributes['v-model']) ? $attributes['v-model'] . ' = $event' : 'form.' . $name . ' = $event' }}"