From 820cae6725a34ca813743436fc0727e3790eb8cc Mon Sep 17 00:00:00 2001 From: redhoyasa Date: Mon, 31 Oct 2022 14:52:47 +0700 Subject: [PATCH 1/8] make view list disabled for readonly mode --- webapp/src/components/viewMenu.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/webapp/src/components/viewMenu.tsx b/webapp/src/components/viewMenu.tsx index acb1dbf38..1d1536c35 100644 --- a/webapp/src/components/viewMenu.tsx +++ b/webapp/src/components/viewMenu.tsx @@ -279,6 +279,7 @@ const ViewMenu = (props: Props) => { name={view.title} icon={iconForViewType(view.fields.viewType)} onClick={handleViewClick} + disabled={props.readonly} />))} From 1da0abd7180a15b087185b7cbd72fce83101ec6c Mon Sep 17 00:00:00 2001 From: redhoyasa Date: Mon, 7 Nov 2022 22:04:56 +0700 Subject: [PATCH 2/8] disable menu dropdown for readonly mode (#2932) --- webapp/src/components/viewHeader/viewHeader.tsx | 5 ++++- webapp/src/components/viewMenu.tsx | 1 - 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/webapp/src/components/viewHeader/viewHeader.tsx b/webapp/src/components/viewHeader/viewHeader.tsx index 95dc19652..2b7957cb2 100644 --- a/webapp/src/components/viewHeader/viewHeader.tsx +++ b/webapp/src/components/viewHeader/viewHeader.tsx @@ -150,7 +150,10 @@ const ViewHeader = (props: Props) => { autoExpand={false} />
- + }/> { name={view.title} icon={iconForViewType(view.fields.viewType)} onClick={handleViewClick} - disabled={props.readonly} />))}
From eb031cab5fb96594819f21d7f6d3f01891fa98cb Mon Sep 17 00:00:00 2001 From: redhoyasa Date: Fri, 9 Dec 2022 16:41:36 +0700 Subject: [PATCH 3/8] hide dropdown for readonly mode --- webapp/src/components/viewHeader/viewHeader.tsx | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/webapp/src/components/viewHeader/viewHeader.tsx b/webapp/src/components/viewHeader/viewHeader.tsx index 2b7957cb2..d8d5b4e1b 100644 --- a/webapp/src/components/viewHeader/viewHeader.tsx +++ b/webapp/src/components/viewHeader/viewHeader.tsx @@ -149,11 +149,8 @@ const ViewHeader = (props: Props) => { spellCheck={true} autoExpand={false} /> -
- + {!props.readonly && (
+ }/> { /> {showAddViewTourStep && } -
+
)} +
From 9e9b67b813dca75244f0006e3d7b60101e7a20ad Mon Sep 17 00:00:00 2001 From: Harshil Sharma <18575143+harshilsharma63@users.noreply.github.com> Date: Tue, 10 Jan 2023 19:05:26 +0530 Subject: [PATCH 4/8] Added unregister change handler to useEffect (#4373) Co-authored-by: Mattermost Build --- webapp/src/components/sidebar/sidebar.tsx | 16 ++++++++++++---- 1 file changed, 12 insertions(+), 4 deletions(-) diff --git a/webapp/src/components/sidebar/sidebar.tsx b/webapp/src/components/sidebar/sidebar.tsx index a8509ef01..558cdd0b4 100644 --- a/webapp/src/components/sidebar/sidebar.tsx +++ b/webapp/src/components/sidebar/sidebar.tsx @@ -77,13 +77,21 @@ const Sidebar = (props: Props) => { const currentBoard = useAppSelector(getCurrentBoard) useEffect(() => { - wsClient.addOnChange((_: WSClient, categories: Category[]) => { + const categoryOnChangeHandler = (_: WSClient, categories: Category[]) => { dispatch(updateCategories(categories)) - }, 'category') + } - wsClient.addOnChange((_: WSClient, blockCategories: BoardCategoryWebsocketData[]) => { + const blockCategoryOnChangeHandler = (_: WSClient, blockCategories: BoardCategoryWebsocketData[]) => { dispatch(updateBoardCategories(blockCategories)) - }, 'blockCategories') + } + + wsClient.addOnChange(categoryOnChangeHandler, 'category') + wsClient.addOnChange(blockCategoryOnChangeHandler, 'blockCategories') + + return function cleanup() { + wsClient.removeOnChange(categoryOnChangeHandler, 'category') + wsClient.removeOnChange(blockCategoryOnChangeHandler, 'blockCategories') + } }, []) const teamId = useAppSelector(getCurrentTeamId) From 5450a298adfe587dca43778967b058667daf8b26 Mon Sep 17 00:00:00 2001 From: Rajat-Dabade Date: Wed, 11 Jan 2023 23:52:51 +0530 Subject: [PATCH 5/8] Updated snapshot --- .../__snapshots__/centerPanel.test.tsx.snap | 16 ---------- .../__snapshots__/workspace.test.tsx.snap | 30 ------------------- .../__snapshots__/viewHeader.test.tsx.snap | 16 ---------- 3 files changed, 62 deletions(-) diff --git a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap index 49bf19dea..96d6ec147 100644 --- a/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap +++ b/webapp/src/components/__snapshots__/centerPanel.test.tsx.snap @@ -2025,22 +2025,6 @@ exports[`components/centerPanel return centerPanel and press touch 1 with readon title="view title" value="view title" /> -
-
- -
-
-
-
- -
-
-
-
- -
-
-
-
- -
-
Date: Wed, 11 Jan 2023 16:48:08 -0700 Subject: [PATCH 6/8] Implement Date Filter (#4412) * implement a date property type * handle when property is not set, default create date * update to remove unneeded fields, updated how dateTo is returned * fix creating new date * remove unused constant * update unit tests * implement date filter * add unit tests for all files * some cleanup * fix unit tests, update snapshots * date fix for unit tests * add log to determine unit test issue * update snapshot * minor cleanup * add class name * Revert "add class name" This reverts commit fec93088122c2fc42aeb8ffaf7ba12b6d21a52a4. * add class name Co-authored-by: Mattermod Co-authored-by: Mattermost Build --- webapp/src/blocks/filterClause.test.ts | 64 ++++ webapp/src/blocks/filterClause.ts | 10 +- webapp/src/cardFilter.test.ts | 186 +++++++++++ webapp/src/cardFilter.ts | 94 ++++++ .../src/components/calendar/fullCalendar.tsx | 14 +- .../__snapshots__/dateFilter.test.tsx.snap | 203 ++++++++++++ .../filterComponent.test.tsx.snap | 2 + .../__snapshots__/filterEntry.test.tsx.snap | 310 ++++++++++++++++++ .../__snapshots__/filterValue.test.tsx.snap | 17 + .../src/components/viewHeader/dateFilter.scss | 222 +++++++++++++ .../components/viewHeader/dateFilter.test.tsx | 247 ++++++++++++++ .../src/components/viewHeader/dateFilter.tsx | 204 ++++++++++++ .../viewHeader/filterEntry.test.tsx | 27 ++ .../src/components/viewHeader/filterEntry.tsx | 31 ++ .../viewHeader/filterValue.test.tsx | 40 +++ .../src/components/viewHeader/filterValue.tsx | 18 +- .../viewHeader/viewHeaderDisplayByMenu.tsx | 4 +- webapp/src/components/workspace.tsx | 4 +- webapp/src/octoUtils.tsx | 11 + .../src/properties/createdTime/property.tsx | 5 +- webapp/src/properties/date/property.tsx | 16 +- webapp/src/properties/types.tsx | 20 +- .../src/properties/updatedTime/property.tsx | 5 +- 23 files changed, 1721 insertions(+), 33 deletions(-) create mode 100644 webapp/src/blocks/filterClause.test.ts create mode 100644 webapp/src/components/viewHeader/__snapshots__/dateFilter.test.tsx.snap create mode 100644 webapp/src/components/viewHeader/dateFilter.scss create mode 100644 webapp/src/components/viewHeader/dateFilter.test.tsx create mode 100644 webapp/src/components/viewHeader/dateFilter.tsx diff --git a/webapp/src/blocks/filterClause.test.ts b/webapp/src/blocks/filterClause.test.ts new file mode 100644 index 000000000..e55660564 --- /dev/null +++ b/webapp/src/blocks/filterClause.test.ts @@ -0,0 +1,64 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import {areEqual, createFilterClause} from './filterClause' + +describe('filterClause tests', () => { + it('create filter clause', () => { + const clause = createFilterClause({ + propertyId: 'myPropertyId', + condition: 'contains', + values: [], + }) + + expect(clause).toEqual({ + propertyId: 'myPropertyId', + condition: 'contains', + values: [], + }) + }) + + it('test filter clauses are equal', () => { + const clause = createFilterClause({ + propertyId: 'myPropertyId', + condition: 'contains', + values: ['abc', 'def'], + }) + const newClause = createFilterClause(clause) + const testEqual = areEqual(clause, newClause) + expect(testEqual).toBeTruthy() + }) + + it('test filter clauses are Not equal property ID', () => { + const clause = createFilterClause({ + propertyId: 'myPropertyId', + condition: 'contains', + values: ['abc', 'def'], + }) + const newClause = createFilterClause(clause) + newClause.propertyId = 'DifferentID' + const testEqual = areEqual(clause, newClause) + expect(testEqual).toBeFalsy() + }) + it('test filter clauses are Not equal condition', () => { + const clause = createFilterClause({ + propertyId: 'myPropertyId', + condition: 'contains', + values: ['abc', 'def'], + }) + const newClause = createFilterClause(clause) + newClause.condition = 'notContains' + const testEqual = areEqual(clause, newClause) + expect(testEqual).toBeFalsy() + }) + it('test filter clauses are Not equal values', () => { + const clause = createFilterClause({ + propertyId: 'myPropertyId', + condition: 'contains', + values: ['abc', 'def'], + }) + const newClause = createFilterClause(clause) + newClause.values = ['abc, def'] + const testEqual = areEqual(clause, newClause) + expect(testEqual).toBeFalsy() + }) +}) diff --git a/webapp/src/blocks/filterClause.ts b/webapp/src/blocks/filterClause.ts index 166b05c24..bffcf79f8 100644 --- a/webapp/src/blocks/filterClause.ts +++ b/webapp/src/blocks/filterClause.ts @@ -2,7 +2,15 @@ // See LICENSE.txt for license information. import {Utils} from '../utils' -type FilterCondition = 'includes' | 'notIncludes' | 'isEmpty' | 'isNotEmpty' | 'isSet' | 'isNotSet' | 'is' | 'contains' | 'notContains' | 'startsWith' | 'notStartsWith' | 'endsWith' | 'notEndsWith' +type FilterCondition = + 'includes' | 'notIncludes' | + 'isEmpty' | 'isNotEmpty' | + 'isSet' | 'isNotSet' | + 'is' | + 'contains' | 'notContains' | + 'startsWith' | 'notStartsWith' | + 'endsWith' | 'notEndsWith' | + 'isBefore' | 'isAfter' type FilterClause = { propertyId: string diff --git a/webapp/src/cardFilter.test.ts b/webapp/src/cardFilter.test.ts index 9f82add41..d3ea5c408 100644 --- a/webapp/src/cardFilter.test.ts +++ b/webapp/src/cardFilter.test.ts @@ -8,10 +8,14 @@ import {createFilterGroup} from './blocks/filterGroup' import {CardFilter} from './cardFilter' import {TestBlockFactory} from './test/testBlockFactory' import {Utils} from './utils' + import {IPropertyTemplate} from './blocks/board' jest.mock('./utils') const mockedUtils = mocked(Utils, true) + +const dayMillis = 24 * 60 * 60 * 1000 + describe('src/cardFilter', () => { const board = TestBlockFactory.createBoard() board.id = '1' @@ -21,6 +25,7 @@ describe('src/cardFilter', () => { card1.title = 'card1' card1.fields.properties.propertyId = 'Status' const filterClause = createFilterClause({propertyId: 'propertyId', condition: 'isNotEmpty', values: ['Status']}) + describe('verify isClauseMet method', () => { test('should be true with isNotEmpty clause', () => { const filterClauseIsNotEmpty = createFilterClause({propertyId: 'propertyId', condition: 'isNotEmpty', values: ['Status']}) @@ -53,6 +58,187 @@ describe('src/cardFilter', () => { expect(result).toBeTruthy() }) }) + + describe('verify isClauseMet method - single date property', () => { + // Date Properties are stored as 12PM UTC. + const now = new Date(Date.now()) + const propertyDate = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 12) + + const dateCard = TestBlockFactory.createCard(board) + dateCard.id = '1' + dateCard.title = 'card1' + dateCard.fields.properties.datePropertyID = '{ "from": ' + propertyDate.toString() + ' }' + + const checkDayBefore = propertyDate - dayMillis + const checkDayAfter = propertyDate + dayMillis + + const template: IPropertyTemplate = { + id: 'datePropertyID', + name: 'myDate', + type: 'date', + options: [], + } + + test('should be true with isSet clause', () => { + const filterClauseIsSet = createFilterClause({propertyId: 'datePropertyID', condition: 'isSet', values: []}) + const result = CardFilter.isClauseMet(filterClauseIsSet, [template], dateCard) + expect(result).toBeTruthy() + }) + test('should be false with notSet clause', () => { + const filterClauseIsNotSet = createFilterClause({propertyId: 'datePropertyID', condition: 'isNotSet', values: []}) + const result = CardFilter.isClauseMet(filterClauseIsNotSet, [template], dateCard) + expect(result).toBeFalsy() + }) + test('verify isBefore clause', () => { + const filterClauseIsBefore = createFilterClause({propertyId: 'datePropertyID', condition: 'isBefore', values: [checkDayAfter.toString()]}) + const result = CardFilter.isClauseMet(filterClauseIsBefore, [template], dateCard) + expect(result).toBeTruthy() + + const filterClauseIsNotBefore = createFilterClause({propertyId: 'datePropertyID', condition: 'isBefore', values: [checkDayBefore.toString()]}) + const result2 = CardFilter.isClauseMet(filterClauseIsNotBefore, [template], dateCard) + expect(result2).toBeFalsy() + }) + test('verify isAfter clauses', () => { + const filterClauseisAfter = createFilterClause({propertyId: 'datePropertyID', condition: 'isAfter', values: [checkDayBefore.toString()]}) + const result = CardFilter.isClauseMet(filterClauseisAfter, [template], dateCard) + expect(result).toBeTruthy() + + const filterClauseisNotAfter = createFilterClause({propertyId: 'datePropertyID', condition: 'isAfter', values: [checkDayAfter.toString()]}) + const result2 = CardFilter.isClauseMet(filterClauseisNotAfter, [template], dateCard) + expect(result2).toBeFalsy() + }) + test('verify is clause', () => { + const filterClauseIs = createFilterClause({propertyId: 'datePropertyID', condition: 'is', values: [propertyDate.toString()]}) + const result = CardFilter.isClauseMet(filterClauseIs, [template], dateCard) + expect(result).toBeTruthy() + + const filterClauseIsNot = createFilterClause({propertyId: 'datePropertyID', condition: 'is', values: [checkDayBefore.toString()]}) + const result2 = CardFilter.isClauseMet(filterClauseIsNot, [template], dateCard) + expect(result2).toBeFalsy() + }) + }) + + describe('verify isClauseMet method - date range property', () => { + // Date Properties are stored as 12PM UTC. + const now = new Date(Date.now()) + const fromDate = Date.UTC(now.getFullYear(), now.getMonth(), now.getDate(), 12) + const toDate = fromDate + (2 * dayMillis) + const dateCard = TestBlockFactory.createCard(board) + dateCard.id = '1' + dateCard.title = 'card1' + dateCard.fields.properties.datePropertyID = '{ "from": ' + fromDate.toString() + ', "to": ' + toDate.toString() + ' }' + + const beforeRange = fromDate - dayMillis + const afterRange = toDate + dayMillis + const inRange = fromDate + dayMillis + + const template: IPropertyTemplate = { + id: 'datePropertyID', + name: 'myDate', + type: 'date', + options: [], + } + + test('verify isBefore clause', () => { + const filterClauseIsBefore = createFilterClause({propertyId: 'datePropertyID', condition: 'isBefore', values: [beforeRange.toString()]}) + const result = CardFilter.isClauseMet(filterClauseIsBefore, [template], dateCard) + expect(result).toBeFalsy() + + const filterClauseIsInRange = createFilterClause({propertyId: 'datePropertyID', condition: 'isBefore', values: [inRange.toString()]}) + const result2 = CardFilter.isClauseMet(filterClauseIsInRange, [template], dateCard) + expect(result2).toBeTruthy() + + const filterClauseIsAfter = createFilterClause({propertyId: 'datePropertyID', condition: 'isBefore', values: [afterRange.toString()]}) + const result3 = CardFilter.isClauseMet(filterClauseIsAfter, [template], dateCard) + expect(result3).toBeTruthy() + }) + + test('verify isAfter clauses', () => { + const filterClauseIsAfter = createFilterClause({propertyId: 'datePropertyID', condition: 'isAfter', values: [afterRange.toString()]}) + const result = CardFilter.isClauseMet(filterClauseIsAfter, [template], dateCard) + expect(result).toBeFalsy() + + const filterClauseIsInRange = createFilterClause({propertyId: 'datePropertyID', condition: 'isAfter', values: [inRange.toString()]}) + const result2 = CardFilter.isClauseMet(filterClauseIsInRange, [template], dateCard) + expect(result2).toBeTruthy() + + const filterClauseIsBefore = createFilterClause({propertyId: 'datePropertyID', condition: 'isAfter', values: [beforeRange.toString()]}) + const result3 = CardFilter.isClauseMet(filterClauseIsBefore, [template], dateCard) + expect(result3).toBeTruthy() + }) + + test('verify is clause', () => { + const filterClauseIsBefore = createFilterClause({propertyId: 'datePropertyID', condition: 'is', values: [beforeRange.toString()]}) + const result = CardFilter.isClauseMet(filterClauseIsBefore, [template], dateCard) + expect(result).toBeFalsy() + + const filterClauseIsInRange = createFilterClause({propertyId: 'datePropertyID', condition: 'is', values: [inRange.toString()]}) + const result2 = CardFilter.isClauseMet(filterClauseIsInRange, [template], dateCard) + expect(result2).toBeTruthy() + + const filterClauseIsAfter = createFilterClause({propertyId: 'datePropertyID', condition: 'is', values: [afterRange.toString()]}) + const result3 = CardFilter.isClauseMet(filterClauseIsAfter, [template], dateCard) + expect(result3).toBeFalsy() + }) + }) + + describe('verify isClauseMet method - (createdTime) date property', () => { + const createDate = new Date(card1.createAt) + const checkDate = Date.UTC(createDate.getFullYear(), createDate.getMonth(), createDate.getDate(), 12) + const checkDayBefore = checkDate - dayMillis + const checkDayAfter = checkDate + dayMillis + + const template: IPropertyTemplate = { + id: 'datePropertyID', + name: 'myDate', + type: 'createdTime', + options: [], + } + + test('should be true with isSet clause', () => { + const filterClauseIsSet = createFilterClause({propertyId: 'datePropertyID', condition: 'isSet', values: []}) + const result = CardFilter.isClauseMet(filterClauseIsSet, [template], card1) + expect(result).toBeTruthy() + }) + test('should be false with notSet clause', () => { + const filterClauseIsNotSet = createFilterClause({propertyId: 'datePropertyID', condition: 'isNotSet', values: []}) + const result = CardFilter.isClauseMet(filterClauseIsNotSet, [template], card1) + expect(result).toBeFalsy() + }) + test('verify isBefore clause', () => { + const filterClauseIsBefore = createFilterClause({propertyId: 'datePropertyID', condition: 'isBefore', values: [checkDayAfter.toString()]}) + const result = CardFilter.isClauseMet(filterClauseIsBefore, [template], card1) + expect(result).toBeTruthy() + + const filterClauseIsNotBefore = createFilterClause({propertyId: 'datePropertyID', condition: 'isBefore', values: [checkDate.toString()]}) + const result2 = CardFilter.isClauseMet(filterClauseIsNotBefore, [template], card1) + expect(result2).toBeFalsy() + }) + test('verify isAfter clauses', () => { + const filterClauseisAfter = createFilterClause({propertyId: 'datePropertyID', condition: 'isAfter', values: [checkDayBefore.toString()]}) + const result = CardFilter.isClauseMet(filterClauseisAfter, [template], card1) + expect(result).toBeTruthy() + + const filterClauseisNotAfter = createFilterClause({propertyId: 'datePropertyID', condition: 'isAfter', values: [checkDate.toString()]}) + const result2 = CardFilter.isClauseMet(filterClauseisNotAfter, [template], card1) + expect(result2).toBeFalsy() + }) + test('verify is clause', () => { + // Is should find on that date regardless of time. + const filterClauseIs = createFilterClause({propertyId: 'datePropertyID', condition: 'is', values: [checkDate.toString()]}) + const result = CardFilter.isClauseMet(filterClauseIs, [template], card1) + expect(result).toBeTruthy() + + const filterClauseIsNot = createFilterClause({propertyId: 'datePropertyID', condition: 'is', values: [checkDayBefore.toString()]}) + const result2 = CardFilter.isClauseMet(filterClauseIsNot, [template], card1) + expect(result2).toBeFalsy() + + const filterClauseIsNot2 = createFilterClause({propertyId: 'datePropertyID', condition: 'is', values: [checkDayAfter.toString()]}) + const result3 = CardFilter.isClauseMet(filterClauseIsNot2, [template], card1) + expect(result3).toBeFalsy() + }) + }) + describe('verify isFilterGroupMet method', () => { test('should return true with no filter', () => { const filterGroup = createFilterGroup({ diff --git a/webapp/src/cardFilter.ts b/webapp/src/cardFilter.ts index 4bd41e39c..d6fac950a 100644 --- a/webapp/src/cardFilter.ts +++ b/webapp/src/cardFilter.ts @@ -1,12 +1,35 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. +import {DateUtils} from 'react-day-picker' + +import {DateProperty} from './properties/date/date' + import {IPropertyTemplate} from './blocks/board' import {Card} from './blocks/card' import {FilterClause} from './blocks/filterClause' import {FilterGroup, isAFilterGroupInstance} from './blocks/filterGroup' import {Utils} from './utils' +const halfDay = 12 * 60 * 60 * 1000 + class CardFilter { + static createDatePropertyFromString(initialValue: string): DateProperty { + let dateProperty: DateProperty = {} + if (initialValue) { + const singleDate = new Date(Number(initialValue)) + if (singleDate && DateUtils.isDate(singleDate)) { + dateProperty.from = singleDate.getTime() + } else { + try { + dateProperty = JSON.parse(initialValue) + } catch { + //Don't do anything, return empty dateProperty + } + } + } + return dateProperty + } + static applyFilterGroup(filterGroup: FilterGroup, templates: readonly IPropertyTemplate[], cards: Card[]): Card[] { return cards.filter((card) => this.isFilterGroupMet(filterGroup, templates, card)) } @@ -48,6 +71,22 @@ class CardFilter { if (filter.propertyId === 'title') { value = card.title.toLowerCase() } + const template = templates.find((o) => o.id === filter.propertyId) + let dateValue: DateProperty | undefined + if (template?.type === 'date') { + dateValue = this.createDatePropertyFromString(value as string) + } + if (!value) { + // const template = templates.find((o) => o.id === filter.propertyId) + if (template && template.type === 'createdTime') { + value = card.createAt.toString() + dateValue = this.createDatePropertyFromString(value as string) + } else if (template && template.type === 'updatedTime') { + value = card.updateAt.toString() + dateValue = this.createDatePropertyFromString(value as string) + } + } + switch (filter.condition) { case 'includes': { if (filter.values?.length < 1) { @@ -77,6 +116,23 @@ class CardFilter { if (filter.values.length === 0) { return true } + if (dateValue !== undefined) { + const numericFilter = parseInt(filter.values[0], 10) + if (template && (template.type === 'createdTime' || template.type === 'updatedTime')) { + // createdTime and updatedTime include the time + // So to check if create and/or updated "is" date. + // Need to add and subtract 12 hours and check range + if (dateValue.from) { + return dateValue.from > (numericFilter - halfDay) && dateValue.from < (numericFilter + halfDay) + } + return false + } + + if (dateValue.from && dateValue.to) { + return dateValue.from <= numericFilter && dateValue.to >= numericFilter + } + return dateValue.from === numericFilter + } return filter.values[0]?.toLowerCase() === value } case 'contains': { @@ -115,6 +171,44 @@ class CardFilter { } return !(value as string || '').endsWith(filter.values[0]?.toLowerCase()) } + case 'isBefore': { + if (dateValue !== undefined) { + const numericFilter = parseInt(filter.values[0], 10) + if (template && (template.type === 'createdTime' || template.type === 'updatedTime')) { + // createdTime and updatedTime include the time + // So to check if create and/or updated "isBefore" date. + // Need to subtract 12 hours to filter + if (dateValue.from) { + return dateValue.from < (numericFilter - halfDay) + } + return false + } + + return dateValue.from ? dateValue.from < numericFilter : false + } + return false + } + case 'isAfter': { + if (dateValue !== undefined) { + const numericFilter = parseInt(filter.values[0], 10) + if (template && (template.type === 'createdTime' || template.type === 'updatedTime')) { + // createdTime and updatedTime include the time + // So to check if create and/or updated "isAfter" date. + // Need to add 12 hours to filter + if (dateValue.from) { + return dateValue.from > (numericFilter + halfDay) + } + return false + } + + if (dateValue.to) { + return dateValue.to > numericFilter + } + return dateValue.from ? dateValue.from > numericFilter : false + } + return false + } + default: { Utils.assertFailure(`Invalid filter condition ${filter.condition}`) } diff --git a/webapp/src/components/calendar/fullCalendar.tsx b/webapp/src/components/calendar/fullCalendar.tsx index 8cf0bb016..7c1fccf26 100644 --- a/webapp/src/components/calendar/fullCalendar.tsx +++ b/webapp/src/components/calendar/fullCalendar.tsx @@ -9,6 +9,8 @@ import FullCalendar, {EventChangeArg, EventInput, EventContentArg, DayCellConten import interactionPlugin from '@fullcalendar/interaction' import dayGridPlugin from '@fullcalendar/daygrid' +import {DatePropertyType} from '../../properties/types' + import mutator from '../../mutator' import {Board, IPropertyTemplate} from '../../blocks/board' @@ -96,20 +98,20 @@ const CalendarFullView = (props: Props): JSX.Element|null => { const myEventsList = useMemo(() => ( cards.flatMap((card): EventInput[] => { const property = propsRegistry.get(dateDisplayProperty?.type || 'unknown') + let dateFrom = new Date(card.createAt || 0) let dateTo = new Date(card.createAt || 0) - if (property.isDate && property.getDateFrom && property.getDateTo) { + if (property instanceof DatePropertyType) { const dateFromValue = property.getDateFrom(card.fields.properties[dateDisplayProperty?.id || ''], card) if (!dateFromValue) { return [] } dateFrom = dateFromValue - const dateToValue = property.getDateTo(card.fields.properties[dateDisplayProperty?.id || ''], card) - if (!dateToValue) { - return [] - } - dateTo = dateToValue + dateTo = dateToValue || new Date(dateFrom) + + //full calendar end date is exclusive, so increment by 1 day. + dateTo.setDate(dateTo.getDate() + 1) } return [{ id: card.id, diff --git a/webapp/src/components/viewHeader/__snapshots__/dateFilter.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/dateFilter.test.tsx.snap new file mode 100644 index 000000000..d450a05ad --- /dev/null +++ b/webapp/src/components/viewHeader/__snapshots__/dateFilter.test.tsx.snap @@ -0,0 +1,203 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`components/viewHeader/dateFilter handle clear 1`] = ` +
+
+ +
+
+`; + +exports[`components/viewHeader/dateFilter handles \`Today\` button click event 1`] = ` +
+
+ +
+
+`; + +exports[`components/viewHeader/dateFilter handles calendar click event 1`] = ` + + + +`; + +exports[`components/viewHeader/dateFilter return dateFilter default value 1`] = ` +
+
+ +
+
+`; + +exports[`components/viewHeader/dateFilter return dateFilter invalid value 1`] = ` +
+
+ +
+
+`; + +exports[`components/viewHeader/dateFilter return dateFilter valid value 1`] = ` +
+
+ +
+
+`; + +exports[`components/viewHeader/dateFilter returns local correctly - es local 1`] = ` +
+
+ +
+
+`; + +exports[`components/viewHeader/dateFilter set via text input 1`] = ` +
+
+ +
+
+`; diff --git a/webapp/src/components/viewHeader/__snapshots__/filterComponent.test.tsx.snap b/webapp/src/components/viewHeader/__snapshots__/filterComponent.test.tsx.snap index 87b1138c8..fb3f2c81f 100644 --- a/webapp/src/components/viewHeader/__snapshots__/filterComponent.test.tsx.snap +++ b/webapp/src/components/viewHeader/__snapshots__/filterComponent.test.tsx.snap @@ -709,6 +709,8 @@ exports[`components/viewHeader/filterComponent return filterComponent and click
+
+
+
+
+
+
+
+
+
+
+
+
+
+
`; +exports[`components/viewHeader/filterEntry return filterEntry for date field 1`] = ` +
+
+
+ +
+
+ +
+
+ +
+
+ +
+
+`; + +exports[`components/viewHeader/filterEntry return filterEntry for date field 2`] = ` +
+
+
+ +
+
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+ is +
+
+
+
+
+
+
+
+
+
+ is before +
+
+
+
+
+
+
+
+
+
+ is after +
+
+
+
+
+
+
+
+
+
+
+
+ is set +
+
+
+
+
+
+
+
+
+
+ is not set +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Cancel +
+
+
+
+
+
+
+
+
+ +
+
+ +
+
+`; + exports[`components/viewHeader/filterEntry return filterEntry for text field 1`] = `
+
+
+
+ +
+
+`; + exports[`components/viewHeader/filterValue return filterValue 1`] = `
* { + margin-left: 6px; + } + + >*:first-child { + margin-left: 0; + } + + >.menu-name { + display: flex; + flex-grow: 1; + white-space: nowrap; + } + + >.SubmenuTriangleIcon { + fill: rgba(var(--body-color), 0.7); + } + + >.Icon { + opacity: 0.56; + width: 16px; + height: 16px; + line-height: 16px; + } + + >.IconButton .Icon { + margin-right: 0; + } + } + + .DayPicker { + font-size: inherit; + } + + .DayPickerInput-Overlay { + background-color: rgba(var(--center-channel-bg-rgb)); + box-shadow: 0 0 0 1px hsla(0, 0%, 0%, 0.1), 0 4px 11px hsla(0, 0%, 0%, 0.1); + line-height: 100%; + } + + .DayPicker-wrapper { + padding: 0; + } + + .DayPicker-Month { + margin: 0; + margin-top: 1em; + display: flex; + flex-direction: column; + } + + .DayPicker-Body { + display: flex; + flex-direction: column; + } + + .inputContainer { + max-width: 252px; + } + + .DayPicker-Weekdays { + margin: 0; + } + + .DayPicker-WeekdaysRow { + display: flex; + flex-direction: row; + } + + .DayPicker-Weekday { + width: 36px; + height: 36px; + } + + .DayPicker-NavButton { + right: 0; + } + + .DayPicker-Week { + display: flex; + flex-direction: row; + } + + .DayPicker-Day { + display: flex; + align-items: center; + justify-content: center; + padding: 0; + width: 36px; + height: 36px; + border-radius: 50px; + + &::before { + content: unset; + } + + &:not(.DayPicker-Day--selected) { + &:hover { + background: rgba(var(--button-bg-rgb), 0.08) !important; + color: rgba(var(--button-bg-rgb), 1) !important; + } + } + } + + .DayPicker-Day--today { + background: transparent; + color: #c74655; + } + + .DayPicker-Day--start { + border-top-left-radius: 50% !important; + border-bottom-left-radius: 50% !important; + border-top-right-radius: unset; + border-bottom-right-radius: unset; + } + + .DayPicker-Day--end { + border-top-left-radius: unset; + border-bottom-left-radius: unset; + border-top-right-radius: 50% !important; + border-bottom-right-radius: 50% !important; + } + + .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside) { + border-radius: unset; + background-color: rgb(var(--button-bg-rgb)); + color: rgba(var(--button-color-rgb), 1); + + &:hover { + background-color: rgb(var(--button-bg-rgb)) !important; + } + } + + .DayPicker-Day--selected:not(.DayPicker-Day--start):not(.DayPicker-Day--end):not(.DayPicker-Day--outside) { + color: rgb(var(--button-bg-rgb)); + background-color: rgba(var(--button-bg-rgb), 0.08); + + &:hover { + background-color: rgba(var(--button-bg-rgb), 0.08) !important; + } + } + + .DayPicker:not(.DayPicker--interactionDisabled) .DayPicker-Day:not(.DayPicker-Day--disabled):not(.DayPicker-Day--selected):not(.DayPicker-Day--outside):hover { + background-color: rgba(var(--body-color), 0.2); + } +} diff --git a/webapp/src/components/viewHeader/dateFilter.test.tsx b/webapp/src/components/viewHeader/dateFilter.test.tsx new file mode 100644 index 000000000..e65ab78dd --- /dev/null +++ b/webapp/src/components/viewHeader/dateFilter.test.tsx @@ -0,0 +1,247 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. + +import React from 'react' +import {render} from '@testing-library/react' +import userEvent from '@testing-library/user-event' +import {IntlProvider} from 'react-intl' +import {mocked} from 'jest-mock' + +import '@testing-library/jest-dom' + +import {wrapIntl} from '../../testUtils' +import mutator from '../../mutator' +import {TestBlockFactory} from '../../test/testBlockFactory' + +import {createFilterClause, FilterClause} from '../../blocks/filterClause' +import {createFilterGroup} from '../../blocks/filterGroup' + +import DateFilter from './dateFilter' + +jest.mock('../../mutator') +const mockedMutator = mocked(mutator, true) + +// create Dates for specific days for this year. +const June15 = new Date(Date.UTC(new Date().getFullYear(), 5, 15, 12)) + +describe('components/viewHeader/dateFilter', () => { + const emptyFilterClause = createFilterClause({ + propertyId: 'myPropertyId', + condition: 'is', + values: [], + }) + const board = TestBlockFactory.createBoard() + board.id = 'testBoardID' + + const activeView = TestBlockFactory.createBoardView(board) + const dateFixed = Date.UTC(2022, 11, 28, 12) //Date.parse('28 Dec 2022') + activeView.createAt = dateFixed + activeView.updateAt = dateFixed + + activeView.id = 'testViewID' + activeView.fields.filter = createFilterGroup() + activeView.fields.filter.filters = [emptyFilterClause] + + beforeEach(() => { + // Quick fix to disregard console error when unmounting a component + console.error = jest.fn() + document.execCommand = jest.fn() + jest.resetAllMocks() + }) + + test('return dateFilter default value', () => { + const {container} = render( + wrapIntl( + , + ), + ) + expect(container).toMatchSnapshot() + }) + + test('return dateFilter invalid value', () => { + const {container} = render( + wrapIntl( + , + ), + ) + expect(container).toMatchSnapshot() + }) + + test('return dateFilter valid value', () => { + const june15 = June15.getTime().toString() + const {container} = render( + wrapIntl( + , + ), + ) + expect(container).toMatchSnapshot() + }) + + test('returns local correctly - es local', () => { + const todayFilterClause = createFilterClause(emptyFilterClause) + todayFilterClause.values = [June15.getTime().toString()] + activeView.fields.filter = createFilterGroup() + activeView.fields.filter.filters = [todayFilterClause] + + const component = ( + + + + ) + + const {container, getByText} = render(component) + const input = getByText('15 de junio') + expect(input).not.toBeNull() + expect(container).toMatchSnapshot() + }) + + test('handles calendar click event', () => { + activeView.fields.filter = createFilterGroup() + activeView.fields.filter.filters = [emptyFilterClause] + + const component = + wrapIntl( + , + ) + expect(component).toMatchSnapshot() + const {getByText, getByTitle} = render(component) + + const dayDisplay = getByText('Empty') + userEvent.click(dayDisplay) + + const day = getByText('15') + const modal = getByTitle('Close').children[0] + userEvent.click(day) + userEvent.click(modal) + + const newFilterGroup = createFilterGroup(activeView.fields.filter) + const date = new Date() + const fifteenth = Date.UTC(date.getFullYear(), date.getMonth(), 15, 12) + + const v = newFilterGroup.filters[0] as FilterClause + v.values = [fifteenth.toString()] + expect(mockedMutator.changeViewFilter).toHaveBeenCalledWith(board.id, activeView.id, activeView.fields.filter, newFilterGroup) + }) + + test('handle clear', () => { + const todayFilterClause = createFilterClause(emptyFilterClause) + todayFilterClause.values = [June15.getTime().toString()] + activeView.fields.filter = createFilterGroup() + activeView.fields.filter.filters = [todayFilterClause] + + const component = + wrapIntl( + , + ) + const {container, getByText, getByTitle} = render(component) + expect(container).toMatchSnapshot() + + // open modal + const dayDisplay = getByText('June 15') + userEvent.click(dayDisplay) + + const clear = getByText('Clear') + const modal = getByTitle('Close').children[0] + userEvent.click(clear) + userEvent.click(modal) + + const newFilterGroup = createFilterGroup(activeView.fields.filter) + const v = newFilterGroup.filters[0] as FilterClause + v.values = [] + expect(mockedMutator.changeViewFilter).toHaveBeenCalledWith(board.id, activeView.id, activeView.fields.filter, newFilterGroup) + }) + + test('set via text input', () => { + activeView.fields.filter = createFilterGroup() + activeView.fields.filter.filters = [emptyFilterClause] + + const component = + wrapIntl( + , + ) + + const {container, getByText, getByTitle, getByPlaceholderText} = render(component) + expect(container).toMatchSnapshot() + + // open modal + const dayDisplay = getByText('Empty') + userEvent.click(dayDisplay) + + const input = getByPlaceholderText('MM/DD/YYYY') + userEvent.type(input, '{selectall}{delay}07/15/2021{enter}') + + const July15 = new Date(Date.UTC(2021, 6, 15, 12)) + const modal = getByTitle('Close').children[0] + userEvent.click(modal) + + const newFilterGroup = createFilterGroup(activeView.fields.filter) + const v = newFilterGroup.filters[0] as FilterClause + v.values = [July15.getTime().toString()] + expect(mockedMutator.changeViewFilter).toHaveBeenCalledWith(board.id, activeView.id, activeView.fields.filter, newFilterGroup) + }) + + test('handles `Today` button click event', () => { + const component = + wrapIntl( + , + ) + + console.log('handle today') + + const {container, getByText, getByTitle} = render(component) + expect(container).toMatchSnapshot() + + // To see if 'Today' button correctly selects today's date, + // we can check it against `new Date()`. + // About `Date()` + // > "When called as a function, returns a string representation of the current date and time" + const date = new Date() + const today = Date.UTC(date.getFullYear(), date.getMonth(), date.getDate(), 12) + + // open modal + const dayDisplay = getByText('Empty') + userEvent.click(dayDisplay) + + const day = getByText('Today') + const modal = getByTitle('Close').children[0] + userEvent.click(day) + userEvent.click(modal) + + const newFilterGroup = createFilterGroup(activeView.fields.filter) + const v = newFilterGroup.filters[0] as FilterClause + v.values = [today.toString()] + expect(mockedMutator.changeViewFilter).toHaveBeenCalledWith(board.id, activeView.id, activeView.fields.filter, newFilterGroup) + }) +}) diff --git a/webapp/src/components/viewHeader/dateFilter.tsx b/webapp/src/components/viewHeader/dateFilter.tsx new file mode 100644 index 000000000..97f6a0d1f --- /dev/null +++ b/webapp/src/components/viewHeader/dateFilter.tsx @@ -0,0 +1,204 @@ +// Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. +// See LICENSE.txt for license information. +import React, {useState, useCallback} from 'react' +import {useIntl} from 'react-intl' +import {DateUtils} from 'react-day-picker' +import MomentLocaleUtils from 'react-day-picker/moment' +import DayPicker from 'react-day-picker/DayPicker' + +import moment from 'moment' + +import mutator from '../../mutator' + +import Editable from '../../widgets/editable' +import Button from '../../widgets/buttons/button' +import {BoardView} from '../../blocks/boardView' + +import Modal from '../../components/modal' +import ModalWrapper from '../../components/modalWrapper' +import {Utils} from '../../utils' + +import 'react-day-picker/lib/style.css' +import './dateFilter.scss' + +import {FilterClause} from '../../blocks/filterClause' +import {createFilterGroup} from '../../blocks/filterGroup' + +export type DateProperty = { + from?: number + to?: number + includeTime?: boolean + timeZone?: string +} + +type Props = { + view: BoardView + filter: FilterClause +} + +const loadedLocales: Record = {} + +function DateFilter(props: Props): JSX.Element { + const {filter, view} = props + const [showDialog, setShowDialog] = useState(false) + + const filterValue = filter.values + + let dateValue: Date | undefined + if (filterValue && filterValue.length > 0) { + dateValue = new Date(parseInt(filterValue[0], 10)) + } + + const [value, setValue] = useState(dateValue) + const intl = useIntl() + + const onChange = useCallback((newValue) => { + if (value !== newValue) { + const adjustedValue = newValue ? new Date(newValue.getTime() - timeZoneOffset(newValue.getTime())) : undefined + setValue(adjustedValue) + + const filterIndex = view.fields.filter.filters.indexOf(filter) + Utils.assert(filterIndex >= 0, "Can't find filter") + + const filterGroup = createFilterGroup(view.fields.filter) + const newFilter = filterGroup.filters[filterIndex] as FilterClause + Utils.assert(newFilter, `No filter at index ${filterIndex}`) + + newFilter.values = [] + if (adjustedValue) { + newFilter.values = [adjustedValue.getTime().toString()] + } + mutator.changeViewFilter(view.boardId, view.id, view.fields.filter, filterGroup) + } + }, [value, view.boardId, view.id, view.fields.filter]) + + const getDisplayDate = (date: Date | null | undefined) => { + let displayDate = '' + if (date) { + displayDate = Utils.displayDate(date, intl) + } + return displayDate + } + + const timeZoneOffset = (date: number): number => { + return new Date(date).getTimezoneOffset() * 60 * 1000 + } + + // Keep date value as UTC, property dates are stored as 12:00 pm UTC + // date will need converted to local time, to ensure date stays consistent + // dateFrom / dateTo will be used for input and calendar dates + const offsetDate = value ? new Date(value.getTime() + timeZoneOffset(value.getTime())) : undefined + const [input, setInput] = useState(getDisplayDate(offsetDate)) + + const locale = intl.locale.toLowerCase() + if (locale && locale !== 'en' && !loadedLocales[locale]) { + // eslint-disable-next-line global-require + loadedLocales[locale] = require(`moment/locale/${locale}`) + } + + const handleTodayClick = (day: Date) => { + day.setHours(12) + saveValue(day) + } + + const handleDayClick = (day: Date) => { + saveValue(day) + } + + const onClear = () => { + saveValue(undefined) + } + + const saveValue = (newValue: Date | undefined) => { + onChange(newValue) + setInput(newValue ? Utils.inputDate(newValue, intl) : '') + } + + const onClose = () => { + setShowDialog(false) + } + + let displayValue = '' + if (offsetDate) { + displayValue = getDisplayDate(offsetDate) + } + + let buttonText = displayValue + if (!buttonText) { + buttonText = intl.formatMessage({id: 'DateFilter.empty', defaultMessage: 'Empty'}) + } + + const className = 'DateFilter' + return ( +
+ + + {showDialog && + + onClose()} + > +
+
+
+ { + if (offsetDate) { + return setInput(Utils.inputDate(offsetDate, intl)) + } + return undefined + }} + onChange={setInput} + onSave={() => { + const newDate = MomentLocaleUtils.parseDate(input, 'L', intl.locale) + if (newDate && DateUtils.isDate(newDate)) { + newDate.setHours(12) + saveValue(newDate) + } else { + setInput(getDisplayDate(offsetDate)) + } + }} + onCancel={() => { + setInput(getDisplayDate(offsetDate)) + }} + /> +
+ +
+
+ +
+
+
+ + + } +
+ ) +} + +export default DateFilter diff --git a/webapp/src/components/viewHeader/filterEntry.test.tsx b/webapp/src/components/viewHeader/filterEntry.test.tsx index ea4432d99..bd13d8bb1 100644 --- a/webapp/src/components/viewHeader/filterEntry.test.tsx +++ b/webapp/src/components/viewHeader/filterEntry.test.tsx @@ -27,6 +27,7 @@ const board = TestBlockFactory.createBoard() const activeView = TestBlockFactory.createBoardView(board) board.cardProperties[1].type = 'checkbox' board.cardProperties[2].type = 'text' +board.cardProperties[3].type = 'date' const statusFilter: FilterClause = { propertyId: board.cardProperties[0].id, condition: 'includes', @@ -42,6 +43,12 @@ const textFilter: FilterClause = { condition: 'contains', values: [], } +const dateFilter: FilterClause = { + propertyId: board.cardProperties[3].id, + condition: 'is', + values: [], +} + const unknownFilter: FilterClause = { propertyId: 'unknown', condition: 'includes', @@ -122,6 +129,26 @@ describe('components/viewHeader/filterEntry', () => { expect(container).toMatchSnapshot() }) + test('return filterEntry for date field', () => { + activeView.fields.filter.filters = [dateFilter] + const {container} = render( + wrapIntl( + + + , + ), + ) + expect(container).toMatchSnapshot() + const buttonElement = screen.getAllByRole('button', {name: 'menuwrapper'})[1] + userEvent.click(buttonElement) + expect(container).toMatchSnapshot() + }) + test('return filterEntry and click on status', () => { activeView.fields.filter.filters = [unknownFilter] const {container} = render( diff --git a/webapp/src/components/viewHeader/filterEntry.tsx b/webapp/src/components/viewHeader/filterEntry.tsx index dc41e0cca..98461a433 100644 --- a/webapp/src/components/viewHeader/filterEntry.tsx +++ b/webapp/src/components/viewHeader/filterEntry.tsx @@ -160,6 +160,37 @@ const FilterEntry = (props: Props): JSX.Element => { onClick={(id) => props.conditionClicked(id, filter)} /> } + {propertyType.filterValueType === 'date' && + <> + props.conditionClicked(id, filter)} + /> + props.conditionClicked(id, filter)} + /> + props.conditionClicked(id, filter)} + /> + } + {propertyType.type === 'date' && + <> + props.conditionClicked(id, filter)} + /> + props.conditionClicked(id, filter)} + /> + } { userEvent.click(switchStatus) expect(switchStatus).toBeInTheDocument() }) + + test('return date filter value', () => { + const propertyTemplate: IPropertyTemplate = { + id: 'datePropertyID', + name: 'My Date Property', + type: 'date', + options: [], + } + board.cardProperties.push(propertyTemplate) + + const dateFilter: FilterClause = { + propertyId: 'datePropertyID', + condition: 'is', + values: [], + } + + // filter.values = [] + activeView.fields.filter.filters = [dateFilter] + const {container} = render( + wrapIntl( + + + , + ), + ) + expect(container).toMatchSnapshot() + + const buttonElement = screen.getByRole('button', {name: 'Empty'}) + userEvent.click(buttonElement) + + // make sure modal is displayed + const clearButton = screen.getByRole('button', {name: 'Clear'}) + expect(clearButton).toBeInTheDocument() + }) }) diff --git a/webapp/src/components/viewHeader/filterValue.tsx b/webapp/src/components/viewHeader/filterValue.tsx index 440165220..2cbadd54c 100644 --- a/webapp/src/components/viewHeader/filterValue.tsx +++ b/webapp/src/components/viewHeader/filterValue.tsx @@ -1,8 +1,10 @@ // Copyright (c) 2015-present Mattermost, Inc. All Rights Reserved. // See LICENSE.txt for license information. import React, {useState} from 'react' + import {useIntl} from 'react-intl' +import {PropertyType} from '../../properties/types' import {IPropertyTemplate} from '../../blocks/board' import {FilterClause} from '../../blocks/filterClause' import {createFilterGroup} from '../../blocks/filterGroup' @@ -13,7 +15,8 @@ import Button from '../../widgets/buttons/button' import Menu from '../../widgets/menu' import Editable from '../../widgets/editable' import MenuWrapper from '../../widgets/menuWrapper' -import {PropertyType} from '../../properties/types' + +import DateFilter from './dateFilter' import './filterValue.scss' @@ -62,6 +65,19 @@ const filterValue = (props: Props): JSX.Element|null => { ) } + if (propertyType.filterValueType === 'date') { + if (filter.condition === 'isSet' || filter.condition === 'isNotSet') { + return null + } + + return ( + + ) + } + let displayValue: string if (filter.values.length > 0) { displayValue = filter.values.map((id) => { diff --git a/webapp/src/components/viewHeader/viewHeaderDisplayByMenu.tsx b/webapp/src/components/viewHeader/viewHeaderDisplayByMenu.tsx index 985a9f698..3749b8b2d 100644 --- a/webapp/src/components/viewHeader/viewHeaderDisplayByMenu.tsx +++ b/webapp/src/components/viewHeader/viewHeaderDisplayByMenu.tsx @@ -4,6 +4,8 @@ import React from 'react' import {FormattedMessage, useIntl} from 'react-intl' +import {DatePropertyType} from '../../properties/types' + import {IPropertyTemplate} from '../../blocks/board' import {BoardView} from '../../blocks/boardView' import mutator from '../../mutator' @@ -27,7 +29,7 @@ const ViewHeaderDisplayByMenu = (props: Props) => { const createdDateName = propsRegistry.get('createdTime').displayName(intl) const getDateProperties = (): IPropertyTemplate[] => { - return properties?.filter((o: IPropertyTemplate) => propsRegistry.get(o.type).isDate) + return properties?.filter((o: IPropertyTemplate) => propsRegistry.get(o.type) instanceof DatePropertyType) } return ( diff --git a/webapp/src/components/workspace.tsx b/webapp/src/components/workspace.tsx index 909e96181..303269716 100644 --- a/webapp/src/components/workspace.tsx +++ b/webapp/src/components/workspace.tsx @@ -4,6 +4,8 @@ import React, {useCallback, useEffect, useState} from 'react' import {generatePath, useRouteMatch, useHistory} from 'react-router-dom' import {FormattedMessage} from 'react-intl' +import {DatePropertyType} from '../properties/types' + import {getCurrentBoard, isLoadingBoard, getTemplates} from '../store/boards' import {refreshCards, getCardLimitTimestamp, getCurrentBoardHiddenCardsCount, setLimitTimestamp, getCurrentViewCardsSortedFilteredAndGrouped, setCurrent as setCurrentCard} from '../store/cards' import { @@ -122,7 +124,7 @@ function CenterContent(props: Props) { let displayProperty = dateDisplayProperty if (!displayProperty && activeView.fields.viewType === 'calendar') { - displayProperty = board.cardProperties.find((o) => propsRegistry.get(o.type).isDate) + displayProperty = board.cardProperties.find((o) => propsRegistry.get(o.type) instanceof DatePropertyType) } return ( diff --git a/webapp/src/octoUtils.tsx b/webapp/src/octoUtils.tsx index 09979f1e7..94f700b72 100644 --- a/webapp/src/octoUtils.tsx +++ b/webapp/src/octoUtils.tsx @@ -136,6 +136,17 @@ class OctoUtils { return intl.formatMessage({id: 'Filter.is', defaultMessage: 'is'}) } } + } else if (filterValueType === 'date') { + switch (filterCondition) { + case 'is': return intl.formatMessage({id: 'Filter.is', defaultMessage: 'is'}) + case 'isBefore': return intl.formatMessage({id: 'Filter.is-before', defaultMessage: 'is before'}) + case 'isAfter': return intl.formatMessage({id: 'Filter.is-after', defaultMessage: 'is after'}) + case 'isSet': return intl.formatMessage({id: 'Filter.is-set', defaultMessage: 'is set'}) + case 'isNotSet': return intl.formatMessage({id: 'Filter.is-not-set', defaultMessage: 'is not set'}) + default: { + return intl.formatMessage({id: 'Filter.is', defaultMessage: 'is'}) + } + } } else { Utils.assertFailure() return '(unknown)' diff --git a/webapp/src/properties/createdTime/property.tsx b/webapp/src/properties/createdTime/property.tsx index a03bf4b00..45d67141b 100644 --- a/webapp/src/properties/createdTime/property.tsx +++ b/webapp/src/properties/createdTime/property.tsx @@ -7,15 +7,14 @@ import {IPropertyTemplate} from '../../blocks/board' import {Card} from '../../blocks/card' import {Utils} from '../../utils' -import {PropertyType, PropertyTypeEnum} from '../types' +import {DatePropertyType, PropertyTypeEnum} from '../types' import CreatedTime from './createdTime' -export default class CreatedAtProperty extends PropertyType { +export default class CreatedAtProperty extends DatePropertyType { Editor = CreatedTime name = 'Created At' type = 'createdTime' as PropertyTypeEnum - isDate = true isReadOnly = true displayName = (intl: IntlShape) => intl.formatMessage({id: 'PropertyType.CreatedTime', defaultMessage: 'Created time'}) calculationOptions = [Options.none, Options.count, Options.countEmpty, diff --git a/webapp/src/properties/date/property.tsx b/webapp/src/properties/date/property.tsx index 158527df3..dc18d6f26 100644 --- a/webapp/src/properties/date/property.tsx +++ b/webapp/src/properties/date/property.tsx @@ -8,21 +8,18 @@ import {IPropertyTemplate} from '../../blocks/board' import {Card} from '../../blocks/card' import {Utils} from '../../utils' -import {PropertyType, PropertyTypeEnum} from '../types' +import {PropertyTypeEnum, DatePropertyType} from '../types' import DateComponent, {createDatePropertyFromString} from './date' -const oneDay = 60 * 60 * 24 * 1000 - const timeZoneOffset = (date: number): number => { return new Date(date).getTimezoneOffset() * 60 * 1000 } -export default class DateProperty extends PropertyType { +export default class DateProperty extends DatePropertyType { Editor = DateComponent name = 'Date' type = 'date' as PropertyTypeEnum - isDate = true displayName = (intl: IntlShape) => intl.formatMessage({id: 'PropertyType.Date', defaultMessage: 'Date'}) calculationOptions = [Options.none, Options.count, Options.countEmpty, Options.countNotEmpty, Options.percentEmpty, Options.percentNotEmpty, @@ -65,14 +62,11 @@ export default class DateProperty extends PropertyType { getDateTo = (value: string | string[] | undefined) => { const dateProperty = createDatePropertyFromString(value as string) - if (!dateProperty.from) { + if (!dateProperty.to) { return undefined } - const dateFrom = dateProperty.from ? new Date(dateProperty.from + (dateProperty.includeTime ? 0 : timeZoneOffset(dateProperty.from))) : new Date() - dateFrom.setHours(0, 0, 0, 0) - - const dateToNumber = dateProperty.to ? dateProperty.to + (dateProperty.includeTime ? 0 : timeZoneOffset(dateProperty.to)) : dateFrom.getTime() - const dateTo = new Date(dateToNumber + oneDay) // Add one day. + const dateToNumber = dateProperty.to + (dateProperty.includeTime ? 0 : timeZoneOffset(dateProperty.to)) + const dateTo = new Date(dateToNumber) dateTo.setHours(0, 0, 0, 0) return dateTo } diff --git a/webapp/src/properties/types.tsx b/webapp/src/properties/types.tsx index 3199e5c53..2b9106cad 100644 --- a/webapp/src/properties/types.tsx +++ b/webapp/src/properties/types.tsx @@ -15,7 +15,7 @@ function encodeText(text: string): string { export type PropertyTypeEnum = BoardPropertyTypeEnum -export type FilterValueType = 'none'|'options'|'boolean'|'text' +export type FilterValueType = 'none'|'options'|'boolean'|'text'|'date' export type FilterCondition = { id: string @@ -33,7 +33,6 @@ export type PropertyProps = { } export abstract class PropertyType { - isDate = false canGroup = false canFilter = false filterValueType: FilterValueType = 'none' @@ -42,14 +41,10 @@ export abstract class PropertyType { Options.countNotEmpty, Options.percentEmpty, Options.percentNotEmpty, Options.countValue, Options.countUniqueValue] displayValue: (value: string | string[] | undefined, card: Card, template: IPropertyTemplate, intl: IntlShape) => string | string[] | undefined - getDateFrom: (value: string | string[] | undefined, card: Card) => Date | undefined - getDateTo: (value: string | string[] | undefined, card: Card) => Date | undefined valueLength: (value: string | string[] | undefined, card: Card, template: IPropertyTemplate, intl: IntlShape, fontDescriptor: string, perItemPadding?: number) => number constructor() { this.displayValue = (value: string | string[] | undefined) => value - this.getDateFrom = () => undefined - this.getDateTo = () => undefined this.valueLength = (value: string | string[] | undefined, card: Card, template: IPropertyTemplate, intl: IntlShape, fontDescriptor: string): number => { const displayValue = this.displayValue(value, card, template, intl) || '' return Utils.getTextWidth(displayValue.toString(), fontDescriptor) @@ -75,3 +70,16 @@ export abstract class PropertyType { abstract type: PropertyTypeEnum abstract displayName: (intl: IntlShape) => string } + +export abstract class DatePropertyType extends PropertyType { + canFilter = true + filterValueType: FilterValueType = 'date' + getDateFrom: (value: string | string[] | undefined, card: Card) => Date | undefined + getDateTo: (value: string | string[] | undefined, card: Card) => Date | undefined + + constructor() { + super() + this.getDateFrom = () => undefined + this.getDateTo = () => undefined + } +} diff --git a/webapp/src/properties/updatedTime/property.tsx b/webapp/src/properties/updatedTime/property.tsx index 6229fd84e..16327b81d 100644 --- a/webapp/src/properties/updatedTime/property.tsx +++ b/webapp/src/properties/updatedTime/property.tsx @@ -6,15 +6,14 @@ import {Options} from '../../components/calculations/options' import {IPropertyTemplate} from '../../blocks/board' import {Card} from '../../blocks/card' import {Utils} from '../../utils' -import {PropertyType, PropertyTypeEnum} from '../types' +import {DatePropertyType, PropertyTypeEnum} from '../types' import UpdatedTime from './updatedTime' -export default class UpdatedTimeProperty extends PropertyType { +export default class UpdatedTimeProperty extends DatePropertyType { Editor = UpdatedTime name = 'Last Modified At' type = 'updatedTime' as PropertyTypeEnum - isDate = true isReadOnly = true displayName = (intl: IntlShape) => intl.formatMessage({id: 'PropertyType.UpdatedTime', defaultMessage: 'Last updated time'}) calculationOptions = [Options.none, Options.count, Options.countEmpty, From a054a00777cc37cd689dc7157c17d0b0a89f3fa9 Mon Sep 17 00:00:00 2001 From: Scott Bishel Date: Wed, 11 Jan 2023 16:50:17 -0700 Subject: [PATCH 7/8] Implement Date property type (#4287) * allow empty dates returned from date property * implement a date property type * handle when property is not set, default create date * update to remove unneeded fields, updated how dateTo is returned * fix creating new date * remove unused constant * update unit tests Co-authored-by: Mattermod From 7d663ef0ecc08333c06e5862cc8700107f94e6a6 Mon Sep 17 00:00:00 2001 From: Harrison Healey Date: Thu, 12 Jan 2023 15:45:11 -0500 Subject: [PATCH 8/8] MM-49637 Make chunk filenames generated for MPA unique (#4463) --- mattermost-plugin/webapp/webpack.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/mattermost-plugin/webapp/webpack.config.js b/mattermost-plugin/webapp/webpack.config.js index 6425b3142..023369dc2 100644 --- a/mattermost-plugin/webapp/webpack.config.js +++ b/mattermost-plugin/webapp/webpack.config.js @@ -172,6 +172,7 @@ if (TARGET_IS_PRODUCT) { config.output = { path: path.join(__dirname, '/dist'), + chunkFilename: '[name].[contenthash].js', }; } else { config.resolve.alias['react-intl'] = path.resolve(__dirname, '../../webapp/node_modules/react-intl/');