Merge branch 'group-tx-local' into dev

src/api/api.js

@@ -101,7 +101,7 @@ export const api = {
     async read(viewUrlPart, includeOmittendTx) {
       // orange('api.views.read: viewUrlPart', viewUrlPart)
       try {
-        const url = `/api/views/${viewUrlPart}/${includeOmittendTx}`
+        const url = `/api/views/${viewUrlPart}/${includeOmittendTx}/2020`
         // orange('api.views.read: url', url)
         const data = await fetchJson(url, {
           method: 'GET'
@@ -122,4 +122,4 @@ export const api = {
     // orange('importData: data', data)
     return data
   }
-}
+}

src/appWords.js

@@ -59,6 +59,21 @@ export const wdIsTmpRule = 'isTmpRule'
 export const wdItems = 'items'
 // M
 export const wdMessage = 'message'
+export const wdMonths = {
+  wdJan: 'Jan',
+  wdFeb: 'Feb',
+  wdMar: 'Mar',
+  wdApr: 'Apr',
+  wdMay: 'May',
+  wdJun: 'Jun',
+  wdJul: 'Jul',
+  wdAug: 'Aug',
+  wdSep: 'Sep',
+  wdOct: 'Oct',
+  wdNov: 'Nov',
+  wdDec: 'Dec'
+}
+
 // N
 export const wdNoCategory = 'noCategory'
 export const wdNone = 'none'
@@ -96,6 +111,8 @@ export const wdReplaceAll = 'replaceAll'
 export const wdReplaceWithValue = 'replaceWithValue'
 // S
 export const wdSelect = 'select'
+export const wdSelectMonth = 'selectMonth'
+export const wdSelectYear = 'selectYear'
 export const wdShowExpenseOnly = 'showExpenseOnly'
 export const wdShowIncomeOnly = 'showIncomeOnly'
 export const wdSort = 'sort'
@@ -163,7 +180,6 @@ export const pathTxFetchStatus = [wdTx, wdFetch, wdStatus]
 export const pathTxItems = [wdTx, wdItems]
 
 // txTbl
-export const pathTxTblmlters = [wdTxTbl, wdFilters]
 // export const pathTxTblFiltersAcctId = [wdTxTbl, wdFilters, wdAcctId]
 // export const pathTxTblFiltersCategory1 = [wdTxTbl, wdFilters, wdCategory1]
 // export const pathTxTblFiltersCategory2 = [wdTxTbl, wdFilters, wdCategory2]
@@ -204,3 +220,5 @@ export const pathRadioShowIncomeExpenseValue = [
   wdRadioShowIncomeExpense,
   wdValue
 ]
+export const pathTxTblSelectYear = [wdTxTbl, wdSelectYear, wdValue]
+export const pathTxTblSelectMonth = [wdTxTbl, wdSelectMonth, wdValue]

src/features/selectors/txTblSelectors/txTblSelectors.js

@@ -9,7 +9,9 @@ import {
   wdTxTbl,
   pathTxTblSortFieldName,
   pathTxTblSortOrder,
-  pathRadioShowIncomeExpenseValue
+  pathRadioShowIncomeExpenseValue,
+  pathTxTblSelectMonth,
+  pathTxTblSelectYear
 } from 'appWords'
 import { getStateValue } from 'features/helpers'
 import { filterTxs } from './filterTxs'
@@ -21,15 +23,11 @@ import { green, blue, red, purple } from 'logger'
 import { grpStart } from 'logger'
 import { grpEnd } from 'logger'
 import { yellow } from 'logger'
+import { isNilOrEmpty } from 'lib/isNilOrEmpty'
+import { notNilOrEmpty } from 'lib/notNilOrEmpty'
+import { getMonthIndex } from 'lib/getMonthIndex'
 /* eslint-enable */
 
-export const selectFilteredTxs = (state) => {
-  const txItems = selectTxItems(state)
-  const a = filterTxs(state, txItems)
-  const b = sortTxs(state, a)
-  return b
-}
-
 /**
  *
  * @param {object} state state
@@ -84,3 +82,55 @@ export const selectTxTblFilterValue = (filterName, state) => {
 export const selectRadioShowIncomeExpenseValue = (state) => {
   return getStateValue(pathRadioShowIncomeExpenseValue, state)
 }
+
+export const selectSelectMonthValue = (state) => {
+  return getStateValue(pathTxTblSelectMonth, state)
+}
+
+export const selectSelectYearValue = (state) => {
+  return getStateValue(pathTxTblSelectYear, state)
+}
+
+const _filterYearAndMonth = (state, txItems) => {
+  const selectedYearValue = selectSelectYearValue(state)
+  const selectedMonthValue = selectSelectMonthValue(state)
+
+  if (isNilOrEmpty(selectedYearValue) && isNilOrEmpty(selectedMonthValue)) {
+    green('!')
+    return txItems
+  }
+  if (notNilOrEmpty(selectedYearValue) && notNilOrEmpty(selectedMonthValue)) {
+    return txItems.filter((t) => {
+      const d = new Date(t.date)
+      const y = d.getFullYear()
+      const m = d.getMonth()
+      return y === selectedYearValue && m === getMonthIndex(selectedMonthValue)
+    })
+  }
+  if (notNilOrEmpty(selectedYearValue) && isNilOrEmpty(selectedMonthValue)) {
+    return txItems.filter((t) => {
+      const d = new Date(t.date)
+      const y = d.getFullYear()
+      return y === selectedYearValue
+    })
+  }
+
+  if (isNilOrEmpty(selectedYearValue) && notNilOrEmpty(selectedMonthValue)) {
+    green('mo')
+    return txItems.filter((t) => {
+      const d = new Date(t.date)
+      const m = d.getMonth()
+      return m === selectedMonthValue
+    })
+  }
+}
+
+export const selectFilteredTxs = (state) => {
+  const txItems = selectTxItems(state)
+  // green('txItems', txItems)
+  const a = _filterYearAndMonth(state, txItems)
+  // green('a', a)
+  const b = filterTxs(state, a)
+  const c = sortTxs(state, b)
+  return c
+}

src/features/tx/txSlice.js

@@ -2,6 +2,7 @@ import { createSlice, createAsyncThunk, current } from '@reduxjs/toolkit'
 import { api } from 'api'
 import * as R from 'ramda'
 import { isNilOrEmpty } from 'lib/isNilOrEmpty'
+import { getMonthIndex } from 'lib/getMonthIndex'
 import {
   wdRequestStatusPending,
   wdRequestStatusFulfilled,
@@ -60,6 +61,24 @@ export const txFetch = createAsyncThunk(
     const showOmitted = selectCheckboxShowOmittedValue(state)
     const r = await api.views.read(_viewName, showOmitted)
     const { data } = r
+
+    // // start timer
+    // const s2 = new Date().getTime()
+    // //////////////
+
+    // const y = data.filter((t) => {
+    //   const d = new Date(t.date)
+    //   const y = d.getFullYear()
+    //   const m = d.getMonth()
+    //   return y === 2020 && m === getMonthIndex('apr')
+    // })
+
+    // // end timer
+    // const e2 = new Date().getTime()
+    // const t2 = e2 - s2
+    // red('t2', t2)
+    // //////////////
+
     return R.mergeRight(r, { data: _addFields(data) })
   }
 )

src/features/txTbl/TxTbl/TxTblOptions.js

@@ -19,17 +19,25 @@ import {
   selectRadioHasRuleValue,
   selectRadioHasCategoryValue,
   selectRadioHasCategoryDisabled,
-  selectRadioShowIncomeExpenseValue
+  selectRadioShowIncomeExpenseValue,
+  selectSelectMonthValue,
+  selectSelectYearValue
 } from 'features/selectors'
 
 import {
   updateRadioHasRule,
   updateRadioHasCategory,
-  updateRadioShowIncomeOrExpense
+  updateRadioShowIncomeOrExpense,
+  updateSelectYear,
+  updateSelectMonth
 } from 'features/txTbl'
 
-// eslint-disable-next-line
+import { Select } from 'components/Select'
+
+/* eslint-disable */
 import { purple, green } from 'logger'
+import * as R from 'ramda'
+/* eslint-enable */
 
 const OptionsDiv = styled.div`
   display: flex;
@@ -50,6 +58,9 @@ export const TxTblOptions = () => {
   const _radioShowIncomeOrExpenseValue = useSelector(
     selectRadioShowIncomeExpenseValue
   )
+  const _selectMonthValue = useSelector(selectSelectMonthValue)
+  const _selectYearValue = useSelector(selectSelectYearValue)
+
   const _radioChange = (event) => {
     const { name, value } = event.target
     if (name === wdRadioHasRule) {
@@ -61,6 +72,16 @@ export const TxTblOptions = () => {
     }
   }
 
+  const _selectYearChange = (event) => {
+    const { value } = event.target
+    _dispatch(updateSelectYear({ value }))
+  }
+
+  const _selectMonthChange = (event) => {
+    const { value } = event.target
+    _dispatch(updateSelectMonth({ value }))
+  }
+
   return (
     <>
       <OptionsDiv>
@@ -145,6 +166,37 @@ export const TxTblOptions = () => {
             value={wdShowExpenseOnly}
           />
         </ColumnDiv>
+        <ColumnDiv>
+          <Select
+            name="year"
+            value={_selectYearValue}
+            onChange={_selectYearChange}
+            maxWidth={100}
+          >
+            <option value="2019">2019</option>
+            <option value="2020">2020</option>
+            <option value="2021">2021</option>
+          </Select>
+          <Select
+            name="month"
+            value={_selectMonthValue}
+            onChange={_selectMonthChange}
+            maxWidth={100}
+          >
+            <option value="jan">Jan</option>
+            <option value="feb">Feb</option>
+            <option value="mar">Mar</option>
+            <option value="apr">Apr</option>
+            <option value="may">May</option>
+            <option value="jun">Jun</option>
+            <option value="jul">Jul</option>
+            <option value="aug">Aug</option>
+            <option value="sep">Sep</option>
+            <option value="oct">Oct</option>
+            <option value="nov">Nov</option>
+            <option value="dec">Dec</option>
+          </Select>
+        </ColumnDiv>
       </OptionsDiv>
     </>
   )

src/features/txTbl/txTblSlice.js

@@ -5,6 +5,8 @@ import {
   pathTxTblRadioHasCategoryDisabled,
   pathTxTblRadioHasCategoryValue,
   pathTxTblRadioHasRuleValue,
+  pathTxTblSelectMonth,
+  pathTxTblSelectYear,
   pathTxTblSort,
   wdAcctId,
   wdBoth,
@@ -32,7 +34,9 @@ import {
   wdHasCategory,
   wdRadioHasCategory,
   wdNoRule,
-  wdNoCategory
+  wdNoCategory,
+  wdSelectYear,
+  wdSelectMonth
 } from 'appWords'
 import { createNewState, valueOrEmptyString } from 'features/helpers'
 import * as R from 'ramda'
@@ -68,6 +72,12 @@ const initialState = {
   [wdSort]: {
     [wdFieldName]: '',
     [wdSortOrder]: ''
+  },
+  [wdSelectYear]: {
+    [wdValue]: 2020
+  },
+  [wdSelectMonth]: {
+    [wdValue]: 'jan'
   }
 }
 
@@ -99,6 +109,14 @@ const _sortSet = R.curry((fieldName, sortOrder, state) => {
   return createNewState(pathTxTblSort, { fieldName, sortOrder }, state)
 })
 
+const _selectMonthSet = (value, state) => {
+  return createNewState(pathTxTblSelectMonth, value, state)
+}
+
+const _selectYearSet = (value, state) => {
+  return createNewState(pathTxTblSelectYear, value, state)
+}
+
 const txTblSlice = createSlice({
   name: wdTxTbl,
   initialState,
@@ -168,6 +186,16 @@ const txTblSlice = createSlice({
       const { checked } = action.payload
       return _checkboxShowOmittedSet(checked, current(state))
     },
+    updateSelectMonth(state, action) {
+      const { value } = action.payload
+      // blue('updateSelectMonth: value', value)
+      return _selectMonthSet(value, current(state))
+    },
+    updateSelectYear(state, action) {
+      const { value } = action.payload
+      // blue('updateSelectYear: value', value)
+      return _selectYearSet(Number(value), current(state))
+    },
     updateSort(state, action) {
       const { fieldName, sortOrder } = action.payload
       return _sortSet(fieldName, sortOrder, current(state))
@@ -184,5 +212,7 @@ export const {
   updateRadioShowIncomeOrExpense,
   updateRadioState,
   updateRadioHasRule,
+  updateSelectMonth,
+  updateSelectYear,
   updateRadioHasCategory
 } = txTblSlice.actions

src/lib/getMonthIndex.js

@@ -0,0 +1,16 @@
+const months = {
+  jan: 0,
+  feb: 1,
+  mar: 2,
+  apr: 3,
+  may: 4,
+  jun: 5,
+  jul: 6,
+  aug: 7,
+  sep: 8,
+  oct: 9,
+  nov: 10,
+  dec: 11
+}
+
+export const getMonthIndex = (month) => months[month]