akaunting 3.0 (the last dance)
This commit is contained in:
Burak Civan
@ -17,23 +17,24 @@
|
||||
:readonly="readonly"
|
||||
:collapse-tags="collapse"
|
||||
:loading="loading"
|
||||
class="forms"
|
||||
>
|
||||
<div v-if="loading" class="el-select-dropdown__wrap" slot="empty">
|
||||
<p class="el-select-dropdown__empty loading">
|
||||
{{ loadingText }}
|
||||
<p class="el-select-dropdown__empty pt-2 pb-0 loading">
|
||||
<span class="material-icons form-spin text-lg animate-spin">data_usage</span>
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div v-if="addNew.status && options.length != 0 && sortedOptions.length == 0" class="el-select-dropdown__wrap" slot="empty">
|
||||
<p class="el-select-dropdown__empty">
|
||||
<p class="el-select-dropdown__empty pt-2 pb-0">
|
||||
{{ noMatchingDataText }}
|
||||
</p>
|
||||
|
||||
<ul class="el-scrollbar__view el-select-dropdown__list">
|
||||
<li class="el-select-dropdown__item el-select__footer">
|
||||
<div @click="onAddItem">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span>
|
||||
<li class="el-select-dropdown__item el-select__footer bg-purple">
|
||||
<div class="w-full flex items-center" @click="onAddItem">
|
||||
<span class="material-icons text-xl text-purple">add</span>
|
||||
<span class="flex-1 font-bold text-purple">
|
||||
{{ addNew.text }}
|
||||
</span>
|
||||
</div>
|
||||
@ -42,14 +43,14 @@
|
||||
</div>
|
||||
|
||||
<div v-else-if="addNew.status && options.length == 0" slot="empty">
|
||||
<p class="el-select-dropdown__empty">
|
||||
<p class="el-select-dropdown__empty pt-2 pb-0">
|
||||
{{ noDataText }}
|
||||
</p>
|
||||
<ul class="el-scrollbar__view el-select-dropdown__list">
|
||||
<li class="el-select-dropdown__item el-select__footer">
|
||||
<div @click="onAddItem">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span>
|
||||
<li class="el-select-dropdown__item el-select__footer bg-purple">
|
||||
<div class="w-full flex items-center" @click="onAddItem">
|
||||
<span class="material-icons text-xl text-purple">add</span>
|
||||
<span class="flex-1 font-bold text-purple">
|
||||
{{ addNew.text }}
|
||||
</span>
|
||||
</div>
|
||||
@ -68,7 +69,7 @@
|
||||
:disabled="disabledOptions.includes(option.key)"
|
||||
:label="option.value"
|
||||
:value="option.key">
|
||||
<span class="float-left">{{ option.value }}</span>
|
||||
<span class="float-left" :style="'padding-left: ' + (10 * option.level).toString() + 'px;'"><i v-if="option.level != 0" class="material-icons align-middle text-lg ltr:mr-2 rtl:ml-2">subdirectory_arrow_right</i>{{ option.value }}</span>
|
||||
<span class="badge badge-pill badge-success float-right mt-2" v-if="new_options[option.key]">{{ addNew.new_text }}</span>
|
||||
</el-option>
|
||||
|
||||
@ -88,10 +89,10 @@
|
||||
</el-option>
|
||||
</el-option-group>
|
||||
|
||||
<el-option v-if="!loading && addNew.status && options.length != 0 && sortedOptions.length > 0" class="el-select__footer select-add-new" disabled value="">
|
||||
<div @click="onAddItem">
|
||||
<i class="fas fa-plus"></i>
|
||||
<span>
|
||||
<el-option v-if="!loading && addNew.status && options.length != 0 && sortedOptions.length > 0" class="el-select-dropdown__item el-select__footer select-add-new bg-purple" disabled value="">
|
||||
<div class="w-full flex items-center" @click="onAddItem">
|
||||
<span class="material-icons text-xl text-purple">add</span>
|
||||
<span class="flex-1 font-bold text-purple">
|
||||
{{ addNew.text }}
|
||||
</span>
|
||||
</div>
|
||||
@ -101,12 +102,11 @@
|
||||
|
||||
<component v-bind:is="add_new_html" @submit="onSubmit" @cancel="onCancel"></component>
|
||||
|
||||
<span slot="infoBlock" class="badge badge-success badge-resize float-right" v-if="new_options[selected]">{{ addNew.new_text }}</span>
|
||||
<span slot="infoBlock" class="absolute right-8 top-3 bg-green text-white px-2 py-1 rounded-md text-xs" v-if="new_options[selected]">{{ addNew.new_text }}</span>
|
||||
|
||||
<select :name="name" :id="name" v-model="selected" class="d-none">
|
||||
<option v-for="option in sortedOptions" :key="option.key" :value="option.key">{{ option.value }}</option>
|
||||
</select>
|
||||
|
||||
</base-input>
|
||||
</template>
|
||||
|
||||
@ -118,7 +118,7 @@ import { Select, Option, OptionGroup, ColorPicker } from 'element-ui';
|
||||
import AkauntingModalAddNew from './AkauntingModalAddNew';
|
||||
import AkauntingModal from './AkauntingModal';
|
||||
import AkauntingMoney from './AkauntingMoney';
|
||||
import AkauntingRadioGroup from './forms/AkauntingRadioGroup';
|
||||
import AkauntingRadioGroup from './AkauntingRadioGroup';
|
||||
import AkauntingSelect from './AkauntingSelect';
|
||||
import AkauntingDate from './AkauntingDate';
|
||||
import AkauntingRecurring from './AkauntingRecurring';
|
||||
@ -266,12 +266,6 @@ export default {
|
||||
description: "Selectbox collapse status"
|
||||
},
|
||||
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: 'Loading...',
|
||||
description: "Selectbox loading message"
|
||||
},
|
||||
|
||||
noDataText: {
|
||||
type: String,
|
||||
default: 'No Data',
|
||||
@ -392,7 +386,8 @@ export default {
|
||||
for (const [key, value] of Object.entries(options)) {
|
||||
values.push({
|
||||
key: key.toString(),
|
||||
value: value
|
||||
value: value,
|
||||
level: 0
|
||||
});
|
||||
}
|
||||
|
||||
@ -407,13 +402,15 @@ export default {
|
||||
this.sorted_options.push({
|
||||
index: index,
|
||||
key: index.toString(),
|
||||
value: option
|
||||
value: option,
|
||||
level: 0
|
||||
});
|
||||
} else {
|
||||
this.sorted_options.push({
|
||||
index: index,
|
||||
key: option.id.toString(),
|
||||
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
|
||||
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
|
||||
level: (option.level) ? option.level : 0
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
@ -424,7 +421,8 @@ export default {
|
||||
for (const [key, value] of Object.entries(created_options)) {
|
||||
this.sorted_options.push({
|
||||
key: key.toString(),
|
||||
value: value
|
||||
value: value,
|
||||
level: 0
|
||||
});
|
||||
}
|
||||
} else {
|
||||
@ -433,13 +431,15 @@ export default {
|
||||
this.sorted_options.push({
|
||||
index: index,
|
||||
key: index.toString(),
|
||||
value: option
|
||||
value: option,
|
||||
level: 0
|
||||
});
|
||||
} else {
|
||||
this.sorted_options.push({
|
||||
index: index,
|
||||
key: option.id.toString(),
|
||||
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
|
||||
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
|
||||
level: (option.level) ? option.level : 0
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
@ -693,7 +693,7 @@ export default {
|
||||
|
||||
let documentClasses = document.body.classList;
|
||||
|
||||
documentClasses.remove("modal-open");
|
||||
documentClasses.remove("overflow-hidden");
|
||||
}
|
||||
})
|
||||
.catch(error => {
|
||||
@ -712,7 +712,7 @@ export default {
|
||||
|
||||
let documentClasses = document.body.classList;
|
||||
|
||||
documentClasses.remove("modal-open");
|
||||
documentClasses.remove("overflow-hidden");
|
||||
},
|
||||
|
||||
addModal() {
|
||||
@ -812,13 +812,14 @@ export default {
|
||||
|
||||
for (const [key, value] of Object.entries(_options)) {
|
||||
values.push({
|
||||
key: key,
|
||||
value: value
|
||||
key: key.toString(),
|
||||
value: value,
|
||||
level: 0
|
||||
});
|
||||
}
|
||||
|
||||
this.sorted_options.push({
|
||||
key: index,
|
||||
key: index.toString(),
|
||||
value: values
|
||||
});
|
||||
}
|
||||
@ -828,13 +829,15 @@ export default {
|
||||
this.sorted_options.push({
|
||||
index: index,
|
||||
key: index.toString(),
|
||||
value: option
|
||||
value: option,
|
||||
level: 0
|
||||
});
|
||||
} else {
|
||||
this.sorted_options.push({
|
||||
index: index,
|
||||
key: option.id,
|
||||
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
|
||||
key: option.id.toString(),
|
||||
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
|
||||
level: (option.level) ? option.level : 0
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
@ -844,8 +847,9 @@ export default {
|
||||
if (!Array.isArray(options)) {
|
||||
for (const [key, value] of Object.entries(options)) {
|
||||
this.sorted_options.push({
|
||||
key: key,
|
||||
value: value
|
||||
key: key.toString(),
|
||||
value: value,
|
||||
level: 0
|
||||
});
|
||||
}
|
||||
} else {
|
||||
@ -854,13 +858,15 @@ export default {
|
||||
this.sorted_options.push({
|
||||
index: index,
|
||||
key: index.toString(),
|
||||
value: option
|
||||
value: option,
|
||||
level: 0
|
||||
});
|
||||
} else {
|
||||
this.sorted_options.push({
|
||||
index: index,
|
||||
key: option.id,
|
||||
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name
|
||||
key: option.id.toString(),
|
||||
value: (option.title) ? option.title : (option.display_name) ? option.display_name : option.name,
|
||||
level: (option.level) ? option.level : 0
|
||||
});
|
||||
}
|
||||
}, this);
|
||||
@ -870,57 +876,3 @@ export default {
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.form-group .modal {
|
||||
z-index: 3050;
|
||||
}
|
||||
|
||||
.el-select-dropdown__empty {
|
||||
padding: 10px 0 0 !important;
|
||||
}
|
||||
|
||||
.el-select-dropdown__empty.loading {
|
||||
padding: 10px 0 !important;
|
||||
}
|
||||
|
||||
.el-select__footer {
|
||||
text-align: center !important;
|
||||
border-top: 1px solid #dee2e6 !important;
|
||||
padding: 0px !important;
|
||||
cursor: pointer !important;
|
||||
color: #3c3f72 !important;
|
||||
font-weight: bold !important;
|
||||
height: 38px !important;
|
||||
line-height: 38px !important;
|
||||
margin-top: 5px !important;
|
||||
margin-bottom: -6px !important;
|
||||
border-bottom-left-radius: 4px !important;
|
||||
border-bottom-right-radius: 4px !important;
|
||||
}
|
||||
|
||||
.el-select__footer.el-select-dropdown__item.hover {
|
||||
background-color: inherit !important;
|
||||
}
|
||||
|
||||
.el-select__footer.el-select-dropdown__item:hover, .el-select__footer.el-select-dropdown__item:focus {
|
||||
background-color: #3c3f72 !important;
|
||||
color: white !important;
|
||||
border-top-color: #3c3f72;
|
||||
}
|
||||
|
||||
.el-select__footer div span {
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.badge-resize {
|
||||
float: right;
|
||||
margin-top: -32px;
|
||||
margin-right: 35px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.badge.badge-pill.badge-success {
|
||||
border-radius: 0.375rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user