@@ -203,142 +203,142 @@ export default function TemplatesPage() {
203203 value = "tasks"
204204 className = "border-sarge-gray-200 flex min-h-0 w-1/4 shrink-0 flex-col border-r-1"
205205 >
206- < div className = "flex flex-col gap-2.5 px-3 pt-3 sm:flex-row sm:items-center" >
207- < Search
208- className = "border-none"
209- value = { taskTemplateSearch . value }
210- onChange = { taskTemplateSearch . onChange }
211- placeholder = "Type to search"
206+ < div className = "flex flex-col gap-2.5 px-3 pt-3 sm:flex-row sm:items-center" >
207+ < Search
208+ className = "border-none"
209+ value = { taskTemplateSearch . value }
210+ onChange = { taskTemplateSearch . onChange }
211+ placeholder = "Type to search"
212+ />
213+ < div className = "flex" >
214+ < DropdownMenu >
215+ < DropdownMenuTrigger asChild >
216+ < Button variant = "icon" className = "px-3 py-2" >
217+ < ArrowDownUp className = "size-5" />
218+ </ Button >
219+ </ DropdownMenuTrigger >
220+ < DropdownMenuContent align = "end" className = "bg-white" >
221+ < DropdownMenuRadioGroup
222+ value = { taskSortBy ?? '' }
223+ onValueChange = { ( v ) =>
224+ setTaskSortBy (
225+ v === '' ? null : ( v as TaskTemplateSortBy )
226+ )
227+ }
228+ >
229+ < DropdownMenuRadioItem value = "" >
230+ Default
231+ </ DropdownMenuRadioItem >
232+ < DropdownMenuRadioItem value = "title-asc" >
233+ Title (A → Z)
234+ </ DropdownMenuRadioItem >
235+ < DropdownMenuRadioItem value = "title-desc" >
236+ Title (Z → A)
237+ </ DropdownMenuRadioItem >
238+ < DropdownMenuRadioItem value = "estimated-asc" >
239+ Estimated time (Low → High)
240+ </ DropdownMenuRadioItem >
241+ < DropdownMenuRadioItem value = "estimated-desc" >
242+ Estimated time (High → Low)
243+ </ DropdownMenuRadioItem >
244+ </ DropdownMenuRadioGroup >
245+ </ DropdownMenuContent >
246+ </ DropdownMenu >
247+ </ div >
248+ </ div >
249+ < div className = "flex min-h-0 flex-1 flex-col gap-2.5 overflow-scroll px-3 py-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" >
250+ { isLoading || taskTemplateSearch . loading ? (
251+ < div className = "flex h-full w-full items-center justify-center" >
252+ < Image
253+ src = "/CreateOrgLoading.gif"
254+ alt = "Loading GIF"
255+ width = { 66 }
256+ height = { 66 }
257+ />
258+ </ div >
259+ ) : error ? (
260+ < div > Error: { error . message } </ div >
261+ ) : displayedTaskTemplates . length === 0 ? (
262+ < div className = "text-sarge-gray-500 flex h-full w-full flex-col items-center justify-center gap-4" >
263+ < Image
264+ src = { GreyWinstonLogoMark }
265+ height = { 78 }
266+ width = { 140 }
267+ alt = "Winston Logo"
268+ />
269+ { isSearchingForTaskTemplate
270+ ? 'Could not find task'
271+ : 'You currently have no tasks' }
272+ </ div >
273+ ) : (
274+ displayedTaskTemplates . map ( ( task : TaskTemplateListItemDTO ) => (
275+ < TaskTemplateCard
276+ key = { task . id }
277+ title = { task . title }
278+ subtitle = { task . taskType ?? '' }
279+ chips = { task . tags ?? [ ] }
280+ languages = { task . languages }
281+ isSelected = { selected ?. includes ( task . id ) ?? false }
282+ setIsSelected = { handleSelectTask }
283+ taskTemplateId = { task . id }
284+ isPreviewSelected = { selectedTaskTemplate ?. id === task . id }
285+ onPreviewSelect = { ( ) => {
286+ setSelectedAssessmentTemplate ( null ) ;
287+ setSelectedTaskTemplate ( task ) ;
288+ } }
289+ />
290+ ) )
291+ ) }
292+ </ div >
293+ < div className = "border-sarge-gray-200 flex flex-col gap-2.5 border-t-1 p-3" >
294+ < div className = "flex-1 justify-end" >
295+ < Pager
296+ page = { page }
297+ limit = { limit }
298+ total = { total }
299+ changePage = { setPage }
300+ changeLimit = { setLimit }
212301 />
213- < div className = "flex" >
302+ </ div >
303+ < div className = "flex w-full items-center gap-2.5" >
304+ < div className = "text-sarge-primary-500 hover:cursor-pointer" >
214305 < DropdownMenu >
215306 < DropdownMenuTrigger asChild >
216- < Button variant = "icon" className = "px-3 py-2" >
217- < ArrowDownUp className = "size-5" />
218- </ Button >
307+ < div className = "flex items-center gap-2.5" >
308+ < div >
309+ { selected ?. length ?? 0 }
310+ < span className = "hidden lg:inline" > selected</ span >
311+ </ div >
312+ </ div >
219313 </ DropdownMenuTrigger >
220- < DropdownMenuContent align = "end" className = "bg-white" >
221- < DropdownMenuRadioGroup
222- value = { taskSortBy ?? '' }
223- onValueChange = { ( v ) =>
224- setTaskSortBy (
225- v === '' ? null : ( v as TaskTemplateSortBy )
226- )
227- }
228- >
229- < DropdownMenuRadioItem value = "" >
230- Default
231- </ DropdownMenuRadioItem >
232- < DropdownMenuRadioItem value = "title-asc" >
233- Title (A → Z)
234- </ DropdownMenuRadioItem >
235- < DropdownMenuRadioItem value = "title-desc" >
236- Title (Z → A)
237- </ DropdownMenuRadioItem >
238- < DropdownMenuRadioItem value = "estimated-asc" >
239- Estimated time (Low → High)
240- </ DropdownMenuRadioItem >
241- < DropdownMenuRadioItem value = "estimated-desc" >
242- Estimated time (High → Low)
243- </ DropdownMenuRadioItem >
244- </ DropdownMenuRadioGroup >
314+ < DropdownMenuContent
315+ side = "top"
316+ align = "start"
317+ className = "bg-white"
318+ >
319+ < DropdownMenuGroup >
320+ { selected && selected . length > 0 ? (
321+ selected . map ( ( id ) => (
322+ < DropdownMenuLabel key = { id } >
323+ { taskTemplateList . find ( ( t ) => t . id === id )
324+ ?. title ?? id }
325+ </ DropdownMenuLabel >
326+ ) )
327+ ) : (
328+ < DropdownMenuLabel >
329+ No items selected
330+ </ DropdownMenuLabel >
331+ ) }
332+ </ DropdownMenuGroup >
245333 </ DropdownMenuContent >
246334 </ DropdownMenu >
247335 </ div >
336+ < Button className = "flex-1 px-4 py-2" variant = "secondary" >
337+ < Plus className = "lg:hidden" />
338+ < span className = "hidden lg:inline" > Create Assessment</ span >
339+ </ Button >
248340 </ div >
249- < div className = "flex min-h-0 flex-1 flex-col gap-2.5 overflow-scroll px-3 py-2 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden" >
250- { isLoading || taskTemplateSearch . loading ? (
251- < div className = "flex h-full w-full items-center justify-center" >
252- < Image
253- src = "/CreateOrgLoading.gif"
254- alt = "Loading GIF"
255- width = { 66 }
256- height = { 66 }
257- />
258- </ div >
259- ) : error ? (
260- < div > Error: { error . message } </ div >
261- ) : displayedTaskTemplates . length === 0 ? (
262- < div className = "text-sarge-gray-500 flex h-full w-full flex-col items-center justify-center gap-4" >
263- < Image
264- src = { GreyWinstonLogoMark }
265- height = { 78 }
266- width = { 140 }
267- alt = "Winston Logo"
268- />
269- { isSearchingForTaskTemplate
270- ? 'Could not find task'
271- : 'You currently have no tasks' }
272- </ div >
273- ) : (
274- displayedTaskTemplates . map ( ( task : TaskTemplateListItemDTO ) => (
275- < TaskTemplateCard
276- key = { task . id }
277- title = { task . title }
278- subtitle = { task . taskType ?? '' }
279- chips = { task . tags ?? [ ] }
280- languages = { task . languages }
281- isSelected = { selected ?. includes ( task . id ) ?? false }
282- setIsSelected = { handleSelectTask }
283- taskTemplateId = { task . id }
284- isPreviewSelected = { selectedTaskTemplate ?. id === task . id }
285- onPreviewSelect = { ( ) => {
286- setSelectedAssessmentTemplate ( null ) ;
287- setSelectedTaskTemplate ( task ) ;
288- } }
289- />
290- ) )
291- ) }
292- </ div >
293- < div className = "border-sarge-gray-200 flex flex-col gap-2.5 border-t-1 p-3" >
294- < div className = "flex-1 justify-end" >
295- < Pager
296- page = { page }
297- limit = { limit }
298- total = { total }
299- changePage = { setPage }
300- changeLimit = { setLimit }
301- />
302- </ div >
303- < div className = "flex w-full items-center gap-2.5" >
304- < div className = "text-sarge-primary-500 hover:cursor-pointer" >
305- < DropdownMenu >
306- < DropdownMenuTrigger asChild >
307- < div className = "flex items-center gap-2.5" >
308- < div >
309- { selected ?. length ?? 0 }
310- < span className = "hidden lg:inline" > selected</ span >
311- </ div >
312- </ div >
313- </ DropdownMenuTrigger >
314- < DropdownMenuContent
315- side = "top"
316- align = "start"
317- className = "bg-white"
318- >
319- < DropdownMenuGroup >
320- { selected && selected . length > 0 ? (
321- selected . map ( ( id ) => (
322- < DropdownMenuLabel key = { id } >
323- { taskTemplateList . find ( ( t ) => t . id === id )
324- ?. title ?? id }
325- </ DropdownMenuLabel >
326- ) )
327- ) : (
328- < DropdownMenuLabel >
329- No items selected
330- </ DropdownMenuLabel >
331- ) }
332- </ DropdownMenuGroup >
333- </ DropdownMenuContent >
334- </ DropdownMenu >
335- </ div >
336- < Button className = "flex-1 px-4 py-2" variant = "secondary" >
337- < Plus className = "lg:hidden" />
338- < span className = "hidden lg:inline" > Create Assessment</ span >
339- </ Button >
340- </ div >
341- </ div >
341+ </ div >
342342 </ TabsContent >
343343
344344 < TabsContent
0 commit comments