Ignore:
Timestamp:
12/28/25 00:07:22 (7 months ago)
Author:
Mihail <mihail2.naumov@…>
Branches:
main
Children:
9c87509
Parents:
f7c0b0d
Message:

Added frontend elements

File:
1 edited

Legend:

Unmodified
Added
Removed

  • pages/completed-builds/+Page.tsx

    rf7c0b0d re599341  
    11import React, { useEffect, useState } from 'react';
    22import {
    3     Container, Grid, Box, Typography, TextField, MenuItem, Select,
    4     Slider, Button, Paper, InputAdornment
     3    Container, Box, Typography, TextField, MenuItem, Select,
     4    Slider, Button, Paper, InputAdornment, CircularProgress
    55} from '@mui/material';
    66import SearchIcon from '@mui/icons-material/Search';
    … …  
    99import BuildCard from '../../components/BuildCard';
    1010import BuildDetailsDialog from '../../components/BuildDetailsDialog';
    11 
    1211import { onGetApprovedBuilds, onCloneBuild, onGetAuthState } from '../+Layout.telefunc';
    1312
    … …  
    2726            const [userData, data] = await Promise.all([
    2827                onGetAuthState(),
    29                 onGetApprovedBuilds({ q: searchQuery })
     28                onGetApprovedBuilds({q: searchQuery})
    3029            ]);
    3130            setUserId(userData.userId);
    … …  
    5857
    5958            setBuilds(sortedData);
     59        } catch (e) {
     60            console.error("Failed to load builds", e);
    6061        } finally {
    6162            setLoading(false);
    … …  
    6566    useEffect(() => {
    6667        loadBuilds();
    67     }, [sortBy, priceRange, searchQuery]);
    68 
    69     useEffect(() => {
    70         loadBuilds();
    7168    }, [sortBy, searchQuery]);
    7269
    … …  
    7471        if (!userId) return alert("Please login to clone builds!");
    7572        if (confirm(`Clone this build?`)) {
    76             await onCloneBuild({ buildId });
     73            await onCloneBuild({buildId});
    7774            alert("Build cloned!");
    7875            setSelectedBuildId(null);
    … …  
    8178
    8279    return (
    83         <Container maxWidth="xl" sx={{ mt: 4, mb: 10 }}>
     80        <Container maxWidth={false} sx={{ mt: 4, mb: 10, px: { xs: 2, md: 4 } }}>
    8481            <Typography variant="h4" fontWeight="bold" gutterBottom>Completed Builds</Typography>
    8582            <Typography color="text.secondary" sx={{ mb: 4 }}>
    … …  
    8784            </Typography>
    8885
    89             <Grid container spacing={4}>
    90                 <Grid item xs={12} md={3}>
     86            <Box sx={{ display: 'flex', flexDirection: { xs: 'column', md: 'row' }, gap: 4 }}>
     87
     88                <Box sx={{
     89                    width: { xs: '100%', md: '280px' },
     90                    flexShrink: 0
     91                }}>
    9192                    <Paper variant="outlined" sx={{ p: 3, position: 'sticky', top: 20 }}>
    9293                        <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
    … …  
    127128                        </Button>
    128129                    </Paper>
    129                 </Grid>
    130 
    131                 <Grid item xs={12} md={9}>
    132                     {/* Toolbar */}
     130                </Box>
     131
     132                <Box sx={{ flexGrow: 1 }}>
    133133                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', mb: 3 }}>
    134134                        <Typography fontWeight="bold">{builds.length} Builds Found</Typography>
    … …  
    152152
    153153                    {loading ? (
    154                         <Box sx={{ p: 5, textAlign: 'center' }}>Loading...</Box>
     154                        <Box sx={{ p: 5, textAlign: 'center' }}>
     155                            <CircularProgress />
     156                        </Box>
    155157                    ) : (
    156                         <Grid container spacing={3}>
     158                        <Box
     159                            sx={{
     160                                display: 'grid',
     161                                gridTemplateColumns: {
     162                                    xs: '1fr',
     163                                    sm: 'repeat(2, 1fr)',
     164                                    md: 'repeat(3, 1fr)',
     165                                    lg: 'repeat(4, 1fr)',
     166                                    xl: 'repeat(5, 1fr)'
     167                                },
     168                                gap: 3,
     169                                width: '100%'
     170                            }}
     171                        >
    157172                            {builds.map((build) => (
    158                                 <Grid item xs={12} sm={6} lg={4} key={build.id} sx={{ display: 'flex' }}>
    159                                     <Box sx={{ width: '100%' }}>
    160                                         <BuildCard
    161                                             build={build}
    162                                             onClick={() => setSelectedBuildId(build.id)}
    163                                         />
    164                                     </Box>
    165                                 </Grid>
     173                                <BuildCard
     174                                    key={build.id}
     175                                    build={build}
     176                                    onClick={() => setSelectedBuildId(build.id)}
     177                                />
    166178                            ))}
    167179                            {builds.length === 0 && (
    168                                 <Grid item xs={12}>
    169                                     <Box sx={{ p: 5, textAlign: 'center', bgcolor: '#f5f5f5', borderRadius: 2 }}>
    170                                         <Typography>No builds found matching your filters.</Typography>
    171                                     </Box>
    172                                 </Grid>
     180                                <Box sx={{ gridColumn: '1 / -1', p: 5, textAlign: 'center', bgcolor: '#f5f5f5', borderRadius: 2 }}>
     181                                    <Typography>No builds found matching your filters.</Typography>
     182                                </Box>
    173183                            )}
    174                         </Grid>
     184                        </Box>
    175185                    )}
    176                 </Grid>
    177             </Grid>
    178 
     186                </Box>
     187            </Box>
     188
     189            {/* @ts-ignore */}
    179190            <BuildDetailsDialog
    180191                open={!!selectedBuildId}
    … …  
    186197        </Container>
    187198    );
     199
    188200}
    189 
Note: See TracChangeset for help on using the changeset viewer.