vikunja
/
frontend
Archived
6
39
Fork 49
Code Issues 1 Pull Requests 4 Projects Releases 26 Activity

feat: add explanation of how date math works

This commit is contained in:
kolaente 2022-01-09 16:31:17 +01:00
parent 2a884dfd45
commit 69b516a3fb
Signed by: konrad
GPG Key ID: F40E70337AB24C9B
3 changed files with 160 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
src/components/date/datepickerWithRange.vue
View File

@ -47,6 +47,122 @@
:config="flatPickerConfig"
v-model="flatpickrRange"
/>
<p>
{{ $t('input.datepickerRange.math.canuse') }}
<a @click="showHowItWorks = true">{{ $t('input.datepickerRange.math.learnhow') }}</a>.
</p>
<modal
@close="() => showHowItWorks = false"
:enabled="showHowItWorks"
transition-name="fade"
:overflow="true"
variant="hint-modal"
>
<card class="has-no-shadow how-it-works-modal" :title="$t('input.datepickerRange.math.title')">
<p>
{{ $t('input.datepickerRange.math.intro') }}
</p>
<p>
<i18n-t keypath="input.datepickerRange.math.expression">
<code>now</code>
<code>||</code>
</i18n-t>
</p>
<p>
<i18n-t keypath="input.datepickerRange.math.similar">
<a href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/" rel="noreferrer noopener nofollow" target="_blank">
Grafana
</a>
<a href="https://www.elastic.co/guide/en/elasticsearch/reference/7.3/common-options.html#date-math" rel="noreferrer noopener nofollow" target="_blank">
Elasticsearch
</a>
</i18n-t>
</p>
<p>{{ $t('misc.forExample') }}</p>
<ul>
<li><code>+1d</code>{{ $t('input.datepickerRange.math.add1Day') }}</li>
<li><code>-1d</code>{{ $t('input.datepickerRange.math.minus1Day') }}</li>
<li><code>/d</code>{{ $t('input.datepickerRange.math.roundDay') }}</li>
</ul>
<p>{{ $t('input.datepickerRange.math.supportedUnits') }}</p>
<table class="table">
<tbody>
<tr>
<td><code>s</code></td>
<td>{{ $t('input.datepickerRange.math.units.seconds') }}</td>
</tr>
<tr>
<td><code>m</code></td>
<td>{{ $t('input.datepickerRange.math.units.minutes') }}</td>
</tr>
<tr>
<td><code>h</code></td>
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
</tr>
<tr>
<td><code>H</code></td>
<td>{{ $t('input.datepickerRange.math.units.hours') }}</td>
</tr>
<tr>
<td><code>d</code></td>
<td>{{ $t('input.datepickerRange.math.units.days') }}</td>
</tr>
<tr>
<td><code>w</code></td>
<td>{{ $t('input.datepickerRange.math.units.weeks') }}</td>
</tr>
<tr>
<td><code>M</code></td>
<td>{{ $t('input.datepickerRange.math.units.months') }}</td>
</tr>
<tr>
<td><code>y</code></td>
<td>{{ $t('input.datepickerRange.math.units.years') }}</td>
</tr>
</tbody>
</table>
<p>{{ $t('input.datepickerRange.math.someExamples') }}</p>
<table class="table">
<tbody>
<tr>
<td><code>now</code></td>
<td>{{ $t('input.datepickerRange.math.examples.now') }}</td>
</tr>
<tr>
<td><code>now+24h</code></td>
<td>{{ $t('input.datepickerRange.math.examples.in24h') }}</td>
</tr>
<tr>
<td><code>now/d</code></td>
<td>{{ $t('input.datepickerRange.math.examples.today') }}</td>
</tr>
<tr>
<td><code>now/w</code></td>
<td>{{ $t('input.datepickerRange.math.examples.beginningOfThisWeek') }}</td>
</tr>
<tr>
<td><code>now/w+1w</code></td>
<td>{{ $t('input.datepickerRange.math.examples.endOfThisWeek') }}</td>
</tr>
<tr>
<td><code>now+30d</code></td>
<td>{{ $t('input.datepickerRange.math.examples.in30Days') }}</td>
</tr>
<tr>
<td><code>{{ exampleDate }}||+1M/d</code></td>
<td>
<i18n-t keypath="input.datepickerRange.math.examples.datePlusMonth">
<code>{{ exampleDate }}</code>
</i18n-t>
</td>
</tr>
</tbody>
</table>
</card>
</modal>
</div>
</div>
</template>
@ -60,6 +176,7 @@ import 'flatpickr/dist/flatpickr.css'
import {computed, ref, watch} from 'vue'
import {useI18n} from 'vue-i18n'
import {store} from '@/store'
import {format} from 'date-fns'
import Popup from '@/components/misc/popup.vue'
import {dateRanges} from '@/components/date/dateRanges'
@ -82,6 +199,9 @@ const flatPickerConfig = computed(() => ({
},
}))
const showHowItWorks = ref<boolean>(false)
const exampleDate = format(new Date(), 'yyyy-MM-dd')
const flatpickrRange = ref<string>('')
const from = ref<string>('')
@ -224,4 +344,12 @@ const customRangeActive = computed<Boolean>(() => {
}
}
}
.how-it-works-modal{
font-size: 1rem;
p {
display: inline-block !important;
}
}
</style>

3
src/components/modal/modal.vue
View File

@ -192,13 +192,10 @@ export default {
display: flex;
justify-content: space-between;
align-items: center;
}
}
}
/* Transitions */
.modal-enter,

33
src/i18n/lang/en.json
View File

@ -519,7 +519,38 @@
},
"datepickerRange": {
"to": "To",
"from": "From"
"from": "From",
"math": {
"canuse": "You can use date math to filter for relative dates.",
"learnhow": "Check out how it works",
"title": "Date Math",
"intro": "Date Math allows you to specifiy relative dates which are resolved on the fly by Vikunja when applying the filter.",
"expression": "Each Date Math expression starts with an anchor date, which can either be {0}, or a date string ending with {1}. This anchor date can optionally be followed by one or more maths expressions.",
"similar": "These expressions are similar to the ones provided by {0} and {1}.",
"add1Day": "Add one day",
"minus1Day": "Subtract one day",
"roundDay": "Round down to the nearest day",
"supportedUnits": "Supported time units are:",
"someExamples": "Some examples of time expressions:",
"units": {
"seconds": "Seconds",
"minutes": "Minutes",
"hours": "Hours",
"days": "Days",
"weeks": "Weeks",
"months": "Months",
"years": "Years"
},
"examples": {
"now": "Right now",
"in24h": "In 24h",
"today": "Today at 00:00",
"beginningOfThisWeek": "The beginning of this week at 00:00",
"endOfThisWeek": "The end of this week",
"in30Days": "In 30 days",
"datePlusMonth": "{0} plus one month at 00:00 of that day"
}
}
}
},
"task": {