diff --git a/app/admin/coin/add-images/page.tsx b/app/admin/coin/add-images/page.tsx index 89aaf2a..0268798 100644 --- a/app/admin/coin/add-images/page.tsx +++ b/app/admin/coin/add-images/page.tsx @@ -9,223 +9,207 @@ import allImages from './images.json'; import { Prisma } from '@prisma/client'; interface EventTarget { - id: any; - appendChild: any; + id: any; + appendChild: any; } export default function page() { - const [loading, setLoading] = useState(true); - const [coins, setCoins] = useState([]); - const [images, setImages] = useState<{ url: string }[]>([]); - - useEffect(() => { - getCoinsWithoutImages() - .then((res) => { - setCoins(res); - setLoading(false); - }) - .catch((e) => {}); - getImagesNames() - .then((res) => { - res.sort((a: any, b: any) => (a < b ? 0 : 1)); - setImages(res); - }) - .catch((e) => {}); - }, []); - - const filterImages = ( - imagesAlreadyUsed: { url: string }[], - imagePool: string[], - ) => { - let hold = imagePool.filter((r) => !r.endsWith('.mov')); - const imagesNamesAlreadyUsed = imagesAlreadyUsed.map((r) => r.url); - imagesNamesAlreadyUsed.forEach((image) => { - const locatedAt = hold.indexOf(image); - if (locatedAt > -1) { - hold.splice(locatedAt, 1); - } - }); - return hold; - }; - - const filteredImages = filterImages(images, allImages); - - const saveImageToCoinRecord = async (payload: any) => { - addImageToCoin(payload) - .then((res) => { - document.getElementById('image-div-' + payload.url)?.remove(); - }) - .catch((e) => { - if (e instanceof Prisma.PrismaClientKnownRequestError) { - const target = e.meta?.target; - // The .code property can be accessed in a type-safe manner - if (e.code === 'P2002') { - console.log( - `There is a unique constraint violation, a new coin cannot be created in field ${target}.`, - ); - } - } - throw e; - }); - }; - - async function getCoinsWithoutImages() { - const endpoint = `${ - appconfig.envs[process.env.NODE_ENV].clientBaseUrl - }/api/coins/withoutimages`; - try { - const res = await fetch(endpoint); - return res.json(); - } catch (error) { - return []; + const [loading, setLoading] = useState(true); + const [coins, setCoins] = useState([]); + const [images, setImages] = useState<{ url: string }[]>([]); + + useEffect(() => { + getCoinsWithoutImages() + .then((res) => { + setCoins(res); + setLoading(false); + }) + .catch((e) => {}); + getImagesNames() + .then((res) => { + res.sort((a: any, b: any) => (a < b ? 0 : 1)); + setImages(res); + }) + .catch((e) => {}); + }, []); + + const filterImages = (imagesAlreadyUsed: { url: string }[], imagePool: string[]) => { + let hold = imagePool.filter((r) => !r.endsWith('.mov')); + const imagesNamesAlreadyUsed = imagesAlreadyUsed.map((r) => r.url); + imagesNamesAlreadyUsed.forEach((image) => { + const locatedAt = hold.indexOf(image); + if (locatedAt > -1) { + hold.splice(locatedAt, 1); + } + }); + return hold; + }; + + const filteredImages = filterImages(images, allImages); + + const saveImageToCoinRecord = async (payload: any) => { + addImageToCoin(payload) + .then((res) => { + document.getElementById('image-div-' + payload.url)?.remove(); + }) + .catch((e) => { + if (e instanceof Prisma.PrismaClientKnownRequestError) { + const target = e.meta?.target; + // The .code property can be accessed in a type-safe manner + if (e.code === 'P2002') { + console.log(`There is a unique constraint violation, a new coin cannot be created in field ${target}.`); + } } + throw e; + }); + }; + + async function getCoinsWithoutImages() { + const endpoint = `${appconfig.envs[process.env.NODE_ENV].clientBaseUrl}/api/coins/withoutimages`; + try { + const res = await fetch(endpoint); + return res.json(); + } catch (error) { + return []; } - - async function getImagesNames() { - const endpoint = `${ - appconfig.envs[process.env.NODE_ENV].clientBaseUrl - }/api/images/namesonly`; - try { - const res = await fetch(endpoint); - return res.json(); - } catch (error) { - return []; - } + } + + async function getImagesNames() { + const endpoint = `${appconfig.envs[process.env.NODE_ENV].clientBaseUrl}/api/images/namesonly`; + try { + const res = await fetch(endpoint); + return res.json(); + } catch (error) { + return []; } + } - const allowDrop = (e: any) => e.preventDefault(); + const allowDrop = (e: any) => e.preventDefault(); - const drag = (e: React.DragEvent) => { - const eventTarget: EventTarget = e.target as unknown as EventTarget; - e.dataTransfer?.setData('text', eventTarget.id); - }; + const drag = (e: React.DragEvent) => { + const eventTarget: EventTarget = e.target as unknown as EventTarget; + e.dataTransfer?.setData('text', eventTarget.id); + }; - const drop = (e: React.DragEvent) => { - e.preventDefault(); + const drop = (e: React.DragEvent) => { + e.preventDefault(); - const eventTarget: EventTarget = e.target as unknown as EventTarget; + const eventTarget: EventTarget = e.target as unknown as EventTarget; - const coinId = eventTarget.id.split('-').at(-1); - const preferred = - eventTarget.id.split('-').at(-2) === 'PREFERRED' ? true : false; - const data = e.dataTransfer?.getData('text'); + const coinId = eventTarget.id.split('-').at(-1); + const preferred = eventTarget.id.split('-').at(-2) === 'PREFERRED' ? true : false; + const data = e.dataTransfer?.getData('text'); - if (coinId && data) { - eventTarget.appendChild(document.getElementById(data)); - saveImageToCoinRecord({ - coin_id: +coinId, - url: data, - is_preferred: preferred, - }); - } else { - throw new Error('coinId or data is null'); - } - }; - - return ( - <> - - - - <<< Go Back - - - Add Images to Coins - - - - - - {filteredImages.length > 0 && - filteredImages.map((name) => ( -
- drag(e)} - id={name} - /> -
- ))} -
- - {loading &&
Loading...
} - {!loading && images && coins.length === 0 && ( -
No coins
- )} - {coins.length > 0 && - coins.map((coin) => ( -
-
- {coin.country_name} -
- {coin.common_name}, {coin.year_start}- - {coin.year_end} ({coin.pretty_face_value}) - (# - {coin.id}) -
-
drop(e)} - onDragOver={(e) => allowDrop(e)} - > - PREFERRED -
-
drop(e)} - onDragOver={(e) => allowDrop(e)} - > - NOT PREFERRED -
-
- ))} -
-
- - ); + if (coinId && data) { + eventTarget.appendChild(document.getElementById(data)); + saveImageToCoinRecord({ + coin_id: +coinId, + url: data, + is_preferred: preferred, + }); + } else { + throw new Error('coinId or data is null'); + } + }; + + return ( + <> + + + + <<< Go Back + + + Add Images to Coins + + + + + + {filteredImages.length > 0 && + filteredImages.map((name) => ( +
+ drag(e)} + id={name} + /> +
+ ))} +
+ + {loading &&
Loading...
} + {!loading && images && coins.length === 0 &&
No coins
} + {coins.length > 0 && + coins.map((coin) => ( +
+
+ {coin.country_name} +
+ {coin.common_name}, {coin.year_start}-{coin.year_end} ({coin.pretty_face_value}) (# + {coin.id}) +
+
drop(e)} + onDragOver={(e) => allowDrop(e)} + > + PREFERRED +
+
drop(e)} + onDragOver={(e) => allowDrop(e)} + > + NOT PREFERRED +
+
+ ))} +
+
+ + ); } diff --git a/app/admin/coin/view/page.tsx b/app/admin/coin/view/page.tsx index 50eb187..fdffa6a 100644 --- a/app/admin/coin/view/page.tsx +++ b/app/admin/coin/view/page.tsx @@ -1,39 +1,38 @@ import { getCountryList } from '@/http/country'; import { - Container, - Box, - Typography, - Link, - Paper, - Table, - TableBody, - TableCell, - TableContainer, - TableRow, - TableHead, + Container, + Box, + Typography, + Link, + Paper, + Table, + TableBody, + TableCell, + TableContainer, + TableRow, + TableHead, } from '@mui/material'; import { coin as CoinType } from '@prisma/client'; import moment from 'moment'; import React from 'react'; export default async function page() { - return ( - - - - <<< Go Back - - - Coin List - - - Create new Coin - {' '} - - To view coin details, go to the{' '} - Coins page. - - - - ); + return ( + + + + <<< Go Back + + + Coin List + + + Create new Coin + {' '} + + To view coin details, go to the Coins page. + + + + ); }