add cf date token (#1087)

Author: ciur

frontend/apps/ui/src/features/search/components/AutocompleteOptions.tsx

@@ -5,6 +5,7 @@ import {useGetDocumentTypesQuery} from "@/features/document-types/storage/api"
 import {selectDocumentCategoryID} from "@/features/documentsList/storage/documentsByCategory"
 import {Category} from "@/features/documentsList/types"
 import {
+  SearchCalendarDateSuggestion,
   SearchCategorySuggestion,
   SearchCustomFieldSuggestion,
   SearchFilterSuggestion,
@@ -16,9 +17,10 @@ import {hasThisTypeSuggestion} from "@/features/search/microcomp/utils"
 import {useGetTagsQuery} from "@/features/tags/storage/api"
 import {ColoredTag, CustomField} from "@/types"
 import {Combobox, Loader} from "@mantine/core"
+import {DatePicker} from "@mantine/dates"
 import {skipToken} from "@reduxjs/toolkit/query"
 import {TFunction} from "i18next"
-import {ReactNode} from "react"
+import {ReactNode, useState} from "react"
 
 interface Args {
   suggestions?: SearchSuggestion[]
@@ -102,6 +104,12 @@ export default function AutocompleteOptions({suggestions}: Args) {
         />
       )
     }
+
+    if (suggestion.type == "calendarDate") {
+      components.push(
+        <CalendarDate key={suggestion.type} suggestion={suggestion} />
+      )
+    }
   }
 
   return (
@@ -233,3 +241,27 @@ function AutocompleCustomFieldOptions({
     </Combobox.Group>
   )
 }
+
+interface CalendarDateArgs {
+  suggestion: SearchCalendarDateSuggestion
+}
+
+function CalendarDate({suggestion}: CalendarDateArgs) {
+  const [value, setValue] = useState<string>()
+
+  const handleChange = (val: string | null) => {
+    const newValue = val || ""
+    setValue(newValue)
+  }
+
+  return (
+    <Combobox.Option
+      key={value}
+      value={value || ""}
+      data-type-handler={"date"}
+      data-suggestion-type="calendarDate"
+    >
+      <DatePicker value={value} onChange={handleChange} />
+    </Combobox.Option>
+  )
+}

frontend/apps/ui/src/features/search/components/SearchTokens/CFDateToken/CFDateToken.container.tsx

@@ -0,0 +1,41 @@
+import {useAppDispatch, useAppSelector} from "@/app/hooks"
+import {
+  CustomFieldNumericOperator,
+  CustomFieldToken
+} from "@/features/search/microcomp/types"
+import {removeToken, updateToken} from "@/features/search/storage/search"
+import {CFDateTokenPresentation} from "./CFDateToken.presentation"
+
+interface CFNumericTokenContainerProps {
+  index: number
+}
+
+export function CFDateTokenContainer({index}: CFNumericTokenContainerProps) {
+  const dispatch = useAppDispatch()
+  const token = useAppSelector(
+    state => state.search.tokens[index]
+  ) as CustomFieldToken
+
+  // Redux handlers
+  const handleOperatorChange = (operator: CustomFieldNumericOperator) => {
+    dispatch(updateToken({index, updates: {operator}}))
+  }
+
+  const handleValueChange = (value: string | number) => {
+    const num = parseInt(value as string)
+    dispatch(updateToken({index, updates: {value: num}}))
+  }
+
+  const handleRemove = () => {
+    dispatch(removeToken(index))
+  }
+
+  return (
+    <CFDateTokenPresentation
+      item={token}
+      onRemove={handleRemove}
+      onValueChange={handleValueChange}
+      onOperatorChange={handleOperatorChange}
+    />
+  )
+}

frontend/apps/ui/src/features/search/components/SearchTokens/CFDateToken/CFDateToken.module.css

@@ -0,0 +1,57 @@
+.tokenContainer {
+  display: inline-flex;
+  align-items: center;
+  background-color: #f0f0f0;
+  border-radius: 0.5rem;
+  padding: 2px 8px;
+  border: 1px solid #d0d0d0;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  position: relative;
+}
+
+.operatorSelect input {
+  min-height: auto;
+  padding-right: 4px;
+  padding-left: 4px;
+  border: none;
+  background-color: transparent;
+  font-size: 14px;
+  cursor: pointer;
+}
+
+.operatorSelect input:hover {
+  background-color: rgba(0, 0, 0, 0.05);
+}
+
+.operatorSelect .mantine-Select-wrapper {
+  margin-bottom: 0;
+}
+
+.removeButton {
+  position: absolute;
+  top: -6px;
+  right: -6px;
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  background-color: #dc3545;
+  color: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  opacity: 0;
+  transition: opacity 0.2s ease;
+  border: 1px solid white;
+  padding: 0;
+  z-index: 10; /* Ensure it's above other elements */
+}
+
+.tokenContainer:hover .removeButton {
+  opacity: 1;
+}
+
+.removeButton:hover {
+  background-color: #c82333;
+}

frontend/apps/ui/src/features/search/components/SearchTokens/CFDateToken/CFDateToken.presentation.tsx

@@ -0,0 +1,75 @@
+import {OPERATOR_NUMERIC} from "@/features/search/microcomp/const"
+import type {CustomFieldNumericOperator as CustomFieldNumericOperatorType} from "@/features/search/microcomp/types"
+import {CustomFieldToken} from "@/features/search/microcomp/types"
+import {ActionIcon, Box, Group, Select, Text} from "@mantine/core"
+import {DatePickerInput} from "@mantine/dates"
+import {IconX} from "@tabler/icons-react"
+import styles from "./CFDateToken.module.css"
+
+interface Args {
+  item: CustomFieldToken
+  onOperatorChange?: (operator: CustomFieldNumericOperatorType) => void
+  onValueChange?: (value: string | number) => void
+  onRemove?: () => void
+}
+
+export function CFDateTokenPresentation({
+  item,
+  onOperatorChange,
+  onValueChange,
+  onRemove
+}: Args) {
+  const handleRemoveClick = (e: React.MouseEvent) => {
+    e.stopPropagation()
+    onRemove?.()
+  }
+
+  return (
+    <Box className={styles.tokenContainer} onClick={e => e.stopPropagation()}>
+      <Group gap={0}>
+        <Text c={"blue"}>cf:</Text>
+        <Text c={"blue"}>{item.fieldName}:</Text>
+        <CFNumericOperator item={item} onOperatorChange={onOperatorChange} />
+        <DatePickerInput
+          value={new Date(item.value)}
+          onClick={e => e.stopPropagation()}
+        />
+      </Group>
+      <ActionIcon
+        size="xs"
+        className={styles.removeButton}
+        onClick={handleRemoveClick}
+        aria-label="Remove token"
+      >
+        <IconX size={10} stroke={3} />
+      </ActionIcon>
+    </Box>
+  )
+}
+
+interface TokenTagOperatorArgs {
+  item: CustomFieldToken
+  onOperatorChange?: (operator: CustomFieldNumericOperatorType) => void
+}
+
+function CFNumericOperator({item, onOperatorChange}: TokenTagOperatorArgs) {
+  const handleChange = (value: string | null) => {
+    if (value && onOperatorChange) {
+      // Remove the trailing colon to get just the operator
+      const operator = value.replace(":", "") as CustomFieldNumericOperatorType
+      onOperatorChange(operator)
+    }
+  }
+
+  return (
+    <Select
+      value={`${item.operator || "="}:`}
+      w={"8ch"}
+      data={OPERATOR_NUMERIC}
+      size="sm"
+      onChange={handleChange}
+      onClick={e => e.stopPropagation()}
+      className={styles.operatorSelect}
+    />
+  )
+}

frontend/apps/ui/src/features/search/components/SearchTokens/CFDateToken/index.tsx

@@ -0,0 +1 @@
+export {CFDateTokenContainer as default} from "./CFDateToken.container"

frontend/apps/ui/src/features/search/components/SearchTokens/CustomFieldToken.tsx

@@ -1,5 +1,6 @@
 import {useAppSelector} from "@/app/hooks"
 import {CustomFieldToken} from "@/features/search/microcomp/types"
+import CFDateToken from "./CFDateToken"
 import CFNumericToken from "./CFNumericToken"
 
 interface Args {
@@ -15,5 +16,9 @@ export default function CustomFieldTokenComponent({index}: Args) {
     return <CFNumericToken index={index} />
   }
 
-  return <>Unknown Custom Field Token</>
+  if (token.typeHandler == "date") {
+    return <CFDateToken index={index} />
+  }
+
+  return <>Unknown Custom Field Token: {token.typeHandler}</>
 }

frontend/apps/ui/src/features/search/hooks/useTokenSearch.ts

@@ -7,7 +7,6 @@ import type {
   Token
 } from "@/features/search/microcomp/types"
 import {autocompleteText} from "@/features/search/microcomp/utils"
-import {CustomFieldDataType} from "@/types"
 import {ComboboxOptionProps, useCombobox} from "@mantine/core"
 import {useCallback, useRef, useState} from "react"
 import {useTokens} from "./useTokens"
@@ -24,6 +23,8 @@ export const useTokenSearch = ({
   const [inputValue, setInputValue] = useState("")
   /** Custom field type currently being typed */
   const [currentCFType, setCurrentCFType] = useState<CustomFieldType>()
+  const [currentSuggestionType, setCurrentSuggestionType] =
+    useState<SuggestionType>()
   const {tokens, addToken, updateToken, removeToken, clearTokens} = useTokens()
   const [hasAutocomplete, setHasAutocomplete] = useState(false)
   const [autocomplete, setAutocomplete] = useState<SearchSuggestion[]>()
@@ -44,19 +45,25 @@ export const useTokenSearch = ({
   ) => {
     const customFieldTypeHandler = (optionProps as any)["data-type-handler"]
     const suggestionType = (optionProps as any)["data-suggestion-type"]
+    if (customFieldTypeHandler) {
+      // remember cf type
+      setCurrentCFType(customFieldTypeHandler)
+    }
 
-    let newInputValue = autocompleteText(inputValue, val)
-    const extraData = {
-      typeHandler: customFieldTypeHandler as CustomFieldDataType,
-      suggestionType: suggestionType as SuggestionType
+    if (suggestionType) {
+      // remember suggestion type
+      setCurrentSuggestionType(suggestionType)
+    }
+
+    let extraData = {
+      typeHandler: currentCFType || customFieldTypeHandler,
+      suggestionType: currentSuggestionType || suggestionType
     }
+
+    let newInputValue = autocompleteText(inputValue, val)
     if (suggestionType == "customField") {
       newInputValue = newInputValue + ":"
     }
-    if (customFieldTypeHandler) {
-      // remember cf type
-      setCurrentCFType(customFieldTypeHandler)
-    }
 
     const {
       hasSuggestions,

frontend/apps/ui/src/features/search/microcomp/scanner.ts

@@ -409,6 +409,27 @@ function getCustomFieldSuggestions(
       return [{type: "operator", items: OPERATOR_TEXT}]
     }
   } // END of parts.lenth == 3
+  ////////////////////////////////////
+  if (parts.length == 4) {
+    // i.e. cf:Datum:>:
+    //                  ^ user is typing here
+    if (!extra) {
+      return []
+    }
+
+    if (extra.suggestionType != "customField") {
+      return []
+    }
+
+    if (extra.typeHandler == "date") {
+      return [
+        {
+          type: "calendarDate"
+        }
+      ]
+    }
+  }
+  ///////////////////////////////////
 
   return []
 }

frontend/apps/ui/src/features/search/microcomp/types.ts

@@ -126,6 +126,7 @@ export type SuggestionType =
   | "operator"
   | "category"
   | "customField"
+  | "calendarDate"
 
 export interface BasicSuggestion {
   type: SuggestionType
@@ -158,12 +159,17 @@ export interface SearchCustomFieldSuggestion extends BasicSuggestion {
   exclude?: string[] // already used in current token
 }
 
+export interface SearchCalendarDateSuggestion extends BasicSuggestion {
+  type: "calendarDate"
+}
+
 export type SearchSuggestion =
   | SearchOperatorSuggestion
   | SearchTagSuggestion
   | SearchFilterSuggestion
   | SearchCategorySuggestion
   | SearchCustomFieldSuggestion
+  | SearchCalendarDateSuggestion
 
 export interface ScanResult {
   token?: Token