Skip to content

Commit ec3f37f

Browse files
SilentJungle399heydoyouknowme0
SilentJungle399
authored and
heydoyouknowme0
committed
added edit buttons
1 parent a3ef474 commit ec3f37f

File tree

2 files changed

+154
-55
lines changed

2 files changed

+154
-55
lines changed

‎app/[locale]/faculty-and-staff/[id]/FacultyDetails.tsx‎

Lines changed: 130 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,14 @@
11
'use client';
22

3-
import { useState } from 'react';
3+
import React, { useState } from 'react';
44
import { FaBook, FaFlask } from 'react-icons/fa';
55
import {
66
MdApproval,
77
MdEmojiEvents,
88
MdGroups,
9+
MdOutlineAdd,
10+
MdOutlineArrowBack,
11+
MdOutlineEdit,
912
MdSchool,
1013
MdWork,
1114
} from 'react-icons/md';
@@ -62,13 +65,55 @@ const profileTabs = [
6265
{
6366
label: 'Publications',
6467
icon: MdApproval,
68+
filter: true,
6569
items: [
6670
{
6771
name: 'Sustainable finishes in textiles, Conference Proceedings',
6872
value:
6973
'International E-Conference on Sustainable Growth in Textiles (SGT-2021), Uttar Pradesh Textile Technology Institute, Kanpur',
7074
caption: 'RK Chhabra, Aakanksha Singh and J N Chakraborty',
7175
year: 'August 2023',
76+
tag: 'Conference',
77+
},
78+
{
79+
name: 'Sustainable finishes in textiles, Conference Proceedings',
80+
value:
81+
'International E-Conference on Sustainable Growth in Textiles (SGT-2021), Uttar Pradesh Textile Technology Institute, Kanpur',
82+
caption: 'RK Chhabra, Aakanksha Singh and J N Chakraborty',
83+
year: 'August 2023',
84+
tag: 'Conference',
85+
},
86+
{
87+
name: 'Sustainable finishes in textiles, Conference Proceedings',
88+
value:
89+
'International E-Conference on Sustainable Growth in Textiles (SGT-2021), Uttar Pradesh Textile Technology Institute, Kanpur',
90+
caption: 'RK Chhabra, Aakanksha Singh and J N Chakraborty',
91+
year: 'August 2023',
92+
tag: 'Journal',
93+
},
94+
{
95+
name: 'Sustainable finishes in textiles, Conference Proceedings',
96+
value:
97+
'International E-Conference on Sustainable Growth in Textiles (SGT-2021), Uttar Pradesh Textile Technology Institute, Kanpur',
98+
caption: 'RK Chhabra, Aakanksha Singh and J N Chakraborty',
99+
year: 'August 2023',
100+
tag: 'Journal',
101+
},
102+
{
103+
name: 'Sustainable finishes in textiles, Conference Proceedings',
104+
value:
105+
'International E-Conference on Sustainable Growth in Textiles (SGT-2021), Uttar Pradesh Textile Technology Institute, Kanpur',
106+
caption: 'RK Chhabra, Aakanksha Singh and J N Chakraborty',
107+
year: 'August 2023',
108+
tag: 'Book/Chapter',
109+
},
110+
{
111+
name: 'Sustainable finishes in textiles, Conference Proceedings',
112+
value:
113+
'International E-Conference on Sustainable Growth in Textiles (SGT-2021), Uttar Pradesh Textile Technology Institute, Kanpur',
114+
caption: 'RK Chhabra, Aakanksha Singh and J N Chakraborty',
115+
year: 'August 2023',
116+
tag: 'Book/Chapter',
72117
},
73118
],
74119
},
@@ -99,16 +144,29 @@ const profileTabs = [
99144
},
100145
];
101146

102-
export default function FacultyDetails() {
147+
export default function FacultyDetails({ isUser }: { isUser: boolean }) {
103148
const [currentTab, setCurrentTab] = useState(0);
149+
const [currentFilter, setCurrentFilter] = useState(0);
150+
const [editActive, setEditActive] = useState(false);
151+
152+
const tags = profileTabs[currentTab].filter
153+
? [
154+
...new Set(
155+
profileTabs[currentTab].items.map((item) =>
156+
'tag' in item ? item.tag : null
157+
)
158+
),
159+
]
160+
: [];
161+
104162
return (
105163
<section className="mt-[32px] flex w-full gap-[36px]">
106164
<nav className="flex w-[491px] flex-col gap-[24px]">
107165
{profileTabs.map((tab) => (
108166
<button
109167
key={tab.label}
110168
className={
111-
'h-[84px] w-[491px] rounded-2xl border-[1px] border-primary-700 px-[36px] py-[24px] text-left text-xl font-bold hover:bg-primary-700 hover:text-shade-light hover:drop-shadow-2xl ' +
169+
'h-[84px] w-[491px] rounded-2xl border-[1px] border-primary-700 px-[36px] py-[24px] text-left text-xl font-bold transition-colors hover:bg-primary-700 hover:text-shade-light hover:drop-shadow-2xl ' +
112170
(currentTab === profileTabs.indexOf(tab)
113171
? 'bg-primary-700 text-shade-light'
114172
: 'bg-shade-light text-primary-700')
@@ -120,17 +178,78 @@ export default function FacultyDetails() {
120178
</button>
121179
))}
122180
</nav>
123-
<div className="flex h-[732px] grow flex-col gap-[24px] rounded-2xl bg-shade-light p-[24px] drop-shadow-[0_4px_24px_rgba(0,43,1,0.1)]">
124-
<header className="flex w-full">
125-
<h4 className="text-primary-700">{profileTabs[currentTab].label}</h4>
126-
{/* TODO: edit button */}
181+
<div
182+
className={
183+
'flex h-[732px] grow flex-col gap-[24px] rounded-2xl border-[1px] py-[24px] drop-shadow-[0_4px_24px_rgba(0,43,1,0.1)] transition-colors ' +
184+
(editActive
185+
? 'border-primary-700 bg-neutral-100'
186+
: 'border-shade-light bg-shade-light')
187+
}
188+
>
189+
<header className="mx-[24px] flex">
190+
{editActive && (
191+
<MdOutlineArrowBack
192+
size={36}
193+
onClick={() => setEditActive(false)}
194+
className="my-auto mr-[16px] cursor-pointer text-primary-700"
195+
/>
196+
)}
197+
<h4 className="my-auto text-primary-700">
198+
{editActive ? 'Edit ' : ''}
199+
{profileTabs[currentTab].label}
200+
</h4>
201+
{profileTabs[currentTab].filter && (
202+
<ul className="ml-[20px] mr-auto flex gap-[20px] ">
203+
{tags.map((tag, index) => (
204+
<li
205+
key={index}
206+
value={index + 1}
207+
className={
208+
'my-auto cursor-pointer select-none rounded-s border-[1px] border-primary-700 px-[8px] py-[2px] text-primary-700 transition-colors hover:bg-primary-700 hover:text-shade-light ' +
209+
(currentFilter === tags.indexOf(tag)
210+
? 'bg-primary-700 text-shade-light'
211+
: 'bg-shade-light text-primary-700')
212+
}
213+
onClick={() =>
214+
currentFilter !== index
215+
? setCurrentFilter(index)
216+
: setCurrentFilter(0)
217+
}
218+
>
219+
<h5>{tag}</h5>
220+
</li>
221+
))}
222+
</ul>
223+
)}
224+
{isUser && (
225+
<button
226+
className="ml-auto flex gap-2 rounded-s bg-primary-500 px-3 py-2 text-lg font-medium text-shade-light"
227+
onClick={() => setEditActive(true)}
228+
>
229+
{editActive ? (
230+
<>
231+
<MdOutlineAdd size={15} className="my-auto" /> Add
232+
</>
233+
) : (
234+
<>
235+
<MdOutlineEdit size={15} className="my-auto" /> Edit
236+
</>
237+
)}
238+
</button>
239+
)}
127240
</header>
128-
<article className="mb-[12px] mr-[8px] flex h-full w-full flex-col gap-[12px] overflow-auto">
129-
{profileTabs[currentTab].items.map((item) => (
241+
<article className="mb-[12px] flex h-full flex-col gap-[12px] overflow-auto">
242+
{profileTabs[currentTab].items.map((item, index) => (
130243
<p
131-
key={item.name}
132-
className="flex w-full flex-col gap-3 rounded-xl px-6 py-[20px] shadow-[0px_4px_12px_0px_rgba(0,15,31,0.1)]"
244+
key={index}
245+
className="relative ml-[24px] mr-[32px] flex flex-col gap-3 rounded-xl bg-shade-light px-6 py-[20px] shadow-[0px_4px_12px_0px_rgba(0,15,31,0.1)]"
133246
>
247+
{editActive && (
248+
<MdOutlineEdit
249+
size={28}
250+
className="absolute right-[16px] top-[16px] cursor-pointer text-primary-700"
251+
/>
252+
)}
134253
<span className="text-[24px] font-bold">{item.name}</span>
135254
<span className="text-[20px]">{item.value}</span>
136255
<span className="text-[20px] text-neutral-600">

‎app/[locale]/faculty-and-staff/[id]/page.tsx‎

Lines changed: 24 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -1,48 +1,42 @@
11
import Image from 'next/image';
22
import { MdCall, MdLocationOn, MdMail } from 'react-icons/md';
33

4+
import { getServerAuthSession } from '~/server/auth';
45
import { db } from '~/server/db';
56
import FacultyDetails from '~/app/faculty-and-staff/[id]/FacultyDetails';
67

7-
// const links = [
8-
// {
9-
// label: 'Orcid',
10-
// key: 'orchidId',
11-
// icon: 'https://s3-alpha-sig.figma.com/img/0ab9/59eb/c304c62d34d04a10f6991109c72293f4?Expires=1711324800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=p6JEqMnVsduZRxM8RrsbaPiGaoSKR9SzJO5QYw0VDPKtb1TqpcfmKH9I352xEWON1~fBa3LiwiAM6V7MPqgS1eelpfyAv-3xzQUDX9-j5eLNrpzeM5nyuvRgKf2HCaNA4TECT~NHSXFxOW7AKObnK4M6Osf9Hrqa7VdB36GqSJTE7JvwhChpQbYpvVXTpPYoj5v2w-S~sEndvJ4asS7JzkzHOK~ZE9sR~d4rjE4A-TzE16XwER2h25~QE2IDUyrGJWEu6xCvcuDBmVmxRcEBYLLyW0rL6hvu~-h-NzTq1SvKW0IlhYN4nHvyK-swD6tvGhoD20by-ogQgtVQPHSf7g__',
12-
// },
13-
// {
14-
// label: 'Scopus',
15-
// key: 'scopusId',
16-
// icon: 'https://s3-alpha-sig.figma.com/img/f44b/3bce/37313ee76c9eeec08beaeb92930357f4?Expires=1711324800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=HoBJGbiTS5JZcm5ft9TKJsxJ8e6mWaIbyL8N-HOqmEIGYIXdS6T7dCN8B0ioVbtF819FRVVbhRylTqF2pLMT~saJAL1MyxjailyWaUNsUE4nKnUFBJqk0FBMCnVLgHGs0tOmCcTy4bePWGhfsrM9Y6Bu5d4eO9kCtF0ILhgNMcz49vEmH~PIo8UeuCygOuyTCqvNrh55RR4eIo5SyxvnOLf~b26ic12D2J8S1M5t99GgrYz5uvuOahQyJoe0sOscZsllorFfUK24WR3zjqnoPIsHghHby2in6rih3T~B5oRJ6P0taE20tUGvBsfWehcytHYtDwZWe7ZqvSegQqWznA__',
17-
// },
18-
// {
19-
// label: 'Researcher',
20-
// key: 'https://example.com', // TODO: MISSING KEY
21-
// icon: 'https://s3-alpha-sig.figma.com/img/e147/ab0d/df58eb4356e6fb4109df5ef56a0881ad?Expires=1711324800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=mPymNI0q6kZ76f~idJJqCwljr2LaGDyvkUBg1SBsR~RmDqN8MMM3P9BS73kOZRWbWNq6MJRtGSFkOtTNcg7URc7bXqF6erlflgx~3C7EqLth9cjVjQwHotnHuxNkci40SngwOk6uG59q-Y2pVPzqt0-d1c6-JMsO112eF2K5ITVa04EXfce4qa~Gvc70rU250-ShC6ChGY8wH5kXlrBIRAXII-uVDNZGQV9J78npn38rrRypEPhWSXTG6bzykto3XaST167HwKNKVWStc7qBz4GW5m1fZIpNxlusPzIn~hdoH53qIsFkR62Ja3oxx~t7oBcEIQt0E9-8qQDxU4~Nww__',
22-
// },
23-
// {
24-
// label: 'Google Scholar',
25-
// key: 'googleScholarId',
26-
// icon: 'https://s3-alpha-sig.figma.com/img/5cb9/0da4/d31488e3f5b9de23851e5f31dfa4e4c9?Expires=1711324800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=LuUBvaONms9q8a8oaVqL-MYdTP4ITd74MRzTEEVS2yc4GRTDmUpvcuMDiKzlnhI3h22fsOMNi1186k8sjtkc2M1g6~PY7w3GbP7w077DRiQOKDFbcjvTVC2zRTvoap8ahJmJkJaS5qCad0Z6ehtwjH-oL-33EBcBDvmBkWHeBox8dsEczW7aPod373lmMXEsj2u1ag6~knYG3QiXLW18O-aR~TNrhIg8SWFn-Zx2vc9i71bODYn9FAIfQo0w3iMUnH3wDPNsrP84kpBmIjzPaDPo1Oz~PJ~n~LBBz-85bDYsJFHKN4GM~8Ez2q4mLqZBOLicuJuyuUUaJci9tSt14A__',
27-
// },
28-
// ];
29-
308
// eslint-disable-next-line @typescript-eslint/no-unused-vars
319
export default async function Faculty({ params }: { params: { id: number } }) {
32-
const faculty = await db.query.faculty.findFirst({
10+
const auth = await getServerAuthSession();
11+
const faculty = (await db.query.faculty.findFirst({
3312
where: (faculty, { eq }) => eq(faculty.id, params.id),
3413
columns: {
3514
designation: true,
3615
officeTelephone: true,
3716
homeTelephone: true,
3817
googleScholarId: true,
3918
orchidId: true,
19+
researcherId: true,
4020
scopusId: true,
4121
},
4222
with: {
4323
person: true,
4424
},
45-
});
25+
})) ?? {
26+
designation: 'Professor',
27+
officeTelephone: '+91-1744-233482',
28+
homeTelephone: '9416733789',
29+
googleScholarId: '',
30+
orchidId: '',
31+
researcherId: '',
32+
scopusId: '',
33+
person: {
34+
name: 'Arun Goel',
35+
email: '[email protected]',
36+
image:
37+
'https://s3-alpha-sig.figma.com/img/d8be/da0e/c0b786889eedb113cb80b5b614b1b2a3?Expires=1713139200&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=k9DXXsfjSQVEi8SMGzfx~brJDpIsgkJPeaLr9GJ0AAjk7JlOrE9CwWen9xKVslOnc6YvYN9K0Js7QLtRCjtXnK3Mq27x8oObBO6I5nDFlCL7algKCYMiWaI2AN1FftbYb9zMprbFXqgvEPeGIZ1DZVYmUtOkjLdT1IGhqpNEPkGKP1GrjK1CAIYUk4kw3TPcTQtS2xBRzd~A3bC7lT4k9UfZPvZL8U~zSVVtINqhH6Nv6K1x~X1Yj~7N3fTMrY6OUJL~oitq~xR2pAowJpfasHi7BtxhlgG0pSvwMhoETi1b4DoZU0BP8xKdPVVPvkrm09f3XMc5adGc8tfYO316Zw__',
38+
},
39+
};
4640

4741
if (!faculty) {
4842
return <div>Faculty not found</div>;
@@ -83,7 +77,7 @@ export default async function Faculty({ params }: { params: { id: number } }) {
8377
alt="0"
8478
width={200}
8579
height={200}
86-
className="absolute z-10 h-[200px] w-[200px] translate-x-[calc(50vw-20px-100%)] translate-y-[-50%] rounded-full border-[16px] border-background object-cover"
80+
className="absolute z-10 h-[200px] w-[200px] translate-x-[calc(50vw-30px-100%)] translate-y-[-50%] rounded-full border-[16px] border-background object-cover"
8781
src={faculty.person.image}
8882
></Image>
8983
<article className="h-[293px] flex-grow rounded-2xl bg-shade-light drop-shadow-[0_4px_24px_rgba(0,43,91,0.1)]">
@@ -104,22 +98,6 @@ export default async function Faculty({ params }: { params: { id: number } }) {
10498
</article>
10599
</section>
106100
<section className="mt-[32px] flex w-full gap-[76px]">
107-
{/*{links.map((link) => (*/}
108-
{/* <a*/}
109-
{/* href={faculty[link.key]}*/}
110-
{/* key={link.label}*/}
111-
{/* className="flex h-[240px] flex-grow basis-0 flex-col rounded-2xl bg-shade-light py-[36px] drop-shadow-[0_4px_24px_rgba(0,43,91,0.1)]"*/}
112-
{/* >*/}
113-
{/* <Image*/}
114-
{/* alt={link.label}*/}
115-
{/* src={link.icon}*/}
116-
{/* height={109}*/}
117-
{/* width={109}*/}
118-
{/* className="m-auto"*/}
119-
{/* ></Image>*/}
120-
{/* <h5 className="m-auto">{link.label}</h5>*/}
121-
{/* </a>*/}
122-
{/*))}*/}
123101
<a
124102
href={faculty.orchidId ?? ''}
125103
className="flex h-[240px] flex-grow basis-0 flex-col rounded-2xl bg-shade-light py-[36px] drop-shadow-[0_4px_24px_rgba(0,43,91,0.1)]"
@@ -160,7 +138,7 @@ export default async function Faculty({ params }: { params: { id: number } }) {
160138
<h5 className="m-auto">Google Scholar</h5>
161139
</a>
162140
<a
163-
href="https://example.com"
141+
href={faculty.researcherId ?? ''}
164142
className="flex h-[240px] flex-grow basis-0 flex-col rounded-2xl bg-shade-light py-[36px] drop-shadow-[0_4px_24px_rgba(0,43,91,0.1)]"
165143
>
166144
<Image
@@ -173,7 +151,9 @@ export default async function Faculty({ params }: { params: { id: number } }) {
173151
<h5 className="m-auto">Researcher</h5>
174152
</a>
175153
</section>
176-
<FacultyDetails />
154+
<FacultyDetails
155+
isUser={auth ? auth.user.email === faculty.person.email : false}
156+
/>
177157
</main>
178158
);
179159
}

0 commit comments

Comments
 (0)