refactor: full width edit task
This commit is contained in:
@@ -62,7 +62,7 @@ watch(cron, () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="flex gap-2">
|
<div class="flex gap-2">
|
||||||
<select v-model="cronType" class="select" @change="onChangeCronType">
|
<select v-model="cronType" class="select flex-1" @change="onChangeCronType">
|
||||||
<option :value="CronType.ONE_TIME">
|
<option :value="CronType.ONE_TIME">
|
||||||
{{ $t("cron.type.one_time") }}
|
{{ $t("cron.type.one_time") }}
|
||||||
</option>
|
</option>
|
||||||
@@ -85,7 +85,7 @@ watch(cron, () => {
|
|||||||
<select
|
<select
|
||||||
v-if="cronType === CronType.EVERY_DAY"
|
v-if="cronType === CronType.EVERY_DAY"
|
||||||
v-model="cronValue"
|
v-model="cronValue"
|
||||||
class="select"
|
class="select flex-1"
|
||||||
@change="onChangeCronValue"
|
@change="onChangeCronValue"
|
||||||
>
|
>
|
||||||
<option
|
<option
|
||||||
@@ -99,7 +99,7 @@ watch(cron, () => {
|
|||||||
<select
|
<select
|
||||||
v-if="cronType === CronType.EVERY_WEEK"
|
v-if="cronType === CronType.EVERY_WEEK"
|
||||||
v-model="cronValue"
|
v-model="cronValue"
|
||||||
class="select"
|
class="select flex-1"
|
||||||
@change="onChangeCronValue"
|
@change="onChangeCronValue"
|
||||||
>
|
>
|
||||||
<option
|
<option
|
||||||
@@ -113,7 +113,7 @@ watch(cron, () => {
|
|||||||
<select
|
<select
|
||||||
v-if="cronType === CronType.EVERY_MONTH"
|
v-if="cronType === CronType.EVERY_MONTH"
|
||||||
v-model="cronValue"
|
v-model="cronValue"
|
||||||
class="select"
|
class="select flex-1"
|
||||||
@change="onChangeCronValue"
|
@change="onChangeCronValue"
|
||||||
>
|
>
|
||||||
<option
|
<option
|
||||||
@@ -136,7 +136,7 @@ watch(cron, () => {
|
|||||||
<select
|
<select
|
||||||
v-if="cronType === CronType.EVERY_YEAR"
|
v-if="cronType === CronType.EVERY_YEAR"
|
||||||
v-model="cronValue"
|
v-model="cronValue"
|
||||||
class="select"
|
class="select flex-1"
|
||||||
@change="onChangeCronValue"
|
@change="onChangeCronValue"
|
||||||
>
|
>
|
||||||
<option
|
<option
|
||||||
@@ -151,7 +151,7 @@ watch(cron, () => {
|
|||||||
v-if="cronType === CronType.SPECIFIC"
|
v-if="cronType === CronType.SPECIFIC"
|
||||||
v-model="rawCron"
|
v-model="rawCron"
|
||||||
type="text"
|
type="text"
|
||||||
class="input font-mono"
|
class="input font-mono flex-1"
|
||||||
:class="valid ? '' : 'input-error'"
|
:class="valid ? '' : 'input-error'"
|
||||||
@input="onInputRawCron"
|
@input="onInputRawCron"
|
||||||
/>
|
/>
|
||||||
|
|||||||
@@ -102,37 +102,38 @@ watch(task, () => {
|
|||||||
|
|
||||||
<template>
|
<template>
|
||||||
<div class="list-row text-left">
|
<div class="list-row text-left">
|
||||||
<div class="content-center">
|
<template v-if="!editMode">
|
||||||
<input
|
<div class="content-center">
|
||||||
:id="refreshKey.toFixed(0)"
|
<input
|
||||||
type="checkbox"
|
:id="refreshKey.toFixed(0)"
|
||||||
class="checkbox"
|
type="checkbox"
|
||||||
:checked="checked"
|
class="checkbox"
|
||||||
@click.prevent="onCheck"
|
:checked="checked"
|
||||||
/>
|
@click.prevent="onCheck"
|
||||||
</div>
|
/>
|
||||||
<div
|
|
||||||
v-if="!editMode"
|
|
||||||
class="cursor-pointer text-lg select-none"
|
|
||||||
@click.prevent="editMode = true"
|
|
||||||
>
|
|
||||||
<div>{{ task.name }}</div>
|
|
||||||
<div
|
|
||||||
v-if="showLastChecked && !checked && task.check_date"
|
|
||||||
class="font-light text-xs italic"
|
|
||||||
>
|
|
||||||
{{ $t("checked") }}
|
|
||||||
{{ relativeTime(task.check_date, $i18n.locale) }}
|
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
v-if="showNextReset && checked && nextReset"
|
class="cursor-pointer text-lg select-none"
|
||||||
class="font-light text-xs italic"
|
@click.prevent="editMode = true"
|
||||||
>
|
>
|
||||||
{{ $t("resets") }} {{ relativeTime(nextReset, $i18n.locale) }}
|
<div>{{ task.name }}</div>
|
||||||
|
<div
|
||||||
|
v-if="showLastChecked && !checked && task.check_date"
|
||||||
|
class="font-light text-xs italic"
|
||||||
|
>
|
||||||
|
{{ $t("checked") }}
|
||||||
|
{{ relativeTime(task.check_date, $i18n.locale) }}
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="showNextReset && checked && nextReset"
|
||||||
|
class="font-light text-xs italic"
|
||||||
|
>
|
||||||
|
{{ $t("resets") }} {{ relativeTime(nextReset, $i18n.locale) }}
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
<template v-else>
|
<template v-else>
|
||||||
<div class="flex flex-col gap-2">
|
<div class="list-col-grow flex flex-col gap-2">
|
||||||
<div class="flex justify-evenly">
|
<div class="flex justify-evenly">
|
||||||
<button class="btn btn-square me-1" @click="onClose">
|
<button class="btn btn-square me-1" @click="onClose">
|
||||||
<x-icon />
|
<x-icon />
|
||||||
|
|||||||
Reference in New Issue
Block a user