mirror of
https://gitlab.com/mbugroup/lti-web-client.git
synced 2026-05-24 23:35:45 +00:00
refactor(FE): Refactor RecordingTable layout for improved readability
This commit is contained in:
rstubryan
@@ -2,7 +2,7 @@ import RecordingTable from '@/components/pages/production/recording/RecordingTab
|
|||||||
|
|
||||||
const Recording = () => {
|
const Recording = () => {
|
||||||
return (
|
return (
|
||||||
<section className='w-full p-3 overflow-x-hidden'>
|
<section className='w-full overflow-x-hidden'>
|
||||||
<RecordingTable />
|
<RecordingTable />
|
||||||
</section>
|
</section>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1173,131 +1173,132 @@ const RecordingTable = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className='w-full'>
|
<div className='w-full'>
|
||||||
<div className='flex flex-col mb-4 -mx-4 px-4'>
|
<div className='w-full p-3 flex flex-row justify-between gap-3 flex-wrap border-b border-base-content/10'>
|
||||||
{/* Action Buttons, Search and Filter Section */}
|
{/* Action Buttons */}
|
||||||
<div className='relative w-full p-3 pt-0 px-0 flex flex-col xl:flex-row justify-between items-start xl:items-center gap-3 flex-wrap after:absolute after:bottom-0 after:left-0 after:right-0 after:-mx-4 after:border-b after:border-base-content/10'>
|
<div className='w-fit flex flex-row gap-3 flex-wrap'>
|
||||||
{/* Action Buttons */}
|
<RequirePermission permissions='lti.production.recording.create'>
|
||||||
<div className='w-full xl:w-fit flex flex-col sm:flex-row self-start gap-2'>
|
|
||||||
<RequirePermission permissions='lti.production.recording.create'>
|
|
||||||
<Button
|
|
||||||
href='/production/recording/add'
|
|
||||||
color='primary'
|
|
||||||
className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
|
|
||||||
>
|
|
||||||
<Icon icon='heroicons:plus' width={20} height={20} />
|
|
||||||
Add Recording
|
|
||||||
</Button>
|
|
||||||
</RequirePermission>
|
|
||||||
|
|
||||||
{selectedRowIds.length > 0 && (
|
|
||||||
<>
|
|
||||||
<RequirePermission permissions='lti.production.recording.approve'>
|
|
||||||
<Button
|
|
||||||
variant='outline'
|
|
||||||
color='success'
|
|
||||||
onClick={() => {
|
|
||||||
setApprovalNotes('');
|
|
||||||
approveModal.openModal();
|
|
||||||
}}
|
|
||||||
disabled={
|
|
||||||
selectedRowIds.length === 0 ||
|
|
||||||
eligibleRowIds.length === 0
|
|
||||||
}
|
|
||||||
className='w-full sm:w-fit'
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='material-symbols:check'
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
/>
|
|
||||||
Approve
|
|
||||||
</Button>
|
|
||||||
</RequirePermission>
|
|
||||||
|
|
||||||
<RequirePermission permissions='lti.production.recording.approve'>
|
|
||||||
<Button
|
|
||||||
variant='outline'
|
|
||||||
color='error'
|
|
||||||
onClick={() => {
|
|
||||||
setApprovalNotes('');
|
|
||||||
rejectModal.openModal();
|
|
||||||
}}
|
|
||||||
disabled={
|
|
||||||
selectedRowIds.length === 0 ||
|
|
||||||
eligibleRowIds.length === 0
|
|
||||||
}
|
|
||||||
className='w-full sm:w-fit'
|
|
||||||
>
|
|
||||||
<Icon
|
|
||||||
icon='material-symbols:close'
|
|
||||||
width={24}
|
|
||||||
height={24}
|
|
||||||
/>
|
|
||||||
Reject
|
|
||||||
</Button>
|
|
||||||
</RequirePermission>
|
|
||||||
</>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
|
|
||||||
{/* Search and Filter */}
|
|
||||||
<div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap w-full xl:w-auto'>
|
|
||||||
<DebouncedTextInput
|
|
||||||
name='search'
|
|
||||||
placeholder='Search'
|
|
||||||
value={tableFilterState.search ?? ''}
|
|
||||||
onChange={searchChangeHandler}
|
|
||||||
startAdornment={
|
|
||||||
<Icon
|
|
||||||
icon='heroicons:magnifying-glass'
|
|
||||||
width={20}
|
|
||||||
height={20}
|
|
||||||
/>
|
|
||||||
}
|
|
||||||
className={{
|
|
||||||
wrapper: 'w-full min-w-24 max-w-3xs',
|
|
||||||
inputWrapper: 'rounded-xl! shadow-button-soft',
|
|
||||||
input:
|
|
||||||
'placeholder:font-semibold placeholder:text-base-content/50',
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
variant='outline'
|
href='/production/recording/add'
|
||||||
color='none'
|
color='primary'
|
||||||
onClick={handleFilterModalOpen}
|
className='px-3 py-2.5 w-fit text-sm text-base-100 rounded-lg shadow-sm'
|
||||||
className={cn(
|
|
||||||
'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
|
|
||||||
{
|
|
||||||
'border-primary-gradient text-primary': hasFilters,
|
|
||||||
}
|
|
||||||
)}
|
|
||||||
>
|
>
|
||||||
<Icon icon='heroicons:funnel' width={20} height={20} />
|
<Icon icon='heroicons:plus' width={20} height={20} />
|
||||||
Filter
|
Add Recording
|
||||||
{hasFilters && (
|
|
||||||
<span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
|
|
||||||
{activeFiltersCount}
|
|
||||||
</span>
|
|
||||||
)}
|
|
||||||
</Button>
|
</Button>
|
||||||
|
</RequirePermission>
|
||||||
|
|
||||||
<SelectInput
|
{selectedRowIds.length > 0 && (
|
||||||
options={ROWS_OPTIONS}
|
<>
|
||||||
value={{
|
<hr className='w-px h-full border-none bg-base-content/10 sm:block hidden' />
|
||||||
label: String(tableFilterState.pageSize),
|
|
||||||
value: tableFilterState.pageSize,
|
<RequirePermission permissions='lti.production.recording.approve'>
|
||||||
}}
|
<Button
|
||||||
onChange={pageSizeChangeHandler}
|
variant='outline'
|
||||||
className={{
|
color='none'
|
||||||
wrapper:
|
onClick={() => {
|
||||||
'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
|
setApprovalNotes('');
|
||||||
}}
|
rejectModal.openModal();
|
||||||
/>
|
}}
|
||||||
</div>
|
disabled={
|
||||||
|
selectedRowIds.length === 0 || eligibleRowIds.length === 0
|
||||||
|
}
|
||||||
|
className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon='heroicons:x-mark'
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className='text-error'
|
||||||
|
/>
|
||||||
|
Reject
|
||||||
|
</Button>
|
||||||
|
</RequirePermission>
|
||||||
|
|
||||||
|
<RequirePermission permissions='lti.production.recording.approve'>
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
color='none'
|
||||||
|
onClick={() => {
|
||||||
|
setApprovalNotes('');
|
||||||
|
approveModal.openModal();
|
||||||
|
}}
|
||||||
|
disabled={
|
||||||
|
selectedRowIds.length === 0 || eligibleRowIds.length === 0
|
||||||
|
}
|
||||||
|
className='px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft'
|
||||||
|
>
|
||||||
|
<Icon
|
||||||
|
icon='heroicons:check'
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
className='text-success'
|
||||||
|
/>
|
||||||
|
Approve
|
||||||
|
</Button>
|
||||||
|
</RequirePermission>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Table Section */}
|
{/* Search and Filter */}
|
||||||
|
<div className='flex flex-1 flex-row justify-start sm:justify-end items-center gap-3 flex-wrap'>
|
||||||
|
<DebouncedTextInput
|
||||||
|
name='search'
|
||||||
|
placeholder='Search'
|
||||||
|
value={tableFilterState.search ?? ''}
|
||||||
|
onChange={searchChangeHandler}
|
||||||
|
startAdornment={
|
||||||
|
<Icon
|
||||||
|
icon='heroicons:magnifying-glass'
|
||||||
|
width={20}
|
||||||
|
height={20}
|
||||||
|
/>
|
||||||
|
}
|
||||||
|
className={{
|
||||||
|
wrapper: 'w-full min-w-24 max-w-3xs',
|
||||||
|
inputWrapper: 'rounded-xl! shadow-button-soft',
|
||||||
|
input:
|
||||||
|
'placeholder:font-semibold placeholder:text-base-content/50',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<Button
|
||||||
|
variant='outline'
|
||||||
|
color='none'
|
||||||
|
onClick={handleFilterModalOpen}
|
||||||
|
className={cn(
|
||||||
|
'px-3 py-2.5 gap-1.5 text-sm text-base-content/50 border border-base-content/10 rounded-xl shadow-button-soft transition-all',
|
||||||
|
{
|
||||||
|
'border-primary-gradient text-primary': hasFilters,
|
||||||
|
}
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<Icon icon='heroicons:funnel' width={20} height={20} />
|
||||||
|
Filter
|
||||||
|
{hasFilters && (
|
||||||
|
<span className='w-5 h-5 text-white bg-[#FF3535] rounded-lg border border-base-300 flex items-center justify-center text-xs'>
|
||||||
|
{activeFiltersCount}
|
||||||
|
</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
|
||||||
|
<SelectInput
|
||||||
|
options={ROWS_OPTIONS}
|
||||||
|
value={{
|
||||||
|
label: String(tableFilterState.pageSize),
|
||||||
|
value: tableFilterState.pageSize,
|
||||||
|
}}
|
||||||
|
onChange={pageSizeChangeHandler}
|
||||||
|
className={{
|
||||||
|
wrapper:
|
||||||
|
'col-span-6 sm:col-span-4 max-w-28 sm:justify-self-end',
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{/* Table Section */}
|
||||||
|
<div className='flex flex-col mb-4 -mx-4 px-4'>
|
||||||
{isLoading ? (
|
{isLoading ? (
|
||||||
<div className='w-full flex flex-row justify-center items-center p-4'>
|
<div className='w-full flex flex-row justify-center items-center p-4'>
|
||||||
<span className='loading loading-spinner loading-xl' />
|
<span className='loading loading-spinner loading-xl' />
|
||||||
@@ -1335,7 +1336,7 @@ const RecordingTable = () => {
|
|||||||
rowSelection={rowSelection}
|
rowSelection={rowSelection}
|
||||||
setRowSelection={setRowSelection}
|
setRowSelection={setRowSelection}
|
||||||
className={{
|
className={{
|
||||||
containerClassName: cn('mt-3 mb-0', {
|
containerClassName: cn('p-3 mb-0', {
|
||||||
'w-full':
|
'w-full':
|
||||||
isResponseSuccess(recordings) &&
|
isResponseSuccess(recordings) &&
|
||||||
recordings?.data?.length === 0,
|
recordings?.data?.length === 0,
|
||||||
|
|||||||
Reference in New Issue
Block a user