Add authentication #17
3 changed files with 75 additions and 103 deletions
23
src/components/store/DefaultStoreView.astro
Normal file
23
src/components/store/DefaultStoreView.astro
Normal file
|
|
@ -0,0 +1,23 @@
|
||||||
|
<div id="storeItemsGrid" class="h-full">
|
||||||
|
<div
|
||||||
|
class="card bg-base-200 shadow-xl h-full flex items-center justify-center min-h-[400px]"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="card-body flex flex-col items-center justify-center h-full w-full max-w-2xl mx-auto"
|
||||||
|
>
|
||||||
|
<div class="text-center w-full">
|
||||||
|
<h2 class="card-title text-3xl justify-center mb-6">
|
||||||
|
Store Coming Soon!
|
||||||
|
</h2>
|
||||||
|
<div class="space-y-4">
|
||||||
|
<p class="text-base-content/70 text-lg">
|
||||||
|
Our store is currently under development. Check back
|
||||||
|
later for IEEE UCSD merchandise! In the meantime, please
|
||||||
|
make sure your profile is up to date with your IEEE
|
||||||
|
Member ID and resume.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
48
src/components/store/OfficerStoreView.astro
Normal file
48
src/components/store/OfficerStoreView.astro
Normal file
|
|
@ -0,0 +1,48 @@
|
||||||
|
---
|
||||||
|
import MemberManagement from "./MemberManagement.astro";
|
||||||
|
import EventManagement from "./EventManagement.astro";
|
||||||
|
---
|
||||||
|
|
||||||
|
<div id="officerContent" class="hidden">
|
||||||
|
<div class="tabs tabs-boxed mb-6">
|
||||||
|
<button class="tab tab-active" data-tab="members"
|
||||||
|
>Member Management</button
|
||||||
|
>
|
||||||
|
<button class="tab" data-tab="events">Event Management</button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="tab-contents">
|
||||||
|
<div id="membersTab" style="display: block;">
|
||||||
|
<MemberManagement />
|
||||||
|
</div>
|
||||||
|
<div id="eventsTab" style="display: none;">
|
||||||
|
<EventManagement />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const tabs = document.querySelectorAll("[data-tab]");
|
||||||
|
const membersTab = document.getElementById("membersTab");
|
||||||
|
const eventsTab = document.getElementById("eventsTab");
|
||||||
|
|
||||||
|
if (tabs && membersTab && eventsTab) {
|
||||||
|
tabs.forEach((tab) => {
|
||||||
|
tab.addEventListener("click", () => {
|
||||||
|
// Update tab styles
|
||||||
|
tabs.forEach((t) => t.classList.remove("tab-active"));
|
||||||
|
tab.classList.add("tab-active");
|
||||||
|
|
||||||
|
// Update content visibility
|
||||||
|
const tabId = (tab as HTMLElement).dataset.tab;
|
||||||
|
if (tabId === "members") {
|
||||||
|
membersTab.style.display = "block";
|
||||||
|
eventsTab.style.display = "none";
|
||||||
|
} else {
|
||||||
|
membersTab.style.display = "none";
|
||||||
|
eventsTab.style.display = "block";
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
@ -1,7 +1,8 @@
|
||||||
---
|
---
|
||||||
import Layout from "../layouts/Layout.astro";
|
import Layout from "../layouts/Layout.astro";
|
||||||
import UserProfile from "../components/auth/UserProfile.astro";
|
import UserProfile from "../components/auth/UserProfile.astro";
|
||||||
import StoreItem from "../components/store/StoreItem.astro";
|
import DefaultStoreView from "../components/store/DefaultStoreView.astro";
|
||||||
|
import OfficerStoreView from "../components/store/OfficerStoreView.astro";
|
||||||
const title = "IEEE Store";
|
const title = "IEEE Store";
|
||||||
---
|
---
|
||||||
|
|
||||||
|
|
@ -16,108 +17,8 @@ const title = "IEEE Store";
|
||||||
|
|
||||||
<!-- Right Column - Store Items -->
|
<!-- Right Column - Store Items -->
|
||||||
<div id="storeContent" class="lg:col-span-2 2xl:col-span-3">
|
<div id="storeContent" class="lg:col-span-2 2xl:col-span-3">
|
||||||
<div id="storeItemsGrid" class="h-full">
|
<DefaultStoreView />
|
||||||
<div
|
<OfficerStoreView />
|
||||||
class="card bg-base-200 shadow-xl h-full flex items-center justify-center min-h-[400px]"
|
|
||||||
>
|
|
||||||
<div
|
|
||||||
class="card-body flex flex-col items-center justify-center h-full w-full max-w-2xl mx-auto"
|
|
||||||
>
|
|
||||||
<div class="text-center w-full">
|
|
||||||
<h2
|
|
||||||
class="card-title text-3xl justify-center mb-6"
|
|
||||||
>
|
|
||||||
Store Coming Soon!
|
|
||||||
</h2>
|
|
||||||
<div class="space-y-4">
|
|
||||||
<p class="text-base-content/70 text-lg">
|
|
||||||
Our store is currently under
|
|
||||||
development. Check back later for IEEE
|
|
||||||
UCSD merchandise! In the meantime,
|
|
||||||
please make sure your profile is up to
|
|
||||||
date with your IEEE Member ID and
|
|
||||||
resume.
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<!-- Officer View Content -->
|
|
||||||
<div id="officerContent" class="hidden">
|
|
||||||
<div
|
|
||||||
class="flex flex-col lg:flex-row lg:items-center lg:justify-between gap-4 lg:gap-0 mb-4"
|
|
||||||
>
|
|
||||||
<h2 class="text-2xl font-bold">Member Management</h2>
|
|
||||||
<div class="flex flex-col lg:flex-row gap-2">
|
|
||||||
<div class="form-control w-full">
|
|
||||||
<input
|
|
||||||
type="text"
|
|
||||||
id="resumeSearch"
|
|
||||||
placeholder="Search users..."
|
|
||||||
class="input input-bordered input-sm w-full"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class="flex gap-2 w-full lg:w-auto">
|
|
||||||
<button
|
|
||||||
id="searchResumes"
|
|
||||||
class="btn btn-sm flex-1 lg:flex-none"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class="h-4 w-4"
|
|
||||||
fill="none"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
stroke="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
stroke-linecap="round"
|
|
||||||
stroke-linejoin="round"
|
|
||||||
stroke-width="2"
|
|
||||||
d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"
|
|
||||||
></path>
|
|
||||||
</svg>
|
|
||||||
<span class="lg:hidden ml-2">Search</span>
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
id="refreshResumes"
|
|
||||||
class="btn btn-ghost btn-sm flex-1 lg:flex-none"
|
|
||||||
>
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
class="h-5 w-5"
|
|
||||||
viewBox="0 0 20 20"
|
|
||||||
fill="currentColor"
|
|
||||||
>
|
|
||||||
<path
|
|
||||||
fill-rule="evenodd"
|
|
||||||
d="M4 2a1 1 0 011 1v2.101a7.002 7.002 0 0111.601 2.566 1 1 0 11-1.885.666A5.002 5.002 0 005.999 7H9a1 1 0 010 2H4a1 1 0 01-1-1V3a1 1 0 011-1zm.008 9.057a1 1 0 011.276.61A5.002 5.002 0 0014.001 13H11a1 1 0 110-2h5a1 1 0 011 1v5a1 1 0 11-2 0v-2.101a7.002 7.002 0 01-11.601-2.566 1 1 0 01.61-1.276z"
|
|
||||||
clip-rule="evenodd"></path>
|
|
||||||
</svg>
|
|
||||||
<span class="lg:hidden ml-2">Refresh</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="overflow-x-auto">
|
|
||||||
<table class="table table-zebra w-full">
|
|
||||||
<!-- Use responsive classes -->
|
|
||||||
<thead class="hidden lg:table-header-group">
|
|
||||||
<tr>
|
|
||||||
<th>Name</th>
|
|
||||||
<th>Email</th>
|
|
||||||
<th>Member ID</th>
|
|
||||||
<th>Points</th>
|
|
||||||
<th>Resume</th>
|
|
||||||
<th>Actions</th>
|
|
||||||
</tr>
|
|
||||||
</thead>
|
|
||||||
<tbody id="resumeList" class="divide-y">
|
|
||||||
<!-- Resume entries will be populated here -->
|
|
||||||
</tbody>
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</main>
|
</main>
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue