Recurring-invoice page schedule align problem solved

This commit is contained in:
merve karaman 2023-08-29 14:25:27 +03:00 committed by GitHub
parent a7b8f2fc38
commit 295d81f89c
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23

View File

@ -1,7 +1,7 @@
<template> <template>
<div class="sm:col-span-6 space-y-6 sm:space-y-2"> <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="flex flex-wrap lg:flex-nowrap items-start 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"> <div class="w-24 sm:w-60 px-0 sm:px-2 text-sm pt-4">
{{ frequencyText }} {{ frequencyText }}
</div> </div>
@ -14,15 +14,16 @@
</el-option> </el-option>
</el-select> </el-select>
<div class="w-20 sm:w-auto px-2 text-sm text-center" v-if="frequency == 'custom'"> <div class="w-24 px-2 text-sm text-center pt-4" v-if="frequency == 'custom'">
{{ frequencyEveryText }} {{ frequencyEveryText }}
</div> </div>
<div class="flex flex-col">
<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'"> <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 w-36" v-if="invertalError" v-html="invertalError"></div>
</div>
<div class="text-red text-sm mt-1 block" v-if="invertalError" v-html="invertalError"></div> <el-select class="w-36" v-model="customFrequency" @input="change" v-if="frequency == 'custom'" v-bind:class="invertalError ? '-ml-14' : 'ml-2' ">
<el-select class="w-36 ml-2" v-model="customFrequency" @input="change" v-if="frequency == 'custom'">
<el-option <el-option
v-for="(label, value) in customFrequencies" v-for="(label, value) in customFrequencies"
:key="value" :key="value"
@ -31,16 +32,15 @@
</el-option> </el-option>
</el-select> </el-select>
<div class="text-red text-sm mt-1 block" v-if="customFrequencyError" v-html="customFrequencyError"></div> <div class="text-red text-sm mt-1 block w-36" v-if="customFrequencyError" v-html="customFrequencyError"></div>
</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="flex flex-wrap lg:flex-nowrap items-start space-y-3 lg:space-y-0 pt-4" :class="{ 'justify-start': limit !== 'never' }">
<div class="w-24 sm:w-60 px-0 sm:px-2 text-sm"> <div class="w-24 sm:w-60 px-0 sm:px-2 text-sm pt-4">
{{ startText }} {{ startText }}
</div> </div>
<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 <el-date-picker
class="w-36 cursor-pointer recurring-invoice-data" class="w-36 cursor-pointer recurring-invoice-data"
v-model="started_at" v-model="started_at"
@ -82,17 +82,15 @@
}"> }">
</el-date-picker> </el-date-picker>
<div class="text-red text-sm mt-1 block" v-if="startedError" v-html="startedError"></div> <div class="text-red text-sm mt-1 block w-36" v-if="startedError" v-html="startedError"></div>
</div> </div>
<div class="w-24 px-2 text-sm text-center" <div class="w-24 px-2 text-sm text-center pt-4">
:class="(startedError || limitDateError ? 'pt-10 pb-14' : 'pb-10') && (startedError && limitDateError ? 'pt-6 pb-14' : 'pb-10')">
{{ middleText }} {{ middleText }}
</div> </div>
<el-select class="w-20" v-model="limit" @input="change" <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 <el-option
v-for="(label, value) in limits" v-for="(label, value) in limits"
:key="value" :key="value"
@ -101,16 +99,16 @@
</el-option> </el-option>
</el-select> </el-select>
<div class="flex flex-col">
<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"> <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 ml-2 block w-36" v-show="limitCountError" v-html="limitCountError"></div>
</div>
<div class="text-red text-sm mt-1 block" v-if="limitCountError" v-html="limitCountError"></div> <div class="pl-2 pt-4 text-sm" v-if="limit == 'after'" v-bind:class="limitCountError ? '-ml-16' : ''">
<div class="pl-2 text-sm" v-if="limit == 'after'">
{{ endText }} {{ endText }}
</div> </div>
<div <div class="flex flex-col">
:class="startedError || limitDateError ? 'pt-10 pb-10' : 'pb-10' && startedError && limitDateError ? ' pt-20 pb-14' : 'pb-10'">
<el-date-picker <el-date-picker
class="w-36 ml-2 cursor-pointer recurring-invoice-data" class="w-36 ml-2 cursor-pointer recurring-invoice-data"
v-model="limitDate" v-model="limitDate"
@ -123,11 +121,11 @@
> >
</el-date-picker> </el-date-picker>
<div class="text-red text-sm mt-1 ml-2 block" v-if="limitDateError" v-html="limitDateError"></div> <div class="text-red text-sm mt-1 ml-2 block w-36" v-if="limitDateError" v-html="limitDateError"></div>
</div> </div>
</div> </div>
<div v-if="sendEmailShow" class="flex flex-wrap lg:flex-nowrap items-center space-y-1 lg:space-y-0"> <div v-if="sendEmailShow" class="flex flex-wrap lg:flex-nowrap items-center space-y-1 lg:space-y-0 pt-6">
<div class="w-24 sm:w-60 px-0 sm:px-2 text-sm"> <div class="w-24 sm:w-60 px-0 sm:px-2 text-sm">
{{ sendEmailText }} {{ sendEmailText }}
</div> </div>