Improve anyone UX
This commit is contained in:
9
.editorconfig
Normal file
9
.editorconfig
Normal file
@@ -0,0 +1,9 @@
|
||||
# EditorConfig is awesome: https://EditorConfig.org
|
||||
root = true
|
||||
|
||||
[*]
|
||||
charset = utf-8
|
||||
end_of_line = lf
|
||||
indent_size = 2
|
||||
indent_style = space
|
||||
insert_final_newline = true
|
||||
2
.github/workflows/build.yml
vendored
2
.github/workflows/build.yml
vendored
@@ -2,9 +2,7 @@ name: Build validation
|
||||
|
||||
on:
|
||||
push:
|
||||
branches: [ "main", "develop" ]
|
||||
pull_request:
|
||||
branches: [ "main", "develop" ]
|
||||
|
||||
jobs:
|
||||
build:
|
||||
|
||||
@@ -83,7 +83,8 @@ const ChoreEdit = () => {
|
||||
const [name, setName] = useState('')
|
||||
const [description, setDescription] = useState('')
|
||||
const [confirmModelConfig, setConfirmModelConfig] = useState({})
|
||||
const [assignees, setAssignees] = useState([])
|
||||
const [anyone, setAnyone] = useState(false)
|
||||
const [assignableTo, setAssignableTo] = useState([])
|
||||
const [performers, setPerformers] = useState([])
|
||||
const [assignStrategy, setAssignStrategy] = useState(ASSIGN_STRATEGIES[2])
|
||||
const [dueDate, setDueDate] = useState(null)
|
||||
@@ -158,6 +159,7 @@ const ChoreEdit = () => {
|
||||
|
||||
const Navigate = useNavigate()
|
||||
|
||||
const assignees = anyone ? performers : assignableTo
|
||||
const HandleValidateChore = () => {
|
||||
const errors = {}
|
||||
|
||||
@@ -330,6 +332,7 @@ const ChoreEdit = () => {
|
||||
if (searchParams.get('clone') === 'true') {
|
||||
newChoreId = null
|
||||
}
|
||||
const assignees = anyone ? [] : assignableTo
|
||||
const chore = {
|
||||
id: Number(newChoreId),
|
||||
name: name,
|
||||
@@ -407,15 +410,29 @@ const ChoreEdit = () => {
|
||||
setIsNotificable(JSON.parse(defaultNotificationSetting))
|
||||
}
|
||||
|
||||
const defaultAnyoneSetting = localStorage.getItem('defaultAnyoneSetting')
|
||||
if (defaultAnyoneSetting != null) {
|
||||
const savedAnyone = JSON.parse(defaultAnyoneSetting)
|
||||
setAnyone(savedAnyone)
|
||||
}
|
||||
|
||||
const defaultAssigneeSetting = localStorage.getItem(
|
||||
'defaultAssigneeSetting',
|
||||
)
|
||||
if (defaultAssigneeSetting !== null) {
|
||||
const savedAssignees = JSON.parse(defaultAssigneeSetting)
|
||||
setAssignees(savedAssignees)
|
||||
setAssignableTo(savedAssignees)
|
||||
}
|
||||
}
|
||||
}, [])
|
||||
useEffect(() => {
|
||||
const anyoneSetting = localStorage.getItem('defaultAnyoneSetting')
|
||||
const anyoneDirty = anyoneSetting !== JSON.stringify(anyone)
|
||||
const assigneeSetting = localStorage.getItem('defaultAssigneeSetting')
|
||||
const assigneeDirty = assigneeSetting !== JSON.stringify(assignableTo)
|
||||
const dirty = anyoneDirty || (!anyone && assigneeDirty)
|
||||
setShowSaveAssigneeDefault(dirty)
|
||||
}, [anyone, assignableTo])
|
||||
|
||||
// Keyboard shortcuts
|
||||
useEffect(() => {
|
||||
@@ -465,7 +482,8 @@ const ChoreEdit = () => {
|
||||
setChore(data.res)
|
||||
setName(data.res.name ? data.res.name : '')
|
||||
setDescription(data.res.description ? data.res.description : '')
|
||||
setAssignees(data.res.assignees ? data.res.assignees : [])
|
||||
setAssignableTo(data.res.assignees ? data.res.assignees : [])
|
||||
setAnyone((data.res.assignees?.length || 0) === 0)
|
||||
setAssignedTo(data.res.assignedTo)
|
||||
setFrequencyType(data.res.frequencyType ? data.res.frequencyType : 'once')
|
||||
|
||||
@@ -585,7 +603,7 @@ const ChoreEdit = () => {
|
||||
setAssignStrategy(ASSIGN_STRATEGIES[2]) // default to least_completed
|
||||
}
|
||||
}
|
||||
}, [assignees, assignStrategy])
|
||||
}, [assignStrategy, assignedTo, assignees])
|
||||
|
||||
// useEffect(() => {
|
||||
// if (performers.length > 0 && assignees.length === 0 && userProfile) {
|
||||
@@ -602,7 +620,7 @@ const ChoreEdit = () => {
|
||||
if (attemptToSave) {
|
||||
HandleValidateChore()
|
||||
}
|
||||
}, [assignees, name, frequencyMetadata, attemptToSave, dueDate])
|
||||
}, [assignableTo, name, frequencyMetadata, attemptToSave, dueDate])
|
||||
|
||||
const handleDelete = () => {
|
||||
setConfirmModelConfig({
|
||||
@@ -929,9 +947,9 @@ const ChoreEdit = () => {
|
||||
|
||||
<ListItem key={'anyone'}>
|
||||
<Checkbox
|
||||
checked={assignees.length === 0}
|
||||
checked={anyone}
|
||||
onClick={() => {
|
||||
setAssignees([])
|
||||
setAnyone(!anyone)
|
||||
setIsPrivate(false)
|
||||
}}
|
||||
overlay
|
||||
@@ -944,10 +962,16 @@ const ChoreEdit = () => {
|
||||
{performers?.map((item, index) => (
|
||||
<ListItem key={item.id}>
|
||||
<Checkbox
|
||||
checked={
|
||||
assignees.find(a => a.userId == item.userId) != null
|
||||
}
|
||||
checked={assignableTo.some(a => a.userId == item.userId)}
|
||||
disabled={anyone}
|
||||
onClick={() => {
|
||||
if (anyone) {
|
||||
setAnyone(false)
|
||||
setAssignableTo([{ userId: item.userId }])
|
||||
return
|
||||
}
|
||||
const assignees = assignableTo
|
||||
const setAssignees = setAssignableTo
|
||||
if (assignees.some(a => a.userId === item.userId)) {
|
||||
const newAssignees = assignees.filter(
|
||||
a => a.userId !== item.userId,
|
||||
@@ -956,7 +980,6 @@ const ChoreEdit = () => {
|
||||
} else {
|
||||
setAssignees([...assignees, { userId: item.userId }])
|
||||
}
|
||||
setShowSaveAssigneeDefault(true)
|
||||
}}
|
||||
overlay
|
||||
disableIcon
|
||||
@@ -986,9 +1009,13 @@ const ChoreEdit = () => {
|
||||
},
|
||||
}}
|
||||
onClick={() => {
|
||||
localStorage.setItem(
|
||||
'defaultAnyoneSetting',
|
||||
JSON.stringify(anyone),
|
||||
)
|
||||
localStorage.setItem(
|
||||
'defaultAssigneeSetting',
|
||||
JSON.stringify(assignees),
|
||||
JSON.stringify(assignableTo),
|
||||
)
|
||||
setShowSaveAssigneeDefault(false)
|
||||
}}
|
||||
|
||||
Reference in New Issue
Block a user