feat(group): update group page features per requirements (#113)

* feat(group): add terms link and consent checkbox clickup: https://app.clickup.com/t/8696ed8vp * feat(group): modify form fields per new requirements * feat(shared): add text with links component * feat(group): modify detailed per new requirement * feat(group): modify search per new requestments * feat(group): modify key description to content * feat(group): set activity category default value * feat(group): auto-focus on input field after error
daodaoedu · Nov 3, 2024 · 82471f2 · 82471f2
1 parent 1ca8506
commit 82471f2
Show file tree

Hide file tree

Showing 26 changed files with 639 additions and 48 deletions.
diff --git a/components/Group/Form/Fields/AreaCheckbox.jsx b/components/Group/Form/Fields/AreaCheckbox.jsx
@@ -57,12 +57,14 @@ export default function AreaCheckbox({
         <FormControlLabel
           control={<Checkbox onClick={toggleIsPhysicalArea} />}
           label="實體活動"
+          disabled={value.includes('待討論')}
           checked={isPhysicalArea}
         />
         <Select
           name={name}
           options={options}
           placeholder="地點"
+          disabled={value.includes('待討論')}
           value={physicalAreaValue}
           itemLabel={itemLabel}
           itemValue={itemValue}
@@ -73,6 +75,7 @@ export default function AreaCheckbox({
         <FormControlLabel
           control={<Checkbox onClick={() => handleCheckboxChange('線上')} />}
           label="線上"
+          disabled={value.includes('待討論')}
           checked={value.includes('線上')}
         />
       </div>
@@ -81,6 +84,7 @@ export default function AreaCheckbox({
           control={<Checkbox onClick={() => handleCheckboxChange('待討論')} />}
           label="待討論"
           checked={value.includes('待討論')}
+          disabled={value.some((item) => item !== '待討論')}
         />
       </div>
     </>

diff --git a/components/Group/Form/Fields/CheckboxGroup.jsx b/components/Group/Form/Fields/CheckboxGroup.jsx
@@ -0,0 +1,41 @@
+import Box from '@mui/material/Box';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+
+export default function CheckboxGroup({
+  options,
+  name,
+  value,
+  control,
+  handleValues,
+}) {
+  const handleCheckboxChange = (_value) => {
+    const hasValue = value.includes(_value);
+    const updatedValue = hasValue
+      ? value.filter((v) => v !== _value)
+      : [...value, _value];
+    const newValue = handleValues(
+      hasValue ? 'remove' : 'add',
+      _value,
+      updatedValue,
+    );
+
+    control.onChange({ target: { name, value: newValue } });
+  };
+
+  return (
+    <Box sx={{ display: 'flex', flexWrap: 'wrap' }}>
+      {options.map((option) => (
+        <FormControlLabel
+          key={option.value}
+          sx={{ flex: '0 0 124px' }}
+          control={
+            <Checkbox onClick={() => handleCheckboxChange(option.value)} />
+          }
+          label={option.label}
+          checked={value.includes(option.value)}
+        />
+      ))}
+    </Box>
+  );
+}
diff --git a/components/Group/Form/Fields/DateRadio.jsx b/components/Group/Form/Fields/DateRadio.jsx
@@ -0,0 +1,68 @@
+import dayjs from 'dayjs';
+import { useEffect, useState } from 'react';
+import Box from '@mui/material/Box';
+import FormControlLabel from '@mui/material/FormControlLabel';
+import Checkbox from '@mui/material/Checkbox';
+import TextField from '@mui/material/TextField';
+import { LocalizationProvider } from '@mui/x-date-pickers/LocalizationProvider';
+import { MobileDatePicker } from '@mui/x-date-pickers/MobileDatePicker';
+import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
+
+export default function DateRadio({
+  name,
+  customValueName,
+  value,
+  isCustomValue,
+  control,
+}) {
+  const [isCustomDate, setIsCustomDate] = useState(isCustomValue);
+  const [date, setDate] = useState(value);
+
+  useEffect(() => {
+    control.onChange({ target: { name, value: date } });
+    control.onChange({
+      target: { name: customValueName, value: isCustomDate },
+    });
+  }, [name, date, customValueName, isCustomDate]);
+
+  return (
+    <LocalizationProvider dateAdapter={AdapterDayjs}>
+      <Box
+        sx={{
+          display: 'flex',
+          alignItems: 'center',
+          label: { whiteSpace: 'nowrap' },
+        }}
+      >
+        <FormControlLabel
+          control={<Checkbox onClick={() => setIsCustomDate(true)} />}
+          label="自訂"
+          checked={isCustomDate}
+        />
+        <MobileDatePicker
+          inputFormat="YYYY/MM/DD"
+          value={date}
+          onChange={setDate}
+          onAccept={() => setIsCustomDate(true)}
+          minDate={dayjs().add(1, 'day')}
+          maxDate={dayjs().add(4, 'year')}
+          renderInput={(params) => (
+            <TextField
+              {...params}
+              size="small"
+              sx={{ '& legend': { display: 'none' } }}
+              fullWidth
+            />
+          )}
+        />
+      </Box>
+      <div>
+        <FormControlLabel
+          control={<Checkbox onClick={() => setIsCustomDate(false)} />}
+          label="不限"
+          checked={!isCustomDate}
+        />
+      </div>
+    </LocalizationProvider>
+  );
+}
diff --git a/components/Group/Form/Fields/Select.jsx b/components/Group/Form/Fields/Select.jsx
@@ -1,4 +1,3 @@
-import { useState } from 'react';
 import FormControl from '@mui/material/FormControl';
 import MuiSelect from '@mui/material/Select';
 import MenuItem from '@mui/material/MenuItem';
@@ -27,6 +26,7 @@ export default function Select({
   return (
     <FormControl size="small" fullWidth>
       <MuiSelect
+        inputRef={(element) => control.setRef?.(name, element)}
         displayEmpty
         multiple={multiple}
         fullWidth={fullWidth}

diff --git a/components/Group/Form/Fields/TagsField.jsx b/components/Group/Form/Fields/TagsField.jsx
@@ -60,6 +60,7 @@ function TagsField({ name, helperText, control, value = [] }) {
         ))}
         {value.length < 8 && (
           <input
+            ref={(element) => control.setRef?.(name, element)}
             value={input}
             onCompositionStart={() => {
               isComposing.current = true;

diff --git a/components/Group/Form/Fields/TextField.jsx b/components/Group/Form/Fields/TextField.jsx
@@ -13,6 +13,7 @@ export default function TextField({
   return (
     <>
       <MuiTextField
+        inputRef={(element) => control.setRef?.(name, element)}
         fullWidth
         id={id}
         name={name}
@@ -21,7 +22,7 @@ export default function TextField({
         placeholder={placeholder}
         value={value}
         multiline={multiline}
-        rows={multiline && 10}
+        rows={multiline && 6}
         helperText={helperText}
         {...control}
       />

diff --git a/components/Group/Form/Fields/index.jsx b/components/Group/Form/Fields/index.jsx
@@ -5,6 +5,8 @@ import TagsField from './TagsField';
 import TextField from './TextField';
 import Upload from './Upload';
 import Wrapper from './Wrapper';
+import CheckboxGroup from './CheckboxGroup';
+import DateRadio from './DateRadio';
 
 const withWrapper = (Component) => (props) => {
   const id = useId();
@@ -25,6 +27,8 @@ const withWrapper = (Component) => (props) => {
 
 const Fields = {
   AreaCheckbox: withWrapper(AreaCheckbox),
+  CheckboxGroup: withWrapper(CheckboxGroup),
+  DateRadio: withWrapper(DateRadio),
   Select: withWrapper(Select),
   TagsField: withWrapper(TagsField),
   TextField: withWrapper(TextField),

diff --git a/components/Group/Form/Form.styled.jsx b/components/Group/Form/Form.styled.jsx
@@ -43,7 +43,9 @@ export const StyledLabel = styled(InputLabel)`
 `;
 
 export const StyledGroup = styled.div`
-  margin-bottom: 20px;
+  & + & {
+    margin-top: 20px;
+  }
 
   .error-message {
     font-size: 14px;