bcnelson/vikunja
1
0
Fork 0
forked from vikunja/vikunja
Code Pull Requests Activity

feat(FilterInput): use expandable

Browse Source
This commit is contained in:
Dominik Pschenitschni 2024-06-13 14:34:55 +02:00 committed by konrad
parent a6c2c817cd
commit 7093f71372
1 changed files with 52 additions and 65 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

117
frontend/src/components/project/partials/FilterInputDocs.vue
View File

@ -1,6 +1,7 @@
<script setup lang="ts">
import {ref} from 'vue'
import BaseButton from '@/components/base/BaseButton.vue'
import Expandable from '@/components/base/Expandable.vue'
const showDocs = ref(false)
</script>
@ -13,68 +14,54 @@ const showDocs = ref(false)
{{ $t('filters.query.help.link') }}
</BaseButton>
<Transition>
<div
v-if="showDocs"
class="content"
>
<p>{{ $t('filters.query.help.intro') }}</p>
<ul>
<li><code>done</code>: {{ $t('filters.query.help.fields.done') }}</li>
<li><code>priority</code>: {{ $t('filters.query.help.fields.priority') }}</li>
<li><code>percentDone</code>: {{ $t('filters.query.help.fields.percentDone') }}</li>
<li><code>dueDate</code>: {{ $t('filters.query.help.fields.dueDate') }}</li>
<li><code>startDate</code>: {{ $t('filters.query.help.fields.startDate') }}</li>
<li><code>endDate</code>: {{ $t('filters.query.help.fields.endDate') }}</li>
<li><code>doneAt</code>: {{ $t('filters.query.help.fields.doneAt') }}</li>
<li><code>assignees</code>: {{ $t('filters.query.help.fields.assignees') }}</li>
<li><code>labels</code>: {{ $t('filters.query.help.fields.labels') }}</li>
<li><code>project</code>: {{ $t('filters.query.help.fields.project') }}</li>
</ul>
<p>{{ $t('filters.query.help.canUseDatemath') }}</p>
<p>{{ $t('filters.query.help.operators.intro') }}</p>
<ul>
<li><code>!=</code>: {{ $t('filters.query.help.operators.notEqual') }}</li>
<li><code>=</code>: {{ $t('filters.query.help.operators.equal') }}</li>
<li><code>&gt;</code>: {{ $t('filters.query.help.operators.greaterThan') }}</li>
<li><code>&gt;=</code>: {{ $t('filters.query.help.operators.greaterThanOrEqual') }}</li>
<li><code>&lt;</code>: {{ $t('filters.query.help.operators.lessThan') }}</li>
<li><code>&lt;=</code>: {{ $t('filters.query.help.operators.lessThanOrEqual') }}</li>
<li><code>like</code>: {{ $t('filters.query.help.operators.like') }}</li>
<li><code>in</code>: {{ $t('filters.query.help.operators.in') }}</li>
</ul>
<p>{{ $t('filters.query.help.logicalOperators.intro') }}</p>
<ul>
<li><code>&amp;&amp;</code>: {{ $t('filters.query.help.logicalOperators.and') }}</li>
<li><code>||</code>: {{ $t('filters.query.help.logicalOperators.or') }}</li>
<li><code>(</code> and <code>)</code>: {{ $t('filters.query.help.logicalOperators.parentheses') }}</li>
</ul>
<p>{{ $t('filters.query.help.examples.intro') }}</p>
<ul>
<li><code>priority = 4</code>: {{ $t('filters.query.help.examples.priorityEqual') }}</li>
<li><code>dueDate &lt; now</code>: {{ $t('filters.query.help.examples.dueDatePast') }}</li>
<li>
<code>done = false &amp;&amp; priority &gt;= 3</code>:
{{ $t('filters.query.help.examples.undoneHighPriority') }}
</li>
<li><code>assignees in user1, user2</code>: {{ $t('filters.query.help.examples.assigneesIn') }}</li>
<li>
<code>(priority = 1 || priority = 2) &amp;&amp; dueDate &lt;= now</code>:
{{ $t('filters.query.help.examples.priorityOneOrTwoPastDue') }}
</li>
</ul>
</div>
</Transition>
</template>
<style scoped lang="scss">
.v-enter-active,
.v-leave-active {
transition: all $transition-duration ease;
}
.v-enter-from,
.v-leave-to {
transform: scaleY(0);
}
</style>
<Expandable
:open="showDocs"
class="content"
>
<p>{{ $t('filters.query.help.intro') }}</p>
<ul>
<li><code>done</code>: {{ $t('filters.query.help.fields.done') }}</li>
<li><code>priority</code>: {{ $t('filters.query.help.fields.priority') }}</li>
<li><code>percentDone</code>: {{ $t('filters.query.help.fields.percentDone') }}</li>
<li><code>dueDate</code>: {{ $t('filters.query.help.fields.dueDate') }}</li>
<li><code>startDate</code>: {{ $t('filters.query.help.fields.startDate') }}</li>
<li><code>endDate</code>: {{ $t('filters.query.help.fields.endDate') }}</li>
<li><code>doneAt</code>: {{ $t('filters.query.help.fields.doneAt') }}</li>
<li><code>assignees</code>: {{ $t('filters.query.help.fields.assignees') }}</li>
<li><code>labels</code>: {{ $t('filters.query.help.fields.labels') }}</li>
<li><code>project</code>: {{ $t('filters.query.help.fields.project') }}</li>
</ul>
<p>{{ $t('filters.query.help.canUseDatemath') }}</p>
<p>{{ $t('filters.query.help.operators.intro') }}</p>
<ul>
<li><code>!=</code>: {{ $t('filters.query.help.operators.notEqual') }}</li>
<li><code>=</code>: {{ $t('filters.query.help.operators.equal') }}</li>
<li><code>&gt;</code>: {{ $t('filters.query.help.operators.greaterThan') }}</li>
<li><code>&gt;=</code>: {{ $t('filters.query.help.operators.greaterThanOrEqual') }}</li>
<li><code>&lt;</code>: {{ $t('filters.query.help.operators.lessThan') }}</li>
<li><code>&lt;=</code>: {{ $t('filters.query.help.operators.lessThanOrEqual') }}</li>
<li><code>like</code>: {{ $t('filters.query.help.operators.like') }}</li>
<li><code>in</code>: {{ $t('filters.query.help.operators.in') }}</li>
</ul>
<p>{{ $t('filters.query.help.logicalOperators.intro') }}</p>
<ul>
<li><code>&amp;&amp;</code>: {{ $t('filters.query.help.logicalOperators.and') }}</li>
<li><code>||</code>: {{ $t('filters.query.help.logicalOperators.or') }}</li>
<li><code>(</code> and <code>)</code>: {{ $t('filters.query.help.logicalOperators.parentheses') }}</li>
</ul>
<p>{{ $t('filters.query.help.examples.intro') }}</p>
<ul>
<li><code>priority = 4</code>: {{ $t('filters.query.help.examples.priorityEqual') }}</li>
<li><code>dueDate &lt; now</code>: {{ $t('filters.query.help.examples.dueDatePast') }}</li>
<li>
<code>done = false &amp;&amp; priority &gt;= 3</code>:
{{ $t('filters.query.help.examples.undoneHighPriority') }}
</li>
<li><code>assignees in user1, user2</code>: {{ $t('filters.query.help.examples.assigneesIn') }}</li>
<li>
<code>(priority = 1 || priority = 2) &amp;&amp; dueDate &lt;= now</code>:
{{ $t('filters.query.help.examples.priorityOneOrTwoPastDue') }}
</li>
</ul>
</Expandable>
</template>