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

Selectbox addnew style changes.

Browse Source
This commit is contained in:
Cüneyt Şentürk 2020-03-07 16:17:24 +03:00
parent c0d97176e5
commit 7adcadcff8
2 changed files with 109 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -570,7 +570,7 @@ export default {
onModal(value) { onModal(value) {
let add_new = this.add_new; let add_new = this.add_new;
axios.get(this.add_new.path) window.axios.get(this.add_new.path)
.then(response => { .then(response => {
add_new.show = true; add_new.show = true;
add_new.html = response.data.html; add_new.html = response.data.html;
@ -625,7 +625,7 @@ export default {
let data = this.form.data(); let data = this.form.data();
FormData.prototype.appendRecursive = function(data, wrapper = null) { FormData.prototype.appendRecursive = function(data, wrapper = null) {
for(var name in data) { for(var name in data) {
if (wrapper) { if (wrapper) {
if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) { if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
@ -661,7 +661,7 @@ export default {
if (response.data.success) { if (response.data.success) {
this.selectOptions[response.data.data.id] = response.data.data['name']; this.selectOptions[response.data.data.id] = response.data.data['name'];
this.new_options[response.data.data.id] = response.data.data.id; this.new_options[response.data.data.id] = response.data.data['name'];
this.real_model = response.data.data.id.toString(); this.real_model = response.data.data.id.toString();
this.change(); this.change();
@ -696,6 +696,14 @@ export default {
options: function (options) { options: function (options) {
// update options // update options
this.selectOptions = options; this.selectOptions = options;
if (Object.keys(this.new_options).length) {
for (let [key, value] of Object.entries(this.new_options)) {
if (!this.selectOptions[key]) {
this.selectOptions[key] = value;
}
}
}
}, },
value: function (value) { value: function (value) {

107
resources/assets/js/components/AkauntingSelectRemote.vue
View File

@ -1,5 +1,16 @@
<template> <template>
<base-input v-if="title" :label="title" :name="name" :class="formClasses" :error="formError"> <base-input
v-if="title"
:label="title"
:name="name"
:readonly="readonly"
:disabled="disabled"
:class="[
{'readonly': readonly},
{'disabled': disabled},
formClasses
]"
:error="formError">
<el-select v-model="real_model" @input="change" disabled filterable v-if="disabled" <el-select v-model="real_model" @input="change" disabled filterable v-if="disabled"
:placeholder="placeholder"> :placeholder="placeholder">
<div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty"> <div v-if="addNew.status && options.length != 0" class="el-select-dropdown__wrap" slot="empty">
@ -44,6 +55,8 @@
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option> </el-option>
<el-option-group <el-option-group
@ -56,6 +69,8 @@
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option> </el-option>
</el-option-group> </el-option-group>
@ -113,6 +128,8 @@
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option> </el-option>
<el-option-group <el-option-group
@ -125,6 +142,8 @@
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option> </el-option>
</el-option-group> </el-option-group>
@ -182,6 +201,8 @@
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option> </el-option>
<el-option-group <el-option-group
@ -194,6 +215,8 @@
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option> </el-option>
</el-option-group> </el-option-group>
@ -251,6 +274,8 @@
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option> </el-option>
<el-option-group <el-option-group
@ -263,6 +288,8 @@
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option> </el-option>
</el-option-group> </el-option-group>
@ -281,6 +308,8 @@
<select :name="name" class="d-none" v-model="real_model"> <select :name="name" class="d-none" v-model="real_model">
<option v-for="(label, value) in selectOptions" :value="value">{{ label }}</option> <option v-for="(label, value) in selectOptions" :value="value">{{ label }}</option>
</select> </select>
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[real_model]">{{ new_text }}</span>
</base-input> </base-input>
<el-select v-else <el-select v-else
@ -341,6 +370,8 @@
:key="option.id" :key="option.id"
:label="option.name" :label="option.name"
:value="option.id"> :value="option.id">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span
</el-option> </el-option>
<el-option-group <el-option-group
@ -353,6 +384,8 @@
:key="value" :key="value"
:label="label" :label="label"
:value="value"> :value="value">
<span class="float-left">{{ label }}</span>
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[value]">{{ new_text }}</span>
</el-option> </el-option>
</el-option-group> </el-option-group>
@ -364,6 +397,8 @@
</span> </span>
</div> </div>
</el-option> </el-option>
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[real_model]">{{ new_text }}</span>
</el-select> </el-select>
</template> </template>
@ -374,6 +409,7 @@ import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';
import AkauntingModalAddNew from './AkauntingModalAddNew'; import AkauntingModalAddNew from './AkauntingModalAddNew';
import AkauntingModal from './AkauntingModal'; import AkauntingModal from './AkauntingModal';
import AkauntingMoney from './AkauntingMoney';
import AkauntingRadioGroup from './forms/AkauntingRadioGroup'; import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
import AkauntingSelect from './AkauntingSelect'; import AkauntingSelect from './AkauntingSelect';
import AkauntingDate from './AkauntingDate'; import AkauntingDate from './AkauntingDate';
@ -393,6 +429,7 @@ export default {
AkauntingRadioGroup, AkauntingRadioGroup,
AkauntingSelect, AkauntingSelect,
AkauntingModal, AkauntingModal,
AkauntingMoney,
AkauntingDate, AkauntingDate,
AkauntingRecurring, AkauntingRecurring,
}, },
@ -430,7 +467,11 @@ export default {
}, },
options: null, options: null,
model: null, model: {
type: [String, Number],
default: '',
description: "Selectbox selected model"
},
icon: { icon: {
type: String, type: String,
@ -446,6 +487,7 @@ export default {
path: null, path: null,
type: 'modal', // modal, inline type: 'modal', // modal, inline
field: 'name', field: 'name',
new_text: 'New',
buttons: {} buttons: {}
}; };
}, },
@ -462,6 +504,11 @@ export default {
default: false, default: false,
description: "Multible feature status" description: "Multible feature status"
}, },
readonly: {
type: Boolean,
default: false,
description: "Selectbox disabled status"
},
disabled: { disabled: {
type: Boolean, type: Boolean,
default: false, default: false,
@ -509,16 +556,29 @@ export default {
data() { data() {
return { return {
list: [], list: [],
add_new: this.addNew, add_new: {
text: this.addNew.text,
show: false,
path: this.addNew.path,
type: this.addNew.type, // modal, inline
field: this.addNew.name,
buttons: this.addNew.buttons
},
add_new_text: this.addNew.text, add_new_text: this.addNew.text,
new_text: this.addNew.new_text,
selectOptions: this.options, selectOptions: this.options,
real_model: this.model, real_model: this.model,
add_new_html: '', add_new_html: '',
form: {}, form: {},
loading: false, loading: false,
new_options: false,
} }
}, },
created() {
this.new_options = {};
},
mounted() { mounted() {
this.real_model = this.value; this.real_model = this.value;
@ -601,7 +661,7 @@ export default {
}, },
addInline(value) { addInline(value) {
axios.post(this.add_new.path, { window.axios.post(this.add_new.path, {
'_token': window.Laravel.csrfToken, '_token': window.Laravel.csrfToken,
'type': 'inline', 'type': 'inline',
field: this.add_new.field, field: this.add_new.field,
@ -612,6 +672,7 @@ export default {
this.selectOptions = []; this.selectOptions = [];
this.selectOptions.push(response.data.data); this.selectOptions.push(response.data.data);
this.new_options[response.data.data.id] = response.data.data.id;
this.real_model = response.data.data.id; this.real_model = response.data.data.id;
this.change(); this.change();
@ -631,9 +692,9 @@ export default {
onModal(value) { onModal(value) {
let add_new = this.add_new; let add_new = this.add_new;
axios.get(this.add_new.path) window.axios.get(this.add_new.path)
.then(response => { .then(response => {
add_new.status = true; add_new.show = true;
add_new.html = response.data.html; add_new.html = response.data.html;
if (this.title) { if (this.title) {
@ -644,13 +705,14 @@ export default {
this.add_new_html = Vue.component('add-new-component', function (resolve, reject) { this.add_new_html = Vue.component('add-new-component', function (resolve, reject) {
resolve({ resolve({
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>', template: '<div><akaunting-modal-add-new :show="add_new.show" @submit="onSubmit" @cancel="onCancel" :buttons="add_new.buttons" :title="add_new.text" :is_component=true :message="add_new.html"></akaunting-modal-add-new></div>',
components: { components: {
AkauntingModalAddNew, AkauntingModalAddNew,
AkauntingRadioGroup, AkauntingRadioGroup,
AkauntingSelect, AkauntingSelect,
AkauntingModal, AkauntingModal,
AkauntingMoney,
AkauntingDate, AkauntingDate,
AkauntingRecurring, AkauntingRecurring,
[ColorPicker.name]: ColorPicker, [ColorPicker.name]: ColorPicker,
@ -665,6 +727,10 @@ export default {
methods: { methods: {
onSubmit(event) { onSubmit(event) {
this.$emit('submit', event); this.$emit('submit', event);
},
onCancel(event) {
this.$emit('cancel', event);
} }
} }
}) })
@ -681,9 +747,11 @@ export default {
onSubmit(event) { onSubmit(event) {
this.form = event; this.form = event;
this.loading = true;
let data = this.form.data(); let data = this.form.data();
FormData.prototype.appendRecursive = function(data, wrapper = null) { FormData.prototype.appendRecursive = function(data, wrapper = null) {
for(var name in data) { for(var name in data) {
if (wrapper) { if (wrapper) {
if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) { if ((typeof data[name] == 'object' || data[name].constructor === Array) && ((data[name] instanceof File != true ) && (data[name] instanceof Blob != true))) {
@ -719,11 +787,15 @@ export default {
if (response.data.success) { if (response.data.success) {
this.selectOptions[response.data.data.id] = response.data.data['name']; this.selectOptions[response.data.data.id] = response.data.data['name'];
this.new_options[response.data.data.id] = response.data.data['name'];
this.real_model = response.data.data.id.toString(); this.real_model = response.data.data.id.toString();
this.change(); this.change();
//this.add_new.status = false; //this.add_new.show = false;
this.add_new.html = '';
this.add_new_html = null;
} }
}) })
.catch(error => { .catch(error => {
@ -734,6 +806,16 @@ export default {
this.method_show_html = error.message; this.method_show_html = error.message;
}); });
}, },
onCancel() {
this.add_new.show = false;
this.add_new.html = null;
this.add_new_html = null;
},
addModal() {
},
}, },
watch: { watch: {
@ -803,4 +885,11 @@ export default {
.el-select__footer div span { .el-select__footer div span {
margin-left: 5px; margin-left: 5px;
} }
.badge-resize {
float: right;
margin-top: -32px;
margin-right: 35px;
position: relative;
}
</style> </style>