Add date filter to post list (#285)

app/javascript/components/Board/BoardP.tsx

@@ -13,6 +13,7 @@ import { PostsState } from '../../reducers/postsReducer';
 import { PostStatusesState } from '../../reducers/postStatusesReducer';
 import SortByFilter from './SortByFilter';
 import { SortByFilterValues } from '../../actions/changeFilters';
+import DateFilter from './DateFilter';
 
 interface Props {
   board: IBoard;
@@ -29,11 +30,13 @@ interface Props {
     searchQuery?: string,
     postStatusIds?: Array<number>,
     sortBy?: SortByFilterValues,
+    date?: { startDate: string; endDate: string },
   ): void;
   requestPostStatuses(): void;
   handleSearchFilterChange(searchQuery: string): void;
   handlePostStatusFilterChange(postStatusId: number): void;
   handleSortByFilterChange(sortBy: SortByFilterValues): void;
+  handleDateFilterChange(startDate: string, endDate: string): void;
 }
 
 class BoardP extends React.Component<Props> {
@@ -54,23 +57,31 @@ class BoardP extends React.Component<Props> {
     const { sortBy } = this.props.posts.filters;
     const prevSortBy = prevProps.posts.filters.sortBy;
 
+    const { startDate, endDate } = this.props.posts.filters.date;
+    const prevStartDate = prevProps.posts.filters.date.startDate;
+    const prevEndDate = prevProps.posts.filters.date.endDate;
+
+    const requestPostsWithFilters = () => (
+      this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusIds, sortBy, { startDate, endDate })
+    );
+
     // search filter changed
     if (searchQuery !== prevSearchQuery) {
       if (this.searchFilterTimeoutId) clearInterval(this.searchFilterTimeoutId);
 
       this.searchFilterTimeoutId = setTimeout(() => (
-        this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusIds)
+        requestPostsWithFilters()
       ), 500);
     }
 
-    // post status filter changed
-    if (postStatusIds.length !== prevPostStatusIds.length) {
-      this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusIds);
-    }
-
-    // sort by filter changed
-    if (sortBy !== prevSortBy) {
-      this.props.requestPosts(this.props.board.id, 1, searchQuery, postStatusIds, sortBy);
+    // poststatus/sortby/date filter changed
+    if (
+      postStatusIds.length !== prevPostStatusIds.length ||
+      sortBy !== prevSortBy ||
+      startDate !== prevStartDate ||
+      endDate !== prevEndDate
+    ) {
+      requestPostsWithFilters();
     }
   }
 
@@ -88,6 +99,7 @@ class BoardP extends React.Component<Props> {
       handleSearchFilterChange,
       handlePostStatusFilterChange,
       handleSortByFilterChange,
+      handleDateFilterChange,
     } = this.props;
     const { filters } = posts;
 
@@ -105,10 +117,18 @@ class BoardP extends React.Component<Props> {
           />
           {
             isPowerUser &&
+            <>
             <SortByFilter
               sortBy={filters.sortBy}
               handleChange={sortBy => handleSortByFilterChange(sortBy)}
             />
+
+            <DateFilter
+              startDate={filters.date.startDate}
+              endDate={filters.date.endDate}
+              handleChange={handleDateFilterChange}
+            />
+            </>
           }
           <PostStatusFilter
             postStatuses={postStatuses.items}

app/javascript/components/Board/DateFilter.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react';
+import I18n from 'i18n-js';
+
+import SidebarBox from '../common/SidebarBox';
+import ActionLink from '../common/ActionLink';
+import { ClearIcon } from '../common/Icons';
+
+interface Props {
+  startDate: string;
+  endDate: string;
+  handleChange(startDate: string, endDate: string): void;
+}
+
+const DateFilter = ({ startDate, endDate, handleChange }: Props) => (
+  <SidebarBox title={I18n.t('board.filter_by_date_box.title')} customClass="dateFilterBox">
+    <label htmlFor="startDateFilter">
+      { I18n.t('board.filter_by_date_box.from_label') }
+    </label>
+    <input
+      type="date"
+      value={startDate}
+      onChange={e => handleChange(e.target.value, endDate)}
+      id="startDateFilter"
+      className="form-control"
+    />
+
+    <label htmlFor="endDateFilter">
+      { I18n.t('board.filter_by_date_box.to_label') }
+    </label>
+    <input
+      type="date"
+      value={endDate}
+      onChange={e => handleChange(startDate, e.target.value)}
+      id="endDateFilter"
+      className="form-control"
+    />
+
+    {
+      startDate || endDate ?
+        <ActionLink
+          onClick={() => handleChange('', '')}
+          icon={<ClearIcon />}
+          customClass="clearDateFilter"
+        >
+          { I18n.t('common.buttons.clear') }
+        </ActionLink>
+      :
+        null
+    }
+  </SidebarBox>
+);
+
+export default DateFilter;

app/javascript/components/common/Icons.tsx

@@ -6,7 +6,7 @@ import { FiEdit, FiDelete } from 'react-icons/fi';
 import { ImCancelCircle } from 'react-icons/im';
 import { TbLock, TbLockOpen } from 'react-icons/tb';
 import { MdContentCopy, MdDone, MdOutlineArrowBack } from 'react-icons/md';
-import { GrTest } from 'react-icons/gr';
+import { GrTest, GrClearOption } from 'react-icons/gr';
 import { MdOutlineLibraryBooks } from "react-icons/md";
 import { MdVerified } from "react-icons/md";
 
@@ -37,3 +37,5 @@ export const StaffIcon = () => (
     <MdVerified />
   </span>
 );
+
+export const ClearIcon = () => <GrClearOption />;