From 7c8103195890774ffa9414243eb3bd55ef8c2adc Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 30 Oct 2023 07:01:20 +0100 Subject: [PATCH 01/49] chore:NEXT_PUBLIC_GA_MEASUREMENT_ID to constants --- apps/web/app/constants.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/web/app/constants.ts b/apps/web/app/constants.ts index 181e81743..b5ce5190a 100644 --- a/apps/web/app/constants.ts +++ b/apps/web/app/constants.ts @@ -36,6 +36,7 @@ export const INVITE_CALLBACK_URL = process.env.INVITE_CALLBACK_URL; export const INVITE_CALLBACK_PATH = '/auth/passcode'; export const VERIFY_EMAIL_CALLBACK_URL = process.env.VERIFY_EMAIL_CALLBACK_URL; export const VERIFY_EMAIL_CALLBACK_PATH = '/verify-email'; +export const GA_MEASUREMENT_ID = process.env.NEXT_PUBLIC_GA_MEASUREMENT_ID export const SMTP_FROM_ADDRESS = process.env.SMTP_FROM_ADDRESS || 'noreply@ever.team'; export const SMTP_HOST = process.env.SMTP_HOST || ''; From 805928108078130e98e17ece5806002f06c99cc9 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 30 Oct 2023 07:01:42 +0100 Subject: [PATCH 02/49] update:wrapper recaptcha script in conditional --- apps/web/pages/_app.tsx | 28 +++++++++++++++++----------- 1 file changed, 17 insertions(+), 11 deletions(-) diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx index 5e517c059..d536ff1da 100644 --- a/apps/web/pages/_app.tsx +++ b/apps/web/pages/_app.tsx @@ -2,7 +2,7 @@ import 'react-loading-skeleton/dist/skeleton.css'; import '../styles/globals.css'; -import { jitsuConfiguration } from '@app/constants'; +import { GA_MEASUREMENT_ID, RECAPTCHA_SITE_KEY, jitsuConfiguration } from '@app/constants'; import { JitsuProvider } from '@jitsu/jitsu-react'; import { Analytics } from '@vercel/analytics/react'; import { AppState } from 'lib/app/init-state'; @@ -20,16 +20,22 @@ const MyApp = ({ Component, pageProps }: AppProps) => { const isJitsuEnvsPresent = jitsuConfiguration.host && jitsuConfiguration.writeKey; return ( <> - + + {RECAPTCHA_SITE_KEY && ( + <> + + + )} + From 52d1596ec96df91840725eaf69007ac4276f4132 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 30 Oct 2023 19:25:49 +0100 Subject: [PATCH 03/49] feat:install package --- apps/web/package.json | 2 ++ 1 file changed, 2 insertions(+) diff --git a/apps/web/package.json b/apps/web/package.json index 4667c58cd..e12bbdff1 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -65,6 +65,7 @@ "polished": "^4.2.2", "postcss": "^8.4.19", "react": "18.2.0", + "react-beautiful-dnd": "^13.1.1", "react-colorful": "^5.6.1", "react-country-flag": "^3.1.0", "react-day-picker": "^8.8.0", @@ -96,6 +97,7 @@ "@types/node": "18.8.4", "@types/pako": "^2.0.0", "@types/react": "18.0.21", + "@types/react-beautiful-dnd": "^13.1.6", "@types/react-dom": "18.0.6", "@types/react-google-recaptcha": "^2.1.5", "eslint": "^8.28.0", From 4fa32ba543aefd6ad55cf4c19b92595e572cfca8 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 30 Oct 2023 19:26:07 +0100 Subject: [PATCH 04/49] update: yarn lock --- yarn.lock | 90 +++++++++++++++++++++++++++++++++++++++++++++++++++++-- 1 file changed, 87 insertions(+), 3 deletions(-) diff --git a/yarn.lock b/yarn.lock index 4344273a0..57a20676f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1161,7 +1161,7 @@ dependencies: regenerator-runtime "^0.14.0" -"@babel/runtime@^7.22.5": +"@babel/runtime@^7.22.5", "@babel/runtime@^7.9.2": version "7.23.2" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.23.2.tgz#062b0ac103261d68a966c4c7baf2ae3e62ec3885" integrity sha512-mM8eg4yl5D6i3lu2QKPuPH4FArvJ8KhTofbE7jwMUv9KX5mBvwPAqnV3MlyBNqdp9RyRKP6Yck8TrfYrPvX3bg== @@ -5326,6 +5326,14 @@ dependencies: "@types/node" "*" +"@types/hoist-non-react-statics@^3.3.0": + version "3.3.4" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.4.tgz#cc477ce0283bb9d19ea0cbfa2941fe2c8493a1be" + integrity sha512-ZchYkbieA+7tnxwX/SCBySx9WwvWR8TaP5tb2jRAzwvLb/rWchGw3v0w3pqUbUvj0GCwW2Xz/AVPSk6kUGctXQ== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/http-errors@*": version "2.0.1" resolved "https://registry.yarnpkg.com/@types/http-errors/-/http-errors-2.0.1.tgz#20172f9578b225f6c7da63446f56d4ce108d5a65" @@ -5479,6 +5487,13 @@ resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc" integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw== +"@types/react-beautiful-dnd@^13.1.6": + version "13.1.6" + resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.6.tgz#a616443903bfc370fee298b0144dbce7234d5561" + integrity sha512-FXAuaa52ux7HWQDumi3MFSAAsW8OKfDImy1pSZPKe85nV9mZ1f4spVzW0a2boYvkIhphjbWUi5EwUiRG8Rq/Qg== + dependencies: + "@types/react" "*" + "@types/react-dom@18.0.6": version "18.0.6" resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.6.tgz#36652900024842b74607a17786b6662dd1e103a1" @@ -5500,6 +5515,16 @@ dependencies: "@types/react" "*" +"@types/react-redux@^7.1.20": + version "7.1.28" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.28.tgz#30a44303c7daceb6ede9cfb4aaf72e64f1dde4de" + integrity sha512-EQr7cChVzVUuqbA+J8ArWK1H0hLAHKOs21SIMrskKZ3nHNeE+LFYA+IsoZGhVOT8Ktjn3M20v4rnZKN3fLbypw== + dependencies: + "@types/hoist-non-react-statics" "^3.3.0" + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + redux "^4.0.0" + "@types/react@*": version "18.2.21" resolved "https://registry.yarnpkg.com/@types/react/-/react-18.2.21.tgz#774c37fd01b522d0b91aed04811b58e4e0514ed9" @@ -8641,6 +8666,13 @@ crypto-random-string@^2.0.0: resolved "https://registry.yarnpkg.com/crypto-random-string/-/crypto-random-string-2.0.0.tgz#ef2a7a966ec11083388369baa02ebead229b30d5" integrity sha512-v1plID3y9r/lPhviJ1wrXpLeyUIGAZ2SHNYTEapm7/8A9nLPoyvVp3RK/EPFqn5kEznyWgYZNsRtYYIWbuG8KA== +css-box-model@^1.2.0: + version "1.2.1" + resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1" + integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw== + dependencies: + tiny-invariant "^1.0.6" + css-declaration-sorter@^6.3.1: version "6.4.1" resolved "https://registry.yarnpkg.com/css-declaration-sorter/-/css-declaration-sorter-6.4.1.tgz#28beac7c20bad7f1775be3a7129d7eae409a3a71" @@ -14301,6 +14333,11 @@ memfs@^3.4.1, memfs@^3.4.3: dependencies: fs-monkey "^1.0.4" +memoize-one@^5.1.1: + version "5.2.1" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" + integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== + meow@^8.0.0, meow@^8.1.2: version "8.1.2" resolved "https://registry.yarnpkg.com/meow/-/meow-8.1.2.tgz#bcbe45bda0ee1729d350c03cffc8395a36c4e897" @@ -16988,7 +17025,7 @@ promzard@^0.3.0: dependencies: read "1" -prop-types@^15, prop-types@^15.5.0, prop-types@^15.8.1: +prop-types@^15, prop-types@^15.5.0, prop-types@^15.7.2, prop-types@^15.8.1: version "15.8.1" resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5" integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg== @@ -17206,6 +17243,11 @@ quote-stream@^1.0.1: minimist "^1.1.3" through2 "^2.0.0" +raf-schd@^4.0.2: + version "4.0.3" + resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" + integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== + randombytes@^2.0.0, randombytes@^2.0.1, randombytes@^2.0.5, randombytes@^2.1.0: version "2.1.0" resolved "https://registry.yarnpkg.com/randombytes/-/randombytes-2.1.0.tgz#df6f84372f0270dc65cdf6291349ab7a473d4f2a" @@ -17254,6 +17296,19 @@ react-async-script@^1.1.1: hoist-non-react-statics "^3.3.0" prop-types "^15.5.0" +react-beautiful-dnd@^13.1.1: + version "13.1.1" + resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.1.tgz#b0f3087a5840920abf8bb2325f1ffa46d8c4d0a2" + integrity sha512-0Lvs4tq2VcrEjEgDXHjT98r+63drkKEgqyxdA7qD3mvKwga6a5SscbdLPO2IExotU1jW8L0Ksdl0Cj2AF67nPQ== + dependencies: + "@babel/runtime" "^7.9.2" + css-box-model "^1.2.0" + memoize-one "^5.1.1" + raf-schd "^4.0.2" + react-redux "^7.2.0" + redux "^4.0.4" + use-memo-one "^1.1.1" + react-colorful@^5.6.1: version "5.6.1" resolved "https://registry.yarnpkg.com/react-colorful/-/react-colorful-5.6.1.tgz#7dc2aed2d7c72fac89694e834d179e32f3da563b" @@ -17315,7 +17370,7 @@ react-is@^16.13.1, react-is@^16.7.0: resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4" integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ== -react-is@^17.0.1: +react-is@^17.0.1, react-is@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0" integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w== @@ -17354,6 +17409,18 @@ react-popper@^2.3.0: react-fast-compare "^3.0.1" warning "^4.0.2" +react-redux@^7.2.0: + version "7.2.9" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.9.tgz#09488fbb9416a4efe3735b7235055442b042481d" + integrity sha512-Gx4L3uM182jEEayZfRbI/G11ZpYdNAnBs70lFVMNdHJI76XYtR+7m0MN+eAs7UHBPhWXcnFPaS+9owSCJQHNpQ== + dependencies: + "@babel/runtime" "^7.15.4" + "@types/react-redux" "^7.1.20" + hoist-non-react-statics "^3.3.2" + loose-envify "^1.4.0" + prop-types "^15.7.2" + react-is "^17.0.2" + react-remove-scroll-bar@^2.3.3: version "2.3.4" resolved "https://registry.yarnpkg.com/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz#53e272d7a5cb8242990c7f144c44d8bd8ab5afd9" @@ -17605,6 +17672,13 @@ redeyed@~2.1.0: dependencies: esprima "~4.0.0" +redux@^4.0.0, redux@^4.0.4: + version "4.2.1" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.1.tgz#c08f4306826c49b5e9dc901dee0452ea8fce6197" + integrity sha512-LAUYz4lc+Do8/g7aeRa8JkyDErK6ekstQaqWQrNRW//MY1TvCEpMtpTWvlQ+FPbWCx+Xixu/6SHt5N0HR+SB4w== + dependencies: + "@babel/runtime" "^7.9.2" + reflect-metadata@0.1.13: version "0.1.13" resolved "https://registry.yarnpkg.com/reflect-metadata/-/reflect-metadata-0.1.13.tgz#67ae3ca57c972a2aa1642b10fe363fe32d49dc08" @@ -19414,6 +19488,11 @@ tiny-invariant@1.0.6: resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.0.6.tgz#b3f9b38835e36a41c843a3b0907a5a7b3755de73" integrity sha512-FOyLWWVjG+aC0UqG76V53yAWdXfH8bO6FNmyZOuUrzDzK8DI3/JRY25UD7+g49JWM1LXwymsKERB+DzI0dTEQA== +tiny-invariant@^1.0.6: + version "1.3.1" + resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.3.1.tgz#8560808c916ef02ecfd55e66090df23a4b7aa642" + integrity sha512-AD5ih2NlSssTCwsMznbvwMZpJ1cbhkGd2uueNxzv2jDlEeZdU04JQfRnggJQ8DrcVBGjAsCKwFBbDlVNtEMlzw== + tiny-relative-date@^1.3.0: version "1.3.0" resolved "https://registry.yarnpkg.com/tiny-relative-date/-/tiny-relative-date-1.3.0.tgz#fa08aad501ed730f31cc043181d995c39a935e07" @@ -20023,6 +20102,11 @@ use-callback-ref@^1.3.0: dependencies: tslib "^2.0.0" +use-memo-one@^1.1.1: + version "1.1.3" + resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.3.tgz#2fd2e43a2169eabc7496960ace8c79efef975e99" + integrity sha512-g66/K7ZQGYrI6dy8GLpVcMsBp4s17xNkYJVSMvTEevGy3nDxHOfE6z8BVE22+5G5x7t3+bhzrlTDB7ObrEE0cQ== + use-sidecar@^1.1.2: version "1.1.2" resolved "https://registry.yarnpkg.com/use-sidecar/-/use-sidecar-1.1.2.tgz#2f43126ba2d7d7e117aa5855e5d8f0276dfe73c2" From f034659b3ea43515cf8508c4b8f254ddf6ae3a33 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 30 Oct 2023 19:26:21 +0100 Subject: [PATCH 05/49] feat: add kanbanboard component --- apps/web/lib/components/Kanban.tsx | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) create mode 100644 apps/web/lib/components/Kanban.tsx diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx new file mode 100644 index 000000000..3e9ff01ba --- /dev/null +++ b/apps/web/lib/components/Kanban.tsx @@ -0,0 +1,23 @@ +import { ReactElement } from 'react'; +import { DragDropContext } from 'react-beautiful-dnd'; + +type KanbanBoardProps = { + children: ReactElement +} + +export const KanbanBoard = ({children}: KanbanBoardProps) => { + + const onDragEnd = () => { + + } + + return ( + <> + + { children} + + + ) +} From 5dce552dec02facf9a7c8a741e072b9c058ed382 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 30 Oct 2023 19:26:43 +0100 Subject: [PATCH 06/49] update:_app file --- apps/web/pages/_app.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/pages/_app.tsx b/apps/web/pages/_app.tsx index d536ff1da..afdb57c54 100644 --- a/apps/web/pages/_app.tsx +++ b/apps/web/pages/_app.tsx @@ -36,7 +36,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => { )} - + From fc0b0e1d78d3cb1efc0d3b61a576b2cd967f68ce Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 30 Oct 2023 19:41:28 +0100 Subject: [PATCH 07/49] feat:add kanban view --- apps/web/lib/features/team-members-kanban-view.tsx | 11 +++++++++++ 1 file changed, 11 insertions(+) create mode 100644 apps/web/lib/features/team-members-kanban-view.tsx diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx new file mode 100644 index 000000000..15f0bad3b --- /dev/null +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -0,0 +1,11 @@ +import { KanbanBoard } from "lib/components/Kanban" + +export const KanbanView = () => { + return ( + <> + + + + + ) +} \ No newline at end of file From c9990aba2b1f1e553cb99aa7f428c8dfe2770d8b Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 30 Oct 2023 19:41:44 +0100 Subject: [PATCH 08/49] feat:add kanbancolumn component --- apps/web/lib/components/Kanban.tsx | 31 +++++++++++++++++++++++++++--- 1 file changed, 28 insertions(+), 3 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 3e9ff01ba..3abf57063 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -1,8 +1,8 @@ -import { ReactElement } from 'react'; -import { DragDropContext } from 'react-beautiful-dnd'; +import { ReactNode } from 'react'; +import { DragDropContext, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; type KanbanBoardProps = { - children: ReactElement + children: ReactNode } export const KanbanBoard = ({children}: KanbanBoardProps) => { @@ -21,3 +21,28 @@ export const KanbanBoard = ({children}: KanbanBoardProps) => { ) } + +type KanbanColumnProps = { + droppableId: string, + children: ReactNode +} + +export const KanbanColumn = ({ droppableId, children }: KanbanColumnProps) => { + return ( + <> + + {(provided: DroppableProvided, snapshop: DroppableStateSnapshot) => ( +
+ { children } +
+ )} + + + ) +} From 160966f76603451fad49ab5ce50e0f65f35d5cfa Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Mon, 30 Oct 2023 19:46:57 +0100 Subject: [PATCH 09/49] feat:add kanban card component --- apps/web/lib/components/Kanban.tsx | 31 +++++++++++++++++++++++++++++- 1 file changed, 30 insertions(+), 1 deletion(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 3abf57063..5a7061268 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -1,5 +1,5 @@ import { ReactNode } from 'react'; -import { DragDropContext, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; +import { DragDropContext, Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; type KanbanBoardProps = { children: ReactNode @@ -46,3 +46,32 @@ export const KanbanColumn = ({ droppableId, children }: KanbanColumnProps) => { ) } + +type KanbanCardProps = { + key: string; + index: number; + draggableId: string; +} + +export const KanbanCard = ({key, index, draggableId}: KanbanCardProps) => { + return ( + <> + + {(provided: DraggableProvided, snapshop: DraggableStateSnapshot) => ( +
+ +
+ )} + + + ) +} From 490bc9edbc7b550703586c22362e9e3410a19585 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Thu, 2 Nov 2023 12:43:46 +0100 Subject: [PATCH 10/49] feat:add single column --- apps/web/lib/components/Kanban.tsx | 66 +++++++- .../lib/features/team-members-kanban-view.tsx | 158 +++++++++++++++++- apps/web/pages/kanban/index.tsx | 25 +++ 3 files changed, 235 insertions(+), 14 deletions(-) create mode 100644 apps/web/pages/kanban/index.tsx diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 5a7061268..c0737bac3 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -1,14 +1,58 @@ import { ReactNode } from 'react'; import { DragDropContext, Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; +const grid = 8; + +const getItemStyle = (isDragging: any, draggableStyle: any) => ({ + // some basic styles to make the items look a bit nicer + userSelect: "none", + padding: grid * 2, + margin: `0 0 ${grid}px 0`, + + // change background colour if dragging + background: isDragging ? "lightgreen" : "grey", + + // styles we need to apply on draggables + ...draggableStyle +}); + +const getListStyle = (isDraggingOver: any) => ({ + background: isDraggingOver ? "lightblue" : "lightgrey", + padding: grid, + width: 250 +}); + type KanbanBoardProps = { - children: ReactNode + children: ReactNode; + items: any[] } -export const KanbanBoard = ({children}: KanbanBoardProps) => { +const reorder = (list: any[], startIndex:number , endIndex:number ) => { + const result = Array.from(list); + const [removed] = result.splice(startIndex, 1); + result.splice(endIndex, 0, removed); + + return result; +}; + +export const KanbanBoard = ({children, items}: KanbanBoardProps) => { - const onDragEnd = () => { + + const onDragEnd = (result: any) => { + if (!result.destination) { + return; + } + + const allitem = reorder( + items, + result.source.index, + result.destination.index + ); + + setItems( + allitem + ); } return ( @@ -33,11 +77,11 @@ export const KanbanColumn = ({ droppableId, children }: KanbanColumnProps) => { - {(provided: DroppableProvided, snapshop: DroppableStateSnapshot) => ( + {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
{ children }
@@ -51,9 +95,10 @@ type KanbanCardProps = { key: string; index: number; draggableId: string; + content: string; } -export const KanbanCard = ({key, index, draggableId}: KanbanCardProps) => { +export const KanbanCard = ({key, index, draggableId, content}: KanbanCardProps) => { return ( <> { index={index} draggableId={draggableId} > - {(provided: DraggableProvided, snapshop: DraggableStateSnapshot) => ( + {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
- + {content}
)} diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index 15f0bad3b..9ac3c95ff 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -1,11 +1,159 @@ -import { KanbanBoard } from "lib/components/Kanban" +import { KanbanBoard, KanbanCard, KanbanColumn } from "lib/components/Kanban" +import { useState } from "react"; +import { DragDropContext, Draggable, DraggableProvided, DraggableStateSnapshot, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; + +// fake data generator +const getItems = (count: number) => + Array.from({ length: count }, (v, k) => k).map(k => ({ + id: `item-${k}`, + content: `item ${k}` +})); + +const grid = 8; + +const getItemStyle = (isDragging: any, draggableStyle: any) => ({ + + // some basic styles to make the items look a bit nicer + userSelect: "none", + padding: grid * 2, + margin: `0 0 ${grid}px 0`, + + // change background colour if dragging + background: isDragging ? "lightgreen" : "grey", + + // styles we need to apply on draggables + ...draggableStyle +}); + +const getListStyle = (isDraggingOver: any) => ({ + background: isDraggingOver ? "lightblue" : "lightgrey", + padding: grid, + width: 250 +}); + +// type KanbanBoardProps = { +// children: ReactNode; +// items: any[] +// } + +const reorder = (list: any[], startIndex:number , endIndex:number ) => { + const result = Array.from(list); + const [removed] = result.splice(startIndex, 1); + result.splice(endIndex, 0, removed); + + return result; +}; + +const getRenderItem = (items: any[]) => (provided: any, snapshot: any, rubric: any) => ( +
+ Item id: {items[rubric.source.index].id} +
+ ); + export const KanbanView = () => { + + const [items, setItems] = useState(getItems(10)); + + const renderItem = getRenderItem(items); + + const onDragEnd = (result: DropResult) => { + // if (!result.destination) { + // return; + // } + + // const allitem = reorder( + // items, + // result.source.index, + // result.destination.index + // ); + + // setItems(allitem); + console.log('dragEnd') + } + + const onDragStart = () => { + console.log('dragStart') + } + return ( <> - - - + + + + {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( +
+ {items.map((item, index) => ( + + {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( +
+ {item.content} +
+ )} + + ))} + {/* {provided.placeholder} */} +
+ )} + + + ) -} \ No newline at end of file +} + +// +// {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( +//
+// {items.map((item, index) => ( +// +// {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( +//
+// {item.content} +//
+// )} +// +// ))} +// {/* {provided.placeholder} */} +//
+// )} +// \ No newline at end of file diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx new file mode 100644 index 000000000..caa7d01c4 --- /dev/null +++ b/apps/web/pages/kanban/index.tsx @@ -0,0 +1,25 @@ +import { withAuthentication } from "lib/app/authenticator"; +import { KanbanView } from "lib/features/team-members-kanban-view" +import { MainLayout } from "lib/layout"; +import { useRouter } from "next/router"; +import { useEffect, useState } from "react"; + +const Kanban= () => { + const router = useRouter() + const [winReady, setwinReady] = useState(false); + console.log('ready ', router.isReady) + useEffect(() => { + setwinReady(true); + }, []); + return ( + <> + {winReady ? + + : null + } + + ) +} + +// export default withAuthentication(Kanban, { displayName: 'Kanban'}); +export default Kanban; \ No newline at end of file From c042cfb7147730132e5934bcfd40b0356a6c7018 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 7 Nov 2023 11:57:22 +0100 Subject: [PATCH 11/49] feat:add kanban columns --- apps/web/lib/components/Kanban.tsx | 78 +++--- .../lib/features/team-members-kanban-view.tsx | 226 +++++++++--------- apps/web/pages/kanban/index.tsx | 63 ++++- 3 files changed, 197 insertions(+), 170 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index c0737bac3..8c8f52d3d 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -1,8 +1,16 @@ -import { ReactNode } from 'react'; -import { DragDropContext, Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; +import { ReactNode, useEffect, useState } from 'react'; +import { DragDropContext, DragDropContextProps, Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, DroppableProps, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; const grid = 8; +const reorder = (list: any[], startIndex:number , endIndex:number ) => { + const result = Array.from(list); + const [removed] = result.splice(startIndex, 1); + result.splice(endIndex, 0, removed); + + return result; +}; + const getItemStyle = (isDragging: any, draggableStyle: any) => ({ // some basic styles to make the items look a bit nicer userSelect: "none", @@ -27,32 +35,12 @@ type KanbanBoardProps = { items: any[] } -const reorder = (list: any[], startIndex:number , endIndex:number ) => { - const result = Array.from(list); - const [removed] = result.splice(startIndex, 1); - result.splice(endIndex, 0, removed); - - return result; -}; -export const KanbanBoard = ({children, items}: KanbanBoardProps) => { - +export const KanbanBoard = ({children}: DragDropContextProps) => { const onDragEnd = (result: any) => { - if (!result.destination) { - return; - } - - const allitem = reorder( - items, - result.source.index, - result.destination.index - ); - - setItems( - allitem - ); + } return ( @@ -66,30 +54,28 @@ export const KanbanBoard = ({children, items}: KanbanBoardProps) => { ) } -type KanbanColumnProps = { - droppableId: string, - children: ReactNode -} - -export const KanbanColumn = ({ droppableId, children }: KanbanColumnProps) => { +export const KanbanColumn = ({ children, ...props }: DroppableProps) => { + const [enabled, setEnabled] = useState(false); + + useEffect(() => { + const animation = requestAnimationFrame(() => setEnabled(true)); + + return () => { + cancelAnimationFrame(animation); + setEnabled(false); + }; + }, []); + + if (!enabled) return null; + return ( - <> - - {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( -
- { children } -
- )} - - + <> + + {children} + + ) -} + }; type KanbanCardProps = { key: string; diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index 9ac3c95ff..8783f1722 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -1,18 +1,18 @@ import { KanbanBoard, KanbanCard, KanbanColumn } from "lib/components/Kanban" -import { useState } from "react"; -import { DragDropContext, Draggable, DraggableProvided, DraggableStateSnapshot, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; +import { useEffect, useState } from "react"; +import { DragDropContext, Draggable, DraggableProvided, DraggableStateSnapshot, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd"; -// fake data generator -const getItems = (count: number) => - Array.from({ length: count }, (v, k) => k).map(k => ({ - id: `item-${k}`, - content: `item ${k}` -})); +const reorder = (list: any[], startIndex:number , endIndex:number ) => { + const result = Array.from(list); + const [removed] = result.splice(startIndex, 1); + result.splice(endIndex, 0, removed); + + return result; +}; -const grid = 8; +const grid = 0; -const getItemStyle = (isDragging: any, draggableStyle: any) => ({ - +const getItemStyle = (isDragging: any, draggableStyle: any) => ({ // some basic styles to make the items look a bit nicer userSelect: "none", padding: grid * 2, @@ -28,132 +28,126 @@ const getItemStyle = (isDragging: any, draggableStyle: any) => ({ const getListStyle = (isDraggingOver: any) => ({ background: isDraggingOver ? "lightblue" : "lightgrey", padding: grid, - width: 250 + width: '100%' }); -// type KanbanBoardProps = { -// children: ReactNode; -// items: any[] -// } - -const reorder = (list: any[], startIndex:number , endIndex:number ) => { - const result = Array.from(list); - const [removed] = result.splice(startIndex, 1); - result.splice(endIndex, 0, removed); - - return result; -}; - -const getRenderItem = (items: any[]) => (provided: any, snapshot: any, rubric: any) => ( -
- Item id: {items[rubric.source.index].id} -
- ); +export const KanbanView = ({ itemsArray, columns }: { itemsArray: any[], columns: any[]}) => { -export const KanbanView = () => { - - const [items, setItems] = useState(getItems(10)); - - const renderItem = getRenderItem(items); + const [items, setItems] = useState(itemsArray); const onDragEnd = (result: DropResult) => { - // if (!result.destination) { - // return; - // } - - // const allitem = reorder( - // items, - // result.source.index, - // result.destination.index - // ); - - // setItems(allitem); - console.log('dragEnd') + if (!result.destination) { + return; + } + + const allitem = reorder( + items, + result.source.index, + result.destination.index + ); + + setItems(allitem); + console.log('dragEnd') } const onDragStart = () => { console.log('dragStart') } + // useEffect(() => { + // const animation = requestAnimationFrame(() => setEnabled(true)); + + // return () => { + // cancelAnimationFrame(animation); + // setEnabled(false); + // }; + // }, []); + + // if (!enabled) return null; + return ( <> - - - - {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( + { items.length > 0 && + + {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( +
+ {items.length > 0 ? + <> + {items.map((item, index) => ( + + {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => (
- {items.map((item, index) => ( - - {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( -
- {item.content} -
+ {...provided.draggableProps} + style={getItemStyle( + snapshot.isDragging, + provided.draggableProps.style )} - - ))} - {/* {provided.placeholder} */} -
- )} - - + > +
+ {item.status.name} +
+ ( +

{item.content}

+ ) + } + // direction="horizontal" + > + {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( +
+ {item.content} + {provided.placeholder} +
+ )} + +
)} + + ))} + + : + null + } + {provided.placeholder} + + + )} + + } ) } -// -// {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( -//
-// {items.map((item, index) => ( -// -// {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( -//
-// {item.content} -//
-// )} -// -// ))} -// {/* {provided.placeholder} */} -//
-// )} -// \ No newline at end of file +{/* */} diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx index caa7d01c4..8b34a835e 100644 --- a/apps/web/pages/kanban/index.tsx +++ b/apps/web/pages/kanban/index.tsx @@ -7,19 +7,66 @@ import { useEffect, useState } from "react"; const Kanban= () => { const router = useRouter() const [winReady, setwinReady] = useState(false); - console.log('ready ', router.isReady) + + const todo = { + id: 'status-1', + name: 'TODO' + } + + const ongoing = { + id: 'status-2', + name: 'ONGOING' + } + + const review = { + id: 'status-3', + name: 'REVIEW' + } + + const done = { + id: 'status-4', + name: 'DONE' + } + // this array holds all the columns + const status = [todo, ongoing, review, done]; + + const demoData = [ + { + id: '1', + content: 'demo content', + status: todo + }, + { + id: '2', + content: 'another content', + status: ongoing + }, + { + id: '3', + content: 'a simple tes', + status: review + } + ] + useEffect(() => { - setwinReady(true); - }, []); + if(demoData.length > 0) { + setwinReady(true); + } + + }, [router.isReady, demoData]); + return ( <> - {winReady ? - - : null - } + {winReady ? + + : + null + } + ) } // export default withAuthentication(Kanban, { displayName: 'Kanban'}); -export default Kanban; \ No newline at end of file +export default Kanban; + From 694cf70dda81d19ebc82aa7c139940ea1bffe08d Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Wed, 8 Nov 2023 14:51:55 +0100 Subject: [PATCH 12/49] feat:add kanbanboard view --- apps/web/lib/features/team-members-kanban-view.tsx | 14 +++++++++++++- 1 file changed, 13 insertions(+), 1 deletion(-) diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index 8783f1722..1ca72d3e9 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -122,7 +122,19 @@ export const KanbanView = ({ itemsArray, columns }: { itemsArray: any[], columns isDraggingFrom={Boolean(snapshot.draggingFromThisWith)} {...provided.droppableProps} > - {item.content} + {items.map((item, index) => ( + + {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( +
+ {item.content} +
)} + + ))} {provided.placeholder} )} From e1d6c33ba4aaf68d9beb37aaabc0cd5c80a9e0e8 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 10:53:37 +0100 Subject: [PATCH 13/49] update:change data format from array to object --- apps/web/pages/kanban/index.tsx | 59 ++++++++++++++++++++++----------- 1 file changed, 39 insertions(+), 20 deletions(-) diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx index 8b34a835e..9d2e85584 100644 --- a/apps/web/pages/kanban/index.tsx +++ b/apps/web/pages/kanban/index.tsx @@ -1,6 +1,5 @@ import { withAuthentication } from "lib/app/authenticator"; import { KanbanView } from "lib/features/team-members-kanban-view" -import { MainLayout } from "lib/layout"; import { useRouter } from "next/router"; import { useEffect, useState } from "react"; @@ -30,26 +29,46 @@ const Kanban= () => { // this array holds all the columns const status = [todo, ongoing, review, done]; - const demoData = [ - { - id: '1', - content: 'demo content', - status: todo - }, - { - id: '2', - content: 'another content', - status: ongoing - }, - { - id: '3', - content: 'a simple tes', - status: review - } - ] + const demoData = { + todo: [ + { + id: '1', + content: 'demo content', + status: todo + }, + { + id: '4', + content: 'demo content2', + status: todo + } + ], + ongoing: [ + { + id: '2', + content: 'another content', + status: ongoing + }, + { + id: '5', + content: 'another content2', + status: ongoing + } + ], + review: [ + { + id: '3', + content: 'a simple tes', + status: review + }, + { + id: '6', + content: 'a simple tes', + status: review + } + ]} useEffect(() => { - if(demoData.length > 0) { + if(demoData) { setwinReady(true); } @@ -58,7 +77,7 @@ const Kanban= () => { return ( <> {winReady ? - + : null } From 335babfa2660df2b2b887cd402944fc2a0949497 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 10:53:57 +0100 Subject: [PATCH 14/49] update: change kanban board logic --- apps/web/lib/components/Kanban.tsx | 172 +++++++++++++++++++++-------- 1 file changed, 129 insertions(+), 43 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 8c8f52d3d..860945b5a 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -1,16 +1,9 @@ -import { ReactNode, useEffect, useState } from 'react'; -import { DragDropContext, DragDropContextProps, Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, DroppableProps, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; +import React from 'react'; +import { useEffect, useState } from 'react'; +import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable } from 'react-beautiful-dnd'; const grid = 8; -const reorder = (list: any[], startIndex:number , endIndex:number ) => { - const result = Array.from(list); - const [removed] = result.splice(startIndex, 1); - result.splice(endIndex, 0, removed); - - return result; -}; - const getItemStyle = (isDragging: any, draggableStyle: any) => ({ // some basic styles to make the items look a bit nicer userSelect: "none", @@ -24,37 +17,95 @@ const getItemStyle = (isDragging: any, draggableStyle: any) => ({ ...draggableStyle }); -const getListStyle = (isDraggingOver: any) => ({ - background: isDraggingOver ? "lightblue" : "lightgrey", - padding: grid, - width: 250 -}); - -type KanbanBoardProps = { - children: ReactNode; - items: any[] -} - - +function getStyle(provided, style) { + if (!style) { + return provided.draggableProps.style; + } + + return { + ...provided.draggableProps.style, + ...style, + }; + } -export const KanbanBoard = ({children}: DragDropContextProps) => { +function QuoteItem(props: any) { + const { + quote, + isDragging, + isGroupedOver, + provided, + style, + isClone, + index, + } = props; + + return ( +
+ {quote.content} +
+ ); + } - const onDragEnd = (result: any) => { - +function InnerQuoteList({quotes}: { + quotes: any[] +}) { + return ( + <> + {quotes.map((quote, index) => ( + + {(dragProvided, dragSnapshot) => ( + + )} + + )) } + +)}; +function InnerList(props: { + title: string, + quotes: any[], + dropProvided: any +}) { + const { quotes, dropProvided } = props; + const title = props.title ?

{props.title}

: null; + return ( - <> - - { children} - - - ) +
+
+ + {dropProvided.placeholder} +
+
+ ); } -export const KanbanColumn = ({ children, ...props }: DroppableProps) => { +export const KanbanDroppable = ({ title, droppableId, type, style, content }: { + title: string, + droppableId: string, + type: string, + style: any, + content: any[] +} ) => { const [enabled, setEnabled] = useState(false); useEffect(() => { @@ -70,21 +121,33 @@ export const KanbanColumn = ({ children, ...props }: DroppableProps) => { return ( <> - - {children} + + {(dropProvided, dropSnapshot) => ( +
+ +
+ )} ) - }; +}; -type KanbanCardProps = { +const KanbanDraggable = ({key, index, draggableId, title, content}: { key: string; index: number; draggableId: string; - content: string; -} - -export const KanbanCard = ({key, index, draggableId, content}: KanbanCardProps) => { + title: string; + content: any[]; +}) => { return ( <> - {content} +
+

+ {title} +

+
+ )} ) } + +export default KanbanDraggable; From 179325d55047902960432cca76a8c2218bb4d4d2 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 10:54:14 +0100 Subject: [PATCH 15/49] update:add kanbanboard card component --- .../lib/features/team-members-kanban-view.tsx | 241 +++++++++--------- 1 file changed, 123 insertions(+), 118 deletions(-) diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index 1ca72d3e9..fe8b85f14 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -1,6 +1,6 @@ -import { KanbanBoard, KanbanCard, KanbanColumn } from "lib/components/Kanban" -import { useEffect, useState } from "react"; -import { DragDropContext, Draggable, DraggableProvided, DraggableStateSnapshot, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd"; +import KanbanDraggable from "lib/components/Kanban" +import { useState } from "react"; +import { DragDropContext, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd"; const reorder = (list: any[], startIndex:number , endIndex:number ) => { const result = Array.from(list); @@ -12,154 +12,159 @@ const reorder = (list: any[], startIndex:number , endIndex:number ) => { const grid = 0; -const getItemStyle = (isDragging: any, draggableStyle: any) => ({ - // some basic styles to make the items look a bit nicer - userSelect: "none", - padding: grid * 2, - margin: `0 0 ${grid}px 0`, - - // change background colour if dragging - background: isDragging ? "lightgreen" : "grey", - - // styles we need to apply on draggables - ...draggableStyle -}); - const getListStyle = (isDraggingOver: any) => ({ background: isDraggingOver ? "lightblue" : "lightgrey", padding: grid, width: '100%' }); +export const reorderQuoteMap = ({ quoteMap, source, destination }) => { + const current = [...quoteMap[source.droppableId]]; + const next = [...quoteMap[destination.droppableId]]; + const target = current[source.index]; + + // moving to same list + if (source.droppableId === destination.droppableId) { + const reordered = reorder(current, source.index, destination.index); + const result = { + ...quoteMap, + [source.droppableId]: reordered, + }; + return { + quoteMap: result, + }; + } + + // moving to different list + + // remove from original + current.splice(source.index, 1); + // insert into next + next.splice(destination.index, 0, target); + + const result = { + ...quoteMap, + [source.droppableId]: current, + [destination.droppableId]: next, + }; + + return { + quoteMap: result, + }; +}; -export const KanbanView = ({ itemsArray, columns }: { itemsArray: any[], columns: any[]}) => { - const [items, setItems] = useState(itemsArray); +export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { - const onDragEnd = (result: DropResult) => { - if (!result.destination) { - return; - } - - const allitem = reorder( - items, - result.source.index, - result.destination.index - ); - - setItems(allitem); - console.log('dragEnd') - } + const [items, setItems] = useState(itemsArray); - const onDragStart = () => { - console.log('dragStart') - } + const [columnn, setColumns ] = useState(Object.keys(itemsArray)) - // useEffect(() => { - // const animation = requestAnimationFrame(() => setEnabled(true)); - - // return () => { - // cancelAnimationFrame(animation); - // setEnabled(false); - // }; - // }, []); + /** + * This function handles all drag and drop logic + * on the kanban board. + * @param result + * @returns + */ + const onDragEnd = (result: DropResult) => { - // if (!enabled) return null; + if (result.combine) { + if (result.type === 'COLUMN') { + const shallow = [...columnn]; + shallow.splice(result.source.index, 1); + setColumns(shallow); + return; + } + + const item = items.filter((item)=> item.status.name === result.source.droppableId); + const withQuoteRemoved = [...item]; + + withQuoteRemoved.splice(result.source.index, 1); + + const orderedColumns = [ + ...items, + // [result.source.droppableId]: withQuoteRemoved, + ]; + setItems(orderedColumns); + return; + } + + // dropped nowhere + if (!result.destination) { + return; + } + + const source = result.source; + const destination = result.destination; + + // did not move anywhere - can bail early + if ( + source.droppableId === destination.droppableId && + source.index === destination.index + ) { + return; + } + + // reordering column + if (result.type === 'COLUMN') { + const reorderedorder = reorder(items, source.index, destination.index); + + setItems(reorderedorder); + + return; + } + + const data = reorderQuoteMap({ + quoteMap: items, + source, + destination, + }); + + setItems(data.quoteMap); + + } return ( <> - { items.length > 0 && - 0 && + - {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( -
- {items.length > 0 ? + {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( +
+ {columnn.length > 0 ? <> - {items.map((item, index) => ( - - {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( -
-
- {item.status.name} -
- ( -

{item.content}

- ) - } - // direction="horizontal" - > - {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => ( -
- {items.map((item, index) => ( - - {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( -
- {item.content} -
)} - - ))} - {provided.placeholder} -
- )} - -
)} - + {columnn.map((column, index) => ( + ))} : null } {provided.placeholder} -
- +
)} - + } ) } -{/* */} + From 66ca7b5e2bf64ff321d01c4b4a941016b17e5287 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 11:13:04 +0100 Subject: [PATCH 16/49] update: make column scrollable --- apps/web/lib/components/Kanban.tsx | 28 +++++++++++++++---- .../lib/features/team-members-kanban-view.tsx | 2 +- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 860945b5a..33a3af2f8 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -26,7 +26,16 @@ function getStyle(provided, style) { ...provided.draggableProps.style, ...style, }; - } +} + +// this function changes column header color when dragged +function headerStyleChanger(snapshot: DraggableStateSnapshot){ + const backgroundColor = snapshot.isDragging ? '#000' : '#fff'; + + return { + backgroundColor + } +} function QuoteItem(props: any) { const { @@ -133,7 +142,15 @@ export const KanbanDroppable = ({ title, droppableId, type, style, content }: { isDraggingFrom={Boolean(dropSnapshot.draggingFromThisWith)} {...dropProvided.droppableProps} > - +
+ +
)} @@ -164,10 +181,11 @@ const KanbanDraggable = ({key, index, draggableId, title, content}: { snapshot.isDragging, provided.draggableProps.style )} - className="flex flex-col gap-2" + className="flex flex-col gap-2 w-60" >

diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index fe8b85f14..71db8dd96 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -137,7 +137,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { > {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
Date: Tue, 21 Nov 2023 12:00:29 +0100 Subject: [PATCH 17/49] feat:resolve issues with dragging to empty column --- apps/web/lib/components/Kanban.tsx | 60 ++++++++++++++++++++---------- 1 file changed, 41 insertions(+), 19 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 33a3af2f8..785d05ac2 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -28,9 +28,28 @@ function getStyle(provided, style) { }; } +export const getBackgroundColor = (isDraggingOver, isDraggingFrom) => { + if (isDraggingOver) { + return { + backgroundColor: '#FFEBE6', + height: '150px' + } + } + if (isDraggingFrom) { + return { + backgroundColor: '#E6FCFF', + height: '150px' + } + } + return { + backgroundColor: '#EBECF0', + height: '150px' + } +}; + // this function changes column header color when dragged function headerStyleChanger(snapshot: DraggableStateSnapshot){ - const backgroundColor = snapshot.isDragging ? '#000' : '#fff'; + const backgroundColor = snapshot.isDragging ? '#0000ee' : '#fffee'; return { backgroundColor @@ -93,18 +112,20 @@ function InnerQuoteList({quotes}: { function InnerList(props: { title: string, quotes: any[], - dropProvided: any + dropProvided: any, + dropSnapshot: any }) { - const { quotes, dropProvided } = props; - const title = props.title ?

{props.title}

: null; + const { quotes, dropProvided, dropSnapshot } = props; return ( -
-
+ +
{dropProvided.placeholder}
-
+ ); } @@ -136,21 +157,22 @@ export const KanbanDroppable = ({ title, droppableId, type, style, content }: { > {(dropProvided, dropSnapshot) => (
-
- -
+ {/*
*/} + + {/*
*/}
)} @@ -201,8 +223,8 @@ const KanbanDraggable = ({key, index, draggableId, title, content}: { droppableId={title} type={'TASK'} style={{ - backgroundColor: snapshot.isDragging ? '#fff' : null, - }} + backgroundColor: snapshot.isDragging ? '#000' : 'null', + }} content={content} />
From 9a714e8f84706d4dddaa1e8585e9042e04e6260c Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 18:21:35 +0100 Subject: [PATCH 18/49] update:formating props --- apps/web/lib/components/Kanban.tsx | 109 +++++++++--------- .../lib/features/team-members-kanban-view.tsx | 17 ++- 2 files changed, 70 insertions(+), 56 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 785d05ac2..7ce0f160e 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -163,16 +163,9 @@ export const KanbanDroppable = ({ title, droppableId, type, style, content }: { isDraggingFrom={Boolean(dropSnapshot.draggingFromThisWith)} {...dropProvided.droppableProps} > - {/*
*/} + - {/*
*/} + )} @@ -180,56 +173,66 @@ export const KanbanDroppable = ({ title, droppableId, type, style, content }: { ) }; -const KanbanDraggable = ({key, index, draggableId, title, content}: { - key: string; +const KanbanDraggable = ({index,title, content}: { index: number; - draggableId: string; title: string; - content: any[]; + content: any; }) => { + return ( <> - - {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( -
-
0 && + + {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( + +
-

- {title} -

-
- -
- )} - + { title.length > 0 ? + <> +
+

+ {title} +

+
+ + + : + null + } + + + )} + + } ) } diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index 71db8dd96..c8cd55291 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -1,5 +1,5 @@ import KanbanDraggable from "lib/components/Kanban" -import { useState } from "react"; +import { useEffect, useState } from "react"; import { DragDropContext, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd"; const reorder = (list: any[], startIndex:number , endIndex:number ) => { @@ -124,6 +124,19 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { } + const [enabled, setEnabled] = useState(false); + + useEffect(() => { + const animation = requestAnimationFrame(() => setEnabled(true)); + + return () => { + cancelAnimationFrame(animation); + setEnabled(false); + }; + }, []); + + if (!enabled) return null; + return ( <> { <> {columnn.map((column, index) => ( ))} From 11e25a0a788992e9b8fca4f6ae153c633e39ff8b Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 19:05:31 +0100 Subject: [PATCH 19/49] chore:rename function and commenting --- apps/web/lib/components/Kanban.tsx | 83 +++++++++++++------ .../lib/features/team-members-kanban-view.tsx | 69 +++++++-------- apps/web/pages/kanban/index.tsx | 2 - 3 files changed, 88 insertions(+), 66 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 7ce0f160e..e296b2427 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -28,7 +28,7 @@ function getStyle(provided, style) { }; } -export const getBackgroundColor = (isDraggingOver, isDraggingFrom) => { +const getBackgroundColor = (isDraggingOver, isDraggingFrom) => { if (isDraggingOver) { return { backgroundColor: '#FFEBE6', @@ -56,9 +56,15 @@ function headerStyleChanger(snapshot: DraggableStateSnapshot){ } } -function QuoteItem(props: any) { + +/** + * card that represent each task + * @param props + * @returns + */ +function Item(props: any) { const { - quote, + item, isDragging, isGroupedOver, provided, @@ -78,26 +84,31 @@ function QuoteItem(props: any) { {...provided.dragHandleProps} style={getStyle(provided, style)} data-is-dragging={isDragging} - data-testid={quote.id} + data-testid={item.id} data-index={index} - aria-label={`${quote.status.name} quote ${quote.content}`} + aria-label={`${item.status.name} ${item.content}`} > - {quote.content} + {item.content} ); - } +} -function InnerQuoteList({quotes}: { - quotes: any[] +/** + * wrapper to ensure card is draggable + * @param param0 + * @returns + */ +function InnerItemList({items}: { + items: any[] }) { return ( <> - {quotes.map((quote, index) => ( - + {items.map((item: any, index: number) => ( + {(dragProvided, dragSnapshot) => ( - )}; +/** + * inner column within a kanaban column, + * it holds all cards underneath the name of the column + * @param props + * @returns + */ function InnerList(props: { title: string, - quotes: any[], + items: any, dropProvided: any, dropSnapshot: any }) { - const { quotes, dropProvided, dropSnapshot } = props; + const { items, dropProvided, dropSnapshot } = props; return (
- + {dropProvided.placeholder}
); } -export const KanbanDroppable = ({ title, droppableId, type, style, content }: { +/** + * wrapper to allow inner column act as + * a droppable area for cards being dragged + * @param param0 + * @returns + */ +export const KanbanDroppable = ({ title, droppableId, type, content }: { title: string, droppableId: string, type: string, - style: any, - content: any[] + content: any } ) => { const [enabled, setEnabled] = useState(false); @@ -164,7 +186,12 @@ export const KanbanDroppable = ({ title, droppableId, type, style, content }: { {...dropProvided.droppableProps} > - + )} @@ -173,10 +200,15 @@ export const KanbanDroppable = ({ title, droppableId, type, style, content }: { ) }; -const KanbanDraggable = ({index,title, content}: { +/** + * column within the kanban board + * @param param0 + * @returns + */ +const KanbanDraggable = ({index,title, items}: { index: number; title: string; - content: any; + items: any; }) => { return ( @@ -219,10 +251,7 @@ const KanbanDraggable = ({index,title, content}: { title={title} droppableId={title} type={'TASK'} - style={{ - backgroundColor: snapshot.isDragging ? '#000' : 'null', - }} - content={content} + content={items} /> : diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index c8cd55291..2c992d99a 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -1,3 +1,4 @@ +import { clsxm } from "@app/utils"; import KanbanDraggable from "lib/components/Kanban" import { useEffect, useState } from "react"; import { DragDropContext, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd"; @@ -10,28 +11,24 @@ const reorder = (list: any[], startIndex:number , endIndex:number ) => { return result; }; -const grid = 0; - -const getListStyle = (isDraggingOver: any) => ({ - background: isDraggingOver ? "lightblue" : "lightgrey", - padding: grid, - width: '100%' -}); - -export const reorderQuoteMap = ({ quoteMap, source, destination }) => { - const current = [...quoteMap[source.droppableId]]; - const next = [...quoteMap[destination.droppableId]]; +const reorderItemMap = ({ itemMap, source, destination }: { + itemMap: any, + source: any, + destination: any +}) => { + const current = [...itemMap[source.droppableId]]; + const next = [...itemMap[destination.droppableId]]; const target = current[source.index]; // moving to same list if (source.droppableId === destination.droppableId) { const reordered = reorder(current, source.index, destination.index); const result = { - ...quoteMap, + ...itemMap, [source.droppableId]: reordered, }; return { - quoteMap: result, + quoteItem: result, }; } @@ -43,22 +40,21 @@ export const reorderQuoteMap = ({ quoteMap, source, destination }) => { next.splice(destination.index, 0, target); const result = { - ...quoteMap, + ...itemMap, [source.droppableId]: current, [destination.droppableId]: next, }; return { - quoteMap: result, + quoteItem: result, }; }; - export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { const [items, setItems] = useState(itemsArray); - const [columnn, setColumns ] = useState(Object.keys(itemsArray)) + const [column, setColumn] = useState(Object.keys(itemsArray)) /** * This function handles all drag and drop logic @@ -70,22 +66,22 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { if (result.combine) { if (result.type === 'COLUMN') { - const shallow = [...columnn]; + const shallow = [...column]; shallow.splice(result.source.index, 1); - setColumns(shallow); + setColumn(shallow); return; } - const item = items.filter((item)=> item.status.name === result.source.droppableId); - const withQuoteRemoved = [...item]; + const item = items[result.source.droppableId]; + const withItemRemoved = [...item]; - withQuoteRemoved.splice(result.source.index, 1); + withItemRemoved.splice(result.source.index, 1); - const orderedColumns = [ + const orderedItems = { ...items, - // [result.source.droppableId]: withQuoteRemoved, - ]; - setItems(orderedColumns); + [result.source.droppableId]: withItemRemoved, + }; + setItems(orderedItems); return; } @@ -107,20 +103,20 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { // reordering column if (result.type === 'COLUMN') { - const reorderedorder = reorder(items, source.index, destination.index); + const reorderedItem = reorder(items, source.index, destination.index); - setItems(reorderedorder); + setItems(reorderedItem); return; } - const data = reorderQuoteMap({ - quoteMap: items, + const data = reorderItemMap({ + itemMap: items, source, destination, }); - setItems(data.quoteMap); + setItems(data.quoteItem); } @@ -142,7 +138,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { - { columnn.length > 0 && + { column.length > 0 && { > {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
- {columnn.length > 0 ? + {column.length > 0 ? <> - {columnn.map((column, index) => ( + {column.map((column: any, index: number) => ( ))} diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx index 9d2e85584..0e4f16bbf 100644 --- a/apps/web/pages/kanban/index.tsx +++ b/apps/web/pages/kanban/index.tsx @@ -26,8 +26,6 @@ const Kanban= () => { id: 'status-4', name: 'DONE' } - // this array holds all the columns - const status = [todo, ongoing, review, done]; const demoData = { todo: [ From 8af02f897047399322ee5fd305672764aa764e6f Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 23:06:24 +0100 Subject: [PATCH 20/49] update: reorder columns when they are empty --- apps/web/lib/components/Kanban.tsx | 83 ++++++++++++++++++- .../lib/features/team-members-kanban-view.tsx | 32 +++++-- 2 files changed, 105 insertions(+), 10 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index e296b2427..53fb3c6ec 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -200,6 +200,85 @@ export const KanbanDroppable = ({ title, droppableId, type, content }: { ) }; +/** + * wrapper to allow inner column act as + * a droppable area for cards being dragged + * @param param0 + * @returns + */ +export const EmptyKanbanDroppable = ({index,title, items}: { + index: number; + title: string; + items: any; +})=> { + const [enabled, setEnabled] = useState(false); + + useEffect(() => { + const animation = requestAnimationFrame(() => setEnabled(true)); + + return () => { + cancelAnimationFrame(animation); + setEnabled(false); + }; + }, []); + + if (!enabled) return null; + + return ( + <> + { title.length > 0 && + + {(provided: DraggableProvided, snapshot: DraggableStateSnapshot) => ( + +
+ { title.length > 0 ? + <> +
+

+ {title} +

+
+ + + : + null + } +
+ + )} + + } + + ) +}; + /** * column within the kanban board * @param param0 @@ -213,7 +292,7 @@ const KanbanDraggable = ({index,title, items}: { return ( <> - { title.length > 0 && + { items.length > 0 && - { title.length > 0 ? + { items.length > 0 ? <>
{ > {column.length > 0 ? <> - {column.map((column: any, index: number) => ( - - ))} + {column.map((column: any, index: number) => { + return ( + <> + { items[column].length > 0 ? + <> + + + : +
+ +
+ } + + ) +})} : null From 2b22b90f08872ecaaeabbe1ae1e3cbd3ded0a5d0 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 23:07:45 +0100 Subject: [PATCH 21/49] update:change kanban board padding --- apps/web/lib/features/team-members-kanban-view.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index 417659320..b9449de99 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -146,7 +146,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { > {(provided: DroppableProvided, snapshot: DroppableStateSnapshot) => (
From 9378c5974182848ee400d90aa8cd9442e3b14739 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 23:17:00 +0100 Subject: [PATCH 22/49] update:adjusting kanban column gap --- apps/web/lib/components/Kanban.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 53fb3c6ec..98795f29a 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -7,7 +7,6 @@ const grid = 8; const getItemStyle = (isDragging: any, draggableStyle: any) => ({ // some basic styles to make the items look a bit nicer userSelect: "none", - padding: grid * 2, margin: `0 0 ${grid}px 0`, // change background colour if dragging @@ -103,6 +102,7 @@ function InnerItemList({items}: { }) { return ( <> +
{items.map((item: any, index: number) => ( {(dragProvided, dragSnapshot) => ( @@ -116,7 +116,8 @@ function InnerItemList({items}: { )} )) - } + } +
)}; @@ -308,7 +309,7 @@ const KanbanDraggable = ({index,title, items}: { snapshot.isDragging, provided.draggableProps.style )} - className="flex flex-col gap-2 w-60" + className="flex flex-col gap-5 w-[325px]" > { items.length > 0 ? From 1b16345f0f751b3ee672b9cd8040d321c964b22f Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 23:55:23 +0100 Subject: [PATCH 23/49] feat:add color to header --- apps/web/tailwind.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js index b8c544421..66632b643 100644 --- a/apps/web/tailwind.config.js +++ b/apps/web/tailwind.config.js @@ -33,6 +33,7 @@ module.exports = { transparent: 'transparent', current: 'currentColor', neutral: '#7E7991', + transparentWhite: 'rgba(255, 255, 255, 0.30)', default: { DEFAULT: '#282048' }, From bb9abee157d6776b9e4f7092f4049cfb05005d50 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 23:55:35 +0100 Subject: [PATCH 24/49] feat:add tailess left arrow arrow --- apps/web/components/ui/svgs/left-arrow-tailess.tsx | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 apps/web/components/ui/svgs/left-arrow-tailess.tsx diff --git a/apps/web/components/ui/svgs/left-arrow-tailess.tsx b/apps/web/components/ui/svgs/left-arrow-tailess.tsx new file mode 100644 index 000000000..f0620e949 --- /dev/null +++ b/apps/web/components/ui/svgs/left-arrow-tailess.tsx @@ -0,0 +1,7 @@ +export default function LeftArrowTailessIcon() { + return ( + <> + + + ) +} \ No newline at end of file From b407809fb0461a58bd564c3f9c2a76dce2c701a1 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 23:55:45 +0100 Subject: [PATCH 25/49] feat:add three dots icon --- apps/web/components/ui/svgs/three-dot.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 apps/web/components/ui/svgs/three-dot.tsx diff --git a/apps/web/components/ui/svgs/three-dot.tsx b/apps/web/components/ui/svgs/three-dot.tsx new file mode 100644 index 000000000..1b24b4bf7 --- /dev/null +++ b/apps/web/components/ui/svgs/three-dot.tsx @@ -0,0 +1,15 @@ +export default function ThreeDotIcon({ + width=20, + height=20, + color="white" +}: { + width?: number, + height?: number, + color?: string +}) { + return ( + <> + + + ) +} \ No newline at end of file From 5d0770e3f9f0505f0b9665e0f41efc67a3729360 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Tue, 21 Nov 2023 23:56:17 +0100 Subject: [PATCH 26/49] feat:add kanban header ui --- apps/web/lib/components/Kanban.tsx | 64 ++++++++++++++++++++++++------ 1 file changed, 51 insertions(+), 13 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 98795f29a..727162e4b 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -1,3 +1,5 @@ +import LeftArrowTailessIcon from '@components/ui/svgs/left-arrow-tailess'; +import ThreeDotIcon from '@components/ui/svgs/three-dot'; import React from 'react'; import { useEffect, useState } from 'react'; import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable } from 'react-beautiful-dnd'; @@ -280,6 +282,49 @@ export const EmptyKanbanDroppable = ({index,title, items}: { ) }; +const KanbanDraggableHeader = ({title, items, snapshot, provided}: { + title: string, + items: any, + snapshot: DraggableStateSnapshot, + provided: DraggableProvided +}) => { + return ( + <> +
+
+

+ {title} +

+
+ {items.length} +
+
+
+ + +
+
+ + ) +} + /** * column within the kanban board * @param param0 @@ -314,19 +359,12 @@ const KanbanDraggable = ({index,title, items}: { > { items.length > 0 ? <> -
-

- {title} -

-
+ Date: Wed, 22 Nov 2023 01:02:47 +0100 Subject: [PATCH 27/49] feat:add tags to task card --- apps/web/lib/components/Kanban.tsx | 53 +----------- apps/web/lib/components/kanban-card.tsx | 107 ++++++++++++++++++++++++ apps/web/pages/kanban/index.tsx | 84 +++++++++++++++++++ 3 files changed, 195 insertions(+), 49 deletions(-) create mode 100644 apps/web/lib/components/kanban-card.tsx diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 727162e4b..e3d61084b 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -3,6 +3,7 @@ import ThreeDotIcon from '@components/ui/svgs/three-dot'; import React from 'react'; import { useEffect, useState } from 'react'; import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable } from 'react-beautiful-dnd'; +import Item from './kanban-card'; const grid = 8; @@ -12,22 +13,13 @@ const getItemStyle = (isDragging: any, draggableStyle: any) => ({ margin: `0 0 ${grid}px 0`, // change background colour if dragging - background: isDragging ? "lightgreen" : "grey", + background: isDragging ? "lightgreen" : null, // styles we need to apply on draggables ...draggableStyle }); -function getStyle(provided, style) { - if (!style) { - return provided.draggableProps.style; - } - - return { - ...provided.draggableProps.style, - ...style, - }; -} + const getBackgroundColor = (isDraggingOver, isDraggingFrom) => { if (isDraggingOver) { @@ -43,7 +35,7 @@ const getBackgroundColor = (isDraggingOver, isDraggingFrom) => { } } return { - backgroundColor: '#EBECF0', + backgroundColor: '', height: '150px' } }; @@ -57,43 +49,6 @@ function headerStyleChanger(snapshot: DraggableStateSnapshot){ } } - -/** - * card that represent each task - * @param props - * @returns - */ -function Item(props: any) { - const { - item, - isDragging, - isGroupedOver, - provided, - style, - isClone, - index, - } = props; - - return ( -
- {item.content} -
- ); -} - /** * wrapper to ensure card is draggable * @param param0 diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx new file mode 100644 index 000000000..3b6a72704 --- /dev/null +++ b/apps/web/lib/components/kanban-card.tsx @@ -0,0 +1,107 @@ +import { clsxm } from "@app/utils"; + +function getStyle(provided, style) { + if (!style) { + return provided.draggableProps.style; + } + + return { + ...provided.draggableProps.style, + ...style, + }; +} + +function Tag({title, backgroundColor, color}: { + title: string, + backgroundColor: string, + color: string +}) { + + return ( + <> +
+

{title}

+
+ + ) +} + +function TagList({tags}: { + tags: any[] +}){ + return ( + <> +
+ {tags.map((tag: any, index: number)=> { + return ( + + ) + })} +
+ + ) +} + +/** + * card that represent each task + * @param props + * @returns + */ +export default function Item(props: any) { + const { + item, + isDragging, + isGroupedOver, + provided, + style, + isClone, + index, + } = props; + + return ( +
+
+
+ +
+ {item.content} +
+
+
+ +
+
+
+ +
+
+ ); +} \ No newline at end of file diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx index 0e4f16bbf..2601b626a 100644 --- a/apps/web/pages/kanban/index.tsx +++ b/apps/web/pages/kanban/index.tsx @@ -32,11 +32,39 @@ const Kanban= () => { { id: '1', content: 'demo content', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#8154BA', + color: '#fff' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#EAD2D5', + color: '#DD2F44' + }, + ], status: todo }, { id: '4', content: 'demo content2', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#EAD9EE', + color: '#9641AB' + }, + ], status: todo } ], @@ -44,11 +72,39 @@ const Kanban= () => { { id: '2', content: 'another content', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#EAD9EE', + color: '#9641AB' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#EAD2D5', + color: '#DD2F44' + }, + ], status: ongoing }, { id: '5', content: 'another content2', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#8154BA', + color: '#fff' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + ], status: ongoing } ], @@ -56,11 +112,39 @@ const Kanban= () => { { id: '3', content: 'a simple tes', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + ], status: review }, { id: '6', content: 'a simple tes', + tags: [ + { + id: 'tag-1', + title: 'User Profile', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + { + id: 'tag-2', + title: 'BackEnd', + backgroundColor: '#D7EBDF', + color: '#3D9360' + }, + ], status: review } ]} From 72a1eeecf03b547b748173f3212d79be22061e29 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Wed, 22 Nov 2023 01:21:27 +0100 Subject: [PATCH 28/49] feat:add timer to item card --- .../web/components/ui/svgs/vertical-three-dot.tsx | 11 +++++++++++ apps/web/lib/components/kanban-card.tsx | 15 +++++++++++---- 2 files changed, 22 insertions(+), 4 deletions(-) create mode 100644 apps/web/components/ui/svgs/vertical-three-dot.tsx diff --git a/apps/web/components/ui/svgs/vertical-three-dot.tsx b/apps/web/components/ui/svgs/vertical-three-dot.tsx new file mode 100644 index 000000000..efece6d0c --- /dev/null +++ b/apps/web/components/ui/svgs/vertical-three-dot.tsx @@ -0,0 +1,11 @@ +export default function VerticalThreeDot(){ + return ( + <> + + + + + + + ) +} \ No newline at end of file diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx index 3b6a72704..059348216 100644 --- a/apps/web/lib/components/kanban-card.tsx +++ b/apps/web/lib/components/kanban-card.tsx @@ -1,4 +1,5 @@ import { clsxm } from "@app/utils"; +import VerticalThreeDot from "@components/ui/svgs/vertical-three-dot"; function getStyle(provided, style) { if (!style) { @@ -88,19 +89,25 @@ export default function Item(props: any) { data-index={index} aria-label={`${item.status.name} ${item.content}`} > -
+
{item.content}
-
- +
+
-
+
+
+ Worked: +

0 h 0 m

+
+
+
); From a2a350dcfb7d2f254f0b21c0f9e6e9b7cf2bc2e7 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Thu, 23 Nov 2023 10:47:26 +0100 Subject: [PATCH 29/49] feat:add icon --- apps/web/components/ui/svgs/add.tsx | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 apps/web/components/ui/svgs/add.tsx diff --git a/apps/web/components/ui/svgs/add.tsx b/apps/web/components/ui/svgs/add.tsx new file mode 100644 index 000000000..f248228b7 --- /dev/null +++ b/apps/web/components/ui/svgs/add.tsx @@ -0,0 +1,7 @@ +export default function AddIcon(){ + return ( + <> + + + ) +} \ No newline at end of file From 021a2b1092de334cfcb5e38929e919d1234b9557 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Thu, 23 Nov 2023 10:47:46 +0100 Subject: [PATCH 30/49] fix:resolve column height to match content --- apps/web/lib/components/Kanban.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index e3d61084b..6efac21ce 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -4,6 +4,7 @@ import React from 'react'; import { useEffect, useState } from 'react'; import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable } from 'react-beautiful-dnd'; import Item from './kanban-card'; +import { AddIcon } from './svgs'; const grid = 8; @@ -25,18 +26,18 @@ const getBackgroundColor = (isDraggingOver, isDraggingFrom) => { if (isDraggingOver) { return { backgroundColor: '#FFEBE6', - height: '150px' + height: '100%' } } if (isDraggingFrom) { return { backgroundColor: '#E6FCFF', - height: '150px' + height: '100%' } } return { backgroundColor: '', - height: '150px' + height: '100%' } }; @@ -326,10 +327,13 @@ const KanbanDraggable = ({index,title, items}: { type={'TASK'} content={items} /> + + : null } +
)} From 8f1ca7a1a2318524413d4c5bba25328aad43b9d3 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Thu, 23 Nov 2023 10:48:08 +0100 Subject: [PATCH 31/49] update:add create issues button to kanban board --- apps/web/lib/features/team-members-kanban-view.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index b9449de99..f1f9aa85c 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -1,5 +1,6 @@ import { clsxm } from "@app/utils"; import KanbanDraggable, { EmptyKanbanDroppable } from "lib/components/Kanban" +import { AddIcon } from "lib/components/svgs"; import { useEffect, useState } from "react"; import { DragDropContext, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd"; @@ -157,11 +158,17 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { <> { items[column].length > 0 ? <> +
+
+ +

Create Issues

+
+
:
From c15edcf2ae92fc3fe3fe842c2ea4e49079ad3135 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Thu, 23 Nov 2023 13:22:42 +0100 Subject: [PATCH 32/49] update:add indianred color --- apps/web/tailwind.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js index 66632b643..2672a7844 100644 --- a/apps/web/tailwind.config.js +++ b/apps/web/tailwind.config.js @@ -33,6 +33,7 @@ module.exports = { transparent: 'transparent', current: 'currentColor', neutral: '#7E7991', + indianRed: '#D95F5F', transparentWhite: 'rgba(255, 255, 255, 0.30)', default: { DEFAULT: '#282048' From 10d9800936190d7f44a805890ac4dc2c7a02933a Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Thu, 23 Nov 2023 13:22:59 +0100 Subject: [PATCH 33/49] update empty columns --- apps/web/lib/components/Kanban.tsx | 42 +++++++++++++++++++++++------- 1 file changed, 33 insertions(+), 9 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 6efac21ce..1de599503 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -201,23 +201,47 @@ export const EmptyKanbanDroppable = ({index,title, items}: { snapshot.isDragging, provided.draggableProps.style )} - className="flex flex-col gap-2 w-60" + className="flex flex-row w-fit h-full" > { title.length > 0 ? <> -
-

- {title} -

+ + + + + +
+
+
+ {items.length} +
+
+

+ {title} +

+
+
+
Date: Thu, 23 Nov 2023 19:25:57 +0100 Subject: [PATCH 34/49] update:add grey color to tailwind --- apps/web/tailwind.config.js | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/web/tailwind.config.js b/apps/web/tailwind.config.js index 2672a7844..9cbcbd3ba 100644 --- a/apps/web/tailwind.config.js +++ b/apps/web/tailwind.config.js @@ -34,6 +34,7 @@ module.exports = { current: 'currentColor', neutral: '#7E7991', indianRed: '#D95F5F', + grey: '#868296', transparentWhite: 'rgba(255, 255, 255, 0.30)', default: { DEFAULT: '#282048' From f2a6807e03123edeb90a2e61c83d785dcc4adb76 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Thu, 23 Nov 2023 19:26:06 +0100 Subject: [PATCH 35/49] feat:add bug icon --- apps/web/components/ui/svgs/bug.tsx | 15 +++++++++++++++ 1 file changed, 15 insertions(+) create mode 100644 apps/web/components/ui/svgs/bug.tsx diff --git a/apps/web/components/ui/svgs/bug.tsx b/apps/web/components/ui/svgs/bug.tsx new file mode 100644 index 000000000..0545ecb4f --- /dev/null +++ b/apps/web/components/ui/svgs/bug.tsx @@ -0,0 +1,15 @@ +export default function BugIcon({ + width=12, + height=12, + fill="white" +}:{ + width?: number, + height?: number, + fill?: string +}){ + return ( + + + + ) +} \ No newline at end of file From ce75052be104aca9f90e7a6253a0272b09f51ac1 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Thu, 23 Nov 2023 19:26:34 +0100 Subject: [PATCH 36/49] update:add bug to task card --- apps/web/lib/components/kanban-card.tsx | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx index 059348216..97fb19dc2 100644 --- a/apps/web/lib/components/kanban-card.tsx +++ b/apps/web/lib/components/kanban-card.tsx @@ -1,4 +1,5 @@ import { clsxm } from "@app/utils"; +import BugIcon from "@components/ui/svgs/bug"; import VerticalThreeDot from "@components/ui/svgs/vertical-three-dot"; function getStyle(provided, style) { @@ -26,6 +27,7 @@ function Tag({title, backgroundColor, color}: { backgroundColor: `${backgroundColor}` }} > +

-
- {item.content} +
+
+ +
+

#213

+

{item.content}

+
From 43f027f8ab08838dd40d6a027876ec2b0eb5e2f4 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 10:19:39 +0100 Subject: [PATCH 37/49] fix:resolve issue with linting --- apps/web/lib/components/Kanban.tsx | 3 +-- apps/web/lib/components/kanban-card.tsx | 2 +- 2 files changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 1de599503..9cc86b8b6 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -4,7 +4,6 @@ import React from 'react'; import { useEffect, useState } from 'react'; import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable } from 'react-beautiful-dnd'; import Item from './kanban-card'; -import { AddIcon } from './svgs'; const grid = 8; @@ -77,7 +76,7 @@ function InnerItemList({items}: { } -)}; +)} /** * inner column within a kanaban column, diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx index 97fb19dc2..bba619764 100644 --- a/apps/web/lib/components/kanban-card.tsx +++ b/apps/web/lib/components/kanban-card.tsx @@ -1,4 +1,3 @@ -import { clsxm } from "@app/utils"; import BugIcon from "@components/ui/svgs/bug"; import VerticalThreeDot from "@components/ui/svgs/vertical-three-dot"; @@ -48,6 +47,7 @@ function TagList({tags}: { {tags.map((tag: any, index: number)=> { return ( Date: Fri, 24 Nov 2023 10:41:17 +0100 Subject: [PATCH 38/49] fix:resolve issues with deepscan --- apps/web/components/ui/svgs/left-arrow-tailess.tsx | 2 +- apps/web/components/ui/svgs/vertical-three-dot.tsx | 6 +++--- apps/web/lib/features/team-members-kanban-view.tsx | 2 ++ apps/web/pages/kanban/index.tsx | 12 +++--------- 4 files changed, 9 insertions(+), 13 deletions(-) diff --git a/apps/web/components/ui/svgs/left-arrow-tailess.tsx b/apps/web/components/ui/svgs/left-arrow-tailess.tsx index f0620e949..b33767e40 100644 --- a/apps/web/components/ui/svgs/left-arrow-tailess.tsx +++ b/apps/web/components/ui/svgs/left-arrow-tailess.tsx @@ -1,7 +1,7 @@ export default function LeftArrowTailessIcon() { return ( <> - + ) } \ No newline at end of file diff --git a/apps/web/components/ui/svgs/vertical-three-dot.tsx b/apps/web/components/ui/svgs/vertical-three-dot.tsx index efece6d0c..96f912ac8 100644 --- a/apps/web/components/ui/svgs/vertical-three-dot.tsx +++ b/apps/web/components/ui/svgs/vertical-three-dot.tsx @@ -2,9 +2,9 @@ export default function VerticalThreeDot(){ return ( <> - - - + + + ) diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index f1f9aa85c..731cf0623 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -160,6 +160,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { <>
{ :
{ name: 'REVIEW' } - const done = { - id: 'status-4', - name: 'DONE' - } - const demoData = { todo: [ { @@ -150,11 +145,11 @@ const Kanban= () => { ]} useEffect(() => { - if(demoData) { + if(demoData.ongoing.length > 0 && demoData.todo.length > 0 && demoData.review.length > 0) { setwinReady(true); } - }, [router.isReady, demoData]); + }, [router.isReady]); return ( <> @@ -168,6 +163,5 @@ const Kanban= () => { ) } -// export default withAuthentication(Kanban, { displayName: 'Kanban'}); -export default Kanban; +export default withAuthentication(Kanban, { displayName: 'Kanban'}); From ef398c23035cafa58029102047171aef45c6f5a3 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 10:54:48 +0100 Subject: [PATCH 39/49] fix:add key values --- .../lib/features/team-members-kanban-view.tsx | 59 +++++++++---------- 1 file changed, 29 insertions(+), 30 deletions(-) diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index 731cf0623..7580336f4 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -153,40 +153,39 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { > {column.length > 0 ? <> - {column.map((column: any, index: number) => { - return ( - <> - { items[column].length > 0 ? - <> -
- -
- -

Create Issues

-
+ {column.map((column: any, index: number) => { + return ( + <> + { items[column].length > 0 ? + <> +
+ +
+ +

Create Issues

+
+
+ + : +
+
+ } - : -
- -
- } - - ) -})} + ) + })} : - null + null } {provided.placeholder}
From 59dab9af2e2b56e01a5d31865fd1ab630b82bc4d Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 10:59:50 +0100 Subject: [PATCH 40/49] fix:add key to fragment --- apps/web/lib/features/team-members-kanban-view.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index 7580336f4..fc8a888f6 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -1,6 +1,7 @@ import { clsxm } from "@app/utils"; import KanbanDraggable, { EmptyKanbanDroppable } from "lib/components/Kanban" import { AddIcon } from "lib/components/svgs"; +import React from "react"; import { useEffect, useState } from "react"; import { DragDropContext, DropResult, Droppable, DroppableProvided, DroppableStateSnapshot } from "react-beautiful-dnd"; @@ -155,7 +156,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { <> {column.map((column: any, index: number) => { return ( - <> + { items[column].length > 0 ? <>
@@ -180,7 +181,7 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { />
} - + ) })} From 06d0eea144a9d523b3963dffc088a40defaf842a Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 11:30:11 +0100 Subject: [PATCH 41/49] fix:resolve issues with typings --- apps/web/lib/components/Kanban.tsx | 46 +++++++++---------- apps/web/lib/components/kanban-card.tsx | 3 +- .../lib/features/team-members-kanban-view.tsx | 2 + apps/web/pages/kanban/index.tsx | 2 +- 4 files changed, 26 insertions(+), 27 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 9cc86b8b6..dcc8e0772 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -2,33 +2,27 @@ import LeftArrowTailessIcon from '@components/ui/svgs/left-arrow-tailess'; import ThreeDotIcon from '@components/ui/svgs/three-dot'; import React from 'react'; import { useEffect, useState } from 'react'; -import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable } from 'react-beautiful-dnd'; +import { Draggable, DraggableProvided, DraggableStateSnapshot, Droppable, DroppableProvided, DroppableStateSnapshot } from 'react-beautiful-dnd'; import Item from './kanban-card'; const grid = 8; const getItemStyle = (isDragging: any, draggableStyle: any) => ({ - // some basic styles to make the items look a bit nicer userSelect: "none", margin: `0 0 ${grid}px 0`, - - // change background colour if dragging background: isDragging ? "lightgreen" : null, - - // styles we need to apply on draggables ...draggableStyle }); - - -const getBackgroundColor = (isDraggingOver, isDraggingFrom) => { - if (isDraggingOver) { +const getBackgroundColor = (dropSnapshot: DroppableStateSnapshot) => { + + if (dropSnapshot.isDraggingOver) { return { backgroundColor: '#FFEBE6', height: '100%' } } - if (isDraggingFrom) { + if (dropSnapshot.draggingFromThisWith) { return { backgroundColor: '#E6FCFF', height: '100%' @@ -62,7 +56,7 @@ function InnerItemList({items}: {
{items.map((item: any, index: number) => ( - {(dragProvided, dragSnapshot) => ( + {(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => ( - {dropProvided.placeholder} + <> + {dropProvided.placeholder} +
); @@ -135,12 +131,12 @@ export const KanbanDroppable = ({ title, droppableId, type, content }: { droppableId={droppableId} type={type} > - {(dropProvided, dropSnapshot) => ( + {(dropProvided: DroppableProvided, dropSnapshot: DroppableStateSnapshot) => (
@@ -208,7 +204,7 @@ export const EmptyKanbanDroppable = ({index,title, items}: {

@@ -272,14 +268,14 @@ const KanbanDraggableHeader = ({title, items, snapshot, provided}: {

diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx index bba619764..ac3b67c18 100644 --- a/apps/web/lib/components/kanban-card.tsx +++ b/apps/web/lib/components/kanban-card.tsx @@ -1,7 +1,8 @@ import BugIcon from "@components/ui/svgs/bug"; import VerticalThreeDot from "@components/ui/svgs/vertical-three-dot"; +import { DraggableProvided } from "react-beautiful-dnd"; -function getStyle(provided, style) { +function getStyle(provided: DraggableProvided, style: any) { if (!style) { return provided.draggableProps.style; } diff --git a/apps/web/lib/features/team-members-kanban-view.tsx b/apps/web/lib/features/team-members-kanban-view.tsx index fc8a888f6..3f0beea7f 100644 --- a/apps/web/lib/features/team-members-kanban-view.tsx +++ b/apps/web/lib/features/team-members-kanban-view.tsx @@ -188,7 +188,9 @@ export const KanbanView = ({ itemsArray }: { itemsArray: any}) => { : null } + <> {provided.placeholder} +

)} diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx index 1b5608d33..d3799b425 100644 --- a/apps/web/pages/kanban/index.tsx +++ b/apps/web/pages/kanban/index.tsx @@ -145,7 +145,7 @@ const Kanban= () => { ]} useEffect(() => { - if(demoData.ongoing.length > 0 && demoData.todo.length > 0 && demoData.review.length > 0) { + if(demoData.ongoing.length > 0 && demoData.todo.length > 0 && demoData..length > 0) { setwinReady(true); } From fc6e9a1288fe39d2ce0390eede2404d1fbb6dae4 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 11:33:42 +0100 Subject: [PATCH 42/49] fix:change custom attribute name --- apps/web/lib/components/Kanban.tsx | 6 +++--- apps/web/pages/kanban/index.tsx | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index dcc8e0772..d920c0272 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -134,9 +134,9 @@ export const KanbanDroppable = ({ title, droppableId, type, content }: { {(dropProvided: DroppableProvided, dropSnapshot: DroppableStateSnapshot) => (
diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx index d3799b425..1b5608d33 100644 --- a/apps/web/pages/kanban/index.tsx +++ b/apps/web/pages/kanban/index.tsx @@ -145,7 +145,7 @@ const Kanban= () => { ]} useEffect(() => { - if(demoData.ongoing.length > 0 && demoData.todo.length > 0 && demoData..length > 0) { + if(demoData.ongoing.length > 0 && demoData.todo.length > 0 && demoData.review.length > 0) { setwinReady(true); } From acf47e299957e3f1eb69f2bf814b83388dcfb15f Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 11:38:06 +0100 Subject: [PATCH 43/49] fix:typographical issue with custom attribute --- apps/web/lib/components/Kanban.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index d920c0272..c54867cff 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -135,8 +135,8 @@ export const KanbanDroppable = ({ title, droppableId, type, content }: {
From f515236f638820c08343d8c7c67dd9c35f415e50 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 12:15:42 +0100 Subject: [PATCH 44/49] feat:add unknown words to cspell --- .cspell.json | 11 +++++++++++ apps/web/lib/components/Kanban.tsx | 2 +- 2 files changed, 12 insertions(+), 1 deletion(-) diff --git a/.cspell.json b/.cspell.json index 42b1aa603..c574fe37b 100644 --- a/.cspell.json +++ b/.cspell.json @@ -15,6 +15,7 @@ "Chatwoot", "cloc", "cloudinary", + "clsx", "clsxm", "commitlint", "compodoc", @@ -30,21 +31,31 @@ "heroicons", "Huhn", "icnsutils", + "isdragging", + "isdraggingfrom", + "isdropdisabled", "JITSU", "kanban", "libappindicator", + "lucide", "mathieudutour", "ncipollo", + "nextjs", "passcode", "plasmo", "precommit", "RECAPTCHA", "setuptools", + "setwin", "snyk", "stylelint", "svgs", + "Tailess", + "tailess", "tailwindcss", + "testid", "Timesheet", + "tanstack", "vcpu", "Vercel", "HUBSTAFF", diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index c54867cff..506d2c84f 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -73,7 +73,7 @@ function InnerItemList({items}: { )} /** - * inner column within a kanaban column, + * inner column within a kanban column, * it holds all cards underneath the name of the column * @param props * @returns From d6cc633516a347cde7f18e7a631c1ea0dd0656d4 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 12:54:42 +0100 Subject: [PATCH 45/49] feat:make kanban column scrollable --- apps/web/lib/components/Kanban.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/apps/web/lib/components/Kanban.tsx b/apps/web/lib/components/Kanban.tsx index 506d2c84f..2072cfe38 100644 --- a/apps/web/lib/components/Kanban.tsx +++ b/apps/web/lib/components/Kanban.tsx @@ -19,18 +19,16 @@ const getBackgroundColor = (dropSnapshot: DroppableStateSnapshot) => { if (dropSnapshot.isDraggingOver) { return { backgroundColor: '#FFEBE6', - height: '100%' } } if (dropSnapshot.draggingFromThisWith) { return { backgroundColor: '#E6FCFF', - height: '100%' } } return { backgroundColor: '', - height: '100%' + } }; @@ -53,7 +51,7 @@ function InnerItemList({items}: { }) { return ( <> -
+
{items.map((item: any, index: number) => ( {(dragProvided: DraggableProvided, dragSnapshot: DraggableStateSnapshot) => ( From e888afe6c8d64d54cd69e8241bdcdb83e7f4713f Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 15:08:31 +0100 Subject: [PATCH 46/49] fix issues with codec --- apps/web/pages/kanban/index.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/apps/web/pages/kanban/index.tsx b/apps/web/pages/kanban/index.tsx index 1b5608d33..b0b6d5c08 100644 --- a/apps/web/pages/kanban/index.tsx +++ b/apps/web/pages/kanban/index.tsx @@ -145,9 +145,9 @@ const Kanban= () => { ]} useEffect(() => { - if(demoData.ongoing.length > 0 && demoData.todo.length > 0 && demoData.review.length > 0) { + setwinReady(true); - } + }, [router.isReady]); @@ -164,4 +164,3 @@ const Kanban= () => { } export default withAuthentication(Kanban, { displayName: 'Kanban'}); - From 11610b1b52226aa7d1f29678f016ba88c7e074f7 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 15:08:58 +0100 Subject: [PATCH 47/49] update:add collaborator image to task card --- apps/web/lib/components/kanban-card.tsx | 59 +++++++++++++++++++++++-- 1 file changed, 55 insertions(+), 4 deletions(-) diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx index ac3b67c18..cc628bf75 100644 --- a/apps/web/lib/components/kanban-card.tsx +++ b/apps/web/lib/components/kanban-card.tsx @@ -1,4 +1,5 @@ import BugIcon from "@components/ui/svgs/bug"; +import Image from 'next/image'; import VerticalThreeDot from "@components/ui/svgs/vertical-three-dot"; import { DraggableProvided } from "react-beautiful-dnd"; @@ -60,12 +61,26 @@ function TagList({tags}: { ) } +let imageRadius = 20; + +const stackImages = (index: number, length: number) => { + const total_length = ((length+1) * imageRadius); + + return { + zIndex: (index+1).toString(), + right: `calc(${total_length -(imageRadius * (index + 2))}px)` + } +} + /** * card that represent each task * @param props * @returns */ export default function Item(props: any) { + + + const { item, isDragging, @@ -86,7 +101,7 @@ export default function Item(props: any) { {...provided.draggableProps} {...provided.dragHandleProps} style={getStyle(provided, style)} - className="flex flex-col rounded-2xl bg-white p-4" + className="flex flex-col rounded-2xl bg-white p-4 relative" data-is-dragging={isDragging} data-testid={item.id} data-index={index} @@ -113,10 +128,46 @@ export default function Item(props: any) { Worked:

0 h 0 m

-
- +
+
+ {images.map((image: any, index: number)=> { + return ( + {""} + ) + })} +
); -} \ No newline at end of file +} + +const images = [ + { + id: 0, + url: '/assets/cover/auth-bg-cover-dark.png' + }, + { + id: 1, + url: '/assets/cover/auth-bg-cover-dark.png' + }, + { + id: 2, + url: '/assets/cover/auth-bg-cover-dark.png' + }, + { + id: 3, + url: '/assets/cover/auth-bg-cover-dark.png' + }, + { + id: 4, + url: '/assets/cover/auth-bg-cover-dark.png' + }, +] \ No newline at end of file From 13e3e7cec73849b67ddc7939e6d10f9ac2421192 Mon Sep 17 00:00:00 2001 From: maceteligolden Date: Fri, 24 Nov 2023 15:12:26 +0100 Subject: [PATCH 48/49] update:add key to collaborator image iteration --- apps/web/lib/components/kanban-card.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx index cc628bf75..bd32ff9ad 100644 --- a/apps/web/lib/components/kanban-card.tsx +++ b/apps/web/lib/components/kanban-card.tsx @@ -133,6 +133,7 @@ export default function Item(props: any) { {images.map((image: any, index: number)=> { return ( {""} Date: Fri, 24 Nov 2023 15:15:17 +0100 Subject: [PATCH 49/49] update:change imageradius from let to const --- apps/web/lib/components/kanban-card.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/apps/web/lib/components/kanban-card.tsx b/apps/web/lib/components/kanban-card.tsx index bd32ff9ad..d14f3ff16 100644 --- a/apps/web/lib/components/kanban-card.tsx +++ b/apps/web/lib/components/kanban-card.tsx @@ -61,9 +61,10 @@ function TagList({tags}: { ) } -let imageRadius = 20; const stackImages = (index: number, length: number) => { + const imageRadius = 20; + const total_length = ((length+1) * imageRadius); return {