Skip to content

Commit

Permalink
feat: Document/Assignment Tag (#101)
Browse files Browse the repository at this point in the history
* Add DocumentTag in graphql

* Remove tags table

* Add, remove tag in frontend

* Add link from gradebook to assignment document and submission document

* Filter gradebook by assignment tags
  • Loading branch information
cptrodgers authored Aug 7, 2024
1 parent 65b924d commit 7c82e03
Show file tree
Hide file tree
Showing 25 changed files with 823 additions and 87 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -569,7 +569,7 @@ const ContentToolbar = () => {
aria-label="Generate Quizzes"
onClick={() => setOpenQuizGenerator(true)}
>
<IconWand size={20} stroke={1.7} color="blue" />{" "}
<IconWand size={20} stroke={1.7} color="indigo" />{" "}
<Trans>Quiz Generator (AI)</Trans>
</Toolbar.ToolbarButton>
</Tooltip>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { DataList, Select, Text } from "@radix-ui/themes";
import { DataList, Text } from "@radix-ui/themes";
import { t, Trans } from "@lingui/macro";
import React from "react";

Expand All @@ -14,7 +14,9 @@ import AssigneesAttribute from "./AssigneesAttribute";
import usePermission from "hook/UsePermission";
import { useOrderedQuizzes } from "hook/UseQuiz";
import useDocumentStore from "store/DocumentStore";
import useUpdateDocument from "../../../../../../hook/UseUpdateDocument";
import useUpdateDocument from "hook/UseUpdateDocument";
import VisibilityAttribute from "./VisibilityAttribute";
import TagAttribute from "./TagAttribute";

export type AssignmentAttributesProps = {
data: UpdateAssignmentData;
Expand Down Expand Up @@ -108,52 +110,10 @@ const AssignmentAttributes = ({
<Trans>Access visibility</Trans>
</DataList.Label>
<DataList.Value>
<div style={{ display: "flex", gap: 4, flexDirection: "column" }}>
<Select.Root
value={visibility}
onValueChange={onChangeVisibility}
size="1"
>
<Select.Trigger
variant="soft"
style={{ width: "fit-content" }}
/>
<Select.Content>
<Select.Group>
<Select.Item value={DocumentVisibility.PUBLIC}>
<Trans>Public</Trans>
</Select.Item>
<Select.Item value={DocumentVisibility.PRIVATE}>
<Trans>Private</Trans>
</Select.Item>
<Select.Item value={DocumentVisibility.ASSIGNEES}>
<Trans>Assignees only</Trans>
</Select.Item>
</Select.Group>
</Select.Content>
</Select.Root>
<div>
{visibility === DocumentVisibility.PUBLIC && (
<Text color="gray">
<Trans>
All students of this space can access this assignment.
</Trans>
</Text>
)}
{visibility === DocumentVisibility.PRIVATE && (
<Text color="gray">
<Trans>Only you can access this assignment.</Trans>
</Text>
)}
{visibility === DocumentVisibility.ASSIGNEES && (
<Text color="gray">
<Trans>
Only assignees (listed below) can access this assignment.
</Trans>
</Text>
)}
</div>
</div>
<VisibilityAttribute
visibility={visibility}
onChangeVisibility={onChangeVisibility}
/>
</DataList.Value>
</DataList.Item>
)}
Expand All @@ -168,6 +128,16 @@ const AssignmentAttributes = ({
</DataList.Value>
</DataList.Item>
)}
<DataList.Item>
<DataList.Label minWidth="88px">
<Trans>Tags</Trans>
</DataList.Label>
<DataList.Value>
<TagAttribute
readOnly={!allow(DocumentActionPermission.MANAGE_DOCUMENT)}
/>
</DataList.Value>
</DataList.Item>
</DataList.Root>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
import { IconButton, TextField } from "@radix-ui/themes";
import { PlusIcon } from "@radix-ui/react-icons";
import React, { useState } from "react";
import { useMutation } from "@apollo/client";
import { t } from "@lingui/macro";

import { ADD_DOCUMENT_TAG } from "graphql/mutation/DocumentMutation";
import useDocumentStore from "store/DocumentStore";
import { AddDocumentTag } from "graphql/types";
import DocumentTag from "components/DocumentTag";

export type TagAttributeProps = {
readOnly: boolean;
};

const TagAttribute = ({ readOnly }: TagAttributeProps) => {
const documentId = useDocumentStore((state) => state.activeDocumentId);
const activeDocumentTags = useDocumentStore(
(state) => state.activeDocument?.tags,
);
const addActiveDocumentTag = useDocumentStore(
(state) => state.addActiveDocumentTag,
);
const [addTag, { loading }] = useMutation<AddDocumentTag>(ADD_DOCUMENT_TAG);
const [newTag, setNewTag] = useState("");

const onAddNewTag = async () => {
const existingTag = activeDocumentTags.find(
(innerTag) => innerTag.tag === newTag,
);
if (existingTag || !documentId) return;

const { data } = await addTag({
variables: {
tag: {
documentId,
tag: newTag,
},
},
});

if (data) {
addActiveDocumentTag(data.documentAddTag);
setNewTag("");
}
};

return (
<div style={{ display: "flex", gap: 4, alignItems: "center" }}>
{activeDocumentTags.map((tag) => (
<DocumentTag tag={tag} key={tag.tag} readOnly={readOnly} />
))}
{!readOnly && (
<div style={{ display: "flex", alignItems: "center" }}>
<TextField.Root
size="1"
variant="soft"
placeholder={t`Typing new tag`}
value={newTag}
onChange={(e) => setNewTag(e.currentTarget.value)}
style={{ width: 100 }}
/>
<IconButton
variant="soft"
size="1"
style={{ marginLeft: 5 }}
onClick={onAddNewTag}
loading={loading}
>
<PlusIcon />
</IconButton>
</div>
)}
</div>
);
};

export default TagAttribute;
Original file line number Diff line number Diff line change
@@ -0,0 +1,63 @@
import { Select, Text } from "@radix-ui/themes";
import { Trans } from "@lingui/macro";
import React from "react";

import { DocumentVisibility } from "graphql/types";

export type VisibilityAttributeProps = {
visibility: DocumentVisibility;
onChangeVisibility: (visibility: DocumentVisibility) => void;
};

const VisibilityAttribute = ({
visibility,
onChangeVisibility,
}: VisibilityAttributeProps) => {
return (
<div style={{ display: "flex", gap: 4, flexDirection: "column" }}>
<Select.Root
value={visibility}
onValueChange={onChangeVisibility}
size="1"
>
<Select.Trigger variant="soft" style={{ width: "fit-content" }} />
<Select.Content>
<Select.Group>
<Select.Item value={DocumentVisibility.PUBLIC}>
<Trans>Public</Trans>
</Select.Item>
<Select.Item value={DocumentVisibility.PRIVATE}>
<Trans>Private</Trans>
</Select.Item>
<Select.Item value={DocumentVisibility.ASSIGNEES}>
<Trans>Assignees only</Trans>
</Select.Item>
</Select.Group>
</Select.Content>
</Select.Root>
<div>
{visibility === DocumentVisibility.PUBLIC && (
<Text color="gray">
<Trans>
All students of this space can access this assignment.
</Trans>
</Text>
)}
{visibility === DocumentVisibility.PRIVATE && (
<Text color="gray">
<Trans>Only you can access this assignment.</Trans>
</Text>
)}
{visibility === DocumentVisibility.ASSIGNEES && (
<Text color="gray">
<Trans>
Only assignees (listed below) can access this assignment.
</Trans>
</Text>
)}
</div>
</div>
);
};

export default VisibilityAttribute;
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@ const GeneralInformation = () => {
onChange={onChangeDescription}
resize="vertical"
readOnly={!canEdit}
rows={6}
/>
</Flex>
</div>
Expand Down
1 change: 1 addition & 0 deletions apps/ikigai/components/Document/DocumentBody/index.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -57,6 +57,7 @@ const DocumentBody = ({ loading }: DocumentBodyProps) => {
height: "100%",
width: `calc(100vw - ${bodyReduceWidth}px)`,
flex: 1,
overflowY: !activePageId ? "auto" : "unset",
}}
>
{loading && <Loading />}
Expand Down
Loading

0 comments on commit 7c82e03

Please sign in to comment.