Skip to content

Commit

Permalink
minor changes in twcss in adm pages
Browse files Browse the repository at this point in the history
  • Loading branch information
@AlejandroAlberoni
AlejandroAlberoni committed Oct 21, 2024
1 parent fb377f2 commit 4cb863f
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 72 deletions.
40 changes: 21 additions & 19 deletions app/home/devices/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import { getDevices } from '@/lib/shared_fetchers';
import { Device } from '@/lib/types';
import { useToast } from '@/hooks/use-toast';
import Edit from './edit';
import { dummyDevices } from '@/lib/dummyConstructors';
import RemoveDialog from '@/app/_components/RemoveDialog';
import { Poppins } from 'next/font/google';
import RefreshButton from '@/app/refresh_button';
Expand All @@ -17,7 +16,7 @@ const poppins = Poppins({

export default function DEVICES() {
const { toast } = useToast();
const [devices, setDevices] = useState<Device[] | null>(dummyDevices)
const [devices, setDevices] = useState<Device[] | null>(null)
const pathname = usePathname();
const router = useRouter();

Expand All @@ -44,27 +43,30 @@ export default function DEVICES() {
</button>*/}
</div>

<div className='flex flex-col md:grid md:grid-cols-3'>
<div className='flex justify-center mt-10'>
{
devices == null ? (
devices == null ?
<div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role='alert'>
No devices found
</div>
) : (
devices.map((value) => (
<div className='relative flex flex-col bg-white text-black font-montserrat border border-gray-300 rounded-md px-4 py-2 m-2 transition duration-500 ease select-none focus:outline-none focus:shadow-outline' key={value.id}>
<div className='font-bold'>{value.serial_number}</div>
<p>{value.model} - ID: {value.location_id}</p>
<div className='grid md:flex md:flex-row space-y-2 md:space-y-0 md:space-x-4 m-3'>
<RemoveDialog applyWhenRemove={() => removeDevice(value.id)}
trigger='Remover Dispositivo'
title='Remover Dispositivo'
description='Este processo é irreversível, tem certeza que deseja remover o dispositivo?' />
<Edit device={value} />
</div>
</div>
))
)
:
<div className='grid md:grid md:grid-cols-2 lg:grid-cols-4 mx-10 md:mx-32'>
{
devices.map((value) => (
<div className='relative flex flex-col bg-white text-black font-montserrat border border-gray-300 rounded-md px-4 py-2 m-2 transition duration-500 ease select-none focus:outline-none focus:shadow-outline' key={value.id}>
<div className='font-bold'>{value.serial_number}</div>
<p>{value.model} - ID: {value.location_id}</p>
<div className='grid space-y-2 m-3'>
<RemoveDialog applyWhenRemove={() => removeDevice(value.id)}
trigger='Remover Dispositivo'
title='Remover Dispositivo'
description='Este processo é irreversível, tem certeza que deseja remover o dispositivo?' />
<Edit device={value} />
</div>
</div>
))
}
</div>
}
</div>
</div>
Expand Down
6 changes: 3 additions & 3 deletions app/home/locations/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ import RemoveDialog from '@/app/_components/RemoveDialog';

const Locations = () => {
const { toast } = useToast();
const [locations, setLocations] = useState<Location[] | null>(dummyLocations);
const [locations, setLocations] = useState<Location[] | null>(null);

const removeLocation = async (id: number) => {
try {
Expand Down Expand Up @@ -46,7 +46,7 @@ const Locations = () => {
}
</div>

<div className='flex justify-center'>
<div className='flex justify-center mt-10'>
{locations == null ?
<div className="mt-40 bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role='alert'>
No locations found
Expand All @@ -58,7 +58,7 @@ const Locations = () => {
<p>ID: {location.id}</p>
<p>Building: {location.building}</p>
<p>Room: {location.room}</p>
<div className='grid md:flex md:flex-row space-y-2 md:space-y-0 md:space-x-4 m-3'>
<div className='grid lg:flex space-y-2 lg:space-y-0 lg:space-x-4 m-3'>
<RemoveDialog applyWhenRemove={() => removeLocation(location.id)}
trigger='Remover Local'
title='Remover Local'
Expand Down
101 changes: 51 additions & 50 deletions app/home/metric_types/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import api from '@/app/api';
import { fetchMetricTypes } from '@/lib/shared_fetchers';
import { Metric } from '@/lib/types';
import { useToast } from '@/hooks/use-toast';
import { dummyMetrics } from '@/lib/dummyConstructors';
import Edit from './edit';
import RemoveDialog from '@/app/_components/RemoveDialog';

Expand All @@ -17,7 +16,7 @@ const poppins = Poppins({

const MetricTypes = () => {
const { toast } = useToast();
const [metricTypes, setMetricTypes] = useState<Metric[] | null>(dummyMetrics);
const [metricTypes, setMetricTypes] = useState<Metric[] | null>(null);
const pathname = usePathname();
const router = useRouter();

Expand All @@ -33,9 +32,9 @@ const MetricTypes = () => {
}
};

//useEffect(() => {
// fetchMetricTypes().then(data => setMetricTypes(data));
//}, []);
useEffect(() => {
fetchMetricTypes().then(data => setMetricTypes(data));
}, []);

return (
<div className='relative flex flex-col'>
Expand All @@ -45,53 +44,55 @@ const MetricTypes = () => {
<p className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded">ADD METRIC TYPE</p>
</button>

{metricTypes == null ?
<div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role='alert'>
No metrics found
</div> :
<div className="relative overflow-x-auto rounded">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xl text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
ID
</th>
<th scope="col" className="px-6 py-3">
Metric
</th>
<th scope="col" className="px-6 py-3">
Description
</th>
<th scope="col" className="px-6 py-3">
Actions
</th>
</tr>
</thead>
<tbody>
{metricTypes.map((metricType: Metric, index: number) => (
<tr key={index} className="text-center bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{metricType.id}
<div className='flex justify-center mt-10'>
{metricTypes == null ?
<div className="bg-yellow-100 border-l-4 border-yellow-500 text-yellow-700 p-4" role='alert'>
No metrics found
</div> :
<div className="relative overflow-x-auto rounded">
<table className="w-full text-sm text-left rtl:text-right text-gray-500 dark:text-gray-400">
<thead className="text-xl text-gray-700 uppercase bg-gray-50 dark:bg-gray-700 dark:text-gray-400">
<tr>
<th scope="col" className="px-6 py-3">
ID
</th>
<th scope="col" className="px-6 py-3">
Metric
</th>
<th scope="col" className="px-6 py-3">
Description
</th>
<th scope="col" className="px-6 py-3">
Actions
</th>
<td className="px-6 py-4">
{metricType.name}
</td>
<td className="px-6 py-4">
{metricType.description}
</td>
<td className="px-6 py-4 grid md:flex space-y-1 md:space-y-0 space-x-0 md:space-x-2">
<RemoveDialog applyWhenRemove={() => removeMetricType(metricType.id)}
trigger='Remover'
title='Remover métrica'
description='Este processo é irreversível, tem certeza que deseja remover este tipo de métrica?' />
<Edit metricType={metricType} />
</td>
</tr>
))}
</tbody>
</table>
</div>
}
</thead>
<tbody>
{metricTypes.map((metricType: Metric, index: number) => (
<tr key={index} className="text-center bg-white border-b dark:bg-gray-800 dark:border-gray-700">
<th scope="row" className="px-6 py-4 font-medium text-gray-900 whitespace-nowrap dark:text-white">
{metricType.id}
</th>
<td className="px-6 py-4">
{metricType.name}
</td>
<td className="px-6 py-4">
{metricType.description}
</td>
<td className="px-6 py-4 grid lg:flex space-y-1 lg:space-y-0 space-x-0 lg:space-x-2">
<RemoveDialog applyWhenRemove={() => removeMetricType(metricType.id)}
trigger='Remover'
title='Remover métrica'
description='Este processo é irreversível, tem certeza que deseja remover este tipo de métrica?' />
<Edit metricType={metricType} />
</td>
</tr>
))}
</tbody>
</table>
</div>
}
</div>
</div>
);
};
Expand Down

0 comments on commit 4cb863f

Please sign in to comment.