frontend/src/views/filters/FilterNew.vue
kolaente befa6f27bb feat: rename list to project everywhere
fix: project table view

fix: e2e tests

fix: typo in readme

fix: list view route

fix: don't wait until background is loaded for list to show

fix: rename component imports

fix: lint

fix: parse task text

fix: use list card grid

fix: use correct class names

fix: i18n keys

fix: load project

fix: task overview

fix: list view spacing

fix: find project

fix: setLoading when updating a project

fix: loading saved filter

fix: project store loading

fix: color picker import

fix: cypress tests

feat: migrate old list settings

chore: add const for project settings

fix: wrong projecten rename from lists

chore: rename unused variable

fix: editor list

fix: shortcut list class name

fix: pagination list class name

fix: notifications list class name

fix: list view variable name

chore: clarify comment

fix: i18n keys

fix: router imports

fix: comment

chore: remove debugging leftover

fix: remove duplicate variables

fix: change comment

fix: list view variable name

fix: list view css class name

fix: list item property name

fix: name update tasks function correctly

fix: update comment

fix: project create route

fix: list view class names

fix: list view component name

fix: result list class name

fix: animation class list name

fix: change debug log

fix: revert a few navigation changes

fix: use @ for imports of all views

fix: rename link share list class

fix: remove unused css class

fix: dynamically import project components again
2023-03-14 14:04:23 +00:00

82 lines
2.3 KiB
Vue

<template>
<modal
@close="$router.back()"
variant="hint-modal"
>
<card class="has-no-shadow" :title="$t('filters.create.title')">
<p>
{{ $t('filters.create.description') }}
</p>
<div class="field">
<label class="label" for="title">{{ $t('filters.attributes.title') }}</label>
<div class="control">
<input
v-model="filter.title"
:class="{ 'disabled': filterService.loading, 'is-danger': !titleValid }"
:disabled="filterService.loading || undefined"
class="input"
id="Title"
:placeholder="$t('filters.attributes.titlePlaceholder')"
type="text"
v-focus
@focusout="validateTitleField"
/>
</div>
<p class="help is-danger" v-if="!titleValid">{{ $t('filters.create.titleRequired') }}</p>
</div>
<div class="field">
<label class="label" for="description">{{ $t('filters.attributes.description') }}</label>
<div class="control">
<editor
:key="filter.id"
v-model="filter.description"
:class="{ 'disabled': filterService.loading}"
:disabled="filterService.loading"
:preview-is-default="false"
id="description"
:placeholder="$t('filters.attributes.descriptionPlaceholder')"
/>
</div>
</div>
<div class="field">
<label class="label" for="filters">{{ $t('filters.title') }}</label>
<div class="control">
<Filters
:class="{ 'disabled': filterService.loading}"
:disabled="filterService.loading"
class="has-no-shadow has-no-border"
v-model="filters"
/>
</div>
</div>
<template #footer>
<x-button
:loading="filterService.loading"
:disabled="filterService.loading || !titleValid"
@click="createFilterWithValidation()"
class="is-fullwidth"
>
{{ $t('filters.create.action') }}
</x-button>
</template>
</card>
</modal>
</template>
<script setup lang="ts">
import Editor from '@/components/input/AsyncEditor'
import Filters from '@/components/project/partials/filters.vue'
import {useSavedFilter} from '@/services/savedFilter'
const {
filter,
filters,
createFilterWithValidation,
filterService,
titleValid,
validateTitleField,
} = useSavedFilter()
</script>