v2 first commit
This commit is contained in:
164
resources/assets/js/components/AkauntingRecurring.vue
Normal file
164
resources/assets/js/components/AkauntingRecurring.vue
Normal file
@ -0,0 +1,164 @@
|
||||
<template>
|
||||
<div class="row col-md-6 pr-0">
|
||||
<base-input :label="title"
|
||||
name="recurring_frequency"
|
||||
:class="frequencyClasses"
|
||||
:error="frequencyError">
|
||||
<el-select v-model="recurring_frequency" @input="change" filterable
|
||||
:placeholder="placeholder">
|
||||
<template slot="prefix">
|
||||
<span class="el-input__suffix-inner el-select-icon">
|
||||
<i :class="'el-input__icon el-icon-refresh'"></i>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<el-option v-for="(label, value) in frequencyOptions"
|
||||
:key="label"
|
||||
:label="label"
|
||||
:value="value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</base-input>
|
||||
|
||||
<base-input :label="''"
|
||||
name="recurring_interval"
|
||||
type="number"
|
||||
:value="0"
|
||||
class="recurring-single"
|
||||
:class="invertalClasses"
|
||||
:error="intervalError"
|
||||
v-model="recurring_interval"
|
||||
>
|
||||
</base-input>
|
||||
|
||||
<base-input :label="''"
|
||||
name="recurring_custom_frequency"
|
||||
class="recurring-single"
|
||||
:class="customFrequencyClasses"
|
||||
:error="customFrequencyError"
|
||||
>
|
||||
<el-select v-model="recurring_custom_frequency" @input="change" filterable
|
||||
:placeholder="placeholder">
|
||||
<el-option v-for="(label, value) in customFrequencyOptions"
|
||||
:key="label"
|
||||
:label="label"
|
||||
:value="value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</base-input>
|
||||
|
||||
<base-input :label="''"
|
||||
name="recurring_count"
|
||||
type="number"
|
||||
:value="0"
|
||||
class="recurring-single"
|
||||
:class="countClasses"
|
||||
:error="countError"
|
||||
v-model="recurring_count"
|
||||
>
|
||||
</base-input>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Select, Option } from 'element-ui'
|
||||
|
||||
export default {
|
||||
name: 'akaunting-recurring',
|
||||
|
||||
components: {
|
||||
[Select.name]: Select,
|
||||
[Option.name]: Option,
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: '',
|
||||
description: "Modal header title"
|
||||
},
|
||||
placeholder: {
|
||||
type: String,
|
||||
default: '',
|
||||
description: "Modal header title"
|
||||
},
|
||||
formClasses: null,
|
||||
formError: null,
|
||||
|
||||
frequencyOptions: null,
|
||||
frequencyValue: null,
|
||||
frequencyError: null,
|
||||
|
||||
intervalValue: null,
|
||||
intervalError: null,
|
||||
|
||||
customFrequencyOptions: null,
|
||||
customFrequencyValue: null,
|
||||
customFrequencyError: null,
|
||||
|
||||
countValue: null,
|
||||
countError: null,
|
||||
|
||||
icon: {
|
||||
type: String,
|
||||
description: "Prepend icon (left)"
|
||||
}
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
recurring_frequency: this.frequencyValue,
|
||||
recurring_interval: this.intervalValue,
|
||||
recurring_custom_frequency: this.customFrequencyValue,
|
||||
recurring_count: this.countValue,
|
||||
frequencyClasses: 'col-md-12',
|
||||
invertalClasses: 'col-md-2 d-none',
|
||||
customFrequencyClasses: 'col-md-4 d-none',
|
||||
countClasses: 'col-md-2 d-none'
|
||||
}
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.recurring_frequency = this.frequencyValue;
|
||||
|
||||
this.frequencyChanges();
|
||||
|
||||
this.$emit('recurring_frequency', this.recurring_frequency);
|
||||
this.$emit('recurring_interval', this.recurring_interval);
|
||||
this.$emit('recurring_custom_frequency', this.recurring_custom_frequency);
|
||||
this.$emit('recurring_count', this.recurring_count);
|
||||
},
|
||||
|
||||
methods: {
|
||||
change() {
|
||||
this.$emit('change', this.recurring_frequency);
|
||||
|
||||
this.$emit('recurring_frequency', this.recurring_frequency);
|
||||
this.$emit('recurring_interval', this.recurring_interval);
|
||||
this.$emit('recurring_custom_frequency', this.recurring_custom_frequency);
|
||||
this.$emit('recurring_count', this.recurring_count);
|
||||
|
||||
this.frequencyChanges();
|
||||
},
|
||||
|
||||
frequencyChanges() {
|
||||
if (this.recurring_frequency == 'custom') {
|
||||
this.frequencyClasses = 'col-md-4';
|
||||
this.invertalClasses = 'col-md-2';
|
||||
this.customFrequencyClasses = 'col-md-4';
|
||||
this.countClasses = 'col-md-2 pr-0';
|
||||
} else if (this.recurring_frequency == 'no' || this.recurring_frequency == '') {
|
||||
this.frequencyClasses = 'col-md-12 pr-0';
|
||||
this.invertalClasses = 'col-md-2 d-none';
|
||||
this.customFrequencyClasses = 'col-md-4 d-none';
|
||||
this.countClasses = 'col-md-2 d-none';
|
||||
} else {
|
||||
this.frequencyClasses = 'col-md-10';
|
||||
this.invertalClasses = 'col-md-2 d-none';
|
||||
this.customFrequencyClasses = 'col-md-4 d-none';
|
||||
this.countClasses = 'col-md-2 pr-0';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
Reference in New Issue
Block a user