fix;admin

This commit is contained in:
Damien Ostler 2024-06-02 19:26:12 -04:00
parent 168c835a23
commit e48d3ebafb
3 changed files with 46 additions and 56 deletions

View File

View File

@ -67,30 +67,24 @@ function PageComponent() {
]; ];
return ( return (
<div className="w-full h-1/2 text-white flex justify-center items-center animate-in"> <div className="w-full h-1/2 text-white lg:flex justify-center items-center animate-in">
<div className="w-full lg:w-1/3 rounded-md bg-primary opacity-90 p-12 m-1 mt-32 shadow-lg backdrop-blur"> <div className="w-full lg:w-1/3 rounded-md bg-primary opacity-90 p-12 m-1 mt-32 shadow-lg backdrop-blur">
<div className="w-full flex"> <div className="w-full flex">
<input type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className="hover:scale-95 focus:scale-95 mb-8 mr-2 rounded-md bg-secondary p-2 w-1/2 text-white shadow-lg" placeholder="Tag Name" /> <input type="text" onChange={(e)=>{setNewTagName(e.target.value)}} className="hover:scale-105 focus:scale-95 mb-8 mr-2 rounded-md bg-info-bright p-2 w-1/2 text-white shadow-lg" placeholder="Tag Name" />
<button onClick={createTag} className="hover:scale-95 ml-2 shadow-lg w-1/2 h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center"> <button onClick={createTag} className="hover:scale-95 ml-2 shadow-lg w-1/2 h-10 text-center bg-success hover:bg-success-light text-white font-bold rounded flex items-center justify-center">
Create Create New Tag
</button> </button>
</div> </div>
<div className="w-full flex"> <div className="w-full flex">
<input type="text" value={tagSearch} onChange={(e)=>{setTagSearch(e.target.value)}} className="hover:scale-95 focus:scale-95 mb-8 shadow-lg mr-2 rounded-md bg-secondary p-2 w-full text-white" placeholder="Search all tags by name" /> <input type="text" value={tagSearch} onChange={(e)=>{setTagSearch(e.target.value)}} className="hover:scale-105 focus:scale-95 mb-8 shadow-lg mr-2 rounded-md bg-info-bright p-2 w-full text-white" placeholder="Search all tags by name" />
</div> </div>
<div className="w-full h-96 overflow-y-scroll no-scrollbar"> <div className="w-full h-96 overflow-y-scroll no-scrollbar">
<table className="w-full"> <table className="w-full bg-primary-light rounded">
<thead>
<tr>
<th className="px-4 py-2" style={{ width: '90%' }}></th>
<th className="px-4 py-2"></th>
</tr>
</thead>
<tbody> <tbody>
{tags.filter((value,index,array)=>{ {tags.filter((value,index,array)=>{
return value.name.toLowerCase().includes(tagSearch.toLowerCase()); return value.name.toLowerCase().includes(tagSearch.toLowerCase());
}).map((item:any) => ( }).map((item:any) => (
<tr key={item.name} className="hover:bg-secondary-dark animate-in"> <tr key={item.name} className="hover:bg-secondary-dark animate-in shadow">
<td className="px-4 py-2">{item.name}</td> <td className="px-4 py-2">{item.name}</td>
<td className="px-4 py-2"> <td className="px-4 py-2">
<button onClick={()=>{deleteTag(item.name)}} className="hover:scale-95 bg-error shadow-lg hover:bg-error-light text-white font-bold py-2 px-4 rounded float-right"> <button onClick={()=>{deleteTag(item.name)}} className="hover:scale-95 bg-error shadow-lg hover:bg-error-light text-white font-bold py-2 px-4 rounded float-right">
@ -106,44 +100,38 @@ function PageComponent() {
</table> </table>
</div> </div>
</div> </div>
<div className="w-full lg:w-1/2 rounded-md bg-primary opacity-90 backdrop-blur-lg p-12 m-1 mt-32 shadow-lg"> <div className="w-full lg:w-1/2 h-96 rounded-md bg-primary opacity-90 backdrop-blur-lg p-12 m-1 mt-32 shadow-lg">
<div className="w-full flex"> <div className="w-full flex pb-2">
<SearchInput placeholderTags={[ <SearchInput placeholderTags={[
{ value: "tags", label: "❗️ click here to add tags to search" } { value: "tags", label: "❗️ click here to add tags to search" }
]} nsfwButtonEnabled={true} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} /> ]} nsfwButtonEnabled={true} searchChanged={(search) => { setSearchState(search) }} nsfwChanged={(nsfw) => { setNsfwState(nsfw) }} tagsChanged={(tags) => { setTagsState(tags) }} />
<a href="/gallery/admin/create" className="hover:scale-95 ml-2 shadow-lg max-h-14 text-center bg-success hover:bg-success-light text-white w-1/6 font-bold rounded flex items-center justify-center"> <a href="/gallery/admin/create" className="hover:scale-95 ml-2 p-2 shadow-lg h-10 text-center bg-success hover:bg-success-light text-white w-1/6 font-bold rounded flex items-center justify-center">
Create + Gallery
</a> </a>
</div> </div>
<table className="w-full"> <div className="w-full h-64 overflow-y-scroll no-scrollbar">
<thead> <table className="w-full mt-8 bg-primary-light rounded">
<tr> <tbody>
<th className="px-4 py-2" style={{ width: '60%' }}></th> {/* Replace this with your data mapping logic */}
<th className="px-4 py-2" style={{width:"15%"}}></th> {galleries.map((item: { name: string, imageCount: number, tier: string }) => (
<th className="px-4 py-2"></th> <tr key={item.name} className="hover:bg-secondary-dark shadow animate-in">
<th className="px-4 py-2"></th> <td className="px-4 py-2" style={{ width: '65%' }}>{item.name}</td>
</tr> <td className="px-4 py-2">{item.imageCount}</td>
</thead> <td className="px-4 py-2">{item.tier}</td>
<tbody> <td className="px-4 py-2">
{/* Replace this with your data mapping logic */} <button className="bg-secondary hover:scale-95 shadow-lg hover:bg-secondary-light text-white font-bold py-2 px-4 rounded float-right">
{galleries.map((item: { name: string, imageCount: number, tier: string }) => ( <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<tr key={item.name} className="hover:bg-secondary-dark animate-in"> <path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
<td className="px-4 py-2">{item.name}</td> </svg>
<td className="px-4 py-2">{item.imageCount}</td>
<td className="px-4 py-2">{item.tier.replace("Tier","")}</td>
<td className="px-4 py-2">
<button className="bg-secondary hover:scale-95 shadow-lg hover:bg-secondary-light text-white font-bold py-2 px-4 rounded float-right">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" strokeWidth={1.5} stroke="currentColor" className="size-6">
<path strokeLinecap="round" strokeLinejoin="round" d="M19.5 14.25v-2.625a3.375 3.375 0 0 0-3.375-3.375h-1.5A1.125 1.125 0 0 1 13.5 7.125v-1.5a3.375 3.375 0 0 0-3.375-3.375H8.25m5.231 13.481L15 17.25m-4.5-15H5.625c-.621 0-1.125.504-1.125 1.125v16.5c0 .621.504 1.125 1.125 1.125h12.75c.621 0 1.125-.504 1.125-1.125V11.25a9 9 0 0 0-9-9Zm3.75 11.625a2.625 2.625 0 1 1-5.25 0 2.625 2.625 0 0 1 5.25 0Z" />
</svg>
</button> </button>
</td> </td>
</tr> </tr>
))} ))}
</tbody> </tbody>
</table> </table>
</div>
</div> </div>
</div> </div>
); );

View File

@ -57,18 +57,18 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
useEffect(() => { useEffect(() => {
getData(); getData();
}, []); }, []);
const [scrollPosition, setScrollPosition] = useState(0);
const [color, setColor] = useState('black'); const [color, setColor] = useState('black');
useEffect(() => { useEffect(() => {
}, []); }, []);
const tagOptions = tags.map((tag: { name: string; }) => ({ value: tag.name, label: tag.name })); const tagOptions = tags.map((tag: { name: string; }) => ({ value: tag.name, label: tag.name }));
return ( return (
<> <>
<div className={` ${scrollPosition>0 ?? 'opacity-30'} opacity 0 relative w-full flex flex-col items-center justify-center z-10`}> <div className={` opacity 0 relative w-full flex flex-col items-center justify-center z-10`}>
<div className="search-box mx-auto my-auto w-full"> <div className="search-box mx-auto my-auto w-full">
<div className={`${scrollPosition>0 ?? 'opacity-30'} opacityflex flex-row`}> <div className={`flex flex-row`}>
{(selectingTags) ? ( {(selectingTags) ? (
<> <>
@ -84,6 +84,7 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
) )
: ( : (
<> <>
<div className="absolute w-full top-0">
<Select isMultiple isSearchable isClearable searchInputPlaceholder='Start typing to search tags...' <Select isMultiple isSearchable isClearable searchInputPlaceholder='Start typing to search tags...'
options={tagOptions} options={tagOptions}
placeholder="Select tags for your search" placeholder="Select tags for your search"
@ -99,6 +100,9 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
setSelectedTags([value.value]); setSelectedTags([value.value]);
setSelectedTagsInput([value]) setSelectedTagsInput([value])
} }
}}
onSearchInputChange={(value) => {
}} }}
classNames={{ classNames={{
@ -111,21 +115,19 @@ const SearchInput = ({ tagsChanged, searchChanged, nsfwChanged, nsfwButtonEnable
}} }}
formatOptionLabel={data => ( formatOptionLabel={data => (
<li <li id={"tag-" + data.value}
className={`animate-in block transition rounded duration-200 px-2 py-2 cursor-pointer select-none truncate pt-2 ${ className={`animate-in block transition rounded duration-200 px-2 py-2 cursor-pointer select-none truncate pt-2 bg-primarytext-white hover:bg-primary-light
!data.isSelected }`}
? `text-white bg-primary hover:bg-primary-light`
: `bg-primary-light text-white`
}`}
> >
{data.label} {data.label}
</li> </li>
)} )}
value={selectedTagsInput} value={selectedTagsInput}
primaryColor={"indigo"} /> primaryColor={"indigo"} />
</div>
{(nsfwButtonEnabled) ?? ( {(nsfwButtonEnabled==true) ?? (
<span className="flex items-center border-0 font-bold text-grey-100"> <span className="flex items-center border-0 font-bold text-grey-100">
<button <button
onClick={() => { setNsfw(!nsfw) }} onClick={() => { setNsfw(!nsfw) }}
type="button" type="button"