diff --git a/cypress/integration/list/list.spec.js b/cypress/integration/list/list.spec.js index ce7f6f551..00f5b4f5e 100644 --- a/cypress/integration/list/list.spec.js +++ b/cypress/integration/list/list.spec.js @@ -72,7 +72,7 @@ describe('Lists', () => { .should('contain', newListName) .should('not.contain', lists[0].title) cy.visit('/') - cy.get('.card-content .tasks') + cy.get('.card-content') .should('contain', newListName) .should('not.contain', lists[0].title) }) diff --git a/src/components/date/dateRanges.ts b/src/components/date/dateRanges.ts new file mode 100644 index 000000000..648f001b4 --- /dev/null +++ b/src/components/date/dateRanges.ts @@ -0,0 +1,21 @@ +export const DATE_RANGES = { + // Format: + // Key is the title, as a translation string, the first entry of the value array + // is the "from" date, the second one is the "to" date. + 'today': ['now/d', 'now/d+1d'], + + 'lastWeek': ['now/w-1w', 'now/w-2w'], + 'thisWeek': ['now/w', 'now/w+1w'], + 'restOfThisWeek': ['now', 'now/w+1w'], + 'nextWeek': ['now/w+1w', 'now/w+2w'], + 'next7Days': ['now', 'now+7d'], + + 'lastMonth': ['now/M-1M', 'now/M-2M'], + 'thisMonth': ['now/M', 'now/M+1M'], + 'restOfThisMonth': ['now', 'now/M+1M'], + 'nextMonth': ['now/M+1M', 'now/M+2M'], + 'next30Days': ['now', 'now+30d'], + + 'thisYear': ['now/y', 'now/y+1y'], + 'restOfThisYear': ['now', 'now/y+1y'], +} diff --git a/src/components/date/datemathHelp.vue b/src/components/date/datemathHelp.vue new file mode 100644 index 000000000..f645fdb3e --- /dev/null +++ b/src/components/date/datemathHelp.vue @@ -0,0 +1,131 @@ + + + + + diff --git a/src/components/date/datepickerWithRange.vue b/src/components/date/datepickerWithRange.vue new file mode 100644 index 000000000..61c21ef53 --- /dev/null +++ b/src/components/date/datepickerWithRange.vue @@ -0,0 +1,254 @@ + + + + + diff --git a/src/components/list/partials/filter-popup.vue b/src/components/list/partials/filter-popup.vue index d4caf9b42..8e156106e 100644 --- a/src/components/list/partials/filter-popup.vue +++ b/src/components/list/partials/filter-popup.vue @@ -6,7 +6,7 @@ > {{ $t('filters.clear') }} - + - diff --git a/src/components/misc/popup.vue b/src/components/misc/popup.vue index fcfa420e8..e4143930f 100644 --- a/src/components/misc/popup.vue +++ b/src/components/misc/popup.vue @@ -1,6 +1,6 @@ @@ -16,6 +16,13 @@ const toggle = () => { open.value = !open.value } +const props = defineProps({ + hasOverflow: { + type: Boolean, + default: false, + }, +}) + function hidePopup(e) { if (!open.value) { return diff --git a/src/components/modal/modal.vue b/src/components/modal/modal.vue index e46d11192..c89cf5074 100644 --- a/src/components/modal/modal.vue +++ b/src/components/modal/modal.vue @@ -11,7 +11,6 @@ >
@@ -199,7 +198,6 @@ export default { display: flex; justify-content: space-between; align-items: center; - } } } diff --git a/src/helpers/time/getNextWeekDate.ts b/src/helpers/time/getNextWeekDate.ts new file mode 100644 index 000000000..d0bb303fb --- /dev/null +++ b/src/helpers/time/getNextWeekDate.ts @@ -0,0 +1,3 @@ +export function getNextWeekDate(): Date { + return new Date((new Date()).getTime() + 7 * 24 * 60 * 60 * 1000) +} diff --git a/src/helpers/time/parseDateOrString.ts b/src/helpers/time/parseDateOrString.ts new file mode 100644 index 000000000..1aeeb1153 --- /dev/null +++ b/src/helpers/time/parseDateOrString.ts @@ -0,0 +1,12 @@ +export function parseDateOrString(rawValue: string | undefined, fallback: any): string | Date { + if (typeof rawValue === 'undefined') { + return fallback + } + + const d = new Date(rawValue) + + // @ts-ignore if rawValue is an invalid date, isNan will return false. + return !isNaN(d) + ? d + : rawValue +} diff --git a/src/i18n/lang/en.json b/src/i18n/lang/en.json index fbbdc5b79..d3bc5780d 100644 --- a/src/i18n/lang/en.json +++ b/src/i18n/lang/en.json @@ -485,7 +485,8 @@ "showMenu": "Show the menu", "hideMenu": "Hide the menu", "forExample": "For example:", - "welcomeBack": "Welcome Back!" + "welcomeBack": "Welcome Back!", + "custom": "Custom" }, "input": { "resetColor": "Reset Color", @@ -524,6 +525,60 @@ "multiselect": { "createPlaceholder": "Create new", "selectPlaceholder": "Click or press enter to select" + }, + "datepickerRange": { + "to": "To", + "from": "From", + "fromto": "{from} to {to}", + "ranges": { + "today": "Today", + + "thisWeek": "This Week", + "restOfThisWeek": "The Rest of This Week", + "nextWeek": "Next Week", + "next7Days": "Next 7 Days", + "lastWeek": "Last Week", + + "thisMonth": "This Month", + "restOfThisMonth": "The Rest of This Month", + "nextMonth": "Next Month", + "next30Days": "Next 30 Days", + "lastMonth": "Last Month", + + "thisYear": "This Year", + "restOfThisYear": "The Rest of This Year" + } + }, + "datemathHelp": { + "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": { @@ -541,12 +596,9 @@ "titleCurrent": "Current Tasks", "titleDates": "Tasks from {from} until {to}", "noDates": "Show tasks without dates", - "current": "Current tasks", - "from": "Tasks from", - "until": "until", - "today": "Today", - "nextWeek": "Next Week", - "nextMonth": "Next Month", + "overdue": "Show overdue tasks", + "fromuntil": "Tasks from {from} until {until}", + "select": "Select a date range", "noTasks": "Nothing to do — Have a nice day!" }, "detail": { diff --git a/src/router/index.ts b/src/router/index.ts index 6e4ccce26..a1f6a2e63 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -3,6 +3,8 @@ import {saveLastVisited} from '@/helpers/saveLastVisited' import {store} from '@/store' import {saveListView, getListView} from '@/helpers/saveListView' +import {parseDateOrString} from '@/helpers/time/parseDateOrString' +import {getNextWeekDate} from '@/helpers/time/getNextWeekDate' import HomeComponent from '../views/Home.vue' import NotFoundComponent from '../views/404.vue' @@ -13,7 +15,7 @@ import RegisterComponent from '../views/user/Register.vue' import OpenIdAuth from '../views/user/OpenIdAuth.vue' import DataExportDownload from '../views/user/DataExportDownload.vue' // Tasks -import ShowTasksInRangeComponent from '../views/tasks/ShowTasksInRange.vue' +import UpcomingTasksComponent from '../views/tasks/ShowTasks.vue' import LinkShareAuthComponent from '../views/sharing/LinkSharingAuth.vue' import ListNamespaces from '../views/namespaces/ListNamespaces.vue' import TaskDetailView from '../views/tasks/TaskDetailView.vue' @@ -248,7 +250,13 @@ const router = createRouter({ { path: '/tasks/by/upcoming', name: 'tasks.range', - component: ShowTasksInRangeComponent, + component: UpcomingTasksComponent, + props: route => ({ + dateFrom: parseDateOrString(route.query.from as string, new Date()), + dateTo: parseDateOrString(route.query.to as string, getNextWeekDate()), + showNulls: route.query.showNulls === 'true', + showOverdue: route.query.showOverdue === 'true', + }), }, { path: '/lists/new/:namespaceId/', diff --git a/src/services/abstractService.js b/src/services/abstractService.js index a28334f3f..4dc0bd6b8 100644 --- a/src/services/abstractService.js +++ b/src/services/abstractService.js @@ -2,6 +2,31 @@ import axios from 'axios' import {objectToSnakeCase} from '@/helpers/case' import {getToken} from '@/helpers/auth' +function convertObject(o) { + if (o instanceof Date) { + return o.toISOString() + } + + return o +} + +function prepareParams(params) { + if (typeof params !== 'object') { + return params + } + + for (const p in params) { + if (Array.isArray(params[p])) { + params[p] = params[p].map(convertObject) + continue + } + + params[p] = convertObject(params[p]) + } + + return objectToSnakeCase(params) +} + export default class AbstractService { ///////////////////////////// @@ -292,7 +317,7 @@ export default class AbstractService { const finalUrl = this.getReplacedRoute(url, model) try { - const response = await this.http.get(finalUrl, {params}) + const response = await this.http.get(finalUrl, {params: prepareParams(params)}) const result = this.modelGetFactory(response.data) result.maxRight = Number(response.headers['x-max-right']) return result @@ -331,7 +356,7 @@ export default class AbstractService { const finalUrl = this.getReplacedRoute(this.paths.getAll, model) try { - const response = await this.http.get(finalUrl, {params: params}) + const response = await this.http.get(finalUrl, {params: prepareParams(params)}) this.resultCount = Number(response.headers['x-pagination-result-count']) this.totalPages = Number(response.headers['x-pagination-total-pages']) diff --git a/src/styles/theme/theme.scss b/src/styles/theme/theme.scss index 6e76cac99..8087a2e19 100644 --- a/src/styles/theme/theme.scss +++ b/src/styles/theme/theme.scss @@ -70,7 +70,7 @@ h6 { } .has-overflow { - overflow: visible; + overflow: visible !important; } .has-horizontal-overflow { diff --git a/src/views/Home.vue b/src/views/Home.vue index 14c160d45..ac82f2615 100644 --- a/src/views/Home.vue +++ b/src/views/Home.vue @@ -50,7 +50,11 @@ />
- + @@ -83,13 +87,14 @@ const userInfo = computed(() => store.state.auth.info) const hasTasks = computed(() => store.state.hasTasks) const defaultListId = computed(() => store.state.auth.defaultListId) const defaultNamespaceId = computed(() => store.state.namespaces.namespaces?.[0]?.id || 0) -const hasLists = computed (() => store.state.namespaces.namespaces?.[0]?.lists.length > 0) +const hasLists = computed(() => store.state.namespaces.namespaces?.[0]?.lists.length > 0) const loading = computed(() => store.state.loading && store.state.loadingModule === 'tasks') const deletionScheduledAt = computed(() => parseDateOrNull(store.state.auth.info?.deletionScheduledAt)) // This is to reload the tasks list after adding a new task through the global task add. // FIXME: Should use vuex (somehow?) const showTasksKey = ref(0) + function updateTaskList() { showTasksKey.value++ } diff --git a/src/views/tasks/ShowTasks.vue b/src/views/tasks/ShowTasks.vue index 7252f7a69..71e16476a 100644 --- a/src/views/tasks/ShowTasks.vue +++ b/src/views/tasks/ShowTasks.vue @@ -1,287 +1,236 @@ - \ No newline at end of file diff --git a/src/views/tasks/ShowTasksInRange.vue b/src/views/tasks/ShowTasksInRange.vue deleted file mode 100644 index 02498cc11..000000000 --- a/src/views/tasks/ShowTasksInRange.vue +++ /dev/null @@ -1,20 +0,0 @@ - - - \ No newline at end of file diff --git a/vite.config.ts b/vite.config.ts index 8e9715f93..008ef9f34 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,8 @@ /// -import { defineConfig } from 'vite' +import {defineConfig} from 'vite' import vue from '@vitejs/plugin-vue' import legacyFn from '@vitejs/plugin-legacy' + const {VitePWA} = require('vite-plugin-pwa') const path = require('path') const {visualizer} = require('rollup-plugin-visualizer') @@ -49,6 +50,7 @@ export default defineConfig({ }, }, }, + reactivityTransform: true, }), legacy, svgLoader({