From e7fa1d3383d19daca68c30ee431059f3d47f2589 Mon Sep 17 00:00:00 2001
From: kolaente <k@knt.li>
Date: Sun, 9 Jan 2022 16:31:17 +0100
Subject: [PATCH] feat: add explanation of how date math works

---
 src/components/date/datepickerWithRange.vue | 128 ++++++++++++++++++++
 src/components/modal/modal.vue              |   1 -
 src/i18n/lang/en.json                       |  33 ++++-
 3 files changed, 160 insertions(+), 2 deletions(-)

diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue
index b6cb9a51..e2bb15b5 100644
--- a/src/components/date/datepickerWithRange.vue
+++ b/src/components/date/datepickerWithRange.vue
@@ -49,6 +49,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>
@@ -62,6 +178,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'
@@ -84,6 +201,9 @@ const flatPickerConfig = computed(() => ({
 	},
 }))
 
+const showHowItWorks = ref(false)
+const exampleDate = format(new Date(), 'yyyy-MM-dd') 
+
 const flatpickrRange = ref('')
 
 const from = ref('')
@@ -226,4 +346,12 @@ const customRangeActive = computed<Boolean>(() => {
 		}
 	}
 }
+
+.how-it-works-modal{
+	font-size: 1rem;
+	
+	p {
+		display: inline-block !important;
+	}
+}
 </style>
diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue
index c231df67..b049f1b5 100644
--- a/src/components/modal/modal.vue
+++ b/src/components/modal/modal.vue
@@ -207,7 +207,6 @@ export default {
 			display: flex;
 			justify-content: space-between;
 			align-items: center;
-
 		}
 	}
 }
diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json
index 83dadcc9..47c5f641 100644
--- a/src/i18n/lang/en.json
+++ b/src/i18n/lang/en.json
@@ -525,7 +525,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": {