<template>
<div class="sm:col-span-6 space-y-6 sm:space-y-2">
<div class="flex flex-wrap lg:flex-nowrap items-center space-y-1 lg:space-y-0" :class="{ 'justify-start': frequency == 'custom' }">
<div class="w-24 sm:w-60 px-0 sm:px-2 text-sm">
{{ frequencyText }}
</div>
<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>
<div class="w-20 sm:w-auto px-2 text-sm text-center" v-if="frequency == 'custom'">
{{ frequencyEveryText }}
</div>
<input type="text" class="w-20 text-sm px-3 py-2.5 mt-1 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" v-model="interval" @input="change" v-if="frequency == 'custom'">
<div class="text-red text-sm mt-1 block" v-if="invertalError" v-html="invertalError"></div>
<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 class="text-red text-sm mt-1 block" v-if="customFrequencyError" v-html="customFrequencyError"></div>
</div>
<div class="flex flex-wrap lg:flex-nowrap items-center space-y-3 lg:space-y-0" :class="{ 'justify-start': limit !== 'never' }">
<div class="w-24 sm:w-60 px-0 sm:px-2 text-sm">
{{ startText }}
</div>
<div
:class="startedError ? 'pt-0' : '' && startedError || limitDateError ? 'pt-0 pb-5' : 'pb-10' && startedError && limitDateError ? 'pt-6 pb-5' : 'pb-10'">
<el-date-picker
class="w-36 cursor-pointer 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="text-red text-sm mt-1 block" v-if="startedError" v-html="startedError"></div>
</div>
<div class="w-24 px-2 text-sm text-center"
:class="(startedError || limitDateError ? 'pt-10 pb-14' : 'pb-10') && (startedError && limitDateError ? 'pt-6 pb-14' : 'pb-10')">
{{ middleText }}
</div>
<el-select class="w-20" v-model="limit" @input="change"
:class="startedError || limitDateError ? 'pt-0 pb-6' : '' && startedError && limitDateError ? 'pt-6 pb-16' : 'pb-10'">
<el-option
v-for="(label, value) in limits"
:key="value"
:label="label"
:value="value">
</el-option>
</el-select>
<input type="text" class="w-20 cursor-pointer text-sm px-3 py-2.5 mt-1 ml-2 rounded-lg border border-light-gray text-black placeholder-light-gray bg-white disabled:bg-gray-200 focus:outline-none focus:ring-transparent focus:border-purple" v-model="limitCount" v-if="limit == 'after'" @input="change">
<div class="text-red text-sm mt-1 block" v-if="limitCountError" v-html="limitCountError"></div>
<div class="pl-2 text-sm" v-if="limit == 'after'">
{{ endText }}
</div>
<div
:class="startedError || limitDateError ? 'pt-10 pb-10' : 'pb-10' && startedError && limitDateError ? ' pt-20 pb-14' : 'pb-10'">
<el-date-picker
class="w-36 ml-2 cursor-pointer recurring-invoice-data"
v-model="limitDate"
type="date"
align="right"
:format="formatDate"
value-format="yyyy-MM-dd"
v-if="limit == 'on'"
@input="change"
>
</el-date-picker>
<div class="text-red text-sm mt-1 ml-2 block" v-if="limitDateError" v-html="limitDateError"></div>
</div>
</div>
<div v-if="sendEmailShow" class="flex flex-wrap lg:flex-nowrap items-center space-y-1 lg:space-y-0">
<div class="w-24 sm:w-60 px-0 sm:px-2 text-sm">
{{ sendEmailText }}
</div>
<div class="flex items-center mt-1">
<label @click="sendEmail=1;change();" v-bind:class="[sendEmail == 1 ? ['bg-green-500','text-white'] : 'bg-black-100']" class="relative w-10 ltr:rounded-tl-lg ltr:rounded-bl-lg rtl:rounded-tr-lg rtl:rounded-br-lg py-2 px-1 text-sm text-center transition-all cursor-pointer">
{{ sendEmailYesText }}
</label>
<label @click="sendEmail=0;change();"v-bind:class="[sendEmail == 0 ? ['bg-red-500','text-white'] : 'bg-black-100']" class="relative w-10 ltr:rounded-tr-lg ltr:rounded-br-lg rtl:rounded-tl-lg rtl:rounded-bl-lg py-2 px-1 text-sm text-center transition-all cursor-pointer">
{{ sendEmailNoText }}
</label>
</div>
</div>
</div>
</template>
<script>
import { Select, Option, DatePicker } from 'element-ui';
export default {
name: 'akaunting-recurring',
components: {
[Select.name]: Select,
[Option.name]: Option,
[DatePicker.name]: DatePicker,
},
props: {
startText: {
type: String,
default: 'Create first invoice on',
description: "Default reccuring text"
},
dateRangeText: {
type: Object,
default: {
today : 'Today',
yesterday : 'Yesterday',
week_ago : 'A week ago',
},
description: "Default reccuring text"
},
middleText: {
type: String,
default: 'and end',
description: "Default reccuring text"
},
endText: {
type: String,
default: 'invoices',
description: "Default reccuring text"
},
frequencies: null,
frequencyText: {
type: String,
default: 'Repeat this invoice',
description: "Default reccuring text"
},
frequencyEveryText: {
type: String,
default: 'every',
description: "Default reccuring text"
},
frequencyValue: {
type: String,
default: 'monthly',
description: "Default reccuring type"
},
invertalError: {
type: String,
default: null,
description: "Selectbox input error message"
},
customFrequencies: null,
customFrequencyValue: {
type: String,
default: 'monthly',
description: "Default reccuring type"
},
customFrequencyError: {
type: String,
default: null,
description: "Selectbox input error message"
},
startedValue: {
type: String,
default: 'never',
description: "Default reccuring limit"
},
startedError: {
type: String,
default: null,
description: "Selectbox input error message"
},
limits: null,
limitValue: {
type: String,
default: 'never',
description: "Default reccuring limit"
},
limitCountValue: {
type: [Number, String],
default: 0,
description: "Default reccuring limit"
},
limitCountError: {
type: String,
default: null,
description: "Selectbox input error message"
},
limitDateValue: {
type: String,
default: '',
description: "Default reccuring limit"
},
limitDateError: {
type: String,
default: null,
description: "Selectbox input error message"
},
dateFormat: {
type: String,
default: 'dd MM yyyy',
description: "Default date format"
},
sendEmailShow: {
type: [String, Number, Array, Object, Boolean],
default: '1',
description: "Created recurring model send automatically option"
},
sendEmailText: {
type: String,
default: 'Send email automatically',
description: "Created recurring model send automatically option"
},
sendEmailYesText: {
type: String,
default: 'Yes',
description: "Send email option yes text"
},
sendEmailNoText: {
type: String,
default: 'No',
description: "Send email option no text"
},
sendEmailValue: {
type: [Number, String],
default: 0,
description: "Send Email value"
}
},
data() {
return {
frequency: '',
interval: '',
customFrequency: '',
started_at: '',
limit: '',
limitCount: 0,
limitDate: '',
formatDate: 'dd MM YYYY',
sendEmail: 0,
}
},
created() {
this.formatDate = this.convertToDarteFormat(this.dateFormat);
},
mounted() {
this.frequency = this.frequencyValue;
this.customFrequency = this.customFrequencyValue;
this.started_at = this.startedValue;
this.limit = this.limitValue;
this.limitCount = this.limitCountValue;
this.limitDate = this.limitDateValue;
if (this.limit == 'count') {
if (this.limitCount > 0) {
this.limit = 'after';
} else {
this.limit = 'never';
}
} else {
this.limit = 'on';
}
this.sendEmail = this.sendEmailValue;
setTimeout(function() {
this.change();
}.bind(this), 800);
},
methods: {
change() {
this.$emit('change', this.frequency);
this.$emit('frequency', this.frequency);
this.$emit('interval', this.interval);
this.$emit('custom_frequency', this.customFrequency);
this.$emit('started', this.started_at);
switch (this.limit) {
case 'after':
this.$emit('limit', 'count');
this.$emit('limit_count', this.limitCount);
this.$emit('limit_date', null);
break;
case 'on':
this.$emit('limit', 'date');
this.$emit('limit_date', this.limitDate);
this.$emit('limit_count', 0);
break;
case 'never':
default:
this.$emit('limit', 'count');
this.$emit('limit_count', 0);
break;
}
this.$emit('send_email', this.sendEmail);
},
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>