=> {
46 | const { users } = project;
47 |
48 | const issues = [
49 | createEntity(Issue, {
50 | title: "The rules and guidlines of the heist",
51 | type: IssueType.STORY,
52 | status: IssueStatus.BACKLOG,
53 | priority: IssuePriority.HIGH,
54 | listPosition: 1,
55 | description: `These rules MUST be followed :
No Killing: We want to appear to be Just Like Robin Hood, we do not intend to hurt anyoneNo Names: Everyone is nicknamed after a city. do not share you real names with anyone even meNo Personal Relationships: this is good for preventing attachments that might compromise the operation
That's it! 💯💯
`,
56 | estimate: 12,
57 | timeSpent: 11,
58 | reporterId: users[1].id,
59 | project,
60 | users: [users[0], users[2], users[1], users[3]]
61 | }),
62 | createEntity(Issue, {
63 | title: "This is our escape plan",
64 | type: IssueType.TASK,
65 | status: IssueStatus.INPROGRESS,
66 | priority: IssuePriority.LOW,
67 | listPosition: 2,
68 | description: `⛏️⛏️ We are digging our way out of the bank ⛏️⛏️
Moscow and Denver will take care of digging a tunnel into the safe they are the best in the business.
`,
69 | estimate: 8,
70 | timeSpent: 4,
71 | reporterId: users[1].id,
72 | project,
73 | users: [users[1], users[3]]
74 | }),
75 | createEntity(Issue, {
76 | title: "Print money for a total of 2.4 billion Euros",
77 | type: IssueType.TASK,
78 | status: IssueStatus.INPROGRESS,
79 | priority: IssuePriority.MEDIUM,
80 | listPosition: 3,
81 | description: `💰💰💰 We are making our own money 💰💰💰 The plan is not just to rob the bank no no no..., we are going to take the employees hostage and make them print 2.4 billion Euros
`,
82 | estimate: 5,
83 | timeSpent: 2,
84 | reporterId: users[1].id,
85 | project,
86 | users: [users[2], users[1], users[3]]
87 | }),
88 | createEntity(Issue, {
89 | title: "Couple hostages tried to escape",
90 | type: IssueType.BUG,
91 | status: IssueStatus.INPROGRESS,
92 | priority: IssuePriority.HIGHEST,
93 | listPosition: 4,
94 | description: `The Bastards almost killed me 😠😠
Arturo tried escaping with the help of his secretary Mónica Gaztambide
`,
95 | estimate: 10,
96 | timeSpent: 2,
97 | reporterId: users[0].id,
98 | project,
99 | users: [users[0], users[3]]
100 | }),
101 | createEntity(Issue, {
102 | title: "We are the resistance",
103 | type: IssueType.STORY,
104 | status: IssueStatus.BACKLOG,
105 | priority: IssuePriority.LOW,
106 | listPosition: 5,
107 | description: `They left us no choice but to come and take what's rightfully ours ✊✊✊
In this world, everything is governed by balance. There’s what you stand to gain and what you stand to lose. And when you think you’ve got nothing to lose, you become over confident.
`,
108 | estimate: 10,
109 | timeSpent: 2,
110 | reporterId: users[1].id,
111 | project,
112 | users: [users[0], users[1], users[3]]
113 | }),
114 | createEntity(Issue, {
115 | title: "Try leaving a comment on this issue.",
116 | type: IssueType.TASK,
117 | status: IssueStatus.DONE,
118 | priority: IssuePriority.MEDIUM,
119 | listPosition: 7,
120 | description: `Adding comments to an issue is a useful way to record additional detail about an issue, and collaborate with team members. Comments are shown in the Comments section when you view an issue .
Open the issue on which to add your comment. Click the Add a comment button. In the Comment text box, type your comment Click the Save button or the Enter key to save the comment.
`,
121 | estimate: 10,
122 | timeSpent: 2,
123 | reporterId: users[0].id,
124 | project,
125 | users: [users[1]]
126 | }),
127 | createEntity(Issue, {
128 | title:
129 | "Each issue has a single reporter but can have multiple assignees.",
130 | type: IssueType.STORY,
131 | status: IssueStatus.SELECTED,
132 | priority: IssuePriority.HIGH,
133 | listPosition: 6,
134 | description: `Try assigning Denver to this issue. 🤣 🤣 🤣
`,
135 | estimate: 6,
136 | timeSpent: 3,
137 | reporterId: users[1].id,
138 | project,
139 | users: [users[1], users[2]]
140 | })
141 | ];
142 | return Promise.all(issues);
143 | };
144 |
145 | const seedComments = (issues: Issue[], users: User[]): Promise => {
146 | const comments = [
147 | createEntity(Comment, {
148 | body: "HAHA HAHA HAHA HAHA...",
149 | issueId: issues[1].id,
150 | userId: users[3].id
151 | }),
152 | createEntity(Comment, {
153 | body:
154 | "The good thing about relationships is that you finally forget how they started.",
155 | issueId: issues[0].id,
156 | userId: users[2].id
157 | }),
158 | createEntity(Comment, {
159 | body: "In the end, love is a good reason for everything to fall apart.",
160 | issueId: issues[0].id,
161 | userId: users[2].id
162 | }),
163 | createEntity(Comment, {
164 | body: "Love can’t be timed. It has to be lived.",
165 | issueId: issues[0].id,
166 | userId: users[0].id
167 | }),
168 | createEntity(Comment, {
169 | body: "We're gonna be RICH 🤑🤑",
170 | issueId: issues[2].id,
171 | userId: users[2].id
172 | }),
173 | createEntity(Comment, {
174 | body: "@Denver execute Monica Gaztambide\nmake an example of her",
175 | issueId: issues[3].id,
176 | userId: users[0].id
177 | }),
178 | createEntity(Comment, {
179 | body: "That's against the rules i can't do that.",
180 | issueId: issues[3].id,
181 | userId: users[3].id
182 | }),
183 | createEntity(Comment, {
184 | body:
185 | "Una mattina mi sono alzato O bella ciao, bella ciao, bella ciao, ciao, ciao",
186 | issueId: issues[4].id,
187 | userId: users[1].id
188 | }),
189 | createEntity(Comment, {
190 | body:
191 | "O partigiano, portami via O bella ciao, bella ciao, bella ciao, ciao, ciao",
192 | issueId: issues[4].id,
193 | userId: users[0].id
194 | }),
195 | createEntity(Comment, {
196 | body:
197 | "There are people who study years to earn a salary, we only go to study for five months",
198 | issueId: issues[5].id,
199 | userId: users[1].id
200 | }),
201 | createEntity(Comment, {
202 | body:
203 | "As in chess, there are times when it is necessary to sacrifice a piece to win",
204 | issueId: issues[6].id,
205 | userId: users[2].id
206 | })
207 | ];
208 | return Promise.all(comments);
209 | };
210 |
211 | const createGuestAccount = async (): Promise => {
212 | const users = await seedUsers();
213 | const project = await seedProject(users);
214 | const issues = await seedIssues(project);
215 | await seedComments(issues, project.users);
216 | return users[2];
217 | };
218 |
219 | export default createGuestAccount;
220 |
--------------------------------------------------------------------------------
/packages/api/src/database/createTestAccount.ts:
--------------------------------------------------------------------------------
1 | import { Comment, Issue, Project, User } from "@/models";
2 | import { ProjectCategory } from "@/constants/project";
3 | import { IssueType, IssueStatus, IssuePriority } from "@/constants/issue";
4 | import { createEntity } from "@/utils/typeorm";
5 |
6 | const seedUsers = (): Promise => {
7 | const users = [
8 | createEntity(User, {
9 | email: "rick@jira.guest",
10 | name: "Rick Sanchez",
11 | avatarUrl:
12 | "https://res.cloudinary.com/datlyfe/image/upload/v1583417163/rick_morty/rick_abe7oc.jpg"
13 | }),
14 | createEntity(User, {
15 | email: "morty@jira.guest",
16 | name: "Morty Smith",
17 | avatarUrl:
18 | "https://res.cloudinary.com/datlyfe/image/upload/v1583417163/rick_morty/morty_n3zqiz.jpg"
19 | })
20 | ];
21 | return Promise.all(users);
22 | };
23 |
24 | const seedProject = (users: User[]): Promise =>
25 | createEntity(Project, {
26 | name: "Project name",
27 | url: "https://www.testurl.com",
28 | description: "Project description",
29 | category: ProjectCategory.SOFTWARE,
30 | users
31 | });
32 |
33 | const seedIssues = (project: Project): Promise => {
34 | const { users } = project;
35 |
36 | const issues = [
37 | createEntity(Issue, {
38 | title: "Issue title 1",
39 | type: IssueType.TASK,
40 | status: IssueStatus.BACKLOG,
41 | priority: IssuePriority.LOWEST,
42 | listPosition: 1,
43 | reporterId: users[0].id,
44 | project
45 | }),
46 | createEntity(Issue, {
47 | title: "Issue title 2",
48 | type: IssueType.TASK,
49 | status: IssueStatus.BACKLOG,
50 | priority: IssuePriority.MEDIUM,
51 | listPosition: 2,
52 | estimate: 5,
53 | description: "Issue description 2",
54 | reporterId: users[0].id,
55 | users: [users[0]],
56 | project
57 | }),
58 | createEntity(Issue, {
59 | title: "Issue title 3",
60 | type: IssueType.STORY,
61 | status: IssueStatus.SELECTED,
62 | priority: IssuePriority.HIGH,
63 | listPosition: 3,
64 | estimate: 10,
65 | description: "Issue description 3",
66 | reporterId: users[0].id,
67 | users: [users[0], users[1]],
68 | project
69 | })
70 | ];
71 | return Promise.all(issues);
72 | };
73 |
74 | const seedComments = (issue: Issue, user: User): Promise =>
75 | createEntity(Comment, {
76 | body: "Comment body",
77 | issueId: issue.id,
78 | userId: user.id
79 | });
80 |
81 | const createTestAccount = async (): Promise> => {
82 | const users = await seedUsers();
83 | const project = await seedProject(users);
84 | const issues = await seedIssues(project);
85 | await seedComments(issues[0], project.users[0]);
86 | return [project, users[0], issues[0]];
87 | };
88 |
89 | export default createTestAccount;
90 |
--------------------------------------------------------------------------------
/packages/api/src/database/createTestConnection.ts:
--------------------------------------------------------------------------------
1 | import { createConnection, Connection, ConnectionOptions } from "typeorm";
2 |
3 | import * as models from "@/models";
4 |
5 | const connectionOptions: ConnectionOptions = {
6 | type: "postgres",
7 | host: process.env.DB_HOST,
8 | port: Number(process.env.DB_PORT),
9 | username: process.env.DB_USERNAME,
10 | password: process.env.DB_PASSWORD,
11 | database: process.env.DB_TEST_DATABASE,
12 | entities: Object.values(models),
13 | synchronize: true,
14 | dropSchema: true
15 | };
16 |
17 | const createTestDatabaseConnection = (): Promise =>
18 | createConnection(connectionOptions);
19 |
20 | export default createTestDatabaseConnection;
21 |
--------------------------------------------------------------------------------
/packages/api/src/database/resetDatabase.ts:
--------------------------------------------------------------------------------
1 | import { getConnection } from "typeorm";
2 | import { schedule } from "node-cron";
3 |
4 | const resetDatabase = async (): Promise => {
5 | const connection = getConnection();
6 | await connection.dropDatabase();
7 | await connection.synchronize();
8 | };
9 |
10 | export const resetDatabaseJob = () => {
11 | schedule("0 0 * * *", () => {
12 | resetDatabase();
13 | });
14 | };
15 |
16 | export default resetDatabase;
17 |
--------------------------------------------------------------------------------
/packages/api/src/errors/asyncCatch.ts:
--------------------------------------------------------------------------------
1 | import { RequestHandler } from "express";
2 |
3 | export const catchErrors = (requestHandler: RequestHandler): RequestHandler => {
4 | return async (req, res, next): Promise => {
5 | try {
6 | return await requestHandler(req, res, next);
7 | } catch (error) {
8 | next(error);
9 | }
10 | };
11 | };
12 |
--------------------------------------------------------------------------------
/packages/api/src/errors/customErrors.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable max-classes-per-file */
2 |
3 | type ErrorData = { [key: string]: any };
4 |
5 | export class CustomError extends Error {
6 | constructor(
7 | public message: string = "No message",
8 | public code: string | number = "INTERNAL_ERROR",
9 | public status: number = 500,
10 | public data: ErrorData = {}
11 | ) {
12 | super();
13 | }
14 | }
15 |
16 | export class RouteNotFoundError extends CustomError {
17 | constructor(originalUrl: string) {
18 | super(`Route '${originalUrl}' does not exist.`, "ROUTE_NOT_FOUND", 404);
19 | }
20 | }
21 |
22 | export class EntityNotFoundError extends CustomError {
23 | constructor(entityName: string) {
24 | super(`${entityName} not found.`, "ENTITY_NOT_FOUND", 404);
25 | }
26 | }
27 |
28 | export class BadUserInputError extends CustomError {
29 | constructor(errorData: ErrorData) {
30 | super("There were validation errors.", "BAD_USER_INPUT", 400, errorData);
31 | }
32 | }
33 |
34 | export class InvalidTokenError extends CustomError {
35 | constructor(message = "Authentication token is invalid.") {
36 | super(message, "INVALID_TOKEN", 401);
37 | }
38 | }
39 |
--------------------------------------------------------------------------------
/packages/api/src/errors/gqlError.ts:
--------------------------------------------------------------------------------
1 | import { GraphQLFormattedError, GraphQLError } from "graphql";
2 | import { ArgumentValidationError } from "type-graphql";
3 | import { unwrapResolverError } from "@apollo/server/errors";
4 | import type { ValidationError as ClassValidatorValidationError } from "class-validator";
5 |
6 | export function formatError(
7 | formattedError: GraphQLFormattedError,
8 | error: unknown
9 | ): GraphQLFormattedError {
10 | const originalError = unwrapResolverError(error);
11 |
12 | // Log
13 | console.log(
14 | `Server error: ${
15 | originalError instanceof Error ? originalError.message : originalError
16 | }`
17 | );
18 |
19 | // Validation
20 | if (originalError instanceof ArgumentValidationError) {
21 | return new ValidationError(originalError.validationErrors);
22 | }
23 |
24 | // Generic
25 | return formattedError;
26 | }
27 |
28 | type IValidationError = Pick<
29 | ClassValidatorValidationError,
30 | "property" | "value" | "constraints" | "children"
31 | >;
32 |
33 | function formatValidationErrors(
34 | validationError: IValidationError
35 | ): IValidationError {
36 | return {
37 | property: validationError.property,
38 | ...(validationError.value && { value: validationError.value }),
39 | ...(validationError.constraints && {
40 | constraints: validationError.constraints,
41 | }),
42 | ...(validationError.children &&
43 | validationError.children.length !== 0 && {
44 | children: validationError.children.map((child) =>
45 | formatValidationErrors(child)
46 | ),
47 | }),
48 | };
49 | }
50 |
51 | export class ValidationError extends GraphQLError {
52 | public constructor(validationErrors: ClassValidatorValidationError[]) {
53 | super("Validation Error", {
54 | extensions: {
55 | code: "BAD_USER_INPUT",
56 | validationErrors: validationErrors.map((validationError) =>
57 | formatValidationErrors(validationError)
58 | ),
59 | },
60 | });
61 |
62 | Object.setPrototypeOf(this, ValidationError.prototype);
63 | }
64 | }
65 |
--------------------------------------------------------------------------------
/packages/api/src/errors/index.ts:
--------------------------------------------------------------------------------
1 | export * from './customErrors';
2 | export { catchErrors } from './asyncCatch';
3 |
--------------------------------------------------------------------------------
/packages/api/src/gql/auth.ts:
--------------------------------------------------------------------------------
1 | import { Resolver, Query, UseMiddleware } from "type-graphql";
2 | import { ErrorInterceptor } from "@/middlewares/errorInterceptor";
3 | import createGuestAccount from "@/database/createGuestAccount";
4 | import { signToken } from "@/utils/authToken";
5 |
6 | @Resolver()
7 | class AuthResolver {
8 | @UseMiddleware([ErrorInterceptor])
9 | @Query(() => String)
10 | async createGuestAccount(): Promise {
11 | const user = await createGuestAccount();
12 | return signToken({ sub: user.id });
13 | }
14 | }
15 |
16 | export default AuthResolver;
17 |
--------------------------------------------------------------------------------
/packages/api/src/gql/comments.ts:
--------------------------------------------------------------------------------
1 | import { Resolver, Mutation, Arg, UseMiddleware } from "type-graphql";
2 | import { createEntity, updateEntity, deleteEntity } from "@/utils/typeorm";
3 | import Comment from "@/models/Comment";
4 | import { CommentInput } from "@/gql/types";
5 | import { IsAuth } from "@/middlewares/isAuth";
6 | import { ErrorInterceptor } from "@/middlewares/errorInterceptor";
7 |
8 | @Resolver()
9 | class CommentResolver {
10 | @UseMiddleware([IsAuth, ErrorInterceptor])
11 | @Mutation(() => Comment)
12 | async createComment(
13 | @Arg("comment") commentInput: CommentInput
14 | ): Promise {
15 | return await createEntity(Comment, commentInput);
16 | }
17 | @UseMiddleware([IsAuth, ErrorInterceptor])
18 | @Mutation(() => Comment)
19 | async updateComment(
20 | @Arg("id") commentId: string,
21 | @Arg("comment") commentInput: CommentInput
22 | ): Promise {
23 | return await updateEntity(Comment, commentId, commentInput);
24 | }
25 | @UseMiddleware([IsAuth, ErrorInterceptor])
26 | @Mutation(() => Comment)
27 | async deleteComment(@Arg("id") commentId: string): Promise {
28 | return await deleteEntity(Comment, commentId);
29 | }
30 | }
31 |
32 | export default CommentResolver;
33 |
--------------------------------------------------------------------------------
/packages/api/src/gql/index.ts:
--------------------------------------------------------------------------------
1 | import { default as AuthResolver } from "./auth";
2 | import { default as UserResolver } from "./user";
3 | import { default as CommentResolver } from "./comments";
4 | import { default as IssueResolver } from "./issues";
5 | import { default as ProjectResolver } from "./project";
6 |
7 | export const RESOLVERS = [
8 | AuthResolver,
9 | UserResolver,
10 | CommentResolver,
11 | IssueResolver,
12 | ProjectResolver,
13 | ] as const;
14 |
--------------------------------------------------------------------------------
/packages/api/src/gql/issues.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Resolver,
3 | Arg,
4 | Query,
5 | Int,
6 | Mutation,
7 | UseMiddleware,
8 | Ctx,
9 | } from "type-graphql";
10 | import { Issue } from "@/models";
11 | import {
12 | findEntityOrThrow,
13 | createEntity,
14 | updateEntity,
15 | deleteEntity,
16 | } from "@/utils/typeorm";
17 | import { IsAuth } from "@/middlewares/isAuth";
18 | import { ErrorInterceptor } from "@/middlewares/errorInterceptor";
19 | import { IssueCreateInput, IssueUpdateInput } from "@/gql/types";
20 | import { GQLContext } from "../types/context";
21 |
22 | const calculateListPosition = async ({
23 | projectId,
24 | status,
25 | }: Partial): Promise => {
26 | const issues = await Issue.find({ where: { projectId, status } });
27 |
28 | const listPositions = issues.map(({ listPosition }) => listPosition);
29 |
30 | if (listPositions.length > 0) {
31 | return Math.min(...listPositions) - 1;
32 | }
33 | return 1;
34 | };
35 |
36 | @Resolver()
37 | class IssueResolver {
38 | @UseMiddleware([IsAuth, ErrorInterceptor])
39 | @Query(() => [Issue])
40 | async getProjectIssues(
41 | @Ctx() ctx: GQLContext,
42 | @Arg("searchTerm", () => String, { nullable: true })
43 | searchTerm: string | null
44 | ): Promise {
45 | const { projectId } = ctx.req.currentUser;
46 | let whereSQL = "issue.projectId = :projectId";
47 |
48 | if (searchTerm) {
49 | whereSQL +=
50 | " AND (issue.title ILIKE :searchTerm OR issue.descriptionText ILIKE :searchTerm)";
51 | }
52 |
53 | const issues = await Issue.createQueryBuilder("issue")
54 | .select()
55 | .where(whereSQL, { projectId, searchTerm: `%${searchTerm}%` })
56 | .getMany();
57 |
58 | return issues;
59 | }
60 |
61 | @UseMiddleware([IsAuth, ErrorInterceptor])
62 | @Query(() => Issue)
63 | async getIssueWithUsersAndComments(
64 | @Arg("issueId", () => Int) issueId: number
65 | ): Promise {
66 | const issue = await findEntityOrThrow(Issue, issueId, {
67 | relations: ["users", "comments", "comments.user"],
68 | });
69 |
70 | return issue;
71 | }
72 |
73 | @UseMiddleware([IsAuth, ErrorInterceptor])
74 | @Mutation(() => Issue)
75 | async createIssue(
76 | @Arg("issue") issueInput: IssueCreateInput
77 | ): Promise {
78 | const listPosition = await calculateListPosition(issueInput);
79 | const issue = await createEntity(Issue, {
80 | ...issueInput,
81 | listPosition,
82 | });
83 | return issue;
84 | }
85 | @UseMiddleware([IsAuth, ErrorInterceptor])
86 | @Mutation(() => Issue)
87 | async updateIssue(
88 | @Arg("issue") issueInput: IssueUpdateInput,
89 | @Arg("id") issueId: number
90 | ): Promise {
91 | const issue = await updateEntity(Issue, issueId, issueInput);
92 | return issue;
93 | }
94 | @UseMiddleware([IsAuth, ErrorInterceptor])
95 | @Mutation(() => Boolean)
96 | async deleteIssue(@Arg("id") issueId: number): Promise {
97 | await deleteEntity(Issue, issueId);
98 | return true;
99 | }
100 | }
101 |
102 | export default IssueResolver;
103 |
--------------------------------------------------------------------------------
/packages/api/src/gql/plugins/sentry.ts:
--------------------------------------------------------------------------------
1 | import { captureException, withScope } from "@sentry/node";
2 | import type { ApolloServerPlugin } from "@apollo/server";
3 |
4 | export const apolloServerSentryPlugin: ApolloServerPlugin = {
5 | async requestDidStart() {
6 | return {
7 | async didEncounterErrors(ctx) {
8 | if (!ctx.operation) {
9 | for (const err of ctx.errors) {
10 | withScope((scope) => {
11 | scope.setExtra("query", ctx.request.query);
12 | captureException(err);
13 | });
14 | }
15 | return;
16 | }
17 |
18 | for (const err of ctx.errors) {
19 | withScope((scope) => {
20 | scope.setTag("kind", ctx.operation?.operation ?? "unknown");
21 |
22 | scope.setExtra("query", ctx.request.query);
23 | scope.setExtra("variables", ctx.request.variables);
24 |
25 | if (err.path) {
26 | scope.setLevel("debug");
27 | scope.addBreadcrumb({
28 | category: "query-path",
29 | message: err.path.join(" > "),
30 | });
31 | }
32 |
33 | const transactionId =
34 | ctx.request?.http?.headers.get("x-transaction-id");
35 | if (transactionId) {
36 | scope.setTransactionName(transactionId);
37 | }
38 |
39 | captureException(err);
40 | });
41 | }
42 | },
43 | };
44 | },
45 | };
46 |
--------------------------------------------------------------------------------
/packages/api/src/gql/project.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Resolver,
3 | Query,
4 | Ctx,
5 | UseMiddleware,
6 | Mutation,
7 | Arg
8 | } from "type-graphql";
9 | import { GQLContext } from "@/types/context";
10 | import { Project } from "@/models";
11 | import { IsAuth } from "@/middlewares/isAuth";
12 | import { ResolveTime } from "@/middlewares/resolveTime";
13 | import { ErrorInterceptor } from "@/middlewares/errorInterceptor";
14 | import { findEntityOrThrow, updateEntity } from "@/utils/typeorm";
15 | import { ProjectInput } from "@/gql/types";
16 |
17 | @Resolver()
18 | class ProjectResolver {
19 | @UseMiddleware([ResolveTime, IsAuth, ErrorInterceptor])
20 | @Query(() => Project)
21 | async getProjectWithUsersAndIssues(@Ctx() ctx: GQLContext): Promise {
22 | const project = await findEntityOrThrow(
23 | Project,
24 | ctx.req.currentUser.projectId,
25 | {
26 | relations: ["issues", "users"]
27 | }
28 | );
29 |
30 | return project;
31 | }
32 |
33 | @UseMiddleware([IsAuth, ErrorInterceptor])
34 | @Mutation(() => Project)
35 | async updateProject(
36 | @Ctx() ctx: GQLContext,
37 | @Arg("project") projectInput: ProjectInput
38 | ): Promise {
39 | const project = await updateEntity(
40 | Project,
41 | ctx.req.currentUser.projectId,
42 | projectInput
43 | );
44 |
45 | return project;
46 | }
47 | }
48 |
49 | export default ProjectResolver;
50 |
--------------------------------------------------------------------------------
/packages/api/src/gql/types.ts:
--------------------------------------------------------------------------------
1 | import { InputType, Field, ID, Float } from "type-graphql";
2 | import { Comment, Issue, Project, User } from "@/models";
3 | import { IssueType, IssueStatus, IssuePriority } from "@/constants/issue";
4 | import { ProjectCategory } from "@/constants/project";
5 |
6 | @InputType()
7 | export class CommentInput implements Partial {
8 | @Field({ nullable: true })
9 | body: string;
10 | @Field(() => ID, { nullable: true })
11 | issueId: number;
12 | @Field(() => ID, { nullable: true })
13 | userId: string;
14 | }
15 | @InputType()
16 | export class ProjectInput implements Partial {
17 | @Field({ nullable: true })
18 | name: string;
19 |
20 | @Field(() => String, { nullable: true })
21 | url: string | null;
22 |
23 | @Field(() => String, { nullable: true })
24 | description: string | null;
25 |
26 | @Field(() => String, { nullable: true })
27 | category: ProjectCategory;
28 | }
29 |
30 | @InputType()
31 | class UserInput implements Partial {
32 | @Field(() => ID)
33 | id: string;
34 | @Field({ nullable: true })
35 | name: string;
36 | @Field({ nullable: true })
37 | avatarUrl: string;
38 | @Field({ nullable: true })
39 | projectId: number;
40 | }
41 |
42 | @InputType()
43 | export class IssueUpdateInput implements Partial {
44 | @Field({ nullable: true })
45 | title: string;
46 | @Field(() => String, { nullable: true })
47 | type: IssueType;
48 | @Field(() => String, { nullable: true })
49 | status: IssueStatus;
50 | @Field(() => String, { nullable: true })
51 | priority: IssuePriority;
52 | @Field(() => Float, { nullable: true })
53 | listPosition: number;
54 | @Field(() => ID, { nullable: true })
55 | reporterId: string;
56 | @Field(() => ID, { nullable: true })
57 | projectId: number;
58 | @Field(() => [UserInput], { nullable: true })
59 | users: User[];
60 | @Field(() => [ID], { nullable: true })
61 | userIds: string[];
62 | @Field(() => String, { nullable: true })
63 | description: string | null;
64 | }
65 |
66 | @InputType()
67 | export class IssueCreateInput implements Partial {
68 | @Field()
69 | title: string;
70 | @Field(() => String)
71 | type: IssueType;
72 | @Field(() => String)
73 | status: IssueStatus;
74 | @Field(() => String)
75 | priority: IssuePriority;
76 | @Field(() => ID)
77 | reporterId: string;
78 | @Field(() => ID)
79 | projectId: number;
80 | @Field(() => [UserInput])
81 | users: User[];
82 | @Field(() => [ID])
83 | userIds: string[];
84 | @Field(() => String, { nullable: true })
85 | description: string | null;
86 | }
87 |
88 | @InputType()
89 | export class UserCreateInput implements Partial {
90 | @Field()
91 | name: string;
92 | @Field()
93 | email: string;
94 | @Field({ defaultValue: "" })
95 | avatarUrl: string;
96 | }
97 |
--------------------------------------------------------------------------------
/packages/api/src/gql/user.ts:
--------------------------------------------------------------------------------
1 | import {
2 | Resolver,
3 | Query,
4 | UseMiddleware,
5 | Ctx,
6 | Mutation,
7 | Arg,
8 | } from "type-graphql";
9 | import { IsAuth } from "@/middlewares/isAuth";
10 | import { GQLContext } from "@/types/context";
11 | import { User } from "@/models";
12 | import { ErrorInterceptor } from "@/middlewares/errorInterceptor";
13 | import { UserCreateInput } from "./types";
14 | import { createEntity } from "../utils/typeorm";
15 |
16 | @Resolver()
17 | class UserResolver {
18 | @Query(() => String)
19 | hello(): string {
20 | return "hello World";
21 | }
22 | @UseMiddleware([IsAuth, ErrorInterceptor])
23 | @Query(() => User)
24 | currentUser(@Ctx() ctx: GQLContext): User {
25 | return ctx.req.currentUser;
26 | }
27 |
28 | @UseMiddleware([ErrorInterceptor])
29 | @Mutation(() => User)
30 | async createUser(@Arg("user") userInput: UserCreateInput): Promise {
31 | return await createEntity(User, userInput);
32 | }
33 | }
34 |
35 | export default UserResolver;
36 |
--------------------------------------------------------------------------------
/packages/api/src/index.ts:
--------------------------------------------------------------------------------
1 | require("module-alias").addAlias("@", __dirname);
2 | import "dotenv/config";
3 | import "reflect-metadata";
4 | import http from "http";
5 | import { init as SentryInit, Handlers as SentryHandlers } from "@sentry/node";
6 | import { RewriteFrames } from "@sentry/integrations";
7 | import Express from "express";
8 | import cors from "cors";
9 | import { ApolloServer } from "@apollo/server";
10 | import { expressMiddleware } from "@apollo/server/express4";
11 | import { ApolloServerPluginDrainHttpServer } from "@apollo/server/plugin/drainHttpServer";
12 | import { buildSchema } from "type-graphql";
13 | import createDatabaseConnection from "@/database/createConnection";
14 | import { RESOLVERS } from "@/gql";
15 | import { apolloServerSentryPlugin } from "@/gql/plugins/sentry";
16 | import { formatError } from "@/errors/gqlError";
17 |
18 | const PORT = process.env.PORT || 5001;
19 |
20 | if (process.env.NODE_ENV === "production") {
21 | SentryInit({
22 | environment: process.env.APP_ENV,
23 | release: "jira-clone-api",
24 | dsn: process.env.SENTRY_DSN,
25 | integrations: [
26 | new RewriteFrames({
27 | root: process.cwd(),
28 | }),
29 | ],
30 | });
31 | }
32 |
33 | const establishDatabaseConnection = async (): Promise => {
34 | try {
35 | await createDatabaseConnection();
36 | } catch (error) {
37 | console.log(error);
38 | }
39 | };
40 |
41 | const initExpressGraphql = async () => {
42 | const schema = await buildSchema({
43 | resolvers: RESOLVERS,
44 | validate: { forbidUnknownValues: false },
45 | }).catch((err) => console.log(err));
46 |
47 | if (!schema) {
48 | throw new Error("Could not build graphql schema");
49 | }
50 |
51 | const app = Express();
52 | const httpServer = http.createServer(app);
53 |
54 | const gqlServer = new ApolloServer({
55 | schema,
56 | formatError,
57 | plugins: [
58 | ApolloServerPluginDrainHttpServer({ httpServer }),
59 | apolloServerSentryPlugin,
60 | ],
61 | introspection: true,
62 | });
63 |
64 | await gqlServer.start();
65 |
66 | app.use(SentryHandlers.requestHandler());
67 |
68 | app.use(
69 | "/graphql",
70 | cors(),
71 | Express.json(),
72 | expressMiddleware(gqlServer, {
73 | context: async ({ req, res }) => ({ req, res }),
74 | }),
75 | SentryHandlers.errorHandler()
76 | );
77 |
78 | app.get("/", (_, res) => {
79 | res.json({ server: "jira-clone-api" });
80 | });
81 |
82 | httpServer.listen({ port: PORT }, () => {
83 | console.log(`🚀 Server ready at http://localhost:${PORT}/graphql`);
84 | });
85 | };
86 |
87 | const bootstrap = async (): Promise => {
88 | await establishDatabaseConnection();
89 | initExpressGraphql();
90 | };
91 |
92 | bootstrap();
93 |
--------------------------------------------------------------------------------
/packages/api/src/middlewares/errorInterceptor.ts:
--------------------------------------------------------------------------------
1 | import { MiddlewareFn } from "type-graphql";
2 | import { CustomError } from "@/errors";
3 | import { GQLContext } from "@/types/context";
4 | import { pick } from "@/utils/javascript";
5 |
6 | export const ErrorInterceptor: MiddlewareFn = async (_, next) => {
7 | try {
8 | return await next();
9 | } catch (error) {
10 | console.error(error);
11 | const isErrorSafeForClient = error instanceof CustomError;
12 |
13 | if (isErrorSafeForClient) {
14 | const { code, message, data, status } = pick(
15 | error as InstanceType,
16 | ["message", "code", "status", "data"]
17 | );
18 |
19 | throw new CustomError(message, code, status, data);
20 | }
21 |
22 | throw new CustomError(
23 | "Something went wrong, please contact our support.",
24 | "INTERNAL_ERROR",
25 | 500,
26 | {}
27 | );
28 | }
29 | };
30 |
--------------------------------------------------------------------------------
/packages/api/src/middlewares/isAuth.ts:
--------------------------------------------------------------------------------
1 | import { verifyToken, getAuthTokenFromRequest } from "@/utils/authToken";
2 | import { InvalidTokenError } from "@/errors";
3 | import { User } from "@/models";
4 | import { MiddlewareFn } from "type-graphql";
5 | import { GQLContext } from "types/context";
6 |
7 | export const IsAuth: MiddlewareFn = async ({ context }, next) => {
8 | const token = getAuthTokenFromRequest(context.req);
9 | if (!token) {
10 | throw new InvalidTokenError("Authentication token not found.");
11 | }
12 | const userId = verifyToken(token).sub;
13 | if (!userId) {
14 | throw new InvalidTokenError("Authentication token is invalid.");
15 | }
16 | const user = await User.findOneBy({ id: userId });
17 | if (!user) {
18 | throw new InvalidTokenError(
19 | "Authentication token is invalid: User not found."
20 | );
21 | }
22 | context.req.currentUser = user;
23 | return next();
24 | };
25 |
--------------------------------------------------------------------------------
/packages/api/src/middlewares/resolveTime.ts:
--------------------------------------------------------------------------------
1 | import { MiddlewareFn } from "type-graphql";
2 |
3 | export const ResolveTime: MiddlewareFn = async ({ info }, next) => {
4 | const start = Date.now();
5 | await next();
6 | const resolveTime = Date.now() - start;
7 | console.log(`${info.parentType.name}.${info.fieldName} [${resolveTime} ms]`);
8 | };
9 |
--------------------------------------------------------------------------------
/packages/api/src/models/Comment.ts:
--------------------------------------------------------------------------------
1 | import {
2 | BaseEntity,
3 | PrimaryGeneratedColumn,
4 | Column,
5 | CreateDateColumn,
6 | UpdateDateColumn,
7 | ManyToOne,
8 | Entity
9 | } from "typeorm";
10 | import is from "@/utils/validations";
11 | import { User, Issue } from "@/models";
12 | import { ObjectType, Field, ID } from "type-graphql";
13 |
14 | @Entity()
15 | @ObjectType()
16 | class Comment extends BaseEntity {
17 | static validations = {
18 | body: [is.required(), is.maxLength(50000)]
19 | };
20 |
21 | @Field(() => ID)
22 | @PrimaryGeneratedColumn()
23 | id: number;
24 |
25 | @Field()
26 | @Column("text")
27 | body: string;
28 |
29 | @Field()
30 | @CreateDateColumn({ type: "timestamp" })
31 | createdAt: Date;
32 |
33 | @Field()
34 | @UpdateDateColumn({ type: "timestamp" })
35 | updatedAt: Date;
36 |
37 | @Field()
38 | @Column("uuid")
39 | userId: string;
40 |
41 | @Field()
42 | @Column("integer")
43 | issueId: number;
44 |
45 | @Field(() => User)
46 | @ManyToOne(
47 | () => User,
48 | user => user.comments
49 | )
50 | user: User;
51 |
52 | @Field(() => Issue)
53 | @ManyToOne(
54 | () => Issue,
55 | issue => issue.comments,
56 | { onDelete: "CASCADE" }
57 | )
58 | issue: Issue;
59 | }
60 |
61 | export default Comment;
62 |
--------------------------------------------------------------------------------
/packages/api/src/models/Issue.ts:
--------------------------------------------------------------------------------
1 | import {
2 | BaseEntity,
3 | PrimaryGeneratedColumn,
4 | Column,
5 | CreateDateColumn,
6 | UpdateDateColumn,
7 | ManyToOne,
8 | OneToMany,
9 | ManyToMany,
10 | JoinTable,
11 | RelationId,
12 | BeforeInsert,
13 | BeforeUpdate,
14 | Entity
15 | } from "typeorm";
16 | import { ObjectType, ID, Field, Int, Float } from "type-graphql";
17 | import striptags from "striptags";
18 | import is from "@/utils/validations";
19 | import { IssueType, IssuePriority, IssueStatus } from "@/constants/issue";
20 | import { Project, User, Comment } from "@/models";
21 |
22 | @ObjectType()
23 | @Entity()
24 | class Issue extends BaseEntity {
25 | static validations = {
26 | title: [is.required(), is.maxLength(200)],
27 | type: [is.required(), is.oneOf(Object.values(IssueType))],
28 | status: [is.required(), is.oneOf(Object.values(IssueStatus))],
29 | priority: [is.required(), is.oneOf(Object.values(IssuePriority))],
30 | listPosition: is.required(),
31 | reporterId: is.required()
32 | };
33 |
34 | @Field(() => ID)
35 | @PrimaryGeneratedColumn()
36 | id: number;
37 |
38 | @Field()
39 | @Column("varchar")
40 | title: string;
41 |
42 | @Field(() => String)
43 | @Column("varchar")
44 | type: IssueType;
45 |
46 | @Field(() => String)
47 | @Column("varchar")
48 | status: IssueStatus;
49 |
50 | @Field(() => String)
51 | @Column("varchar")
52 | priority: IssuePriority;
53 |
54 | @Field(() => Float)
55 | @Column("double precision")
56 | listPosition: number;
57 |
58 | @Field(() => String, { nullable: true })
59 | @Column("text", { nullable: true })
60 | description: string | null;
61 |
62 | @Field(() => String, { nullable: true })
63 | @Column("text", { nullable: true })
64 | descriptionText: string | null;
65 |
66 | @Field(() => Int, { nullable: true })
67 | @Column("integer", { nullable: true })
68 | estimate: number | null;
69 |
70 | @Field(() => Int, { nullable: true })
71 | @Column("integer", { nullable: true })
72 | timeSpent: number | null;
73 |
74 | @Field(() => Int, { nullable: true })
75 | @Column("integer", { nullable: true })
76 | timeRemaining: number | null;
77 |
78 | @Field()
79 | @CreateDateColumn({ type: "timestamp" })
80 | createdAt: Date;
81 |
82 | @Field()
83 | @UpdateDateColumn({ type: "timestamp" })
84 | updatedAt: Date;
85 |
86 | @Field()
87 | @Column("uuid")
88 | reporterId: string;
89 |
90 | @Field(() => Project)
91 | @ManyToOne(
92 | () => Project,
93 | project => project.issues
94 | )
95 | project: Project;
96 |
97 | @Field()
98 | @Column("integer")
99 | projectId: number;
100 |
101 | @Field(() => [Comment], { defaultValue: [] })
102 | @OneToMany(
103 | () => Comment,
104 | comment => comment.issue
105 | )
106 | comments: Comment[];
107 |
108 | @Field(() => [User])
109 | @ManyToMany(
110 | () => User,
111 | user => user.issues
112 | )
113 | @JoinTable()
114 | users: User[];
115 |
116 | @Field(() => [ID])
117 | @RelationId((issue: Issue) => issue.users)
118 | userIds: string[];
119 |
120 | @BeforeInsert()
121 | @BeforeUpdate()
122 | setDescriptionText = (): void => {
123 | if (this.description) {
124 | this.descriptionText = striptags(this.description);
125 | }
126 | };
127 | }
128 |
129 | export default Issue;
130 |
--------------------------------------------------------------------------------
/packages/api/src/models/Project.ts:
--------------------------------------------------------------------------------
1 | import {
2 | BaseEntity,
3 | PrimaryGeneratedColumn,
4 | Column,
5 | UpdateDateColumn,
6 | CreateDateColumn,
7 | OneToMany,
8 | Entity
9 | } from "typeorm";
10 | import { ObjectType, Field, ID } from "type-graphql";
11 | import is from "@/utils/validations";
12 | import { ProjectCategory } from "@/constants/project";
13 | import { User, Issue } from "@/models";
14 |
15 | @ObjectType()
16 | @Entity()
17 | class Project extends BaseEntity {
18 | static validations = {
19 | name: [is.required(), is.maxLength(100)],
20 | url: is.url(),
21 | category: [is.required(), is.oneOf(Object.values(ProjectCategory))]
22 | };
23 |
24 | @Field(() => ID)
25 | @PrimaryGeneratedColumn()
26 | id: number;
27 |
28 | @Field()
29 | @Column("varchar")
30 | name: string;
31 |
32 | @Field(() => String, { nullable: true })
33 | @Column("varchar", { nullable: true })
34 | url: string | null;
35 |
36 | @Field(() => String, { nullable: true })
37 | @Column("text", { nullable: true })
38 | description: string | null;
39 |
40 | @Field(() => String)
41 | @Column("varchar")
42 | category: ProjectCategory;
43 |
44 | @Field()
45 | @CreateDateColumn({ type: "timestamp" })
46 | createdAt: Date;
47 |
48 | @Field()
49 | @UpdateDateColumn({ type: "timestamp" })
50 | updatedAt: Date;
51 |
52 | @Field(() => [Issue], { defaultValue: [] })
53 | @OneToMany(
54 | () => Issue,
55 | issue => issue.project
56 | )
57 | issues: Issue[];
58 |
59 | @Field(() => [User], { defaultValue: [] })
60 | @OneToMany(
61 | () => User,
62 | user => user.project
63 | )
64 | users: User[];
65 | }
66 |
67 | export default Project;
68 |
--------------------------------------------------------------------------------
/packages/api/src/models/User.ts:
--------------------------------------------------------------------------------
1 | import {
2 | BaseEntity,
3 | PrimaryGeneratedColumn,
4 | Column,
5 | CreateDateColumn,
6 | UpdateDateColumn,
7 | OneToMany,
8 | ManyToMany,
9 | ManyToOne,
10 | RelationId,
11 | Entity
12 | } from "typeorm";
13 | import { ObjectType, Field, ID } from "type-graphql";
14 | import is from "@/utils/validations";
15 | import { Issue, Project, Comment } from "@/models";
16 |
17 | @ObjectType()
18 | @Entity()
19 | class User extends BaseEntity {
20 | static validations = {
21 | name: [is.required(), is.maxLength(100)],
22 | email: [is.required(), is.email(), is.maxLength(200)]
23 | };
24 |
25 | @Field(() => ID)
26 | @PrimaryGeneratedColumn("uuid")
27 | id: string;
28 |
29 | @Field()
30 | @Column("varchar")
31 | name: string;
32 |
33 | @Field()
34 | @Column("varchar")
35 | email: string;
36 |
37 | @Field()
38 | @Column("varchar", { length: 2000 })
39 | avatarUrl: string;
40 |
41 | @Field()
42 | @CreateDateColumn({ type: "timestamp" })
43 | createdAt: Date;
44 |
45 | @Field()
46 | @UpdateDateColumn({ type: "timestamp" })
47 | updatedAt: Date;
48 |
49 | @Field(() => [Comment])
50 | @OneToMany(
51 | () => Comment,
52 | comment => comment.user
53 | )
54 | comments: Comment[];
55 |
56 | @Field(() => [Issue])
57 | @ManyToMany(
58 | () => Issue,
59 | issue => issue.users
60 | )
61 | issues: Issue[];
62 |
63 | @Field(() => Project)
64 | @ManyToOne(
65 | () => Project,
66 | project => project.users
67 | )
68 | project: Project;
69 |
70 | @Field()
71 | @RelationId((user: User) => user.project)
72 | projectId: number;
73 | }
74 |
75 | export default User;
76 |
--------------------------------------------------------------------------------
/packages/api/src/models/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Comment } from "./Comment";
2 | export { default as Issue } from "./Issue";
3 | export { default as Project } from "./Project";
4 | export { default as User } from "./User";
5 |
--------------------------------------------------------------------------------
/packages/api/src/types/context.ts:
--------------------------------------------------------------------------------
1 | import { Request, Response } from "express";
2 | export interface GQLContext {
3 | req: Request;
4 | res: Response;
5 | }
6 |
--------------------------------------------------------------------------------
/packages/api/src/types/env.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace NodeJS {
2 | export interface ProcessEnv {
3 | DB_HOST: string;
4 | DB_PORT: string;
5 | DB_USERNAME: string;
6 | DB_PASSWORD: string;
7 | DB_DATABASE: string;
8 | DB_TEST_DATABASE: string;
9 | JWT_SECRET: string;
10 | NODE_ENV: string;
11 | SENTRY_DSN: string;
12 | }
13 | }
14 |
--------------------------------------------------------------------------------
/packages/api/src/types/express.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace Express {
2 | export interface Request {
3 | currentUser: import("@/models").User;
4 | }
5 | }
6 |
--------------------------------------------------------------------------------
/packages/api/src/utils/authToken.ts:
--------------------------------------------------------------------------------
1 | import { Request } from "express";
2 | import jwt, { SignOptions } from "jsonwebtoken";
3 | import { InvalidTokenError } from "@/errors";
4 |
5 | var isPlainObject = (value: any) => {
6 | return Object.prototype.toString.call(value) === "[object Object]";
7 | };
8 |
9 | export const signToken = (payload: object, options?: SignOptions): string =>
10 | jwt.sign(payload, process.env.JWT_SECRET, {
11 | expiresIn: "180 days",
12 | ...options
13 | });
14 |
15 | export const verifyToken = (token: string): { [key: string]: any } => {
16 | try {
17 | const payload = jwt.verify(token, process.env.JWT_SECRET);
18 |
19 | if (isPlainObject(payload)) {
20 | return payload as { [key: string]: any };
21 | }
22 | throw new Error();
23 | } catch (error) {
24 | throw new InvalidTokenError();
25 | }
26 | };
27 |
28 | export const getAuthTokenFromRequest = (req: Request): string | null => {
29 | const header = req.get("Authorization") || "";
30 | const [bearer, token] = header.split(" ");
31 | return bearer === "Bearer" && token ? token : null;
32 | };
33 |
--------------------------------------------------------------------------------
/packages/api/src/utils/javascript.ts:
--------------------------------------------------------------------------------
1 | export const pick = >(
2 | object: T,
3 | keys: string[]
4 | ): Partial => {
5 | return keys.reduce((obj: any, key) => {
6 | if (object && object.hasOwnProperty(key)) {
7 | obj[key] = object[key];
8 | }
9 | return obj;
10 | }, {});
11 | };
12 |
--------------------------------------------------------------------------------
/packages/api/src/utils/typeorm.ts:
--------------------------------------------------------------------------------
1 | import { FindOneOptions } from "typeorm/find-options/FindOneOptions";
2 |
3 | import { Project, User, Issue, Comment } from "@/models";
4 | import { EntityNotFoundError, BadUserInputError } from "@/errors";
5 | import { generateErrors } from "@/utils/validations";
6 |
7 | type EntityConstructor =
8 | | typeof Project
9 | | typeof User
10 | | typeof Issue
11 | | typeof Comment;
12 | type EntityInstance = Project | User | Issue | Comment;
13 |
14 | const entities: { [key: string]: EntityConstructor } = {
15 | Comment,
16 | Issue,
17 | Project,
18 | User,
19 | };
20 |
21 | export const findEntityOrThrow = async (
22 | Constructor: T,
23 | id: number | string,
24 | options?: FindOneOptions
25 | ): Promise> => {
26 | const instance = await Constructor.findOne({ where: { id }, ...options });
27 | if (!instance) {
28 | throw new EntityNotFoundError(Constructor.name);
29 | }
30 | return instance;
31 | };
32 |
33 | export const validateAndSaveEntity = async (
34 | instance: T
35 | ): Promise => {
36 | const Constructor = entities[instance.constructor.name];
37 |
38 | if ("validations" in Constructor) {
39 | const errorFields = generateErrors(instance, Constructor.validations);
40 |
41 | if (Object.keys(errorFields).length > 0) {
42 | throw new BadUserInputError({ fields: errorFields });
43 | }
44 | }
45 | return instance.save() as Promise;
46 | };
47 |
48 | export const createEntity = async (
49 | Constructor: T,
50 | input: Partial>
51 | ): Promise> => {
52 | // @ts-ignore
53 | const instance = Constructor.create(input);
54 | return validateAndSaveEntity(instance as InstanceType);
55 | };
56 |
57 | export const updateEntity = async (
58 | Constructor: T,
59 | id: number | string,
60 | input: Partial>
61 | ): Promise> => {
62 | const instance = await findEntityOrThrow(Constructor, id);
63 | Object.assign(instance, input);
64 | return validateAndSaveEntity(instance);
65 | };
66 |
67 | export const deleteEntity = async (
68 | Constructor: T,
69 | id: number | string
70 | ): Promise> => {
71 | const instance = await findEntityOrThrow(Constructor, id);
72 | await instance.remove();
73 | return instance;
74 | };
75 |
--------------------------------------------------------------------------------
/packages/api/src/utils/validations.ts:
--------------------------------------------------------------------------------
1 | type Value = any;
2 | type ErrorMessage = false | string;
3 | type FieldValues = { [key: string]: Value };
4 | type Validator = (value: Value, fieldValues?: FieldValues) => ErrorMessage;
5 | type FieldValidators = { [key: string]: Validator | Validator[] };
6 | type FieldErrors = { [key: string]: string };
7 |
8 | const is = {
9 | match: (testFn: Function, message = "") => (
10 | value: Value,
11 | fieldValues: FieldValues
12 | ): ErrorMessage => !testFn(value, fieldValues) && message,
13 |
14 | required: () => (value: Value): ErrorMessage =>
15 | isNilOrEmptyString(value) && "This field is required",
16 |
17 | minLength: (min: number) => (value: Value): ErrorMessage =>
18 | !!value && value.length < min && `Must be at least ${min} characters`,
19 |
20 | maxLength: (max: number) => (value: Value): ErrorMessage =>
21 | !!value && value.length > max && `Must be at most ${max} characters`,
22 |
23 | oneOf: (arr: any[]) => (value: Value): ErrorMessage =>
24 | !!value && !arr.includes(value) && `Must be one of: ${arr.join(", ")}`,
25 |
26 | notEmptyArray: () => (value: Value): ErrorMessage =>
27 | Array.isArray(value) &&
28 | value.length === 0 &&
29 | "Please add at least one item",
30 |
31 | email: () => (value: Value): ErrorMessage =>
32 | !!value && !/.+@.+\..+/.test(value) && "Must be a valid email",
33 |
34 | url: () => (value: Value): ErrorMessage =>
35 | !!value &&
36 | // eslint-disable-next-line no-useless-escape
37 | !/^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/.test(
38 | value
39 | ) &&
40 | "Must be a valid URL"
41 | };
42 |
43 | const isNilOrEmptyString = (value: Value): boolean =>
44 | value === undefined || value === null || value === "";
45 |
46 | export const generateErrors = (
47 | fieldValues: FieldValues,
48 | fieldValidators: FieldValidators
49 | ): FieldErrors => {
50 | const fieldErrors: FieldErrors = {};
51 |
52 | Object.entries(fieldValidators).forEach(([fieldName, validators]) => {
53 | [validators].flat().forEach(validator => {
54 | const errorMessage = validator(fieldValues[fieldName], fieldValues);
55 |
56 | if (errorMessage !== false && !fieldErrors[fieldName]) {
57 | fieldErrors[fieldName] = errorMessage;
58 | }
59 | });
60 | });
61 | return fieldErrors;
62 | };
63 |
64 | export default is;
65 |
--------------------------------------------------------------------------------
/packages/api/tsconfig.json:
--------------------------------------------------------------------------------
1 | {
2 | "compilerOptions": {
3 | "target": "ES2018",
4 | "module": "commonjs",
5 | "lib": ["dom", "es6", "es2017", "es2019", "esnext.asynciterable"],
6 | "sourceMap": true,
7 | "outDir": "./dist",
8 | "removeComments": true,
9 | "strict": true,
10 | "noImplicitAny": true,
11 | "strictNullChecks": true,
12 | "strictFunctionTypes": true,
13 | "strictBindCallApply": true,
14 | "strictPropertyInitialization": false,
15 | "noImplicitThis": true,
16 | "alwaysStrict": true,
17 | "noUnusedLocals": true,
18 | "noUnusedParameters": true,
19 | "noImplicitReturns": false,
20 | "noFallthroughCasesInSwitch": true,
21 | "moduleResolution": "node",
22 | "baseUrl": "src",
23 | "paths": {
24 | "*": ["./*"],
25 | "@/*": ["./*"]
26 | },
27 | "types": ["node"],
28 | "allowSyntheticDefaultImports": true,
29 | "esModuleInterop": true,
30 | "experimentalDecorators": true,
31 | "emitDecoratorMetadata": true,
32 | "forceConsistentCasingInFileNames": true
33 | },
34 | "exclude": ["node_modules"],
35 | "include": ["./src/**/*.ts",]
36 | }
37 |
--------------------------------------------------------------------------------
/packages/api/tslint.json:
--------------------------------------------------------------------------------
1 | {
2 | "defaultSeverity": "error",
3 | "extends": ["tslint:latest", "tslint-config-prettier"],
4 | "jsRules": {},
5 | "rules": {
6 | "no-console": false,
7 | "member-access": false,
8 | "object-literal-sort-keys": false,
9 | "ordered-imports": false,
10 | "interface-name": false
11 | },
12 | "rulesDirectory": []
13 | }
14 |
--------------------------------------------------------------------------------
/packages/web/.eslintrc.json:
--------------------------------------------------------------------------------
1 | {
2 | "root": true,
3 | "env": {
4 | "node": true
5 | },
6 | "extends": [
7 | "plugin:vue/essential",
8 | "eslint:recommended",
9 | "@vue/typescript/recommended",
10 | "@vue/prettier",
11 | "@vue/prettier/@typescript-eslint"
12 | ],
13 | "parserOptions": {
14 | "ecmaVersion": 2020
15 | },
16 | "rules": {},
17 | "overrides": [
18 | {
19 | "files": [
20 | "**/__tests__/*.{j,t}s?(x)",
21 | "**/tests/unit/**/*.spec.{j,t}s?(x)"
22 | ],
23 | "env": {
24 | "jest": true
25 | }
26 | }
27 | ]
28 | }
29 |
--------------------------------------------------------------------------------
/packages/web/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | "tabWidth": 2,
3 | "printWidth": 80,
4 | "semi": false,
5 | "singleQuote": true
6 | }
7 |
--------------------------------------------------------------------------------
/packages/web/.turbo/turbo-build.log:
--------------------------------------------------------------------------------
1 |
2 | > web@1.0.0 build /Users/moezbouaggad/personal/jira_clone/packages/web
3 | > vue-tsc && vite build
4 |
5 | vite v4.3.9 building for production...
6 | transforming...
7 |
8 | warn - The `purge`/`content` options have changed in Tailwind CSS v3.0.
9 | warn - Update your configuration file to eliminate this warning.
10 | warn - https://tailwindcss.com/docs/upgrade-guide#configure-content-sources
11 | ✓ 477 modules transformed.
12 | rendering chunks...
13 | computing gzip size...
14 | dist/index.html 1.31 kB │ gzip: 0.49 kB
15 | dist/assets/mountains-2f37b2ef.jpg 18.82 kB
16 | dist/assets/FullIIssueDetails-1164bd8e.css 0.04 kB │ gzip: 0.06 kB
17 | dist/assets/Settings-949cda7e.css 0.28 kB │ gzip: 0.17 kB
18 | dist/assets/Board-62c35ebb.css 0.56 kB │ gzip: 0.34 kB
19 | dist/assets/index-ce56cd0d.css 50.59 kB │ gzip: 10.09 kB
20 | dist/assets/FullIIssueDetails-48cb7d41.js 0.63 kB │ gzip: 0.42 kB
21 | dist/assets/Project-25b92695.js 1.09 kB │ gzip: 0.66 kB
22 | dist/assets/Settings-460060c3.js 4.94 kB │ gzip: 2.28 kB
23 | dist/assets/Board-39ca9999.js 51.21 kB │ gzip: 17.19 kB
24 | dist/assets/index-a4d3e490.js 629.49 kB │ gzip: 190.56 kB
25 |
26 | (!) Some chunks are larger than 500 kBs after minification. Consider:
27 | - Using dynamic import() to code-split the application
28 | - Use build.rollupOptions.output.manualChunks to improve chunking: https://rollupjs.org/configuration-options/#output-manualchunks
29 | - Adjust chunk size limit for this warning via build.chunkSizeWarningLimit.
30 | ✓ built in 2.52s
31 |
--------------------------------------------------------------------------------
/packages/web/babel.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | presets: ['@vue/cli-plugin-babel/preset']
3 | }
4 |
--------------------------------------------------------------------------------
/packages/web/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Jira Clone
10 |
42 |
44 |
45 |
46 |
47 |
48 |
--------------------------------------------------------------------------------
/packages/web/jest.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel'
3 | }
4 |
--------------------------------------------------------------------------------
/packages/web/package.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "web",
3 | "version": "1.0.0",
4 | "private": true,
5 | "scripts": {
6 | "dev": "vite",
7 | "build": "vue-tsc && vite build",
8 | "tc": "vue-tsc --noEmit"
9 | },
10 | "dependencies": {
11 | "@apollo/client": "^3.7.16",
12 | "@vue/apollo-composable": "^4.0.0-beta.7",
13 | "autosize": "^6.0.1",
14 | "color": "^4.2.3",
15 | "dayjs": "^1.8.21",
16 | "graphql": "^16.6.0",
17 | "graphql-tag": "^2.10.3",
18 | "lodash.omit": "^4.5.0",
19 | "lodash.pick": "^4.4.0",
20 | "lodash.xor": "^4.5.0",
21 | "mitt": "^3.0.0",
22 | "quill": "^1.3.7",
23 | "tailwindcss": "^3.3.2",
24 | "throttle-debounce": "^5.0.0",
25 | "tippy.js": "^6.0.3",
26 | "toastify-js": "^1.7.0",
27 | "vue": "^3.3.4",
28 | "vue-content-loader": "^2.0.1",
29 | "vue-router": "^4.2.2",
30 | "vue3-smooth-dnd": "^0.0.5"
31 | },
32 | "devDependencies": {
33 | "@types/color": "^3.0.1",
34 | "@types/lodash.omit": "^4.5.6",
35 | "@types/lodash.pick": "^4.4.6",
36 | "@types/lodash.xor": "^4.5.6",
37 | "@types/quill": "^2.0.3",
38 | "@types/throttle-debounce": "^5.0.0",
39 | "@vitejs/plugin-vue": "^4.2.3",
40 | "autoprefixer": "^10.4.14",
41 | "postcss": "^8.4.24",
42 | "prettier": "^2.8.8",
43 | "resize-observer-polyfill": "^1.5.1",
44 | "sass": "^1.63.5",
45 | "typescript": "^5.0.2",
46 | "vite": "^4.3.9",
47 | "vue-tsc": "^1.8.0"
48 | }
49 | }
--------------------------------------------------------------------------------
/packages/web/postcss.config.cjs:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | plugins: {
3 | tailwindcss: {},
4 | autoprefixer: {},
5 | },
6 | }
--------------------------------------------------------------------------------
/packages/web/public/_redirects:
--------------------------------------------------------------------------------
1 | /* /index.html 200
--------------------------------------------------------------------------------
/packages/web/public/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Datlyfe/jira_clone/72c7a35b3679a30bd8de0edf10d396bf627b7065/packages/web/public/favicon.png
--------------------------------------------------------------------------------
/packages/web/public/fonts/CircularStd-Black.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Datlyfe/jira_clone/72c7a35b3679a30bd8de0edf10d396bf627b7065/packages/web/public/fonts/CircularStd-Black.woff
--------------------------------------------------------------------------------
/packages/web/public/fonts/CircularStd-Black.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Datlyfe/jira_clone/72c7a35b3679a30bd8de0edf10d396bf627b7065/packages/web/public/fonts/CircularStd-Black.woff2
--------------------------------------------------------------------------------
/packages/web/public/fonts/CircularStd-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Datlyfe/jira_clone/72c7a35b3679a30bd8de0edf10d396bf627b7065/packages/web/public/fonts/CircularStd-Bold.woff
--------------------------------------------------------------------------------
/packages/web/public/fonts/CircularStd-Bold.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Datlyfe/jira_clone/72c7a35b3679a30bd8de0edf10d396bf627b7065/packages/web/public/fonts/CircularStd-Bold.woff2
--------------------------------------------------------------------------------
/packages/web/public/fonts/CircularStd-Book.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Datlyfe/jira_clone/72c7a35b3679a30bd8de0edf10d396bf627b7065/packages/web/public/fonts/CircularStd-Book.woff
--------------------------------------------------------------------------------
/packages/web/public/fonts/CircularStd-Book.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Datlyfe/jira_clone/72c7a35b3679a30bd8de0edf10d396bf627b7065/packages/web/public/fonts/CircularStd-Book.woff2
--------------------------------------------------------------------------------
/packages/web/public/fonts/CircularStd-Medium.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Datlyfe/jira_clone/72c7a35b3679a30bd8de0edf10d396bf627b7065/packages/web/public/fonts/CircularStd-Medium.woff
--------------------------------------------------------------------------------
/packages/web/public/fonts/CircularStd-Medium.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Datlyfe/jira_clone/72c7a35b3679a30bd8de0edf10d396bf627b7065/packages/web/public/fonts/CircularStd-Medium.woff2
--------------------------------------------------------------------------------
/packages/web/public/robots.txt:
--------------------------------------------------------------------------------
1 |
2 | User-agent: *
3 | Disallow:
--------------------------------------------------------------------------------
/packages/web/src/App.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
76 |
--------------------------------------------------------------------------------
/packages/web/src/assets/img/mountains.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Datlyfe/jira_clone/72c7a35b3679a30bd8de0edf10d396bf627b7065/packages/web/src/assets/img/mountains.jpg
--------------------------------------------------------------------------------
/packages/web/src/auth/authenticate.ts:
--------------------------------------------------------------------------------
1 | import { createGuestAccount, fetchMe } from '../graphql/queries/auth'
2 | import { apolloClient } from '../graphql/client'
3 | import { storeAuthToken } from '../utils/authToken'
4 | import store from '../store'
5 |
6 | export const authenticate = async () => {
7 | try {
8 | const result = await apolloClient.query<{ createGuestAccount: string }>({
9 | query: createGuestAccount
10 | })
11 | const { createGuestAccount: authToken } = result.data
12 | storeAuthToken(authToken)
13 | store.mutations.setIsAuthenticated(true)
14 | const currentUser = await fetchMe()
15 | store.mutations.setCurrentUser(currentUser)
16 | } catch (error) {
17 | // toast.error(error);
18 | console.error(error)
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/packages/web/src/components/ErrorPage.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
There’s been a glitch…
7 |
8 | We’re not quite sure what went wrong. Please contact us or try looking
9 | on our
10 | Help Center
11 | if you need a hand.
12 |
13 |
14 |
15 |
17 |
18 |
27 |
28 |
41 |
--------------------------------------------------------------------------------
/packages/web/src/components/Loader.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
11 |
12 |
13 |
14 |
32 |
33 |
34 |
35 |
36 |
42 |
60 |
61 |
62 |
63 |
64 |
70 |
88 |
89 |
90 |
91 |
92 |
98 |
116 |
117 |
118 |
119 |
120 |
126 |
144 |
145 |
146 |
147 |
148 |
154 |
172 |
173 |
174 |
175 |
176 |
182 |
200 |
201 |
202 |
203 |
204 |
210 |
228 |
229 |
230 |
231 |
232 |
234 |
235 |
240 |
--------------------------------------------------------------------------------
/packages/web/src/components/Modals/Confirm.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | {{ title }}
5 |
6 |
{{ message }}
7 |
8 | {{ confirmText }}
15 | Cancel
18 |
19 |
21 |
22 |
64 |
--------------------------------------------------------------------------------
/packages/web/src/components/Modals/Modal.vue:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
16 |
66 |
67 |
110 |
--------------------------------------------------------------------------------
/packages/web/src/components/Modals/Modals.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
42 |
43 |
44 |
127 |
--------------------------------------------------------------------------------
/packages/web/src/components/Navigation/NavbarLeft.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
7 |
13 |
14 |
21 |
24 |
31 |
34 |
35 |
36 |
49 |
50 |
51 |
52 |
65 |
66 |
80 |
95 |
97 |
98 |
99 |
134 |
135 |
140 |
--------------------------------------------------------------------------------
/packages/web/src/components/Navigation/Navigation.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
38 |
39 |
48 |
--------------------------------------------------------------------------------
/packages/web/src/components/Navigation/Resizer.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
7 |
8 |
9 |
10 |
13 |
19 |
20 |
21 |
23 |
24 |
44 |
45 |
138 |
--------------------------------------------------------------------------------
/packages/web/src/components/Navigation/Sidebar.ts:
--------------------------------------------------------------------------------
1 | export const navLinks = [
2 | {
3 | name: 'Kanban Board',
4 | icon: 'board',
5 | to: { name: 'board' }
6 | },
7 | {
8 | name: 'Project settings',
9 | icon: 'cog',
10 | to: { name: 'settings' }
11 | },
12 | {
13 | name: 'Releases',
14 | icon: 'ship'
15 | },
16 | {
17 | name: 'Issues and filters',
18 | icon: 'filters'
19 | },
20 | {
21 | name: 'Pages',
22 | icon: 'page'
23 | },
24 | {
25 | name: 'Reports',
26 | icon: 'report'
27 | },
28 | {
29 | name: 'Components',
30 | icon: 'component'
31 | }
32 | ]
33 |
--------------------------------------------------------------------------------
/packages/web/src/components/Navigation/Sidebar.vue:
--------------------------------------------------------------------------------
1 |
2 |
43 |
44 |
45 |
71 |
72 |
114 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Filters.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
12 |
13 |
14 |
30 |
Only My Issues
36 |
Recently Updated
43 |
47 |
49 |
50 |
111 |
112 |
120 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Issue/Issue.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
7 |
8 | {{ issue.title }}
9 |
10 |
11 |
12 |
24 |
25 |
34 |
35 |
36 |
38 |
39 |
89 |
90 |
101 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Issue/IssueDetails/AssigneesReporter.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Reporter
5 |
6 |
17 |
18 |
19 |
20 |
25 |
26 | {{ user.name }}
27 |
28 |
30 |
31 |
32 |
33 |
34 |
35 | {{ user.name }}
36 |
37 |
39 |
40 |
41 |
42 | Assignees
43 |
44 |
56 |
57 |
58 |
59 |
64 |
65 | {{ user.name }}
66 |
67 |
74 |
76 |
77 |
78 |
79 |
80 |
81 | {{ user.name }}
82 |
83 |
85 |
86 |
88 |
89 |
143 |
144 |
145 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Issue/IssueDetails/Comment.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
9 |
10 |
11 |
12 |
17 |
18 |
23 |
24 |
25 |
32 |
33 |
40 | Save
41 |
42 |
43 | Cancel
44 |
45 |
46 |
47 |
48 |
49 |
54 | Add a comment...
55 |
56 |
57 |
58 |
59 |
63 | Edit
64 |
65 |
69 | Delete
70 |
71 |
72 |
73 |
74 |
76 |
77 |
205 |
206 |
216 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Issue/IssueDetails/Description.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
Description
4 |
11 |
12 |
18 | Save
20 | Cancel
21 |
22 |
23 |
25 |
26 |
77 |
78 |
79 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Issue/IssueDetails/Priority.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | Priority
5 |
6 |
16 |
17 |
18 |
19 |
20 |
21 |
22 | {{ label }}
23 |
24 |
26 |
27 |
28 |
29 |
30 |
31 |
32 | {{ label }}
33 |
34 |
36 |
37 |
39 |
40 |
79 |
80 |
81 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Issue/IssueDetails/Status.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | status
5 |
6 |
17 |
18 |
22 | {{ label }}
23 |
24 |
25 |
26 |
27 |
28 | {{ label }}
29 |
30 |
32 |
33 |
35 |
36 |
72 |
73 |
74 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Issue/IssueDetails/Title.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
12 |
13 |
48 |
49 |
54 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Issue/IssueDetails/Type.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
20 | {{ `${label}-${issueId}` }}
21 |
22 |
23 |
24 |
25 |
26 |
27 |
28 | {{ label }}
29 |
30 |
32 |
33 |
34 |
35 |
74 |
75 |
76 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Issue/IssueSearch/IssueSearch.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
14 |
18 |
20 |
21 |
22 |
23 | Recent Issues
24 |
25 |
30 |
31 |
32 |
33 | Matching Issues
34 |
35 |
40 |
41 |
45 |
46 |
47 | We couldn't find anything matching your search
48 |
49 |
Try again with a different term.
50 |
51 |
52 |
54 |
55 |
118 |
119 |
120 |
121 |
122 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Issue/IssueSearch/SearchResult.vue:
--------------------------------------------------------------------------------
1 |
2 |
6 |
7 |
8 |
{{ issue.title }}
9 |
10 | {{ `${issue.type}-${issue.id}` }}
11 |
12 |
13 |
15 |
16 |
50 |
51 |
52 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/IssueLoader.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
24 |
25 |
26 |
27 |
35 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Lists/List.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
6 | {{ IssueStatusCopy[status] }}
7 | {{ formattedIssuesCount }}
8 |
9 |
10 |
19 |
20 |
22 |
23 |
24 |
26 |
27 |
135 |
136 |
143 |
144 |
159 |
--------------------------------------------------------------------------------
/packages/web/src/components/Project/Lists/Lists.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
9 |
10 |
11 |
12 |
13 |
108 |
--------------------------------------------------------------------------------
/packages/web/src/components/shared/Avatar/Avatar.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
62 |
--------------------------------------------------------------------------------
/packages/web/src/components/shared/Breadcrumbs/Breadcrumbs.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 | /
5 | {{ item }}
6 |
7 |
8 |
9 |
10 |
22 |
--------------------------------------------------------------------------------
/packages/web/src/components/shared/Button/Button.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
19 |
21 |
22 |
23 |
24 |
79 |
80 |
157 |
--------------------------------------------------------------------------------
/packages/web/src/components/shared/Icon/Icon.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
8 |
9 |
10 |
41 |
--------------------------------------------------------------------------------
/packages/web/src/components/shared/Input/Input.vue:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
16 |
60 |
61 |
138 |
--------------------------------------------------------------------------------
/packages/web/src/components/shared/Select/Dropdown.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
12 |
13 |
14 |
23 | {{ option.label }}
24 |
25 |
26 |
33 | {{
34 | isCreatingOption
35 | ? `Creating "${searchValue}"...`
36 | : `Create
37 | "${searchValue}"`
38 | }}
39 |
40 |
41 |
42 |
43 | No results
44 |
45 |
47 |
48 |
272 |
273 |
329 |
--------------------------------------------------------------------------------
/packages/web/src/components/shared/TextEditor/TextEditor.vue:
--------------------------------------------------------------------------------
1 |
2 |
14 |
15 |
16 |
106 |
107 |
145 |
--------------------------------------------------------------------------------
/packages/web/src/components/shared/TextEditor/editor.ts:
--------------------------------------------------------------------------------
1 | import { QuillOptionsStatic } from 'quill'
2 |
3 | export const quillConfig: QuillOptionsStatic = {
4 | theme: 'snow',
5 | modules: {
6 | toolbar: [
7 | ['bold', 'italic', 'underline', 'strike'],
8 | ['blockquote', 'code-block'],
9 | [{ list: 'ordered' }, { list: 'bullet' }],
10 | [{ header: [1, 2, 3, 4, 5, 6, false] }],
11 | [{ color: [] }, { background: [] }],
12 | ['clean']
13 | ]
14 | }
15 | }
16 |
--------------------------------------------------------------------------------
/packages/web/src/components/shared/Textarea/Textarea.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
13 |
14 |
48 |
49 |
62 |
76 |
--------------------------------------------------------------------------------
/packages/web/src/fonts.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: 'CircularStd';
3 | src: url('/fonts/CircularStd-Medium.woff2') format('woff2'),
4 | url('/fonts/CircularStd-Medium.woff') format('woff');
5 | font-weight: 500;
6 | font-style: normal;
7 | font-display: swap;
8 | unicode-range: U+000-5FF;
9 | }
10 |
11 | @font-face {
12 | font-family: 'CircularStd';
13 | src: url('/fonts/CircularStd-Bold.woff2') format('woff2'),
14 | url('/fonts/CircularStd-Bold.woff') format('woff');
15 | font-weight: 700;
16 | font-style: normal;
17 | font-display: swap;
18 | unicode-range: U+000-5FF;
19 | }
20 |
21 | @font-face {
22 | font-family: 'CircularStd';
23 | src: url('/fonts/CircularStd-Black.woff2') format('woff2'),
24 | url('/fonts/CircularStd-Black.woff') format('woff');
25 | font-weight: 900;
26 | font-style: normal;
27 | font-display: swap;
28 | unicode-range: U+000-5FF;
29 | }
30 |
31 | @font-face {
32 | font-family: 'CircularStd';
33 | src: url('/fonts/CircularStd-Book.woff2') format('woff2'),
34 | url('/fonts/CircularStd-Book.woff') format('woff');
35 | font-weight: 400;
36 | font-style: normal;
37 | font-display: swap;
38 | unicode-range: U+000-5FF;
39 | }
40 |
--------------------------------------------------------------------------------
/packages/web/src/graphql/client.ts:
--------------------------------------------------------------------------------
1 | import { ApolloClient, InMemoryCache, HttpLink } from '@apollo/client/core'
2 | import { setContext } from '@apollo/client/link/context'
3 | import { getStoredAuthToken } from '@/utils/authToken'
4 |
5 | const httpLink = new HttpLink({
6 | uri: import.meta.env.DEV
7 | ? 'http://localhost:5001/graphql'
8 | : 'https://jira-clone-api.onrender.com/graphql',
9 | })
10 |
11 | const authLink = setContext((_, { headers }) => {
12 | return {
13 | headers: {
14 | ...headers,
15 | Authorization: getStoredAuthToken()
16 | ? `Bearer ${getStoredAuthToken()}`
17 | : undefined,
18 | },
19 | }
20 | })
21 |
22 | const cache = new InMemoryCache()
23 |
24 | export const apolloClient = new ApolloClient({
25 | link: authLink.concat(httpLink),
26 | cache,
27 | })
28 |
--------------------------------------------------------------------------------
/packages/web/src/graphql/queries/auth.ts:
--------------------------------------------------------------------------------
1 | import gql from 'graphql-tag'
2 | import { apolloClient } from '../client'
3 | import { User } from '@/types/user'
4 |
5 | export const createGuestAccount = gql`
6 | query createGuestAccount {
7 | createGuestAccount
8 | }
9 | `
10 |
11 | export const currentUser = gql`
12 | query currentUser {
13 | currentUser {
14 | id
15 | name
16 | avatarUrl
17 | }
18 | }
19 | `
20 |
21 | export const fetchMe = async (): Promise => {
22 | try {
23 | const res = await apolloClient.query<{ currentUser: User }>({
24 | query: currentUser
25 | })
26 | return Promise.resolve(res.data.currentUser)
27 | } catch (error) {
28 | return Promise.reject(error)
29 | }
30 | }
31 |
--------------------------------------------------------------------------------
/packages/web/src/graphql/queries/comment.ts:
--------------------------------------------------------------------------------
1 | import gql from 'graphql-tag'
2 |
3 | export const createComment = gql`
4 | mutation createComment($comment: CommentInput!) {
5 | createComment(comment: $comment) {
6 | id
7 | body
8 | issueId
9 | userId
10 | createdAt
11 | updatedAt
12 | }
13 | }
14 | `
15 |
16 | export const deleteComment = gql`
17 | mutation deleteComment($commentId: String!) {
18 | deleteComment(id: $commentId) {
19 | body
20 | }
21 | }
22 | `
23 | export const updateComment = gql`
24 | mutation updateComment($commentId: String!, $comment: CommentInput!) {
25 | updateComment(comment: $comment, id: $commentId) {
26 | body
27 | }
28 | }
29 | `
30 |
--------------------------------------------------------------------------------
/packages/web/src/graphql/queries/issue.ts:
--------------------------------------------------------------------------------
1 | import gql from 'graphql-tag'
2 |
3 | export const getIssueWithUsersAndComments = gql`
4 | query getIssue($id: Int!) {
5 | getIssueWithUsersAndComments(issueId: $id) {
6 | id
7 | title
8 | description
9 | type
10 | status
11 | priority
12 | reporterId
13 | listPosition
14 | createdAt
15 | updatedAt
16 | userIds
17 | comments {
18 | id
19 | body
20 | updatedAt
21 | issueId
22 | userId
23 | createdAt
24 | user {
25 | id
26 | name
27 | avatarUrl
28 | }
29 | }
30 | }
31 | }
32 | `
33 |
34 | export const getProjectIssues = gql`
35 | query getProjectIssues($searchTerm: String) {
36 | getProjectIssues(searchTerm: $searchTerm) {
37 | id
38 | title
39 | description
40 | type
41 | reporterId
42 | status
43 | priority
44 | listPosition
45 | createdAt
46 | updatedAt
47 | userIds
48 | }
49 | }
50 | `
51 |
52 | export const createIssue = gql`
53 | mutation createIssue($issue: IssueCreateInput!) {
54 | createIssue(issue: $issue) {
55 | id
56 | title
57 | type
58 | reporterId
59 | status
60 | createdAt
61 | updatedAt
62 | }
63 | }
64 | `
65 |
66 | export const updateIssueMutation = gql`
67 | mutation updateIssue($issueId: Float!, $issue: IssueUpdateInput!) {
68 | updateIssue(id: $issueId, issue: $issue) {
69 | id
70 | title
71 | description
72 | type
73 | reporterId
74 | status
75 | priority
76 | listPosition
77 | createdAt
78 | updatedAt
79 | userIds
80 | }
81 | }
82 | `
83 |
84 | export const deleteIssue = gql`
85 | mutation deleteIssue($issueId: Float!) {
86 | deleteIssue(id: $issueId)
87 | }
88 | `
89 |
--------------------------------------------------------------------------------
/packages/web/src/graphql/queries/project.ts:
--------------------------------------------------------------------------------
1 | import gql from 'graphql-tag'
2 |
3 | export const getProjectWithUsersAndIssues = gql`
4 | {
5 | getProjectWithUsersAndIssues {
6 | id
7 | name
8 | url
9 | description
10 | category
11 | createdAt
12 | updatedAt
13 | users {
14 | id
15 | name
16 | avatarUrl
17 | projectId
18 | }
19 | issues {
20 | id
21 | title
22 | description
23 | type
24 | status
25 | priority
26 | listPosition
27 | createdAt
28 | updatedAt
29 | userIds
30 | }
31 | }
32 | }
33 | `
34 |
35 | export const updateProject = gql`
36 | mutation updateProject($project: ProjectInput!) {
37 | updateProject(project: $project) {
38 | id
39 | }
40 | }
41 | `
42 |
--------------------------------------------------------------------------------
/packages/web/src/hooks/useClipboard.ts:
--------------------------------------------------------------------------------
1 | import { ref, Ref } from 'vue'
2 |
3 | const copyToClipboard = async (text: string) => {
4 | if (navigator.clipboard) {
5 | try {
6 | return navigator.clipboard.writeText(text)
7 | } catch (err) {
8 | throw err !== undefined
9 | ? err
10 | : new DOMException('The request is not allowed', 'NotAllowedError')
11 | }
12 | }
13 |
14 | const span = document.createElement('span')
15 | span.textContent = text
16 | span.style.whiteSpace = 'pre'
17 | document.body.appendChild(span)
18 |
19 | const selection = window.getSelection()
20 | const range = window.document.createRange()
21 | selection && selection.removeAllRanges()
22 | range.selectNode(span)
23 | selection && selection.addRange(range)
24 |
25 | let success = false
26 | try {
27 | success = window.document.execCommand('copy')
28 | } catch (err) {
29 | console.error(err)
30 | }
31 |
32 | selection && selection.removeAllRanges()
33 | window.document.body.removeChild(span)
34 |
35 | return success
36 | ? Promise.resolve()
37 | : Promise.reject(
38 | new DOMException('The request is not allowed', 'NotAllowedError')
39 | )
40 | }
41 |
42 | export const useClipboard = (): [
43 | Ref,
44 | (text: string) => Promise
45 | ] => {
46 | const clipboard = ref('')
47 |
48 | const setClipboard = (text: string) => {
49 | clipboard.value = text
50 | return copyToClipboard(text)
51 | }
52 |
53 | return [clipboard, setClipboard]
54 | }
55 |
--------------------------------------------------------------------------------
/packages/web/src/hooks/useOutsideClick.ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable @typescript-eslint/no-explicit-any */
2 | import { Ref, onMounted, onUnmounted } from 'vue'
3 |
4 | export const useOutsideClick = (
5 | $root: Ref,
6 | $bound: Ref,
7 | onOutsideClick: Function
8 | ) => {
9 | const handleClickOutside = (e: MouseEvent) => {
10 | if ($bound.value && !$bound.value.contains(e.target as any)) {
11 | onOutsideClick()
12 | }
13 | }
14 | const handleKeydown = (e: KeyboardEvent) => {
15 | if (e.key === 'Escape') {
16 | onOutsideClick()
17 | }
18 | }
19 | onMounted(() => {
20 | ;($root.value as HTMLElement)?.addEventListener(
21 | 'mousedown',
22 | handleClickOutside
23 | )
24 | ;($root.value as HTMLElement)?.addEventListener('keydown', handleKeydown)
25 | })
26 |
27 | onUnmounted(() => {
28 | ;($root.value as HTMLElement)?.removeEventListener(
29 | 'mousedown',
30 | handleClickOutside
31 | )
32 | ;($root.value as HTMLElement)?.removeEventListener('keydown', handleKeydown)
33 | })
34 | }
35 |
--------------------------------------------------------------------------------
/packages/web/src/main.scss:
--------------------------------------------------------------------------------
1 | @import './fonts.scss';
2 |
3 | @tailwind base;
4 | @tailwind components;
5 | @tailwind utilities;
6 |
7 | @import 'tippy.js/dist/tippy.css';
8 | @import 'toastify-js/src/toastify.css';
9 |
10 | // @import '~toastify-js/src/toastify.css';
11 |
12 | body {
13 | line-height: 1.2;
14 | text-rendering: optimizeLegibility;
15 | }
16 |
17 | #root {
18 | position: absolute;
19 | width: 100vw;
20 | height: 100vh;
21 | overflow: hidden;
22 | display: flex;
23 | flex-direction: column;
24 | }
25 | #app-frame {
26 | position: relative;
27 | overflow: hidden;
28 | width: 100%;
29 | height: 100%;
30 | display: flex;
31 | }
32 | #content {
33 | flex: 1;
34 | min-width: 0;
35 | z-index: 0;
36 | overflow: auto;
37 | will-change: padding-left;
38 | transition: padding-left 300ms cubic-bezier(0.2, 0, 0, 1) 0s;
39 | }
40 |
41 | .page {
42 | min-width: 800px;
43 | }
44 |
45 | button,
46 | body,
47 | textarea,
48 | input {
49 | font-family: 'CircularStd', -apple-system, BlinkMacSystemFont, 'Segoe UI',
50 | Roboto, 'Helvetica Neue', Helvetica, Arial, sans-serif, 'CircularStd';
51 | }
52 | svg {
53 | outline: none;
54 | }
55 |
56 | @keyframes fadeIn {
57 | from {
58 | opacity: 0;
59 | }
60 |
61 | to {
62 | opacity: 1;
63 | }
64 | }
65 |
66 | @keyframes spin {
67 | from {
68 | transform: rotate(0deg);
69 | }
70 | to {
71 | transform: rotate(360deg);
72 | }
73 | }
74 |
75 | .spinner {
76 | animation: spin both infinite 0.7s;
77 | }
78 |
79 | .fadeIn {
80 | animation: fadeIn 0.2s both;
81 | }
82 |
--------------------------------------------------------------------------------
/packages/web/src/main.ts:
--------------------------------------------------------------------------------
1 | import { createApp } from 'vue'
2 | import App from './App.vue'
3 | import router from './router'
4 | import { DefaultApolloClient } from '@vue/apollo-composable'
5 | import { apolloClient } from '@/graphql/client'
6 | import { registerSharedComponents } from '@/plugins/register'
7 | import { loadSprites } from '@/plugins/loadSvg'
8 |
9 | // import '@/plugins/toast'
10 | import { registerTippy } from '@/plugins/tippy'
11 | import 'quill/dist/quill.snow.css'
12 | import '@/main.scss'
13 |
14 | loadSprites()
15 |
16 | const app = createApp(App)
17 |
18 | registerSharedComponents(app)
19 | registerTippy(app)
20 |
21 | app.provide(DefaultApolloClient, apolloClient)
22 | app.use(router)
23 |
24 | app.mount('#app')
25 |
--------------------------------------------------------------------------------
/packages/web/src/plugins/loadSvg.ts:
--------------------------------------------------------------------------------
1 | export const loadSprites = () => {
2 | const xmlFile = 'sprite.xml'
3 | const loadXML = new XMLHttpRequest()
4 | loadXML.onload = () => {
5 | const xmlString = loadXML.responseText
6 | const parser = new DOMParser()
7 | const mySpritesDoc = parser.parseFromString(xmlString, 'text/xml')
8 | .documentElement
9 | const addSprites = mySpritesDoc.childNodes
10 | for (let k = 0; k < addSprites.length; k++) {
11 | const sprite = addSprites.item(k).cloneNode(true)
12 | document.getElementById('spriteDefs')?.appendChild(sprite)
13 | }
14 | }
15 | loadXML.open('GET', window.location.origin + '/' + xmlFile, true)
16 | loadXML.send()
17 | }
18 |
--------------------------------------------------------------------------------
/packages/web/src/plugins/register.ts:
--------------------------------------------------------------------------------
1 | import { App } from 'vue'
2 | import Avatar from '@/components/shared/Avatar/Avatar.vue'
3 | import Breadcrumbs from '@/components/shared/Breadcrumbs/Breadcrumbs.vue'
4 | import Button from '@/components/shared/Button/Button.vue'
5 | import Icon from '@/components/shared/Icon/Icon.vue'
6 | import Input from '@/components/shared/Input/Input.vue'
7 | import Select from '@/components/shared/Select/Select.vue'
8 | import TextEditor from '@/components/shared/TextEditor/TextEditor.vue'
9 | import Textarea from '@/components/shared/Textarea/Textarea.vue'
10 |
11 | const sharedComponents = [
12 | Avatar,
13 | Breadcrumbs,
14 | Button,
15 | Icon,
16 | Input,
17 | Select,
18 | TextEditor,
19 | Textarea
20 | ]
21 |
22 | export const registerSharedComponents = (app: App) => {
23 | // eslint-disable-next-line
24 | sharedComponents.forEach((c: any) => app.component(c.name, c))
25 | }
26 |
--------------------------------------------------------------------------------
/packages/web/src/plugins/tippy.ts:
--------------------------------------------------------------------------------
1 | import { App, Directive } from 'vue'
2 | import tippy, { Placement, ReferenceElement } from 'tippy.js'
3 |
4 | const tippyDirective: Directive = {
5 | mounted: function(el, bind) {
6 | const { value } = bind
7 | let offset = [0, 20],
8 | content = '',
9 | placement: Placement = 'right'
10 | if (typeof value === 'object') {
11 | content = value.content
12 | offset = value.offset || [0, 20]
13 | placement = value.placement || 'right'
14 | }
15 | if (typeof value === 'string') {
16 | content = value as string
17 | }
18 | tippy(el, {
19 | content,
20 | placement,
21 | offset: offset as [number, number]
22 | })
23 | },
24 | unmounted: function(el) {
25 | ;(el as ReferenceElement)._tippy?.destroy()
26 | }
27 | }
28 |
29 | export const registerTippy = (app: App) =>
30 | app.directive('tippy', tippyDirective)
31 |
--------------------------------------------------------------------------------
/packages/web/src/plugins/toast.ts:
--------------------------------------------------------------------------------
1 | import Toastify from 'toastify-js'
2 |
3 | const commonConfig = {
4 | newWindow: true,
5 | close: true,
6 | gravity: 'top',
7 | position: 'right',
8 | stopOnFocus: true,
9 | duration: 5000
10 | }
11 |
12 | export const successToast = (message: string) =>
13 | Toastify({
14 | text: message,
15 | backgroundColor: '#0B875B',
16 | ...commonConfig
17 | })
18 | export const errorToast = (message: string) =>
19 | Toastify({
20 | text: message,
21 | backgroundColor: '#E13C3C',
22 | ...commonConfig
23 | })
24 |
--------------------------------------------------------------------------------
/packages/web/src/router.ts:
--------------------------------------------------------------------------------
1 | import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
2 |
3 | import store from '@/store'
4 | import { authenticate } from '@/auth/authenticate'
5 | import { fetchMe } from '@/graphql/queries/auth'
6 |
7 | const routes: RouteRecordRaw[] = [
8 | {
9 | path: '/',
10 | name: 'root',
11 | redirect: 'project'
12 | },
13 | {
14 | path: '/project',
15 | meta: { requiresAuth: true },
16 | component: () => import('@/views/Project.vue'),
17 | children: [
18 | {
19 | path: '',
20 | name: 'board',
21 | component: () => import('@/views/Board.vue')
22 | },
23 | {
24 | path: 'settings',
25 | name: 'settings',
26 | component: () => import('@/views/Settings.vue')
27 | },
28 | {
29 | path: 'issue/:issueId',
30 | name: 'issue',
31 | component: () => import('@/views/FullIIssueDetails.vue'),
32 | props: true
33 | }
34 | ]
35 | }
36 | ]
37 |
38 | const router = createRouter({
39 | history: createWebHistory(),
40 | routes
41 | })
42 |
43 | router.beforeEach(async (to, _, next) => {
44 | if (to.matched.some(routeRecord => routeRecord.meta.requiresAuth)) {
45 | if (!store.getters.isAuthenticated()) {
46 | await authenticate()
47 | next({ name: to.name || 'root' })
48 | } else {
49 | try {
50 | const currentUser = await fetchMe()
51 | store.mutations.setCurrentUser(currentUser)
52 | next()
53 | } catch (error) {
54 | if (
55 | //@ts-ignore
56 | error?.message ===
57 | 'Authentication token is invalid: User not found.' ||
58 | //@ts-ignore
59 | error?.message === 'Authentication token is invalid.'
60 | ) {
61 | await authenticate()
62 | next({ name: to.name || 'root' })
63 | }
64 | }
65 | }
66 | } else {
67 | next()
68 | }
69 | })
70 |
71 | export default router
72 |
--------------------------------------------------------------------------------
/packages/web/src/store.ts:
--------------------------------------------------------------------------------
1 | import { reactive } from 'vue'
2 | import { getStoredAuthToken } from '@/utils/authToken'
3 | import { Filters, Project, User } from '@/types'
4 |
5 | const store = reactive({
6 | currentUser: {} as User,
7 | project: {} as Project,
8 | isAuthenticated: !!getStoredAuthToken(),
9 | filters: {
10 | searchTerm: '',
11 | userIds: [],
12 | myOnly: false,
13 | recent: false
14 | } as Filters
15 | })
16 |
17 | export const getters = {
18 | project: () => store.project,
19 | filters: () => store.filters,
20 | currentUser: () => store.currentUser,
21 | isAuthenticated: () => store.isAuthenticated
22 | }
23 |
24 | export const mutations = {
25 | setFilters: (filters: Filters) => (store.filters = filters),
26 | setCurrentUser: (user: User) => (store.currentUser = user),
27 | setProject: (project: Project) => (store.project = project),
28 | setIsAuthenticated: (isAuth: boolean) => (store.isAuthenticated = isAuth)
29 | }
30 |
31 | export default {
32 | store,
33 | getters,
34 | mutations
35 | }
36 |
--------------------------------------------------------------------------------
/packages/web/src/types/comment.ts:
--------------------------------------------------------------------------------
1 | import { User } from './user'
2 | import { Issue } from './issue'
3 |
4 | export interface Comment {
5 | id: number
6 | body: string
7 | createdAt: Date
8 | updatedAt: Date
9 | userId: string
10 | issueId: number
11 | user: User
12 | issue: Issue
13 | }
14 |
15 | export default Comment
16 |
--------------------------------------------------------------------------------
/packages/web/src/types/filters.ts:
--------------------------------------------------------------------------------
1 | export interface Filters {
2 | searchTerm: string
3 | userIds: string[]
4 | myOnly: boolean
5 | recent: boolean
6 | }
7 |
8 | export default Filters
9 |
--------------------------------------------------------------------------------
/packages/web/src/types/index.ts:
--------------------------------------------------------------------------------
1 | export type { default as User } from './user'
2 | export type { default as Comment } from './comment'
3 | export type { default as Filters } from './filters'
4 | export type { default as Issue } from './issue'
5 | export type { default as Project } from './project'
6 |
--------------------------------------------------------------------------------
/packages/web/src/types/issue.ts:
--------------------------------------------------------------------------------
1 | import { User } from './user'
2 |
3 | export enum IssueType {
4 | TASK = 'task',
5 | BUG = 'bug',
6 | STORY = 'story'
7 | }
8 |
9 | export enum IssueStatus {
10 | BACKLOG = 'backlog',
11 | SELECTED = 'selected',
12 | INPROGRESS = 'inprogress',
13 | DONE = 'done'
14 | }
15 |
16 | export enum IssuePriority {
17 | HIGHEST = '5',
18 | HIGH = '4',
19 | MEDIUM = '3',
20 | LOW = '2',
21 | LOWEST = '1'
22 | }
23 |
24 | export interface Issue {
25 | id: string
26 | title: string
27 | type: IssueType
28 | status: IssueStatus
29 | priority: IssuePriority
30 | listPosition: number
31 | description: string | null
32 | estimate: number | null
33 | timeSpent: number | null
34 | timeRemaining: number | null
35 | createdAt: Date
36 | updatedAt: Date
37 | reporterId: string
38 | userIds: string[]
39 | comments: Comment[]
40 | projectId: number | string
41 | }
42 |
43 | export interface IssueCreateDTO {
44 | type: IssueType
45 | title: string
46 | description: string | null
47 | reporterId: string
48 | userIds: string[]
49 | priority: IssuePriority
50 | status?: IssueStatus
51 | projectId?: number | string
52 | users?: Partial[]
53 | }
54 |
55 | export const IssueStatusCopy = {
56 | [IssueStatus.BACKLOG]: 'Backlog',
57 | [IssueStatus.SELECTED]: 'Selected for development',
58 | [IssueStatus.INPROGRESS]: 'In progress',
59 | [IssueStatus.DONE]: 'Done'
60 | }
61 | export const IssuePriorityCopy = {
62 | [IssuePriority.HIGH]: 'High',
63 | [IssuePriority.HIGHEST]: 'Highest',
64 | [IssuePriority.MEDIUM]: 'Medium',
65 | [IssuePriority.LOW]: 'Low',
66 | [IssuePriority.LOWEST]: 'Lowest'
67 | }
68 |
69 | export const IssueTypeCopy = {
70 | [IssueType.TASK]: 'Task',
71 | [IssueType.BUG]: 'Bug',
72 | [IssueType.STORY]: 'Story'
73 | }
74 |
75 | export default Issue
76 |
--------------------------------------------------------------------------------
/packages/web/src/types/project.ts:
--------------------------------------------------------------------------------
1 | import { Issue } from './issue'
2 | import { User } from './user'
3 | export enum ProjectCategory {
4 | SOFTWARE = 'software',
5 | MARKETING = 'marketing',
6 | BUSINESS = 'business'
7 | }
8 |
9 | export interface Project {
10 | id: number
11 | name: string
12 | url: string | null
13 | description: string | null
14 | category: ProjectCategory
15 | createdAt: Date
16 | updatedAt: Date
17 | issues: Issue[]
18 | users: User[]
19 | }
20 |
21 | export const ProjectCategoryCopy = {
22 | [ProjectCategory.SOFTWARE]: 'Software',
23 | [ProjectCategory.MARKETING]: 'Marketing',
24 | [ProjectCategory.BUSINESS]: 'Business'
25 | }
26 |
27 | export default Project
28 |
--------------------------------------------------------------------------------
/packages/web/src/types/user.ts:
--------------------------------------------------------------------------------
1 | import { Issue } from './issue'
2 | import { Project } from './project'
3 |
4 | export interface User {
5 | id: string
6 | name: string
7 | email: string
8 | avatarUrl: string
9 | createdAt: Date
10 | updatedAt: Date
11 | comments: Comment[]
12 | issues: Issue[]
13 | project: Project
14 | projectId: number
15 | }
16 |
17 | export default User
18 |
--------------------------------------------------------------------------------
/packages/web/src/utils/authToken.ts:
--------------------------------------------------------------------------------
1 | export const getStoredAuthToken = () => localStorage.getItem('authToken')
2 |
3 | export const storeAuthToken = (token: string) =>
4 | localStorage.setItem('authToken', token)
5 |
6 | export const removeStoredAuthToken = () => localStorage.removeItem('authToken')
7 |
--------------------------------------------------------------------------------
/packages/web/src/utils/colors.ts:
--------------------------------------------------------------------------------
1 | import Color from 'color'
2 | import { IssuePriority, IssueStatus } from '@/types/issue'
3 |
4 | export const tuneColor = {
5 | darken: (colorValue: string, amount: number) =>
6 | Color(colorValue)
7 | .darken(amount)
8 | .string(),
9 | lighten: (colorValue: string, amount: number) =>
10 | Color(colorValue)
11 | .lighten(amount)
12 | .string()
13 | }
14 |
15 | export const avatarColors = [
16 | '#DA7657',
17 | '#6ADA57',
18 | '#5784DA',
19 | '#AA57DA',
20 | '#DA5757',
21 | '#DA5792',
22 | '#57DACA',
23 | '#57A5DA'
24 | ]
25 |
26 | export const buttonVariants = {
27 | primary: '#0052cc',
28 | success: '#0B875B',
29 | danger: '#E13C3C',
30 | warning: '#F89C1C',
31 | info: '#0fb9b1',
32 | secondary: '#F4F5F7'
33 | }
34 |
35 | export const issueStatusVariants = {
36 | [IssueStatus.BACKLOG]: 'secondary',
37 | [IssueStatus.DONE]: 'success',
38 | [IssueStatus.SELECTED]: 'secondary',
39 | [IssueStatus.INPROGRESS]: 'primary'
40 | }
41 |
42 | export const issuePriorityColors = {
43 | [IssuePriority.HIGHEST]: '#CD1317',
44 | [IssuePriority.HIGH]: '#E9494A',
45 | [IssuePriority.MEDIUM]: '#E97F33',
46 | [IssuePriority.LOW]: '#2D8738',
47 | [IssuePriority.LOWEST]: '#57A55A'
48 | }
49 |
--------------------------------------------------------------------------------
/packages/web/src/utils/date.ts:
--------------------------------------------------------------------------------
1 | import dayjs from 'dayjs'
2 | import relativeTime from 'dayjs/plugin/relativeTime'
3 | import UTC from 'dayjs/plugin/utc'
4 | dayjs.extend(relativeTime)
5 | dayjs.extend(UTC)
6 |
7 | export const formatDate = (date: Date, format = 'MMMM D, YYYY') =>
8 | date ? dayjs(date).format(format) : date
9 |
10 | export const formatDateTime = (date: Date, format = 'MMMM D, YYYY, h:mm A') =>
11 | date ? dayjs(date).format(format) : date
12 |
13 | export const formatDateTimeForAPI = (date: Date) =>
14 | date
15 | ? dayjs(date)
16 | .utc()
17 | .format()
18 | : date
19 |
20 | export const formatDateTimeConversational = (date: Date) =>
21 | date ? dayjs(date).fromNow() : date
22 |
--------------------------------------------------------------------------------
/packages/web/src/utils/dnd.ts:
--------------------------------------------------------------------------------
1 | import { Issue, IssueStatus } from '@/types/issue'
2 |
3 | export interface DropResult {
4 | removedIndex: number | null
5 | addedIndex: number | null
6 | to: number
7 | payload: Issue
8 | }
9 |
10 | export interface Target {
11 | index: number
12 | droppableId: IssueStatus
13 | }
14 |
15 | export const moveItemWithinArray = (
16 | arr: Issue[],
17 | item: Issue,
18 | newIndex: number
19 | ) => {
20 | const arrClone = [...arr]
21 | const oldIndex = arrClone.indexOf(item)
22 | arrClone.splice(newIndex, 0, arrClone.splice(oldIndex, 1)[0])
23 | return arrClone
24 | }
25 |
26 | export const insertItemIntoArray = (
27 | arr: Issue[],
28 | item: Issue,
29 | index: number
30 | ) => {
31 | const arrClone = [...arr]
32 | arrClone.splice(index, 0, item)
33 | return arrClone
34 | }
35 | export const updateArrayItemById = (
36 | arr: Issue[],
37 | itemId: string,
38 | fields: Partial
39 | ) => {
40 | const arrClone = [...arr]
41 | const item = arrClone.find(({ id }) => id === itemId)
42 | if (item) {
43 | const itemIndex = arrClone.indexOf(item)
44 | arrClone.splice(itemIndex, 1, { ...item, ...fields })
45 | }
46 | return arrClone
47 | }
48 |
49 | export const isPositionChanged = (destination: Target, source: Target) => {
50 | if (!destination) return false
51 | const isSameList = destination.droppableId === source.droppableId
52 | const isSamePosition = destination.index === source.index
53 | return !isSameList || !isSamePosition
54 | }
55 |
56 | export const getSortedListIssues = (
57 | issues: Issue[] | readonly Issue[],
58 | status: string
59 | ) =>
60 | [...(issues ?? [])]
61 | .filter(issue => issue.status === status)
62 | .sort((a, b) => a.listPosition - b.listPosition)
63 |
64 | const getAfterDropPrevNextIssue = (
65 | allIssues: Issue[],
66 | destination: Target,
67 | source: Target,
68 | droppedIssueId: string
69 | ) => {
70 | const beforeDropDestinationIssues = getSortedListIssues(
71 | allIssues,
72 | destination.droppableId
73 | )
74 | const droppedIssue = allIssues.find(issue => issue.id === droppedIssueId)
75 | const isSameList = destination.droppableId === source.droppableId
76 |
77 | const afterDropDestinationIssues = isSameList
78 | ? moveItemWithinArray(
79 | beforeDropDestinationIssues,
80 | droppedIssue as Issue,
81 | destination.index
82 | )
83 | : insertItemIntoArray(
84 | beforeDropDestinationIssues,
85 | droppedIssue as Issue,
86 | destination.index
87 | )
88 |
89 | return {
90 | prevIssue: afterDropDestinationIssues[destination.index - 1],
91 | nextIssue: afterDropDestinationIssues[destination.index + 1]
92 | }
93 | }
94 |
95 | export const calculateIssueListPosition = (
96 | allIssues: Issue[],
97 | destination: Target,
98 | source: Target,
99 | droppedIssueId: string
100 | ) => {
101 | const { prevIssue, nextIssue } = getAfterDropPrevNextIssue(
102 | allIssues,
103 | destination,
104 | source,
105 | droppedIssueId
106 | )
107 | let position
108 |
109 | if (!prevIssue && !nextIssue) {
110 | position = 1
111 | } else if (!prevIssue) {
112 | position = nextIssue.listPosition - 1
113 | } else if (!nextIssue) {
114 | position = prevIssue.listPosition + 1
115 | } else {
116 | position =
117 | prevIssue.listPosition +
118 | (nextIssue.listPosition - prevIssue.listPosition) / 2
119 | }
120 | return position
121 | }
122 |
--------------------------------------------------------------------------------
/packages/web/src/utils/eventBus.ts:
--------------------------------------------------------------------------------
1 | import Mitt from 'mitt'
2 |
3 | type Events = { [key: string]: any }
4 |
5 | export default Mitt()
6 |
--------------------------------------------------------------------------------
/packages/web/src/views/Board.vue:
--------------------------------------------------------------------------------
1 |
2 |
17 |
18 |
19 |
43 |
44 |
45 |
--------------------------------------------------------------------------------
/packages/web/src/views/FullIIssueDetails.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
12 |
13 |
35 |
36 |
41 |
--------------------------------------------------------------------------------
/packages/web/src/views/Project.vue:
--------------------------------------------------------------------------------
1 |
2 |
10 |
11 |
12 |
69 |
--------------------------------------------------------------------------------
/packages/web/src/views/Settings.vue:
--------------------------------------------------------------------------------
1 |
2 |
63 |
64 |
65 |
135 |
136 |
144 |
--------------------------------------------------------------------------------
/packages/web/src/vite-env.d.ts:
--------------------------------------------------------------------------------
1 | /// 
6 |