Advanced search (#1180)

* Advanced search

* Localization & search query builder & unit tests

* Fix build

* type fix

* review fixes

* Search improvements

apps/sensenet/package.json

@@ -101,6 +101,7 @@
     "monaco-editor": "0.21.3",
     "react": "^16.13.0",
     "react-autosuggest": "^10.1.0",
+    "react-day-picker": "^7.4.8",
     "react-dom": "^16.13.0",
     "react-markdown": "^5.0.3",
     "react-monaco-editor": "0.41.2",

apps/sensenet/src/components/dialogs/content-picker.tsx

@@ -12,10 +12,12 @@ import { Icon } from '../Icon'
 import { DialogTitle, useDialog } from '.'
 
 export interface ContentPickerDialogProps {
+  defaultValue?: GenericContentWithIsParent
   currentPath: string
   selectionRoot?: string
-  content: GenericContent
-  handleSubmit?: (path: string) => void
+  required?: boolean
+  content?: GenericContent
+  handleSubmit?: (content: GenericContentWithIsParent) => void
 }
 
 export const ContentPickerDialog: React.FunctionComponent<ContentPickerDialogProps> = (props) => {
@@ -32,21 +34,22 @@ export const ContentPickerDialog: React.FunctionComponent<ContentPickerDialogPro
   const itemsODataOptions = useMemo(() => ({ filter: '' }), [])
 
   const handleSubmit = async (selection: GenericContentWithIsParent[]) => {
-    props.handleSubmit?.(selection[0].Path)
+    props.handleSubmit?.(selection[0])
     closeLastDialog()
   }
 
   return (
     <>
       <DialogTitle>
         <div className={globalClasses.centeredVertical}>
-          <Icon item={props.content} style={{ marginRight: '1em' }} />
+          {props.content && <Icon item={props.content} style={{ marginRight: '1em' }} />}
           {localization.title}
         </div>
       </DialogTitle>
 
       <Picker
         repository={repository}
+        defaultValue={props.defaultValue ? [props.defaultValue] : undefined}
         currentPath={props.currentPath}
         selectionRoots={selectionRoots}
         itemsODataOptions={itemsODataOptions}
@@ -56,7 +59,7 @@ export const ContentPickerDialog: React.FunctionComponent<ContentPickerDialogPro
         actionsContainer={DialogActions}
         handleCancel={closeLastDialog}
         handleSubmit={handleSubmit}
-        required={1}
+        required={props.required ? 1 : 0}
         localization={{ cancelButton: localization.cancelButton, submitButton: localization.selectButton }}
         classes={{ cancelButton: globalClasses.cancelButton }}
       />

apps/sensenet/src/components/dialogs/date-range-picker.tsx

@@ -0,0 +1,130 @@
+import { Button, createStyles, DialogActions, DialogContent, makeStyles, Theme } from '@material-ui/core'
+import React, { useState } from 'react'
+import DayPicker, { DateUtils, Modifier } from 'react-day-picker'
+import MomentLocaleUtils from 'react-day-picker/moment'
+import { useGlobalStyles } from '../../globalStyles'
+import { useLocalization, usePersonalSettings } from '../../hooks'
+import { useDialog } from '.'
+
+import 'react-day-picker/lib/style.css'
+
+const useStyles = makeStyles((theme: Theme) => {
+  return createStyles({
+    root: {
+      '& .DayPicker-wrapper, & .DayPicker-NavButton': {
+        outline: 0,
+      },
+      '& .DayPicker-Day': {
+        borderRadius: '0 !important',
+      },
+      '& .DayPicker-Day--selected:not(.DayPicker-Day--disabled):not(.DayPicker-Day--outside)': {
+        backgroundColor: theme.palette.primary.main,
+      },
+    },
+  })
+})
+
+export interface DateRangePickerProps {
+  defaultValue?: {
+    from: Date
+    to: Date
+  }
+  handleSubmit: (range: { from?: Date; to?: Date }) => void
+}
+
+export const DateRangePicker: React.FunctionComponent<DateRangePickerProps> = (props) => {
+  const { closeLastDialog } = useDialog()
+  const globalClasses = useGlobalStyles()
+  const classes = useStyles()
+  const localization = useLocalization().dateRangePicker
+  const personalSettings = usePersonalSettings()
+  const langCode = personalSettings.language === 'hungarian' ? 'hu' : 'en'
+
+  const [from, setFrom] = useState<Date | undefined>(props.defaultValue?.from)
+  const [to, setTo] = useState<Date | undefined>(props.defaultValue?.to)
+  const [enteredTo, setEnteredTo] = useState<Date | undefined>(props.defaultValue?.to)
+
+  const isSelectingFirstDay = (day: Date) => {
+    const isBeforeFirstDay = from && DateUtils.isDayBefore(day, from)
+    const isRangeSelected = from && to
+    return !from || isBeforeFirstDay || isRangeSelected
+  }
+
+  const handleDayClick = (day: Date) => {
+    if (from && to && day >= from && day <= to) {
+      handleResetClick()
+      return
+    }
+    if (isSelectingFirstDay(day)) {
+      setFrom(day)
+      setTo(undefined)
+      setEnteredTo(undefined)
+    } else {
+      setTo(day)
+      setEnteredTo(day)
+    }
+  }
+
+  const handleDayMouseEnter = (day: Date) => {
+    if (!isSelectingFirstDay(day)) {
+      setEnteredTo(day)
+    }
+  }
+
+  const handleResetClick = () => {
+    setFrom(undefined)
+    setTo(undefined)
+    setEnteredTo(undefined)
+  }
+
+  const modifiers = { start: from, end: enteredTo }
+  const disabledDays: Modifier = from ? { before: from } : undefined
+  const selectedDays: Modifier[] = from && enteredTo ? [from, { from, to: enteredTo }] : from ? [from] : []
+
+  return (
+    <>
+      <DialogContent>
+        <DayPicker
+          className={classes.root}
+          firstDayOfWeek={1}
+          fixedWeeks
+          numberOfMonths={2}
+          fromMonth={from}
+          toMonth={new Date()}
+          selectedDays={selectedDays}
+          disabledDays={disabledDays}
+          modifiers={modifiers}
+          onDayClick={handleDayClick}
+          onDayMouseEnter={handleDayMouseEnter}
+          localeUtils={MomentLocaleUtils}
+          locale={langCode}
+        />
+      </DialogContent>
+      <DialogActions>
+        <Button
+          aria-label={localization.resetButton}
+          disabled={!from || !to}
+          color="secondary"
+          variant="contained"
+          onClick={handleResetClick}>
+          {localization.resetButton}
+        </Button>
+        <Button
+          aria-label={localization.submitButton}
+          color="primary"
+          variant="contained"
+          onClick={() => props.handleSubmit({ from, to })}>
+          {localization.submitButton}
+        </Button>
+        <Button
+          aria-label={localization.cancelButton}
+          className={globalClasses.cancelButton}
+          onClick={() => closeLastDialog()}>
+          {localization.cancelButton}
+        </Button>
+      </DialogActions>
+    </>
+  )
+}
+
+export default DateRangePicker

apps/sensenet/src/components/dialogs/dialog-provider.tsx

@@ -9,6 +9,7 @@ import {
   ContentPickerDialogProps,
   CopyMoveDialogProps,
   CustomActionResultDialogProps,
+  DateRangePickerProps,
   DeleteContentDialogProps,
   ExecuteActionDialogProps,
   PermissionEditorDialogProps,
@@ -37,6 +38,7 @@ export type DialogWithProps = (
   | { name: 'content-picker'; props: ContentPickerDialogProps }
   | { name: 'feedback' }
   | { name: 'change-password' }
+  | { name: 'date-range-picker'; props: DateRangePickerProps }
 ) & { dialogProps?: Partial<DialogProps> }
 
 type Action = { type: 'PUSH_DIALOG'; dialog: DialogWithProps } | { type: 'POP_DIALOG' } | { type: 'CLOSE_ALL_DIALOGS' }

apps/sensenet/src/components/dialogs/dialogs.tsx

@@ -21,6 +21,7 @@ const Restore = React.lazy(() => import('./restore'))
 const ContentPicker = React.lazy(() => import('./content-picker'))
 const Feedback = React.lazy(() => import('./feedback'))
 const ChangePasswordDialog = React.lazy(() => import('./change-password'))
+const DateRangePicker = React.lazy(() => import('./date-range-picker'))
 
 function dialogRenderer(dialog: DialogWithProps) {
   switch (dialog.name) {
@@ -60,6 +61,8 @@ function dialogRenderer(dialog: DialogWithProps) {
       return <Feedback />
     case 'change-password':
       return <ChangePasswordDialog />
+    case 'date-range-picker':
+      return <DateRangePicker {...dialog.props} />
     default:
       return null
   }

apps/sensenet/src/components/dialogs/index.ts

@@ -5,6 +5,7 @@ export * from './check-in'
 export * from './content-picker'
 export * from './copy-move'
 export * from './custom-action-result'
+export * from './date-range-picker'
 export * from './delete'
 export * from './dialog-provider'
 export * from './dialog-title'

apps/sensenet/src/components/dialogs/restore.tsx

@@ -1,5 +1,5 @@
 import { PathHelper } from '@sensenet/client-utils'
-import { TrashBag } from '@sensenet/default-content-types'
+import { GenericContent, TrashBag } from '@sensenet/default-content-types'
 import { useLogger, useRepository } from '@sensenet/hooks-react'
 import { Button, DialogActions, DialogContent, InputAdornment, TextField } from '@material-ui/core'
 import RestoreIcon from '@material-ui/icons/RestoreFromTrash'
@@ -95,7 +95,8 @@ export function Restore(props: RestoreProps) {
                   content: props.content,
                   currentPath: props.content.OriginalPath || '/Root',
                   selectionRoot: rootPath,
-                  handleSubmit: (path: string) => setDestination(path),
+                  handleSubmit: (content: GenericContent) => setDestination(content.Path),
+                  required: true,
                 },
                 dialogProps: { disableBackdropClick: true, open: true, classes: { paper: globalClasses.pickerDialog } },
               })

apps/sensenet/src/components/dialogs/save-query.tsx

@@ -5,11 +5,13 @@ import { Button, DialogActions, DialogContent, TextField } from '@material-ui/co
 import React, { useState } from 'react'
 import { useGlobalStyles } from '../../globalStyles'
 import { useLocalization } from '../../hooks'
+import { createSearchQuery } from '../../services/search-query-builder'
+import { SearchFilters } from '../search'
 import { DialogTitle, useDialog } from '.'
 
 export type SaveQueryProps = {
   saveName?: string
-  query: string
+  filters: SearchFilters
 }
 
 export function SaveQuery(props: SaveQueryProps) {
@@ -30,9 +32,10 @@ export function SaveQuery(props: SaveQueryProps) {
           select: ['DisplayName', 'Query'],
         },
         body: {
-          query: props.query,
+          query: createSearchQuery(props.filters).toString(),
           displayName: saveName,
           queryType: 'Public',
+          uiFilters: JSON.stringify(props.filters),
         },
       })
       logger.information({
@@ -52,7 +55,7 @@ export function SaveQuery(props: SaveQueryProps) {
       <DialogContent style={{ minWidth: 450 }}>
         <TextField
           fullWidth={true}
-          defaultValue={localization.saveInputPlaceholder(props.query)}
+          defaultValue={localization.saveInputPlaceholder(props.filters.term)}
           onChange={(ev) => setSaveName(ev.currentTarget.value)}
         />
       </DialogContent>