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

Index page path changes..

Browse Source
This commit is contained in:
Cüneyt Şentürk
2020-02-02 21:08:00 +03:00
parent 455e9efcdd
commit 7b3863b1d5
23 changed files with 368 additions and 300 deletions
Download Patch File Download Diff File Expand all files Collapse all files

260
resources/assets/js/components/AkauntingSearch.vue
View File

@ -1,131 +1,175 @@
<template>
<base-input :label="title"
:name="name"
:class="formClasses"
:error="formError">
<el-select
:class="'pl-20 mr-40'"
v-model="real_model"
@input="change"
filterable
remote
reserve-keyword
:placeholder="placeholder"
:remote-method="remoteMethod"
:loading="loading">
<div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty loading">
{{ loadingText }}
</p>
</div>
<el-select @input="change" filterable :placeholder="placeholder">
<div v-else-if="options.length != 0" class="el-select-dropdown__wrap" slot="empty">
<p class="el-select-dropdown__empty">
{{ noMatchingDataText }}
</p>
</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>
</span>
</template>
<div v-else-if="options.length == 0" slot="empty">
<p class="el-select-dropdown__empty">
{{ noDataText }}
</p>
</div>
<el-option v-if="!group" v-for="(label, value) in selectOptions"
<template v-if="icon" slot="prefix">
<span class="el-input__suffix-inner el-select-icon">
<i :class="'select-icon-position el-input__icon fa fa-' + icon"></i>
</span>
</template>
<el-option v-if="!group" v-for="option in selectOptions"
:key="option.id"
:label="option.name"
:value="option.id">
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
</el-option>
<el-option-group
v-if="group"
v-for="(options, name) in selectOptions"
:key="name"
:label="name">
<el-option
v-for="(label, value) in options"
:key="value"
:label="label"
:value="value">
</el-option>
</el-option-group>
</el-select>
</base-input>
</el-option-group>
</el-select>
</template>
<style>
.el-select {
display: inline;
}
</style>
<script>
import { Select, Option, OptionGroup } from 'element-ui';
import { Select, Option, OptionGroup } from 'element-ui';
export default {
components: {
[Select.name]: Select,
[Option.name]: Option,
[OptionGroup.name]: OptionGroup,
},
export default {
name: 'akaunting-select',
props: {
title: {
type: String,
default: '',
description: "Modal header title"
},
placeholder: {
type: String,
default: '',
description: "Modal header title"
},
formClasses: null,
formError: null,
name: null,
value: null,
options: null,
model: null,
icon: {
type: String,
description: "Prepend icon (left)"
components: {
[Select.name]: Select,
[Option.name]: Option,
[OptionGroup.name]: OptionGroup,
},
group: false,
multiple:false,
disabled:false,
collapse: false
},
data() {
return {
isOpen: false,
selectOptions: this.options,
real_model: this.model,
}
},
methods: {
toggleDropDown() {
this.isOpen = !this.isOpen;
this.$emit("change", this.isOpen);
},
closeDropDown() {
this.isOpen = false;
this.$emit("change", this.isOpen);
}
},
directives: {
'click-outside': {
bind: function(el, binding, vNode) {
// Provided expression must evaluate to a function.
if (typeof binding.value !== 'function') {
const compName = vNode.context.name
let warn = `[Vue-click-outside:] provided expression '${binding.expression}' is not a function, but has to be`
if (compName) { warn += `Found in component '${compName}'` }
console.warn(warn)
}
// Define Handler and cache it on the element
const bubble = binding.modifiers.bubble
const handler = (e) => {
if (bubble || (!el.contains(e.target) && el !== e.target)) {
binding.value(e)
}
}
el.__vueClickOutside__ = handler
// add Event Listeners
document.addEventListener('click', handler)
props: {
name: {
type: String,
default: null,
description: "Selectbox attribute name"
},
placeholder: {
type: String,
default: '',
description: "Selectbox input placeholder text"
},
options: null,
value: {
type: String,
default: null,
description: "Selectbox selected value"
},
unbind: function(el, binding) {
// Remove Event Listeners
document.removeEventListener('click', el.__vueClickOutside__)
el.__vueClickOutside__ = null
icon: {
type: String,
description: "Prepend icon (left)"
},
group: {
type: Boolean,
default: false,
description: "Selectbox option group status"
},
loadingText: {
type: String,
default: 'Loading...',
description: "Selectbox loading message"
},
noDataText: {
type: String,
default: 'No Data',
description: "Selectbox empty options message"
},
noMatchingDataText: {
type: String,
default: 'No Matchign Data',
description: "Selectbox search option not found item message"
},
remoteAction: {
type: String,
default: null,
description: "Selectbox remote action path"
},
remoteType: {
type: String,
default: 'invoice',
description: "Ger remote item type."
},
},
data() {
return {
list: [],
selectOptions: this.options,
real_model: this.model,
loading: false,
}
}
},
mounted() {
this.real_model = this.value;
this.$emit('interface', this.real_model);
},
methods: {
change() {
this.$emit('change', this.real_model);
this.$emit('interface', this.real_model);
this.selectOptions.forEach(item => {
if (item.id == this.real_model) {
this.$emit('label', item.name);
this.$emit('option', item);
return;
}
});
},
remoteMethod() {
},
},
watch: {
options: function (options) {
// update options
//this.selectOptions = options;
}
},
}
}
</script>