akaunting 3.0 (the last dance)
This commit is contained in:
Burak Civan
@ -1,73 +1,117 @@
|
||||
<template>
|
||||
<div class="row pr-0" :class="formClasses">
|
||||
<base-input :label="title"
|
||||
name="recurring_frequency"
|
||||
:class="frequencyClasses"
|
||||
:error="frequencyError">
|
||||
<template slot="label">
|
||||
<label v-if="title" :class="labelClasses">
|
||||
{{ title }}
|
||||
<el-tooltip class="item" effect="dark" placement="top-start">
|
||||
<div slot="content" v-html="tooltip"></div>
|
||||
<i class="far fa-question-circle fa-xs" style="vertical-align: top;"></i>
|
||||
</el-tooltip>
|
||||
</label>
|
||||
</template>
|
||||
<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>
|
||||
<div class="sm:col-span-6 space-y-8 sm:space-y-2">
|
||||
<div class="flex items-center" :class="{ 'justify-between sm:justify-start': frequency == 'custom' }">
|
||||
<div class="w-60 px-2 text-sm">
|
||||
{{ frequencyText }}
|
||||
</div>
|
||||
|
||||
<el-option v-for="(label, value) in frequencyOptions"
|
||||
:key="label"
|
||||
<el-select class="w-36" v-model="frequency" @input="change">
|
||||
<el-option
|
||||
v-for="(label, value) in frequencies"
|
||||
:key="value"
|
||||
:label="label"
|
||||
:value="value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</base-input>
|
||||
|
||||
<base-input :label="titleInterval"
|
||||
name="recurring_interval"
|
||||
type="number"
|
||||
:value="0"
|
||||
@input="change"
|
||||
:class="invertalClasses"
|
||||
:error="intervalError"
|
||||
v-model="recurring_interval"
|
||||
<div class="w-20 px-2 text-sm text-center" v-if="frequency == 'custom'">
|
||||
{{ frequencyEveryText }}
|
||||
</div>
|
||||
|
||||
<input type="text" class="w-20 form-element" v-model="interval" @input="change" v-if="frequency == 'custom'">
|
||||
|
||||
<el-select class="w-36 ml-2" v-model="customFrequency" @input="change" v-if="frequency == 'custom'">
|
||||
<el-option
|
||||
v-for="(label, value) in customFrequencies"
|
||||
:key="value"
|
||||
:label="label"
|
||||
:value="value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center" :class="{ 'justify-between sm:justify-start': limit !== 'never' }">
|
||||
<div class="w-60 px-2 text-sm">
|
||||
{{ startText }}
|
||||
</div>
|
||||
|
||||
<el-date-picker
|
||||
class="w-36 recurring-invoice-data"
|
||||
v-model="started_at"
|
||||
@input="change"
|
||||
type="date"
|
||||
align="right"
|
||||
:format="formatDate"
|
||||
value-format="yyyy-MM-dd"
|
||||
:picker-options="{
|
||||
disabledDate(time) {
|
||||
return time.getTime() < Date.now();
|
||||
},
|
||||
shortcuts: [
|
||||
{
|
||||
text: dateRangeText['today'],
|
||||
onClick(picker) {
|
||||
picker.$emit('pick', new Date());
|
||||
}
|
||||
},
|
||||
{
|
||||
text: dateRangeText['yesterday'],
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24);
|
||||
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
},
|
||||
{
|
||||
text: dateRangeText['week_ago'],
|
||||
onClick(picker) {
|
||||
const date = new Date();
|
||||
date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
|
||||
|
||||
picker.$emit('pick', date);
|
||||
}
|
||||
}
|
||||
]
|
||||
}">
|
||||
</el-date-picker>
|
||||
|
||||
<div class="w-20 px-2 text-sm text-center">
|
||||
{{ middleText }}
|
||||
</div>
|
||||
|
||||
<el-select class="w-20" v-model="limit" @input="change">
|
||||
<el-option
|
||||
v-for="(label, value) in limits"
|
||||
:key="value"
|
||||
:label="label"
|
||||
:value="value">
|
||||
</el-option>
|
||||
</el-select>
|
||||
|
||||
<input type="text" class="w-36 form-element ml-2" v-model="limitDate" v-if="limit == 'after'" @input="change">
|
||||
|
||||
<div class="pl-2 text-sm" v-if="limit == 'after'">
|
||||
{{ endText }}
|
||||
</div>
|
||||
|
||||
<el-date-picker
|
||||
class="w-36 ml-2 recurring-invoice-data"
|
||||
v-model="limitDate"
|
||||
type="date"
|
||||
align="right"
|
||||
:format="formatDate"
|
||||
value-format="yyyy-MM-dd"
|
||||
v-if="limit == 'on'"
|
||||
@input="change"
|
||||
>
|
||||
</base-input>
|
||||
|
||||
<base-input :label="titleFrequency"
|
||||
name="recurring_custom_frequency"
|
||||
: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="titleCount"
|
||||
name="recurring_count"
|
||||
type="number"
|
||||
:value="0"
|
||||
@input="change"
|
||||
:class="countClasses"
|
||||
:error="countError"
|
||||
v-model="recurring_count">
|
||||
</base-input>
|
||||
</el-date-picker>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { Select, Option, Tooltip } from 'element-ui'
|
||||
import { Select, Option, DatePicker } from 'element-ui';
|
||||
|
||||
export default {
|
||||
name: 'akaunting-recurring',
|
||||
@ -75,144 +119,172 @@ export default {
|
||||
components: {
|
||||
[Select.name]: Select,
|
||||
[Option.name]: Option,
|
||||
[Tooltip.name]: Tooltip,
|
||||
[DatePicker.name]: DatePicker,
|
||||
},
|
||||
|
||||
props: {
|
||||
title: {
|
||||
startText: {
|
||||
type: String,
|
||||
default: '',
|
||||
description: "Modal header title"
|
||||
default: 'Create first invoice on',
|
||||
description: "Default reccuring text"
|
||||
},
|
||||
titleInterval: {
|
||||
dateRangeText: {
|
||||
type: Object,
|
||||
default: {
|
||||
today : 'Today',
|
||||
yesterday : 'Yesterday',
|
||||
week_ago : 'A week ago',
|
||||
},
|
||||
description: "Default reccuring text"
|
||||
},
|
||||
middleText: {
|
||||
type: String,
|
||||
default: '',
|
||||
description: "Title of interval"
|
||||
default: 'and end',
|
||||
description: "Default reccuring text"
|
||||
},
|
||||
titleFrequency: {
|
||||
endText: {
|
||||
type: String,
|
||||
default: '',
|
||||
description: "Title of frequency"
|
||||
default: 'invoices',
|
||||
description: "Default reccuring text"
|
||||
},
|
||||
titleCount: {
|
||||
frequencies: null,
|
||||
frequencyText: {
|
||||
type: String,
|
||||
default: '',
|
||||
description: "Title of count"
|
||||
default: 'Repeat this invoice',
|
||||
description: "Default reccuring text"
|
||||
},
|
||||
tooltip: {
|
||||
frequencyEveryText: {
|
||||
type: String,
|
||||
default: '',
|
||||
description: "Tooltip message"
|
||||
default: 'every',
|
||||
description: "Default reccuring text"
|
||||
},
|
||||
placeholder: {
|
||||
frequencyValue: {
|
||||
type: String,
|
||||
default: '',
|
||||
description: "Modal header title"
|
||||
default: 'monthly',
|
||||
description: "Default reccuring type"
|
||||
},
|
||||
formClasses: {
|
||||
default: 'col-md-6',
|
||||
},
|
||||
formError: null,
|
||||
|
||||
frequencyOptions: null,
|
||||
frequencyValue: null,
|
||||
frequencyError: null,
|
||||
customFrequencies: null,
|
||||
customFrequencyValue: {
|
||||
type: String,
|
||||
default: 'monthly',
|
||||
description: "Default reccuring type"
|
||||
},
|
||||
|
||||
intervalValue: {
|
||||
startedValue: {
|
||||
type: String,
|
||||
default: 'never',
|
||||
description: "Default reccuring limit"
|
||||
},
|
||||
|
||||
limits: null,
|
||||
|
||||
limitValue: {
|
||||
type: String,
|
||||
default: 'never',
|
||||
description: "Default reccuring limit"
|
||||
},
|
||||
|
||||
limitCountValue: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
description: "Default interval value"
|
||||
description: "Default reccuring limit"
|
||||
},
|
||||
intervalError: null,
|
||||
|
||||
customFrequencyOptions: null,
|
||||
customFrequencyValue: null,
|
||||
customFrequencyError: null,
|
||||
|
||||
countValue: {
|
||||
type: [Number, String],
|
||||
default: 0,
|
||||
description: "Default count value"
|
||||
},
|
||||
countError: null,
|
||||
|
||||
icon: {
|
||||
limitDateValue: {
|
||||
type: String,
|
||||
description: "Prepend icon (left)"
|
||||
default: '',
|
||||
description: "Default reccuring limit"
|
||||
},
|
||||
labelClasses: {
|
||||
|
||||
dateFormat: {
|
||||
type: String,
|
||||
description: "Input label css classes",
|
||||
default: "form-control-label"
|
||||
default: 'dd MM yyyy',
|
||||
description: "Default date format"
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
recurring_frequency: null,
|
||||
recurring_interval: null,
|
||||
recurring_custom_frequency: null,
|
||||
recurring_count: null,
|
||||
frequencyClasses: 'col-md-12',
|
||||
invertalClasses: 'col-md-2 d-none',
|
||||
customFrequencyClasses: 'col-md-4 d-none',
|
||||
countClasses: 'col-md-2 d-none'
|
||||
frequency: '',
|
||||
interval: '',
|
||||
customFrequency: '',
|
||||
started_at: '',
|
||||
limit: '',
|
||||
limitCount: '',
|
||||
limitDate: '',
|
||||
formatDate: 'dd MM YYYY',
|
||||
}
|
||||
},
|
||||
|
||||
created() {
|
||||
this.recurring_frequency = this.frequencyValue;
|
||||
this.recurring_interval = this.intervalValue;
|
||||
this.recurring_custom_frequency = this.customFrequencyValue;
|
||||
this.recurring_count = this.countValue;
|
||||
created() {
|
||||
this.formatDate = this.convertToDarteFormat(this.dateFormat);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.recurring_frequency = this.frequencyValue;
|
||||
this.frequency = this.frequencyValue;
|
||||
this.customFrequency = this.customFrequencyValue;
|
||||
this.started_at = this.startedValue;
|
||||
|
||||
if (this.recurring_frequency != 'custom') {
|
||||
this.recurring_custom_frequency = '';
|
||||
this.recurring_interval = '0';
|
||||
this.limit = this.limitValue;
|
||||
this.limitCount = this.limitCountValue;
|
||||
this.limitDate = this.limitDateValue;
|
||||
|
||||
if (this.limit == 'count') {
|
||||
if (typeof this.limitDate == 'string') {
|
||||
this.limit = 'never';
|
||||
} else {
|
||||
this.limit = 'after';
|
||||
}
|
||||
} else {
|
||||
this.limit = 'on';
|
||||
}
|
||||
|
||||
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);
|
||||
setTimeout(function() {
|
||||
this.change();
|
||||
}.bind(this), 800);
|
||||
},
|
||||
|
||||
methods: {
|
||||
change() {
|
||||
this.$emit('change', this.recurring_frequency);
|
||||
this.$emit('change', this.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.$emit('frequency', this.frequency);
|
||||
this.$emit('interval', this.interval);
|
||||
this.$emit('custom_frequency', this.customFrequency);
|
||||
this.$emit('started', this.started_at);
|
||||
|
||||
this.frequencyChanges();
|
||||
switch (this.limit) {
|
||||
case 'after':
|
||||
this.$emit('limit', 'count');
|
||||
this.$emit('limit_count', this.limitCount);
|
||||
break;
|
||||
case 'on':
|
||||
this.$emit('limit', 'date');
|
||||
this.$emit('limit_date', this.limitDate);
|
||||
break;
|
||||
case 'never':
|
||||
default:
|
||||
this.$emit('limit', 'count');
|
||||
this.$emit('limit_count', 0);
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
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';
|
||||
}
|
||||
}
|
||||
convertToDarteFormat(format) {
|
||||
return format.replace('d', 'dd')
|
||||
.replace('M', 'MMM')
|
||||
.replace('m', 'MM')
|
||||
.replace('F', 'MMMM')
|
||||
.replace('y', 'yyyy')
|
||||
.replace('Y', 'yyyy');
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
.el-input__inner {
|
||||
height: 42px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user