Skip to content

Commit 2c158c5

Browse files
UnwilledTangentUnwilledTangent
committed
Remove Actions Column if not admin
1 parent 1c75b83 commit 2c158c5

File tree

2 files changed

+205
-156
lines changed

2 files changed

+205
-156
lines changed

‎apps/frontend/src/app/page.tsx‎

Lines changed: 205 additions & 154 deletions
Original file line numberDiff line numberDiff line change
@@ -268,176 +268,228 @@ export default function Home() {
268268
}, [search]);
269269

270270
// Table column specification
271-
const columns: TableProps<Question>["columns"] = [
272-
{
273-
title: "Id",
274-
dataIndex: "id",
275-
key: "id",
276-
// render: (id: number) => <div>{id}</div>,
277-
},
278-
{
279-
title: "Title",
280-
dataIndex: "title",
281-
key: "title",
282-
render: (text: string, question: Question) => (
283-
<Link
284-
href={{
285-
pathname: `/question/${question.id}`,
286-
query: { data: question.docRefId }, // the data
287-
}}
288-
>
289-
<Button type="link">{text}</Button>
290-
</Link>
291-
),
292-
},
293-
{
294-
title: "Categories",
295-
dataIndex: "categories",
296-
key: "categories",
297-
render: (categories: string[]) =>
298-
categories.map((category) => <Tag key={category}>{category}</Tag>),
299-
},
300-
{
301-
title: "Difficulty",
302-
dataIndex: "complexity",
303-
key: "complexity",
304-
render: (difficulty: string) => {
305-
let color = "";
306-
if (difficulty === "easy") {
307-
color = "#2DB55D";
308-
} else if (difficulty === "medium") {
309-
color = "orange";
310-
} else if (difficulty === "hard") {
311-
color = "red";
312-
}
313-
return (
314-
<div style={{ color }}>
315-
{difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
316-
</div>
317-
);
271+
var columns
272+
if (isAdmin) {
273+
var columns: TableProps<Question>["columns"] = [
274+
{
275+
title: "Id",
276+
dataIndex: "id",
277+
key: "id",
278+
// render: (id: number) => <div>{id}</div>,
318279
},
319-
},
320-
{
321-
title: "Actions",
322-
key: "actions",
323-
dataIndex: "id",
324-
render: (_: number, question: Question, index: number) => (
325-
<div>
326-
<Modal
327-
title="Edit Problem"
328-
open={isEditModalOpen && isEditModalOpen[index]}
329-
onCancel={() => handleModalClose(index)}
330-
footer={null}
331-
width={600}
280+
{
281+
title: "Title",
282+
dataIndex: "title",
283+
key: "title",
284+
render: (text: string, question: Question) => (
285+
<Link
286+
href={{
287+
pathname: `/question/${question.id}`,
288+
query: { data: question.docRefId }, // the data
289+
}}
332290
>
333-
<Form
334-
name="edit-form"
335-
{...layout}
336-
form={editForm}
337-
onFinish={(values) => {
338-
handleEditQuestion(values, index, question.docRefId);
339-
}}
291+
<Button type="link">{text}</Button>
292+
</Link>
293+
),
294+
},
295+
{
296+
title: "Categories",
297+
dataIndex: "categories",
298+
key: "categories",
299+
render: (categories: string[]) =>
300+
categories.map((category) => <Tag key={category}>{category}</Tag>),
301+
},
302+
{
303+
title: "Difficulty",
304+
dataIndex: "complexity",
305+
key: "complexity",
306+
render: (difficulty: string) => {
307+
let color = "";
308+
if (difficulty === "easy") {
309+
color = "#2DB55D";
310+
} else if (difficulty === "medium") {
311+
color = "orange";
312+
} else if (difficulty === "hard") {
313+
color = "red";
314+
}
315+
return (
316+
<div style={{ color }}>
317+
{difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
318+
</div>
319+
);
320+
},
321+
},
322+
{
323+
title: "Actions",
324+
key: "actions",
325+
dataIndex: "id",
326+
render: (_: number, question: Question, index: number) => (
327+
<div>
328+
<Modal
329+
title="Edit Problem"
330+
open={isEditModalOpen && isEditModalOpen[index]}
331+
onCancel={() => handleModalClose(index)}
332+
footer={null}
333+
width={600}
340334
>
341-
<Form.Item
342-
name="title"
343-
label="Title"
344-
rules={[
345-
{
346-
required: true,
347-
message: "Please enter question title!",
348-
},
349-
]}
350-
>
351-
<Input name="title" />
352-
</Form.Item>
353-
<Form.Item
354-
name="description"
355-
label="Description"
356-
rules={[
357-
{
358-
required: true,
359-
message: "Please enter question description!",
360-
},
361-
]}
362-
>
363-
<TextArea name="description" />
364-
</Form.Item>
365-
<Form.Item
366-
name="complexity"
367-
label="Complexity"
368-
rules={[
369-
{
370-
required: true,
371-
message: "Please select a complexity!",
372-
},
373-
]}
335+
<Form
336+
name="edit-form"
337+
{...layout}
338+
form={editForm}
339+
onFinish={(values) => {
340+
handleEditQuestion(values, index, question.docRefId);
341+
}}
374342
>
375-
<Select
376-
options={[
343+
<Form.Item
344+
name="title"
345+
label="Title"
346+
rules={[
377347
{
378-
label: "Easy",
379-
value: "easy",
348+
required: true,
349+
message: "Please enter question title!",
380350
},
351+
]}
352+
>
353+
<Input name="title" />
354+
</Form.Item>
355+
<Form.Item
356+
name="description"
357+
label="Description"
358+
rules={[
381359
{
382-
label: "Medium",
383-
value: "medium",
360+
required: true,
361+
message: "Please enter question description!",
384362
},
363+
]}
364+
>
365+
<TextArea name="description" />
366+
</Form.Item>
367+
<Form.Item
368+
name="complexity"
369+
label="Complexity"
370+
rules={[
385371
{
386-
label: "Hard",
387-
value: "hard",
372+
required: true,
373+
message: "Please select a complexity!",
388374
},
389375
]}
390-
onChange={(value) => form.setFieldValue("complexity", value)}
391-
allowClear
392-
/>
393-
</Form.Item>
394-
<Form.Item
395-
name="categories"
396-
label="Categories"
397-
rules={[
398-
{
399-
required: true,
400-
message: "Please select the relevant categories!",
401-
},
402-
]}
403-
>
404-
<Select
405-
mode="multiple"
406-
options={CategoriesOption}
407-
onChange={(value) => form.setFieldValue("categories", value)}
408-
allowClear
409-
/>
410-
</Form.Item>
411-
<Form.Item
412-
style={{ display: "flex", justifyContent: "flex-end" }}
413-
>
414-
<Button type="primary" htmlType="submit">
415-
Save
416-
</Button>
417-
</Form.Item>
418-
</Form>
419-
</Modal>
420-
{
421-
isAdmin &&
376+
>
377+
<Select
378+
options={[
379+
{
380+
label: "Easy",
381+
value: "easy",
382+
},
383+
{
384+
label: "Medium",
385+
value: "medium",
386+
},
387+
{
388+
label: "Hard",
389+
value: "hard",
390+
},
391+
]}
392+
onChange={(value) => form.setFieldValue("complexity", value)}
393+
allowClear
394+
/>
395+
</Form.Item>
396+
<Form.Item
397+
name="categories"
398+
label="Categories"
399+
rules={[
400+
{
401+
required: true,
402+
message: "Please select the relevant categories!",
403+
},
404+
]}
405+
>
406+
<Select
407+
mode="multiple"
408+
options={CategoriesOption}
409+
onChange={(value) => form.setFieldValue("categories", value)}
410+
allowClear
411+
/>
412+
</Form.Item>
413+
<Form.Item
414+
style={{ display: "flex", justifyContent: "flex-end" }}
415+
>
416+
<Button type="primary" htmlType="submit">
417+
Save
418+
</Button>
419+
</Form.Item>
420+
</Form>
421+
</Modal>
422422
<Button
423423
className="edit-button"
424424
icon={<EditOutlined />}
425425
onClick={() => handleEditClick(index, question)}
426426
></Button>
427-
}
428-
{/* TODO (Ryan): Include Pop-up confirmation for delete when clicked and link to delete API --> can also explore success notification or look into react-toast*/}
429-
<Button
430-
className="delete-button"
431-
danger
432-
icon={<DeleteOutlined />}
433-
onClick={() => {
434-
setDeletionStage({ index: question, deleteConfirmed: false });
427+
<Button
428+
className="delete-button"
429+
danger
430+
icon={<DeleteOutlined />}
431+
onClick={() => {
432+
setDeletionStage({ index: question, deleteConfirmed: false });
433+
}}
434+
></Button>
435+
</div>
436+
),
437+
},
438+
];
439+
} else {
440+
var columns: TableProps<Question>["columns"] = [
441+
{
442+
title: "Id",
443+
dataIndex: "id",
444+
key: "id",
445+
// render: (id: number) => <div>{id}</div>,
446+
},
447+
{
448+
title: "Title",
449+
dataIndex: "title",
450+
key: "title",
451+
render: (text: string, question: Question) => (
452+
<Link
453+
href={{
454+
pathname: `/question/${question.id}`,
455+
query: { data: question.docRefId }, // the data
435456
}}
436-
></Button>
437-
</div>
438-
),
439-
},
440-
];
457+
>
458+
<Button type="link">{text}</Button>
459+
</Link>
460+
),
461+
},
462+
{
463+
title: "Categories",
464+
dataIndex: "categories",
465+
key: "categories",
466+
render: (categories: string[]) =>
467+
categories.map((category) => <Tag key={category}>{category}</Tag>),
468+
},
469+
{
470+
title: "Difficulty",
471+
dataIndex: "complexity",
472+
key: "complexity",
473+
render: (difficulty: string) => {
474+
let color = "";
475+
if (difficulty === "easy") {
476+
color = "#2DB55D";
477+
} else if (difficulty === "medium") {
478+
color = "orange";
479+
} else if (difficulty === "hard") {
480+
color = "red";
481+
}
482+
return (
483+
<div style={{ color }}>
484+
{difficulty.charAt(0).toUpperCase() + difficulty.slice(1)}
485+
</div>
486+
);
487+
},
488+
},
489+
];
490+
}
491+
492+
441493

442494
// Handler for change in multi-select categories option
443495
const handleCategoriesChange = (value: string[]) => {
@@ -626,7 +678,6 @@ export default function Home() {
626678
</div>
627679
}
628680
</div>
629-
{/* TODO (Ben/Ryan): Include and link search & filter parameters */}
630681
<div className="content-filter">
631682
<Row gutter={8}>
632683
<Col span={6}>

‎services/question-service/.gitignore‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,3 @@
11
# please add all private keys here
22
cs3219-g24-staging-firebase-adminsdk-suafv-9c0d1b2299.json
33
cs3219-g24-firebase-adminsdk-9cm7h-b1675603ab.json
4-
cs3219-g24-staging-firebase-adminsdk-suafv-9c0d1b2299.json
5-

0 commit comments

Comments
 (0)