1
- import { Button , Group , Stack , TimeInput , NumberInput , ActionIcon , IconMinus , isInRange , isNotEmpty , useForm } from "@quassel/ui" ;
1
+ import { Button , Group , Stack , TimeInput , NumberInput , ActionIcon , IconMinus , isInRange , isNotEmpty , useForm , Switch } from "@quassel/ui" ;
2
2
import { i18n } from "../../../stores/i18n" ;
3
3
import { useStore } from "@nanostores/react" ;
4
- import { useEffect } from "react" ;
4
+ import { useEffect , useState } from "react" ;
5
5
import { CarerSelect } from "../../CarerSelect" ;
6
6
import { LanguageSelect } from "../../LanguageSelect" ;
7
7
import { components } from "../../../api.gen" ;
@@ -13,15 +13,20 @@ export type EntryFormValues = {
13
13
ratio : number ;
14
14
language ?: number ;
15
15
} [ ] ;
16
+ weeklyRecurring ?: number ;
16
17
startedAt : string ;
17
18
endedAt : string ;
18
19
} ;
19
20
20
21
const messages = i18n ( "entityForm" , {
21
- actionAddDialect : "Add dialect" ,
22
+ actionAddLanguage : "Add language" ,
23
+ actionAddRecurringRule : "Add recurring rule" ,
22
24
actionDelete : "Delete" ,
25
+
23
26
labelCarer : "Carer" ,
24
27
labelLanguage : "Language" ,
28
+ labelRecurringRulePrefix : "Recurs every" ,
29
+ labelRecurringRuleSuffix : "weeks." ,
25
30
validationRatio : "Ratio must be between 1 and 100." ,
26
31
validationTotalRatio : "Total Ratio must always be 100%." ,
27
32
validationNotEmpty : "Field must not be empty." ,
@@ -67,10 +72,16 @@ export function EntityForm({ onSave, onDelete, onAddCarer, onAddLanguage, action
67
72
} ,
68
73
} ) ;
69
74
75
+ const [ showRecurringRule , setShowRecurringRule ] = useState ( false ) ;
76
+
70
77
useEffect ( ( ) => {
71
78
if ( entry ) {
72
79
f . setValues ( entry ) ;
73
80
f . resetDirty ( ) ;
81
+
82
+ if ( entry . weeklyRecurring && entry . weeklyRecurring > 1 ) {
83
+ setShowRecurringRule ( true ) ;
84
+ }
74
85
}
75
86
} , [ entry ] ) ;
76
87
@@ -132,14 +143,30 @@ export function EntityForm({ onSave, onDelete, onAddCarer, onAddLanguage, action
132
143
} }
133
144
variant = "light"
134
145
>
135
- { t . actionAddDialect }
146
+ { t . actionAddLanguage }
136
147
</ Button >
137
148
< Group >
138
149
< TimeInput flex = { 1 } { ...f . getInputProps ( "startedAt" ) } />
139
150
-
140
151
< TimeInput flex = { 1 } { ...f . getInputProps ( "endedAt" ) } />
141
152
</ Group >
142
153
154
+ < Switch
155
+ checked = { showRecurringRule }
156
+ onClick = { ( ) => {
157
+ f . setValues ( { weeklyRecurring : showRecurringRule ? 1 : 2 } ) ;
158
+ setShowRecurringRule ( ! showRecurringRule ) ;
159
+ } }
160
+ label = { t . actionAddRecurringRule }
161
+ > </ Switch >
162
+ { showRecurringRule && (
163
+ < Group >
164
+ { t . labelRecurringRulePrefix }
165
+ < NumberInput { ...f . getInputProps ( "weeklyRecurring" ) } min = { 2 } w = { 60 } />
166
+ { t . labelRecurringRuleSuffix }
167
+ </ Group >
168
+ ) }
169
+
143
170
< Group justify = "flex-end" >
144
171
{ onDelete && (
145
172
< Button onClick = { onDelete } variant = "outline" color = "uzhOrange" >
0 commit comments