Compare commits
19 Commits
feat/front
...
feat/list-
Author | SHA1 | Date | |
---|---|---|---|
0eb9c0db94 | |||
cdcccbfb4a | |||
cb655347be | |||
03cf245828 | |||
09d73fdbce | |||
0caa803d27 | |||
feea209507 | |||
e57033655a | |||
31526a2575 | |||
0a1bdc19f3 | |||
771d598c04 | |||
a9a1576f46 | |||
9541ae70e0 | |||
66583bb4fb | |||
47782d6d86 | |||
4988176220 | |||
dd50baa05a | |||
46e724e731 | |||
8ce19a1ceb |
3
.github/FUNDING.yml
vendored
Normal file
3
.github/FUNDING.yml
vendored
Normal file
@ -0,0 +1,3 @@
|
|||||||
|
# These are supported funding model platforms
|
||||||
|
|
||||||
|
custom: ['https://paypal.me/jordanthedev', 'https://www.buymeacoffee.com/jordanknott']
|
28
.github/ISSUE_TEMPLATE/bug_report.md
vendored
Normal file
28
.github/ISSUE_TEMPLATE/bug_report.md
vendored
Normal file
@ -0,0 +1,28 @@
|
|||||||
|
---
|
||||||
|
name: Bug report
|
||||||
|
about: Create a report to help improve Taskcafe
|
||||||
|
title: ""
|
||||||
|
labels: ""
|
||||||
|
assignees: ""
|
||||||
|
---
|
||||||
|
|
||||||
|
**Describe the bug**
|
||||||
|
A clear and concise description of what the bug is with steps to reproduce the issue.
|
||||||
|
|
||||||
|
**Expected behavior**
|
||||||
|
What did you expect to happen?
|
||||||
|
|
||||||
|
**Screenshots / Live demo link**
|
||||||
|
If applicable, add screenshots to help explain your problem.
|
||||||
|
|
||||||
|
**Additional context**
|
||||||
|
Add any other context about the problem here.
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Please read the contributing guide before working on any new pull requests!
|
||||||
|
|
||||||
|
If you would like to ask a question regarding a possible bug or feature request, please
|
||||||
|
join the Taskcafe discord - https://discord.gg/JkQDruh
|
||||||
|
|
||||||
|
-->
|
30
.github/ISSUE_TEMPLATE/feature_request.md
vendored
Normal file
30
.github/ISSUE_TEMPLATE/feature_request.md
vendored
Normal file
@ -0,0 +1,30 @@
|
|||||||
|
---
|
||||||
|
name: Feature request
|
||||||
|
about: Create a feature request to help improve Taskcafe
|
||||||
|
title: ""
|
||||||
|
labels: ""
|
||||||
|
assignees: ""
|
||||||
|
---
|
||||||
|
|
||||||
|
**Is your feature request related to a problem? Please describe.**
|
||||||
|
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
|
||||||
|
|
||||||
|
**Describe the solution you'd like**
|
||||||
|
A clear and concise description of what you want to happen.
|
||||||
|
|
||||||
|
**Describe alternatives you've considered**
|
||||||
|
A clear and concise description of any alternative solutions or features you've considered.
|
||||||
|
|
||||||
|
**Additional context**
|
||||||
|
Add any other context or screenshots about the feature request here.
|
||||||
|
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Be aware, not all feature requests will get accepted.
|
||||||
|
|
||||||
|
Please read the contributing guide before working on any new pull requests!
|
||||||
|
|
||||||
|
If you would like to ask a question regarding a possible bug or feature request, please
|
||||||
|
join the Taskcafe discord - https://discord.gg/JkQDruh
|
||||||
|
|
||||||
|
-->
|
19
.github/pull_request_template.md
vendored
Normal file
19
.github/pull_request_template.md
vendored
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
* **Please check if the PR fulfills these requirements**
|
||||||
|
- [ ] You have read the contribution guidelines [guidelines](https://github.com/JordanKnott/taskcafe/blob/master/CONTRIBUTING.md)
|
||||||
|
- [ ] The commit message follows our [guidelines](https://github.com/JordanKnott/taskcafe/blob/master/CONTRIBUTING.md#git-commit-message-style)
|
||||||
|
- [ ] Docs have been added / updated (for bug fixes / features)
|
||||||
|
|
||||||
|
|
||||||
|
* **What kind of change does this PR introduce?** (Bug fix, feature, docs update, ...)
|
||||||
|
|
||||||
|
|
||||||
|
* **What is the current behavior?** (You can also link to an open issue here)
|
||||||
|
|
||||||
|
|
||||||
|
* **What is the new behavior (if this is a feature change)?**
|
||||||
|
|
||||||
|
|
||||||
|
* **Does this PR introduce a breaking change?** (What changes might users need to make in their application due to this PR?)
|
||||||
|
|
||||||
|
|
||||||
|
* **Other information**:
|
BIN
.github/taskcafe-full.png
vendored
BIN
.github/taskcafe-full.png
vendored
Binary file not shown.
Before Width: | Height: | Size: 51 KiB After Width: | Height: | Size: 18 KiB |
352
.github/taskcafe-full.svg
vendored
352
.github/taskcafe-full.svg
vendored
@ -7,16 +7,16 @@
|
|||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||||
inkscape:export-ydpi="96"
|
inkscape:version="1.0 (4035a4fb49, 2020-05-01)"
|
||||||
inkscape:export-xdpi="96"
|
|
||||||
inkscape:export-filename="/home/jordan/Projects/project-citadel/.github/taskcafe-full.png"
|
|
||||||
viewBox="0 0 1100 350"
|
|
||||||
version="1.1"
|
|
||||||
id="svg951"
|
|
||||||
sodipodi:docname="taskcafe-full.svg"
|
|
||||||
width="1100"
|
|
||||||
height="350"
|
height="350"
|
||||||
inkscape:version="1.0 (4035a4fb49, 2020-05-01)">
|
width="1100"
|
||||||
|
sodipodi:docname="taskcafe-full.svg"
|
||||||
|
id="svg951"
|
||||||
|
version="1.1"
|
||||||
|
viewBox="0 0 1100 350"
|
||||||
|
inkscape:export-filename="/home/jordan/Projects/project-citadel/.github/taskcafe-full.png"
|
||||||
|
inkscape:export-xdpi="96"
|
||||||
|
inkscape:export-ydpi="96">
|
||||||
<metadata
|
<metadata
|
||||||
id="metadata957">
|
id="metadata957">
|
||||||
<rdf:RDF>
|
<rdf:RDF>
|
||||||
@ -25,81 +25,70 @@
|
|||||||
<dc:format>image/svg+xml</dc:format>
|
<dc:format>image/svg+xml</dc:format>
|
||||||
<dc:type
|
<dc:type
|
||||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||||
<dc:title></dc:title>
|
<dc:title />
|
||||||
</cc:Work>
|
</cc:Work>
|
||||||
</rdf:RDF>
|
</rdf:RDF>
|
||||||
</metadata>
|
</metadata>
|
||||||
<defs
|
<defs
|
||||||
id="defs955">
|
id="defs955">
|
||||||
<inkscape:path-effect
|
<inkscape:path-effect
|
||||||
effect="bspline"
|
only_selected="false"
|
||||||
|
apply_with_weight="true"
|
||||||
|
apply_no_weight="true"
|
||||||
|
helper_size="0"
|
||||||
|
steps="2"
|
||||||
|
weight="33.333333"
|
||||||
|
lpeversion="1"
|
||||||
|
is_visible="true"
|
||||||
id="path-effect2633"
|
id="path-effect2633"
|
||||||
is_visible="true"
|
effect="bspline" />
|
||||||
lpeversion="1"
|
|
||||||
weight="33.333333"
|
|
||||||
steps="2"
|
|
||||||
helper_size="0"
|
|
||||||
apply_no_weight="true"
|
|
||||||
apply_with_weight="true"
|
|
||||||
only_selected="false" />
|
|
||||||
<inkscape:path-effect
|
<inkscape:path-effect
|
||||||
only_selected="false"
|
effect="bspline"
|
||||||
apply_with_weight="true"
|
|
||||||
apply_no_weight="true"
|
|
||||||
helper_size="0"
|
|
||||||
steps="2"
|
|
||||||
weight="33.333333"
|
|
||||||
lpeversion="1"
|
|
||||||
is_visible="true"
|
|
||||||
id="path-effect2614"
|
id="path-effect2614"
|
||||||
effect="bspline" />
|
|
||||||
<inkscape:path-effect
|
|
||||||
only_selected="false"
|
|
||||||
apply_with_weight="true"
|
|
||||||
apply_no_weight="true"
|
|
||||||
helper_size="0"
|
|
||||||
steps="2"
|
|
||||||
weight="33.333333"
|
|
||||||
lpeversion="1"
|
|
||||||
is_visible="true"
|
is_visible="true"
|
||||||
|
lpeversion="1"
|
||||||
|
weight="33.333333"
|
||||||
|
steps="2"
|
||||||
|
helper_size="0"
|
||||||
|
apply_no_weight="true"
|
||||||
|
apply_with_weight="true"
|
||||||
|
only_selected="false" />
|
||||||
|
<inkscape:path-effect
|
||||||
|
effect="bspline"
|
||||||
id="path-effect2500"
|
id="path-effect2500"
|
||||||
effect="bspline" />
|
|
||||||
<inkscape:path-effect
|
|
||||||
only_selected="false"
|
|
||||||
apply_with_weight="true"
|
|
||||||
apply_no_weight="true"
|
|
||||||
helper_size="0"
|
|
||||||
steps="2"
|
|
||||||
weight="33.333333"
|
|
||||||
lpeversion="1"
|
|
||||||
is_visible="true"
|
is_visible="true"
|
||||||
|
lpeversion="1"
|
||||||
|
weight="33.333333"
|
||||||
|
steps="2"
|
||||||
|
helper_size="0"
|
||||||
|
apply_no_weight="true"
|
||||||
|
apply_with_weight="true"
|
||||||
|
only_selected="false" />
|
||||||
|
<inkscape:path-effect
|
||||||
|
effect="bspline"
|
||||||
id="path-effect2491"
|
id="path-effect2491"
|
||||||
effect="bspline" />
|
|
||||||
<inkscape:path-effect
|
|
||||||
only_selected="false"
|
|
||||||
apply_with_weight="true"
|
|
||||||
apply_no_weight="true"
|
|
||||||
helper_size="0"
|
|
||||||
steps="2"
|
|
||||||
weight="33.333333"
|
|
||||||
lpeversion="1"
|
|
||||||
is_visible="true"
|
is_visible="true"
|
||||||
|
lpeversion="1"
|
||||||
|
weight="33.333333"
|
||||||
|
steps="2"
|
||||||
|
helper_size="0"
|
||||||
|
apply_no_weight="true"
|
||||||
|
apply_with_weight="true"
|
||||||
|
only_selected="false" />
|
||||||
|
<inkscape:path-effect
|
||||||
|
effect="bspline"
|
||||||
id="path-effect1706"
|
id="path-effect1706"
|
||||||
effect="bspline" />
|
|
||||||
<inkscape:path-effect
|
|
||||||
only_selected="false"
|
|
||||||
apply_with_weight="true"
|
|
||||||
apply_no_weight="true"
|
|
||||||
helper_size="0"
|
|
||||||
steps="2"
|
|
||||||
weight="33.333333"
|
|
||||||
lpeversion="1"
|
|
||||||
is_visible="true"
|
is_visible="true"
|
||||||
|
lpeversion="1"
|
||||||
|
weight="33.333333"
|
||||||
|
steps="2"
|
||||||
|
helper_size="0"
|
||||||
|
apply_no_weight="true"
|
||||||
|
apply_with_weight="true"
|
||||||
|
only_selected="false" />
|
||||||
|
<inkscape:path-effect
|
||||||
|
effect="bspline"
|
||||||
id="path-effect1697"
|
id="path-effect1697"
|
||||||
effect="bspline" />
|
|
||||||
<inkscape:path-effect
|
|
||||||
effect="bspline"
|
|
||||||
id="path-effect917"
|
|
||||||
is_visible="true"
|
is_visible="true"
|
||||||
lpeversion="1"
|
lpeversion="1"
|
||||||
weight="33.333333"
|
weight="33.333333"
|
||||||
@ -117,11 +106,11 @@
|
|||||||
weight="33.333333"
|
weight="33.333333"
|
||||||
lpeversion="1"
|
lpeversion="1"
|
||||||
is_visible="true"
|
is_visible="true"
|
||||||
id="path-effect950"
|
id="path-effect917"
|
||||||
effect="bspline" />
|
effect="bspline" />
|
||||||
<inkscape:path-effect
|
<inkscape:path-effect
|
||||||
effect="bspline"
|
effect="bspline"
|
||||||
id="path-effect969"
|
id="path-effect950"
|
||||||
is_visible="true"
|
is_visible="true"
|
||||||
lpeversion="1"
|
lpeversion="1"
|
||||||
weight="33.333333"
|
weight="33.333333"
|
||||||
@ -130,131 +119,150 @@
|
|||||||
apply_no_weight="true"
|
apply_no_weight="true"
|
||||||
apply_with_weight="true"
|
apply_with_weight="true"
|
||||||
only_selected="false" />
|
only_selected="false" />
|
||||||
|
<inkscape:path-effect
|
||||||
|
only_selected="false"
|
||||||
|
apply_with_weight="true"
|
||||||
|
apply_no_weight="true"
|
||||||
|
helper_size="0"
|
||||||
|
steps="2"
|
||||||
|
weight="33.333333"
|
||||||
|
lpeversion="1"
|
||||||
|
is_visible="true"
|
||||||
|
id="path-effect969"
|
||||||
|
effect="bspline" />
|
||||||
</defs>
|
</defs>
|
||||||
<sodipodi:namedview
|
<sodipodi:namedview
|
||||||
inkscape:document-rotation="0"
|
inkscape:current-layer="g2585"
|
||||||
pagecolor="#ffffff"
|
|
||||||
bordercolor="#666666"
|
|
||||||
borderopacity="1"
|
|
||||||
objecttolerance="10"
|
|
||||||
gridtolerance="10"
|
|
||||||
guidetolerance="10"
|
|
||||||
inkscape:pageopacity="0"
|
|
||||||
inkscape:pageshadow="2"
|
|
||||||
inkscape:window-width="1920"
|
|
||||||
inkscape:window-height="1032"
|
|
||||||
id="namedview953"
|
|
||||||
showgrid="false"
|
|
||||||
units="px"
|
|
||||||
inkscape:zoom="1.2109091"
|
|
||||||
inkscape:cx="550"
|
|
||||||
inkscape:cy="241.06607"
|
|
||||||
inkscape:window-x="0"
|
|
||||||
inkscape:window-y="-18"
|
|
||||||
inkscape:window-maximized="1"
|
inkscape:window-maximized="1"
|
||||||
inkscape:current-layer="g2585" />
|
inkscape:window-y="-18"
|
||||||
|
inkscape:window-x="0"
|
||||||
|
inkscape:cy="250.95495"
|
||||||
|
inkscape:cx="534.60693"
|
||||||
|
inkscape:zoom="0.85624204"
|
||||||
|
units="px"
|
||||||
|
showgrid="false"
|
||||||
|
id="namedview953"
|
||||||
|
inkscape:window-height="1032"
|
||||||
|
inkscape:window-width="1920"
|
||||||
|
inkscape:pageshadow="2"
|
||||||
|
inkscape:pageopacity="0"
|
||||||
|
guidetolerance="10"
|
||||||
|
gridtolerance="10"
|
||||||
|
objecttolerance="10"
|
||||||
|
borderopacity="1"
|
||||||
|
bordercolor="#666666"
|
||||||
|
pagecolor="#ffffff"
|
||||||
|
inkscape:document-rotation="0" />
|
||||||
<g
|
<g
|
||||||
id="g974"
|
transform="matrix(7.6408653,0,0,7.6408653,40.593299,-53.251254)"
|
||||||
transform="matrix(7.6408653,0,0,7.6408653,40.593299,-53.251254)">
|
id="g974">
|
||||||
<g
|
<g
|
||||||
id="g1721"
|
transform="matrix(0.21947908,0,0,0.21947908,-1.6240521,6.1742219)"
|
||||||
transform="matrix(0.21947908,0,0,0.21947908,-1.6240521,6.1742219)">
|
id="g1721">
|
||||||
<g
|
<g
|
||||||
transform="translate(0,-133.87521)"
|
id="g2454"
|
||||||
id="g2454">
|
transform="translate(0,-133.87521)">
|
||||||
<g
|
<g
|
||||||
transform="translate(-35.365658,-44.89936)"
|
id="g2554"
|
||||||
id="g2554">
|
transform="translate(-35.365658,-44.89936)">
|
||||||
<g
|
<g
|
||||||
transform="translate(0,107.63572)"
|
id="g2433"
|
||||||
id="g2433">
|
transform="translate(0,107.63572)">
|
||||||
<g
|
<g
|
||||||
transform="translate(0.82337254,1.4684449)"
|
id="g2439"
|
||||||
id="g2439">
|
transform="translate(0.82337254,1.4684449)">
|
||||||
<g
|
<g
|
||||||
id="g2472">
|
id="g2472">
|
||||||
<g
|
<g
|
||||||
transform="translate(0,-15.084391)"
|
id="g2585"
|
||||||
id="g2585">
|
transform="translate(0,-15.084391)">
|
||||||
<g
|
<g
|
||||||
id="g2427"
|
transform="translate(1.0665725)"
|
||||||
transform="matrix(1.9229347,0,0,1.9229347,9.8747364,70.748305)">
|
id="g4610">
|
||||||
<path
|
|
||||||
transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)"
|
|
||||||
style="fill:#7367f0;fill-opacity:1;stroke-width:0.399296"
|
|
||||||
d="m 372.01783,403.60348 c -54.69036,0 -99.02539,44.33501 -99.02539,99.02537 0,54.69035 44.33503,99.02537 99.02539,99.02537 54.69036,0 99.02538,-44.33502 99.02538,-99.02537 0,-54.69036 -44.33502,-99.02538 -99.02538,-99.02537 z m 0,19.16619 c 44.13497,0 79.85917,35.71742 79.85917,79.85918 0,44.13497 -35.71741,79.85919 -79.85917,79.85919 -44.13497,0 -79.85918,-35.71742 -79.85918,-79.85919 0,-44.13498 35.71742,-79.85918 79.85918,-79.85918 m 55.98288,52.01507 -8.99853,-9.0712 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0272 L 355.78487,521.674 331.91016,497.60565 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0275 l -9.07159,8.99853 c -1.8787,1.86352 -1.89108,4.89736 -0.0272,6.77646 l 36.24849,36.54196 c 1.86352,1.87869 4.89736,1.89107 6.77605,0.0272 l 68.9141,-68.36106 c 1.87828,-1.86392 1.89025,-4.89778 0.0268,-6.77646 z"
|
|
||||||
id="path1636" />
|
|
||||||
<g
|
<g
|
||||||
transform="translate(-0.16733365,0.61658838)"
|
id="g2560"
|
||||||
id="g2513">
|
transform="translate(-28.409706,-8.3958791)">
|
||||||
<path
|
<text
|
||||||
d="m 274.76901,687.50206 h 187.88752 c 51.86479,0 93.94376,-42.07897 93.94376,-93.94375 h 31.31459 c 69.08781,0 125.25834,-56.17055 125.25834,-125.25835 0,-69.08781 -56.17053,-125.25834 -125.25834,-125.25834 H 204.31119 c -13.01512,0 -23.48594,10.47081 -23.48594,23.48593 v 227.03076 c 0,51.86478 42.07898,93.94375 93.94376,93.94375 z M 587.91488,405.67079 c 34.54391,0 62.62917,28.08527 62.62917,62.62917 0,34.5439 -28.08526,62.62917 -62.62917,62.62917 H 556.60029 V 405.67079 Z m 46.6783,375.77503 H 134.14696 c -46.580452,0 -59.693435,-62.62917 -35.228913,-62.62917 H 669.72424 c 24.46452,0 11.54725,62.62917 -35.13106,62.62917 z"
|
xml:space="preserve"
|
||||||
id="path949"
|
style="font-size:124.328px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.690712"
|
||||||
style="fill:#10163a;fill-opacity:1;stroke-width:0.978574"
|
x="196.89775"
|
||||||
transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)" />
|
y="235.17853"
|
||||||
|
id="text852"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan850"
|
||||||
|
x="196.89775"
|
||||||
|
y="235.17853"
|
||||||
|
style="font-size:124.328px;fill:#10163a;fill-opacity:1;stroke-width:0.690712">Taskcafé</tspan></text>
|
||||||
|
<text
|
||||||
|
xml:space="preserve"
|
||||||
|
style="font-size:22.6594px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.596299"
|
||||||
|
x="223.15549"
|
||||||
|
y="261.83273"
|
||||||
|
id="text856"><tspan
|
||||||
|
sodipodi:role="line"
|
||||||
|
id="tspan854"
|
||||||
|
x="223.15549"
|
||||||
|
y="261.83273"
|
||||||
|
style="font-size:22.6594px;fill:#262c49;fill-opacity:1;stroke-width:0.596299">An open source project management tool</tspan></text>
|
||||||
|
</g>
|
||||||
|
<g
|
||||||
|
id="g4591"
|
||||||
|
transform="matrix(0.63214637,0,0,0.63214637,34.070751,71.061726)">
|
||||||
<g
|
<g
|
||||||
style="stroke:#10163a;stroke-width:0.999994;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
transform="matrix(1.9229347,0,0,1.9229347,9.8747364,70.748305)"
|
||||||
id="g1711"
|
id="g2427">
|
||||||
transform="translate(-0.91048867,42.172992)">
|
<path
|
||||||
|
id="path1636"
|
||||||
|
d="m 372.01783,403.60348 c -54.69036,0 -99.02539,44.33501 -99.02539,99.02537 0,54.69035 44.33503,99.02537 99.02539,99.02537 54.69036,0 99.02538,-44.33502 99.02538,-99.02537 0,-54.69036 -44.33502,-99.02538 -99.02538,-99.02537 z m 0,19.16619 c 44.13497,0 79.85917,35.71742 79.85917,79.85918 0,44.13497 -35.71741,79.85919 -79.85917,79.85919 -44.13497,0 -79.85918,-35.71742 -79.85918,-79.85919 0,-44.13498 35.71742,-79.85918 79.85918,-79.85918 m 55.98288,52.01507 -8.99853,-9.0712 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0272 L 355.78487,521.674 331.91016,497.60565 c -1.86352,-1.87869 -4.89736,-1.89107 -6.77605,-0.0275 l -9.07159,8.99853 c -1.8787,1.86352 -1.89108,4.89736 -0.0272,6.77646 l 36.24849,36.54196 c 1.86352,1.87869 4.89736,1.89107 6.77605,0.0272 l 68.9141,-68.36106 c 1.87828,-1.86392 1.89025,-4.89778 0.0268,-6.77646 z"
|
||||||
|
style="fill:#7367f0;fill-opacity:1;stroke-width:0.399296"
|
||||||
|
transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)" />
|
||||||
<g
|
<g
|
||||||
id="g2505"
|
id="g2513"
|
||||||
transform="translate(0.09191978,50.168306)">
|
transform="translate(-0.16733365,0.61658838)">
|
||||||
|
<path
|
||||||
|
transform="matrix(0.13087523,0,0,0.13087523,-5.3126573,6.9692701)"
|
||||||
|
style="fill:#10163a;fill-opacity:1;stroke-width:0.978574"
|
||||||
|
id="path949"
|
||||||
|
d="m 274.76901,687.50206 h 187.88752 c 51.86479,0 93.94376,-42.07897 93.94376,-93.94375 h 31.31459 c 69.08781,0 125.25834,-56.17055 125.25834,-125.25835 0,-69.08781 -56.17053,-125.25834 -125.25834,-125.25834 H 204.31119 c -13.01512,0 -23.48594,10.47081 -23.48594,23.48593 v 227.03076 c 0,51.86478 42.07898,93.94375 93.94376,93.94375 z M 587.91488,405.67079 c 34.54391,0 62.62917,28.08527 62.62917,62.62917 0,34.5439 -28.08526,62.62917 -62.62917,62.62917 H 556.60029 V 405.67079 Z m 46.6783,375.77503 H 134.14696 c -46.580452,0 -59.693435,-62.62917 -35.228913,-62.62917 H 669.72424 c 24.46452,0 11.54725,62.62917 -35.13106,62.62917 z" />
|
||||||
<g
|
<g
|
||||||
transform="translate(-0.68526563,40.225035)"
|
transform="translate(-0.91048867,42.172992)"
|
||||||
id="g2638">
|
id="g1711"
|
||||||
<path
|
style="stroke:#10163a;stroke-width:0.999994;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1">
|
||||||
style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
<g
|
||||||
d="m 34.769434,-84.879608 c -1.513055,-1.532226 -2.968787,-3.006403 -2.895671,-4.268256 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242735 -4.929449,-5.195115 0.05792,-1.95238 3.981161,-4.28523 4.510279,-6.39714 0.529119,-2.11191 -2.336082,-4.003 -5.201646,-5.89433"
|
transform="translate(0.09191978,50.168306)"
|
||||||
id="path915"
|
id="g2505">
|
||||||
inkscape:original-d="m 34.769434,-84.879608 c -1.48426,-1.560661 -2.968784,-3.006405 -4.453574,-4.510003 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.14299 -11.422003,-4.71488 3.923669,-2.33269 7.846916,-4.66554 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
|
<g
|
||||||
inkscape:path-effect="#path-effect917" />
|
id="g2638"
|
||||||
<path
|
transform="translate(-0.68526563,40.225035)">
|
||||||
inkscape:path-effect="#path-effect2614"
|
<path
|
||||||
inkscape:original-d="m 45.467515,-84.87961 c -1.48426,-1.56066 -2.968784,-3.006404 -4.453574,-4.510002 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142989 -11.422003,-4.714879 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
|
inkscape:path-effect="#path-effect917"
|
||||||
id="path915-9"
|
inkscape:original-d="m 34.769434,-84.879608 c -1.48426,-1.560661 -2.968784,-3.006405 -4.453574,-4.510003 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.14299 -11.422003,-4.71488 3.923669,-2.33269 7.846916,-4.66554 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
|
||||||
d="m 45.467515,-84.87961 c -1.513055,-1.532226 -2.968786,-3.006402 -2.895671,-4.268255 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242734 -4.929449,-5.195114 0.05792,-1.95238 3.981165,-4.28524 4.510282,-6.39714 0.529116,-2.11191 -2.336085,-4.003 -5.201649,-5.89433"
|
id="path915"
|
||||||
style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
d="m 34.769434,-84.879608 c -1.513055,-1.532226 -2.968787,-3.006403 -2.895671,-4.268256 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242735 -4.929449,-5.195115 0.05792,-1.95238 3.981161,-4.28523 4.510279,-6.39714 0.529119,-2.11191 -2.336082,-4.003 -5.201646,-5.89433"
|
||||||
<path
|
style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
<path
|
||||||
d="m 56.1656,-84.87961 c -1.513055,-1.532227 -2.968786,-3.006403 -2.895671,-4.268257 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985678,-3.166057 1.805572,-4.837198 -1.180105,-1.671141 -4.987363,-3.242733 -4.929448,-5.195113 0.05792,-1.95238 3.981162,-4.28524 4.510282,-6.39715 0.529119,-2.11191 -2.336084,-4.00299 -5.201649,-5.89432"
|
style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1"
|
||||||
id="path915-9-0"
|
d="m 45.467515,-84.87961 c -1.513055,-1.532226 -2.968786,-3.006402 -2.895671,-4.268255 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985679,-3.166058 1.805573,-4.837199 -1.180106,-1.671141 -4.987365,-3.242734 -4.929449,-5.195114 0.05792,-1.95238 3.981165,-4.28524 4.510282,-6.39714 0.529116,-2.11191 -2.336085,-4.003 -5.201649,-5.89433"
|
||||||
inkscape:original-d="m 56.1656,-84.87961 c -1.48426,-1.560662 -2.968784,-3.006405 -4.453574,-4.510004 1.631212,-1.019796 3.262093,-2.03982 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.541189 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142987 -11.422003,-4.714877 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99872 -2.86505,-1.89089 -5.730251,-3.78198 -8.595774,-5.67337"
|
id="path915-9"
|
||||||
inkscape:path-effect="#path-effect2633" />
|
inkscape:original-d="m 45.467515,-84.87961 c -1.48426,-1.56066 -2.968784,-3.006404 -4.453574,-4.510002 1.631212,-1.019797 3.262093,-2.039821 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.54119 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142989 -11.422003,-4.714879 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99871 -2.86505,-1.8909 -5.730251,-3.78199 -8.595774,-5.67338"
|
||||||
|
inkscape:path-effect="#path-effect2614" />
|
||||||
|
<path
|
||||||
|
inkscape:path-effect="#path-effect2633"
|
||||||
|
inkscape:original-d="m 56.1656,-84.87961 c -1.48426,-1.560662 -2.968784,-3.006405 -4.453574,-4.510004 1.631212,-1.019796 3.262093,-2.03982 4.892743,-3.060127 1.447149,-1.770498 2.893976,-3.541189 4.340567,-5.312182 -3.807146,-1.571393 -7.614404,-3.142987 -11.422003,-4.714877 3.923669,-2.33269 7.846916,-4.66555 11.769976,-6.99872 -2.86505,-1.89089 -5.730251,-3.78198 -8.595774,-5.67337"
|
||||||
|
id="path915-9-0"
|
||||||
|
d="m 56.1656,-84.87961 c -1.513055,-1.532227 -2.968786,-3.006403 -2.895671,-4.268257 0.07312,-1.261854 1.703997,-2.281876 3.242849,-3.677242 1.538852,-1.395366 2.985678,-3.166057 1.805572,-4.837198 -1.180105,-1.671141 -4.987363,-3.242733 -4.929448,-5.195113 0.05792,-1.95238 3.981162,-4.28524 4.510282,-6.39715 0.529119,-2.11191 -2.336084,-4.00299 -5.201649,-5.89432"
|
||||||
|
style="fill:none;stroke:#10163a;stroke-width:3.10099;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-dasharray:none;stroke-opacity:1" />
|
||||||
|
</g>
|
||||||
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
<path
|
||||||
|
id="path2782"
|
||||||
|
d="m 93.574758,186.094 c -13.47814,0 -24.40427,10.92613 -24.40427,24.40428 0,13.47814 10.92613,24.40427 24.40427,24.40427 13.478152,0 24.404282,-10.92613 24.404282,-24.40427 0,-13.47815 -10.92613,-24.40428 -24.404282,-24.40428 z m 0,4.72341 c 10.876832,0 19.680872,8.80236 19.680872,19.68087 0,10.87683 -8.80236,19.68086 -19.680872,19.68086 -10.876819,0 -19.680863,-8.80236 -19.680863,-19.68086 0,-10.87684 8.802364,-19.68087 19.680863,-19.68087 m 13.796692,12.81883 -2.21764,-2.23554 c -0.45925,-0.463 -1.20693,-0.46604 -1.66993,-0.007 l -13.909644,13.79786 -5.883794,-5.93153 c -0.459258,-0.46298 -1.206929,-0.46603 -1.669926,-0.007 l -2.235645,2.21764 c -0.462989,0.45926 -0.466044,1.20693 -0.0068,1.67002 l 8.933241,9.00557 c 0.459258,0.46299 1.206929,0.46605 1.669926,0.007 l 16.983502,-16.84721 c 0.4629,-0.45935 0.46585,-1.20702 0.007,-1.67002 z"
|
||||||
|
style="fill:#7367f0;fill-opacity:1;stroke-width:0.0984039" />
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
<g
|
|
||||||
id="g2560"
|
|
||||||
transform="translate(0,15.33842)">
|
|
||||||
<text
|
|
||||||
xml:space="preserve"
|
|
||||||
style="font-size:124.328px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.690712"
|
|
||||||
x="196.89775"
|
|
||||||
y="235.17853"
|
|
||||||
id="text852"><tspan
|
|
||||||
sodipodi:role="line"
|
|
||||||
id="tspan850"
|
|
||||||
x="196.89775"
|
|
||||||
y="235.17853"
|
|
||||||
style="font-size:124.328px;fill:#10163a;fill-opacity:1;stroke-width:0.690712">Taskcafé</tspan></text>
|
|
||||||
<text
|
|
||||||
xml:space="preserve"
|
|
||||||
style="font-size:22.6594px;line-height:1.25;font-family:'Fira Sans';-inkscape-font-specification:'Fira Sans';letter-spacing:0px;word-spacing:0px;opacity:0.99;stroke-width:0.596299"
|
|
||||||
x="223.15549"
|
|
||||||
y="261.83273"
|
|
||||||
id="text856"><tspan
|
|
||||||
sodipodi:role="line"
|
|
||||||
id="tspan854"
|
|
||||||
x="223.15549"
|
|
||||||
y="261.83273"
|
|
||||||
style="font-size:22.6594px;fill:#262c49;fill-opacity:1;stroke-width:0.596299">An open source project management tool</tspan></text>
|
|
||||||
</g>
|
|
||||||
<path
|
|
||||||
style="fill:#7367f0;fill-opacity:1;stroke-width:0.0984039"
|
|
||||||
d="m 93.574758,186.094 c -13.47814,0 -24.40427,10.92613 -24.40427,24.40428 0,13.47814 10.92613,24.40427 24.40427,24.40427 13.478152,0 24.404282,-10.92613 24.404282,-24.40427 0,-13.47815 -10.92613,-24.40428 -24.404282,-24.40428 z m 0,4.72341 c 10.876832,0 19.680872,8.80236 19.680872,19.68087 0,10.87683 -8.80236,19.68086 -19.680872,19.68086 -10.876819,0 -19.680863,-8.80236 -19.680863,-19.68086 0,-10.87684 8.802364,-19.68087 19.680863,-19.68087 m 13.796692,12.81883 -2.21764,-2.23554 c -0.45925,-0.463 -1.20693,-0.46604 -1.66993,-0.007 l -13.909644,13.79786 -5.883794,-5.93153 c -0.459258,-0.46298 -1.206929,-0.46603 -1.669926,-0.007 l -2.235645,2.21764 c -0.462989,0.45926 -0.466044,1.20693 -0.0068,1.67002 l 8.933241,9.00557 c 0.459258,0.46299 1.206929,0.46605 1.669926,0.007 l 16.983502,-16.84721 c 0.4629,-0.45935 0.46585,-1.20702 0.007,-1.67002 z"
|
|
||||||
id="path2782" />
|
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
</g>
|
</g>
|
||||||
|
Before Width: | Height: | Size: 14 KiB After Width: | Height: | Size: 14 KiB |
@ -1,4 +1,12 @@
|
|||||||
repos:
|
repos:
|
||||||
|
- repo: local
|
||||||
|
hooks:
|
||||||
|
- id: eslint
|
||||||
|
name: eslint
|
||||||
|
entry: scripts/lint.sh
|
||||||
|
language: system
|
||||||
|
files: \.[jt]sx?$ # *.js, *.jsx, *.ts and *.tsx
|
||||||
|
types: [file]
|
||||||
- hooks:
|
- hooks:
|
||||||
- id: check-yaml
|
- id: check-yaml
|
||||||
- id: end-of-file-fixer
|
- id: end-of-file-fixer
|
||||||
|
@ -1,14 +1,12 @@
|
|||||||
name: citadel
|
name: taskcafe
|
||||||
root: .
|
root: .
|
||||||
|
|
||||||
on_project_start: docker start test-db
|
|
||||||
|
|
||||||
windows:
|
windows:
|
||||||
- services:
|
- services:
|
||||||
root: ./
|
root: ./
|
||||||
panes:
|
panes:
|
||||||
- api:
|
- api:
|
||||||
- go run cmd/citadel/main.go web
|
- go run cmd/taskcafe/main.go web
|
||||||
- yarn:
|
- yarn:
|
||||||
- cd frontend
|
- cd frontend
|
||||||
- yarn start
|
- yarn start
|
||||||
@ -19,8 +17,8 @@ windows:
|
|||||||
- api/editor:
|
- api/editor:
|
||||||
root: ./
|
root: ./
|
||||||
panes:
|
panes:
|
||||||
- vim cmd/citadel/main.go
|
- vim cmd/taskcafe/main.go
|
||||||
- database:
|
- database:
|
||||||
root: ./
|
root: ./
|
||||||
panes:
|
panes:
|
||||||
- pgcli postgres://postgres:test@localhost:5432/citadel
|
- pgcli postgres://taskcafe:taskcafe_test@localhost:5432/taskcafe
|
||||||
|
26
CHANGELOG.md
Normal file
26
CHANGELOG.md
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
# Changelog
|
||||||
|
All notable changes to this project will be documented in this file.
|
||||||
|
|
||||||
|
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
|
||||||
|
and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
|
||||||
|
|
||||||
|
## [Unreleased]
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- Task sorting & filtering
|
||||||
|
- Redesigned the Task Details UI
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
- removed CORS middleware to fix security issue
|
||||||
|
- Added 3 retries with backoff to initial database connection [(#47)](https://github.com/JordanKnott/taskcafe/issues/47)
|
||||||
|
- Can now actually set a due date
|
||||||
|
|
||||||
|
## [0.1.1] - 2020-08-21
|
||||||
|
|
||||||
|
### Fixed
|
||||||
|
- fix panic(nil) when loading config if config file actually exists
|
||||||
|
|
||||||
|
## [0.1.0] - 2020-08-21
|
||||||
|
|
||||||
|
### Added
|
||||||
|
- first "stable" alpha release
|
@ -4,8 +4,13 @@ Thanks for wanting to contribute to Taskcafe!
|
|||||||
|
|
||||||
### Where do I go from here?
|
### Where do I go from here?
|
||||||
|
|
||||||
If you have noticed a bug or have a feature request, make one! If best to get confirmation
|
So you want to contribute to Taskcafe? Great!
|
||||||
of your bug or feature before starting work on a pull request.
|
|
||||||
|
If you have noticed a bug or want to add a new feature, please [create an issue](https://github.com/JordanKnott/taskcafe/issues/new/choose) for it before starting any work on a pull request.
|
||||||
|
|
||||||
|
Alternatively you can join the [Taskcafe discord](https://discord.gg/JkQDruh) and ask in the #questions channel.
|
||||||
|
|
||||||
|
After the bug is validated or the feature is accepted by a project maintainer, the next step is to fork the repository!
|
||||||
|
|
||||||
### Fork & create a branch
|
### Fork & create a branch
|
||||||
|
|
||||||
|
38
README.md
38
README.md
@ -1,24 +1,33 @@
|
|||||||

|
<p align="center">
|
||||||
|
<img width="450px" src="./.github/taskcafe-full.png" align="center" alt="Taskcafe logo" />
|
||||||
|
</p>
|
||||||
|
<p align="center">
|
||||||
|
<a href="https://discord.gg/JkQDruh">
|
||||||
|
<img alt="Discord" src="https://img.shields.io/discord/745396499613220955" />
|
||||||
|
</a>
|
||||||
|
<a href="https://github.com/JordanKnott/taskcafe/releases">
|
||||||
|
<img alt="Releases" src="https://img.shields.io/github/v/release/JordanKnott/taskcafe" />
|
||||||
|
</a>
|
||||||
|
<a href="https://hub.docker.com/repository/docker/taskcafe/taskcafe">
|
||||||
|
<img alt="Dockerhub" src="https://img.shields.io/docker/v/taskcafe/taskcafe?label=docker" />
|
||||||
|
</a>
|
||||||
|
<a href="https://goreportcard.com/report/github.com/JordanKnott/taskcafe">
|
||||||
|
<img alt="Go Report Card" src="https://goreportcard.com/badge/github.com/JordanKnott/taskcafe" />
|
||||||
|
</a>
|
||||||
|
</p>
|
||||||
|
<p align="center">
|
||||||
|
Was this project useful? Please consider <a href="https://www.buymeacoffee.com/jordanknott">donating</a> to help me improve it!
|
||||||
|
</p>
|
||||||
|
|
||||||
[](https://discord.gg/JkQDruh)
|
**Please note that this project is still in active development. Some options may not work yet! For updates on development, join the Discord server**
|
||||||
[](https://github.com/JordanKnott/taskcafe/releases)
|
|
||||||
[](https://hub.docker.com/repository/docker/taskcafe/taskcafe)
|
|
||||||
[](https://goreportcard.com/report/github.com/JordanKnott/taskcafe)
|
|
||||||
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||

|
|
||||||
|
|
||||||
A free & open source alternative project management tool.
|
|
||||||
|
|
||||||
**Please note that this project is still in active development. Some options may not work yet!**
|
|
||||||
## Features
|
## Features
|
||||||
|
|
||||||
Currently Taskcafe only offers basic task tracking through a Kanban board.
|
Currently Taskcafe only offers basic task tracking through a Kanban board.
|
||||||
|
|
||||||
Currently you can do the following to tasks:
|
Currently you can do the following to tasks:
|
||||||
|
|
||||||
|
- Task sorting & filtering
|
||||||
- Add colors & named labels
|
- Add colors & named labels
|
||||||
- Add due dates
|
- Add due dates
|
||||||
- Descriptions written in Markdown
|
- Descriptions written in Markdown
|
||||||
@ -81,6 +90,7 @@ The newly created `taskcafe` binary can be found in the __dist__ folder.
|
|||||||
|
|
||||||
It contains everything neccessary to run except the config file. An example config file can be found in `conf/app.example.toml`.
|
It contains everything neccessary to run except the config file. An example config file can be found in `conf/app.example.toml`.
|
||||||
|
|
||||||
|
For more information on configuration, please read the [wiki](https://github.com/JordanKnott/taskcafe/wiki/Configuration).
|
||||||
The config will need to be copied to a `conf/app.toml` in the same place the binary is.
|
The config will need to be copied to a `conf/app.toml` in the same place the binary is.
|
||||||
|
|
||||||
Make sure to fill out the database section of the config in order to connect it to your database.
|
Make sure to fill out the database section of the config in order to connect it to your database.
|
||||||
@ -89,6 +99,8 @@ Then run the database migrations with `taskcafe migrate`.
|
|||||||
|
|
||||||
Now you can run the web interface by running `taskcafe web`.
|
Now you can run the web interface by running `taskcafe web`.
|
||||||
|
|
||||||
|
[A more detailed guide for installing on Ubuntu/Debian](https://github.com/JordanKnott/taskcafe/wiki/Installation-(ubuntu-debian))
|
||||||
|
|
||||||
## How is this different from X (Trello, NextCloud, etc)?
|
## How is this different from X (Trello, NextCloud, etc)?
|
||||||
|
|
||||||
One of the primary goals of Taskcafe is to provide a project management tool that I personally enjoy using for my
|
One of the primary goals of Taskcafe is to provide a project management tool that I personally enjoy using for my
|
||||||
|
@ -30,6 +30,7 @@
|
|||||||
"@typescript-eslint/no-explicit-any": "off",
|
"@typescript-eslint/no-explicit-any": "off",
|
||||||
"@typescript-eslint/no-unused-vars": "off",
|
"@typescript-eslint/no-unused-vars": "off",
|
||||||
"react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
|
"react/jsx-filename-extension": [2, { "extensions": [".js", ".jsx", ".ts", ".tsx"] }],
|
||||||
|
"no-case-declarations": "off",
|
||||||
"react/prop-types": 0,
|
"react/prop-types": 0,
|
||||||
"react/jsx-props-no-spreading": "off",
|
"react/jsx-props-no-spreading": "off",
|
||||||
"no-param-reassign": "off",
|
"no-param-reassign": "off",
|
||||||
|
@ -28,6 +28,7 @@
|
|||||||
"@types/react-router": "^5.1.4",
|
"@types/react-router": "^5.1.4",
|
||||||
"@types/react-router-dom": "^5.1.3",
|
"@types/react-router-dom": "^5.1.3",
|
||||||
"@types/react-select": "^3.0.13",
|
"@types/react-select": "^3.0.13",
|
||||||
|
"@types/react-timeago": "^4.1.1",
|
||||||
"@types/styled-components": "^5.0.0",
|
"@types/styled-components": "^5.0.0",
|
||||||
"apollo-cache-inmemory": "^1.6.5",
|
"apollo-cache-inmemory": "^1.6.5",
|
||||||
"apollo-client": "^2.6.8",
|
"apollo-client": "^2.6.8",
|
||||||
@ -59,6 +60,9 @@
|
|||||||
"react-router-dom": "^5.1.2",
|
"react-router-dom": "^5.1.2",
|
||||||
"react-scripts": "3.4.0",
|
"react-scripts": "3.4.0",
|
||||||
"react-select": "^3.1.0",
|
"react-select": "^3.1.0",
|
||||||
|
"rich-markdown-editor": "^10.6.5",
|
||||||
|
"react-timeago": "^4.4.0",
|
||||||
|
"react-toastify": "^6.0.8",
|
||||||
"styled-components": "^5.0.1",
|
"styled-components": "^5.0.1",
|
||||||
"typescript": "~3.7.2"
|
"typescript": "~3.7.2"
|
||||||
},
|
},
|
||||||
@ -71,7 +75,8 @@
|
|||||||
"storybook": "start-storybook -p 9009 -s public",
|
"storybook": "start-storybook -p 9009 -s public",
|
||||||
"build-storybook": "build-storybook -s public",
|
"build-storybook": "build-storybook -s public",
|
||||||
"generate": "graphql-codegen",
|
"generate": "graphql-codegen",
|
||||||
"lint": "eslint --ext js,ts,tsx src"
|
"lint": "eslint --ext js,ts,tsx src",
|
||||||
|
"tsc": "tsc"
|
||||||
},
|
},
|
||||||
"eslintConfig": {
|
"eslintConfig": {
|
||||||
"extends": "react-app"
|
"extends": "react-app"
|
||||||
@ -94,10 +99,10 @@
|
|||||||
"@graphql-codegen/typescript-operations": "^1.13.2",
|
"@graphql-codegen/typescript-operations": "^1.13.2",
|
||||||
"@graphql-codegen/typescript-react-apollo": "^1.13.2",
|
"@graphql-codegen/typescript-react-apollo": "^1.13.2",
|
||||||
"@storybook/addon-actions": "^5.3.13",
|
"@storybook/addon-actions": "^5.3.13",
|
||||||
"@storybook/addon-links": "^5.3.13",
|
|
||||||
"@storybook/addon-backgrounds": "^5.3.17",
|
"@storybook/addon-backgrounds": "^5.3.17",
|
||||||
"@storybook/addon-docs": "^5.3.17",
|
"@storybook/addon-docs": "^5.3.17",
|
||||||
"@storybook/addon-knobs": "^5.3.17",
|
"@storybook/addon-knobs": "^5.3.17",
|
||||||
|
"@storybook/addon-links": "^5.3.13",
|
||||||
"@storybook/addon-storysource": "^5.3.17",
|
"@storybook/addon-storysource": "^5.3.17",
|
||||||
"@storybook/addon-viewport": "^5.3.17",
|
"@storybook/addon-viewport": "^5.3.17",
|
||||||
"@storybook/addons": "^5.3.13",
|
"@storybook/addons": "^5.3.13",
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useEffect, useState, useContext } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import Admin from 'shared/components/Admin';
|
import Admin from 'shared/components/Admin';
|
||||||
import Select from 'shared/components/Select';
|
import Select from 'shared/components/Select';
|
||||||
import GlobalTopNavbar from 'App/TopNavbar';
|
import GlobalTopNavbar from 'App/TopNavbar';
|
||||||
@ -16,8 +16,9 @@ import { useForm, Controller } from 'react-hook-form';
|
|||||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||||
import produce from 'immer';
|
import produce from 'immer';
|
||||||
import updateApolloCache from 'shared/utils/cache';
|
import updateApolloCache from 'shared/utils/cache';
|
||||||
import UserContext, { useCurrentUser } from 'App/context';
|
import { useCurrentUser } from 'App/context';
|
||||||
import { Redirect } from 'react-router';
|
import { Redirect } from 'react-router';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
|
||||||
const DeleteUserWrapper = styled.div`
|
const DeleteUserWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -37,6 +38,7 @@ const DeleteUserButton = styled(Button)`
|
|||||||
type DeleteUserPopupProps = {
|
type DeleteUserPopupProps = {
|
||||||
onDeleteUser: () => void;
|
onDeleteUser: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
|
const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
|
||||||
return (
|
return (
|
||||||
<DeleteUserWrapper>
|
<DeleteUserWrapper>
|
||||||
@ -47,10 +49,12 @@ const DeleteUserPopup: React.FC<DeleteUserPopupProps> = ({ onDeleteUser }) => {
|
|||||||
</DeleteUserWrapper>
|
</DeleteUserWrapper>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
type RoleCodeOption = {
|
type RoleCodeOption = {
|
||||||
label: string;
|
label: string;
|
||||||
value: string;
|
value: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
type CreateUserData = {
|
type CreateUserData = {
|
||||||
email: string;
|
email: string;
|
||||||
username: string;
|
username: string;
|
||||||
@ -65,6 +69,7 @@ const CreateUserForm = styled.form`
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
margin: 0 12px;
|
margin: 0 12px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const CreateUserButton = styled(Button)`
|
const CreateUserButton = styled(Button)`
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
@ -85,7 +90,7 @@ type AddUserPopupProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
|
const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
|
||||||
const { register, handleSubmit, errors, setValue, control } = useForm<CreateUserData>();
|
const { register, handleSubmit, errors, control } = useForm<CreateUserData>();
|
||||||
|
|
||||||
const createUser = (data: CreateUserData) => {
|
const createUser = (data: CreateUserData) => {
|
||||||
onAddUser(data);
|
onAddUser(data);
|
||||||
@ -115,7 +120,7 @@ const AddUserPopup: React.FC<AddUserPopupProps> = ({ onAddUser }) => {
|
|||||||
control={control}
|
control={control}
|
||||||
name="roleCode"
|
name="roleCode"
|
||||||
rules={{ required: 'Role is required' }}
|
rules={{ required: 'Role is required' }}
|
||||||
render={({ onChange, onBlur, value }) => (
|
render={({ onChange, value }) => (
|
||||||
<Select
|
<Select
|
||||||
label="Role"
|
label="Role"
|
||||||
value={value}
|
value={value}
|
||||||
@ -198,21 +203,21 @@ const AdminRoute = () => {
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />;
|
return <GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />;
|
||||||
}
|
}
|
||||||
if (data && user) {
|
if (data && user) {
|
||||||
if (user.roles.org != 'admin') {
|
if (user.roles.org !== 'admin') {
|
||||||
return <Redirect to="/" />;
|
return <Redirect to="/" />;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
|
<GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
|
||||||
<Admin
|
<Admin
|
||||||
initialTab={0}
|
initialTab={0}
|
||||||
users={data.users}
|
users={data.users}
|
||||||
canInviteUser={user.roles.org == 'admin'}
|
canInviteUser={user.roles.org === 'admin'}
|
||||||
onInviteUser={() => {}}
|
onInviteUser={NOOP}
|
||||||
onUpdateUserPassword={(user, password) => {
|
onUpdateUserPassword={() => {
|
||||||
hidePopup();
|
hidePopup();
|
||||||
}}
|
}}
|
||||||
onDeleteUser={(userID, newOwnerID) => {
|
onDeleteUser={(userID, newOwnerID) => {
|
||||||
@ -224,8 +229,8 @@ const AdminRoute = () => {
|
|||||||
$target,
|
$target,
|
||||||
<Popup tab={0} title="Add member" onClose={() => hidePopup()}>
|
<Popup tab={0} title="Add member" onClose={() => hidePopup()}>
|
||||||
<AddUserPopup
|
<AddUserPopup
|
||||||
onAddUser={user => {
|
onAddUser={u => {
|
||||||
const { roleCode, ...userData } = user;
|
const { roleCode, ...userData } = u;
|
||||||
createUser({ variables: { ...userData, roleCode: roleCode.value } });
|
createUser({ variables: { ...userData, roleCode: roleCode.value } });
|
||||||
hidePopup();
|
hidePopup();
|
||||||
}}
|
}}
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import {Router, Switch, Route} from 'react-router-dom';
|
import { Switch, Route } from 'react-router-dom';
|
||||||
import * as H from 'history';
|
import * as H from 'history';
|
||||||
|
|
||||||
import Dashboard from 'Dashboard';
|
import Dashboard from 'Dashboard';
|
||||||
@ -20,11 +20,12 @@ const MainContent = styled.div`
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
flex-grow: 1;
|
flex-grow: 1;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type RoutesProps = {
|
type RoutesProps = {
|
||||||
history: H.History;
|
history: H.History;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Routes = ({history}: RoutesProps) => (
|
const Routes: React.FC<RoutesProps> = () => (
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route exact path="/login" component={Login} />
|
<Route exact path="/login" component={Login} />
|
||||||
<Route exact path="/install" component={Install} />
|
<Route exact path="/install" component={Install} />
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import { createGlobalStyle, DefaultTheme } from 'styled-components';
|
import { DefaultTheme } from 'styled-components';
|
||||||
|
|
||||||
const theme: DefaultTheme = {
|
const theme: DefaultTheme = {
|
||||||
borderRadius: {
|
borderRadius: {
|
||||||
@ -25,4 +25,4 @@ const theme: DefaultTheme = {
|
|||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
||||||
export { theme };
|
export default theme;
|
||||||
|
@ -1,13 +1,13 @@
|
|||||||
import React, { useState, useContext, useEffect } from 'react';
|
import React from 'react';
|
||||||
import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
|
import TopNavbar, { MenuItem } from 'shared/components/TopNavbar';
|
||||||
import styled from 'styled-components/macro';
|
import styled from 'styled-components/macro';
|
||||||
import DropdownMenu, { ProfileMenu } from 'shared/components/DropdownMenu';
|
import { ProfileMenu } from 'shared/components/DropdownMenu';
|
||||||
import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
|
import ProjectSettings, { DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
|
||||||
import { useHistory } from 'react-router';
|
import { useHistory } from 'react-router';
|
||||||
import { UserContext, PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
|
import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
|
||||||
import {
|
import {
|
||||||
RoleCode,
|
RoleCode,
|
||||||
useMeQuery,
|
useTopNavbarQuery,
|
||||||
useDeleteProjectMutation,
|
useDeleteProjectMutation,
|
||||||
useGetProjectsQuery,
|
useGetProjectsQuery,
|
||||||
GetProjectsDocument,
|
GetProjectsDocument,
|
||||||
@ -18,6 +18,8 @@ import produce from 'immer';
|
|||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import MiniProfile from 'shared/components/MiniProfile';
|
import MiniProfile from 'shared/components/MiniProfile';
|
||||||
import cache from 'App/cache';
|
import cache from 'App/cache';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
import NotificationPopup, { NotificationItem } from 'shared/components/NotifcationPopup';
|
||||||
|
|
||||||
const TeamContainer = styled.div`
|
const TeamContainer = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -130,7 +132,7 @@ const ProjectFinder = () => {
|
|||||||
return <span>loading</span>;
|
return <span>loading</span>;
|
||||||
}
|
}
|
||||||
if (data) {
|
if (data) {
|
||||||
const { projects, teams, organizations } = data;
|
const { projects, teams } = data;
|
||||||
const projectTeams = teams.map(team => {
|
const projectTeams = teams.map(team => {
|
||||||
return {
|
return {
|
||||||
id: team.id,
|
id: team.id,
|
||||||
@ -196,7 +198,7 @@ export const ProjectPopup: React.FC<ProjectPopupProps> = ({ history, name, proje
|
|||||||
<Popup title={null} tab={0}>
|
<Popup title={null} tab={0}>
|
||||||
<ProjectSettings
|
<ProjectSettings
|
||||||
onDeleteProject={() => {
|
onDeleteProject={() => {
|
||||||
setTab(1, 300);
|
setTab(1, { width: 300 });
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Popup>
|
</Popup>
|
||||||
@ -238,7 +240,6 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
|||||||
currentTab,
|
currentTab,
|
||||||
onSetTab,
|
onSetTab,
|
||||||
menuType,
|
menuType,
|
||||||
projectID,
|
|
||||||
teamID,
|
teamID,
|
||||||
onChangeProjectOwner,
|
onChangeProjectOwner,
|
||||||
onChangeRole,
|
onChangeRole,
|
||||||
@ -248,19 +249,18 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
|||||||
onInviteUser,
|
onInviteUser,
|
||||||
onSaveProjectName,
|
onSaveProjectName,
|
||||||
onRemoveFromBoard,
|
onRemoveFromBoard,
|
||||||
nameOnly,
|
|
||||||
}) => {
|
}) => {
|
||||||
const { user, setUserRoles, setUser } = useCurrentUser();
|
const { user, setUserRoles, setUser } = useCurrentUser();
|
||||||
const { loading, data } = useMeQuery({
|
const { loading, data } = useTopNavbarQuery({
|
||||||
onCompleted: data => {
|
onCompleted: response => {
|
||||||
if (user && user.roles) {
|
if (user && user.roles) {
|
||||||
setUserRoles({
|
setUserRoles({
|
||||||
org: user.roles.org,
|
org: user.roles.org,
|
||||||
teams: data.me.teamRoles.reduce((map, obj) => {
|
teams: response.me.teamRoles.reduce((map, obj) => {
|
||||||
map.set(obj.teamID, obj.roleCode);
|
map.set(obj.teamID, obj.roleCode);
|
||||||
return map;
|
return map;
|
||||||
}, new Map<string, string>()),
|
}, new Map<string, string>()),
|
||||||
projects: data.me.projectRoles.reduce((map, obj) => {
|
projects: response.me.projectRoles.reduce((map, obj) => {
|
||||||
map.set(obj.projectID, obj.roleCode);
|
map.set(obj.projectID, obj.roleCode);
|
||||||
return map;
|
return map;
|
||||||
}, new Map<string, string>()),
|
}, new Map<string, string>()),
|
||||||
@ -268,7 +268,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
const { showPopup, hidePopup, setTab } = usePopup();
|
const { showPopup, hidePopup } = usePopup();
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const onLogout = () => {
|
const onLogout = () => {
|
||||||
fetch('/auth/logout', {
|
fetch('/auth/logout', {
|
||||||
@ -301,13 +301,31 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Popup>,
|
</Popup>,
|
||||||
195,
|
{ width: 195 },
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onOpenSettings = ($target: React.RefObject<HTMLElement>) => {
|
const onOpenSettings = ($target: React.RefObject<HTMLElement>) => {
|
||||||
if (popupContent) {
|
if (popupContent) {
|
||||||
showPopup($target, popupContent, 185);
|
showPopup($target, popupContent, { width: 185 });
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const onNotificationClick = ($target: React.RefObject<HTMLElement>) => {
|
||||||
|
if (data) {
|
||||||
|
showPopup(
|
||||||
|
$target,
|
||||||
|
<NotificationPopup>
|
||||||
|
{data.notifications.map(notification => (
|
||||||
|
<NotificationItem
|
||||||
|
title={notification.entity.name}
|
||||||
|
description={`${notification.actor.name} added you as a meber to the task "${notification.entity.name}"`}
|
||||||
|
createdAt={notification.createdAt}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</NotificationPopup>,
|
||||||
|
{ width: 415, borders: false, diamondColor: '#7367f0' },
|
||||||
|
);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -367,7 +385,7 @@ const GlobalTopNavbar: React.FC<GlobalTopNavbarProps> = ({
|
|||||||
onInviteUser={onInviteUser}
|
onInviteUser={onInviteUser}
|
||||||
onChangeRole={onChangeRole}
|
onChangeRole={onChangeRole}
|
||||||
onChangeProjectOwner={onChangeProjectOwner}
|
onChangeProjectOwner={onChangeProjectOwner}
|
||||||
onNotificationClick={() => {}}
|
onNotificationClick={onNotificationClick}
|
||||||
onSetTab={onSetTab}
|
onSetTab={onSetTab}
|
||||||
onRemoveFromBoard={onRemoveFromBoard}
|
onRemoveFromBoard={onRemoveFromBoard}
|
||||||
onDashboardClick={() => {
|
onDashboardClick={() => {
|
||||||
|
@ -3,14 +3,48 @@ import jwtDecode from 'jwt-decode';
|
|||||||
import { createBrowserHistory } from 'history';
|
import { createBrowserHistory } from 'history';
|
||||||
import { Router } from 'react-router';
|
import { Router } from 'react-router';
|
||||||
import { PopupProvider } from 'shared/components/PopupMenu';
|
import { PopupProvider } from 'shared/components/PopupMenu';
|
||||||
|
import { ToastContainer } from 'react-toastify';
|
||||||
import { setAccessToken } from 'shared/utils/accessToken';
|
import { setAccessToken } from 'shared/utils/accessToken';
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
import styled, { ThemeProvider } from 'styled-components';
|
||||||
import NormalizeStyles from './NormalizeStyles';
|
import NormalizeStyles from './NormalizeStyles';
|
||||||
import BaseStyles from './BaseStyles';
|
import BaseStyles from './BaseStyles';
|
||||||
import { theme } from './ThemeStyles';
|
import theme from './ThemeStyles';
|
||||||
import Routes from './Routes';
|
import Routes from './Routes';
|
||||||
import { UserContext, CurrentUserRaw, CurrentUserRoles, PermissionLevel, PermissionObjectType } from './context';
|
import { UserContext, CurrentUserRaw, CurrentUserRoles, PermissionLevel, PermissionObjectType } from './context';
|
||||||
|
|
||||||
|
import 'react-toastify/dist/ReactToastify.css';
|
||||||
|
|
||||||
|
const StyledContainer = styled(ToastContainer).attrs({
|
||||||
|
// custom props
|
||||||
|
})`
|
||||||
|
.Toastify__toast-container {
|
||||||
|
}
|
||||||
|
.Toastify__toast {
|
||||||
|
padding: 5px;
|
||||||
|
margin-left: 5px;
|
||||||
|
margin-right: 5px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: #7367f0;
|
||||||
|
color: #fff;
|
||||||
|
}
|
||||||
|
.Toastify__toast--error {
|
||||||
|
background: rgba(${props => props.theme.colors.danger});
|
||||||
|
}
|
||||||
|
.Toastify__toast--warning {
|
||||||
|
background: rgba(${props => props.theme.colors.warning});
|
||||||
|
}
|
||||||
|
.Toastify__toast--success {
|
||||||
|
background: rgba(${props => props.theme.colors.success});
|
||||||
|
}
|
||||||
|
.Toastify__toast-body {
|
||||||
|
}
|
||||||
|
.Toastify__progress-bar {
|
||||||
|
}
|
||||||
|
.Toastify__close-button {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
const history = createBrowserHistory();
|
const history = createBrowserHistory();
|
||||||
type RefreshTokenResponse = {
|
type RefreshTokenResponse = {
|
||||||
accessToken: string;
|
accessToken: string;
|
||||||
@ -72,6 +106,18 @@ const App = () => {
|
|||||||
)}
|
)}
|
||||||
</PopupProvider>
|
</PopupProvider>
|
||||||
</Router>
|
</Router>
|
||||||
|
<StyledContainer
|
||||||
|
position="bottom-right"
|
||||||
|
autoClose={5000}
|
||||||
|
hideProgressBar
|
||||||
|
newestOnTop
|
||||||
|
closeOnClick
|
||||||
|
rtl={false}
|
||||||
|
pauseOnFocusLoss
|
||||||
|
draggable
|
||||||
|
pauseOnHover
|
||||||
|
limit={5}
|
||||||
|
/>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</UserContext.Provider>
|
</UserContext.Provider>
|
||||||
</>
|
</>
|
||||||
|
@ -1,13 +1,10 @@
|
|||||||
import React, { useState, useEffect, useContext } from 'react';
|
import React, { useState, useEffect, useContext } from 'react';
|
||||||
import { useForm } from 'react-hook-form';
|
|
||||||
import { useHistory } from 'react-router';
|
import { useHistory } from 'react-router';
|
||||||
|
|
||||||
import { setAccessToken } from 'shared/utils/accessToken';
|
|
||||||
|
|
||||||
import Login from 'shared/components/Login';
|
|
||||||
import { Container, LoginWrapper } from './Styles';
|
|
||||||
import UserContext, { PermissionLevel, PermissionObjectType } from 'App/context';
|
|
||||||
import JwtDecode from 'jwt-decode';
|
import JwtDecode from 'jwt-decode';
|
||||||
|
import { setAccessToken } from 'shared/utils/accessToken';
|
||||||
|
import Login from 'shared/components/Login';
|
||||||
|
import UserContext from 'App/context';
|
||||||
|
import { Container, LoginWrapper } from './Styles';
|
||||||
|
|
||||||
const Auth = () => {
|
const Auth = () => {
|
||||||
const [invalidLoginAttempt, setInvalidLoginAttempt] = useState(0);
|
const [invalidLoginAttempt, setInvalidLoginAttempt] = useState(0);
|
||||||
|
@ -1,18 +1,13 @@
|
|||||||
import React, { useEffect, useContext } from 'react';
|
import React, { useEffect, useContext } from 'react';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import Register from 'shared/components/Register';
|
import Register from 'shared/components/Register';
|
||||||
import { Container, LoginWrapper } from './Styles';
|
|
||||||
import { useCreateUserAccountMutation, useMeQuery, MeDocument, MeQuery } from 'shared/generated/graphql';
|
|
||||||
import { useHistory } from 'react-router';
|
import { useHistory } from 'react-router';
|
||||||
import { getAccessToken, setAccessToken } from 'shared/utils/accessToken';
|
import { getAccessToken, setAccessToken } from 'shared/utils/accessToken';
|
||||||
import updateApolloCache from 'shared/utils/cache';
|
import UserContext from 'App/context';
|
||||||
import produce from 'immer';
|
|
||||||
import { useApolloClient } from '@apollo/react-hooks';
|
|
||||||
import UserContext, { PermissionLevel, PermissionObjectType } from 'App/context';
|
|
||||||
import jwtDecode from 'jwt-decode';
|
import jwtDecode from 'jwt-decode';
|
||||||
|
import { Container, LoginWrapper } from './Styles';
|
||||||
|
|
||||||
const Install = () => {
|
const Install = () => {
|
||||||
const client = useApolloClient();
|
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const { setUser } = useContext(UserContext);
|
const { setUser } = useContext(UserContext);
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -63,7 +58,7 @@ const Install = () => {
|
|||||||
history.replace('/login');
|
history.replace('/login');
|
||||||
} else {
|
} else {
|
||||||
const response: RefreshTokenResponse = await x.data;
|
const response: RefreshTokenResponse = await x.data;
|
||||||
const { accessToken, isInstalled } = response;
|
const { accessToken: newToken, isInstalled } = response;
|
||||||
const claims: JWTToken = jwtDecode(accessToken);
|
const claims: JWTToken = jwtDecode(accessToken);
|
||||||
const currentUser = {
|
const currentUser = {
|
||||||
id: claims.userId,
|
id: claims.userId,
|
||||||
|
@ -1,12 +1,13 @@
|
|||||||
import React, { useRef, useEffect } from 'react';
|
import React, { useRef, useEffect } from 'react';
|
||||||
import styled from 'styled-components/macro';
|
import styled from 'styled-components/macro';
|
||||||
import GlobalTopNavbar from 'App/TopNavbar';
|
import GlobalTopNavbar from 'App/TopNavbar';
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
import { getAccessToken } from 'shared/utils/accessToken';
|
import { getAccessToken } from 'shared/utils/accessToken';
|
||||||
import Settings from 'shared/components/Settings';
|
import Settings from 'shared/components/Settings';
|
||||||
import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
|
import { useMeQuery, useClearProfileAvatarMutation, useUpdateUserPasswordMutation } from 'shared/generated/graphql';
|
||||||
import axios from 'axios';
|
import axios from 'axios';
|
||||||
import { useCurrentUser } from 'App/context';
|
import { useCurrentUser } from 'App/context';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
import { toast } from 'react-toastify';
|
||||||
|
|
||||||
const MainContent = styled.div`
|
const MainContent = styled.div`
|
||||||
padding: 0 0 50px 80px;
|
padding: 0 0 50px 80px;
|
||||||
@ -54,7 +55,7 @@ const Projects = () => {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
<GlobalTopNavbar projectID={null} onSaveProjectName={() => {}} name={null} />
|
<GlobalTopNavbar projectID={null} onSaveProjectName={NOOP} name={null} />
|
||||||
{!loading && data && (
|
{!loading && data && (
|
||||||
<Settings
|
<Settings
|
||||||
profile={data.me.user}
|
profile={data.me.user}
|
||||||
@ -65,6 +66,7 @@ const Projects = () => {
|
|||||||
}}
|
}}
|
||||||
onResetPassword={(password, done) => {
|
onResetPassword={(password, done) => {
|
||||||
updateUserPassword({ variables: { userID: user.id, password } });
|
updateUserPassword({ variables: { userID: user.id, password } });
|
||||||
|
toast('Password was changed!');
|
||||||
done();
|
done();
|
||||||
}}
|
}}
|
||||||
onProfileAvatarRemove={() => {
|
onProfileAvatarRemove={() => {
|
||||||
|
324
frontend/src/Projects/Project/Board/FilterMeta.tsx
Normal file
324
frontend/src/Projects/Project/Board/FilterMeta.tsx
Normal file
@ -0,0 +1,324 @@
|
|||||||
|
import React, { useState, useEffect } from 'react';
|
||||||
|
import styled, { css } from 'styled-components';
|
||||||
|
import { Checkmark, User, Calendar, Tags, Clock } from 'shared/icons';
|
||||||
|
import { TaskMetaFilters, TaskMeta, TaskMetaMatch, DueDateFilterType } from 'shared/components/Lists';
|
||||||
|
import Input from 'shared/components/ControlledInput';
|
||||||
|
import { Popup, usePopup } from 'shared/components/PopupMenu';
|
||||||
|
import produce from 'immer';
|
||||||
|
import moment from 'moment';
|
||||||
|
import { mixin } from 'shared/utils/styles';
|
||||||
|
import Member from 'shared/components/Member';
|
||||||
|
|
||||||
|
const FilterMember = styled(Member)`
|
||||||
|
margin: 2px 0;
|
||||||
|
&:hover {
|
||||||
|
cursor: pointer;
|
||||||
|
background: rgba(${props => props.theme.colors.primary});
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Labels = styled.ul`
|
||||||
|
list-style: none;
|
||||||
|
margin: 0 8px;
|
||||||
|
padding: 0;
|
||||||
|
margin-bottom: 8px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Label = styled.li`
|
||||||
|
position: relative;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const CardLabel = styled.span<{ active: boolean; color: string }>`
|
||||||
|
${props =>
|
||||||
|
props.active &&
|
||||||
|
css`
|
||||||
|
margin-left: 4px;
|
||||||
|
box-shadow: -8px 0 ${mixin.darken(props.color, 0.12)};
|
||||||
|
border-radius: 3px;
|
||||||
|
`}
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
font-weight: 700;
|
||||||
|
margin: 0 0 4px;
|
||||||
|
min-height: 20px;
|
||||||
|
padding: 6px 12px;
|
||||||
|
position: relative;
|
||||||
|
transition: padding 85ms, margin 85ms, box-shadow 85ms;
|
||||||
|
background-color: ${props => props.color};
|
||||||
|
color: #fff;
|
||||||
|
display: block;
|
||||||
|
max-width: 100%;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
min-height: 31px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionsList = styled.ul`
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionItem = styled.li`
|
||||||
|
position: relative;
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 4px;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
&:hover {
|
||||||
|
background: rgb(115, 103, 240);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionTitle = styled.span`
|
||||||
|
margin-left: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ActionItemSeparator = styled.li`
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
||||||
|
font-size: 12px;
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 4px;
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
padding-bottom: 0.25rem;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ActiveIcon = styled(Checkmark)`
|
||||||
|
position: absolute;
|
||||||
|
right: 4px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ItemIcon = styled.div`
|
||||||
|
position: absolute;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const TaskNameInput = styled(Input)`
|
||||||
|
margin: 0;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ActionItemLine = styled.div`
|
||||||
|
height: 1px;
|
||||||
|
border-top: 1px solid #414561;
|
||||||
|
margin: 0.25rem !important;
|
||||||
|
`;
|
||||||
|
|
||||||
|
type FilterMetaProps = {
|
||||||
|
filters: TaskMetaFilters;
|
||||||
|
userID: string;
|
||||||
|
labels: React.RefObject<Array<ProjectLabel>>;
|
||||||
|
members: React.RefObject<Array<TaskUser>>;
|
||||||
|
onChangeTaskMetaFilter: (filters: TaskMetaFilters) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FilterMeta: React.FC<FilterMetaProps> = ({ filters, onChangeTaskMetaFilter, userID, labels, members }) => {
|
||||||
|
const [currentFilters, setFilters] = useState(filters);
|
||||||
|
const [nameFilter, setNameFilter] = useState(filters.taskName ? filters.taskName.name : '');
|
||||||
|
const [currentLabel, setCurrentLabel] = useState('');
|
||||||
|
|
||||||
|
const handleSetFilters = (f: TaskMetaFilters) => {
|
||||||
|
setFilters(f);
|
||||||
|
onChangeTaskMetaFilter(f);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleNameChange = (nFilter: string) => {
|
||||||
|
handleSetFilters(
|
||||||
|
produce(currentFilters, draftFilters => {
|
||||||
|
draftFilters.taskName = nFilter !== '' ? { name: nFilter } : null;
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
setNameFilter(nFilter);
|
||||||
|
};
|
||||||
|
|
||||||
|
const { setTab } = usePopup();
|
||||||
|
|
||||||
|
const handleSetDueDate = (filterType: DueDateFilterType, label: string) => {
|
||||||
|
handleSetFilters(
|
||||||
|
produce(currentFilters, draftFilters => {
|
||||||
|
if (draftFilters.dueDate && draftFilters.dueDate.type === filterType) {
|
||||||
|
draftFilters.dueDate = null;
|
||||||
|
} else {
|
||||||
|
draftFilters.dueDate = {
|
||||||
|
label,
|
||||||
|
type: filterType,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<Popup tab={0} title={null}>
|
||||||
|
<ActionsList>
|
||||||
|
<TaskNameInput
|
||||||
|
width="100%"
|
||||||
|
onChange={e => handleNameChange(e.currentTarget.value)}
|
||||||
|
value={nameFilter}
|
||||||
|
variant="alternate"
|
||||||
|
placeholder="Task name..."
|
||||||
|
/>
|
||||||
|
<ActionItemSeparator>QUICK ADD</ActionItemSeparator>
|
||||||
|
<ActionItem
|
||||||
|
onClick={() => {
|
||||||
|
handleSetFilters(
|
||||||
|
produce(currentFilters, draftFilters => {
|
||||||
|
if (members.current) {
|
||||||
|
const member = members.current.find(m => m.id === userID);
|
||||||
|
const draftMember = draftFilters.members.find(m => m.id === userID);
|
||||||
|
if (member && !draftMember) {
|
||||||
|
draftFilters.members.push({ id: userID, username: member.username ? member.username : '' });
|
||||||
|
} else {
|
||||||
|
draftFilters.members = draftFilters.members.filter(m => m.id !== userID);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<ItemIcon>
|
||||||
|
<User width={12} height={12} />
|
||||||
|
</ItemIcon>
|
||||||
|
<ActionTitle>Just my tasks</ActionTitle>
|
||||||
|
{currentFilters.members.find(m => m.id === userID) && <ActiveIcon width={12} height={12} />}
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
|
||||||
|
<ItemIcon>
|
||||||
|
<Calendar width={12} height={12} />
|
||||||
|
</ItemIcon>
|
||||||
|
<ActionTitle>Due this week</ActionTitle>
|
||||||
|
{currentFilters.dueDate && currentFilters.dueDate.type === DueDateFilterType.THIS_WEEK && (
|
||||||
|
<ActiveIcon width={12} height={12} />
|
||||||
|
)}
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NEXT_WEEK, 'Due next week')}>
|
||||||
|
<ItemIcon>
|
||||||
|
<Calendar width={12} height={12} />
|
||||||
|
</ItemIcon>
|
||||||
|
<ActionTitle>Due next week</ActionTitle>
|
||||||
|
{currentFilters.dueDate && currentFilters.dueDate.type === DueDateFilterType.NEXT_WEEK && (
|
||||||
|
<ActiveIcon width={12} height={12} />
|
||||||
|
)}
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItemLine />
|
||||||
|
<ActionItem onClick={() => setTab(1)}>
|
||||||
|
<ItemIcon>
|
||||||
|
<Tags width={12} height={12} />
|
||||||
|
</ItemIcon>
|
||||||
|
<ActionTitle>By Label</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => setTab(2)}>
|
||||||
|
<ItemIcon>
|
||||||
|
<User width={12} height={12} />
|
||||||
|
</ItemIcon>
|
||||||
|
<ActionTitle>By Member</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => setTab(3)}>
|
||||||
|
<ItemIcon>
|
||||||
|
<Clock width={12} height={12} />
|
||||||
|
</ItemIcon>
|
||||||
|
<ActionTitle>By Due Date</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
</ActionsList>
|
||||||
|
</Popup>
|
||||||
|
<Popup tab={1} title="By Labels">
|
||||||
|
<Labels>
|
||||||
|
{labels.current &&
|
||||||
|
labels.current
|
||||||
|
// .filter(label => '' === '' || (label.name && label.name.toLowerCase().startsWith(''.toLowerCase())))
|
||||||
|
.map(label => (
|
||||||
|
<Label key={label.id}>
|
||||||
|
<CardLabel
|
||||||
|
key={label.id}
|
||||||
|
color={label.labelColor.colorHex}
|
||||||
|
active={currentLabel === label.id}
|
||||||
|
onMouseEnter={() => {
|
||||||
|
setCurrentLabel(label.id);
|
||||||
|
}}
|
||||||
|
onClick={() => {
|
||||||
|
handleSetFilters(
|
||||||
|
produce(currentFilters, draftFilters => {
|
||||||
|
if (draftFilters.labels.find(l => l.id === label.id)) {
|
||||||
|
draftFilters.labels = draftFilters.labels.filter(l => l.id !== label.id);
|
||||||
|
} else {
|
||||||
|
draftFilters.labels.push({
|
||||||
|
id: label.id,
|
||||||
|
name: label.name ?? '',
|
||||||
|
color: label.labelColor.colorHex,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{label.name}
|
||||||
|
</CardLabel>
|
||||||
|
</Label>
|
||||||
|
))}
|
||||||
|
</Labels>
|
||||||
|
</Popup>
|
||||||
|
<Popup tab={2} title="By Member">
|
||||||
|
<ActionsList>
|
||||||
|
{members.current &&
|
||||||
|
members.current.map(member => (
|
||||||
|
<FilterMember
|
||||||
|
key={member.id}
|
||||||
|
member={member}
|
||||||
|
showName
|
||||||
|
onCardMemberClick={() => {
|
||||||
|
handleSetFilters(
|
||||||
|
produce(currentFilters, draftFilters => {
|
||||||
|
if (draftFilters.members.find(m => m.id === member.id)) {
|
||||||
|
draftFilters.members = draftFilters.members.filter(m => m.id !== member.id);
|
||||||
|
} else {
|
||||||
|
draftFilters.members.push({ id: member.id, username: member.username ?? '' });
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</ActionsList>
|
||||||
|
</Popup>
|
||||||
|
<Popup tab={3} title="By Due Date">
|
||||||
|
<ActionsList>
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TODAY, 'Today')}>
|
||||||
|
<ActionTitle>Today</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THIS_WEEK, 'Due this week')}>
|
||||||
|
<ActionTitle>This week</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NEXT_WEEK, 'Due next week')}>
|
||||||
|
<ActionTitle>Next week</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.OVERDUE, 'Overdue')}>
|
||||||
|
<ActionTitle>Overdue</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItemLine />
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TOMORROW, 'In the next day')}>
|
||||||
|
<ActionTitle>In the next day</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.ONE_WEEK, 'In the next week')}>
|
||||||
|
<ActionTitle>In the next week</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.TWO_WEEKS, 'In the next two weeks')}>
|
||||||
|
<ActionTitle>In the next two weeks</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.THREE_WEEKS, 'In the next three weeks')}>
|
||||||
|
<ActionTitle>In the next three weeks</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => handleSetDueDate(DueDateFilterType.NO_DUE_DATE, 'Has no due date')}>
|
||||||
|
<ActionTitle>Has no due date</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
</ActionsList>
|
||||||
|
</Popup>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FilterMeta;
|
149
frontend/src/Projects/Project/Board/FilterStatus.tsx
Normal file
149
frontend/src/Projects/Project/Board/FilterStatus.tsx
Normal file
@ -0,0 +1,149 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { Checkmark } from 'shared/icons';
|
||||||
|
import { TaskStatusFilter, TaskStatus, TaskSince } from 'shared/components/Lists';
|
||||||
|
|
||||||
|
export const ActionsList = styled.ul`
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionExtraMenuContainer = styled.div`
|
||||||
|
visibility: hidden;
|
||||||
|
position: absolute;
|
||||||
|
left: 100%;
|
||||||
|
top: -4px;
|
||||||
|
padding-left: 2px;
|
||||||
|
width: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionItem = styled.li`
|
||||||
|
position: relative;
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 4px;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
&:hover {
|
||||||
|
background: rgb(115, 103, 240);
|
||||||
|
}
|
||||||
|
&:hover ${ActionExtraMenuContainer} {
|
||||||
|
visibility: visible;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionTitle = styled.span`
|
||||||
|
margin-left: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionExtraMenu = styled.ul`
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
padding: 5px;
|
||||||
|
padding-top: 8px;
|
||||||
|
border-radius: 5px;
|
||||||
|
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
|
||||||
|
|
||||||
|
color: #c2c6dc;
|
||||||
|
background: #262c49;
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: #414561;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionExtraMenuItem = styled.li`
|
||||||
|
position: relative;
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 4px;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
&:hover {
|
||||||
|
background: rgb(115, 103, 240);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
const ActionExtraMenuSeparator = styled.li`
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
||||||
|
font-size: 12px;
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 4px;
|
||||||
|
padding-top: 0.25rem;
|
||||||
|
padding-bottom: 0.25rem;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ActiveIcon = styled(Checkmark)`
|
||||||
|
position: absolute;
|
||||||
|
`;
|
||||||
|
|
||||||
|
type FilterStatusProps = {
|
||||||
|
filter: TaskStatusFilter;
|
||||||
|
onChangeTaskStatusFilter: (filter: TaskStatusFilter) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const FilterStatus: React.FC<FilterStatusProps> = ({ filter, onChangeTaskStatusFilter }) => {
|
||||||
|
const [currentFilter, setFilter] = useState(filter);
|
||||||
|
const handleFilterChange = (f: TaskStatusFilter) => {
|
||||||
|
setFilter(f);
|
||||||
|
onChangeTaskStatusFilter(f);
|
||||||
|
};
|
||||||
|
const handleCompleteClick = (s: TaskSince) => {
|
||||||
|
handleFilterChange({ status: TaskStatus.COMPLETE, since: s });
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<ActionsList>
|
||||||
|
<ActionItem onClick={() => handleFilterChange({ status: TaskStatus.INCOMPLETE, since: TaskSince.ALL })}>
|
||||||
|
{currentFilter.status === TaskStatus.INCOMPLETE && <ActiveIcon width={12} height={12} />}
|
||||||
|
<ActionTitle>Incomplete Tasks</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem>
|
||||||
|
{currentFilter.status === TaskStatus.COMPLETE && <ActiveIcon width={12} height={12} />}
|
||||||
|
<ActionTitle>Compelete Tasks</ActionTitle>
|
||||||
|
<ActionExtraMenuContainer>
|
||||||
|
<ActionExtraMenu>
|
||||||
|
<ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.ALL)}>
|
||||||
|
{currentFilter.since === TaskSince.ALL && <ActiveIcon width={12} height={12} />}
|
||||||
|
<ActionTitle>All completed tasks</ActionTitle>
|
||||||
|
</ActionExtraMenuItem>
|
||||||
|
<ActionExtraMenuSeparator>Marked complete since</ActionExtraMenuSeparator>
|
||||||
|
<ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.TODAY)}>
|
||||||
|
{currentFilter.since === TaskSince.TODAY && <ActiveIcon width={12} height={12} />}
|
||||||
|
<ActionTitle>Today</ActionTitle>
|
||||||
|
</ActionExtraMenuItem>
|
||||||
|
<ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.YESTERDAY)}>
|
||||||
|
{currentFilter.since === TaskSince.YESTERDAY && <ActiveIcon width={12} height={12} />}
|
||||||
|
<ActionTitle>Yesterday</ActionTitle>
|
||||||
|
</ActionExtraMenuItem>
|
||||||
|
<ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.ONE_WEEK)}>
|
||||||
|
{currentFilter.since === TaskSince.ONE_WEEK && <ActiveIcon width={12} height={12} />}
|
||||||
|
<ActionTitle>1 week</ActionTitle>
|
||||||
|
</ActionExtraMenuItem>
|
||||||
|
<ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.TWO_WEEKS)}>
|
||||||
|
{currentFilter.since === TaskSince.TWO_WEEKS && <ActiveIcon width={12} height={12} />}
|
||||||
|
<ActionTitle>2 weeks</ActionTitle>
|
||||||
|
</ActionExtraMenuItem>
|
||||||
|
<ActionExtraMenuItem onClick={() => handleCompleteClick(TaskSince.THREE_WEEKS)}>
|
||||||
|
{currentFilter.since === TaskSince.THREE_WEEKS && <ActiveIcon width={12} height={12} />}
|
||||||
|
<ActionTitle>3 weeks</ActionTitle>
|
||||||
|
</ActionExtraMenuItem>
|
||||||
|
</ActionExtraMenu>
|
||||||
|
</ActionExtraMenuContainer>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem onClick={() => handleFilterChange({ status: TaskStatus.ALL, since: TaskSince.ALL })}>
|
||||||
|
{currentFilter.status === TaskStatus.ALL && <ActiveIcon width={12} height={12} />}
|
||||||
|
<ActionTitle>All Tasks</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
</ActionsList>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default FilterStatus;
|
80
frontend/src/Projects/Project/Board/SortPopup.tsx
Normal file
80
frontend/src/Projects/Project/Board/SortPopup.tsx
Normal file
@ -0,0 +1,80 @@
|
|||||||
|
import React, { useState } from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { TaskSorting, TaskSortingType, TaskSortingDirection } from 'shared/utils/sorting';
|
||||||
|
|
||||||
|
export const ActionsList = styled.ul`
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionItem = styled.li`
|
||||||
|
position: relative;
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 4px;
|
||||||
|
padding-top: 0.5rem;
|
||||||
|
padding-bottom: 0.5rem;
|
||||||
|
cursor: pointer;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 14px;
|
||||||
|
&:hover {
|
||||||
|
background: rgb(115, 103, 240);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionTitle = styled.span`
|
||||||
|
margin-left: 20px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ActionItemSeparator = styled.li`
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary}, 0.4);
|
||||||
|
font-size: 12px;
|
||||||
|
padding-left: 4px;
|
||||||
|
padding-right: 4px;
|
||||||
|
padding-top: 0.75rem;
|
||||||
|
padding-bottom: 0.25rem;
|
||||||
|
`;
|
||||||
|
|
||||||
|
type SortPopupProps = {
|
||||||
|
sorting: TaskSorting;
|
||||||
|
onChangeTaskSorting: (taskSorting: TaskSorting) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const SortPopup: React.FC<SortPopupProps> = ({ sorting, onChangeTaskSorting }) => {
|
||||||
|
const [currentSorting, setSorting] = useState(sorting);
|
||||||
|
const handleSetSorting = (s: TaskSorting) => {
|
||||||
|
setSorting(s);
|
||||||
|
onChangeTaskSorting(s);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<ActionsList>
|
||||||
|
<ActionItem onClick={() => handleSetSorting({ type: TaskSortingType.NONE, direction: TaskSortingDirection.ASC })}>
|
||||||
|
<ActionTitle>None</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem
|
||||||
|
onClick={() => handleSetSorting({ type: TaskSortingType.DUE_DATE, direction: TaskSortingDirection.ASC })}
|
||||||
|
>
|
||||||
|
<ActionTitle>Due date</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem
|
||||||
|
onClick={() => handleSetSorting({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
|
||||||
|
>
|
||||||
|
<ActionTitle>Members</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem
|
||||||
|
onClick={() => handleSetSorting({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
|
||||||
|
>
|
||||||
|
<ActionTitle>Labels</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
<ActionItem
|
||||||
|
onClick={() => handleSetSorting({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
|
||||||
|
>
|
||||||
|
<ActionTitle>Task title</ActionTitle>
|
||||||
|
</ActionItem>
|
||||||
|
</ActionsList>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default SortPopup;
|
@ -1,52 +1,122 @@
|
|||||||
import React, { useState, useRef, useContext, useEffect } from 'react';
|
import React, { useState, useRef } from 'react';
|
||||||
import { MENU_TYPES } from 'shared/components/TopNavbar';
|
|
||||||
import updateApolloCache from 'shared/utils/cache';
|
import updateApolloCache from 'shared/utils/cache';
|
||||||
import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
|
|
||||||
import LabelManagerEditor from '../LabelManagerEditor';
|
|
||||||
import styled, { css } from 'styled-components/macro';
|
import styled, { css } from 'styled-components/macro';
|
||||||
import { Bolt, ToggleOn, Tags, CheckCircle, Sort, Filter } from 'shared/icons';
|
import { Bolt, ToggleOn, Tags, CheckCircle, Sort, Filter } from 'shared/icons';
|
||||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||||
import { useParams, Route, useRouteMatch, useHistory, RouteComponentProps, useLocation } from 'react-router-dom';
|
import { useRouteMatch, useHistory } from 'react-router-dom';
|
||||||
import {
|
import {
|
||||||
useUpdateProjectMemberRoleMutation,
|
|
||||||
useCreateProjectMemberMutation,
|
|
||||||
useDeleteProjectMemberMutation,
|
|
||||||
useSetTaskCompleteMutation,
|
useSetTaskCompleteMutation,
|
||||||
useToggleTaskLabelMutation,
|
useToggleTaskLabelMutation,
|
||||||
useUpdateProjectNameMutation,
|
|
||||||
useFindProjectQuery,
|
useFindProjectQuery,
|
||||||
|
useSortTaskGroupMutation,
|
||||||
useUpdateTaskGroupNameMutation,
|
useUpdateTaskGroupNameMutation,
|
||||||
useUpdateTaskNameMutation,
|
useUpdateTaskNameMutation,
|
||||||
useUpdateProjectLabelMutation,
|
|
||||||
useCreateTaskMutation,
|
useCreateTaskMutation,
|
||||||
useDeleteProjectLabelMutation,
|
|
||||||
useDeleteTaskMutation,
|
useDeleteTaskMutation,
|
||||||
useUpdateTaskLocationMutation,
|
useUpdateTaskLocationMutation,
|
||||||
useUpdateTaskGroupLocationMutation,
|
useUpdateTaskGroupLocationMutation,
|
||||||
useCreateTaskGroupMutation,
|
useCreateTaskGroupMutation,
|
||||||
useDeleteTaskGroupMutation,
|
useDeleteTaskGroupMutation,
|
||||||
useUpdateTaskDescriptionMutation,
|
|
||||||
useAssignTaskMutation,
|
useAssignTaskMutation,
|
||||||
DeleteTaskDocument,
|
|
||||||
FindProjectDocument,
|
FindProjectDocument,
|
||||||
useCreateProjectLabelMutation,
|
|
||||||
useUnassignTaskMutation,
|
useUnassignTaskMutation,
|
||||||
useUpdateTaskDueDateMutation,
|
useUpdateTaskDueDateMutation,
|
||||||
FindProjectQuery,
|
FindProjectQuery,
|
||||||
useUsersQuery,
|
useDuplicateTaskGroupMutation,
|
||||||
|
DuplicateTaskGroupMutation,
|
||||||
|
DuplicateTaskGroupDocument,
|
||||||
|
useDeleteTaskGroupTasksMutation,
|
||||||
} from 'shared/generated/graphql';
|
} from 'shared/generated/graphql';
|
||||||
|
|
||||||
import QuickCardEditor from 'shared/components/QuickCardEditor';
|
import QuickCardEditor from 'shared/components/QuickCardEditor';
|
||||||
import ListActions from 'shared/components/ListActions';
|
import ListActions from 'shared/components/ListActions';
|
||||||
import MemberManager from 'shared/components/MemberManager';
|
import MemberManager from 'shared/components/MemberManager';
|
||||||
import SimpleLists from 'shared/components/Lists';
|
import SimpleLists, {
|
||||||
|
TaskStatus,
|
||||||
|
TaskSince,
|
||||||
|
TaskStatusFilter,
|
||||||
|
TaskMeta,
|
||||||
|
TaskMetaMatch,
|
||||||
|
TaskMetaFilters,
|
||||||
|
} from 'shared/components/Lists';
|
||||||
|
import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
|
||||||
import produce from 'immer';
|
import produce from 'immer';
|
||||||
import MiniProfile from 'shared/components/MiniProfile';
|
import MiniProfile from 'shared/components/MiniProfile';
|
||||||
import DueDateManager from 'shared/components/DueDateManager';
|
import DueDateManager from 'shared/components/DueDateManager';
|
||||||
import UserContext, { useCurrentUser } from 'App/context';
|
|
||||||
import LabelManager from 'shared/components/PopupMenu/LabelManager';
|
|
||||||
import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
|
|
||||||
import EmptyBoard from 'shared/components/EmptyBoard';
|
import EmptyBoard from 'shared/components/EmptyBoard';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
import LabelManagerEditor from 'Projects/Project/LabelManagerEditor';
|
||||||
|
import Chip from 'shared/components/Chip';
|
||||||
|
import { toast } from 'react-toastify';
|
||||||
|
import { useCurrentUser } from 'App/context';
|
||||||
|
import FilterStatus from './FilterStatus';
|
||||||
|
import FilterMeta from './FilterMeta';
|
||||||
|
import SortPopup from './SortPopup';
|
||||||
|
|
||||||
|
const FilterChip = styled(Chip)`
|
||||||
|
margin-right: 4px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
type MetaFilterCloseFn = (meta: TaskMeta, key: string) => void;
|
||||||
|
|
||||||
|
const renderTaskSortingLabel = (sorting: TaskSorting) => {
|
||||||
|
if (sorting.type === TaskSortingType.TASK_TITLE) {
|
||||||
|
return 'Sort: Card title';
|
||||||
|
}
|
||||||
|
if (sorting.type === TaskSortingType.MEMBERS) {
|
||||||
|
return 'Sort: Members';
|
||||||
|
}
|
||||||
|
if (sorting.type === TaskSortingType.DUE_DATE) {
|
||||||
|
return 'Sort: Due Date';
|
||||||
|
}
|
||||||
|
if (sorting.type === TaskSortingType.LABELS) {
|
||||||
|
return 'Sort: Labels';
|
||||||
|
}
|
||||||
|
return 'Sort';
|
||||||
|
};
|
||||||
|
|
||||||
|
const renderMetaFilters = (filters: TaskMetaFilters, onClose: MetaFilterCloseFn) => {
|
||||||
|
const filterChips = [];
|
||||||
|
if (filters.taskName) {
|
||||||
|
filterChips.push(
|
||||||
|
<FilterChip
|
||||||
|
key="task-name"
|
||||||
|
label={`Title: ${filters.taskName.name}`}
|
||||||
|
onClose={() => onClose(TaskMeta.TITLE, 'task-name')}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (filters.dueDate) {
|
||||||
|
filterChips.push(
|
||||||
|
<FilterChip
|
||||||
|
key="due-date"
|
||||||
|
label={filters.dueDate.label}
|
||||||
|
onClose={() => onClose(TaskMeta.DUE_DATE, 'due-date')}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
for (const memberFilter of filters.members) {
|
||||||
|
filterChips.push(
|
||||||
|
<FilterChip
|
||||||
|
key={`member-${memberFilter.id}`}
|
||||||
|
label={`Member: ${memberFilter.username}`}
|
||||||
|
onClose={() => onClose(TaskMeta.MEMBER, memberFilter.id)}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
for (const labelFilter of filters.labels) {
|
||||||
|
filterChips.push(
|
||||||
|
<FilterChip
|
||||||
|
key={`label-${labelFilter.id}`}
|
||||||
|
label={labelFilter.name === '' ? 'Label' : `Label: ${labelFilter.name}`}
|
||||||
|
color={labelFilter.color}
|
||||||
|
onClose={() => onClose(TaskMeta.LABEL, labelFilter.id)}
|
||||||
|
/>,
|
||||||
|
);
|
||||||
|
}
|
||||||
|
return filterChips;
|
||||||
|
};
|
||||||
|
|
||||||
const ProjectBar = styled.div`
|
const ProjectBar = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -61,14 +131,14 @@ const ProjectActions = styled.div`
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ProjectAction = styled.div<{ disabled?: boolean }>`
|
const ProjectActionWrapper = styled.div<{ disabled?: boolean }>`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
font-size: 15px;
|
font-size: 15px;
|
||||||
color: rgba(${props => props.theme.colors.text.primary});
|
color: rgba(${props => props.theme.colors.text.primary});
|
||||||
|
|
||||||
&:not(:last-child) {
|
&:not(:last-of-type) {
|
||||||
margin-right: 16px;
|
margin-right: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -88,6 +158,25 @@ const ProjectActionText = styled.span`
|
|||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
type ProjectActionProps = {
|
||||||
|
onClick?: (target: React.RefObject<HTMLElement>) => void;
|
||||||
|
disabled?: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
const ProjectAction: React.FC<ProjectActionProps> = ({ onClick, disabled = false, children }) => {
|
||||||
|
const $container = useRef<HTMLDivElement>(null);
|
||||||
|
const handleClick = () => {
|
||||||
|
if (onClick) {
|
||||||
|
onClick($container);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<ProjectActionWrapper ref={$container} onClick={handleClick} disabled={disabled}>
|
||||||
|
{children}
|
||||||
|
</ProjectActionWrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
interface QuickCardEditorState {
|
interface QuickCardEditorState {
|
||||||
isOpen: boolean;
|
isOpen: boolean;
|
||||||
target: React.RefObject<HTMLElement> | null;
|
target: React.RefObject<HTMLElement> | null;
|
||||||
@ -113,18 +202,18 @@ export const BoardLoading = () => {
|
|||||||
<>
|
<>
|
||||||
<ProjectBar>
|
<ProjectBar>
|
||||||
<ProjectActions>
|
<ProjectActions>
|
||||||
<ProjectAction disabled>
|
<ProjectAction>
|
||||||
<CheckCircle width={13} height={13} />
|
<CheckCircle width={13} height={13} />
|
||||||
<ProjectActionText>All Tasks</ProjectActionText>
|
<ProjectActionText>All Tasks</ProjectActionText>
|
||||||
</ProjectAction>
|
</ProjectAction>
|
||||||
<ProjectAction disabled>
|
<ProjectAction>
|
||||||
<Filter width={13} height={13} />
|
|
||||||
<ProjectActionText>Filter</ProjectActionText>
|
|
||||||
</ProjectAction>
|
|
||||||
<ProjectAction disabled>
|
|
||||||
<Sort width={13} height={13} />
|
<Sort width={13} height={13} />
|
||||||
<ProjectActionText>Sort</ProjectActionText>
|
<ProjectActionText>Sort</ProjectActionText>
|
||||||
</ProjectAction>
|
</ProjectAction>
|
||||||
|
<ProjectAction>
|
||||||
|
<Filter width={13} height={13} />
|
||||||
|
<ProjectActionText>Filter</ProjectActionText>
|
||||||
|
</ProjectAction>
|
||||||
</ProjectActions>
|
</ProjectActions>
|
||||||
<ProjectActions>
|
<ProjectActions>
|
||||||
<ProjectAction>
|
<ProjectAction>
|
||||||
@ -146,18 +235,43 @@ export const BoardLoading = () => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const initTaskStatusFilter: TaskStatusFilter = {
|
||||||
|
status: TaskStatus.ALL,
|
||||||
|
since: TaskSince.ALL,
|
||||||
|
};
|
||||||
|
|
||||||
|
const initTaskMetaFilters: TaskMetaFilters = {
|
||||||
|
match: TaskMetaMatch.MATCH_ANY,
|
||||||
|
dueDate: null,
|
||||||
|
taskName: null,
|
||||||
|
labels: [],
|
||||||
|
members: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
const initTaskSorting: TaskSorting = {
|
||||||
|
type: TaskSortingType.NONE,
|
||||||
|
direction: TaskSortingDirection.ASC,
|
||||||
|
};
|
||||||
|
|
||||||
const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick, cardLabelVariant }) => {
|
const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick, cardLabelVariant }) => {
|
||||||
const [assignTask] = useAssignTaskMutation();
|
const [assignTask] = useAssignTaskMutation();
|
||||||
const [unassignTask] = useUnassignTaskMutation();
|
const [unassignTask] = useUnassignTaskMutation();
|
||||||
const $labelsRef = useRef<HTMLDivElement>(null);
|
|
||||||
const match = useRouteMatch();
|
const match = useRouteMatch();
|
||||||
const labelsRef = useRef<Array<ProjectLabel>>([]);
|
const labelsRef = useRef<Array<ProjectLabel>>([]);
|
||||||
|
const membersRef = useRef<Array<TaskUser>>([]);
|
||||||
const { showPopup, hidePopup } = usePopup();
|
const { showPopup, hidePopup } = usePopup();
|
||||||
const taskLabelsRef = useRef<Array<TaskLabel>>([]);
|
const taskLabelsRef = useRef<Array<TaskLabel>>([]);
|
||||||
const [quickCardEditor, setQuickCardEditor] = useState(initialQuickCardEditorState);
|
const [quickCardEditor, setQuickCardEditor] = useState(initialQuickCardEditorState);
|
||||||
const { user } = useCurrentUser();
|
|
||||||
const [updateTaskGroupLocation] = useUpdateTaskGroupLocationMutation({});
|
const [updateTaskGroupLocation] = useUpdateTaskGroupLocationMutation({});
|
||||||
|
const [taskStatusFilter, setTaskStatusFilter] = useState(initTaskStatusFilter);
|
||||||
|
const [taskMetaFilters, setTaskMetaFilters] = useState(initTaskMetaFilters);
|
||||||
|
const [taskSorting, setTaskSorting] = useState(initTaskSorting);
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
|
const [sortTaskGroup] = useSortTaskGroupMutation({
|
||||||
|
onCompleted: () => {
|
||||||
|
toast('List was sorted');
|
||||||
|
},
|
||||||
|
});
|
||||||
const [deleteTaskGroup] = useDeleteTaskGroupMutation({
|
const [deleteTaskGroup] = useDeleteTaskGroupMutation({
|
||||||
update: (client, deletedTaskGroupData) => {
|
update: (client, deletedTaskGroupData) => {
|
||||||
updateApolloCache<FindProjectQuery>(
|
updateApolloCache<FindProjectQuery>(
|
||||||
@ -210,6 +324,36 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
const { loading, data } = useFindProjectQuery({
|
const { loading, data } = useFindProjectQuery({
|
||||||
variables: { projectID },
|
variables: { projectID },
|
||||||
});
|
});
|
||||||
|
const [deleteTaskGroupTasks] = useDeleteTaskGroupTasksMutation({
|
||||||
|
update: (client, resp) =>
|
||||||
|
updateApolloCache<FindProjectQuery>(
|
||||||
|
client,
|
||||||
|
FindProjectDocument,
|
||||||
|
cache =>
|
||||||
|
produce(cache, draftCache => {
|
||||||
|
const idx = cache.findProject.taskGroups.findIndex(
|
||||||
|
t => t.id === resp.data.deleteTaskGroupTasks.taskGroupID,
|
||||||
|
);
|
||||||
|
if (idx !== -1) {
|
||||||
|
draftCache.findProject.taskGroups[idx].tasks = [];
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
{ projectID },
|
||||||
|
),
|
||||||
|
});
|
||||||
|
const [duplicateTaskGroup] = useDuplicateTaskGroupMutation({
|
||||||
|
update: (client, resp) => {
|
||||||
|
updateApolloCache<FindProjectQuery>(
|
||||||
|
client,
|
||||||
|
FindProjectDocument,
|
||||||
|
cache =>
|
||||||
|
produce(cache, draftCache => {
|
||||||
|
draftCache.findProject.taskGroups.push(resp.data.duplicateTaskGroup.taskGroup);
|
||||||
|
}),
|
||||||
|
{ projectID },
|
||||||
|
);
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
|
const [updateTaskDueDate] = useUpdateTaskDueDateMutation();
|
||||||
const [setTaskComplete] = useSetTaskCompleteMutation();
|
const [setTaskComplete] = useSetTaskCompleteMutation();
|
||||||
@ -240,6 +384,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
);
|
);
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
const { user } = useCurrentUser();
|
||||||
const [deleteTask] = useDeleteTaskMutation();
|
const [deleteTask] = useDeleteTaskMutation();
|
||||||
const [toggleTaskLabel] = useToggleTaskLabelMutation({
|
const [toggleTaskLabel] = useToggleTaskLabelMutation({
|
||||||
onCompleted: newTaskLabel => {
|
onCompleted: newTaskLabel => {
|
||||||
@ -269,6 +414,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
id: `${Math.round(Math.random() * -1000000)}`,
|
id: `${Math.round(Math.random() * -1000000)}`,
|
||||||
name,
|
name,
|
||||||
complete: false,
|
complete: false,
|
||||||
|
completedAt: null,
|
||||||
taskGroup: {
|
taskGroup: {
|
||||||
__typename: 'TaskGroup',
|
__typename: 'TaskGroup',
|
||||||
id: taskGroup.id,
|
id: taskGroup.id,
|
||||||
@ -305,15 +451,19 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
if (loading) {
|
if (loading) {
|
||||||
return <BoardLoading />;
|
return <BoardLoading />;
|
||||||
}
|
}
|
||||||
if (data) {
|
const getTaskStatusFilterLabel = (filter: TaskStatusFilter) => {
|
||||||
|
if (filter.status === TaskStatus.COMPLETE) {
|
||||||
|
return 'Complete';
|
||||||
|
}
|
||||||
|
if (filter.status === TaskStatus.INCOMPLETE) {
|
||||||
|
return 'Incomplete';
|
||||||
|
}
|
||||||
|
return 'All Tasks';
|
||||||
|
};
|
||||||
|
if (data && user) {
|
||||||
labelsRef.current = data.findProject.labels;
|
labelsRef.current = data.findProject.labels;
|
||||||
|
membersRef.current = data.findProject.members;
|
||||||
const onQuickEditorOpen = ($target: React.RefObject<HTMLElement>, taskID: string, taskGroupID: string) => {
|
const onQuickEditorOpen = ($target: React.RefObject<HTMLElement>, taskID: string, taskGroupID: string) => {
|
||||||
if ($target && $target.current) {
|
|
||||||
const pos = $target.current.getBoundingClientRect();
|
|
||||||
const height = 120;
|
|
||||||
if (window.innerHeight - pos.bottom < height) {
|
|
||||||
}
|
|
||||||
}
|
|
||||||
const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
|
const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
|
||||||
const currentTask = taskGroup ? taskGroup.tasks.find(t => t.id === taskID) : null;
|
const currentTask = taskGroup ? taskGroup.tasks.find(t => t.id === taskID) : null;
|
||||||
if (currentTask) {
|
if (currentTask) {
|
||||||
@ -336,23 +486,84 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
<>
|
<>
|
||||||
<ProjectBar>
|
<ProjectBar>
|
||||||
<ProjectActions>
|
<ProjectActions>
|
||||||
<ProjectAction disabled>
|
<ProjectAction
|
||||||
|
onClick={target => {
|
||||||
|
showPopup(
|
||||||
|
target,
|
||||||
|
<Popup tab={0} title={null}>
|
||||||
|
<FilterStatus
|
||||||
|
filter={taskStatusFilter}
|
||||||
|
onChangeTaskStatusFilter={filter => {
|
||||||
|
setTaskStatusFilter(filter);
|
||||||
|
hidePopup();
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Popup>,
|
||||||
|
{ width: 185 },
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<CheckCircle width={13} height={13} />
|
<CheckCircle width={13} height={13} />
|
||||||
<ProjectActionText>All Tasks</ProjectActionText>
|
<ProjectActionText>{getTaskStatusFilterLabel(taskStatusFilter)}</ProjectActionText>
|
||||||
</ProjectAction>
|
</ProjectAction>
|
||||||
<ProjectAction disabled>
|
<ProjectAction
|
||||||
|
onClick={target => {
|
||||||
|
showPopup(
|
||||||
|
target,
|
||||||
|
<Popup tab={0} title={null}>
|
||||||
|
<SortPopup
|
||||||
|
sorting={taskSorting}
|
||||||
|
onChangeTaskSorting={sorting => {
|
||||||
|
setTaskSorting(sorting);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</Popup>,
|
||||||
|
{ width: 185 },
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Sort width={13} height={13} />
|
||||||
|
<ProjectActionText>{renderTaskSortingLabel(taskSorting)}</ProjectActionText>
|
||||||
|
</ProjectAction>
|
||||||
|
<ProjectAction
|
||||||
|
onClick={target => {
|
||||||
|
showPopup(
|
||||||
|
target,
|
||||||
|
<FilterMeta
|
||||||
|
filters={taskMetaFilters}
|
||||||
|
onChangeTaskMetaFilter={filter => {
|
||||||
|
setTaskMetaFilters(filter);
|
||||||
|
}}
|
||||||
|
userID={user?.id}
|
||||||
|
labels={labelsRef}
|
||||||
|
members={membersRef}
|
||||||
|
/>,
|
||||||
|
{ width: 200 },
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
>
|
||||||
<Filter width={13} height={13} />
|
<Filter width={13} height={13} />
|
||||||
<ProjectActionText>Filter</ProjectActionText>
|
<ProjectActionText>Filter</ProjectActionText>
|
||||||
</ProjectAction>
|
</ProjectAction>
|
||||||
<ProjectAction disabled>
|
{renderMetaFilters(taskMetaFilters, (meta, id) => {
|
||||||
<Sort width={13} height={13} />
|
setTaskMetaFilters(
|
||||||
<ProjectActionText>Sort</ProjectActionText>
|
produce(taskMetaFilters, draftFilters => {
|
||||||
</ProjectAction>
|
if (meta === TaskMeta.MEMBER) {
|
||||||
|
draftFilters.members = draftFilters.members.filter(m => m.id !== id);
|
||||||
|
} else if (meta === TaskMeta.LABEL) {
|
||||||
|
draftFilters.labels = draftFilters.labels.filter(m => m.id !== id);
|
||||||
|
} else if (meta === TaskMeta.TITLE) {
|
||||||
|
draftFilters.taskName = null;
|
||||||
|
} else if (meta === TaskMeta.DUE_DATE) {
|
||||||
|
draftFilters.dueDate = null;
|
||||||
|
}
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
})}
|
||||||
</ProjectActions>
|
</ProjectActions>
|
||||||
<ProjectActions>
|
<ProjectActions>
|
||||||
<ProjectAction
|
<ProjectAction
|
||||||
ref={$labelsRef}
|
onClick={$labelsRef => {
|
||||||
onClick={() => {
|
|
||||||
showPopup(
|
showPopup(
|
||||||
$labelsRef,
|
$labelsRef,
|
||||||
<LabelManagerEditor
|
<LabelManagerEditor
|
||||||
@ -381,7 +592,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
onTaskClick={task => {
|
onTaskClick={task => {
|
||||||
history.push(`${match.url}/c/${task.id}`);
|
history.push(`${match.url}/c/${task.id}`);
|
||||||
}}
|
}}
|
||||||
onCardLabelClick={onCardLabelClick ?? (() => {})}
|
onCardLabelClick={onCardLabelClick ?? NOOP}
|
||||||
cardLabelVariant={cardLabelVariant ?? 'large'}
|
cardLabelVariant={cardLabelVariant ?? 'large'}
|
||||||
onTaskDrop={(droppedTask, previousTaskGroupID) => {
|
onTaskDrop={(droppedTask, previousTaskGroupID) => {
|
||||||
updateTaskLocation({
|
updateTaskLocation({
|
||||||
@ -425,9 +636,12 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
});
|
});
|
||||||
}}
|
}}
|
||||||
taskGroups={data.findProject.taskGroups}
|
taskGroups={data.findProject.taskGroups}
|
||||||
|
taskStatusFilter={taskStatusFilter}
|
||||||
|
taskMetaFilters={taskMetaFilters}
|
||||||
|
taskSorting={taskSorting}
|
||||||
onCreateTask={onCreateTask}
|
onCreateTask={onCreateTask}
|
||||||
onCreateTaskGroup={onCreateList}
|
onCreateTaskGroup={onCreateList}
|
||||||
onCardMemberClick={($targetRef, taskID, memberID) => {
|
onCardMemberClick={($targetRef, _taskID, memberID) => {
|
||||||
const member = data.findProject.members.find(m => m.id === memberID);
|
const member = data.findProject.members.find(m => m.id === memberID);
|
||||||
if (member) {
|
if (member) {
|
||||||
showPopup(
|
showPopup(
|
||||||
@ -449,15 +663,44 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
onExtraMenuOpen={(taskGroupID: string, $targetRef: any) => {
|
onExtraMenuOpen={(taskGroupID: string, $targetRef: any) => {
|
||||||
showPopup(
|
showPopup(
|
||||||
$targetRef,
|
$targetRef,
|
||||||
<Popup title="List actions" tab={0} onClose={() => hidePopup()}>
|
<ListActions
|
||||||
<ListActions
|
taskGroupID={taskGroupID}
|
||||||
taskGroupID={taskGroupID}
|
onDeleteTaskGroupTasks={() => {
|
||||||
onArchiveTaskGroup={tgID => {
|
deleteTaskGroupTasks({ variables: { taskGroupID } });
|
||||||
deleteTaskGroup({ variables: { taskGroupID: tgID } });
|
hidePopup();
|
||||||
|
}}
|
||||||
|
onSortTaskGroup={taskSort => {
|
||||||
|
const taskGroup = data.findProject.taskGroups.find(t => t.id === taskGroupID);
|
||||||
|
if (taskGroup) {
|
||||||
|
const tasks: Array<{ taskID: string; position: number }> = taskGroup.tasks
|
||||||
|
.sort((a, b) => sortTasks(a, b, taskSort))
|
||||||
|
.reduce((prevTasks: Array<{ taskID: string; position: number }>, t, idx) => {
|
||||||
|
prevTasks.push({ taskID: t.id, position: (idx + 1) * 2048 });
|
||||||
|
return tasks;
|
||||||
|
}, []);
|
||||||
|
sortTaskGroup({ variables: { taskGroupID, tasks } });
|
||||||
hidePopup();
|
hidePopup();
|
||||||
}}
|
}
|
||||||
/>
|
}}
|
||||||
</Popup>,
|
onDuplicateTaskGroup={newName => {
|
||||||
|
const idx = data.findProject.taskGroups.findIndex(t => t.id === taskGroupID);
|
||||||
|
if (idx !== -1) {
|
||||||
|
const taskGroups = data.findProject.taskGroups.sort((a, b) => a.position - b.position);
|
||||||
|
const prevPos = taskGroups[idx].position;
|
||||||
|
const next = taskGroups[idx + 1];
|
||||||
|
let newPos = prevPos * 2;
|
||||||
|
if (next) {
|
||||||
|
newPos = (prevPos + next.position) / 2.0;
|
||||||
|
}
|
||||||
|
duplicateTaskGroup({ variables: { projectID, taskGroupID, name: newName, position: newPos } });
|
||||||
|
hidePopup();
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
onArchiveTaskGroup={tgID => {
|
||||||
|
deleteTaskGroup({ variables: { taskGroupID: tgID } });
|
||||||
|
hidePopup();
|
||||||
|
}}
|
||||||
|
/>,
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
@ -486,7 +729,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
</Popup>,
|
</Popup>,
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
onCardMemberClick={($targetRef, taskID, memberID) => {
|
onCardMemberClick={($targetRef, _taskID, memberID) => {
|
||||||
const member = data.findProject.members.find(m => m.id === memberID);
|
const member = data.findProject.members.find(m => m.id === memberID);
|
||||||
if (member) {
|
if (member) {
|
||||||
showPopup(
|
showPopup(
|
||||||
@ -516,8 +759,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
/>,
|
/>,
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
onArchiveCard={(_listId: string, cardId: string) =>
|
onArchiveCard={(_listId: string, cardId: string) => {
|
||||||
deleteTask({
|
return deleteTask({
|
||||||
variables: { taskID: cardId },
|
variables: { taskID: cardId },
|
||||||
update: client => {
|
update: client => {
|
||||||
updateApolloCache<FindProjectQuery>(
|
updateApolloCache<FindProjectQuery>(
|
||||||
@ -533,8 +776,8 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
{ projectID },
|
{ projectID },
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
}
|
}}
|
||||||
onOpenDueDatePopup={($targetRef, task) => {
|
onOpenDueDatePopup={($targetRef, task) => {
|
||||||
showPopup(
|
showPopup(
|
||||||
$targetRef,
|
$targetRef,
|
||||||
@ -549,7 +792,7 @@ const ProjectBoard: React.FC<ProjectBoardProps> = ({ projectID, onCardLabelClick
|
|||||||
updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
|
updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
|
||||||
hidePopup();
|
hidePopup();
|
||||||
}}
|
}}
|
||||||
onCancel={() => {}}
|
onCancel={NOOP}
|
||||||
/>
|
/>
|
||||||
</Popup>,
|
</Popup>,
|
||||||
);
|
);
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React, { useState, useContext, useEffect } from 'react';
|
import React, { useState } from 'react';
|
||||||
import Modal from 'shared/components/Modal';
|
import Modal from 'shared/components/Modal';
|
||||||
import TaskDetails from 'shared/components/TaskDetails';
|
import TaskDetails from 'shared/components/TaskDetails';
|
||||||
import PopupMenu, { Popup, usePopup } from 'shared/components/PopupMenu';
|
import { Popup, usePopup } from 'shared/components/PopupMenu';
|
||||||
import MemberManager from 'shared/components/MemberManager';
|
import MemberManager from 'shared/components/MemberManager';
|
||||||
import { useRouteMatch, useHistory } from 'react-router';
|
import { useRouteMatch, useHistory } from 'react-router';
|
||||||
import {
|
import {
|
||||||
@ -22,7 +22,7 @@ import {
|
|||||||
FindTaskDocument,
|
FindTaskDocument,
|
||||||
FindTaskQuery,
|
FindTaskQuery,
|
||||||
} from 'shared/generated/graphql';
|
} from 'shared/generated/graphql';
|
||||||
import UserContext, { useCurrentUser } from 'App/context';
|
import { useCurrentUser } from 'App/context';
|
||||||
import MiniProfile from 'shared/components/MiniProfile';
|
import MiniProfile from 'shared/components/MiniProfile';
|
||||||
import DueDateManager from 'shared/components/DueDateManager';
|
import DueDateManager from 'shared/components/DueDateManager';
|
||||||
import produce from 'immer';
|
import produce from 'immer';
|
||||||
@ -31,6 +31,7 @@ import Button from 'shared/components/Button';
|
|||||||
import Input from 'shared/components/Input';
|
import Input from 'shared/components/Input';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import updateApolloCache from 'shared/utils/cache';
|
import updateApolloCache from 'shared/utils/cache';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
|
||||||
const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
|
const calculateChecklistBadge = (checklists: Array<TaskChecklist>) => {
|
||||||
const total = checklists.reduce((prev: any, next: any) => {
|
const total = checklists.reduce((prev: any, next: any) => {
|
||||||
@ -75,15 +76,12 @@ const CreateChecklistInput = styled(Input)`
|
|||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const InputError = styled.span`
|
|
||||||
color: rgba(${props => props.theme.colors.danger});
|
|
||||||
font-size: 12px;
|
|
||||||
`;
|
|
||||||
type CreateChecklistPopupProps = {
|
type CreateChecklistPopupProps = {
|
||||||
onCreateChecklist: (data: CreateChecklistData) => void;
|
onCreateChecklist: (data: CreateChecklistData) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChecklist }) => {
|
const CreateChecklistPopup: React.FC<CreateChecklistPopupProps> = ({ onCreateChecklist }) => {
|
||||||
const { register, handleSubmit, errors } = useForm<CreateChecklistData>();
|
const { register, handleSubmit } = useForm<CreateChecklistData>();
|
||||||
const createUser = (data: CreateChecklistData) => {
|
const createUser = (data: CreateChecklistData) => {
|
||||||
onCreateChecklist(data);
|
onCreateChecklist(data);
|
||||||
};
|
};
|
||||||
@ -132,9 +130,6 @@ const Details: React.FC<DetailsProps> = ({
|
|||||||
const { user } = useCurrentUser();
|
const { user } = useCurrentUser();
|
||||||
const { showPopup, hidePopup } = usePopup();
|
const { showPopup, hidePopup } = usePopup();
|
||||||
const history = useHistory();
|
const history = useHistory();
|
||||||
const match = useRouteMatch();
|
|
||||||
const [currentMemberTask, setCurrentMemberTask] = useState('');
|
|
||||||
const [memberPopupData, setMemberPopupData] = useState(initialMemberPopupState);
|
|
||||||
const [updateTaskChecklistLocation] = useUpdateTaskChecklistLocationMutation();
|
const [updateTaskChecklistLocation] = useUpdateTaskChecklistLocationMutation();
|
||||||
const [updateTaskChecklistItemLocation] = useUpdateTaskChecklistItemLocationMutation({
|
const [updateTaskChecklistItemLocation] = useUpdateTaskChecklistItemLocationMutation({
|
||||||
update: (client, response) => {
|
update: (client, response) => {
|
||||||
@ -148,7 +143,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||||||
const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
|
const oldIdx = cache.findTask.checklists.findIndex(c => c.id === prevChecklistID);
|
||||||
const newIdx = cache.findTask.checklists.findIndex(c => c.id === checklistID);
|
const newIdx = cache.findTask.checklists.findIndex(c => c.id === checklistID);
|
||||||
if (oldIdx > -1 && newIdx > -1) {
|
if (oldIdx > -1 && newIdx > -1) {
|
||||||
const item = cache.findTask.checklists[oldIdx].items.find(item => item.id === checklistItem.id);
|
const item = cache.findTask.checklists[oldIdx].items.find(i => i.id === checklistItem.id);
|
||||||
if (item) {
|
if (item) {
|
||||||
draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
|
draftCache.findTask.checklists[oldIdx].items = cache.findTask.checklists[oldIdx].items.filter(
|
||||||
i => i.id !== checklistItem.id,
|
i => i.id !== checklistItem.id,
|
||||||
@ -295,21 +290,22 @@ const Details: React.FC<DetailsProps> = ({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
if (loading) {
|
if (loading) {
|
||||||
return <div>loading</div>;
|
return null;
|
||||||
}
|
}
|
||||||
if (!data) {
|
if (!data) {
|
||||||
return <div>loading</div>;
|
return null;
|
||||||
}
|
}
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Modal
|
<Modal
|
||||||
width={768}
|
width={1070}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
history.push(projectURL);
|
history.push(projectURL);
|
||||||
}}
|
}}
|
||||||
renderContent={() => {
|
renderContent={() => {
|
||||||
return (
|
return (
|
||||||
<TaskDetails
|
<TaskDetails
|
||||||
|
me={data.me.user}
|
||||||
task={data.findTask}
|
task={data.findTask}
|
||||||
onChecklistDrop={checklist => {
|
onChecklistDrop={checklist => {
|
||||||
updateTaskChecklistLocation({
|
updateTaskChecklistLocation({
|
||||||
@ -398,7 +394,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||||||
if (member) {
|
if (member) {
|
||||||
showPopup(
|
showPopup(
|
||||||
$targetRef,
|
$targetRef,
|
||||||
<Popup title={null} onClose={() => {}} tab={0}>
|
<Popup title={null} onClose={NOOP} tab={0}>
|
||||||
<MiniProfile
|
<MiniProfile
|
||||||
user={member}
|
user={member}
|
||||||
bio="None"
|
bio="None"
|
||||||
@ -412,19 +408,19 @@ const Details: React.FC<DetailsProps> = ({
|
|||||||
);
|
);
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
onOpenAddMemberPopup={(task, $targetRef) => {
|
onOpenAddMemberPopup={(_task, $targetRef) => {
|
||||||
showPopup(
|
showPopup(
|
||||||
$targetRef,
|
$targetRef,
|
||||||
<Popup title="Members" tab={0} onClose={() => {}}>
|
<Popup title="Members" tab={0} onClose={NOOP}>
|
||||||
<MemberManager
|
<MemberManager
|
||||||
availableMembers={availableMembers}
|
availableMembers={availableMembers}
|
||||||
activeMembers={data.findTask.assigned}
|
activeMembers={data.findTask.assigned}
|
||||||
onMemberChange={(member, isActive) => {
|
onMemberChange={(member, isActive) => {
|
||||||
if (user) {
|
if (user) {
|
||||||
if (isActive) {
|
if (isActive) {
|
||||||
assignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
|
assignTask({ variables: { taskID: data.findTask.id, userID: member.id } });
|
||||||
} else {
|
} else {
|
||||||
unassignTask({ variables: { taskID: data.findTask.id, userID: user.id } });
|
unassignTask({ variables: { taskID: data.findTask.id, userID: member.id } });
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
@ -486,7 +482,7 @@ const Details: React.FC<DetailsProps> = ({
|
|||||||
showPopup(
|
showPopup(
|
||||||
$targetRef,
|
$targetRef,
|
||||||
<Popup
|
<Popup
|
||||||
title={'Change Due Date'}
|
title="Change Due Date"
|
||||||
tab={0}
|
tab={0}
|
||||||
onClose={() => {
|
onClose={() => {
|
||||||
hidePopup();
|
hidePopup();
|
||||||
@ -502,9 +498,10 @@ const Details: React.FC<DetailsProps> = ({
|
|||||||
updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
|
updateTaskDueDate({ variables: { taskID: t.id, dueDate: newDueDate } });
|
||||||
hidePopup();
|
hidePopup();
|
||||||
}}
|
}}
|
||||||
onCancel={() => {}}
|
onCancel={NOOP}
|
||||||
/>
|
/>
|
||||||
</Popup>,
|
</Popup>,
|
||||||
|
{ showDiamond: false, targetPadding: '0' },
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
@ -4,7 +4,6 @@ import updateApolloCache from 'shared/utils/cache';
|
|||||||
import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
|
import GlobalTopNavbar, { ProjectPopup } from 'App/TopNavbar';
|
||||||
import styled from 'styled-components/macro';
|
import styled from 'styled-components/macro';
|
||||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||||
import LabelManagerEditor from './LabelManagerEditor';
|
|
||||||
import {
|
import {
|
||||||
useParams,
|
useParams,
|
||||||
Route,
|
Route,
|
||||||
@ -36,9 +35,11 @@ import produce from 'immer';
|
|||||||
import UserContext, { useCurrentUser } from 'App/context';
|
import UserContext, { useCurrentUser } from 'App/context';
|
||||||
import Input from 'shared/components/Input';
|
import Input from 'shared/components/Input';
|
||||||
import Member from 'shared/components/Member';
|
import Member from 'shared/components/Member';
|
||||||
|
import EmptyBoard from 'shared/components/EmptyBoard';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
import Board, { BoardLoading } from './Board';
|
import Board, { BoardLoading } from './Board';
|
||||||
import Details from './Details';
|
import Details from './Details';
|
||||||
import EmptyBoard from 'shared/components/EmptyBoard';
|
import LabelManagerEditor from './LabelManagerEditor';
|
||||||
|
|
||||||
const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
|
const CARD_LABEL_VARIANT_STORAGE_KEY = 'card_label_variant';
|
||||||
|
|
||||||
@ -124,6 +125,7 @@ const Project = () => {
|
|||||||
const match = useRouteMatch();
|
const match = useRouteMatch();
|
||||||
|
|
||||||
const [updateTaskDescription] = useUpdateTaskDescriptionMutation();
|
const [updateTaskDescription] = useUpdateTaskDescriptionMutation();
|
||||||
|
const taskLabelsRef = useRef<Array<TaskLabel>>([]);
|
||||||
const [toggleTaskLabel] = useToggleTaskLabelMutation({
|
const [toggleTaskLabel] = useToggleTaskLabelMutation({
|
||||||
onCompleted: newTaskLabel => {
|
onCompleted: newTaskLabel => {
|
||||||
taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
|
taskLabelsRef.current = newTaskLabel.toggleTaskLabel.task.labels;
|
||||||
@ -190,7 +192,6 @@ const Project = () => {
|
|||||||
const { showPopup, hidePopup } = usePopup();
|
const { showPopup, hidePopup } = usePopup();
|
||||||
const $labelsRef = useRef<HTMLDivElement>(null);
|
const $labelsRef = useRef<HTMLDivElement>(null);
|
||||||
const labelsRef = useRef<Array<ProjectLabel>>([]);
|
const labelsRef = useRef<Array<ProjectLabel>>([]);
|
||||||
const taskLabelsRef = useRef<Array<TaskLabel>>([]);
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
if (data) {
|
if (data) {
|
||||||
document.title = `${data.findProject.name} | Taskcafé`;
|
document.title = `${data.findProject.name} | Taskcafé`;
|
||||||
@ -199,7 +200,7 @@ const Project = () => {
|
|||||||
if (loading) {
|
if (loading) {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<GlobalTopNavbar onSaveProjectName={projectName => {}} name="" projectID={null} />
|
<GlobalTopNavbar onSaveProjectName={NOOP} name="" projectID={null} />
|
||||||
<BoardLoading />
|
<BoardLoading />
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
@ -261,7 +262,7 @@ const Project = () => {
|
|||||||
path={`${match.path}/board/c/:taskID`}
|
path={`${match.path}/board/c/:taskID`}
|
||||||
render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
|
render={(routeProps: RouteComponentProps<TaskRouteProps>) => (
|
||||||
<Details
|
<Details
|
||||||
refreshCache={() => {}}
|
refreshCache={NOOP}
|
||||||
availableMembers={data.findProject.members}
|
availableMembers={data.findProject.members}
|
||||||
projectURL={`${match.url}/board`}
|
projectURL={`${match.url}/board`}
|
||||||
taskID={routeProps.match.params.taskID}
|
taskID={routeProps.match.params.taskID}
|
||||||
@ -269,7 +270,17 @@ const Project = () => {
|
|||||||
updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
|
updateTaskName({ variables: { taskID: updatedTask.id, name: newName } });
|
||||||
}}
|
}}
|
||||||
onTaskDescriptionChange={(updatedTask, newDescription) => {
|
onTaskDescriptionChange={(updatedTask, newDescription) => {
|
||||||
updateTaskDescription({ variables: { taskID: updatedTask.id, description: newDescription } });
|
updateTaskDescription({
|
||||||
|
variables: { taskID: updatedTask.id, description: newDescription },
|
||||||
|
optimisticResponse: {
|
||||||
|
__typename: 'Mutation',
|
||||||
|
updateTaskDescription: {
|
||||||
|
__typename: 'Task',
|
||||||
|
id: updatedTask.id,
|
||||||
|
description: newDescription,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
});
|
||||||
}}
|
}}
|
||||||
onDeleteTask={deletedTask => {
|
onDeleteTask={deletedTask => {
|
||||||
deleteTask({ variables: { taskID: deletedTask.id } });
|
deleteTask({ variables: { taskID: deletedTask.id } });
|
||||||
|
@ -1,4 +1,4 @@
|
|||||||
import React, { useState, useContext, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import styled from 'styled-components/macro';
|
import styled from 'styled-components/macro';
|
||||||
import GlobalTopNavbar from 'App/TopNavbar';
|
import GlobalTopNavbar from 'App/TopNavbar';
|
||||||
import Empty from 'shared/undraw/Empty';
|
import Empty from 'shared/undraw/Empty';
|
||||||
@ -10,16 +10,17 @@ import {
|
|||||||
GetProjectsQuery,
|
GetProjectsQuery,
|
||||||
} from 'shared/generated/graphql';
|
} from 'shared/generated/graphql';
|
||||||
|
|
||||||
import ProjectGridItem, { AddProjectItem } from 'shared/components/ProjectGridItem';
|
|
||||||
import { Link } from 'react-router-dom';
|
import { Link } from 'react-router-dom';
|
||||||
import NewProject from 'shared/components/NewProject';
|
import NewProject from 'shared/components/NewProject';
|
||||||
import UserContext, { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
|
import { PermissionLevel, PermissionObjectType, useCurrentUser } from 'App/context';
|
||||||
import Button from 'shared/components/Button';
|
import Button from 'shared/components/Button';
|
||||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||||
import { useForm } from 'react-hook-form';
|
import { useForm } from 'react-hook-form';
|
||||||
import Input from 'shared/components/Input';
|
import Input from 'shared/components/Input';
|
||||||
import updateApolloCache from 'shared/utils/cache';
|
import updateApolloCache from 'shared/utils/cache';
|
||||||
import produce from 'immer';
|
import produce from 'immer';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
|
||||||
const EmptyStateContent = styled.div`
|
const EmptyStateContent = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
justy-content: center;
|
justy-content: center;
|
||||||
@ -37,21 +38,26 @@ const EmptyStatePrompt = styled.span`
|
|||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const EmptyState = styled(Empty)`
|
const EmptyState = styled(Empty)`
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const CreateTeamButton = styled(Button)`
|
const CreateTeamButton = styled(Button)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type CreateTeamData = { teamName: string };
|
type CreateTeamData = { teamName: string };
|
||||||
|
|
||||||
type CreateTeamFormProps = {
|
type CreateTeamFormProps = {
|
||||||
onCreateTeam: (teamName: string) => void;
|
onCreateTeam: (teamName: string) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const CreateTeamFormContainer = styled.form``;
|
const CreateTeamFormContainer = styled.form``;
|
||||||
|
|
||||||
const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
|
const CreateTeamForm: React.FC<CreateTeamFormProps> = ({ onCreateTeam }) => {
|
||||||
const { register, handleSubmit, errors } = useForm<CreateTeamData>();
|
const { register, handleSubmit } = useForm<CreateTeamData>();
|
||||||
const createTeam = (data: CreateTeamData) => {
|
const createTeam = (data: CreateTeamData) => {
|
||||||
onCreateTeam(data.teamName);
|
onCreateTeam(data.teamName);
|
||||||
};
|
};
|
||||||
@ -186,6 +192,7 @@ const SectionActions = styled.div`
|
|||||||
const SectionAction = styled(Button)`
|
const SectionAction = styled(Button)`
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const SectionActionLink = styled(Link)`
|
const SectionActionLink = styled(Link)`
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
`;
|
`;
|
||||||
@ -201,12 +208,14 @@ const ProjectsContainer = styled.div`
|
|||||||
max-width: 825px;
|
max-width: 825px;
|
||||||
min-width: 288px;
|
min-width: 288px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const ProjectGrid = styled.div`
|
const ProjectGrid = styled.div`
|
||||||
max-width: 780px;
|
max-width: 780px;
|
||||||
display: grid;
|
display: grid;
|
||||||
grid-template-columns: 240px 240px 240px;
|
grid-template-columns: 240px 240px 240px;
|
||||||
gap: 20px 10px;
|
gap: 20px 10px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const AddTeamButton = styled(Button)`
|
const AddTeamButton = styled(Button)`
|
||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -217,13 +226,12 @@ const AddTeamButton = styled(Button)`
|
|||||||
const CreateFirstTeam = styled(Button)`
|
const CreateFirstTeam = styled(Button)`
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type ShowNewProject = {
|
type ShowNewProject = {
|
||||||
open: boolean;
|
open: boolean;
|
||||||
initialTeamID: null | string;
|
initialTeamID: null | string;
|
||||||
};
|
};
|
||||||
|
|
||||||
const ProjectLink = styled(Link)``;
|
|
||||||
|
|
||||||
const Projects = () => {
|
const Projects = () => {
|
||||||
const { showPopup, hidePopup } = usePopup();
|
const { showPopup, hidePopup } = usePopup();
|
||||||
const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
|
const { loading, data } = useGetProjectsQuery({ fetchPolicy: 'network-only' });
|
||||||
@ -241,7 +249,7 @@ const Projects = () => {
|
|||||||
});
|
});
|
||||||
|
|
||||||
const [showNewProject, setShowNewProject] = useState<ShowNewProject>({ open: false, initialTeamID: null });
|
const [showNewProject, setShowNewProject] = useState<ShowNewProject>({ open: false, initialTeamID: null });
|
||||||
const { user, setUser } = useCurrentUser();
|
const { user } = useCurrentUser();
|
||||||
const [createTeam] = useCreateTeamMutation({
|
const [createTeam] = useCreateTeamMutation({
|
||||||
update: (client, createData) => {
|
update: (client, createData) => {
|
||||||
updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
|
updateApolloCache<GetProjectsQuery>(client, GetProjectsDocument, cache =>
|
||||||
@ -267,7 +275,7 @@ const Projects = () => {
|
|||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
const textA = a.name.toUpperCase();
|
const textA = a.name.toUpperCase();
|
||||||
const textB = b.name.toUpperCase();
|
const textB = b.name.toUpperCase();
|
||||||
return textA < textB ? -1 : textA > textB ? 1 : 0;
|
return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
|
||||||
})
|
})
|
||||||
.map(team => {
|
.map(team => {
|
||||||
return {
|
return {
|
||||||
@ -278,13 +286,13 @@ const Projects = () => {
|
|||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
const textA = a.name.toUpperCase();
|
const textA = a.name.toUpperCase();
|
||||||
const textB = b.name.toUpperCase();
|
const textB = b.name.toUpperCase();
|
||||||
return textA < textB ? -1 : textA > textB ? 1 : 0;
|
return textA < textB ? -1 : textA > textB ? 1 : 0; // eslint-disable-line no-nested-ternary
|
||||||
}),
|
}),
|
||||||
};
|
};
|
||||||
});
|
});
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<GlobalTopNavbar onSaveProjectName={() => {}} projectID={null} name={null} />
|
<GlobalTopNavbar onSaveProjectName={NOOP} projectID={null} name={null} />
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<ProjectsContainer>
|
<ProjectsContainer>
|
||||||
{user.roles.org === 'admin' && (
|
{user.roles.org === 'admin' && (
|
||||||
|
@ -1,9 +1,9 @@
|
|||||||
import React, { useState, useContext } from 'react';
|
import React, { useState } from 'react';
|
||||||
import Input from 'shared/components/Input';
|
import Input from 'shared/components/Input';
|
||||||
import updateApolloCache from 'shared/utils/cache';
|
import updateApolloCache from 'shared/utils/cache';
|
||||||
import produce from 'immer';
|
import produce from 'immer';
|
||||||
import Button from 'shared/components/Button';
|
import Button from 'shared/components/Button';
|
||||||
import UserContext, { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
|
import { useCurrentUser, PermissionLevel, PermissionObjectType } from 'App/context';
|
||||||
import Select from 'shared/components/Select';
|
import Select from 'shared/components/Select';
|
||||||
import {
|
import {
|
||||||
useGetTeamQuery,
|
useGetTeamQuery,
|
||||||
@ -13,8 +13,6 @@ import {
|
|||||||
useUpdateTeamMemberRoleMutation,
|
useUpdateTeamMemberRoleMutation,
|
||||||
GetTeamQuery,
|
GetTeamQuery,
|
||||||
GetTeamDocument,
|
GetTeamDocument,
|
||||||
MeDocument,
|
|
||||||
MeQuery,
|
|
||||||
} from 'shared/generated/graphql';
|
} from 'shared/generated/graphql';
|
||||||
import { UserPlus, Checkmark } from 'shared/icons';
|
import { UserPlus, Checkmark } from 'shared/icons';
|
||||||
import styled, { css } from 'styled-components/macro';
|
import styled, { css } from 'styled-components/macro';
|
||||||
@ -22,6 +20,7 @@ import { usePopup, Popup } from 'shared/components/PopupMenu';
|
|||||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
import TaskAssignee from 'shared/components/TaskAssignee';
|
||||||
import Member from 'shared/components/Member';
|
import Member from 'shared/components/Member';
|
||||||
import ControlledInput from 'shared/components/ControlledInput';
|
import ControlledInput from 'shared/components/ControlledInput';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
|
||||||
const MemberListWrapper = styled.div`
|
const MemberListWrapper = styled.div`
|
||||||
flex: 1 1;
|
flex: 1 1;
|
||||||
@ -129,6 +128,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
|
|||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Content = styled.div`
|
export const Content = styled.div`
|
||||||
padding: 0 12px 12px;
|
padding: 0 12px 12px;
|
||||||
`;
|
`;
|
||||||
@ -160,6 +160,7 @@ export const RemoveMemberButton = styled(Button)`
|
|||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type TeamRoleManagerPopupProps = {
|
type TeamRoleManagerPopupProps = {
|
||||||
currentUserID: string;
|
currentUserID: string;
|
||||||
subject: User;
|
subject: User;
|
||||||
@ -253,7 +254,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
|
|||||||
{subject.role && subject.role.code === 'owner' && (
|
{subject.role && subject.role.code === 'owner' && (
|
||||||
<>
|
<>
|
||||||
<Separator />
|
<Separator />
|
||||||
<WarningText>You can't change roles because there must be an owner.</WarningText>
|
<WarningText>You can not change roles because there must be an owner.</WarningText>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</MiniProfileActions>
|
</MiniProfileActions>
|
||||||
@ -510,7 +511,7 @@ const Members: React.FC<MembersProps> = ({ teamID }) => {
|
|||||||
<MemberList>
|
<MemberList>
|
||||||
{data.findTeam.members.map(member => (
|
{data.findTeam.members.map(member => (
|
||||||
<MemberListItem>
|
<MemberListItem>
|
||||||
<MemberProfile showRoleIcons size={32} onMemberProfile={() => {}} member={member} />
|
<MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
|
||||||
<MemberListItemDetails>
|
<MemberListItemDetails>
|
||||||
<MemberItemName>{member.fullName}</MemberItemName>
|
<MemberItemName>{member.fullName}</MemberItemName>
|
||||||
<MemberItemUsername>{`@${member.username}`}</MemberItemUsername>
|
<MemberItemUsername>{`@${member.username}`}</MemberItemUsername>
|
||||||
|
@ -1,24 +1,22 @@
|
|||||||
import React, { useState, useContext, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import styled, { css } from 'styled-components/macro';
|
import styled from 'styled-components/macro';
|
||||||
import { MENU_TYPES } from 'shared/components/TopNavbar';
|
|
||||||
import GlobalTopNavbar from 'App/TopNavbar';
|
import GlobalTopNavbar from 'App/TopNavbar';
|
||||||
import updateApolloCache from 'shared/utils/cache';
|
import updateApolloCache from 'shared/utils/cache';
|
||||||
import { Route, Switch, useRouteMatch, Redirect } from 'react-router';
|
import { Route, Switch, useRouteMatch, Redirect, useParams, useHistory } from 'react-router';
|
||||||
import Members from './Members';
|
|
||||||
import Projects from './Projects';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
useGetTeamQuery,
|
useGetTeamQuery,
|
||||||
useDeleteTeamMutation,
|
useDeleteTeamMutation,
|
||||||
GetProjectsDocument,
|
GetProjectsDocument,
|
||||||
GetProjectsQuery,
|
GetProjectsQuery,
|
||||||
} from 'shared/generated/graphql';
|
} from 'shared/generated/graphql';
|
||||||
import { useParams, useHistory, useLocation } from 'react-router';
|
|
||||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||||
import { History } from 'history';
|
import { History } from 'history';
|
||||||
import produce from 'immer';
|
import produce from 'immer';
|
||||||
import { TeamSettings, DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
|
import { TeamSettings, DeleteConfirm, DELETE_INFO } from 'shared/components/ProjectSettings';
|
||||||
import UserContext, { PermissionObjectType, PermissionLevel, useCurrentUser } from 'App/context';
|
import { PermissionObjectType, PermissionLevel, useCurrentUser } from 'App/context';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
import Members from './Members';
|
||||||
|
import Projects from './Projects';
|
||||||
|
|
||||||
const OuterWrapper = styled.div`
|
const OuterWrapper = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -59,7 +57,7 @@ export const TeamPopup: React.FC<TeamPopupProps> = ({ history, name, teamID }) =
|
|||||||
<Popup title={null} tab={0}>
|
<Popup title={null} tab={0}>
|
||||||
<TeamSettings
|
<TeamSettings
|
||||||
onDeleteTeam={() => {
|
onDeleteTeam={() => {
|
||||||
setTab(1, 340);
|
setTab(1, { width: 340 });
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</Popup>
|
</Popup>
|
||||||
@ -117,7 +115,7 @@ const Teams = () => {
|
|||||||
setCurrentTab(tab);
|
setCurrentTab(tab);
|
||||||
}}
|
}}
|
||||||
popupContent={<TeamPopup history={history} name={data.findTeam.name} teamID={teamID} />}
|
popupContent={<TeamPopup history={history} name={data.findTeam.name} teamID={teamID} />}
|
||||||
onSaveProjectName={() => {}}
|
onSaveProjectName={NOOP}
|
||||||
projectID={null}
|
projectID={null}
|
||||||
name={data.findTeam.name}
|
name={data.findTeam.name}
|
||||||
/>
|
/>
|
||||||
|
@ -8,6 +8,7 @@ import { HttpLink } from 'apollo-link-http';
|
|||||||
import { onError } from 'apollo-link-error';
|
import { onError } from 'apollo-link-error';
|
||||||
import { enableMapSet } from 'immer';
|
import { enableMapSet } from 'immer';
|
||||||
import { ApolloLink, Observable, fromPromise } from 'apollo-link';
|
import { ApolloLink, Observable, fromPromise } from 'apollo-link';
|
||||||
|
import moment from 'moment';
|
||||||
import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
|
import { getAccessToken, getNewToken, setAccessToken } from 'shared/utils/accessToken';
|
||||||
import cache from './App/cache';
|
import cache from './App/cache';
|
||||||
import App from './App';
|
import App from './App';
|
||||||
@ -15,6 +16,13 @@ import App from './App';
|
|||||||
// https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
|
// https://able.bio/AnasT/apollo-graphql-async-access-token-refresh--470t1c8
|
||||||
enableMapSet();
|
enableMapSet();
|
||||||
|
|
||||||
|
moment.updateLocale('en', {
|
||||||
|
week: {
|
||||||
|
dow: 1, // First day of week is Monday
|
||||||
|
doy: 7, // First week of year must contain 1 January (7 + 1 - 1)
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
let forward$;
|
let forward$;
|
||||||
let isRefreshing = false;
|
let isRefreshing = false;
|
||||||
let pendingRequests: any = [];
|
let pendingRequests: any = [];
|
||||||
@ -81,7 +89,7 @@ const errorLink = onError(({ graphQLErrors, networkError, operation, forward })
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
if (networkError) {
|
if (networkError) {
|
||||||
console.log(`[Network error]: ${networkError}`);
|
console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
|
||||||
}
|
}
|
||||||
return undefined;
|
return undefined;
|
||||||
});
|
});
|
||||||
@ -122,12 +130,13 @@ const client = new ApolloClient({
|
|||||||
link: ApolloLink.from([
|
link: ApolloLink.from([
|
||||||
onError(({ graphQLErrors, networkError }) => {
|
onError(({ graphQLErrors, networkError }) => {
|
||||||
if (graphQLErrors) {
|
if (graphQLErrors) {
|
||||||
graphQLErrors.forEach(({ message, locations, path }) =>
|
graphQLErrors.forEach(
|
||||||
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`),
|
({ message, locations, path }) =>
|
||||||
|
console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`), // eslint-disable-line no-console
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
if (networkError) {
|
if (networkError) {
|
||||||
console.log(`[Network error]: ${networkError}`);
|
console.log(`[Network error]: ${networkError}`); // eslint-disable-line no-console
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
errorLink,
|
errorLink,
|
||||||
|
@ -16,11 +16,12 @@ import {
|
|||||||
} from './Styles';
|
} from './Styles';
|
||||||
|
|
||||||
type NameEditorProps = {
|
type NameEditorProps = {
|
||||||
|
buttonLabel?: string;
|
||||||
onSave: (listName: string) => void;
|
onSave: (listName: string) => void;
|
||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
|
export const NameEditor: React.FC<NameEditorProps> = ({ onSave: handleSave, onCancel, buttonLabel = 'Save' }) => {
|
||||||
const $editorRef = useRef<HTMLTextAreaElement>(null);
|
const $editorRef = useRef<HTMLTextAreaElement>(null);
|
||||||
const [listName, setListName] = useState('');
|
const [listName, setListName] = useState('');
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
@ -28,6 +29,11 @@ const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
|
|||||||
$editorRef.current.focus();
|
$editorRef.current.focus();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
const onSave = (newName: string) => {
|
||||||
|
if (newName.replace(/\s+/g, '') !== '') {
|
||||||
|
handleSave(newName);
|
||||||
|
}
|
||||||
|
};
|
||||||
const onKeyDown = (e: React.KeyboardEvent) => {
|
const onKeyDown = (e: React.KeyboardEvent) => {
|
||||||
if (e.key === 'Enter') {
|
if (e.key === 'Enter') {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
@ -60,7 +66,7 @@ const NameEditor: React.FC<NameEditorProps> = ({ onSave, onCancel }) => {
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
Save
|
{buttonLabel}
|
||||||
</AddListButton>
|
</AddListButton>
|
||||||
<CancelAdd onClick={() => onCancel()}>
|
<CancelAdd onClick={() => onCancel()}>
|
||||||
<Cross width={16} height={16} />
|
<Cross width={16} height={16} />
|
||||||
@ -98,7 +104,7 @@ const AddList: React.FC<AddListProps> = ({ onSave }) => {
|
|||||||
) : (
|
) : (
|
||||||
<Placeholder>
|
<Placeholder>
|
||||||
<AddIconWrapper>
|
<AddIconWrapper>
|
||||||
<Plus size={12} color="#c2c6dc" />
|
<Plus width={12} height={12} />
|
||||||
</AddIconWrapper>
|
</AddIconWrapper>
|
||||||
Add another list
|
Add another list
|
||||||
</Placeholder>
|
</Placeholder>
|
||||||
|
@ -1,10 +1,10 @@
|
|||||||
import React, { useRef } from 'react';
|
import React from 'react';
|
||||||
import Admin from '.';
|
|
||||||
import { theme } from 'App/ThemeStyles';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
import { ThemeProvider } from 'styled-components';
|
import { ThemeProvider } from 'styled-components';
|
||||||
import { action } from '@storybook/addon-actions';
|
import { action } from '@storybook/addon-actions';
|
||||||
|
import theme from 'App/ThemeStyles';
|
||||||
|
import NormalizeStyles from 'App/NormalizeStyles';
|
||||||
|
import BaseStyles from 'App/BaseStyles';
|
||||||
|
import Admin from '.';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
component: Admin,
|
component: Admin,
|
||||||
|
@ -1,15 +1,13 @@
|
|||||||
import React, { useState, useRef } from 'react';
|
import React, { useState, useRef } from 'react';
|
||||||
import { UserPlus, Checkmark } from 'shared/icons';
|
|
||||||
import styled, { css } from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
import TaskAssignee from 'shared/components/TaskAssignee';
|
||||||
import Select from 'shared/components/Select';
|
import Select from 'shared/components/Select';
|
||||||
import { User, Plus, Lock, Pencil, Trash } from 'shared/icons';
|
import { User, UserPlus, Checkmark } from 'shared/icons';
|
||||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||||
import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
|
import { RoleCode, useUpdateUserRoleMutation } from 'shared/generated/graphql';
|
||||||
import Input from 'shared/components/Input';
|
import Input from 'shared/components/Input';
|
||||||
import Member from 'shared/components/Member';
|
|
||||||
|
|
||||||
import Button from 'shared/components/Button';
|
import Button from 'shared/components/Button';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
|
||||||
export const RoleCheckmark = styled(Checkmark)`
|
export const RoleCheckmark = styled(Checkmark)`
|
||||||
padding-left: 4px;
|
padding-left: 4px;
|
||||||
@ -69,6 +67,7 @@ export const MiniProfileActionItem = styled.span<{ disabled?: boolean }>`
|
|||||||
}
|
}
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Content = styled.div`
|
export const Content = styled.div`
|
||||||
padding: 0 12px 12px;
|
padding: 0 12px 12px;
|
||||||
`;
|
`;
|
||||||
@ -100,6 +99,7 @@ export const RemoveMemberButton = styled(Button)`
|
|||||||
padding: 6px 12px;
|
padding: 6px 12px;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
type TeamRoleManagerPopupProps = {
|
type TeamRoleManagerPopupProps = {
|
||||||
user: User;
|
user: User;
|
||||||
users: Array<User>;
|
users: Array<User>;
|
||||||
@ -120,7 +120,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
|
|||||||
onChangeRole,
|
onChangeRole,
|
||||||
}) => {
|
}) => {
|
||||||
const { hidePopup, setTab } = usePopup();
|
const { hidePopup, setTab } = usePopup();
|
||||||
const [userPass, setUserPass] = useState({ pass: '', passConfirm: '' });
|
const [userPass] = useState({ pass: '', passConfirm: '' });
|
||||||
const [deleteUser, setDeleteUser] = useState<{ label: string; value: string } | null>(null);
|
const [deleteUser, setDeleteUser] = useState<{ label: string; value: string } | null>(null);
|
||||||
const hasOwned = user.owned.projects.length !== 0 || user.owned.teams.length !== 0;
|
const hasOwned = user.owned.projects.length !== 0 || user.owned.teams.length !== 0;
|
||||||
return (
|
return (
|
||||||
@ -195,7 +195,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
|
|||||||
{user.role && user.role.code === 'owner' && (
|
{user.role && user.role.code === 'owner' && (
|
||||||
<>
|
<>
|
||||||
<Separator />
|
<Separator />
|
||||||
<WarningText>You can't change roles because there must be an owner.</WarningText>
|
<WarningText>You can not change roles because there must be an owner.</WarningText>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</MiniProfileActions>
|
</MiniProfileActions>
|
||||||
@ -209,7 +209,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
|
|||||||
<>
|
<>
|
||||||
<DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
|
<DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
|
||||||
<DeleteDescription>
|
<DeleteDescription>
|
||||||
Choose a new user to take over ownership of this user's teams & projects.
|
Choose a new user to take over ownership of the users teams & projects.
|
||||||
</DeleteDescription>
|
</DeleteDescription>
|
||||||
<UserSelect
|
<UserSelect
|
||||||
onChange={v => setDeleteUser(v)}
|
onChange={v => setDeleteUser(v)}
|
||||||
@ -239,7 +239,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
|
|||||||
Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
|
Removing this user from the organzation will remove them from assigned tasks, projects, and teams.
|
||||||
</DeleteDescription>
|
</DeleteDescription>
|
||||||
<DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
|
<DeleteDescription>{`The user is the owner of ${user.owned.projects.length} projects & ${user.owned.teams.length} teams.`}</DeleteDescription>
|
||||||
<UserSelect onChange={() => {}} value={null} options={users.map(u => ({ label: u.fullName, value: u.id }))} />
|
<UserSelect onChange={NOOP} value={null} options={users.map(u => ({ label: u.fullName, value: u.id }))} />
|
||||||
<UserPassConfirmButton
|
<UserPassConfirmButton
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
// onDeleteUser();
|
// onDeleteUser();
|
||||||
@ -253,7 +253,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
|
|||||||
<Popup title="Reset password?" onClose={() => hidePopup()} tab={3}>
|
<Popup title="Reset password?" onClose={() => hidePopup()} tab={3}>
|
||||||
<Content>
|
<Content>
|
||||||
<DeleteDescription>
|
<DeleteDescription>
|
||||||
You can either set the user's new password directly or send the user an email allowing them to reset their
|
You can either set the users new password directly or send the user an email allowing them to reset their
|
||||||
own password.
|
own password.
|
||||||
</DeleteDescription>
|
</DeleteDescription>
|
||||||
<UserPassBar>
|
<UserPassBar>
|
||||||
@ -291,6 +291,7 @@ const TeamRoleManagerPopup: React.FC<TeamRoleManagerPopupProps> = ({
|
|||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const UserSelect = styled(Select)`
|
const UserSelect = styled(Select)`
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
padding: 8px 0;
|
padding: 8px 0;
|
||||||
@ -299,6 +300,7 @@ const UserSelect = styled(Select)`
|
|||||||
const NewUserPassInput = styled(Input)`
|
const NewUserPassInput = styled(Input)`
|
||||||
margin: 8px 0;
|
margin: 8px 0;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const InviteMemberButton = styled(Button)`
|
const InviteMemberButton = styled(Button)`
|
||||||
padding: 7px 12px;
|
padding: 7px 12px;
|
||||||
`;
|
`;
|
||||||
@ -307,6 +309,7 @@ const UserPassBar = styled.div`
|
|||||||
display: flex;
|
display: flex;
|
||||||
padding-top: 8px;
|
padding-top: 8px;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const UserPassConfirmButton = styled(Button)`
|
const UserPassConfirmButton = styled(Button)`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
padding: 7px 12px;
|
padding: 7px 12px;
|
||||||
@ -397,104 +400,6 @@ const MemberListWrapper = styled.div`
|
|||||||
flex: 1 1;
|
flex: 1 1;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Root = styled.div`
|
|
||||||
.ag-theme-material {
|
|
||||||
--ag-foreground-color: #c2c6dc;
|
|
||||||
--ag-secondary-foreground-color: #c2c6dc;
|
|
||||||
--ag-background-color: transparent;
|
|
||||||
--ag-header-background-color: transparent;
|
|
||||||
--ag-header-foreground-color: #c2c6dc;
|
|
||||||
--ag-border-color: #414561;
|
|
||||||
|
|
||||||
--ag-row-hover-color: #262c49;
|
|
||||||
--ag-header-cell-hover-background-color: #262c49;
|
|
||||||
--ag-checkbox-unchecked-color: #c2c6dc;
|
|
||||||
--ag-checkbox-indeterminate-color: rgba(115, 103, 240);
|
|
||||||
--ag-selected-row-background-color: #262c49;
|
|
||||||
--ag-material-primary-color: rgba(115, 103, 240);
|
|
||||||
--ag-material-accent-color: rgba(115, 103, 240);
|
|
||||||
}
|
|
||||||
.ag-theme-material ::-webkit-scrollbar {
|
|
||||||
width: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ag-theme-material ::-webkit-scrollbar-track {
|
|
||||||
background: #262c49;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ag-theme-material ::-webkit-scrollbar-thumb {
|
|
||||||
background: #7367f0;
|
|
||||||
border-radius: 20px;
|
|
||||||
}
|
|
||||||
.ag-header-cell-text {
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 700;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Header = styled.div`
|
|
||||||
border-bottom: 1px solid #e2e2e2;
|
|
||||||
flex-direction: row;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: flex;
|
|
||||||
white-space: nowrap;
|
|
||||||
width: 100%;
|
|
||||||
overflow: hidden;
|
|
||||||
background: transparent;
|
|
||||||
border-bottom-color: #414561;
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
height: 112px;
|
|
||||||
min-height: 112px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const EditUserIcon = styled(Pencil)``;
|
|
||||||
|
|
||||||
const LockUserIcon = styled(Lock)``;
|
|
||||||
|
|
||||||
const DeleteUserIcon = styled(Trash)``;
|
|
||||||
|
|
||||||
type ActionButtonProps = {
|
|
||||||
onClick: ($target: React.RefObject<HTMLElement>) => void;
|
|
||||||
};
|
|
||||||
|
|
||||||
const ActionButtonWrapper = styled.div`
|
|
||||||
margin-right: 8px;
|
|
||||||
cursor: pointer;
|
|
||||||
display: inline-flex;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const ActionButton: React.FC<ActionButtonProps> = ({ onClick, children }) => {
|
|
||||||
const $wrapper = useRef<HTMLDivElement>(null);
|
|
||||||
return (
|
|
||||||
<ActionButtonWrapper onClick={() => onClick($wrapper)} ref={$wrapper}>
|
|
||||||
{children}
|
|
||||||
</ActionButtonWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const ActionButtons = (params: any) => {
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<ActionButton onClick={() => {}}>
|
|
||||||
<EditUserIcon width={16} height={16} />
|
|
||||||
</ActionButton>
|
|
||||||
<ActionButton onClick={$target => params.onDeleteUser($target, params.value)}>
|
|
||||||
<DeleteUserIcon width={16} height={16} />
|
|
||||||
</ActionButton>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const Wrapper = styled.div`
|
|
||||||
background: #eff2f7;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Container = styled.div`
|
const Container = styled.div`
|
||||||
padding: 2.2rem;
|
padding: 2.2rem;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -525,6 +430,7 @@ const TabNavItem = styled.li`
|
|||||||
display: block;
|
display: block;
|
||||||
position: relative;
|
position: relative;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const TabNavItemButton = styled.button<{ active: boolean }>`
|
const TabNavItemButton = styled.button<{ active: boolean }>`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
@ -545,6 +451,10 @@ const TabNavItemButton = styled.button<{ active: boolean }>`
|
|||||||
fill: rgba(115, 103, 240);
|
fill: rgba(115, 103, 240);
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
const TabItemUser = styled(User)<{ active: boolean }>`
|
||||||
|
fill: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
|
||||||
|
stroke: ${props => (props.active ? 'rgba(115, 103, 240)' : '#c2c6dc')}
|
||||||
|
`;
|
||||||
|
|
||||||
const TabNavItemSpan = styled.span`
|
const TabNavItemSpan = styled.span`
|
||||||
text-align: left;
|
text-align: left;
|
||||||
@ -607,7 +517,7 @@ const NavItem: React.FC<NavItemProps> = ({ active, name, tab, onClick }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TabNavItemButton active={active}>
|
<TabNavItemButton active={active}>
|
||||||
<User size={14} color={active ? 'rgba(115, 103, 240)' : '#c2c6dc'} />
|
<TabItemUser width={14} height={14} active={active} />
|
||||||
<TabNavItemSpan>{name}</TabNavItemSpan>
|
<TabNavItemSpan>{name}</TabNavItemSpan>
|
||||||
</TabNavItemButton>
|
</TabNavItemButton>
|
||||||
</TabNavItem>
|
</TabNavItem>
|
||||||
@ -637,7 +547,7 @@ const Admin: React.FC<AdminProps> = ({
|
|||||||
'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
|
'You can’t leave because you are the only admin. To make another user an admin, click their avatar, select “Change permissions…”, and select “Admin”.';
|
||||||
const [currentTop, setTop] = useState(initialTab * 48);
|
const [currentTop, setTop] = useState(initialTab * 48);
|
||||||
const [currentTab, setTab] = useState(initialTab);
|
const [currentTab, setTab] = useState(initialTab);
|
||||||
const { showPopup, hidePopup } = usePopup();
|
const { showPopup } = usePopup();
|
||||||
const $tabNav = useRef<HTMLDivElement>(null);
|
const $tabNav = useRef<HTMLDivElement>(null);
|
||||||
|
|
||||||
const [updateUserRole] = useUpdateUserRoleMutation();
|
const [updateUserRole] = useUpdateUserRoleMutation();
|
||||||
@ -690,7 +600,7 @@ const Admin: React.FC<AdminProps> = ({
|
|||||||
const projectTotal = member.owned.projects.length + member.member.projects.length;
|
const projectTotal = member.owned.projects.length + member.member.projects.length;
|
||||||
return (
|
return (
|
||||||
<MemberListItem>
|
<MemberListItem>
|
||||||
<MemberProfile showRoleIcons size={32} onMemberProfile={() => {}} member={member} />
|
<MemberProfile showRoleIcons size={32} onMemberProfile={NOOP} member={member} />
|
||||||
<MemberListItemDetails>
|
<MemberListItemDetails>
|
||||||
<MemberItemName>{member.fullName}</MemberItemName>
|
<MemberItemName>{member.fullName}</MemberItemName>
|
||||||
<MemberItemUsername>{`@${member.username}`}</MemberItemUsername>
|
<MemberItemUsername>{`@${member.username}`}</MemberItemUsername>
|
||||||
|
@ -2,7 +2,7 @@ import React from 'react';
|
|||||||
import { action } from '@storybook/addon-actions';
|
import { action } from '@storybook/addon-actions';
|
||||||
import BaseStyles from 'App/BaseStyles';
|
import BaseStyles from 'App/BaseStyles';
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
import NormalizeStyles from 'App/NormalizeStyles';
|
||||||
import { theme } from 'App/ThemeStyles';
|
import theme from 'App/ThemeStyles';
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
import styled, { ThemeProvider } from 'styled-components';
|
||||||
import Button from '.';
|
import Button from '.';
|
||||||
|
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React, { useRef } from 'react';
|
import React, { useRef } from 'react';
|
||||||
import styled, { css } from 'styled-components/macro';
|
import styled, { css } from 'styled-components/macro';
|
||||||
|
|
||||||
const Text = styled.span<{ fontSize: string; justifyTextContent: string }>`
|
const Text = styled.span<{ fontSize: string; justifyTextContent: string; hasIcon?: boolean }>`
|
||||||
position: relative;
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
@ -9,6 +9,11 @@ const Text = styled.span<{ fontSize: string; justifyTextContent: string }>`
|
|||||||
transition: all 0.2s ease;
|
transition: all 0.2s ease;
|
||||||
font-size: ${props => props.fontSize};
|
font-size: ${props => props.fontSize};
|
||||||
color: rgba(${props => props.theme.colors.text.secondary});
|
color: rgba(${props => props.theme.colors.text.secondary});
|
||||||
|
${props =>
|
||||||
|
props.hasIcon &&
|
||||||
|
css`
|
||||||
|
padding-left: 4px;
|
||||||
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Base = styled.button<{ color: string; disabled: boolean }>`
|
const Base = styled.button<{ color: string; disabled: boolean }>`
|
||||||
@ -18,6 +23,8 @@ const Base = styled.button<{ color: string; disabled: boolean }>`
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
padding: 0.75rem 2rem;
|
padding: 0.75rem 2rem;
|
||||||
border-radius: ${props => props.theme.borderRadius.alternate};
|
border-radius: ${props => props.theme.borderRadius.alternate};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
${props =>
|
${props =>
|
||||||
props.disabled &&
|
props.disabled &&
|
||||||
@ -34,16 +41,28 @@ const Filled = styled(Base)`
|
|||||||
box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
|
box-shadow: 0 8px 25px -8px rgba(${props => props.theme.colors[props.color]});
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
const Outline = styled(Base)`
|
const Outline = styled(Base)<{ invert: boolean }>`
|
||||||
border: 1px solid rgba(${props => props.theme.colors[props.color]});
|
border: 1px solid rgba(${props => props.theme.colors[props.color]});
|
||||||
background: transparent;
|
background: transparent;
|
||||||
& ${Text} {
|
${props =>
|
||||||
color: rgba(${props => props.theme.colors[props.color]});
|
props.invert
|
||||||
}
|
? css`
|
||||||
|
background: rgba(${props.theme.colors[props.color]});
|
||||||
&:hover {
|
& ${Text} {
|
||||||
background: rgba(${props => props.theme.colors[props.color]}, 0.08);
|
color: rgba(${props.theme.colors.text.secondary});
|
||||||
}
|
}
|
||||||
|
&:hover {
|
||||||
|
background: rgba(${props.theme.colors[props.color]}, 0.8);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
& ${Text} {
|
||||||
|
color: rgba(${props.theme.colors[props.color]});
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: rgba(${props.theme.colors[props.color]}, 0.08);
|
||||||
|
}
|
||||||
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Flat = styled(Base)`
|
const Flat = styled(Base)`
|
||||||
@ -110,6 +129,8 @@ type ButtonProps = {
|
|||||||
color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
|
color?: 'primary' | 'danger' | 'success' | 'warning' | 'dark';
|
||||||
disabled?: boolean;
|
disabled?: boolean;
|
||||||
type?: 'button' | 'submit';
|
type?: 'button' | 'submit';
|
||||||
|
icon?: JSX.Element;
|
||||||
|
invert?: boolean;
|
||||||
className?: string;
|
className?: string;
|
||||||
onClick?: ($target: React.RefObject<HTMLButtonElement>) => void;
|
onClick?: ($target: React.RefObject<HTMLButtonElement>) => void;
|
||||||
justifyTextContent?: string;
|
justifyTextContent?: string;
|
||||||
@ -118,10 +139,12 @@ type ButtonProps = {
|
|||||||
const Button: React.FC<ButtonProps> = ({
|
const Button: React.FC<ButtonProps> = ({
|
||||||
disabled = false,
|
disabled = false,
|
||||||
fontSize = '14px',
|
fontSize = '14px',
|
||||||
|
invert = false,
|
||||||
color = 'primary',
|
color = 'primary',
|
||||||
variant = 'filled',
|
variant = 'filled',
|
||||||
type = 'button',
|
type = 'button',
|
||||||
justifyTextContent = 'center',
|
justifyTextContent = 'center',
|
||||||
|
icon,
|
||||||
onClick,
|
onClick,
|
||||||
className,
|
className,
|
||||||
children,
|
children,
|
||||||
@ -136,7 +159,8 @@ const Button: React.FC<ButtonProps> = ({
|
|||||||
case 'filled':
|
case 'filled':
|
||||||
return (
|
return (
|
||||||
<Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
|
<Filled ref={$button} type={type} onClick={handleClick} className={className} disabled={disabled} color={color}>
|
||||||
<Text justifyTextContent={justifyTextContent} fontSize={fontSize}>
|
{icon && icon}
|
||||||
|
<Text hasIcon={typeof icon !== 'undefined'} justifyTextContent={justifyTextContent} fontSize={fontSize}>
|
||||||
{children}
|
{children}
|
||||||
</Text>
|
</Text>
|
||||||
</Filled>
|
</Filled>
|
||||||
@ -145,6 +169,7 @@ const Button: React.FC<ButtonProps> = ({
|
|||||||
return (
|
return (
|
||||||
<Outline
|
<Outline
|
||||||
ref={$button}
|
ref={$button}
|
||||||
|
invert={invert}
|
||||||
type={type}
|
type={type}
|
||||||
onClick={handleClick}
|
onClick={handleClick}
|
||||||
className={className}
|
className={className}
|
||||||
|
@ -1,7 +1,7 @@
|
|||||||
import React, { useState, useRef, useEffect } from 'react';
|
import React, { useState, useRef, useEffect } from 'react';
|
||||||
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
|
||||||
import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
|
import { faPencilAlt, faList } from '@fortawesome/free-solid-svg-icons';
|
||||||
import { faClock, faCheckSquare, faEye } from '@fortawesome/free-regular-svg-icons';
|
import { faClock, faEye } from '@fortawesome/free-regular-svg-icons';
|
||||||
import {
|
import {
|
||||||
EditorTextarea,
|
EditorTextarea,
|
||||||
CardMember,
|
CardMember,
|
||||||
@ -24,7 +24,6 @@ import {
|
|||||||
CardTitle,
|
CardTitle,
|
||||||
CardMembers,
|
CardMembers,
|
||||||
} from './Styles';
|
} from './Styles';
|
||||||
import { CheckSquare } from 'shared/icons';
|
|
||||||
|
|
||||||
type DueDate = {
|
type DueDate = {
|
||||||
isPastDue: boolean;
|
isPastDue: boolean;
|
||||||
@ -209,7 +208,7 @@ const Card = React.forwardRef(
|
|||||||
) : (
|
) : (
|
||||||
<CardTitle>
|
<CardTitle>
|
||||||
{complete && <CompleteIcon width={16} height={16} />}
|
{complete && <CompleteIcon width={16} height={16} />}
|
||||||
{`${title}${position ? ' - ' + position : ''}`}
|
{`${title}${position ? ` - ${position}` : ''}`}
|
||||||
</CardTitle>
|
</CardTitle>
|
||||||
)}
|
)}
|
||||||
<ListCardBadges>
|
<ListCardBadges>
|
||||||
@ -236,9 +235,9 @@ const Card = React.forwardRef(
|
|||||||
width={8}
|
width={8}
|
||||||
height={8}
|
height={8}
|
||||||
/>
|
/>
|
||||||
<ListCardBadgeText
|
<ListCardBadgeText color={checklists.complete === checklists.total ? 'success' : 'normal'}>
|
||||||
color={checklists.complete === checklists.total ? 'success' : 'normal'}
|
{`${checklists.complete}/${checklists.total}`}
|
||||||
>{`${checklists.complete}/${checklists.total}`}</ListCardBadgeText>
|
</ListCardBadgeText>
|
||||||
</ListCardBadge>
|
</ListCardBadge>
|
||||||
)}
|
)}
|
||||||
</ListCardBadges>
|
</ListCardBadges>
|
||||||
|
@ -2,9 +2,10 @@ import React, { useState } from 'react';
|
|||||||
import { action } from '@storybook/addon-actions';
|
import { action } from '@storybook/addon-actions';
|
||||||
import BaseStyles from 'App/BaseStyles';
|
import BaseStyles from 'App/BaseStyles';
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
import NormalizeStyles from 'App/NormalizeStyles';
|
||||||
import { theme } from 'App/ThemeStyles';
|
import theme from 'App/ThemeStyles';
|
||||||
import produce from 'immer';
|
import produce from 'immer';
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
import styled, { ThemeProvider } from 'styled-components';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
import Checklist, { ChecklistItem } from '.';
|
import Checklist, { ChecklistItem } from '.';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -132,7 +133,7 @@ export const Default = () => {
|
|||||||
}}
|
}}
|
||||||
onToggleItem={onToggleItem}
|
onToggleItem={onToggleItem}
|
||||||
>
|
>
|
||||||
{items.map((item, idx) => (
|
{items.map(item => (
|
||||||
<ChecklistItem
|
<ChecklistItem
|
||||||
key={item.id}
|
key={item.id}
|
||||||
wrapperProps={{}}
|
wrapperProps={{}}
|
||||||
@ -141,9 +142,9 @@ export const Default = () => {
|
|||||||
itemID={item.id}
|
itemID={item.id}
|
||||||
name={item.name}
|
name={item.name}
|
||||||
complete={item.complete}
|
complete={item.complete}
|
||||||
onDeleteItem={() => {}}
|
onDeleteItem={NOOP}
|
||||||
onChangeName={() => {}}
|
onChangeName={NOOP}
|
||||||
onToggleItem={() => {}}
|
onToggleItem={NOOP}
|
||||||
/>
|
/>
|
||||||
))}
|
))}
|
||||||
</Checklist>
|
</Checklist>
|
||||||
|
@ -25,7 +25,7 @@ const WindowTitle = styled.div`
|
|||||||
|
|
||||||
const WindowTitleIcon = styled(CheckSquareOutline)`
|
const WindowTitleIcon = styled(CheckSquareOutline)`
|
||||||
top: 10px;
|
top: 10px;
|
||||||
left: -40px;
|
left: -32px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
71
frontend/src/shared/components/Chip/index.tsx
Normal file
71
frontend/src/shared/components/Chip/index.tsx
Normal file
@ -0,0 +1,71 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styled, { css } from 'styled-components';
|
||||||
|
import { Cross } from 'shared/icons';
|
||||||
|
|
||||||
|
const LabelText = styled.span`
|
||||||
|
margin-left: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary});
|
||||||
|
`;
|
||||||
|
|
||||||
|
const Container = styled.div<{ color?: string }>`
|
||||||
|
min-height: 26px;
|
||||||
|
min-width: 26px;
|
||||||
|
font-size: 0.8rem;
|
||||||
|
border-radius: 20px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
${props =>
|
||||||
|
props.color
|
||||||
|
? css`
|
||||||
|
background: ${props.color};
|
||||||
|
& ${LabelText} {
|
||||||
|
color: rgba(${props.theme.colors.text.secondary});
|
||||||
|
}
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
background: rgba(${props.theme.colors.bg.primary});
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const CloseButton = styled.button`
|
||||||
|
cursor: pointer;
|
||||||
|
width: 20px;
|
||||||
|
height: 20px;
|
||||||
|
border-radius: 50%;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0 4px;
|
||||||
|
background: rgba(0, 0, 0, 0.15);
|
||||||
|
&:hover {
|
||||||
|
background: rgba(0, 0, 0, 0.25);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
type ChipProps = {
|
||||||
|
label: string;
|
||||||
|
onClose?: () => void;
|
||||||
|
color?: string;
|
||||||
|
className?: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Chip: React.FC<ChipProps> = ({ label, onClose, color, className }) => {
|
||||||
|
return (
|
||||||
|
<Container className={className} color={color}>
|
||||||
|
<LabelText>{label}</LabelText>
|
||||||
|
{onClose && (
|
||||||
|
<CloseButton onClick={() => onClose()}>
|
||||||
|
<Cross width={12} height={12} />
|
||||||
|
</CloseButton>
|
||||||
|
)}
|
||||||
|
</Container>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Chip;
|
@ -1,11 +1,11 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import BaseStyles from 'App/BaseStyles';
|
import BaseStyles from 'App/BaseStyles';
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
import NormalizeStyles from 'App/NormalizeStyles';
|
||||||
import { theme } from 'App/ThemeStyles';
|
import theme from 'App/ThemeStyles';
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
import styled, { ThemeProvider } from 'styled-components';
|
||||||
|
import { User } from 'shared/icons';
|
||||||
|
|
||||||
import Input from '.';
|
import Input from '.';
|
||||||
import { User } from 'shared/icons';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
component: Input,
|
component: Input,
|
||||||
@ -35,7 +35,7 @@ export const Default = () => {
|
|||||||
<Wrapper>
|
<Wrapper>
|
||||||
<Input label="Label placeholder" />
|
<Input label="Label placeholder" />
|
||||||
<Input width="100%" placeholder="Placeholder" />
|
<Input width="100%" placeholder="Placeholder" />
|
||||||
<Input icon={<User size={20} />} width="100%" placeholder="Placeholder" />
|
<Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</>
|
</>
|
||||||
|
@ -18,7 +18,7 @@ const DropdownMenu: React.FC<DropdownMenuProps> = ({ left, top, onLogout, onClos
|
|||||||
<Container ref={$containerRef} left={left} top={top}>
|
<Container ref={$containerRef} left={left} top={top}>
|
||||||
<Wrapper>
|
<Wrapper>
|
||||||
<ActionItem onClick={onAdminConsole}>
|
<ActionItem onClick={onAdminConsole}>
|
||||||
<User size={16} color="#c2c6dc" />
|
<User width={16} height={16} />
|
||||||
<ActionTitle>Profile</ActionTitle>
|
<ActionTitle>Profile</ActionTitle>
|
||||||
</ActionItem>
|
</ActionItem>
|
||||||
<Separator />
|
<Separator />
|
||||||
@ -54,7 +54,7 @@ const ProfileMenu: React.FC<ProfileMenuProps> = ({ showAdminConsole, onAdminCons
|
|||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
<ActionItem onClick={onProfile}>
|
<ActionItem onClick={onProfile}>
|
||||||
<User size={16} color="#c2c6dc" />
|
<User width={16} height={16} />
|
||||||
<ActionTitle>Profile</ActionTitle>
|
<ActionTitle>Profile</ActionTitle>
|
||||||
</ActionItem>
|
</ActionItem>
|
||||||
<ActionsList>
|
<ActionsList>
|
||||||
|
@ -1,8 +1,8 @@
|
|||||||
import React, { useRef } from 'react';
|
import React from 'react';
|
||||||
import { action } from '@storybook/addon-actions';
|
import { action } from '@storybook/addon-actions';
|
||||||
import BaseStyles from 'App/BaseStyles';
|
import BaseStyles from 'App/BaseStyles';
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
import NormalizeStyles from 'App/NormalizeStyles';
|
||||||
import { theme } from 'App/ThemeStyles';
|
import theme from 'App/ThemeStyles';
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
import styled, { ThemeProvider } from 'styled-components';
|
||||||
import { Popup } from '../PopupMenu';
|
import { Popup } from '../PopupMenu';
|
||||||
import DueDateManager from '.';
|
import DueDateManager from '.';
|
||||||
|
@ -2,22 +2,13 @@ import React, { useState, useEffect, forwardRef } from 'react';
|
|||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import DatePicker from 'react-datepicker';
|
import DatePicker from 'react-datepicker';
|
||||||
import { Cross } from 'shared/icons';
|
|
||||||
import _ from 'lodash';
|
import _ from 'lodash';
|
||||||
|
|
||||||
import {
|
|
||||||
Wrapper,
|
|
||||||
ActionWrapper,
|
|
||||||
RemoveDueDate,
|
|
||||||
DueDateInput,
|
|
||||||
DueDatePickerWrapper,
|
|
||||||
ConfirmAddDueDate,
|
|
||||||
CancelDueDate,
|
|
||||||
} from './Styles';
|
|
||||||
|
|
||||||
import 'react-datepicker/dist/react-datepicker.css';
|
import 'react-datepicker/dist/react-datepicker.css';
|
||||||
import { getYear, getMonth } from 'date-fns';
|
import { getYear, getMonth } from 'date-fns';
|
||||||
import { useForm, Controller } from 'react-hook-form';
|
import { useForm, Controller } from 'react-hook-form';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
|
||||||
|
import { Wrapper, ActionWrapper, RemoveDueDate, DueDateInput, DueDatePickerWrapper, ConfirmAddDueDate } from './Styles';
|
||||||
|
|
||||||
type DueDateManagerProps = {
|
type DueDateManagerProps = {
|
||||||
task: Task;
|
task: Task;
|
||||||
@ -120,17 +111,13 @@ const HeaderActions = styled.div`
|
|||||||
|
|
||||||
const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
|
const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange, onRemoveDueDate, onCancel }) => {
|
||||||
const now = moment();
|
const now = moment();
|
||||||
const [textStartDate, setTextStartDate] = useState(now.format('YYYY-MM-DD'));
|
const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
|
||||||
const [startDate, setStartDate] = useState(new Date());
|
const [startDate, setStartDate] = useState(new Date());
|
||||||
useEffect(() => {
|
|
||||||
setTextStartDate(moment(startDate).format('YYYY-MM-DD'));
|
|
||||||
}, [startDate]);
|
|
||||||
|
|
||||||
const [textEndTime, setTextEndTime] = useState(now.format('h:mm A'));
|
|
||||||
const [endTime, setEndTime] = useState(now.toDate());
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setTextEndTime(moment(endTime).format('h:mm A'));
|
const newDate = moment(startDate).format('YYYY-MM-DD');
|
||||||
}, [endTime]);
|
setValue('endDate', newDate);
|
||||||
|
}, [startDate]);
|
||||||
|
|
||||||
const years = _.range(2010, getYear(new Date()) + 10, 1);
|
const years = _.range(2010, getYear(new Date()) + 10, 1);
|
||||||
const months = [
|
const months = [
|
||||||
@ -147,9 +134,8 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
'November',
|
'November',
|
||||||
'December',
|
'December',
|
||||||
];
|
];
|
||||||
const { register, handleSubmit, errors, setValue, setError, formState, control } = useForm<DueDateFormData>();
|
|
||||||
const saveDueDate = (data: any) => {
|
const saveDueDate = (data: any) => {
|
||||||
const newDate = moment(`${data.endDate} ${data.endTime}`, 'YYYY-MM-DD h:mm A');
|
const newDate = moment(`${data.endDate} ${moment(data.endTime).format('h:mm A')}`, 'YYYY-MM-DD h:mm A');
|
||||||
if (newDate.isValid()) {
|
if (newDate.isValid()) {
|
||||||
onDueDateChange(task, newDate.toDate());
|
onDueDateChange(task, newDate.toDate());
|
||||||
}
|
}
|
||||||
@ -158,11 +144,12 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
return (
|
return (
|
||||||
<DueDateInput
|
<DueDateInput
|
||||||
id="endTime"
|
id="endTime"
|
||||||
|
value={value}
|
||||||
name="endTime"
|
name="endTime"
|
||||||
ref={$ref}
|
ref={$ref}
|
||||||
width="100%"
|
width="100%"
|
||||||
variant="alternate"
|
variant="alternate"
|
||||||
label="Date"
|
label="Time"
|
||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
@ -177,7 +164,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
width="100%"
|
width="100%"
|
||||||
variant="alternate"
|
variant="alternate"
|
||||||
label="Date"
|
label="Date"
|
||||||
defaultValue={textStartDate}
|
defaultValue={now.format('YYYY-MM-DD')}
|
||||||
ref={register({
|
ref={register({
|
||||||
required: 'End date is required.',
|
required: 'End date is required.',
|
||||||
})}
|
})}
|
||||||
@ -186,6 +173,7 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
<FormField>
|
<FormField>
|
||||||
<Controller
|
<Controller
|
||||||
control={control}
|
control={control}
|
||||||
|
defaultValue={now.toDate()}
|
||||||
name="endTime"
|
name="endTime"
|
||||||
render={({ onChange, onBlur, value }) => (
|
render={({ onChange, onBlur, value }) => (
|
||||||
<DatePicker
|
<DatePicker
|
||||||
@ -220,7 +208,10 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
</HeaderButton>
|
</HeaderButton>
|
||||||
<HeaderSelectLabel>
|
<HeaderSelectLabel>
|
||||||
{months[date.getMonth()]}
|
{months[date.getMonth()]}
|
||||||
<HeaderSelect value={getYear(date)} onChange={({ target: { value } }) => changeYear(parseInt(value))}>
|
<HeaderSelect
|
||||||
|
value={getYear(date)}
|
||||||
|
onChange={({ target: { value } }) => changeYear(parseInt(value, 10))}
|
||||||
|
>
|
||||||
{years.map(option => (
|
{years.map(option => (
|
||||||
<option key={option} value={option}>
|
<option key={option} value={option}>
|
||||||
{option}
|
{option}
|
||||||
@ -250,12 +241,14 @@ const DueDateManager: React.FC<DueDateManagerProps> = ({ task, onDueDateChange,
|
|||||||
selected={startDate}
|
selected={startDate}
|
||||||
inline
|
inline
|
||||||
onChange={date => {
|
onChange={date => {
|
||||||
setStartDate(date ?? new Date());
|
if (date) {
|
||||||
|
setStartDate(date);
|
||||||
|
}
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</DueDatePickerWrapper>
|
</DueDatePickerWrapper>
|
||||||
<ActionWrapper>
|
<ActionWrapper>
|
||||||
<ConfirmAddDueDate type="submit" onClick={() => {}}>
|
<ConfirmAddDueDate type="submit" onClick={NOOP}>
|
||||||
Save
|
Save
|
||||||
</ConfirmAddDueDate>
|
</ConfirmAddDueDate>
|
||||||
<RemoveDueDate
|
<RemoveDueDate
|
||||||
|
@ -1,11 +1,11 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
import BaseStyles from 'App/BaseStyles';
|
import BaseStyles from 'App/BaseStyles';
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
import NormalizeStyles from 'App/NormalizeStyles';
|
||||||
import { theme } from 'App/ThemeStyles';
|
import theme from 'App/ThemeStyles';
|
||||||
import styled, { ThemeProvider } from 'styled-components';
|
import styled, { ThemeProvider } from 'styled-components';
|
||||||
|
import { User } from 'shared/icons';
|
||||||
|
|
||||||
import Input from '.';
|
import Input from '.';
|
||||||
import { User } from 'shared/icons';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
component: Input,
|
component: Input,
|
||||||
@ -35,7 +35,7 @@ export const Default = () => {
|
|||||||
<Wrapper>
|
<Wrapper>
|
||||||
<Input label="Label placeholder" />
|
<Input label="Label placeholder" />
|
||||||
<Input width="100%" placeholder="Placeholder" />
|
<Input width="100%" placeholder="Placeholder" />
|
||||||
<Input icon={<User size={20} />} width="100%" placeholder="Placeholder" />
|
<Input icon={<User width={20} height={20} />} width="100%" placeholder="Placeholder" />
|
||||||
</Wrapper>
|
</Wrapper>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</>
|
</>
|
||||||
|
@ -91,6 +91,7 @@ type InputProps = {
|
|||||||
name?: string;
|
name?: string;
|
||||||
className?: string;
|
className?: string;
|
||||||
defaultValue?: string;
|
defaultValue?: string;
|
||||||
|
value?: string;
|
||||||
onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
|
onClick?: (e: React.MouseEvent<HTMLInputElement>) => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -129,6 +130,7 @@ const Input = React.forwardRef(
|
|||||||
onClick,
|
onClick,
|
||||||
floatingLabel,
|
floatingLabel,
|
||||||
defaultValue,
|
defaultValue,
|
||||||
|
value,
|
||||||
id,
|
id,
|
||||||
}: InputProps,
|
}: InputProps,
|
||||||
$ref: any,
|
$ref: any,
|
||||||
@ -166,6 +168,7 @@ const Input = React.forwardRef(
|
|||||||
onClick={onClick}
|
onClick={onClick}
|
||||||
autoComplete={autocomplete ? 'on' : 'off'}
|
autoComplete={autocomplete ? 'on' : 'off'}
|
||||||
defaultValue={defaultValue}
|
defaultValue={defaultValue}
|
||||||
|
value={value}
|
||||||
hasIcon={typeof icon !== 'undefined'}
|
hasIcon={typeof icon !== 'undefined'}
|
||||||
width={width}
|
width={width}
|
||||||
placeholder={placeholder}
|
placeholder={placeholder}
|
||||||
|
@ -3,6 +3,7 @@ import { action } from '@storybook/addon-actions';
|
|||||||
import Card from 'shared/components/Card';
|
import Card from 'shared/components/Card';
|
||||||
import CardComposer from 'shared/components/CardComposer';
|
import CardComposer from 'shared/components/CardComposer';
|
||||||
import LabelColors from 'shared/constants/labelColors';
|
import LabelColors from 'shared/constants/labelColors';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
import List, { ListCards } from '.';
|
import List, { ListCards } from '.';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -60,7 +61,7 @@ export const Default = () => {
|
|||||||
onExtraMenuOpen={action('extra menu open')}
|
onExtraMenuOpen={action('extra menu open')}
|
||||||
>
|
>
|
||||||
<ListCards>
|
<ListCards>
|
||||||
<CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
|
<CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
|
||||||
</ListCards>
|
</ListCards>
|
||||||
</List>
|
</List>
|
||||||
);
|
);
|
||||||
@ -77,7 +78,7 @@ export const WithCardComposer = () => {
|
|||||||
onExtraMenuOpen={action('extra menu open')}
|
onExtraMenuOpen={action('extra menu open')}
|
||||||
>
|
>
|
||||||
<ListCards>
|
<ListCards>
|
||||||
<CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen />
|
<CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
|
||||||
</ListCards>
|
</ListCards>
|
||||||
</List>
|
</List>
|
||||||
);
|
);
|
||||||
@ -108,7 +109,7 @@ export const WithCard = () => {
|
|||||||
checklists={{ complete: 1, total: 4 }}
|
checklists={{ complete: 1, total: 4 }}
|
||||||
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
||||||
/>
|
/>
|
||||||
<CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
|
<CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
|
||||||
</ListCards>
|
</ListCards>
|
||||||
</List>
|
</List>
|
||||||
);
|
);
|
||||||
@ -138,7 +139,7 @@ export const WithCardAndComposer = () => {
|
|||||||
checklists={{ complete: 1, total: 4 }}
|
checklists={{ complete: 1, total: 4 }}
|
||||||
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
||||||
/>
|
/>
|
||||||
<CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen />
|
<CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen />
|
||||||
</ListCards>
|
</ListCards>
|
||||||
</List>
|
</List>
|
||||||
);
|
);
|
||||||
|
@ -102,7 +102,7 @@ const List = React.forwardRef(
|
|||||||
{children && children}
|
{children && children}
|
||||||
<AddCardContainer hidden={isComposerOpen}>
|
<AddCardContainer hidden={isComposerOpen}>
|
||||||
<AddCardButton onClick={() => onOpenComposer(id)}>
|
<AddCardButton onClick={() => onOpenComposer(id)}>
|
||||||
<Plus size={12} color="#c2c6dc" />
|
<Plus width={12} height={12} />
|
||||||
<AddCardButtonText>Add another card</AddCardButtonText>
|
<AddCardButtonText>Add another card</AddCardButtonText>
|
||||||
</AddCardButton>
|
</AddCardButton>
|
||||||
</AddCardContainer>
|
</AddCardContainer>
|
||||||
|
@ -1,18 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import ListActions from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: ListActions,
|
|
||||||
title: 'ListActions',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const Default = () => {
|
|
||||||
return <ListActions taskGroupID="1" onArchiveTaskGroup={action('on archive task group')} />;
|
|
||||||
};
|
|
@ -1,50 +1,100 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
||||||
|
import { NameEditor } from 'shared/components/AddList';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { TaskSorting, TaskSortingDirection, TaskSortingType } from 'shared/utils/sorting';
|
||||||
import { InnerContent, ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';
|
import { InnerContent, ListActionsWrapper, ListActionItemWrapper, ListActionItem, ListSeparator } from './Styles';
|
||||||
|
|
||||||
|
const CopyWrapper = styled.div`
|
||||||
|
margin: 0 12px;
|
||||||
|
`;
|
||||||
|
|
||||||
type Props = {
|
type Props = {
|
||||||
taskGroupID: string;
|
taskGroupID: string;
|
||||||
|
onDuplicateTaskGroup: (newTaskGroupName: string) => void;
|
||||||
|
onDeleteTaskGroupTasks: () => void;
|
||||||
onArchiveTaskGroup: (taskGroupID: string) => void;
|
onArchiveTaskGroup: (taskGroupID: string) => void;
|
||||||
|
onSortTaskGroup: (taskSorting: TaskSorting) => void;
|
||||||
};
|
};
|
||||||
const LabelManager: React.FC<Props> = ({ taskGroupID, onArchiveTaskGroup }) => {
|
|
||||||
|
const LabelManager: React.FC<Props> = ({
|
||||||
|
taskGroupID,
|
||||||
|
onDeleteTaskGroupTasks,
|
||||||
|
onDuplicateTaskGroup,
|
||||||
|
onArchiveTaskGroup,
|
||||||
|
onSortTaskGroup,
|
||||||
|
}) => {
|
||||||
|
const { setTab } = usePopup();
|
||||||
return (
|
return (
|
||||||
<InnerContent>
|
<>
|
||||||
<ListActionsWrapper>
|
<Popup tab={0} title={null}>
|
||||||
<ListActionItemWrapper>
|
<InnerContent>
|
||||||
<ListActionItem>Add card...</ListActionItem>
|
<ListActionsWrapper>
|
||||||
</ListActionItemWrapper>
|
<ListActionItemWrapper onClick={() => setTab(1)}>
|
||||||
<ListActionItemWrapper>
|
<ListActionItem>Duplicate</ListActionItem>
|
||||||
<ListActionItem>Copy List...</ListActionItem>
|
</ListActionItemWrapper>
|
||||||
</ListActionItemWrapper>
|
<ListActionItemWrapper onClick={() => setTab(2)}>
|
||||||
<ListActionItemWrapper>
|
<ListActionItem>Sort</ListActionItem>
|
||||||
<ListActionItem>Move card...</ListActionItem>
|
</ListActionItemWrapper>
|
||||||
</ListActionItemWrapper>
|
</ListActionsWrapper>
|
||||||
<ListActionItemWrapper>
|
<ListSeparator />
|
||||||
<ListActionItem>Watch</ListActionItem>
|
<ListActionsWrapper>
|
||||||
</ListActionItemWrapper>
|
<ListActionItemWrapper onClick={() => onDeleteTaskGroupTasks()}>
|
||||||
</ListActionsWrapper>
|
<ListActionItem>Delete All Tasks</ListActionItem>
|
||||||
<ListSeparator />
|
</ListActionItemWrapper>
|
||||||
<ListActionsWrapper>
|
</ListActionsWrapper>
|
||||||
<ListActionItemWrapper>
|
<ListSeparator />
|
||||||
<ListActionItem>Sort By...</ListActionItem>
|
<ListActionsWrapper>
|
||||||
</ListActionItemWrapper>
|
<ListActionItemWrapper onClick={() => onArchiveTaskGroup(taskGroupID)}>
|
||||||
</ListActionsWrapper>
|
<ListActionItem>Delete</ListActionItem>
|
||||||
<ListSeparator />
|
</ListActionItemWrapper>
|
||||||
<ListActionsWrapper>
|
</ListActionsWrapper>
|
||||||
<ListActionItemWrapper>
|
</InnerContent>
|
||||||
<ListActionItem>Move All Cards in This List...</ListActionItem>
|
</Popup>
|
||||||
</ListActionItemWrapper>
|
<Popup tab={1} title="Copy list" onClose={NOOP}>
|
||||||
<ListActionItemWrapper>
|
<CopyWrapper>
|
||||||
<ListActionItem>Archive All Cards in This List...</ListActionItem>
|
<NameEditor
|
||||||
</ListActionItemWrapper>
|
onCancel={NOOP}
|
||||||
</ListActionsWrapper>
|
onSave={listName => {
|
||||||
<ListSeparator />
|
onDuplicateTaskGroup(listName);
|
||||||
<ListActionsWrapper>
|
}}
|
||||||
<ListActionItemWrapper onClick={() => onArchiveTaskGroup(taskGroupID)}>
|
buttonLabel="Duplicate"
|
||||||
<ListActionItem>Archive This List</ListActionItem>
|
/>
|
||||||
</ListActionItemWrapper>
|
</CopyWrapper>
|
||||||
</ListActionsWrapper>
|
</Popup>
|
||||||
</InnerContent>
|
<Popup tab={2} title="Sort list" onClose={NOOP}>
|
||||||
|
<InnerContent>
|
||||||
|
<ListActionsWrapper>
|
||||||
|
<ListActionItemWrapper
|
||||||
|
onClick={() => onSortTaskGroup({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
|
||||||
|
>
|
||||||
|
<ListActionItem>Task title</ListActionItem>
|
||||||
|
</ListActionItemWrapper>
|
||||||
|
<ListActionItemWrapper
|
||||||
|
onClick={() => onSortTaskGroup({ type: TaskSortingType.TASK_TITLE, direction: TaskSortingDirection.ASC })}
|
||||||
|
>
|
||||||
|
<ListActionItem>Due date</ListActionItem>
|
||||||
|
</ListActionItemWrapper>
|
||||||
|
<ListActionItemWrapper
|
||||||
|
onClick={() => onSortTaskGroup({ type: TaskSortingType.COMPLETE, direction: TaskSortingDirection.ASC })}
|
||||||
|
>
|
||||||
|
<ListActionItem>Complete</ListActionItem>
|
||||||
|
</ListActionItemWrapper>
|
||||||
|
<ListActionItemWrapper
|
||||||
|
onClick={() => onSortTaskGroup({ type: TaskSortingType.LABELS, direction: TaskSortingDirection.ASC })}
|
||||||
|
>
|
||||||
|
<ListActionItem>Labels</ListActionItem>
|
||||||
|
</ListActionItemWrapper>
|
||||||
|
<ListActionItemWrapper
|
||||||
|
onClick={() => onSortTaskGroup({ type: TaskSortingType.MEMBERS, direction: TaskSortingDirection.ASC })}
|
||||||
|
>
|
||||||
|
<ListActionItem>Members</ListActionItem>
|
||||||
|
</ListActionItemWrapper>
|
||||||
|
</ListActionsWrapper>
|
||||||
|
</InnerContent>
|
||||||
|
</Popup>
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
export default LabelManager;
|
export default LabelManager;
|
||||||
|
@ -4,10 +4,8 @@ export const Container = styled.div`
|
|||||||
flex: 1;
|
flex: 1;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin-bottom: 8px;
|
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
padding-bottom: 8px;
|
|
||||||
|
|
||||||
::-webkit-scrollbar {
|
::-webkit-scrollbar {
|
||||||
height: 10px;
|
height: 10px;
|
||||||
@ -35,10 +33,9 @@ export const BoardWrapper = styled.div`
|
|||||||
|
|
||||||
user-select: none;
|
user-select: none;
|
||||||
white-space: nowrap;
|
white-space: nowrap;
|
||||||
margin-bottom: 8px;
|
|
||||||
overflow-x: auto;
|
overflow-x: auto;
|
||||||
overflow-y: hidden;
|
overflow-y: hidden;
|
||||||
padding-bottom: 8px;
|
padding-bottom: 4px;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: 0;
|
top: 0;
|
||||||
right: 0;
|
right: 0;
|
||||||
|
@ -11,8 +11,131 @@ import {
|
|||||||
getAfterDropDraggableList,
|
getAfterDropDraggableList,
|
||||||
} from 'shared/utils/draggables';
|
} from 'shared/utils/draggables';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import { TaskSorting, TaskSortingType, TaskSortingDirection, sortTasks } from 'shared/utils/sorting';
|
||||||
|
|
||||||
import { Container, BoardContainer, BoardWrapper } from './Styles';
|
import { Container, BoardContainer, BoardWrapper } from './Styles';
|
||||||
|
import shouldMetaFilter from './metaFilter';
|
||||||
|
|
||||||
|
export enum TaskMeta {
|
||||||
|
NONE,
|
||||||
|
TITLE,
|
||||||
|
MEMBER,
|
||||||
|
LABEL,
|
||||||
|
DUE_DATE,
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum TaskMetaMatch {
|
||||||
|
MATCH_ANY,
|
||||||
|
MATCH_ALL,
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum TaskStatus {
|
||||||
|
ALL,
|
||||||
|
COMPLETE,
|
||||||
|
INCOMPLETE,
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum TaskSince {
|
||||||
|
ALL,
|
||||||
|
TODAY,
|
||||||
|
YESTERDAY,
|
||||||
|
ONE_WEEK,
|
||||||
|
TWO_WEEKS,
|
||||||
|
THREE_WEEKS,
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TaskStatusFilter = {
|
||||||
|
status: TaskStatus;
|
||||||
|
since: TaskSince;
|
||||||
|
};
|
||||||
|
|
||||||
|
export interface TaskMetaFilterName {
|
||||||
|
meta: TaskMeta;
|
||||||
|
value?: string | moment.Moment | null;
|
||||||
|
id?: string | null;
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TaskNameMetaFilter = {
|
||||||
|
name: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export enum DueDateFilterType {
|
||||||
|
TODAY,
|
||||||
|
TOMORROW,
|
||||||
|
THIS_WEEK,
|
||||||
|
NEXT_WEEK,
|
||||||
|
ONE_WEEK,
|
||||||
|
TWO_WEEKS,
|
||||||
|
THREE_WEEKS,
|
||||||
|
OVERDUE,
|
||||||
|
NO_DUE_DATE,
|
||||||
|
}
|
||||||
|
|
||||||
|
export type DueDateMetaFilter = {
|
||||||
|
type: DueDateFilterType;
|
||||||
|
label: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type MemberMetaFilter = {
|
||||||
|
id: string;
|
||||||
|
username: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type LabelMetaFilter = {
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
color: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type TaskMetaFilters = {
|
||||||
|
match: TaskMetaMatch;
|
||||||
|
dueDate: DueDateMetaFilter | null;
|
||||||
|
taskName: TaskNameMetaFilter | null;
|
||||||
|
members: Array<MemberMetaFilter>;
|
||||||
|
labels: Array<LabelMetaFilter>;
|
||||||
|
};
|
||||||
|
|
||||||
|
function shouldStatusFilter(task: Task, filter: TaskStatusFilter) {
|
||||||
|
if (filter.status === TaskStatus.ALL) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (filter.status === TaskStatus.INCOMPLETE && task.complete === false) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (filter.status === TaskStatus.COMPLETE && task.completedAt && task.complete === true) {
|
||||||
|
const completedAt = moment(task.completedAt);
|
||||||
|
const REFERENCE = moment(); // fixed just for testing, use moment();
|
||||||
|
switch (filter.since) {
|
||||||
|
case TaskSince.TODAY:
|
||||||
|
const TODAY = REFERENCE.clone().startOf('day');
|
||||||
|
return completedAt.isSame(TODAY, 'd');
|
||||||
|
case TaskSince.YESTERDAY:
|
||||||
|
const YESTERDAY = REFERENCE.clone()
|
||||||
|
.subtract(1, 'days')
|
||||||
|
.startOf('day');
|
||||||
|
return completedAt.isSameOrAfter(YESTERDAY, 'd');
|
||||||
|
case TaskSince.ONE_WEEK:
|
||||||
|
const ONE_WEEK = REFERENCE.clone()
|
||||||
|
.subtract(7, 'days')
|
||||||
|
.startOf('day');
|
||||||
|
return completedAt.isSameOrAfter(ONE_WEEK, 'd');
|
||||||
|
case TaskSince.TWO_WEEKS:
|
||||||
|
const TWO_WEEKS = REFERENCE.clone()
|
||||||
|
.subtract(14, 'days')
|
||||||
|
.startOf('day');
|
||||||
|
return completedAt.isSameOrAfter(TWO_WEEKS, 'd');
|
||||||
|
case TaskSince.THREE_WEEKS:
|
||||||
|
const THREE_WEEKS = REFERENCE.clone()
|
||||||
|
.subtract(21, 'days')
|
||||||
|
.startOf('day');
|
||||||
|
return completedAt.isSameOrAfter(THREE_WEEKS, 'd');
|
||||||
|
default:
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
interface SimpleProps {
|
interface SimpleProps {
|
||||||
taskGroups: Array<TaskGroup>;
|
taskGroups: Array<TaskGroup>;
|
||||||
@ -28,8 +151,29 @@ interface SimpleProps {
|
|||||||
onCardMemberClick: OnCardMemberClick;
|
onCardMemberClick: OnCardMemberClick;
|
||||||
onCardLabelClick: () => void;
|
onCardLabelClick: () => void;
|
||||||
cardLabelVariant: CardLabelVariant;
|
cardLabelVariant: CardLabelVariant;
|
||||||
|
taskStatusFilter?: TaskStatusFilter;
|
||||||
|
taskMetaFilters?: TaskMetaFilters;
|
||||||
|
taskSorting?: TaskSorting;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
const initTaskStatusFilter: TaskStatusFilter = {
|
||||||
|
status: TaskStatus.ALL,
|
||||||
|
since: TaskSince.ALL,
|
||||||
|
};
|
||||||
|
|
||||||
|
const initTaskMetaFilters: TaskMetaFilters = {
|
||||||
|
match: TaskMetaMatch.MATCH_ANY,
|
||||||
|
dueDate: null,
|
||||||
|
taskName: null,
|
||||||
|
labels: [],
|
||||||
|
members: [],
|
||||||
|
};
|
||||||
|
|
||||||
|
const initTaskSorting: TaskSorting = {
|
||||||
|
type: TaskSortingType.NONE,
|
||||||
|
direction: TaskSortingDirection.ASC,
|
||||||
|
};
|
||||||
|
|
||||||
const SimpleLists: React.FC<SimpleProps> = ({
|
const SimpleLists: React.FC<SimpleProps> = ({
|
||||||
taskGroups,
|
taskGroups,
|
||||||
onTaskDrop,
|
onTaskDrop,
|
||||||
@ -43,6 +187,9 @@ const SimpleLists: React.FC<SimpleProps> = ({
|
|||||||
cardLabelVariant,
|
cardLabelVariant,
|
||||||
onExtraMenuOpen,
|
onExtraMenuOpen,
|
||||||
onCardMemberClick,
|
onCardMemberClick,
|
||||||
|
taskStatusFilter = initTaskStatusFilter,
|
||||||
|
taskMetaFilters = initTaskMetaFilters,
|
||||||
|
taskSorting = initTaskSorting,
|
||||||
}) => {
|
}) => {
|
||||||
const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
|
const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
|
||||||
if (typeof destination === 'undefined') return;
|
if (typeof destination === 'undefined') return;
|
||||||
@ -81,7 +228,7 @@ const SimpleLists: React.FC<SimpleProps> = ({
|
|||||||
position: newPosition,
|
position: newPosition,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
throw { error: 'task group can not be found' };
|
throw new Error('task group can not be found');
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
const curTaskGroup = taskGroups.findIndex(
|
const curTaskGroup = taskGroups.findIndex(
|
||||||
@ -164,10 +311,18 @@ const SimpleLists: React.FC<SimpleProps> = ({
|
|||||||
<ListCards ref={columnDropProvided.innerRef} {...columnDropProvided.droppableProps}>
|
<ListCards ref={columnDropProvided.innerRef} {...columnDropProvided.droppableProps}>
|
||||||
{taskGroup.tasks
|
{taskGroup.tasks
|
||||||
.slice()
|
.slice()
|
||||||
|
.filter(t => shouldStatusFilter(t, taskStatusFilter))
|
||||||
|
.filter(t => shouldMetaFilter(t, taskMetaFilters))
|
||||||
.sort((a: any, b: any) => a.position - b.position)
|
.sort((a: any, b: any) => a.position - b.position)
|
||||||
|
.sort((a: any, b: any) => sortTasks(a, b, taskSorting))
|
||||||
.map((task: Task, taskIndex: any) => {
|
.map((task: Task, taskIndex: any) => {
|
||||||
return (
|
return (
|
||||||
<Draggable key={task.id} draggableId={task.id} index={taskIndex}>
|
<Draggable
|
||||||
|
key={task.id}
|
||||||
|
draggableId={task.id}
|
||||||
|
index={taskIndex}
|
||||||
|
isDragDisabled={taskSorting.type !== TaskSortingType.NONE}
|
||||||
|
>
|
||||||
{taskProvided => {
|
{taskProvided => {
|
||||||
return (
|
return (
|
||||||
<Card
|
<Card
|
||||||
|
132
frontend/src/shared/components/Lists/metaFilter.ts
Normal file
132
frontend/src/shared/components/Lists/metaFilter.ts
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
import { TaskMetaFilters, DueDateFilterType } from 'shared/components/Lists';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
enum ShouldFilter {
|
||||||
|
NO_FILTER,
|
||||||
|
VALID,
|
||||||
|
NOT_VALID,
|
||||||
|
}
|
||||||
|
|
||||||
|
function shouldFilter(cond: boolean) {
|
||||||
|
return cond ? ShouldFilter.VALID : ShouldFilter.NOT_VALID;
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function shouldMetaFilter(task: Task, filters: TaskMetaFilters) {
|
||||||
|
let isFiltered = ShouldFilter.NO_FILTER;
|
||||||
|
if (filters.taskName) {
|
||||||
|
isFiltered = shouldFilter(task.name.toLowerCase().startsWith(filters.taskName.name.toLowerCase()));
|
||||||
|
}
|
||||||
|
if (filters.dueDate) {
|
||||||
|
if (isFiltered === ShouldFilter.NO_FILTER) {
|
||||||
|
isFiltered = ShouldFilter.NOT_VALID;
|
||||||
|
}
|
||||||
|
if (filters.dueDate.type === DueDateFilterType.NO_DUE_DATE) {
|
||||||
|
isFiltered = shouldFilter(!(task.dueDate && task.dueDate !== null));
|
||||||
|
}
|
||||||
|
if (task.dueDate) {
|
||||||
|
const taskDueDate = moment(task.dueDate);
|
||||||
|
const today = moment();
|
||||||
|
let start;
|
||||||
|
let end;
|
||||||
|
switch (filters.dueDate.type) {
|
||||||
|
case DueDateFilterType.OVERDUE:
|
||||||
|
isFiltered = shouldFilter(taskDueDate.isBefore(today));
|
||||||
|
break;
|
||||||
|
case DueDateFilterType.TODAY:
|
||||||
|
isFiltered = shouldFilter(taskDueDate.isSame(today, 'day'));
|
||||||
|
break;
|
||||||
|
case DueDateFilterType.TOMORROW:
|
||||||
|
isFiltered = shouldFilter(
|
||||||
|
taskDueDate.isBefore(
|
||||||
|
today
|
||||||
|
.clone()
|
||||||
|
.add(1, 'days')
|
||||||
|
.endOf('day'),
|
||||||
|
),
|
||||||
|
);
|
||||||
|
break;
|
||||||
|
case DueDateFilterType.THIS_WEEK:
|
||||||
|
start = today
|
||||||
|
.clone()
|
||||||
|
.weekday(0)
|
||||||
|
.startOf('day');
|
||||||
|
end = today
|
||||||
|
.clone()
|
||||||
|
.weekday(6)
|
||||||
|
.endOf('day');
|
||||||
|
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
|
||||||
|
break;
|
||||||
|
case DueDateFilterType.NEXT_WEEK:
|
||||||
|
start = today
|
||||||
|
.clone()
|
||||||
|
.weekday(0)
|
||||||
|
.add(7, 'days')
|
||||||
|
.startOf('day');
|
||||||
|
end = today
|
||||||
|
.clone()
|
||||||
|
.weekday(6)
|
||||||
|
.add(7, 'days')
|
||||||
|
.endOf('day');
|
||||||
|
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
|
||||||
|
break;
|
||||||
|
case DueDateFilterType.ONE_WEEK:
|
||||||
|
start = today.clone().startOf('day');
|
||||||
|
end = today
|
||||||
|
.clone()
|
||||||
|
.add(7, 'days')
|
||||||
|
.endOf('day');
|
||||||
|
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
|
||||||
|
break;
|
||||||
|
case DueDateFilterType.TWO_WEEKS:
|
||||||
|
start = today.clone().startOf('day');
|
||||||
|
end = today
|
||||||
|
.clone()
|
||||||
|
.add(14, 'days')
|
||||||
|
.endOf('day');
|
||||||
|
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
|
||||||
|
break;
|
||||||
|
case DueDateFilterType.THREE_WEEKS:
|
||||||
|
start = today.clone().startOf('day');
|
||||||
|
end = today
|
||||||
|
.clone()
|
||||||
|
.add(21, 'days')
|
||||||
|
.endOf('day');
|
||||||
|
isFiltered = shouldFilter(taskDueDate.isBetween(start, end));
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
isFiltered = ShouldFilter.NOT_VALID;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (filters.members.length !== 0) {
|
||||||
|
if (isFiltered === ShouldFilter.NO_FILTER) {
|
||||||
|
isFiltered = ShouldFilter.NOT_VALID;
|
||||||
|
}
|
||||||
|
for (const member of filters.members) {
|
||||||
|
if (task.assigned) {
|
||||||
|
if (task.assigned.findIndex(m => m.id === member.id) !== -1) {
|
||||||
|
isFiltered = ShouldFilter.VALID;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (filters.labels.length !== 0) {
|
||||||
|
if (isFiltered === ShouldFilter.NO_FILTER) {
|
||||||
|
isFiltered = ShouldFilter.NOT_VALID;
|
||||||
|
}
|
||||||
|
for (const label of filters.labels) {
|
||||||
|
if (task.labels) {
|
||||||
|
if (task.labels.findIndex(m => m.projectLabel.id === label.id) !== -1) {
|
||||||
|
isFiltered = ShouldFilter.VALID;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (isFiltered === ShouldFilter.NO_FILTER) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
if (isFiltered === ShouldFilter.VALID) {
|
||||||
|
return true;
|
||||||
|
}
|
||||||
|
return false;
|
||||||
|
}
|
@ -53,7 +53,7 @@ const Login = ({ onSubmit }: LoginProps) => {
|
|||||||
ref={register({ required: 'Username is required' })}
|
ref={register({ required: 'Username is required' })}
|
||||||
/>
|
/>
|
||||||
<FormIcon>
|
<FormIcon>
|
||||||
<User color="#c2c6dc" size={20} />
|
<User width={20} height={20} />
|
||||||
</FormIcon>
|
</FormIcon>
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||||
|
@ -2,6 +2,7 @@ import React, { useRef } from 'react';
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
import TaskAssignee from 'shared/components/TaskAssignee';
|
||||||
import { Checkmark } from 'shared/icons';
|
import { Checkmark } from 'shared/icons';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
|
||||||
const CardCheckmark = styled(Checkmark)`
|
const CardCheckmark = styled(Checkmark)`
|
||||||
position: absolute;
|
position: absolute;
|
||||||
@ -43,6 +44,7 @@ type MemberProps = {
|
|||||||
showName?: boolean;
|
showName?: boolean;
|
||||||
className?: string;
|
className?: string;
|
||||||
showCheckmark?: boolean;
|
showCheckmark?: boolean;
|
||||||
|
size?: number;
|
||||||
};
|
};
|
||||||
|
|
||||||
const CardMemberWrapper = styled.div<{ ref: any }>`
|
const CardMemberWrapper = styled.div<{ ref: any }>`
|
||||||
@ -62,6 +64,7 @@ const Member: React.FC<MemberProps> = ({
|
|||||||
showName,
|
showName,
|
||||||
showCheckmark = false,
|
showCheckmark = false,
|
||||||
className,
|
className,
|
||||||
|
size = 28,
|
||||||
}) => {
|
}) => {
|
||||||
const $targetRef = useRef<HTMLDivElement>();
|
const $targetRef = useRef<HTMLDivElement>();
|
||||||
return (
|
return (
|
||||||
@ -76,7 +79,7 @@ const Member: React.FC<MemberProps> = ({
|
|||||||
}
|
}
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TaskAssignee onMemberProfile={() => {}} size={28} member={member} />
|
<TaskAssignee onMemberProfile={NOOP} size={32} member={member} />
|
||||||
{showName && <CardMemberName>{member.fullName}</CardMemberName>}
|
{showName && <CardMemberName>{member.fullName}</CardMemberName>}
|
||||||
{showCheckmark && <CardCheckmark width={12} height={12} />}
|
{showCheckmark && <CardCheckmark width={12} height={12} />}
|
||||||
</CardMemberWrapper>
|
</CardMemberWrapper>
|
||||||
|
@ -1,5 +1,6 @@
|
|||||||
import React, { useState } from 'react';
|
import React, { useState } from 'react';
|
||||||
|
import { Checkmark } from 'shared/icons';
|
||||||
|
import Member from 'shared/components/Member';
|
||||||
import {
|
import {
|
||||||
MemberName,
|
MemberName,
|
||||||
ProfileIcon,
|
ProfileIcon,
|
||||||
@ -12,8 +13,6 @@ import {
|
|||||||
BoardMemberListItemContent,
|
BoardMemberListItemContent,
|
||||||
ActiveIconWrapper,
|
ActiveIconWrapper,
|
||||||
} from './Styles';
|
} from './Styles';
|
||||||
import { Checkmark } from 'shared/icons';
|
|
||||||
import Member from 'shared/components/Member';
|
|
||||||
|
|
||||||
type MemberManagerProps = {
|
type MemberManagerProps = {
|
||||||
availableMembers: Array<TaskUser>;
|
availableMembers: Array<TaskUser>;
|
||||||
|
@ -160,7 +160,7 @@ const MiniProfile: React.FC<MiniProfileProps> = ({
|
|||||||
{user.role && user.role.code === 'owner' && (
|
{user.role && user.role.code === 'owner' && (
|
||||||
<>
|
<>
|
||||||
<Separator />
|
<Separator />
|
||||||
<WarningText>You can't change roles because there must be an owner.</WarningText>
|
<WarningText>You can not change roles because there must be an owner.</WarningText>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</MiniProfileActions>
|
</MiniProfileActions>
|
||||||
|
@ -15,18 +15,20 @@ export const ScrollOverlay = styled.div`
|
|||||||
export const ClickableOverlay = styled.div`
|
export const ClickableOverlay = styled.div`
|
||||||
min-height: 100%;
|
min-height: 100%;
|
||||||
background: rgba(0, 0, 0, 0.4);
|
background: rgba(0, 0, 0, 0.4);
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const StyledModal = styled.div<{ width: number }>`
|
export const StyledModal = styled.div<{ width: number; height: number }>`
|
||||||
display: inline-block;
|
|
||||||
position: relative;
|
position: relative;
|
||||||
margin: 48px 0 80px;
|
width: ${props => props.width}px;
|
||||||
width: 100%;
|
height: ${props => props.height}px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
top: 48px;
|
||||||
|
bottom: 16px;
|
||||||
|
margin: auto;
|
||||||
|
|
||||||
background: #262c49;
|
background: #262c49;
|
||||||
max-width: ${props => props.width}px;
|
|
||||||
vertical-align: middle;
|
vertical-align: middle;
|
||||||
border-radius: 3px;
|
border-radius: 6px;
|
||||||
${mixin.boxShadowMedium}
|
${mixin.boxShadowMedium}
|
||||||
`;
|
`;
|
||||||
|
@ -1,9 +1,10 @@
|
|||||||
import React, { useRef } from 'react';
|
import React, { useRef, useEffect, useState } from 'react';
|
||||||
import ReactDOM from 'react-dom';
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
||||||
import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
|
import useOnEscapeKeyDown from 'shared/hooks/onEscapeKeyDown';
|
||||||
|
import useWindowSize from 'shared/hooks/useWindowSize';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import { Cross } from 'shared/icons';
|
||||||
import { ScrollOverlay, ClickableOverlay, StyledModal } from './Styles';
|
import { ScrollOverlay, ClickableOverlay, StyledModal } from './Styles';
|
||||||
|
|
||||||
const $root: HTMLElement = document.getElementById('root')!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
|
const $root: HTMLElement = document.getElementById('root')!; // eslint-disable-line @typescript-eslint/no-non-null-assertion
|
||||||
@ -14,21 +15,50 @@ type ModalProps = {
|
|||||||
renderContent: () => JSX.Element;
|
renderContent: () => JSX.Element;
|
||||||
};
|
};
|
||||||
|
|
||||||
const Modal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
|
function getAdjustedHeight(height: number) {
|
||||||
|
if (height >= 900) {
|
||||||
|
return height - 150;
|
||||||
|
}
|
||||||
|
if (height >= 800) {
|
||||||
|
return height - 125;
|
||||||
|
}
|
||||||
|
return height - 70;
|
||||||
|
}
|
||||||
|
|
||||||
|
const CloseIcon = styled(Cross)`
|
||||||
|
position: absolute;
|
||||||
|
top: 16px;
|
||||||
|
right: -32px;
|
||||||
|
cursor: pointer;
|
||||||
|
fill: rgba(${props => props.theme.colors.text.primary});
|
||||||
|
&:hover {
|
||||||
|
fill: rgba(${props => props.theme.colors.text.secondary});
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
const InnerModal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
|
||||||
const $modalRef = useRef<HTMLDivElement>(null);
|
const $modalRef = useRef<HTMLDivElement>(null);
|
||||||
const $clickableOverlayRef = useRef<HTMLDivElement>(null);
|
const $clickableOverlayRef = useRef<HTMLDivElement>(null);
|
||||||
|
const [_width, height] = useWindowSize();
|
||||||
|
|
||||||
useOnOutsideClick($modalRef, true, tellParentToClose, $clickableOverlayRef);
|
useOnOutsideClick($modalRef, true, tellParentToClose, $clickableOverlayRef);
|
||||||
useOnEscapeKeyDown(true, tellParentToClose);
|
useOnEscapeKeyDown(true, tellParentToClose);
|
||||||
|
|
||||||
return ReactDOM.createPortal(
|
return (
|
||||||
<ScrollOverlay>
|
<ScrollOverlay>
|
||||||
<ClickableOverlay ref={$clickableOverlayRef}>
|
<ClickableOverlay ref={$clickableOverlayRef}>
|
||||||
<StyledModal width={width} ref={$modalRef}>
|
<StyledModal width={width} height={getAdjustedHeight(height)} ref={$modalRef}>
|
||||||
{renderContent()}
|
{renderContent()}
|
||||||
|
<CloseIcon onClick={() => tellParentToClose()} width={20} height={20} />
|
||||||
</StyledModal>
|
</StyledModal>
|
||||||
</ClickableOverlay>
|
</ClickableOverlay>
|
||||||
</ScrollOverlay>,
|
</ScrollOverlay>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const Modal: React.FC<ModalProps> = ({ width, onClose: tellParentToClose, renderContent }) => {
|
||||||
|
return ReactDOM.createPortal(
|
||||||
|
<InnerModal width={width} onClose={tellParentToClose} renderContent={renderContent} />,
|
||||||
$root,
|
$root,
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -1,9 +1,8 @@
|
|||||||
import React, { useState, useRef, createRef } from 'react';
|
import React from 'react';
|
||||||
import { action } from '@storybook/addon-actions';
|
import { action } from '@storybook/addon-actions';
|
||||||
import styled from 'styled-components';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
import NormalizeStyles from 'App/NormalizeStyles';
|
||||||
import BaseStyles from 'App/BaseStyles';
|
import BaseStyles from 'App/BaseStyles';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
import NewProject from '.';
|
import NewProject from '.';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@ -26,7 +25,7 @@ export const Default = () => {
|
|||||||
initialTeamID={null}
|
initialTeamID={null}
|
||||||
onCreateProject={action('create project')}
|
onCreateProject={action('create project')}
|
||||||
teams={[{ name: 'General', id: 'general', createdAt: '' }]}
|
teams={[{ name: 'General', id: 'general', createdAt: '' }]}
|
||||||
onClose={() => {}}
|
onClose={NOOP}
|
||||||
/>
|
/>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -4,6 +4,19 @@ import { mixin } from 'shared/utils/styles';
|
|||||||
import Select from 'react-select';
|
import Select from 'react-select';
|
||||||
import { ArrowLeft, Cross } from 'shared/icons';
|
import { ArrowLeft, Cross } from 'shared/icons';
|
||||||
|
|
||||||
|
function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
|
||||||
|
if (isDisabled) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (isSelected) {
|
||||||
|
return mixin.darken('#262c49', 0.25);
|
||||||
|
}
|
||||||
|
if (isFocused) {
|
||||||
|
return mixin.darken('#262c49', 0.15);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
const Overlay = styled.div`
|
const Overlay = styled.div`
|
||||||
z-index: 10000;
|
z-index: 10000;
|
||||||
background: #262c49;
|
background: #262c49;
|
||||||
@ -149,14 +162,8 @@ const colourStyles = {
|
|||||||
option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
|
option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
|
||||||
return {
|
return {
|
||||||
...styles,
|
...styles,
|
||||||
backgroundColor: isDisabled
|
backgroundColor: getBackgroundColor(isDisabled, isSelected, isFocused),
|
||||||
? null
|
color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc', // eslint-disable-line
|
||||||
: isSelected
|
|
||||||
? mixin.darken('#262c49', 0.25)
|
|
||||||
: isFocused
|
|
||||||
? mixin.darken('#262c49', 0.15)
|
|
||||||
: null,
|
|
||||||
color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc',
|
|
||||||
cursor: isDisabled ? 'not-allowed' : 'default',
|
cursor: isDisabled ? 'not-allowed' : 'default',
|
||||||
':active': {
|
':active': {
|
||||||
...styles[':active'],
|
...styles[':active'],
|
||||||
|
111
frontend/src/shared/components/NotifcationPopup/index.tsx
Normal file
111
frontend/src/shared/components/NotifcationPopup/index.tsx
Normal file
@ -0,0 +1,111 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import styled from 'styled-components';
|
||||||
|
import TimeAgo from 'react-timeago';
|
||||||
|
|
||||||
|
import { Popup } from 'shared/components/PopupMenu';
|
||||||
|
|
||||||
|
const ItemWrapper = styled.div`
|
||||||
|
cursor: pointer;
|
||||||
|
border-bottom: 1px solid #414561;
|
||||||
|
padding-left: 1rem;
|
||||||
|
padding-right: 1rem;
|
||||||
|
padding-top: 1rem;
|
||||||
|
padding-bottom: 1rem;
|
||||||
|
justify-content: space-between;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: #10163a;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
const ItemWrapperContent = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: flex-start;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ItemIconContainer = styled.span`
|
||||||
|
position: relative;
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ItemTextContainer = styled.div`
|
||||||
|
margin-left: 0.5rem;
|
||||||
|
margin-right: 0.5rem;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ItemTextTitle = styled.span`
|
||||||
|
font-weight: 500;
|
||||||
|
display: block;
|
||||||
|
color: rgba(${props => props.theme.colors.primary});
|
||||||
|
font-size: 14px;
|
||||||
|
`;
|
||||||
|
const ItemTextDesc = styled.span`
|
||||||
|
font-size: 12px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const ItemTimeAgo = styled.span`
|
||||||
|
margin-top: 0.25rem;
|
||||||
|
white-space: nowrap;
|
||||||
|
font-size: 11px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
type NotificationItemProps = {
|
||||||
|
title: string;
|
||||||
|
description: string;
|
||||||
|
createdAt: string;
|
||||||
|
};
|
||||||
|
|
||||||
|
export const NotificationItem: React.FC<NotificationItemProps> = ({ title, description, createdAt }) => {
|
||||||
|
return (
|
||||||
|
<ItemWrapper>
|
||||||
|
<ItemWrapperContent>
|
||||||
|
<ItemIconContainer />
|
||||||
|
<ItemTextContainer>
|
||||||
|
<ItemTextTitle>{title}</ItemTextTitle>
|
||||||
|
<ItemTextDesc>{description}</ItemTextDesc>
|
||||||
|
</ItemTextContainer>
|
||||||
|
</ItemWrapperContent>
|
||||||
|
<TimeAgo date={createdAt} component={ItemTimeAgo} />
|
||||||
|
</ItemWrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const NotificationHeader = styled.div`
|
||||||
|
padding: 0.75rem;
|
||||||
|
text-align: center;
|
||||||
|
border-top-left-radius: 6px;
|
||||||
|
border-top-right-radius: 6px;
|
||||||
|
background: rgba(${props => props.theme.colors.primary});
|
||||||
|
`;
|
||||||
|
|
||||||
|
const NotificationHeaderTitle = styled.span`
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(${props => props.theme.colors.text.secondary});
|
||||||
|
`;
|
||||||
|
|
||||||
|
const NotificationFooter = styled.div`
|
||||||
|
cursor: pointer;
|
||||||
|
padding: 0.5rem;
|
||||||
|
text-align: center;
|
||||||
|
color: rgba(${props => props.theme.colors.primary});
|
||||||
|
&:hover {
|
||||||
|
background: #10163a;
|
||||||
|
}
|
||||||
|
border-bottom-left-radius: 6px;
|
||||||
|
border-bottom-right-radius: 6px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
const NotificationPopup: React.FC = ({ children }) => {
|
||||||
|
return (
|
||||||
|
<Popup title={null} tab={0} borders={false} padding={false}>
|
||||||
|
<NotificationHeader>
|
||||||
|
<NotificationHeaderTitle>Notifications</NotificationHeaderTitle>
|
||||||
|
</NotificationHeader>
|
||||||
|
<ul>{children}</ul>
|
||||||
|
<NotificationFooter>View All</NotificationFooter>
|
||||||
|
</Popup>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default NotificationPopup;
|
@ -1,381 +0,0 @@
|
|||||||
import React, { useState, useRef, createRef } from 'react';
|
|
||||||
import { action } from '@storybook/addon-actions';
|
|
||||||
import LabelColors from 'shared/constants/labelColors';
|
|
||||||
import LabelManager from 'shared/components/PopupMenu/LabelManager';
|
|
||||||
import LabelEditor from 'shared/components/PopupMenu/LabelEditor';
|
|
||||||
import ListActions from 'shared/components/ListActions';
|
|
||||||
import MemberManager from 'shared/components/MemberManager';
|
|
||||||
import DueDateManager from 'shared/components/DueDateManager';
|
|
||||||
import MiniProfile from 'shared/components/MiniProfile';
|
|
||||||
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import produce from 'immer';
|
|
||||||
import NormalizeStyles from 'App/NormalizeStyles';
|
|
||||||
import BaseStyles from 'App/BaseStyles';
|
|
||||||
|
|
||||||
import PopupMenu, { PopupProvider, usePopup, Popup } from '.';
|
|
||||||
|
|
||||||
export default {
|
|
||||||
component: PopupMenu,
|
|
||||||
title: 'PopupMenu',
|
|
||||||
parameters: {
|
|
||||||
backgrounds: [
|
|
||||||
{ name: 'white', value: '#ffffff', default: true },
|
|
||||||
{ name: 'gray', value: '#f8f8f8' },
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
const labelData: Array<ProjectLabel> = [
|
|
||||||
{
|
|
||||||
id: 'development',
|
|
||||||
name: 'Development',
|
|
||||||
createdDate: new Date().toString(),
|
|
||||||
labelColor: {
|
|
||||||
id: '1',
|
|
||||||
colorHex: LabelColors.BLUE,
|
|
||||||
name: 'blue',
|
|
||||||
position: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const OpenLabelBtn = styled.span``;
|
|
||||||
|
|
||||||
type TabProps = {
|
|
||||||
tab: number;
|
|
||||||
};
|
|
||||||
|
|
||||||
const LabelManagerEditor = () => {
|
|
||||||
const [labels, setLabels] = useState(labelData);
|
|
||||||
const [currentLabel, setCurrentLabel] = useState('');
|
|
||||||
const { setTab } = usePopup();
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<Popup title="Labels" tab={0} onClose={action('on close')}>
|
|
||||||
<LabelManager
|
|
||||||
labels={labels}
|
|
||||||
onLabelCreate={() => {
|
|
||||||
setTab(2);
|
|
||||||
}}
|
|
||||||
onLabelEdit={labelId => {
|
|
||||||
setCurrentLabel(labelId);
|
|
||||||
setTab(1);
|
|
||||||
}}
|
|
||||||
onLabelToggle={labelId => {
|
|
||||||
setLabels(
|
|
||||||
produce(labels, draftState => {
|
|
||||||
const idx = labels.findIndex(label => label.id === labelId);
|
|
||||||
if (idx !== -1) {
|
|
||||||
draftState[idx] = { ...draftState[idx] };
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Popup>
|
|
||||||
<Popup onClose={action('on close')} title="Edit label" tab={1}>
|
|
||||||
<LabelEditor
|
|
||||||
labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
|
|
||||||
label={labels.find(label => label.id === currentLabel) ?? null}
|
|
||||||
onLabelEdit={(_labelId, name, color) => {
|
|
||||||
setLabels(
|
|
||||||
produce(labels, draftState => {
|
|
||||||
const idx = labels.findIndex(label => label.id === currentLabel);
|
|
||||||
if (idx !== -1) {
|
|
||||||
draftState[idx] = {
|
|
||||||
...draftState[idx],
|
|
||||||
name,
|
|
||||||
labelColor: {
|
|
||||||
...draftState[idx].labelColor,
|
|
||||||
name: color.name ?? '',
|
|
||||||
colorHex: color.colorHex,
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
setTab(0);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Popup>
|
|
||||||
<Popup onClose={action('on close')} title="Create new label" tab={2}>
|
|
||||||
<LabelEditor
|
|
||||||
label={null}
|
|
||||||
labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
|
|
||||||
onLabelEdit={(_labelId, name, color) => {
|
|
||||||
setLabels([
|
|
||||||
...labels,
|
|
||||||
{
|
|
||||||
id: name,
|
|
||||||
name,
|
|
||||||
createdDate: new Date().toString(),
|
|
||||||
labelColor: {
|
|
||||||
id: color.id,
|
|
||||||
colorHex: color.colorHex,
|
|
||||||
name: color.name ?? '',
|
|
||||||
position: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
]);
|
|
||||||
setTab(0);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</Popup>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const OpenLabelsButton = () => {
|
|
||||||
const $buttonRef = createRef<HTMLButtonElement>();
|
|
||||||
const [currentLabel, setCurrentLabel] = useState('');
|
|
||||||
const [labels, setLabels] = useState(labelData);
|
|
||||||
const { showPopup, setTab } = usePopup();
|
|
||||||
return (
|
|
||||||
<OpenLabelBtn
|
|
||||||
ref={$buttonRef}
|
|
||||||
onClick={() => {
|
|
||||||
showPopup($buttonRef, <LabelManagerEditor />);
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Open
|
|
||||||
</OpenLabelBtn>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const LabelsPopup = () => {
|
|
||||||
const [isPopupOpen, setPopupOpen] = useState(false);
|
|
||||||
return (
|
|
||||||
<PopupProvider>
|
|
||||||
<OpenLabelsButton />
|
|
||||||
</PopupProvider>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const LabelsLabelEditor = () => {
|
|
||||||
const [isPopupOpen, setPopupOpen] = useState(false);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{isPopupOpen && (
|
|
||||||
<PopupMenu
|
|
||||||
onPrevious={action('on previous')}
|
|
||||||
title="Change Label"
|
|
||||||
top={10}
|
|
||||||
onClose={() => setPopupOpen(false)}
|
|
||||||
left={10}
|
|
||||||
>
|
|
||||||
<LabelEditor
|
|
||||||
label={labelData[0]}
|
|
||||||
onLabelEdit={action('label edit')}
|
|
||||||
labelColors={[{ id: '1', colorHex: '#c2c6dc', position: 1, name: 'gray' }]}
|
|
||||||
/>
|
|
||||||
</PopupMenu>
|
|
||||||
)}
|
|
||||||
<button type="submit" onClick={() => setPopupOpen(true)}>
|
|
||||||
Open
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
const initalState = { left: 0, top: 0, isOpen: false };
|
|
||||||
|
|
||||||
export const ListActionsPopup = () => {
|
|
||||||
const $buttonRef = useRef<HTMLButtonElement>(null);
|
|
||||||
const [popupData, setPopupData] = useState(initalState);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{popupData.isOpen && (
|
|
||||||
<PopupMenu
|
|
||||||
title="List Actions"
|
|
||||||
top={popupData.top}
|
|
||||||
onClose={() => setPopupData(initalState)}
|
|
||||||
left={popupData.left}
|
|
||||||
>
|
|
||||||
<ListActions taskGroupID="1" onArchiveTaskGroup={action('archive task group')} />
|
|
||||||
</PopupMenu>
|
|
||||||
)}
|
|
||||||
<button
|
|
||||||
ref={$buttonRef}
|
|
||||||
type="submit"
|
|
||||||
onClick={() => {
|
|
||||||
if ($buttonRef && $buttonRef.current) {
|
|
||||||
const pos = $buttonRef.current.getBoundingClientRect();
|
|
||||||
setPopupData({
|
|
||||||
isOpen: true,
|
|
||||||
left: pos.left,
|
|
||||||
top: pos.top + pos.height + 10,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Open
|
|
||||||
</button>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const MemberManagerPopup = () => {
|
|
||||||
const $buttonRef = useRef<HTMLButtonElement>(null);
|
|
||||||
const [popupData, setPopupData] = useState(initalState);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
{popupData.isOpen && (
|
|
||||||
<PopupMenu title="Members" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
|
|
||||||
<MemberManager
|
|
||||||
availableMembers={[
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
fullName: 'Jordan Knott',
|
|
||||||
profileIcon: { bgColor: null, url: null, initials: null },
|
|
||||||
},
|
|
||||||
]}
|
|
||||||
activeMembers={[]}
|
|
||||||
onMemberChange={action('member change')}
|
|
||||||
/>
|
|
||||||
</PopupMenu>
|
|
||||||
)}
|
|
||||||
<span
|
|
||||||
ref={$buttonRef}
|
|
||||||
onClick={() => {
|
|
||||||
if ($buttonRef && $buttonRef.current) {
|
|
||||||
const pos = $buttonRef.current.getBoundingClientRect();
|
|
||||||
setPopupData({
|
|
||||||
isOpen: true,
|
|
||||||
left: pos.left,
|
|
||||||
top: pos.top + pos.height + 10,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Open
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const DueDateManagerPopup = () => {
|
|
||||||
const $buttonRef = useRef<HTMLButtonElement>(null);
|
|
||||||
const [popupData, setPopupData] = useState(initalState);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
{popupData.isOpen && (
|
|
||||||
<PopupMenu title="Due Date" top={popupData.top} onClose={() => setPopupData(initalState)} left={popupData.left}>
|
|
||||||
<DueDateManager
|
|
||||||
onRemoveDueDate={action('remove due date')}
|
|
||||||
task={{
|
|
||||||
id: '1',
|
|
||||||
taskGroup: { name: 'General', id: '1', position: 1 },
|
|
||||||
name: 'Hello, world',
|
|
||||||
position: 1,
|
|
||||||
labels: [
|
|
||||||
{
|
|
||||||
id: 'soft-skills',
|
|
||||||
assignedDate: new Date().toString(),
|
|
||||||
projectLabel: {
|
|
||||||
createdDate: new Date().toString(),
|
|
||||||
id: 'label-soft-skills',
|
|
||||||
name: 'Soft Skills',
|
|
||||||
labelColor: {
|
|
||||||
id: '1',
|
|
||||||
name: 'white',
|
|
||||||
colorHex: '#fff',
|
|
||||||
position: 1,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
description: 'hello!',
|
|
||||||
assigned: [
|
|
||||||
{
|
|
||||||
id: '1',
|
|
||||||
profileIcon: { bgColor: null, url: null, initials: null },
|
|
||||||
fullName: 'Jordan Knott',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
onCancel={action('cancel')}
|
|
||||||
onDueDateChange={action('due date change')}
|
|
||||||
/>
|
|
||||||
</PopupMenu>
|
|
||||||
)}
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
width: '60px',
|
|
||||||
textAlign: 'center',
|
|
||||||
margin: '25px auto',
|
|
||||||
cursor: 'pointer',
|
|
||||||
}}
|
|
||||||
ref={$buttonRef}
|
|
||||||
onClick={() => {
|
|
||||||
if ($buttonRef && $buttonRef.current) {
|
|
||||||
const pos = $buttonRef.current.getBoundingClientRect();
|
|
||||||
setPopupData({
|
|
||||||
isOpen: true,
|
|
||||||
left: pos.left,
|
|
||||||
top: pos.top + pos.height + 10,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Open
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
export const MiniProfilePopup = () => {
|
|
||||||
const $buttonRef = useRef<HTMLButtonElement>(null);
|
|
||||||
const [popupData, setPopupData] = useState(initalState);
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<NormalizeStyles />
|
|
||||||
<BaseStyles />
|
|
||||||
{popupData.isOpen && (
|
|
||||||
<PopupMenu
|
|
||||||
noHeader
|
|
||||||
title="Due Date"
|
|
||||||
top={popupData.top}
|
|
||||||
onClose={() => setPopupData(initalState)}
|
|
||||||
left={popupData.left}
|
|
||||||
>
|
|
||||||
<MiniProfile
|
|
||||||
user={{
|
|
||||||
id: '1',
|
|
||||||
fullName: 'Jordan Knott',
|
|
||||||
username: 'jordanthedev',
|
|
||||||
profileIcon: { url: null, bgColor: '#000', initials: 'JK' },
|
|
||||||
}}
|
|
||||||
bio="Stuff and things"
|
|
||||||
onRemoveFromTask={action('mini profile')}
|
|
||||||
/>
|
|
||||||
</PopupMenu>
|
|
||||||
)}
|
|
||||||
<span
|
|
||||||
style={{
|
|
||||||
width: '60px',
|
|
||||||
textAlign: 'center',
|
|
||||||
margin: '25px auto',
|
|
||||||
cursor: 'pointer',
|
|
||||||
color: '#fff',
|
|
||||||
background: '#f00',
|
|
||||||
}}
|
|
||||||
ref={$buttonRef}
|
|
||||||
onClick={() => {
|
|
||||||
if ($buttonRef && $buttonRef.current) {
|
|
||||||
const pos = $buttonRef.current.getBoundingClientRect();
|
|
||||||
setPopupData({
|
|
||||||
isOpen: true,
|
|
||||||
left: pos.left,
|
|
||||||
top: pos.top + pos.height + 10,
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
Open
|
|
||||||
</span>
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
};
|
|
@ -1,11 +1,11 @@
|
|||||||
import styled, { css } from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import { mixin } from 'shared/utils/styles';
|
import { mixin } from 'shared/utils/styles';
|
||||||
import Input from '../Input';
|
|
||||||
import ControlledInput from 'shared/components/ControlledInput';
|
import ControlledInput from 'shared/components/ControlledInput';
|
||||||
|
|
||||||
export const Container = styled.div<{
|
export const Container = styled.div<{
|
||||||
invertY: boolean;
|
invertY: boolean;
|
||||||
invert: boolean;
|
invert: boolean;
|
||||||
|
targetPadding: string;
|
||||||
top: number;
|
top: number;
|
||||||
left: number;
|
left: number;
|
||||||
ref: any;
|
ref: any;
|
||||||
@ -16,7 +16,7 @@ export const Container = styled.div<{
|
|||||||
display: block;
|
display: block;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: ${props => props.width}px;
|
width: ${props => props.width}px;
|
||||||
padding-top: 10px;
|
padding-top: ${props => props.targetPadding};
|
||||||
height: auto;
|
height: auto;
|
||||||
z-index: 40000;
|
z-index: 40000;
|
||||||
${props =>
|
${props =>
|
||||||
@ -29,14 +29,18 @@ export const Container = styled.div<{
|
|||||||
css`
|
css`
|
||||||
top: auto;
|
top: auto;
|
||||||
padding-top: 0;
|
padding-top: 0;
|
||||||
padding-bottom: 10px;
|
padding-bottom: ${props.targetPadding};
|
||||||
bottom: ${props.top}px;
|
bottom: ${props.top}px;
|
||||||
`}
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Wrapper = styled.div`
|
export const Wrapper = styled.div<{ padding: boolean; borders: boolean }>`
|
||||||
padding: 5px;
|
${props =>
|
||||||
padding-top: 8px;
|
props.padding &&
|
||||||
|
css`
|
||||||
|
padding: 5px;
|
||||||
|
padding-top: 8px;
|
||||||
|
`}
|
||||||
border-radius: 5px;
|
border-radius: 5px;
|
||||||
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
|
box-shadow: 0 5px 25px 0 rgba(0, 0, 0, 0.1);
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -44,8 +48,12 @@ export const Wrapper = styled.div`
|
|||||||
|
|
||||||
color: #c2c6dc;
|
color: #c2c6dc;
|
||||||
background: #262c49;
|
background: #262c49;
|
||||||
border: 1px solid rgba(0, 0, 0, 0.1);
|
${props =>
|
||||||
border-color: #414561;
|
props.borders &&
|
||||||
|
css`
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0.1);
|
||||||
|
border-color: #414561;
|
||||||
|
`}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const Header = styled.div`
|
export const Header = styled.div`
|
||||||
@ -327,7 +335,7 @@ export const PreviousButton = styled.div`
|
|||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const ContainerDiamond = styled.div<{ invert: boolean; invertY: boolean }>`
|
export const ContainerDiamond = styled.div<{ borders: boolean; color: string; invert: boolean; invertY: boolean }>`
|
||||||
${props => (props.invert ? 'right: 10px; ' : 'left: 15px;')}
|
${props => (props.invert ? 'right: 10px; ' : 'left: 15px;')}
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 10px;
|
width: 10px;
|
||||||
@ -348,6 +356,10 @@ export const ContainerDiamond = styled.div<{ invert: boolean; invertY: boolean }
|
|||||||
transform: rotate(45deg) translate(-7px);
|
transform: rotate(45deg) translate(-7px);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
|
|
||||||
background: #262c49;
|
background: ${props => props.color};
|
||||||
border-color: #414561;
|
${props =>
|
||||||
|
props.borders &&
|
||||||
|
css`
|
||||||
|
border-color: #414561;
|
||||||
|
`}
|
||||||
`;
|
`;
|
||||||
|
@ -2,6 +2,7 @@ import React, { useRef, createContext, RefObject, useState, useContext, useEffec
|
|||||||
import { Cross, AngleLeft } from 'shared/icons';
|
import { Cross, AngleLeft } from 'shared/icons';
|
||||||
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
||||||
import { createPortal } from 'react-dom';
|
import { createPortal } from 'react-dom';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
import produce from 'immer';
|
import produce from 'immer';
|
||||||
import {
|
import {
|
||||||
Container,
|
Container,
|
||||||
@ -14,9 +15,37 @@ import {
|
|||||||
Wrapper,
|
Wrapper,
|
||||||
} from './Styles';
|
} from './Styles';
|
||||||
|
|
||||||
|
function getPopupOptions(options?: PopupOptions) {
|
||||||
|
const popupOptions = {
|
||||||
|
borders: true,
|
||||||
|
diamondColor: '#262c49',
|
||||||
|
targetPadding: '10px',
|
||||||
|
showDiamond: true,
|
||||||
|
width: 316,
|
||||||
|
};
|
||||||
|
if (options) {
|
||||||
|
if (options.borders) {
|
||||||
|
popupOptions.borders = options.borders;
|
||||||
|
}
|
||||||
|
if (options.width) {
|
||||||
|
popupOptions.width = options.width;
|
||||||
|
}
|
||||||
|
if (options.targetPadding) {
|
||||||
|
popupOptions.targetPadding = options.targetPadding;
|
||||||
|
}
|
||||||
|
if (typeof options.showDiamond !== 'undefined' && options.showDiamond !== null) {
|
||||||
|
popupOptions.showDiamond = options.showDiamond;
|
||||||
|
}
|
||||||
|
if (options.diamondColor) {
|
||||||
|
popupOptions.diamondColor = options.diamondColor;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return popupOptions;
|
||||||
|
}
|
||||||
|
|
||||||
type PopupContextState = {
|
type PopupContextState = {
|
||||||
show: (target: RefObject<HTMLElement>, content: JSX.Element, width?: string | number) => void;
|
show: (target: RefObject<HTMLElement>, content: JSX.Element, options?: PopupOptions) => void;
|
||||||
setTab: (newTab: number, width?: number | string) => void;
|
setTab: (newTab: number, options?: PopupOptions) => void;
|
||||||
getCurrentTab: () => number;
|
getCurrentTab: () => number;
|
||||||
hide: () => void;
|
hide: () => void;
|
||||||
};
|
};
|
||||||
@ -25,23 +54,44 @@ type PopupProps = {
|
|||||||
title: string | null;
|
title: string | null;
|
||||||
onClose?: () => void;
|
onClose?: () => void;
|
||||||
tab: number;
|
tab: number;
|
||||||
|
padding?: boolean;
|
||||||
|
borders?: boolean;
|
||||||
|
diamondColor?: string;
|
||||||
};
|
};
|
||||||
|
|
||||||
type PopupContainerProps = {
|
type PopupContainerProps = {
|
||||||
top: number;
|
top: number;
|
||||||
left: number;
|
left: number;
|
||||||
invert: boolean;
|
invert: boolean;
|
||||||
|
targetPadding: string;
|
||||||
invertY: boolean;
|
invertY: boolean;
|
||||||
onClose: () => void;
|
onClose: () => void;
|
||||||
width?: string | number;
|
width?: string | number;
|
||||||
};
|
};
|
||||||
|
|
||||||
const PopupContainer: React.FC<PopupContainerProps> = ({ width, top, left, onClose, children, invert, invertY }) => {
|
const PopupContainer: React.FC<PopupContainerProps> = ({
|
||||||
|
width,
|
||||||
|
top,
|
||||||
|
left,
|
||||||
|
onClose,
|
||||||
|
children,
|
||||||
|
invert,
|
||||||
|
invertY,
|
||||||
|
targetPadding,
|
||||||
|
}) => {
|
||||||
const $containerRef = useRef<HTMLDivElement>(null);
|
const $containerRef = useRef<HTMLDivElement>(null);
|
||||||
const [currentTop, setCurrentTop] = useState(top);
|
const [currentTop, setCurrentTop] = useState(top);
|
||||||
useOnOutsideClick($containerRef, true, onClose, null);
|
useOnOutsideClick($containerRef, true, onClose, null);
|
||||||
return (
|
return (
|
||||||
<Container width={width ?? 316} left={left} top={currentTop} ref={$containerRef} invert={invert} invertY={invertY}>
|
<Container
|
||||||
|
targetPadding={targetPadding}
|
||||||
|
width={width ?? 316}
|
||||||
|
left={left}
|
||||||
|
top={currentTop}
|
||||||
|
ref={$containerRef}
|
||||||
|
invert={invert}
|
||||||
|
invertY={invertY}
|
||||||
|
>
|
||||||
{children}
|
{children}
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
@ -52,10 +102,10 @@ PopupContainer.defaultProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const PopupContext = createContext<PopupContextState>({
|
const PopupContext = createContext<PopupContextState>({
|
||||||
show: () => {},
|
show: NOOP,
|
||||||
setTab: () => {},
|
setTab: NOOP,
|
||||||
getCurrentTab: () => 0,
|
getCurrentTab: () => 0,
|
||||||
hide: () => {},
|
hide: NOOP,
|
||||||
});
|
});
|
||||||
|
|
||||||
export const usePopup = () => {
|
export const usePopup = () => {
|
||||||
@ -72,13 +122,28 @@ type PopupState = {
|
|||||||
currentTab: number;
|
currentTab: number;
|
||||||
previousTab: number;
|
previousTab: number;
|
||||||
content: JSX.Element | null;
|
content: JSX.Element | null;
|
||||||
width?: string | number;
|
options: PopupOptionsInternal | null;
|
||||||
};
|
};
|
||||||
|
|
||||||
const { Provider, Consumer } = PopupContext;
|
const { Provider, Consumer } = PopupContext;
|
||||||
|
|
||||||
const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
const canUseDOM = !!(typeof window !== 'undefined' && window.document && window.document.createElement);
|
||||||
|
|
||||||
|
type PopupOptionsInternal = {
|
||||||
|
width: number;
|
||||||
|
borders: boolean;
|
||||||
|
targetPadding: string;
|
||||||
|
diamondColor: string;
|
||||||
|
showDiamond: boolean;
|
||||||
|
};
|
||||||
|
|
||||||
|
type PopupOptions = {
|
||||||
|
targetPadding?: string | null;
|
||||||
|
showDiamond?: boolean | null;
|
||||||
|
width?: number | null;
|
||||||
|
borders?: boolean | null;
|
||||||
|
diamondColor?: string | null;
|
||||||
|
};
|
||||||
const defaultState = {
|
const defaultState = {
|
||||||
isOpen: false,
|
isOpen: false,
|
||||||
left: 0,
|
left: 0,
|
||||||
@ -88,11 +153,12 @@ const defaultState = {
|
|||||||
currentTab: 0,
|
currentTab: 0,
|
||||||
previousTab: 0,
|
previousTab: 0,
|
||||||
content: null,
|
content: null,
|
||||||
|
options: null,
|
||||||
};
|
};
|
||||||
|
|
||||||
export const PopupProvider: React.FC = ({ children }) => {
|
export const PopupProvider: React.FC = ({ children }) => {
|
||||||
const [currentState, setState] = useState<PopupState>(defaultState);
|
const [currentState, setState] = useState<PopupState>(defaultState);
|
||||||
const show = (target: RefObject<HTMLElement>, content: JSX.Element, width?: number | string) => {
|
const show = (target: RefObject<HTMLElement>, content: JSX.Element, options?: PopupOptions) => {
|
||||||
if (target && target.current) {
|
if (target && target.current) {
|
||||||
const bounds = target.current.getBoundingClientRect();
|
const bounds = target.current.getBoundingClientRect();
|
||||||
let top = bounds.top + bounds.height;
|
let top = bounds.top + bounds.height;
|
||||||
@ -101,6 +167,7 @@ export const PopupProvider: React.FC = ({ children }) => {
|
|||||||
top = window.innerHeight - bounds.top;
|
top = window.innerHeight - bounds.top;
|
||||||
invertY = true;
|
invertY = true;
|
||||||
}
|
}
|
||||||
|
const popupOptions = getPopupOptions(options);
|
||||||
if (bounds.left + 304 + 30 > window.innerWidth) {
|
if (bounds.left + 304 + 30 > window.innerWidth) {
|
||||||
setState({
|
setState({
|
||||||
isOpen: true,
|
isOpen: true,
|
||||||
@ -111,7 +178,7 @@ export const PopupProvider: React.FC = ({ children }) => {
|
|||||||
currentTab: 0,
|
currentTab: 0,
|
||||||
previousTab: 0,
|
previousTab: 0,
|
||||||
content,
|
content,
|
||||||
width: width ?? 316,
|
options: popupOptions,
|
||||||
});
|
});
|
||||||
} else {
|
} else {
|
||||||
setState({
|
setState({
|
||||||
@ -123,7 +190,7 @@ export const PopupProvider: React.FC = ({ children }) => {
|
|||||||
currentTab: 0,
|
currentTab: 0,
|
||||||
previousTab: 0,
|
previousTab: 0,
|
||||||
content,
|
content,
|
||||||
width: width ?? 316,
|
options: popupOptions,
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -138,20 +205,21 @@ export const PopupProvider: React.FC = ({ children }) => {
|
|||||||
currentTab: 0,
|
currentTab: 0,
|
||||||
previousTab: 0,
|
previousTab: 0,
|
||||||
content: null,
|
content: null,
|
||||||
|
options: null,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
const portalTarget = canUseDOM ? document.body : null; // appease flow
|
const portalTarget = canUseDOM ? document.body : null; // appease flow
|
||||||
|
|
||||||
const setTab = (newTab: number, width?: number | string) => {
|
const setTab = (newTab: number, options?: PopupOptions) => {
|
||||||
const newWidth = width ?? currentState.width;
|
setState((prevState: PopupState) =>
|
||||||
setState((prevState: PopupState) => {
|
produce(prevState, draftState => {
|
||||||
return {
|
draftState.previousTab = currentState.currentTab;
|
||||||
...prevState,
|
draftState.currentTab = newTab;
|
||||||
previousTab: currentState.currentTab,
|
if (options) {
|
||||||
currentTab: newTab,
|
draftState.options = getPopupOptions(options);
|
||||||
width: newWidth,
|
}
|
||||||
};
|
}),
|
||||||
});
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const getCurrentTab = () => {
|
const getCurrentTab = () => {
|
||||||
@ -162,17 +230,26 @@ export const PopupProvider: React.FC = ({ children }) => {
|
|||||||
<Provider value={{ hide, show, setTab, getCurrentTab }}>
|
<Provider value={{ hide, show, setTab, getCurrentTab }}>
|
||||||
{portalTarget &&
|
{portalTarget &&
|
||||||
currentState.isOpen &&
|
currentState.isOpen &&
|
||||||
|
currentState.options &&
|
||||||
createPortal(
|
createPortal(
|
||||||
<PopupContainer
|
<PopupContainer
|
||||||
invertY={currentState.invertY}
|
invertY={currentState.invertY}
|
||||||
invert={currentState.invert}
|
invert={currentState.invert}
|
||||||
top={currentState.top}
|
top={currentState.top}
|
||||||
|
targetPadding={currentState.options.targetPadding}
|
||||||
left={currentState.left}
|
left={currentState.left}
|
||||||
onClose={() => setState(defaultState)}
|
onClose={() => setState(defaultState)}
|
||||||
width={currentState.width ?? 316}
|
width={currentState.options.width}
|
||||||
>
|
>
|
||||||
{currentState.content}
|
{currentState.content}
|
||||||
<ContainerDiamond invertY={currentState.invertY} invert={currentState.invert} />
|
{currentState.options.showDiamond && (
|
||||||
|
<ContainerDiamond
|
||||||
|
color={currentState.options.diamondColor}
|
||||||
|
borders={currentState.options.borders}
|
||||||
|
invertY={currentState.invertY}
|
||||||
|
invert={currentState.invert}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</PopupContainer>,
|
</PopupContainer>,
|
||||||
portalTarget,
|
portalTarget,
|
||||||
)}
|
)}
|
||||||
@ -196,8 +273,16 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
|
|||||||
useOnOutsideClick($containerRef, true, onClose, null);
|
useOnOutsideClick($containerRef, true, onClose, null);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Container invertY={false} width={width ?? 316} invert={false} left={left} top={top} ref={$containerRef}>
|
<Container
|
||||||
<Wrapper>
|
targetPadding="10px"
|
||||||
|
invertY={false}
|
||||||
|
width={width ?? 316}
|
||||||
|
invert={false}
|
||||||
|
left={left}
|
||||||
|
top={top}
|
||||||
|
ref={$containerRef}
|
||||||
|
>
|
||||||
|
<Wrapper padding borders>
|
||||||
{onPrevious && (
|
{onPrevious && (
|
||||||
<PreviousButton onClick={onPrevious}>
|
<PreviousButton onClick={onPrevious}>
|
||||||
<AngleLeft color="#c2c6dc" />
|
<AngleLeft color="#c2c6dc" />
|
||||||
@ -221,7 +306,7 @@ const PopupMenu: React.FC<Props> = ({ width, title, top, left, onClose, noHeader
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
export const Popup: React.FC<PopupProps> = ({ title, onClose, tab, children }) => {
|
export const Popup: React.FC<PopupProps> = ({ borders = true, padding = true, title, onClose, tab, children }) => {
|
||||||
const { getCurrentTab, setTab } = usePopup();
|
const { getCurrentTab, setTab } = usePopup();
|
||||||
if (getCurrentTab() !== tab) {
|
if (getCurrentTab() !== tab) {
|
||||||
return null;
|
return null;
|
||||||
@ -229,7 +314,7 @@ export const Popup: React.FC<PopupProps> = ({ title, onClose, tab, children }) =
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<Wrapper>
|
<Wrapper borders={borders} padding={padding}>
|
||||||
{tab > 0 && (
|
{tab > 0 && (
|
||||||
<PreviousButton
|
<PreviousButton
|
||||||
onClick={() => {
|
onClick={() => {
|
||||||
|
@ -13,7 +13,7 @@ export const AddProjectItem: React.FC<AddProjectItemProps> = ({ onAddProject })
|
|||||||
onAddProject();
|
onAddProject();
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<Plus size={20} color="#c2c6dc" />
|
<Plus width={12} height={12} />
|
||||||
<AddProjectLabel>New Project</AddProjectLabel>
|
<AddProjectLabel>New Project</AddProjectLabel>
|
||||||
</AddProjectWrapper>
|
</AddProjectWrapper>
|
||||||
);
|
);
|
||||||
|
@ -5,6 +5,7 @@ import CardComposer from 'shared/components/CardComposer';
|
|||||||
import LabelColors from 'shared/constants/labelColors';
|
import LabelColors from 'shared/constants/labelColors';
|
||||||
import List, { ListCards } from 'shared/components/List';
|
import List, { ListCards } from 'shared/components/List';
|
||||||
import QuickCardEditor from 'shared/components/QuickCardEditor';
|
import QuickCardEditor from 'shared/components/QuickCardEditor';
|
||||||
|
import NOOP from 'shared/utils/noop';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
component: QuickCardEditor,
|
component: QuickCardEditor,
|
||||||
@ -71,7 +72,7 @@ export const Default = () => {
|
|||||||
isComposerOpen={false}
|
isComposerOpen={false}
|
||||||
onSaveName={action('on save name')}
|
onSaveName={action('on save name')}
|
||||||
onOpenComposer={action('on open composer')}
|
onOpenComposer={action('on open composer')}
|
||||||
onExtraMenuOpen={(taskGroupID, $targetRef) => {}}
|
onExtraMenuOpen={NOOP}
|
||||||
>
|
>
|
||||||
<ListCards>
|
<ListCards>
|
||||||
<Card
|
<Card
|
||||||
@ -81,7 +82,7 @@ export const Default = () => {
|
|||||||
ref={$cardRef}
|
ref={$cardRef}
|
||||||
title={task.name}
|
title={task.name}
|
||||||
onClick={action('on click')}
|
onClick={action('on click')}
|
||||||
onContextMenu={e => {
|
onContextMenu={() => {
|
||||||
setTarget($cardRef);
|
setTarget($cardRef);
|
||||||
setEditorOpen(true);
|
setEditorOpen(true);
|
||||||
}}
|
}}
|
||||||
@ -90,7 +91,7 @@ export const Default = () => {
|
|||||||
checklists={{ complete: 1, total: 4 }}
|
checklists={{ complete: 1, total: 4 }}
|
||||||
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
dueDate={{ isPastDue: false, formattedDate: 'Oct 26, 2020' }}
|
||||||
/>
|
/>
|
||||||
<CardComposer onClose={() => {}} onCreateCard={name => {}} isOpen={false} />
|
<CardComposer onClose={NOOP} onCreateCard={NOOP} isOpen={false} />
|
||||||
</ListCards>
|
</ListCards>
|
||||||
</List>
|
</List>
|
||||||
</>
|
</>
|
||||||
|
@ -55,7 +55,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
|
|||||||
ref={register({ required: 'Full name is required' })}
|
ref={register({ required: 'Full name is required' })}
|
||||||
/>
|
/>
|
||||||
<FormIcon>
|
<FormIcon>
|
||||||
<User color="#c2c6dc" size={20} />
|
<User width={20} height={20} />
|
||||||
</FormIcon>
|
</FormIcon>
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||||
@ -68,7 +68,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
|
|||||||
ref={register({ required: 'Username is required' })}
|
ref={register({ required: 'Username is required' })}
|
||||||
/>
|
/>
|
||||||
<FormIcon>
|
<FormIcon>
|
||||||
<User color="#c2c6dc" size={20} />
|
<User width={20} height={20} />
|
||||||
</FormIcon>
|
</FormIcon>
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
{errors.username && <FormError>{errors.username.message}</FormError>}
|
{errors.username && <FormError>{errors.username.message}</FormError>}
|
||||||
@ -84,7 +84,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
|
|||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
<FormIcon>
|
<FormIcon>
|
||||||
<User color="#c2c6dc" size={20} />
|
<User width={20} height={20} />
|
||||||
</FormIcon>
|
</FormIcon>
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
{errors.email && <FormError>{errors.email.message}</FormError>}
|
{errors.email && <FormError>{errors.email.message}</FormError>}
|
||||||
@ -103,7 +103,7 @@ const Register = ({ onSubmit }: RegisterProps) => {
|
|||||||
})}
|
})}
|
||||||
/>
|
/>
|
||||||
<FormIcon>
|
<FormIcon>
|
||||||
<User color="#c2c6dc" size={20} />
|
<User width={20} height={20} />
|
||||||
</FormIcon>
|
</FormIcon>
|
||||||
</FormLabel>
|
</FormLabel>
|
||||||
{errors.initials && <FormError>{errors.initials.message}</FormError>}
|
{errors.initials && <FormError>{errors.initials.message}</FormError>}
|
||||||
|
@ -3,6 +3,19 @@ import Select from 'react-select';
|
|||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import { mixin } from 'shared/utils/styles';
|
import { mixin } from 'shared/utils/styles';
|
||||||
|
|
||||||
|
function getBackgroundColor(isDisabled: boolean, isSelected: boolean, isFocused: boolean) {
|
||||||
|
if (isDisabled) {
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
if (isSelected) {
|
||||||
|
return mixin.darken('#262c49', 0.25);
|
||||||
|
}
|
||||||
|
if (isFocused) {
|
||||||
|
return mixin.darken('#262c49', 0.15);
|
||||||
|
}
|
||||||
|
return null;
|
||||||
|
}
|
||||||
|
|
||||||
const colourStyles = {
|
const colourStyles = {
|
||||||
control: (styles: any, data: any) => {
|
control: (styles: any, data: any) => {
|
||||||
return {
|
return {
|
||||||
@ -43,14 +56,8 @@ const colourStyles = {
|
|||||||
option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
|
option: (styles: any, { data, isDisabled, isFocused, isSelected }: any) => {
|
||||||
return {
|
return {
|
||||||
...styles,
|
...styles,
|
||||||
backgroundColor: isDisabled
|
backgroundColor: getBackgroundColor(isDisabled, isSelected, isFocused),
|
||||||
? null
|
color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc', // eslint-disable-line
|
||||||
: isSelected
|
|
||||||
? mixin.darken('#262c49', 0.25)
|
|
||||||
: isFocused
|
|
||||||
? mixin.darken('#262c49', 0.15)
|
|
||||||
: null,
|
|
||||||
color: isDisabled ? '#ccc' : isSelected ? '#fff' : '#c2c6dc',
|
|
||||||
cursor: isDisabled ? 'not-allowed' : 'default',
|
cursor: isDisabled ? 'not-allowed' : 'default',
|
||||||
':active': {
|
':active': {
|
||||||
...styles[':active'],
|
...styles[':active'],
|
||||||
|
@ -218,7 +218,7 @@ const NavItem: React.FC<NavItemProps> = ({ active, name, tab, onClick }) => {
|
|||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
<TabNavItemButton active={active}>
|
<TabNavItemButton active={active}>
|
||||||
<User size={14} color={active ? 'rgba(115, 103, 240)' : '#c2c6dc'} />
|
<User width={20} height={20} />
|
||||||
<TabNavItemSpan>{name}</TabNavItemSpan>
|
<TabNavItemSpan>{name}</TabNavItemSpan>
|
||||||
</TabNavItemButton>
|
</TabNavItemButton>
|
||||||
</TabNavItem>
|
</TabNavItem>
|
||||||
|
@ -1,288 +1,365 @@
|
|||||||
import styled from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import TextareaAutosize from 'react-autosize-textarea/lib';
|
import TextareaAutosize from 'react-autosize-textarea';
|
||||||
import { mixin } from 'shared/utils/styles';
|
import { mixin } from 'shared/utils/styles';
|
||||||
import Button from 'shared/components/Button';
|
import Button from 'shared/components/Button';
|
||||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
import TaskAssignee from 'shared/components/TaskAssignee';
|
||||||
|
import { User, Trash, Paperclip } from 'shared/icons';
|
||||||
|
import Member from 'shared/components/Member';
|
||||||
|
|
||||||
export const TaskHeader = styled.div`
|
export const Container = styled.div`
|
||||||
padding: 21px 30px 0px;
|
display: flex;
|
||||||
margin-right: 70px;
|
height: 100%;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const LeftSidebar = styled.div`
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
width: 300px;
|
||||||
|
background: #222740;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const MarkCompleteButton = styled.button<{ invert: boolean }>`
|
||||||
|
padding: 4px 8px;
|
||||||
|
position: relative;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
border-radius: ${props => props.theme.borderRadius.alternate};
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
background: transparent;
|
||||||
|
& span {
|
||||||
|
margin-left: 4px;
|
||||||
|
}
|
||||||
|
${props =>
|
||||||
|
props.invert
|
||||||
|
? css`
|
||||||
|
background: rgba(${props.theme.colors.success});
|
||||||
|
& svg {
|
||||||
|
fill: rgba(${props.theme.colors.text.secondary});
|
||||||
|
}
|
||||||
|
& span {
|
||||||
|
color: rgba(${props.theme.colors.text.secondary});
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: rgba(${props.theme.colors.success}, 0.8);
|
||||||
|
}
|
||||||
|
`
|
||||||
|
: css`
|
||||||
|
background: none;
|
||||||
|
border: 1px solid rgba(${props.theme.colors.text.secondary});
|
||||||
|
& svg {
|
||||||
|
fill: rgba(${props.theme.colors.text.secondary});
|
||||||
|
}
|
||||||
|
& span {
|
||||||
|
color: rgba(${props.theme.colors.text.secondary});
|
||||||
|
}
|
||||||
|
&:hover {
|
||||||
|
background: rgba(${props.theme.colors.success}, 0.08);
|
||||||
|
border: 1px solid rgba(${props.theme.colors.success});
|
||||||
|
}
|
||||||
|
&:hover svg {
|
||||||
|
fill: rgba(${props.theme.colors.success});
|
||||||
|
}
|
||||||
|
&:hover span {
|
||||||
|
color: rgba(${props.theme.colors.success});
|
||||||
|
}
|
||||||
|
`}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const LeftSidebarContent = styled.div`
|
||||||
|
padding-top: 32px;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const TaskMeta = styled.div`
|
export const LeftSidebarSection = styled.div`
|
||||||
position: relative;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
padding-left: 32px;
|
||||||
|
padding-right: 32px;
|
||||||
|
padding-bottom: 16px;
|
||||||
|
border-bottom: 1px solid #414561;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const SidebarTitle = styled.div`
|
||||||
|
font-size: 12px;
|
||||||
|
min-height: 24px;
|
||||||
|
margin-left: 8px;
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary}, 0.75);
|
||||||
|
padding-top: 4px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const SidebarButton = styled.div`
|
||||||
|
font-size: 14px;
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary});
|
||||||
|
min-height: 32px;
|
||||||
|
width: 100%;
|
||||||
|
|
||||||
|
padding: 9px 8px 7px 8px;
|
||||||
|
border-color: transparent;
|
||||||
|
border-radius: 6px;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
|
||||||
|
display: inline-block;
|
||||||
|
outline: 0;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
font-size: 14px;
|
&:hover {
|
||||||
|
border-color: #414561;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const SidebarButtonText = styled.span`
|
||||||
|
min-height: 16px;
|
||||||
|
flex: 1 1 auto;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: flex-start;
|
||||||
border-radius: 4px;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const TaskGroupLabel = styled.span`
|
export const ContentContainer = styled.div`
|
||||||
color: #c2c6dc;
|
|
||||||
font-size: 14px;
|
|
||||||
`;
|
|
||||||
export const TaskGroupLabelName = styled.span`
|
|
||||||
color: #c2c6dc;
|
|
||||||
text-decoration: underline;
|
|
||||||
font-size: 14px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskActions = styled.div`
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
right: 0;
|
|
||||||
padding: 21px 18px 0px;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
flex-direction: column;
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskAction = styled.button`
|
|
||||||
display: inline-flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
height: 32px;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0px 9px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailsWrapper = styled.div`
|
|
||||||
display: flex;
|
|
||||||
padding: 0px 16px 60px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailsContent = styled.div`
|
|
||||||
flex: 1;
|
flex: 1;
|
||||||
padding-right: 8px;
|
padding-top: 32px;
|
||||||
|
overflow: auto;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const TaskDetailsSidebar = styled.div`
|
export const HeaderContainer = styled.div`
|
||||||
width: 168px;
|
flex: 0 0 auto;
|
||||||
padding-left: 8px;
|
padding: 0px 32px 0px 24px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const HeaderInnerContainer = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin: 0 0 0 0;
|
||||||
|
padding: 0 0 0 4px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const HeaderLeft = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-start;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const TaskDetailsTitleWrapper = styled.div`
|
export const TaskDetailsTitleWrapper = styled.div`
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin: 0 0 0 -8px;
|
margin: 8px 0 4px 0;
|
||||||
display: inline-block;
|
display: inline-block;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const TaskDetailsTitle = styled(TextareaAutosize)`
|
export const TaskDetailsTitle = styled(TextareaAutosize)`
|
||||||
line-height: 1.28;
|
padding: 9px 8px 7px 8px;
|
||||||
resize: none;
|
border-color: transparent;
|
||||||
box-shadow: transparent 0px 0px 0px 1px;
|
border-radius: 6px;
|
||||||
font-size: 24px;
|
|
||||||
font-weight: 700;
|
|
||||||
padding: 4px;
|
|
||||||
background: #262c49;
|
|
||||||
border-width: 1px;
|
border-width: 1px;
|
||||||
border-style: solid;
|
border-style: solid;
|
||||||
border-color: transparent;
|
|
||||||
border-image: initial;
|
|
||||||
transition: background 0.1s ease 0s;
|
|
||||||
overflow-y: hidden;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
color: #c2c6dc;
|
color: #c2c6dc;
|
||||||
&:focus {
|
display: inline-block;
|
||||||
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
|
outline: 0;
|
||||||
background: ${mixin.darken('#262c49', 0.15)};
|
font-size: 24px;
|
||||||
}
|
font-weight: 700;
|
||||||
`;
|
background: none;
|
||||||
|
|
||||||
export const TaskDetailsLabel = styled.div`
|
|
||||||
padding: 24px 0px 12px;
|
|
||||||
font-size: 15px;
|
|
||||||
font-weight: 600;
|
|
||||||
color: #c2c6dc;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailsAddDetailsButton = styled.div`
|
|
||||||
background: ${mixin.darken('#262c49', 0.15)};
|
|
||||||
box-shadow: none;
|
|
||||||
border: none;
|
|
||||||
border-radius: 3px;
|
|
||||||
display: block;
|
|
||||||
min-height: 56px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
text-decoration: none;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
color: #c2c6dc;
|
|
||||||
&:hover {
|
&:hover {
|
||||||
background: ${mixin.darken('#262c49', 0.25)};
|
border-color: #414561;
|
||||||
box-shadow: none;
|
|
||||||
border: none;
|
|
||||||
}
|
}
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailsEditorWrapper = styled.div`
|
|
||||||
display: block;
|
|
||||||
padding-bottom: 9px;
|
|
||||||
z-index: 50;
|
|
||||||
width: 100%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailsEditor = styled(TextareaAutosize)`
|
|
||||||
width: 100%;
|
|
||||||
min-height: 108px;
|
|
||||||
color: #c2c6dc;
|
|
||||||
background: #262c49;
|
|
||||||
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
|
|
||||||
border-radius: 3px;
|
|
||||||
line-height: 20px;
|
|
||||||
padding: 8px 12px;
|
|
||||||
outline: none;
|
|
||||||
border: none;
|
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
box-shadow: rgb(115, 103, 240) 0px 0px 0px 1px;
|
border-color: rgba(${props => props.theme.colors.primary});
|
||||||
background: ${mixin.darken('#262c49', 0.05)};
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const TaskDetailsMarkdown = styled.div`
|
export const DueDateTitle = styled.div`
|
||||||
width: 100%;
|
font-size: 12px;
|
||||||
|
min-height: 24px;
|
||||||
|
margin-left: 8px;
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary}, 0.75);
|
||||||
|
padding-top: 8px;
|
||||||
|
letter-spacing: 0.5px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const AssignedUsersSection = styled.div`
|
||||||
|
padding-left: 32px;
|
||||||
|
padding-right: 32px;
|
||||||
|
padding-top: 24px;
|
||||||
|
padding-bottom: 24px;
|
||||||
|
border-bottom: 1px solid #414561;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const AssignUserIcon = styled.div`
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
color: #c2c6dc;
|
height: 32px;
|
||||||
|
width: 32px;
|
||||||
h1 {
|
position: relative;
|
||||||
font-size: 24px;
|
border-radius: 50%;
|
||||||
font-weight: 600;
|
border: 1px dashed #414561;
|
||||||
line-height: 28px;
|
margin-right: 8px;
|
||||||
margin: 0 0 12px;
|
display: flex;
|
||||||
|
flex-shrink: 0;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid rgba(${props => props.theme.colors.text.secondary}, 0.75);
|
||||||
}
|
}
|
||||||
|
&:hover svg {
|
||||||
h2 {
|
fill: rgba(${props => props.theme.colors.text.secondary}, 0.75);
|
||||||
font-weight: 600;
|
|
||||||
font-size: 20px;
|
|
||||||
line-height: 24px;
|
|
||||||
margin: 16px 0 8px;
|
|
||||||
}
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
p {
|
export const AssignUsersButton = styled.div`
|
||||||
margin: 0 0 8px;
|
cursor: pointer;
|
||||||
|
display: inline-flex;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
height: 40px;
|
||||||
|
padding: 4px 16px 4px 8px;
|
||||||
|
margin-left: -1px;
|
||||||
|
border-radius: 6px;
|
||||||
|
align-items: center;
|
||||||
|
border: 1px solid transparent;
|
||||||
|
&:hover {
|
||||||
|
border: 1px solid ${mixin.darken('#414561', 0.15)};
|
||||||
}
|
}
|
||||||
|
&:hover ${AssignUserIcon} {
|
||||||
|
border: 1px solid #414561;
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
strong {
|
export const AssignUserLabel = styled.span`
|
||||||
font-weight: 700;
|
flex: 1 1 auto;
|
||||||
|
line-height: 15px;
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary}, 0.75);
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ExtraActionsSection = styled.div`
|
||||||
|
padding-left: 32px;
|
||||||
|
padding-right: 32px;
|
||||||
|
padding-top: 24px;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionButtonsTitle = styled.h3`
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary});
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionButton = styled(Button)`
|
||||||
|
margin-top: 8px;
|
||||||
|
margin-left: -10px;
|
||||||
|
padding: 8px 16px;
|
||||||
|
background: rgba(${props => props.theme.colors.bg.primary}, 0.5);
|
||||||
|
text-align: left;
|
||||||
|
transition: transform 0.2s ease;
|
||||||
|
& span {
|
||||||
|
justify-content: flex-start;
|
||||||
}
|
}
|
||||||
|
&:hover {
|
||||||
|
box-shadow: none;
|
||||||
|
transform: translateX(4px);
|
||||||
|
background: rgba(${props => props.theme.colors.bg.primary}, 0.75);
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const HeaderRight = styled.div`
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const HeaderActionIcon = styled.div`
|
||||||
|
padding: 4px 4px 4px 4px;
|
||||||
|
margin: 0 4px 0 4px;
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
cursor: pointer;
|
||||||
|
svg {
|
||||||
|
fill: rgba(${props => props.theme.colors.text.primary}, 0.75);
|
||||||
|
}
|
||||||
|
&:hover svg {
|
||||||
|
fill: rgba(${props => props.theme.colors.primary});
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const EditorContainer = styled.div`
|
||||||
|
margin-left: 32px;
|
||||||
|
margin-right: 32px;
|
||||||
|
|
||||||
|
padding: 9px 8px 7px 8px;
|
||||||
|
border-color: transparent;
|
||||||
|
border-radius: 6px;
|
||||||
|
border-width: 1px;
|
||||||
|
border-style: solid;
|
||||||
|
outline: 0;
|
||||||
|
background: none;
|
||||||
|
|
||||||
ul {
|
ul {
|
||||||
margin: 8px 0;
|
list-style-type: disc;
|
||||||
}
|
}
|
||||||
|
|
||||||
ul > li {
|
ul.checkbox_list input[type='checkbox'] {
|
||||||
margin: 8px 8px 8px 24px;
|
border-radius: 6px;
|
||||||
list-style: disc;
|
border-width: 1px;
|
||||||
}
|
border-style: solid;
|
||||||
|
border-color: #414561;
|
||||||
p a {
|
|
||||||
color: rgba(${props => props.theme.colors.primary});
|
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const TaskDetailsControls = styled.div`
|
export const InnerContentContainer = styled.div`
|
||||||
clear: both;
|
overflow: auto;
|
||||||
margin-top: 8px;
|
position: relative;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const DescriptionContainer = styled.div`
|
||||||
|
position: relative;
|
||||||
display: flex;
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const ConfirmSave = styled(Button)`
|
export const DescriptionActionButton = styled(Button)`
|
||||||
padding: 6px 12px;
|
padding: 8px 16px;
|
||||||
border-radius: 3px;
|
|
||||||
margin-right: 6px;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const CancelEdit = styled.div`
|
export const Labels = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
padding-left: 9px;
|
||||||
justify-content: center;
|
margin: 0 0 8px 0;
|
||||||
height: 32px;
|
|
||||||
width: 32px;
|
|
||||||
cursor: pointer;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const TaskDetailSectionTitle = styled.div`
|
export const MetaDetail = styled.div`
|
||||||
text-transform: uppercase;
|
|
||||||
color: #c2c6dc;
|
|
||||||
font-size: 12.5px;
|
|
||||||
font-weight: 600;
|
|
||||||
margin: 24px 0px 5px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailAssignees = styled.div`
|
|
||||||
display: flex;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
align-items: center;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailAssignee = styled.div`
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
margin-right: 4px;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const ProfileIcon = styled.div`
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
border-radius: 9999px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
color: #fff;
|
|
||||||
font-weight: 700;
|
|
||||||
background: rgb(115, 103, 240);
|
|
||||||
cursor: pointer;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailsAddMemberIcon = styled.div`
|
|
||||||
float: left;
|
|
||||||
height: 32px;
|
|
||||||
width: 32px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
border-radius: 100%;
|
|
||||||
background: ${mixin.darken('#262c49', 0.15)};
|
|
||||||
cursor: pointer;
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailLabels = styled.div`
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailLabel = styled.div<{ color: string }>`
|
|
||||||
&:hover {
|
|
||||||
opacity: 0.8;
|
|
||||||
}
|
|
||||||
background-color: ${props => props.color};
|
|
||||||
color: #fff;
|
|
||||||
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
border-radius: 3px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
display: block;
|
display: block;
|
||||||
float: left;
|
float: left;
|
||||||
font-weight: 600;
|
margin: 0 16px 8px 0;
|
||||||
height: 32px;
|
max-width: 100%;
|
||||||
line-height: 32px;
|
|
||||||
margin: 0 4px 4px 0;
|
|
||||||
min-width: 40px;
|
|
||||||
padding: 0 12px;
|
|
||||||
width: auto;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
|
export const MetaDetailTitle = styled.h3`
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary});
|
||||||
|
font-size: 12px;
|
||||||
|
font-weight: 500;
|
||||||
|
letter-spacing: 0.04em;
|
||||||
|
margin-top: 16px;
|
||||||
|
text-transform: uppercase;
|
||||||
|
display: block;
|
||||||
|
line-height: 20px;
|
||||||
|
margin: 0 8px 4px 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const MetaDetailContent = styled.div`
|
||||||
|
display: flex;
|
||||||
|
`;
|
||||||
export const TaskDetailsAddLabel = styled.div`
|
export const TaskDetailsAddLabel = styled.div`
|
||||||
border-radius: 3px;
|
border-radius: 3px;
|
||||||
background: ${mixin.darken('#262c49', 0.15)};
|
background: ${mixin.darken('#262c49', 0.15)};
|
||||||
@ -307,90 +384,204 @@ export const TaskDetailsAddLabelIcon = styled.div`
|
|||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const NoDueDateLabel = styled.span`
|
export const ChecklistSection = styled.div`
|
||||||
color: rgb(137, 147, 164);
|
margin-top: 8px;
|
||||||
font-size: 14px;
|
padding: 0 24px;
|
||||||
cursor: pointer;
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const UnassignedLabel = styled.div`
|
export const TaskDetailLabel = styled.div<{ color: string }>`
|
||||||
color: rgb(137, 147, 164);
|
&:hover {
|
||||||
font-size: 14px;
|
opacity: 0.8;
|
||||||
|
}
|
||||||
|
background-color: ${props => props.color};
|
||||||
|
color: #fff;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
border-radius: 3px;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: block;
|
||||||
|
float: left;
|
||||||
|
font-weight: 600;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
margin: 0 4px 0 0;
|
||||||
|
min-width: 40px;
|
||||||
|
padding: 0 12px;
|
||||||
|
width: auto;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const ActionButtons = styled.div`
|
export const MemberList = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 4px 16px 4px 8px;
|
||||||
|
margin-left: -1px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const TaskMember = styled(TaskAssignee)`
|
||||||
|
margin-right: 4px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActionButtonIcon = styled.div``;
|
||||||
|
|
||||||
|
export const EditorActions = styled.div`
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
margin-left: 32px;
|
||||||
|
margin-right: 32px;
|
||||||
|
padding: 9px 8px 7px 8px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const CancelIcon = styled.div`
|
||||||
|
width: 32px;
|
||||||
|
height: 32p;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-left: 4px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const TabBarSection = styled.div`
|
||||||
|
margin-top: 2px;
|
||||||
|
padding-left: 23px;
|
||||||
|
display: flex;
|
||||||
|
text-transform: uppercase;
|
||||||
|
min-height: 35px;
|
||||||
|
border-bottom: 1px solid #414561;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const TabBarItem = styled.div`
|
||||||
|
box-shadow: inset 0 -2px rgba(216, 93, 216);
|
||||||
|
padding: 12px 7px 14px 7px;
|
||||||
|
margin-bottom: -1px;
|
||||||
|
margin-right: 36px;
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary});
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const CommentContainer = styled.div`
|
||||||
|
flex: 0 0 auto;
|
||||||
|
margin-top: auto;
|
||||||
|
padding: 15px 26px;
|
||||||
|
background: #1f243e;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const CommentInnerWrapper = styled.div`
|
||||||
|
display: flex;
|
||||||
|
position: relative;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const CommentEditorContainer = styled.div`
|
||||||
|
flex: 1;
|
||||||
|
border-radius: 6px;
|
||||||
|
border: 1px solid #414561;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
`;
|
`;
|
||||||
|
export const CommentProfile = styled(TaskAssignee)`
|
||||||
export const ActionButtonsTitle = styled.h3`
|
margin-right: 8px;
|
||||||
color: rgba(${props => props.theme.colors.text.primary});
|
position: relative;
|
||||||
font-size: 12px;
|
top: 0;
|
||||||
font-weight: 500;
|
padding-top: 3px;
|
||||||
letter-spacing: 0.04em;
|
align-items: normal;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const ActionButton = styled(Button)`
|
export const CommentTextArea = styled(TextareaAutosize)`
|
||||||
margin-top: 8px;
|
width: 100%;
|
||||||
padding: 6px 12px;
|
line-height: 28px;
|
||||||
background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
|
padding: 4px 6px;
|
||||||
text-align: left;
|
border-radius: 6px;
|
||||||
&:hover {
|
color: rgba(${props => props.theme.colors.text.primary});
|
||||||
box-shadow: none;
|
background: #1f243e;
|
||||||
background: rgba(${props => props.theme.colors.bg.primary}, 0.6);
|
border: none;
|
||||||
|
transition: max-height 200ms, height 200ms, min-height 200ms;
|
||||||
|
min-height: 36px;
|
||||||
|
max-height: 36px;
|
||||||
|
&:not(:focus) {
|
||||||
|
height: 36px;
|
||||||
|
}
|
||||||
|
&:focus {
|
||||||
|
min-height: 80px;
|
||||||
|
max-height: none;
|
||||||
|
line-height: 20px;
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const MetaDetails = styled.div`
|
export const CommentEditorActions = styled.div<{ visible: boolean }>`
|
||||||
margin-top: 8px;
|
display: ${props => (props.visible ? 'flex' : 'none')};
|
||||||
display: flex;
|
align-items: center;
|
||||||
|
padding: 5px 5px 5px 9px;
|
||||||
|
border-top: 1px solid #414561;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const TaskDueDateButton = styled(Button)`
|
export const CommentEditorActionIcon = styled.div`
|
||||||
|
width: 32px;
|
||||||
height: 32px;
|
height: 32px;
|
||||||
padding: 6px 12px;
|
|
||||||
background: rgba(${props => props.theme.colors.bg.primary}, 0.4);
|
|
||||||
&:hover {
|
|
||||||
box-shadow: none;
|
|
||||||
background: rgba(${props => props.theme.colors.bg.primary}, 0.6);
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const MetaDetail = styled.div`
|
|
||||||
display: block;
|
|
||||||
float: left;
|
|
||||||
margin: 0 16px 8px 0;
|
|
||||||
max-width: 100%;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskDetailsSection = styled.div`
|
|
||||||
display: block;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const MetaDetailTitle = styled.h3`
|
|
||||||
color: rgba(${props => props.theme.colors.text.primary});
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: 500;
|
|
||||||
letter-spacing: 0.04em;
|
|
||||||
margin-top: 16px;
|
|
||||||
text-transform: uppercase;
|
|
||||||
display: block;
|
|
||||||
line-height: 20px;
|
|
||||||
margin: 0 8px 4px 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
`;
|
|
||||||
|
|
||||||
export const TaskMember = styled(TaskAssignee)``;
|
|
||||||
|
|
||||||
export const MetaDetailContent = styled.div`
|
|
||||||
display: flex;
|
display: flex;
|
||||||
& ${TaskMember} {
|
align-items: center;
|
||||||
margin-right: 4px;
|
justify-content: center;
|
||||||
}
|
`;
|
||||||
|
|
||||||
|
export const CommentEditorSaveButton = styled(Button)`
|
||||||
|
margin-left: auto;
|
||||||
|
padding: 8px 16px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActivitySection = styled.div`
|
||||||
|
overflow-x: hidden;
|
||||||
|
|
||||||
|
padding: 8px 26px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActivityItem = styled.div`
|
||||||
|
padding: 8px 0;
|
||||||
|
position: relative;
|
||||||
|
overflow-wrap: break-word;
|
||||||
|
word-wrap: break-word;
|
||||||
|
word-break: break-word;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActivityItemHeader = styled.div`
|
||||||
|
display: flex;
|
||||||
|
`;
|
||||||
|
export const ActivityItemHeaderUser = styled(TaskAssignee)`
|
||||||
|
margin-right: 4px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActivityItemHeaderTitle = styled.div`
|
||||||
|
margin-left: 4px;
|
||||||
|
line-height: 18px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActivityItemHeaderTitleName = styled.span`
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary});
|
||||||
|
font-weight: 500;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActivityItemTimestamp = styled.span<{ margin: number }>`
|
||||||
|
font-size: 12px;
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary}, 0.65);
|
||||||
|
margin-left: ${props => props.margin}px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActivityItemDetails = styled.div`
|
||||||
|
margin-left: 32px;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActivityItemComment = styled.div`
|
||||||
|
display: inline-flex;
|
||||||
|
border-radius: 3px;
|
||||||
|
${mixin.boxShadowCard}
|
||||||
|
position: relative;
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary});
|
||||||
|
padding: 8px 12px;
|
||||||
|
margin: 4px 0;
|
||||||
|
background-color: ${mixin.darken('#262c49', 0.1)};
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const ActivityItemLog = styled.span`
|
||||||
|
margin-left: 2px;
|
||||||
|
color: rgba(${props => props.theme.colors.text.primary});
|
||||||
`;
|
`;
|
||||||
|
@ -1,69 +1,75 @@
|
|||||||
import React, { useState, useRef, useEffect } from 'react';
|
import React, { useState, useRef } from 'react';
|
||||||
import { Bin, Cross, Plus } from 'shared/icons';
|
|
||||||
import useOnOutsideClick from 'shared/hooks/onOutsideClick';
|
|
||||||
import ReactMarkdown from 'react-markdown';
|
|
||||||
|
|
||||||
import {
|
import {
|
||||||
isPositionChanged,
|
Plus,
|
||||||
getSortedDraggables,
|
User,
|
||||||
getNewDraggablePosition,
|
Trash,
|
||||||
getAfterDropDraggableList,
|
Paperclip,
|
||||||
} from 'shared/utils/draggables';
|
Clone,
|
||||||
import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
|
Share,
|
||||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
Tags,
|
||||||
import moment from 'moment';
|
Checkmark,
|
||||||
|
CheckSquareOutline,
|
||||||
import {
|
At,
|
||||||
TaskMember,
|
Smile,
|
||||||
NoDueDateLabel,
|
} from 'shared/icons';
|
||||||
TaskDueDateButton,
|
import Editor from 'rich-markdown-editor';
|
||||||
UnassignedLabel,
|
import dark from 'shared/utils/editorTheme';
|
||||||
TaskGroupLabel,
|
|
||||||
TaskGroupLabelName,
|
|
||||||
TaskDetailsSection,
|
|
||||||
TaskActions,
|
|
||||||
TaskDetailsAddLabel,
|
|
||||||
TaskDetailsAddLabelIcon,
|
|
||||||
TaskAction,
|
|
||||||
TaskMeta,
|
|
||||||
ActionButtons,
|
|
||||||
ActionButton,
|
|
||||||
ActionButtonsTitle,
|
|
||||||
TaskHeader,
|
|
||||||
ProfileIcon,
|
|
||||||
TaskDetailsContent,
|
|
||||||
TaskDetailsWrapper,
|
|
||||||
TaskDetailsSidebar,
|
|
||||||
TaskDetailsTitleWrapper,
|
|
||||||
TaskDetailsTitle,
|
|
||||||
TaskDetailsLabel,
|
|
||||||
TaskDetailsAddDetailsButton,
|
|
||||||
TaskDetailsEditor,
|
|
||||||
TaskDetailsEditorWrapper,
|
|
||||||
TaskDetailsMarkdown,
|
|
||||||
TaskDetailsControls,
|
|
||||||
ConfirmSave,
|
|
||||||
CancelEdit,
|
|
||||||
TaskDetailSectionTitle,
|
|
||||||
TaskDetailLabel,
|
|
||||||
TaskDetailLabels,
|
|
||||||
TaskDetailAssignee,
|
|
||||||
TaskDetailAssignees,
|
|
||||||
TaskDetailsAddMemberIcon,
|
|
||||||
MetaDetails,
|
|
||||||
MetaDetail,
|
|
||||||
MetaDetailTitle,
|
|
||||||
MetaDetailContent,
|
|
||||||
} from './Styles';
|
|
||||||
import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
|
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
|
|
||||||
const ChecklistContainer = styled.div``;
|
import { DragDropContext, Droppable, Draggable } from 'react-beautiful-dnd';
|
||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
type TaskContentProps = {
|
import Task from 'shared/icons/Task';
|
||||||
onEditContent: () => void;
|
import {
|
||||||
description: string;
|
TaskDetailLabel,
|
||||||
};
|
CommentContainer,
|
||||||
|
MetaDetailContent,
|
||||||
|
TaskDetailsAddLabelIcon,
|
||||||
|
ActionButton,
|
||||||
|
AssignUserIcon,
|
||||||
|
AssignUserLabel,
|
||||||
|
AssignUsersButton,
|
||||||
|
AssignedUsersSection,
|
||||||
|
DueDateTitle,
|
||||||
|
Container,
|
||||||
|
LeftSidebar,
|
||||||
|
ContentContainer,
|
||||||
|
LeftSidebarContent,
|
||||||
|
LeftSidebarSection,
|
||||||
|
SidebarTitle,
|
||||||
|
SidebarButton,
|
||||||
|
SidebarButtonText,
|
||||||
|
MarkCompleteButton,
|
||||||
|
HeaderContainer,
|
||||||
|
HeaderLeft,
|
||||||
|
HeaderInnerContainer,
|
||||||
|
TaskDetailsTitleWrapper,
|
||||||
|
TaskDetailsTitle,
|
||||||
|
ExtraActionsSection,
|
||||||
|
HeaderRight,
|
||||||
|
HeaderActionIcon,
|
||||||
|
EditorContainer,
|
||||||
|
InnerContentContainer,
|
||||||
|
DescriptionContainer,
|
||||||
|
Labels,
|
||||||
|
ChecklistSection,
|
||||||
|
MemberList,
|
||||||
|
TaskMember,
|
||||||
|
TabBarSection,
|
||||||
|
TabBarItem,
|
||||||
|
CommentTextArea,
|
||||||
|
CommentEditorContainer,
|
||||||
|
CommentEditorActions,
|
||||||
|
CommentEditorActionIcon,
|
||||||
|
CommentEditorSaveButton,
|
||||||
|
CommentProfile,
|
||||||
|
CommentInnerWrapper,
|
||||||
|
ActivitySection,
|
||||||
|
} from './Styles';
|
||||||
|
import Checklist, { ChecklistItem, ChecklistItems } from '../Checklist';
|
||||||
|
import onDragEnd from './onDragEnd';
|
||||||
|
|
||||||
|
const ChecklistContainer = styled.div``;
|
||||||
|
|
||||||
type TaskLabelProps = {
|
type TaskLabelProps = {
|
||||||
label: TaskLabel;
|
label: TaskLabel;
|
||||||
@ -85,62 +91,15 @@ const TaskLabelItem: React.FC<TaskLabelProps> = ({ label, onClick }) => {
|
|||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const TaskContent: React.FC<TaskContentProps> = ({ description, onEditContent }) => {
|
|
||||||
return description === '' ? (
|
|
||||||
<TaskDetailsAddDetailsButton onClick={onEditContent}>Add a more detailed description</TaskDetailsAddDetailsButton>
|
|
||||||
) : (
|
|
||||||
<TaskDetailsMarkdown onClick={onEditContent}>
|
|
||||||
<ReactMarkdown source={description} />
|
|
||||||
</TaskDetailsMarkdown>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
type DetailsEditorProps = {
|
type DetailsEditorProps = {
|
||||||
description: string;
|
description: string;
|
||||||
onTaskDescriptionChange: (newDescription: string) => void;
|
onTaskDescriptionChange: (newDescription: string) => void;
|
||||||
onCancel: () => void;
|
onCancel: () => void;
|
||||||
};
|
};
|
||||||
|
|
||||||
const DetailsEditor: React.FC<DetailsEditorProps> = ({
|
|
||||||
description: initialDescription,
|
|
||||||
onTaskDescriptionChange,
|
|
||||||
onCancel,
|
|
||||||
}) => {
|
|
||||||
const [description, setDescription] = useState(initialDescription);
|
|
||||||
const $editorWrapperRef = useRef<HTMLDivElement>(null);
|
|
||||||
const $editorRef = useRef<HTMLTextAreaElement>(null);
|
|
||||||
const handleOutsideClick = () => {
|
|
||||||
onTaskDescriptionChange(description);
|
|
||||||
};
|
|
||||||
useEffect(() => {
|
|
||||||
if ($editorRef && $editorRef.current) {
|
|
||||||
$editorRef.current.focus();
|
|
||||||
$editorRef.current.select();
|
|
||||||
}
|
|
||||||
}, []);
|
|
||||||
|
|
||||||
useOnOutsideClick($editorWrapperRef, true, handleOutsideClick, null);
|
|
||||||
return (
|
|
||||||
<TaskDetailsEditorWrapper ref={$editorWrapperRef}>
|
|
||||||
<TaskDetailsEditor
|
|
||||||
ref={$editorRef}
|
|
||||||
value={description}
|
|
||||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setDescription(e.currentTarget.value)}
|
|
||||||
/>
|
|
||||||
<TaskDetailsControls>
|
|
||||||
<ConfirmSave variant="relief" onClick={handleOutsideClick}>
|
|
||||||
Save
|
|
||||||
</ConfirmSave>
|
|
||||||
<CancelEdit onClick={onCancel}>
|
|
||||||
<Plus size={16} color="#c2c6dc" />
|
|
||||||
</CancelEdit>
|
|
||||||
</TaskDetailsControls>
|
|
||||||
</TaskDetailsEditorWrapper>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
type TaskDetailsProps = {
|
type TaskDetailsProps = {
|
||||||
task: Task;
|
task: Task;
|
||||||
|
me?: TaskUser | null;
|
||||||
onTaskNameChange: (task: Task, newName: string) => void;
|
onTaskNameChange: (task: Task, newName: string) => void;
|
||||||
onTaskDescriptionChange: (task: Task, newDescription: string) => void;
|
onTaskDescriptionChange: (task: Task, newDescription: string) => void;
|
||||||
onDeleteTask: (task: Task) => void;
|
onDeleteTask: (task: Task) => void;
|
||||||
@ -162,6 +121,7 @@ type TaskDetailsProps = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
const TaskDetails: React.FC<TaskDetailsProps> = ({
|
const TaskDetails: React.FC<TaskDetailsProps> = ({
|
||||||
|
me,
|
||||||
task,
|
task,
|
||||||
onDeleteChecklist,
|
onDeleteChecklist,
|
||||||
onTaskNameChange,
|
onTaskNameChange,
|
||||||
@ -182,209 +142,198 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
|||||||
onToggleChecklistItem,
|
onToggleChecklistItem,
|
||||||
onMemberProfile,
|
onMemberProfile,
|
||||||
}) => {
|
}) => {
|
||||||
const [editorOpen, setEditorOpen] = useState(false);
|
|
||||||
const [description, setDescription] = useState(task.description ?? '');
|
|
||||||
const [taskName, setTaskName] = useState(task.name);
|
const [taskName, setTaskName] = useState(task.name);
|
||||||
const handleClick = () => {
|
const [editTaskDescription, setEditTaskDescription] = useState(() => {
|
||||||
setEditorOpen(!editorOpen);
|
if (task.description) {
|
||||||
};
|
if (task.description.trim() === '' || task.description.trim() === '\\') {
|
||||||
const handleDeleteTask = () => {
|
return true;
|
||||||
onDeleteTask(task);
|
|
||||||
};
|
|
||||||
const $title = useRef<HTMLTextAreaElement>(null);
|
|
||||||
const onKeyDown = (e: React.KeyboardEvent) => {
|
|
||||||
if (e.key === 'Enter') {
|
|
||||||
e.preventDefault();
|
|
||||||
onTaskNameChange(task, taskName);
|
|
||||||
if ($title && $title.current) {
|
|
||||||
$title.current.blur();
|
|
||||||
}
|
}
|
||||||
|
return false;
|
||||||
}
|
}
|
||||||
};
|
return true;
|
||||||
const $unassignedRef = useRef<HTMLDivElement>(null);
|
});
|
||||||
const $addMemberRef = useRef<HTMLDivElement>(null);
|
const [saveTimeout, setSaveTimeout] = useState<any>(null);
|
||||||
const onUnassignedClick = () => {
|
const [showCommentActions, setShowCommentActions] = useState(false);
|
||||||
onOpenAddMemberPopup(task, $unassignedRef);
|
const taskDescriptionRef = useRef(task.description ?? '');
|
||||||
};
|
const $noMemberBtn = useRef<HTMLDivElement>(null);
|
||||||
const onAddMember = ($target: React.RefObject<HTMLElement>) => {
|
const $addMemberBtn = useRef<HTMLDivElement>(null);
|
||||||
onOpenAddMemberPopup(task, $target);
|
const $dueDateBtn = useRef<HTMLDivElement>(null);
|
||||||
};
|
|
||||||
const onAddChecklist = ($target: React.RefObject<HTMLElement>) => {
|
|
||||||
onOpenAddChecklistPopup(task, $target);
|
|
||||||
};
|
|
||||||
const $dueDateLabel = useRef<HTMLDivElement>(null);
|
|
||||||
const $addLabelRef = useRef<HTMLDivElement>(null);
|
|
||||||
|
|
||||||
const onAddLabel = ($target: React.RefObject<HTMLElement>) => {
|
const saveDescription = () => {
|
||||||
onOpenAddLabelPopup(task, $target);
|
onTaskDescriptionChange(task, taskDescriptionRef.current);
|
||||||
};
|
};
|
||||||
|
|
||||||
const onDragEnd = ({ draggableId, source, destination, type }: DropResult) => {
|
|
||||||
if (typeof destination === 'undefined') return;
|
|
||||||
if (!isPositionChanged(source, destination)) return;
|
|
||||||
|
|
||||||
const isChecklist = type === 'checklist';
|
|
||||||
const isSameChecklist = destination.droppableId === source.droppableId;
|
|
||||||
let droppedDraggable: DraggableElement | null = null;
|
|
||||||
let beforeDropDraggables: Array<DraggableElement> | null = null;
|
|
||||||
|
|
||||||
if (!task.checklists) return;
|
|
||||||
if (isChecklist) {
|
|
||||||
const droppedGroup = task.checklists.find(taskGroup => taskGroup.id === draggableId);
|
|
||||||
if (droppedGroup) {
|
|
||||||
droppedDraggable = {
|
|
||||||
id: draggableId,
|
|
||||||
position: droppedGroup.position,
|
|
||||||
};
|
|
||||||
beforeDropDraggables = getSortedDraggables(
|
|
||||||
task.checklists.map(checklist => {
|
|
||||||
return { id: checklist.id, position: checklist.position };
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
if (droppedDraggable === null || beforeDropDraggables === null) {
|
|
||||||
throw new Error('before drop draggables is null');
|
|
||||||
}
|
|
||||||
const afterDropDraggables = getAfterDropDraggableList(
|
|
||||||
beforeDropDraggables,
|
|
||||||
droppedDraggable,
|
|
||||||
isChecklist,
|
|
||||||
isSameChecklist,
|
|
||||||
destination,
|
|
||||||
);
|
|
||||||
const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
|
|
||||||
onChecklistDrop({ ...droppedGroup, position: newPosition });
|
|
||||||
} else {
|
|
||||||
throw { error: 'task group can not be found' };
|
|
||||||
}
|
|
||||||
} else {
|
|
||||||
const targetChecklist = task.checklists.findIndex(
|
|
||||||
checklist => checklist.items.findIndex(item => item.id === draggableId) !== -1,
|
|
||||||
);
|
|
||||||
const droppedChecklistItem = task.checklists[targetChecklist].items.find(item => item.id === draggableId);
|
|
||||||
|
|
||||||
if (droppedChecklistItem) {
|
|
||||||
droppedDraggable = {
|
|
||||||
id: draggableId,
|
|
||||||
position: droppedChecklistItem.position,
|
|
||||||
};
|
|
||||||
beforeDropDraggables = getSortedDraggables(
|
|
||||||
task.checklists[targetChecklist].items.map(item => {
|
|
||||||
return { id: item.id, position: item.position };
|
|
||||||
}),
|
|
||||||
);
|
|
||||||
if (droppedDraggable === null || beforeDropDraggables === null) {
|
|
||||||
throw new Error('before drop draggables is null');
|
|
||||||
}
|
|
||||||
const afterDropDraggables = getAfterDropDraggableList(
|
|
||||||
beforeDropDraggables,
|
|
||||||
droppedDraggable,
|
|
||||||
isChecklist,
|
|
||||||
isSameChecklist,
|
|
||||||
destination,
|
|
||||||
);
|
|
||||||
const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
|
|
||||||
const newItem = {
|
|
||||||
...droppedChecklistItem,
|
|
||||||
position: newPosition,
|
|
||||||
};
|
|
||||||
onChecklistItemDrop(droppedChecklistItem.taskChecklistID, destination.droppableId, newItem);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<>
|
<Container>
|
||||||
<TaskActions>
|
<LeftSidebar>
|
||||||
<TaskAction onClick={handleDeleteTask}>
|
<LeftSidebarContent>
|
||||||
<Bin size={20} color="#c2c6dc" />
|
<LeftSidebarSection>
|
||||||
</TaskAction>
|
<SidebarTitle>TASK GROUP</SidebarTitle>
|
||||||
<TaskAction onClick={onCloseModal}>
|
<SidebarButton>
|
||||||
<Cross width={16} height={16} />
|
<SidebarButtonText>Release 0.1.0</SidebarButtonText>
|
||||||
</TaskAction>
|
</SidebarButton>
|
||||||
</TaskActions>
|
<DueDateTitle>DUE DATE</DueDateTitle>
|
||||||
<TaskHeader>
|
<SidebarButton
|
||||||
<TaskDetailsTitleWrapper>
|
ref={$dueDateBtn}
|
||||||
<TaskDetailsTitle
|
onClick={() => {
|
||||||
ref={$title}
|
onOpenDueDatePopop(task, $dueDateBtn);
|
||||||
value={taskName}
|
}}
|
||||||
onChange={(e: React.ChangeEvent<HTMLTextAreaElement>) => setTaskName(e.currentTarget.value)}
|
>
|
||||||
onKeyDown={onKeyDown}
|
{task.dueDate ? (
|
||||||
/>
|
<SidebarButtonText>{moment(task.dueDate).format('MMM D [at] h:mm A')}</SidebarButtonText>
|
||||||
</TaskDetailsTitleWrapper>
|
) : (
|
||||||
<TaskMeta>
|
<SidebarButtonText>No due date</SidebarButtonText>
|
||||||
{task.taskGroup.name && (
|
)}
|
||||||
<TaskGroupLabel>
|
</SidebarButton>
|
||||||
in list <TaskGroupLabelName>{task.taskGroup.name}</TaskGroupLabelName>
|
</LeftSidebarSection>
|
||||||
</TaskGroupLabel>
|
<AssignedUsersSection>
|
||||||
)}
|
<DueDateTitle>MEMBERS</DueDateTitle>
|
||||||
</TaskMeta>
|
{task.assigned && task.assigned.length !== 0 ? (
|
||||||
</TaskHeader>
|
<MemberList>
|
||||||
<TaskDetailsWrapper>
|
{task.assigned.map(m => (
|
||||||
<TaskDetailsContent>
|
<TaskMember
|
||||||
<MetaDetails>
|
key={m.id}
|
||||||
{task.assigned && task.assigned.length !== 0 && (
|
member={m}
|
||||||
<MetaDetail>
|
size={32}
|
||||||
<MetaDetailTitle>MEMBERS</MetaDetailTitle>
|
onMemberProfile={$target => {
|
||||||
<MetaDetailContent>
|
onMemberProfile($target, m.id);
|
||||||
{task.assigned &&
|
}}
|
||||||
task.assigned.map(member => (
|
/>
|
||||||
<TaskMember key={member.id} size={32} member={member} onMemberProfile={onMemberProfile} />
|
))}
|
||||||
))}
|
<AssignUserIcon
|
||||||
<TaskDetailsAddMemberIcon ref={$addMemberRef} onClick={() => onAddMember($addMemberRef)}>
|
ref={$addMemberBtn}
|
||||||
<Plus size={16} color="#c2c6dc" />
|
onClick={() => {
|
||||||
</TaskDetailsAddMemberIcon>
|
onOpenAddMemberPopup(task, $addMemberBtn);
|
||||||
</MetaDetailContent>
|
}}
|
||||||
</MetaDetail>
|
>
|
||||||
)}
|
<Plus width={16} height={16} />
|
||||||
{task.labels.length !== 0 && (
|
</AssignUserIcon>
|
||||||
<MetaDetail>
|
</MemberList>
|
||||||
<MetaDetailTitle>LABELS</MetaDetailTitle>
|
) : (
|
||||||
<MetaDetailContent>
|
<AssignUsersButton
|
||||||
{task.labels.map(label => {
|
ref={$noMemberBtn}
|
||||||
return (
|
onClick={() => {
|
||||||
<TaskLabelItem
|
onOpenAddMemberPopup(task, $noMemberBtn);
|
||||||
key={label.projectLabel.id}
|
|
||||||
label={label}
|
|
||||||
onClick={$target => {
|
|
||||||
onOpenAddLabelPopup(task, $target);
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})}
|
|
||||||
<TaskDetailsAddLabelIcon ref={$addLabelRef} onClick={() => onAddLabel($addLabelRef)}>
|
|
||||||
<Plus size={16} color="#c2c6dc" />
|
|
||||||
</TaskDetailsAddLabelIcon>
|
|
||||||
</MetaDetailContent>
|
|
||||||
</MetaDetail>
|
|
||||||
)}
|
|
||||||
{task.dueDate && (
|
|
||||||
<MetaDetail>
|
|
||||||
<MetaDetailTitle>DUE DATE</MetaDetailTitle>
|
|
||||||
<MetaDetailContent>
|
|
||||||
<TaskDueDateButton>{moment(task.dueDate).format('MMM D [at] h:mm A')}</TaskDueDateButton>
|
|
||||||
</MetaDetailContent>
|
|
||||||
</MetaDetail>
|
|
||||||
)}
|
|
||||||
</MetaDetails>
|
|
||||||
|
|
||||||
<TaskDetailsSection>
|
|
||||||
<TaskDetailsLabel>Description</TaskDetailsLabel>
|
|
||||||
{editorOpen ? (
|
|
||||||
<DetailsEditor
|
|
||||||
description={description}
|
|
||||||
onTaskDescriptionChange={newDescription => {
|
|
||||||
setEditorOpen(false);
|
|
||||||
setDescription(newDescription);
|
|
||||||
onTaskDescriptionChange(task, newDescription);
|
|
||||||
}}
|
}}
|
||||||
onCancel={() => {
|
>
|
||||||
setEditorOpen(false);
|
<AssignUserIcon>
|
||||||
|
<User width={16} height={16} />
|
||||||
|
</AssignUserIcon>
|
||||||
|
<AssignUserLabel>No members</AssignUserLabel>
|
||||||
|
</AssignUsersButton>
|
||||||
|
)}
|
||||||
|
</AssignedUsersSection>
|
||||||
|
<ExtraActionsSection>
|
||||||
|
<DueDateTitle>ACTIONS</DueDateTitle>
|
||||||
|
<ActionButton
|
||||||
|
onClick={$target => {
|
||||||
|
onOpenAddLabelPopup(task, $target);
|
||||||
|
}}
|
||||||
|
icon={<Tags width={12} height={12} />}
|
||||||
|
>
|
||||||
|
Labels
|
||||||
|
</ActionButton>
|
||||||
|
<ActionButton
|
||||||
|
onClick={$target => {
|
||||||
|
onOpenAddChecklistPopup(task, $target);
|
||||||
|
}}
|
||||||
|
icon={<CheckSquareOutline width={12} height={12} />}
|
||||||
|
>
|
||||||
|
Checklist
|
||||||
|
</ActionButton>
|
||||||
|
<ActionButton>Cover</ActionButton>
|
||||||
|
</ExtraActionsSection>
|
||||||
|
</LeftSidebarContent>
|
||||||
|
</LeftSidebar>
|
||||||
|
<ContentContainer>
|
||||||
|
<HeaderContainer>
|
||||||
|
<HeaderInnerContainer>
|
||||||
|
<HeaderLeft>
|
||||||
|
<MarkCompleteButton
|
||||||
|
invert={task.complete ?? false}
|
||||||
|
onClick={() => {
|
||||||
|
onToggleTaskComplete(task);
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Checkmark width={8} height={8} />
|
||||||
|
<span>{task.complete ? 'Completed' : 'Mark complete'}</span>
|
||||||
|
</MarkCompleteButton>
|
||||||
|
</HeaderLeft>
|
||||||
|
<HeaderRight>
|
||||||
|
<HeaderActionIcon>
|
||||||
|
<Paperclip width={16} height={16} />
|
||||||
|
</HeaderActionIcon>
|
||||||
|
<HeaderActionIcon>
|
||||||
|
<Clone width={16} height={16} />
|
||||||
|
</HeaderActionIcon>
|
||||||
|
<HeaderActionIcon>
|
||||||
|
<Share width={16} height={16} />
|
||||||
|
</HeaderActionIcon>
|
||||||
|
<HeaderActionIcon onClick={() => onDeleteTask(task)}>
|
||||||
|
<Trash width={16} height={16} />
|
||||||
|
</HeaderActionIcon>
|
||||||
|
</HeaderRight>
|
||||||
|
</HeaderInnerContainer>
|
||||||
|
<TaskDetailsTitleWrapper>
|
||||||
|
<TaskDetailsTitle
|
||||||
|
value={taskName}
|
||||||
|
onChange={e => {
|
||||||
|
setTaskName(e.currentTarget.value);
|
||||||
|
}}
|
||||||
|
onBlur={() => {
|
||||||
|
if (taskName !== task.name) {
|
||||||
|
onTaskNameChange(task, taskName);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
</TaskDetailsTitleWrapper>
|
||||||
|
<Labels>
|
||||||
|
{task.labels.length !== 0 && (
|
||||||
|
<MetaDetailContent>
|
||||||
|
{task.labels.map(label => {
|
||||||
|
return (
|
||||||
|
<TaskLabelItem
|
||||||
|
key={label.projectLabel.id}
|
||||||
|
label={label}
|
||||||
|
onClick={$target => {
|
||||||
|
onOpenAddLabelPopup(task, $target);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
);
|
||||||
|
})}
|
||||||
|
<TaskDetailsAddLabelIcon>
|
||||||
|
<Plus width={12} height={12} />
|
||||||
|
</TaskDetailsAddLabelIcon>
|
||||||
|
</MetaDetailContent>
|
||||||
|
)}
|
||||||
|
</Labels>
|
||||||
|
</HeaderContainer>
|
||||||
|
<InnerContentContainer>
|
||||||
|
<DescriptionContainer>
|
||||||
|
<EditorContainer
|
||||||
|
onClick={e => {
|
||||||
|
if (!editTaskDescription) {
|
||||||
|
setEditTaskDescription(true);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<Editor
|
||||||
|
defaultValue={task.description ?? ''}
|
||||||
|
theme={dark}
|
||||||
|
readOnly={!editTaskDescription}
|
||||||
|
autoFocus
|
||||||
|
onChange={value => {
|
||||||
|
setSaveTimeout(() => {
|
||||||
|
clearTimeout(saveTimeout);
|
||||||
|
return setTimeout(saveDescription, 2000);
|
||||||
|
});
|
||||||
|
const text = value();
|
||||||
|
taskDescriptionRef.current = text;
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
) : (
|
</EditorContainer>
|
||||||
<TaskContent description={description} onEditContent={handleClick} />
|
</DescriptionContainer>
|
||||||
)}
|
<ChecklistSection>
|
||||||
<DragDropContext onDragEnd={onDragEnd}>
|
<DragDropContext onDragEnd={result => onDragEnd(result, task, onChecklistDrop, onChecklistItemDrop)}>
|
||||||
<Droppable direction="vertical" type="checklist" droppableId="root">
|
<Droppable direction="vertical" type="checklist" droppableId="root">
|
||||||
{dropProvided => (
|
{dropProvided => (
|
||||||
<ChecklistContainer {...dropProvided.droppableProps} ref={dropProvided.innerRef}>
|
<ChecklistContainer {...dropProvided.droppableProps} ref={dropProvided.innerRef}>
|
||||||
@ -442,9 +391,9 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
|||||||
complete={item.complete}
|
complete={item.complete}
|
||||||
onDeleteItem={onDeleteItem}
|
onDeleteItem={onDeleteItem}
|
||||||
onChangeName={onChangeItemName}
|
onChangeName={onChangeItemName}
|
||||||
onToggleItem={(itemID, complete) =>
|
onToggleItem={(itemID, complete) => {
|
||||||
onToggleChecklistItem(item.id, complete)
|
onToggleChecklistItem(item.id, complete);
|
||||||
}
|
}}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
</Draggable>
|
</Draggable>
|
||||||
@ -463,32 +412,54 @@ const TaskDetails: React.FC<TaskDetailsProps> = ({
|
|||||||
)}
|
)}
|
||||||
</Droppable>
|
</Droppable>
|
||||||
</DragDropContext>
|
</DragDropContext>
|
||||||
</TaskDetailsSection>
|
</ChecklistSection>
|
||||||
</TaskDetailsContent>
|
<TabBarSection>
|
||||||
<TaskDetailsSidebar>
|
<TabBarItem>Activity</TabBarItem>
|
||||||
<ActionButtons>
|
</TabBarSection>
|
||||||
<ActionButtonsTitle>ADD TO CARD</ActionButtonsTitle>
|
<ActivitySection />
|
||||||
<ActionButton justifyTextContent="flex-start" onClick={() => onToggleTaskComplete(task)}>
|
</InnerContentContainer>
|
||||||
{task.complete ? 'Mark Incomplete' : 'Mark Complete'}
|
<CommentContainer>
|
||||||
</ActionButton>
|
{me && (
|
||||||
<ActionButton justifyTextContent="flex-start" onClick={$target => onAddMember($target)}>
|
<CommentInnerWrapper>
|
||||||
Members
|
<CommentProfile
|
||||||
</ActionButton>
|
member={me}
|
||||||
<ActionButton justifyTextContent="flex-start" onClick={$target => onAddLabel($target)}>
|
size={32}
|
||||||
Labels
|
onMemberProfile={$target => {
|
||||||
</ActionButton>
|
onMemberProfile($target, me.id);
|
||||||
<ActionButton justifyTextContent="flex-start" onClick={$target => onAddChecklist($target)}>
|
}}
|
||||||
Checklist
|
/>
|
||||||
</ActionButton>
|
<CommentEditorContainer>
|
||||||
<ActionButton justifyTextContent="flex-start" onClick={$target => onOpenDueDatePopop(task, $target)}>
|
<CommentTextArea
|
||||||
Due Date
|
disabled
|
||||||
</ActionButton>
|
placeholder="Write a comment..."
|
||||||
<ActionButton justifyTextContent="flex-start">Attachment</ActionButton>
|
onFocus={() => {
|
||||||
<ActionButton justifyTextContent="flex-start">Cover</ActionButton>
|
setShowCommentActions(true);
|
||||||
</ActionButtons>
|
}}
|
||||||
</TaskDetailsSidebar>
|
onBlur={() => {
|
||||||
</TaskDetailsWrapper>
|
setShowCommentActions(false);
|
||||||
</>
|
}}
|
||||||
|
/>
|
||||||
|
<CommentEditorActions visible={showCommentActions}>
|
||||||
|
<CommentEditorActionIcon>
|
||||||
|
<Paperclip width={12} height={12} />
|
||||||
|
</CommentEditorActionIcon>
|
||||||
|
<CommentEditorActionIcon>
|
||||||
|
<At width={12} height={12} />
|
||||||
|
</CommentEditorActionIcon>
|
||||||
|
<CommentEditorActionIcon>
|
||||||
|
<Smile width={12} height={12} />
|
||||||
|
</CommentEditorActionIcon>
|
||||||
|
<CommentEditorActionIcon>
|
||||||
|
<Task width={12} height={12} />
|
||||||
|
</CommentEditorActionIcon>
|
||||||
|
<CommentEditorSaveButton>Save</CommentEditorSaveButton>
|
||||||
|
</CommentEditorActions>
|
||||||
|
</CommentEditorContainer>
|
||||||
|
</CommentInnerWrapper>
|
||||||
|
)}
|
||||||
|
</CommentContainer>
|
||||||
|
</ContentContainer>
|
||||||
|
</Container>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
90
frontend/src/shared/components/TaskDetails/onDragEnd.ts
Normal file
90
frontend/src/shared/components/TaskDetails/onDragEnd.ts
Normal file
@ -0,0 +1,90 @@
|
|||||||
|
import {
|
||||||
|
getSortedDraggables,
|
||||||
|
isPositionChanged,
|
||||||
|
getNewDraggablePosition,
|
||||||
|
getAfterDropDraggableList,
|
||||||
|
} from 'shared/utils/draggables';
|
||||||
|
import { DropResult } from 'react-beautiful-dnd';
|
||||||
|
|
||||||
|
type OnChecklistDropFn = (checklist: TaskChecklist) => void;
|
||||||
|
type OnChecklistItemDropFn = (prevChecklistID: string, checklistID: string, checklistItem: TaskChecklistItem) => void;
|
||||||
|
|
||||||
|
const onDragEnd = (
|
||||||
|
{ draggableId, source, destination, type }: DropResult,
|
||||||
|
task: Task,
|
||||||
|
onChecklistDrop: OnChecklistDropFn,
|
||||||
|
onChecklistItemDrop: OnChecklistItemDropFn,
|
||||||
|
) => {
|
||||||
|
if (typeof destination === 'undefined') return;
|
||||||
|
if (!isPositionChanged(source, destination)) return;
|
||||||
|
|
||||||
|
const isChecklist = type === 'checklist';
|
||||||
|
const isSameChecklist = destination.droppableId === source.droppableId;
|
||||||
|
let droppedDraggable: DraggableElement | null = null;
|
||||||
|
let beforeDropDraggables: Array<DraggableElement> | null = null;
|
||||||
|
|
||||||
|
if (!task.checklists) return;
|
||||||
|
if (isChecklist) {
|
||||||
|
const droppedGroup = task.checklists.find(taskGroup => taskGroup.id === draggableId);
|
||||||
|
if (droppedGroup) {
|
||||||
|
droppedDraggable = {
|
||||||
|
id: draggableId,
|
||||||
|
position: droppedGroup.position,
|
||||||
|
};
|
||||||
|
beforeDropDraggables = getSortedDraggables(
|
||||||
|
task.checklists.map(checklist => {
|
||||||
|
return { id: checklist.id, position: checklist.position };
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
if (droppedDraggable === null || beforeDropDraggables === null) {
|
||||||
|
throw new Error('before drop draggables is null');
|
||||||
|
}
|
||||||
|
const afterDropDraggables = getAfterDropDraggableList(
|
||||||
|
beforeDropDraggables,
|
||||||
|
droppedDraggable,
|
||||||
|
isChecklist,
|
||||||
|
isSameChecklist,
|
||||||
|
destination,
|
||||||
|
);
|
||||||
|
const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
|
||||||
|
onChecklistDrop({ ...droppedGroup, position: newPosition });
|
||||||
|
} else {
|
||||||
|
throw new Error('task group can not be found');
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const targetChecklist = task.checklists.findIndex(
|
||||||
|
checklist => checklist.items.findIndex(item => item.id === draggableId) !== -1,
|
||||||
|
);
|
||||||
|
const droppedChecklistItem = task.checklists[targetChecklist].items.find(item => item.id === draggableId);
|
||||||
|
|
||||||
|
if (droppedChecklistItem) {
|
||||||
|
droppedDraggable = {
|
||||||
|
id: draggableId,
|
||||||
|
position: droppedChecklistItem.position,
|
||||||
|
};
|
||||||
|
beforeDropDraggables = getSortedDraggables(
|
||||||
|
task.checklists[targetChecklist].items.map(item => {
|
||||||
|
return { id: item.id, position: item.position };
|
||||||
|
}),
|
||||||
|
);
|
||||||
|
if (droppedDraggable === null || beforeDropDraggables === null) {
|
||||||
|
throw new Error('before drop draggables is null');
|
||||||
|
}
|
||||||
|
const afterDropDraggables = getAfterDropDraggableList(
|
||||||
|
beforeDropDraggables,
|
||||||
|
droppedDraggable,
|
||||||
|
isChecklist,
|
||||||
|
isSameChecklist,
|
||||||
|
destination,
|
||||||
|
);
|
||||||
|
const newPosition = getNewDraggablePosition(afterDropDraggables, destination.index);
|
||||||
|
const newItem = {
|
||||||
|
...droppedChecklistItem,
|
||||||
|
position: newPosition,
|
||||||
|
};
|
||||||
|
onChecklistItemDrop(droppedChecklistItem.taskChecklistID, destination.droppableId, newItem);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
export default onDragEnd;
|
@ -5,6 +5,8 @@ import Button from 'shared/components/Button';
|
|||||||
import { Taskcafe } from 'shared/icons';
|
import { Taskcafe } from 'shared/icons';
|
||||||
import { NavLink, Link } from 'react-router-dom';
|
import { NavLink, Link } from 'react-router-dom';
|
||||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
import TaskAssignee from 'shared/components/TaskAssignee';
|
||||||
|
import { useRef } from 'react';
|
||||||
|
|
||||||
export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
|
export const ProjectMember = styled(TaskAssignee)<{ zIndex: number }>`
|
||||||
z-index: ${props => props.zIndex};
|
z-index: ${props => props.zIndex};
|
||||||
position: relative;
|
position: relative;
|
||||||
@ -64,7 +66,7 @@ export const ProfileNameWrapper = styled.div`
|
|||||||
line-height: 1.25;
|
line-height: 1.25;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const IconContainer = styled.div<{ disabled?: boolean }>`
|
export const IconContainerWrapper = styled.div<{ disabled?: boolean }>`
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
${props =>
|
${props =>
|
||||||
@ -85,7 +87,10 @@ export const ProfileNameSecondary = styled.small`
|
|||||||
color: #c2c6dc;
|
color: #c2c6dc;
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export const ProfileIcon = styled.div<{ bgColor: string | null; backgroundURL: string | null }>`
|
export const ProfileIcon = styled.div<{
|
||||||
|
bgColor: string | null;
|
||||||
|
backgroundURL: string | null;
|
||||||
|
}>`
|
||||||
width: 40px;
|
width: 40px;
|
||||||
height: 40px;
|
height: 40px;
|
||||||
border-radius: 9999px;
|
border-radius: 9999px;
|
||||||
|
@ -2,17 +2,16 @@ import React, { useRef, useState, useEffect } from 'react';
|
|||||||
import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
|
import { Home, Star, Bell, AngleDown, BarChart, CheckCircle } from 'shared/icons';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import ProfileIcon from 'shared/components/ProfileIcon';
|
import ProfileIcon from 'shared/components/ProfileIcon';
|
||||||
import TaskAssignee from 'shared/components/TaskAssignee';
|
import { usePopup } from 'shared/components/PopupMenu';
|
||||||
import { usePopup, Popup } from 'shared/components/PopupMenu';
|
|
||||||
import { RoleCode } from 'shared/generated/graphql';
|
import { RoleCode } from 'shared/generated/graphql';
|
||||||
import MiniProfile from 'shared/components/MiniProfile';
|
import NOOP from 'shared/utils/noop';
|
||||||
import {
|
import {
|
||||||
TaskcafeLogo,
|
TaskcafeLogo,
|
||||||
TaskcafeTitle,
|
TaskcafeTitle,
|
||||||
ProjectFinder,
|
ProjectFinder,
|
||||||
LogoContainer,
|
LogoContainer,
|
||||||
NavSeparator,
|
NavSeparator,
|
||||||
IconContainer,
|
IconContainerWrapper,
|
||||||
ProjectNameTextarea,
|
ProjectNameTextarea,
|
||||||
InviteButton,
|
InviteButton,
|
||||||
GlobalActions,
|
GlobalActions,
|
||||||
@ -31,7 +30,28 @@ import {
|
|||||||
ProjectMember,
|
ProjectMember,
|
||||||
ProjectMembers,
|
ProjectMembers,
|
||||||
} from './Styles';
|
} from './Styles';
|
||||||
import { Link } from 'react-router-dom';
|
|
||||||
|
type IconContainerProps = {
|
||||||
|
disabled?: boolean;
|
||||||
|
onClick?: ($target: React.RefObject<HTMLElement>) => void;
|
||||||
|
};
|
||||||
|
|
||||||
|
const IconContainer: React.FC<IconContainerProps> = ({ onClick, disabled = false, children }) => {
|
||||||
|
const $container = useRef<HTMLDivElement>(null);
|
||||||
|
return (
|
||||||
|
<IconContainerWrapper
|
||||||
|
ref={$container}
|
||||||
|
disabled={disabled}
|
||||||
|
onClick={() => {
|
||||||
|
if (onClick) {
|
||||||
|
onClick($container);
|
||||||
|
}
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</IconContainerWrapper>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
const HomeDashboard = styled(Home)``;
|
const HomeDashboard = styled(Home)``;
|
||||||
|
|
||||||
@ -145,7 +165,7 @@ type NavBarProps = {
|
|||||||
onFavorite?: () => void;
|
onFavorite?: () => void;
|
||||||
onProfileClick: ($target: React.RefObject<HTMLElement>) => void;
|
onProfileClick: ($target: React.RefObject<HTMLElement>) => void;
|
||||||
onSaveName?: (name: string) => void;
|
onSaveName?: (name: string) => void;
|
||||||
onNotificationClick: () => void;
|
onNotificationClick: ($target: React.RefObject<HTMLElement>) => void;
|
||||||
canEditProjectName?: boolean;
|
canEditProjectName?: boolean;
|
||||||
canInviteUser?: boolean;
|
canInviteUser?: boolean;
|
||||||
onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
|
onInviteUser?: ($target: React.RefObject<HTMLElement>) => void;
|
||||||
@ -257,16 +277,16 @@ const NavBar: React.FC<NavBarProps> = ({
|
|||||||
<ProjectFinder onClick={onOpenProjectFinder} variant="gradient">
|
<ProjectFinder onClick={onOpenProjectFinder} variant="gradient">
|
||||||
Projects
|
Projects
|
||||||
</ProjectFinder>
|
</ProjectFinder>
|
||||||
<IconContainer onClick={onDashboardClick}>
|
<IconContainer onClick={() => onDashboardClick()}>
|
||||||
<HomeDashboard width={20} height={20} />
|
<HomeDashboard width={20} height={20} />
|
||||||
</IconContainer>
|
</IconContainer>
|
||||||
<IconContainer disabled>
|
<IconContainer disabled onClick={NOOP}>
|
||||||
<CheckCircle width={20} height={20} />
|
<CheckCircle width={20} height={20} />
|
||||||
</IconContainer>
|
</IconContainer>
|
||||||
<IconContainer onClick={onNotificationClick}>
|
<IconContainer disabled onClick={onNotificationClick}>
|
||||||
<Bell color="#c2c6dc" size={20} />
|
<Bell color="#c2c6dc" size={20} />
|
||||||
</IconContainer>
|
</IconContainer>
|
||||||
<IconContainer disabled>
|
<IconContainer disabled onClick={NOOP}>
|
||||||
<BarChart width={20} height={20} />
|
<BarChart width={20} height={20} />
|
||||||
</IconContainer>
|
</IconContainer>
|
||||||
|
|
||||||
|
@ -162,6 +162,7 @@ export type Task = {
|
|||||||
description?: Maybe<Scalars['String']>;
|
description?: Maybe<Scalars['String']>;
|
||||||
dueDate?: Maybe<Scalars['Time']>;
|
dueDate?: Maybe<Scalars['Time']>;
|
||||||
complete: Scalars['Boolean'];
|
complete: Scalars['Boolean'];
|
||||||
|
completedAt?: Maybe<Scalars['Time']>;
|
||||||
assigned: Array<Member>;
|
assigned: Array<Member>;
|
||||||
labels: Array<TaskLabel>;
|
labels: Array<TaskLabel>;
|
||||||
checklists: Array<TaskChecklist>;
|
checklists: Array<TaskChecklist>;
|
||||||
@ -212,22 +213,18 @@ export enum ObjectType {
|
|||||||
|
|
||||||
export type Query = {
|
export type Query = {
|
||||||
__typename?: 'Query';
|
__typename?: 'Query';
|
||||||
organizations: Array<Organization>;
|
|
||||||
users: Array<UserAccount>;
|
|
||||||
findUser: UserAccount;
|
|
||||||
findProject: Project;
|
findProject: Project;
|
||||||
findTask: Task;
|
findTask: Task;
|
||||||
projects: Array<Project>;
|
|
||||||
findTeam: Team;
|
findTeam: Team;
|
||||||
teams: Array<Team>;
|
findUser: UserAccount;
|
||||||
labelColors: Array<LabelColor>;
|
labelColors: Array<LabelColor>;
|
||||||
taskGroups: Array<TaskGroup>;
|
|
||||||
me: MePayload;
|
me: MePayload;
|
||||||
};
|
notifications: Array<Notification>;
|
||||||
|
organizations: Array<Organization>;
|
||||||
|
projects: Array<Project>;
|
||||||
export type QueryFindUserArgs = {
|
taskGroups: Array<TaskGroup>;
|
||||||
input: FindUser;
|
teams: Array<Team>;
|
||||||
|
users: Array<UserAccount>;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
@ -241,13 +238,18 @@ export type QueryFindTaskArgs = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export type QueryProjectsArgs = {
|
export type QueryFindTeamArgs = {
|
||||||
input?: Maybe<ProjectsFilter>;
|
input: FindTeam;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
export type QueryFindTeamArgs = {
|
export type QueryFindUserArgs = {
|
||||||
input: FindTeam;
|
input: FindUser;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export type QueryProjectsArgs = {
|
||||||
|
input?: Maybe<ProjectsFilter>;
|
||||||
};
|
};
|
||||||
|
|
||||||
export type Mutation = {
|
export type Mutation = {
|
||||||
@ -273,13 +275,16 @@ export type Mutation = {
|
|||||||
deleteTaskChecklist: DeleteTaskChecklistPayload;
|
deleteTaskChecklist: DeleteTaskChecklistPayload;
|
||||||
deleteTaskChecklistItem: DeleteTaskChecklistItemPayload;
|
deleteTaskChecklistItem: DeleteTaskChecklistItemPayload;
|
||||||
deleteTaskGroup: DeleteTaskGroupPayload;
|
deleteTaskGroup: DeleteTaskGroupPayload;
|
||||||
|
deleteTaskGroupTasks: DeleteTaskGroupTasksPayload;
|
||||||
deleteTeam: DeleteTeamPayload;
|
deleteTeam: DeleteTeamPayload;
|
||||||
deleteTeamMember: DeleteTeamMemberPayload;
|
deleteTeamMember: DeleteTeamMemberPayload;
|
||||||
deleteUserAccount: DeleteUserAccountPayload;
|
deleteUserAccount: DeleteUserAccountPayload;
|
||||||
|
duplicateTaskGroup: DuplicateTaskGroupPayload;
|
||||||
logoutUser: Scalars['Boolean'];
|
logoutUser: Scalars['Boolean'];
|
||||||
removeTaskLabel: Task;
|
removeTaskLabel: Task;
|
||||||
setTaskChecklistItemComplete: TaskChecklistItem;
|
setTaskChecklistItemComplete: TaskChecklistItem;
|
||||||
setTaskComplete: Task;
|
setTaskComplete: Task;
|
||||||
|
sortTaskGroup: SortTaskGroupPayload;
|
||||||
toggleTaskLabel: ToggleTaskLabelPayload;
|
toggleTaskLabel: ToggleTaskLabelPayload;
|
||||||
unassignTask: Task;
|
unassignTask: Task;
|
||||||
updateProjectLabel: ProjectLabel;
|
updateProjectLabel: ProjectLabel;
|
||||||
@ -403,6 +408,11 @@ export type MutationDeleteTaskGroupArgs = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export type MutationDeleteTaskGroupTasksArgs = {
|
||||||
|
input: DeleteTaskGroupTasks;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
export type MutationDeleteTeamArgs = {
|
export type MutationDeleteTeamArgs = {
|
||||||
input: DeleteTeam;
|
input: DeleteTeam;
|
||||||
};
|
};
|
||||||
@ -418,6 +428,11 @@ export type MutationDeleteUserAccountArgs = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export type MutationDuplicateTaskGroupArgs = {
|
||||||
|
input: DuplicateTaskGroup;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
export type MutationLogoutUserArgs = {
|
export type MutationLogoutUserArgs = {
|
||||||
input: LogoutUser;
|
input: LogoutUser;
|
||||||
};
|
};
|
||||||
@ -438,6 +453,11 @@ export type MutationSetTaskCompleteArgs = {
|
|||||||
};
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export type MutationSortTaskGroupArgs = {
|
||||||
|
input: SortTaskGroup;
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
export type MutationToggleTaskLabelArgs = {
|
export type MutationToggleTaskLabelArgs = {
|
||||||
input: ToggleTaskLabelInput;
|
input: ToggleTaskLabelInput;
|
||||||
};
|
};
|
||||||
@ -576,6 +596,42 @@ export type FindTeam = {
|
|||||||
teamID: Scalars['UUID'];
|
teamID: Scalars['UUID'];
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export enum EntityType {
|
||||||
|
Task = 'TASK'
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ActorType {
|
||||||
|
User = 'USER'
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum ActionType {
|
||||||
|
TaskMemberAdded = 'TASK_MEMBER_ADDED'
|
||||||
|
}
|
||||||
|
|
||||||
|
export type NotificationActor = {
|
||||||
|
__typename?: 'NotificationActor';
|
||||||
|
id: Scalars['UUID'];
|
||||||
|
type: ActorType;
|
||||||
|
name: Scalars['String'];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type NotificationEntity = {
|
||||||
|
__typename?: 'NotificationEntity';
|
||||||
|
id: Scalars['UUID'];
|
||||||
|
type: EntityType;
|
||||||
|
name: Scalars['String'];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type Notification = {
|
||||||
|
__typename?: 'Notification';
|
||||||
|
id: Scalars['ID'];
|
||||||
|
entity: NotificationEntity;
|
||||||
|
actionType: ActionType;
|
||||||
|
actor: NotificationActor;
|
||||||
|
read: Scalars['Boolean'];
|
||||||
|
createdAt: Scalars['Time'];
|
||||||
|
};
|
||||||
|
|
||||||
export type NewProject = {
|
export type NewProject = {
|
||||||
userID: Scalars['UUID'];
|
userID: Scalars['UUID'];
|
||||||
teamID: Scalars['UUID'];
|
teamID: Scalars['UUID'];
|
||||||
@ -785,6 +841,44 @@ export type DeleteTaskChecklistPayload = {
|
|||||||
taskChecklist: TaskChecklist;
|
taskChecklist: TaskChecklist;
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export type DeleteTaskGroupTasks = {
|
||||||
|
taskGroupID: Scalars['UUID'];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type DeleteTaskGroupTasksPayload = {
|
||||||
|
__typename?: 'DeleteTaskGroupTasksPayload';
|
||||||
|
taskGroupID: Scalars['UUID'];
|
||||||
|
tasks: Array<Scalars['UUID']>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type TaskPositionUpdate = {
|
||||||
|
taskID: Scalars['UUID'];
|
||||||
|
position: Scalars['Float'];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type SortTaskGroupPayload = {
|
||||||
|
__typename?: 'SortTaskGroupPayload';
|
||||||
|
taskGroupID: Scalars['UUID'];
|
||||||
|
tasks: Array<Task>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type SortTaskGroup = {
|
||||||
|
taskGroupID: Scalars['UUID'];
|
||||||
|
tasks: Array<TaskPositionUpdate>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type DuplicateTaskGroup = {
|
||||||
|
projectID: Scalars['UUID'];
|
||||||
|
taskGroupID: Scalars['UUID'];
|
||||||
|
name: Scalars['String'];
|
||||||
|
position: Scalars['Float'];
|
||||||
|
};
|
||||||
|
|
||||||
|
export type DuplicateTaskGroupPayload = {
|
||||||
|
__typename?: 'DuplicateTaskGroupPayload';
|
||||||
|
taskGroup: TaskGroup;
|
||||||
|
};
|
||||||
|
|
||||||
export type NewTaskGroupLocation = {
|
export type NewTaskGroupLocation = {
|
||||||
taskGroupID: Scalars['UUID'];
|
taskGroupID: Scalars['UUID'];
|
||||||
position: Scalars['Float'];
|
position: Scalars['Float'];
|
||||||
@ -1184,12 +1278,22 @@ export type FindTaskQuery = (
|
|||||||
& Pick<ProfileIcon, 'url' | 'initials' | 'bgColor'>
|
& Pick<ProfileIcon, 'url' | 'initials' | 'bgColor'>
|
||||||
) }
|
) }
|
||||||
)> }
|
)> }
|
||||||
|
), me: (
|
||||||
|
{ __typename?: 'MePayload' }
|
||||||
|
& { user: (
|
||||||
|
{ __typename?: 'UserAccount' }
|
||||||
|
& Pick<UserAccount, 'id' | 'fullName'>
|
||||||
|
& { profileIcon: (
|
||||||
|
{ __typename?: 'ProfileIcon' }
|
||||||
|
& Pick<ProfileIcon, 'initials' | 'bgColor' | 'url'>
|
||||||
|
) }
|
||||||
|
) }
|
||||||
) }
|
) }
|
||||||
);
|
);
|
||||||
|
|
||||||
export type TaskFieldsFragment = (
|
export type TaskFieldsFragment = (
|
||||||
{ __typename?: 'Task' }
|
{ __typename?: 'Task' }
|
||||||
& Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'complete' | 'position'>
|
& Pick<Task, 'id' | 'name' | 'description' | 'dueDate' | 'complete' | 'completedAt' | 'position'>
|
||||||
& { badges: (
|
& { badges: (
|
||||||
{ __typename?: 'TaskBadges' }
|
{ __typename?: 'TaskBadges' }
|
||||||
& { checklist?: Maybe<(
|
& { checklist?: Maybe<(
|
||||||
@ -1527,6 +1631,60 @@ export type UpdateTaskChecklistNameMutation = (
|
|||||||
) }
|
) }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export type DeleteTaskGroupTasksMutationVariables = {
|
||||||
|
taskGroupID: Scalars['UUID'];
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export type DeleteTaskGroupTasksMutation = (
|
||||||
|
{ __typename?: 'Mutation' }
|
||||||
|
& { deleteTaskGroupTasks: (
|
||||||
|
{ __typename?: 'DeleteTaskGroupTasksPayload' }
|
||||||
|
& Pick<DeleteTaskGroupTasksPayload, 'tasks' | 'taskGroupID'>
|
||||||
|
) }
|
||||||
|
);
|
||||||
|
|
||||||
|
export type DuplicateTaskGroupMutationVariables = {
|
||||||
|
taskGroupID: Scalars['UUID'];
|
||||||
|
name: Scalars['String'];
|
||||||
|
position: Scalars['Float'];
|
||||||
|
projectID: Scalars['UUID'];
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export type DuplicateTaskGroupMutation = (
|
||||||
|
{ __typename?: 'Mutation' }
|
||||||
|
& { duplicateTaskGroup: (
|
||||||
|
{ __typename?: 'DuplicateTaskGroupPayload' }
|
||||||
|
& { taskGroup: (
|
||||||
|
{ __typename?: 'TaskGroup' }
|
||||||
|
& Pick<TaskGroup, 'id' | 'name' | 'position'>
|
||||||
|
& { tasks: Array<(
|
||||||
|
{ __typename?: 'Task' }
|
||||||
|
& TaskFieldsFragment
|
||||||
|
)> }
|
||||||
|
) }
|
||||||
|
) }
|
||||||
|
);
|
||||||
|
|
||||||
|
export type SortTaskGroupMutationVariables = {
|
||||||
|
tasks: Array<TaskPositionUpdate>;
|
||||||
|
taskGroupID: Scalars['UUID'];
|
||||||
|
};
|
||||||
|
|
||||||
|
|
||||||
|
export type SortTaskGroupMutation = (
|
||||||
|
{ __typename?: 'Mutation' }
|
||||||
|
& { sortTaskGroup: (
|
||||||
|
{ __typename?: 'SortTaskGroupPayload' }
|
||||||
|
& Pick<SortTaskGroupPayload, 'taskGroupID'>
|
||||||
|
& { tasks: Array<(
|
||||||
|
{ __typename?: 'Task' }
|
||||||
|
& Pick<Task, 'id' | 'position'>
|
||||||
|
)> }
|
||||||
|
) }
|
||||||
|
);
|
||||||
|
|
||||||
export type UpdateTaskGroupNameMutationVariables = {
|
export type UpdateTaskGroupNameMutationVariables = {
|
||||||
taskGroupID: Scalars['UUID'];
|
taskGroupID: Scalars['UUID'];
|
||||||
name: Scalars['String'];
|
name: Scalars['String'];
|
||||||
@ -1744,6 +1902,40 @@ export type ToggleTaskLabelMutation = (
|
|||||||
) }
|
) }
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export type TopNavbarQueryVariables = {};
|
||||||
|
|
||||||
|
|
||||||
|
export type TopNavbarQuery = (
|
||||||
|
{ __typename?: 'Query' }
|
||||||
|
& { notifications: Array<(
|
||||||
|
{ __typename?: 'Notification' }
|
||||||
|
& Pick<Notification, 'createdAt' | 'read' | 'id' | 'actionType'>
|
||||||
|
& { entity: (
|
||||||
|
{ __typename?: 'NotificationEntity' }
|
||||||
|
& Pick<NotificationEntity, 'id' | 'type' | 'name'>
|
||||||
|
), actor: (
|
||||||
|
{ __typename?: 'NotificationActor' }
|
||||||
|
& Pick<NotificationActor, 'id' | 'type' | 'name'>
|
||||||
|
) }
|
||||||
|
)>, me: (
|
||||||
|
{ __typename?: 'MePayload' }
|
||||||
|
& { user: (
|
||||||
|
{ __typename?: 'UserAccount' }
|
||||||
|
& Pick<UserAccount, 'id' | 'fullName'>
|
||||||
|
& { profileIcon: (
|
||||||
|
{ __typename?: 'ProfileIcon' }
|
||||||
|
& Pick<ProfileIcon, 'initials' | 'bgColor' | 'url'>
|
||||||
|
) }
|
||||||
|
), teamRoles: Array<(
|
||||||
|
{ __typename?: 'TeamRole' }
|
||||||
|
& Pick<TeamRole, 'teamID' | 'roleCode'>
|
||||||
|
)>, projectRoles: Array<(
|
||||||
|
{ __typename?: 'ProjectRole' }
|
||||||
|
& Pick<ProjectRole, 'projectID' | 'roleCode'>
|
||||||
|
)> }
|
||||||
|
) }
|
||||||
|
);
|
||||||
|
|
||||||
export type UnassignTaskMutationVariables = {
|
export type UnassignTaskMutationVariables = {
|
||||||
taskID: Scalars['UUID'];
|
taskID: Scalars['UUID'];
|
||||||
userID: Scalars['UUID'];
|
userID: Scalars['UUID'];
|
||||||
@ -2013,6 +2205,7 @@ export const TaskFieldsFragmentDoc = gql`
|
|||||||
description
|
description
|
||||||
dueDate
|
dueDate
|
||||||
complete
|
complete
|
||||||
|
completedAt
|
||||||
position
|
position
|
||||||
badges {
|
badges {
|
||||||
checklist {
|
checklist {
|
||||||
@ -2511,6 +2704,17 @@ export const FindTaskDocument = gql`
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
me {
|
||||||
|
user {
|
||||||
|
id
|
||||||
|
fullName
|
||||||
|
profileIcon {
|
||||||
|
initials
|
||||||
|
bgColor
|
||||||
|
url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
@ -3198,6 +3402,118 @@ export function useUpdateTaskChecklistNameMutation(baseOptions?: ApolloReactHook
|
|||||||
export type UpdateTaskChecklistNameMutationHookResult = ReturnType<typeof useUpdateTaskChecklistNameMutation>;
|
export type UpdateTaskChecklistNameMutationHookResult = ReturnType<typeof useUpdateTaskChecklistNameMutation>;
|
||||||
export type UpdateTaskChecklistNameMutationResult = ApolloReactCommon.MutationResult<UpdateTaskChecklistNameMutation>;
|
export type UpdateTaskChecklistNameMutationResult = ApolloReactCommon.MutationResult<UpdateTaskChecklistNameMutation>;
|
||||||
export type UpdateTaskChecklistNameMutationOptions = ApolloReactCommon.BaseMutationOptions<UpdateTaskChecklistNameMutation, UpdateTaskChecklistNameMutationVariables>;
|
export type UpdateTaskChecklistNameMutationOptions = ApolloReactCommon.BaseMutationOptions<UpdateTaskChecklistNameMutation, UpdateTaskChecklistNameMutationVariables>;
|
||||||
|
export const DeleteTaskGroupTasksDocument = gql`
|
||||||
|
mutation deleteTaskGroupTasks($taskGroupID: UUID!) {
|
||||||
|
deleteTaskGroupTasks(input: {taskGroupID: $taskGroupID}) {
|
||||||
|
tasks
|
||||||
|
taskGroupID
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
export type DeleteTaskGroupTasksMutationFn = ApolloReactCommon.MutationFunction<DeleteTaskGroupTasksMutation, DeleteTaskGroupTasksMutationVariables>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* __useDeleteTaskGroupTasksMutation__
|
||||||
|
*
|
||||||
|
* To run a mutation, you first call `useDeleteTaskGroupTasksMutation` within a React component and pass it any options that fit your needs.
|
||||||
|
* When your component renders, `useDeleteTaskGroupTasksMutation` returns a tuple that includes:
|
||||||
|
* - A mutate function that you can call at any time to execute the mutation
|
||||||
|
* - An object with fields that represent the current status of the mutation's execution
|
||||||
|
*
|
||||||
|
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* const [deleteTaskGroupTasksMutation, { data, loading, error }] = useDeleteTaskGroupTasksMutation({
|
||||||
|
* variables: {
|
||||||
|
* taskGroupID: // value for 'taskGroupID'
|
||||||
|
* },
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
export function useDeleteTaskGroupTasksMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<DeleteTaskGroupTasksMutation, DeleteTaskGroupTasksMutationVariables>) {
|
||||||
|
return ApolloReactHooks.useMutation<DeleteTaskGroupTasksMutation, DeleteTaskGroupTasksMutationVariables>(DeleteTaskGroupTasksDocument, baseOptions);
|
||||||
|
}
|
||||||
|
export type DeleteTaskGroupTasksMutationHookResult = ReturnType<typeof useDeleteTaskGroupTasksMutation>;
|
||||||
|
export type DeleteTaskGroupTasksMutationResult = ApolloReactCommon.MutationResult<DeleteTaskGroupTasksMutation>;
|
||||||
|
export type DeleteTaskGroupTasksMutationOptions = ApolloReactCommon.BaseMutationOptions<DeleteTaskGroupTasksMutation, DeleteTaskGroupTasksMutationVariables>;
|
||||||
|
export const DuplicateTaskGroupDocument = gql`
|
||||||
|
mutation duplicateTaskGroup($taskGroupID: UUID!, $name: String!, $position: Float!, $projectID: UUID!) {
|
||||||
|
duplicateTaskGroup(input: {projectID: $projectID, taskGroupID: $taskGroupID, name: $name, position: $position}) {
|
||||||
|
taskGroup {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
position
|
||||||
|
tasks {
|
||||||
|
...TaskFields
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
${TaskFieldsFragmentDoc}`;
|
||||||
|
export type DuplicateTaskGroupMutationFn = ApolloReactCommon.MutationFunction<DuplicateTaskGroupMutation, DuplicateTaskGroupMutationVariables>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* __useDuplicateTaskGroupMutation__
|
||||||
|
*
|
||||||
|
* To run a mutation, you first call `useDuplicateTaskGroupMutation` within a React component and pass it any options that fit your needs.
|
||||||
|
* When your component renders, `useDuplicateTaskGroupMutation` returns a tuple that includes:
|
||||||
|
* - A mutate function that you can call at any time to execute the mutation
|
||||||
|
* - An object with fields that represent the current status of the mutation's execution
|
||||||
|
*
|
||||||
|
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* const [duplicateTaskGroupMutation, { data, loading, error }] = useDuplicateTaskGroupMutation({
|
||||||
|
* variables: {
|
||||||
|
* taskGroupID: // value for 'taskGroupID'
|
||||||
|
* name: // value for 'name'
|
||||||
|
* position: // value for 'position'
|
||||||
|
* projectID: // value for 'projectID'
|
||||||
|
* },
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
export function useDuplicateTaskGroupMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<DuplicateTaskGroupMutation, DuplicateTaskGroupMutationVariables>) {
|
||||||
|
return ApolloReactHooks.useMutation<DuplicateTaskGroupMutation, DuplicateTaskGroupMutationVariables>(DuplicateTaskGroupDocument, baseOptions);
|
||||||
|
}
|
||||||
|
export type DuplicateTaskGroupMutationHookResult = ReturnType<typeof useDuplicateTaskGroupMutation>;
|
||||||
|
export type DuplicateTaskGroupMutationResult = ApolloReactCommon.MutationResult<DuplicateTaskGroupMutation>;
|
||||||
|
export type DuplicateTaskGroupMutationOptions = ApolloReactCommon.BaseMutationOptions<DuplicateTaskGroupMutation, DuplicateTaskGroupMutationVariables>;
|
||||||
|
export const SortTaskGroupDocument = gql`
|
||||||
|
mutation sortTaskGroup($tasks: [TaskPositionUpdate!]!, $taskGroupID: UUID!) {
|
||||||
|
sortTaskGroup(input: {taskGroupID: $taskGroupID, tasks: $tasks}) {
|
||||||
|
taskGroupID
|
||||||
|
tasks {
|
||||||
|
id
|
||||||
|
position
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
export type SortTaskGroupMutationFn = ApolloReactCommon.MutationFunction<SortTaskGroupMutation, SortTaskGroupMutationVariables>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* __useSortTaskGroupMutation__
|
||||||
|
*
|
||||||
|
* To run a mutation, you first call `useSortTaskGroupMutation` within a React component and pass it any options that fit your needs.
|
||||||
|
* When your component renders, `useSortTaskGroupMutation` returns a tuple that includes:
|
||||||
|
* - A mutate function that you can call at any time to execute the mutation
|
||||||
|
* - An object with fields that represent the current status of the mutation's execution
|
||||||
|
*
|
||||||
|
* @param baseOptions options that will be passed into the mutation, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options-2;
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* const [sortTaskGroupMutation, { data, loading, error }] = useSortTaskGroupMutation({
|
||||||
|
* variables: {
|
||||||
|
* tasks: // value for 'tasks'
|
||||||
|
* taskGroupID: // value for 'taskGroupID'
|
||||||
|
* },
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
export function useSortTaskGroupMutation(baseOptions?: ApolloReactHooks.MutationHookOptions<SortTaskGroupMutation, SortTaskGroupMutationVariables>) {
|
||||||
|
return ApolloReactHooks.useMutation<SortTaskGroupMutation, SortTaskGroupMutationVariables>(SortTaskGroupDocument, baseOptions);
|
||||||
|
}
|
||||||
|
export type SortTaskGroupMutationHookResult = ReturnType<typeof useSortTaskGroupMutation>;
|
||||||
|
export type SortTaskGroupMutationResult = ApolloReactCommon.MutationResult<SortTaskGroupMutation>;
|
||||||
|
export type SortTaskGroupMutationOptions = ApolloReactCommon.BaseMutationOptions<SortTaskGroupMutation, SortTaskGroupMutationVariables>;
|
||||||
export const UpdateTaskGroupNameDocument = gql`
|
export const UpdateTaskGroupNameDocument = gql`
|
||||||
mutation updateTaskGroupName($taskGroupID: UUID!, $name: String!) {
|
mutation updateTaskGroupName($taskGroupID: UUID!, $name: String!) {
|
||||||
updateTaskGroupName(input: {taskGroupID: $taskGroupID, name: $name}) {
|
updateTaskGroupName(input: {taskGroupID: $taskGroupID, name: $name}) {
|
||||||
@ -3590,6 +3906,70 @@ export function useToggleTaskLabelMutation(baseOptions?: ApolloReactHooks.Mutati
|
|||||||
export type ToggleTaskLabelMutationHookResult = ReturnType<typeof useToggleTaskLabelMutation>;
|
export type ToggleTaskLabelMutationHookResult = ReturnType<typeof useToggleTaskLabelMutation>;
|
||||||
export type ToggleTaskLabelMutationResult = ApolloReactCommon.MutationResult<ToggleTaskLabelMutation>;
|
export type ToggleTaskLabelMutationResult = ApolloReactCommon.MutationResult<ToggleTaskLabelMutation>;
|
||||||
export type ToggleTaskLabelMutationOptions = ApolloReactCommon.BaseMutationOptions<ToggleTaskLabelMutation, ToggleTaskLabelMutationVariables>;
|
export type ToggleTaskLabelMutationOptions = ApolloReactCommon.BaseMutationOptions<ToggleTaskLabelMutation, ToggleTaskLabelMutationVariables>;
|
||||||
|
export const TopNavbarDocument = gql`
|
||||||
|
query topNavbar {
|
||||||
|
notifications {
|
||||||
|
createdAt
|
||||||
|
read
|
||||||
|
id
|
||||||
|
entity {
|
||||||
|
id
|
||||||
|
type
|
||||||
|
name
|
||||||
|
}
|
||||||
|
actor {
|
||||||
|
id
|
||||||
|
type
|
||||||
|
name
|
||||||
|
}
|
||||||
|
actionType
|
||||||
|
}
|
||||||
|
me {
|
||||||
|
user {
|
||||||
|
id
|
||||||
|
fullName
|
||||||
|
profileIcon {
|
||||||
|
initials
|
||||||
|
bgColor
|
||||||
|
url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
teamRoles {
|
||||||
|
teamID
|
||||||
|
roleCode
|
||||||
|
}
|
||||||
|
projectRoles {
|
||||||
|
projectID
|
||||||
|
roleCode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* __useTopNavbarQuery__
|
||||||
|
*
|
||||||
|
* To run a query within a React component, call `useTopNavbarQuery` and pass it any options that fit your needs.
|
||||||
|
* When your component renders, `useTopNavbarQuery` returns an object from Apollo Client that contains loading, error, and data properties
|
||||||
|
* you can use to render your UI.
|
||||||
|
*
|
||||||
|
* @param baseOptions options that will be passed into the query, supported options are listed on: https://www.apollographql.com/docs/react/api/react-hooks/#options;
|
||||||
|
*
|
||||||
|
* @example
|
||||||
|
* const { data, loading, error } = useTopNavbarQuery({
|
||||||
|
* variables: {
|
||||||
|
* },
|
||||||
|
* });
|
||||||
|
*/
|
||||||
|
export function useTopNavbarQuery(baseOptions?: ApolloReactHooks.QueryHookOptions<TopNavbarQuery, TopNavbarQueryVariables>) {
|
||||||
|
return ApolloReactHooks.useQuery<TopNavbarQuery, TopNavbarQueryVariables>(TopNavbarDocument, baseOptions);
|
||||||
|
}
|
||||||
|
export function useTopNavbarLazyQuery(baseOptions?: ApolloReactHooks.LazyQueryHookOptions<TopNavbarQuery, TopNavbarQueryVariables>) {
|
||||||
|
return ApolloReactHooks.useLazyQuery<TopNavbarQuery, TopNavbarQueryVariables>(TopNavbarDocument, baseOptions);
|
||||||
|
}
|
||||||
|
export type TopNavbarQueryHookResult = ReturnType<typeof useTopNavbarQuery>;
|
||||||
|
export type TopNavbarLazyQueryHookResult = ReturnType<typeof useTopNavbarLazyQuery>;
|
||||||
|
export type TopNavbarQueryResult = ApolloReactCommon.QueryResult<TopNavbarQuery, TopNavbarQueryVariables>;
|
||||||
export const UnassignTaskDocument = gql`
|
export const UnassignTaskDocument = gql`
|
||||||
mutation unassignTask($taskID: UUID!, $userID: UUID!) {
|
mutation unassignTask($taskID: UUID!, $userID: UUID!) {
|
||||||
unassignTask(input: {taskID: $taskID, userID: $userID}) {
|
unassignTask(input: {taskID: $taskID, userID: $userID}) {
|
||||||
|
@ -52,4 +52,15 @@ query findTask($taskID: UUID!) {
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
me {
|
||||||
|
user {
|
||||||
|
id
|
||||||
|
fullName
|
||||||
|
profileIcon {
|
||||||
|
initials
|
||||||
|
bgColor
|
||||||
|
url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
@ -7,6 +7,7 @@ const TASK_FRAGMENT = gql`
|
|||||||
description
|
description
|
||||||
dueDate
|
dueDate
|
||||||
complete
|
complete
|
||||||
|
completedAt
|
||||||
position
|
position
|
||||||
badges {
|
badges {
|
||||||
checklist {
|
checklist {
|
||||||
|
@ -0,0 +1,10 @@
|
|||||||
|
import gql from 'graphql-tag';
|
||||||
|
|
||||||
|
const DELETE_TASK_GROUP_TASKS_MUTATION = gql`
|
||||||
|
mutation deleteTaskGroupTasks($taskGroupID: UUID!) {
|
||||||
|
deleteTaskGroupTasks(input: { taskGroupID: $taskGroupID }) {
|
||||||
|
tasks
|
||||||
|
taskGroupID
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
26
frontend/src/shared/graphql/taskGroup/duplicateTaskGroup.ts
Normal file
26
frontend/src/shared/graphql/taskGroup/duplicateTaskGroup.ts
Normal file
@ -0,0 +1,26 @@
|
|||||||
|
import gql from 'graphql-tag';
|
||||||
|
import TASK_FRAGMENT from '../fragments/task';
|
||||||
|
|
||||||
|
const DUPLICATE_TASK_GROUP_MUTATION = gql`
|
||||||
|
mutation duplicateTaskGroup($taskGroupID: UUID!, $name: String!, $position: Float!, $projectID: UUID!) {
|
||||||
|
duplicateTaskGroup(
|
||||||
|
input: {
|
||||||
|
projectID: $projectID
|
||||||
|
taskGroupID: $taskGroupID
|
||||||
|
name: $name
|
||||||
|
position: $position
|
||||||
|
}
|
||||||
|
) {
|
||||||
|
taskGroup {
|
||||||
|
id
|
||||||
|
name
|
||||||
|
position
|
||||||
|
tasks {
|
||||||
|
...TaskFields
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
${TASK_FRAGMENT}
|
||||||
|
}
|
||||||
|
`;
|
13
frontend/src/shared/graphql/taskGroup/sortTaskGroup.ts
Normal file
13
frontend/src/shared/graphql/taskGroup/sortTaskGroup.ts
Normal file
@ -0,0 +1,13 @@
|
|||||||
|
import gql from 'graphql-tag';
|
||||||
|
|
||||||
|
const SORT_TASK_GROUP_MUTATION = gql`
|
||||||
|
mutation sortTaskGroup($tasks: [TaskPositionUpdate!]!, $taskGroupID: UUID!) {
|
||||||
|
sortTaskGroup(input: { taskGroupID: $taskGroupID, tasks: $tasks }) {
|
||||||
|
taskGroupID
|
||||||
|
tasks {
|
||||||
|
id
|
||||||
|
position
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
43
frontend/src/shared/graphql/topNavbar.ts
Normal file
43
frontend/src/shared/graphql/topNavbar.ts
Normal file
@ -0,0 +1,43 @@
|
|||||||
|
import gql from 'graphql-tag';
|
||||||
|
|
||||||
|
export const TOP_NAVBAR_QUERY = gql`
|
||||||
|
query topNavbar {
|
||||||
|
notifications {
|
||||||
|
createdAt
|
||||||
|
read
|
||||||
|
id
|
||||||
|
entity {
|
||||||
|
id
|
||||||
|
type
|
||||||
|
name
|
||||||
|
}
|
||||||
|
actor {
|
||||||
|
id
|
||||||
|
type
|
||||||
|
name
|
||||||
|
}
|
||||||
|
actionType
|
||||||
|
}
|
||||||
|
me {
|
||||||
|
user {
|
||||||
|
id
|
||||||
|
fullName
|
||||||
|
profileIcon {
|
||||||
|
initials
|
||||||
|
bgColor
|
||||||
|
url
|
||||||
|
}
|
||||||
|
}
|
||||||
|
teamRoles {
|
||||||
|
teamID
|
||||||
|
roleCode
|
||||||
|
}
|
||||||
|
projectRoles {
|
||||||
|
projectID
|
||||||
|
roleCode
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
`;
|
||||||
|
|
||||||
|
export default TOP_NAVBAR_QUERY;
|
@ -1,17 +1,17 @@
|
|||||||
import gql from 'graphql-tag';
|
import gql from 'graphql-tag';
|
||||||
|
|
||||||
export const UPDATE_USER_ROLE_MUTATION = gql`
|
export const UPDATE_USER_ROLE_MUTATION = gql`
|
||||||
mutation updateUserRole($userID: UUID!, $roleCode: RoleCode!) {
|
mutation updateUserRole($userID: UUID!, $roleCode: RoleCode!) {
|
||||||
updateUserRole(input:{userID: $userID, roleCode:$roleCode}) {
|
updateUserRole(input: { userID: $userID, roleCode: $roleCode }) {
|
||||||
user {
|
user {
|
||||||
id
|
id
|
||||||
role {
|
role {
|
||||||
code
|
code
|
||||||
name
|
name
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default UPDATE_USER_ROLE_MUTATION;
|
export default UPDATE_USER_ROLE_MUTATION;
|
||||||
|
14
frontend/src/shared/hooks/useWindowSize.ts
Normal file
14
frontend/src/shared/hooks/useWindowSize.ts
Normal file
@ -0,0 +1,14 @@
|
|||||||
|
import { useLayoutEffect, useState } from 'react';
|
||||||
|
|
||||||
|
export default function useWindowSize() {
|
||||||
|
const [size, setSize] = useState([0, 0]);
|
||||||
|
useLayoutEffect(() => {
|
||||||
|
function updateSize() {
|
||||||
|
setSize([window.innerWidth, window.innerHeight]);
|
||||||
|
}
|
||||||
|
window.addEventListener('resize', updateSize);
|
||||||
|
updateSize();
|
||||||
|
return () => window.removeEventListener('resize', updateSize);
|
||||||
|
}, []);
|
||||||
|
return size;
|
||||||
|
}
|
12
frontend/src/shared/icons/At.tsx
Normal file
12
frontend/src/shared/icons/At.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Icon, { IconProps } from './Icon';
|
||||||
|
|
||||||
|
const At: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||||
|
return (
|
||||||
|
<Icon width={width} height={height} className={className} viewBox="0 0 512 512">
|
||||||
|
<path d="M256 8C118.941 8 8 118.919 8 256c0 137.059 110.919 248 248 248 48.154 0 95.342-14.14 135.408-40.223 12.005-7.815 14.625-24.288 5.552-35.372l-10.177-12.433c-7.671-9.371-21.179-11.667-31.373-5.129C325.92 429.757 291.314 440 256 440c-101.458 0-184-82.542-184-184S154.542 72 256 72c100.139 0 184 57.619 184 160 0 38.786-21.093 79.742-58.17 83.693-17.349-.454-16.91-12.857-13.476-30.024l23.433-121.11C394.653 149.75 383.308 136 368.225 136h-44.981a13.518 13.518 0 0 0-13.432 11.993l-.01.092c-14.697-17.901-40.448-21.775-59.971-21.775-74.58 0-137.831 62.234-137.831 151.46 0 65.303 36.785 105.87 96 105.87 26.984 0 57.369-15.637 74.991-38.333 9.522 34.104 40.613 34.103 70.71 34.103C462.609 379.41 504 307.798 504 232 504 95.653 394.023 8 256 8zm-21.68 304.43c-22.249 0-36.07-15.623-36.07-40.771 0-44.993 30.779-72.729 58.63-72.729 22.292 0 35.601 15.241 35.601 40.77 0 45.061-33.875 72.73-58.161 72.73z" />
|
||||||
|
</Icon>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default At;
|
12
frontend/src/shared/icons/Calendar.tsx
Normal file
12
frontend/src/shared/icons/Calendar.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Icon, { IconProps } from './Icon';
|
||||||
|
|
||||||
|
const Calender: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||||
|
return (
|
||||||
|
<Icon width={width} height={height} className={className} viewBox="0 0 448 512">
|
||||||
|
<path d="M400 64h-48V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H160V12c0-6.6-5.4-12-12-12h-40c-6.6 0-12 5.4-12 12v52H48C21.5 64 0 85.5 0 112v352c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48V112c0-26.5-21.5-48-48-48zm-6 400H54c-3.3 0-6-2.7-6-6V160h352v298c0 3.3-2.7 6-6 6z" />
|
||||||
|
</Icon>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Calender;
|
12
frontend/src/shared/icons/Clone.tsx
Normal file
12
frontend/src/shared/icons/Clone.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Icon, { IconProps } from './Icon';
|
||||||
|
|
||||||
|
const Clone: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||||
|
return (
|
||||||
|
<Icon width={width} height={height} className={className} viewBox="0 0 512 512">
|
||||||
|
<path d="M464 0c26.51 0 48 21.49 48 48v288c0 26.51-21.49 48-48 48H176c-26.51 0-48-21.49-48-48V48c0-26.51 21.49-48 48-48h288M176 416c-44.112 0-80-35.888-80-80V128H48c-26.51 0-48 21.49-48 48v288c0 26.51 21.49 48 48 48h288c26.51 0 48-21.49 48-48v-48H176z" />
|
||||||
|
</Icon>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Clone;
|
12
frontend/src/shared/icons/Paperclip.tsx
Normal file
12
frontend/src/shared/icons/Paperclip.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Icon, { IconProps } from './Icon';
|
||||||
|
|
||||||
|
const Paperclip: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||||
|
return (
|
||||||
|
<Icon width={width} height={height} className={className} viewBox="0 0 448 512">
|
||||||
|
<path d="M43.246 466.142c-58.43-60.289-57.341-157.511 1.386-217.581L254.392 34c44.316-45.332 116.351-45.336 160.671 0 43.89 44.894 43.943 117.329 0 162.276L232.214 383.128c-29.855 30.537-78.633 30.111-107.982-.998-28.275-29.97-27.368-77.473 1.452-106.953l143.743-146.835c6.182-6.314 16.312-6.422 22.626-.241l22.861 22.379c6.315 6.182 6.422 16.312.241 22.626L171.427 319.927c-4.932 5.045-5.236 13.428-.648 18.292 4.372 4.634 11.245 4.711 15.688.165l182.849-186.851c19.613-20.062 19.613-52.725-.011-72.798-19.189-19.627-49.957-19.637-69.154 0L90.39 293.295c-34.763 35.56-35.299 93.12-1.191 128.313 34.01 35.093 88.985 35.137 123.058.286l172.06-175.999c6.177-6.319 16.307-6.433 22.626-.256l22.877 22.364c6.319 6.177 6.434 16.307.256 22.626l-172.06 175.998c-59.576 60.938-155.943 60.216-214.77-.485z" />
|
||||||
|
</Icon>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Paperclip;
|
@ -1,21 +1,12 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import Icon, { IconProps } from './Icon';
|
||||||
|
|
||||||
type Props = {
|
const Plus: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||||
size: number | string;
|
|
||||||
color: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const Plus = ({ size, color }: Props) => {
|
|
||||||
return (
|
return (
|
||||||
<svg fill={color} xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16">
|
<Icon width={width} height={height} className={className} viewBox="0 0 448 512">
|
||||||
<path d="M15.5 6h-5.5v-5.5c0-0.276-0.224-0.5-0.5-0.5h-3c-0.276 0-0.5 0.224-0.5 0.5v5.5h-5.5c-0.276 0-0.5 0.224-0.5 0.5v3c0 0.276 0.224 0.5 0.5 0.5h5.5v5.5c0 0.276 0.224 0.5 0.5 0.5h3c0.276 0 0.5-0.224 0.5-0.5v-5.5h5.5c0.276 0 0.5-0.224 0.5-0.5v-3c0-0.276-0.224-0.5-0.5-0.5z" />
|
<path d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z" />
|
||||||
</svg>
|
</Icon>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
Plus.defaultProps = {
|
|
||||||
size: 16,
|
|
||||||
color: '#000',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Plus;
|
export default Plus;
|
||||||
|
12
frontend/src/shared/icons/Share.tsx
Normal file
12
frontend/src/shared/icons/Share.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Icon, { IconProps } from './Icon';
|
||||||
|
|
||||||
|
const Share: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||||
|
return (
|
||||||
|
<Icon width={width} height={height} className={className} viewBox="0 0 512 512">
|
||||||
|
<path d="M503.691 189.836L327.687 37.851C312.281 24.546 288 35.347 288 56.015v80.053C127.371 137.907 0 170.1 0 322.326c0 61.441 39.581 122.309 83.333 154.132 13.653 9.931 33.111-2.533 28.077-18.631C66.066 312.814 132.917 274.316 288 272.085V360c0 20.7 24.3 31.453 39.687 18.164l176.004-152c11.071-9.562 11.086-26.753 0-36.328z" />
|
||||||
|
</Icon>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Share;
|
12
frontend/src/shared/icons/Smile.tsx
Normal file
12
frontend/src/shared/icons/Smile.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Icon, { IconProps } from './Icon';
|
||||||
|
|
||||||
|
const Smile: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||||
|
return (
|
||||||
|
<Icon width={width} height={height} className={className} viewBox="0 0 496 512">
|
||||||
|
<path d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z" />
|
||||||
|
</Icon>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Smile;
|
12
frontend/src/shared/icons/Task.tsx
Normal file
12
frontend/src/shared/icons/Task.tsx
Normal file
@ -0,0 +1,12 @@
|
|||||||
|
import React from 'react';
|
||||||
|
import Icon, { IconProps } from './Icon';
|
||||||
|
|
||||||
|
const Task: React.FC<IconProps> = ({ width = '16px', height = '16px', className }) => {
|
||||||
|
return (
|
||||||
|
<Icon width={width} height={height} className={className} viewBox="0 0 512 512">
|
||||||
|
<path d="M139.61 35.5a12 12 0 0 0-17 0L58.93 98.81l-22.7-22.12a12 12 0 0 0-17 0L3.53 92.41a12 12 0 0 0 0 17l47.59 47.4a12.78 12.78 0 0 0 17.61 0l15.59-15.62L156.52 69a12.09 12.09 0 0 0 .09-17zm0 159.19a12 12 0 0 0-17 0l-63.68 63.72-22.7-22.1a12 12 0 0 0-17 0L3.53 252a12 12 0 0 0 0 17L51 316.5a12.77 12.77 0 0 0 17.6 0l15.7-15.69 72.2-72.22a12 12 0 0 0 .09-16.9zM64 368c-26.49 0-48.59 21.5-48.59 48S37.53 464 64 464a48 48 0 0 0 0-96zm432 16H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16zm0-320H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16V80a16 16 0 0 0-16-16zm0 160H208a16 16 0 0 0-16 16v32a16 16 0 0 0 16 16h288a16 16 0 0 0 16-16v-32a16 16 0 0 0-16-16z" />
|
||||||
|
</Icon>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default Task;
|
@ -1,21 +1,12 @@
|
|||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import Icon, { IconProps } from './Icon';
|
||||||
|
|
||||||
type Props = {
|
const User: React.FC<IconProps> = ({ width = '16px', height = '16px', className, onClick }) => {
|
||||||
size: number | string;
|
|
||||||
color: string;
|
|
||||||
};
|
|
||||||
|
|
||||||
const User = ({ size, color }: Props) => {
|
|
||||||
return (
|
return (
|
||||||
<svg fill={color} xmlns="http://www.w3.org/2000/svg" width={size} height={size} viewBox="0 0 16 16">
|
<Icon onClick={onClick} width={width} height={height} className={className} viewBox="0 0 448 512">
|
||||||
<path d="M9 11.041v-0.825c1.102-0.621 2-2.168 2-3.716 0-2.485 0-4.5-3-4.5s-3 2.015-3 4.5c0 1.548 0.898 3.095 2 3.716v0.825c-3.392 0.277-6 1.944-6 3.959h14c0-2.015-2.608-3.682-6-3.959z" />
|
<path d="M313.6 304c-28.7 0-42.5 16-89.6 16-47.1 0-60.8-16-89.6-16C60.2 304 0 364.2 0 438.4V464c0 26.5 21.5 48 48 48h352c26.5 0 48-21.5 48-48v-25.6c0-74.2-60.2-134.4-134.4-134.4zM400 464H48v-25.6c0-47.6 38.8-86.4 86.4-86.4 14.6 0 38.3 16 89.6 16 51.7 0 74.9-16 89.6-16 47.6 0 86.4 38.8 86.4 86.4V464zM224 288c79.5 0 144-64.5 144-144S303.5 0 224 0 80 64.5 80 144s64.5 144 144 144zm0-240c52.9 0 96 43.1 96 96s-43.1 96-96 96-96-43.1-96-96 43.1-96 96-96z" />
|
||||||
</svg>
|
</Icon>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
User.defaultProps = {
|
|
||||||
size: 16,
|
|
||||||
color: '#000',
|
|
||||||
};
|
|
||||||
|
|
||||||
export default User;
|
export default User;
|
||||||
|
@ -1,8 +1,15 @@
|
|||||||
import Cross from './Cross';
|
import Cross from './Cross';
|
||||||
import Cog from './Cog';
|
import Cog from './Cog';
|
||||||
|
import At from './At';
|
||||||
|
import Task from './Task';
|
||||||
|
import Smile from './Smile';
|
||||||
|
import Paperclip from './Paperclip';
|
||||||
|
import Calendar from './Calendar';
|
||||||
|
import Clone from './Clone';
|
||||||
import Sort from './Sort';
|
import Sort from './Sort';
|
||||||
import Filter from './Filter';
|
import Filter from './Filter';
|
||||||
import DoubleChevronUp from './DoubleChevronUp';
|
import DoubleChevronUp from './DoubleChevronUp';
|
||||||
|
import Share from './Share';
|
||||||
import Crown from './Crown';
|
import Crown from './Crown';
|
||||||
import BarChart from './BarChart';
|
import BarChart from './BarChart';
|
||||||
import UserPlus from './UserPlus';
|
import UserPlus from './UserPlus';
|
||||||
@ -68,8 +75,14 @@ export {
|
|||||||
Square,
|
Square,
|
||||||
Filter,
|
Filter,
|
||||||
Sort,
|
Sort,
|
||||||
|
At,
|
||||||
|
Smile,
|
||||||
DoubleChevronUp,
|
DoubleChevronUp,
|
||||||
UserPlus,
|
UserPlus,
|
||||||
Crown,
|
Crown,
|
||||||
ToggleOn,
|
ToggleOn,
|
||||||
|
Calendar,
|
||||||
|
Clone,
|
||||||
|
Paperclip,
|
||||||
|
Share,
|
||||||
};
|
};
|
||||||
|
@ -18,9 +18,9 @@ const AccessAccount = ({ width, height }: Props) => {
|
|||||||
gradientTransform="translate(-3.62 1.57)"
|
gradientTransform="translate(-3.62 1.57)"
|
||||||
gradientUnits="userSpaceOnUse"
|
gradientUnits="userSpaceOnUse"
|
||||||
>
|
>
|
||||||
<stop offset="0" stop-color="gray" stop-opacity=".25" />
|
<stop offset="0" stopColor="gray" stopOpacity=".25" />
|
||||||
<stop offset=".54" stop-color="gray" stop-opacity=".12" />
|
<stop offset=".54" stopColor="gray" stopOpacity=".12" />
|
||||||
<stop offset="1" stop-color="gray" stop-opacity=".1" />
|
<stop offset="1" stopColor="gray" stopOpacity=".1" />
|
||||||
</linearGradient>
|
</linearGradient>
|
||||||
<linearGradient
|
<linearGradient
|
||||||
id="b"
|
id="b"
|
||||||
|
86
frontend/src/shared/utils/editorTheme.ts
Normal file
86
frontend/src/shared/utils/editorTheme.ts
Normal file
@ -0,0 +1,86 @@
|
|||||||
|
import theme from 'App/ThemeStyles';
|
||||||
|
|
||||||
|
const colors = {
|
||||||
|
almostBlack: '#181A1B',
|
||||||
|
lightBlack: '#2F3336',
|
||||||
|
almostWhite: '#E6E6E6',
|
||||||
|
white: '#FFF',
|
||||||
|
white10: 'rgba(255, 255, 255, 0.1)',
|
||||||
|
black: '#000',
|
||||||
|
black10: 'rgba(0, 0, 0, 0.1)',
|
||||||
|
primary: '#1AB6FF',
|
||||||
|
greyLight: '#F4F7FA',
|
||||||
|
grey: '#E8EBED',
|
||||||
|
greyMid: '#C5CCD3',
|
||||||
|
greyDark: '#DAE1E9',
|
||||||
|
};
|
||||||
|
|
||||||
|
export const base = {
|
||||||
|
...colors,
|
||||||
|
fontFamily: "'Droid Sans', sans-serif",
|
||||||
|
fontFamilyMono: "'SFMono-Regular',Consolas,'Liberation Mono', Menlo, Courier,monospace",
|
||||||
|
fontWeight: 400,
|
||||||
|
zIndex: 10000,
|
||||||
|
link: colors.primary,
|
||||||
|
placeholder: '#B1BECC',
|
||||||
|
textSecondary: '#4E5C6E',
|
||||||
|
textLight: colors.white,
|
||||||
|
textHighlight: '#b3e7ff',
|
||||||
|
selected: colors.primary,
|
||||||
|
codeComment: '#6a737d',
|
||||||
|
codePunctuation: '#5e6687',
|
||||||
|
codeNumber: '#d73a49',
|
||||||
|
codeProperty: '#c08b30',
|
||||||
|
codeTag: '#3d8fd1',
|
||||||
|
codeString: '#032f62',
|
||||||
|
codeSelector: '#6679cc',
|
||||||
|
codeAttr: '#c76b29',
|
||||||
|
codeEntity: '#22a2c9',
|
||||||
|
codeKeyword: '#d73a49',
|
||||||
|
codeFunction: '#6f42c1',
|
||||||
|
codeStatement: '#22a2c9',
|
||||||
|
codePlaceholder: '#3d8fd1',
|
||||||
|
codeInserted: '#202746',
|
||||||
|
codeImportant: '#c94922',
|
||||||
|
|
||||||
|
blockToolbarBackground: colors.white,
|
||||||
|
blockToolbarTrigger: colors.greyMid,
|
||||||
|
blockToolbarTriggerIcon: colors.white,
|
||||||
|
blockToolbarItem: colors.almostBlack,
|
||||||
|
blockToolbarText: colors.almostBlack,
|
||||||
|
blockToolbarHoverBackground: colors.greyLight,
|
||||||
|
blockToolbarDivider: colors.greyMid,
|
||||||
|
|
||||||
|
noticeInfoBackground: '#F5BE31',
|
||||||
|
noticeInfoText: colors.almostBlack,
|
||||||
|
noticeTipBackground: '#9E5CF7',
|
||||||
|
noticeTipText: colors.white,
|
||||||
|
noticeWarningBackground: '#FF5C80',
|
||||||
|
noticeWarningText: colors.white,
|
||||||
|
};
|
||||||
|
export const dark = {
|
||||||
|
...base,
|
||||||
|
background: 'transparent',
|
||||||
|
text: `rgba(${theme.colors.text.primary})`,
|
||||||
|
code: `rgba(${theme.colors.text.primary})`,
|
||||||
|
cursor: `rgba(${theme.colors.text.primary})`,
|
||||||
|
divider: '#4E5C6E',
|
||||||
|
placeholder: '#52657A',
|
||||||
|
|
||||||
|
toolbarBackground: colors.white,
|
||||||
|
toolbarInput: colors.black10,
|
||||||
|
toolbarItem: colors.lightBlack,
|
||||||
|
|
||||||
|
tableDivider: colors.lightBlack,
|
||||||
|
tableSelected: colors.primary,
|
||||||
|
tableSelectedBackground: '#002333',
|
||||||
|
|
||||||
|
quote: colors.greyDark,
|
||||||
|
codeBackground: colors.black,
|
||||||
|
codeBorder: colors.lightBlack,
|
||||||
|
codeString: '#3d8fd1',
|
||||||
|
horizontalRule: colors.lightBlack,
|
||||||
|
imageErrorBackground: 'rgba(0, 0, 0, 0.5)',
|
||||||
|
};
|
||||||
|
|
||||||
|
export default dark;
|
1
frontend/src/shared/utils/noop.ts
Normal file
1
frontend/src/shared/utils/noop.ts
Normal file
@ -0,0 +1 @@
|
|||||||
|
export default function NOOP() {} // eslint-disable-line @typescript-eslint/no-empty-function
|
132
frontend/src/shared/utils/sorting.ts
Normal file
132
frontend/src/shared/utils/sorting.ts
Normal file
@ -0,0 +1,132 @@
|
|||||||
|
import moment from 'moment';
|
||||||
|
|
||||||
|
export enum TaskSortingType {
|
||||||
|
NONE,
|
||||||
|
COMPLETE,
|
||||||
|
DUE_DATE,
|
||||||
|
MEMBERS,
|
||||||
|
LABELS,
|
||||||
|
TASK_TITLE,
|
||||||
|
}
|
||||||
|
|
||||||
|
export enum TaskSortingDirection {
|
||||||
|
ASC,
|
||||||
|
DESC,
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TaskSorting = {
|
||||||
|
type: TaskSortingType;
|
||||||
|
direction: TaskSortingDirection;
|
||||||
|
};
|
||||||
|
|
||||||
|
export function sortString(a: string, b: string) {
|
||||||
|
if (a < b) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (a > b) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
export function sortTasks(a: Task, b: Task, taskSorting: TaskSorting) {
|
||||||
|
if (taskSorting.type === TaskSortingType.TASK_TITLE) {
|
||||||
|
if (a.name < b.name) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (a.name > b.name) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
if (taskSorting.type === TaskSortingType.DUE_DATE) {
|
||||||
|
if (a.dueDate && !b.dueDate) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (b.dueDate && !a.dueDate) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return moment(a.dueDate).diff(moment(b.dueDate));
|
||||||
|
}
|
||||||
|
if (taskSorting.type === TaskSortingType.COMPLETE) {
|
||||||
|
if (a.complete && !b.complete) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
if (b.complete && !a.complete) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
if (taskSorting.type === TaskSortingType.LABELS) {
|
||||||
|
// sorts non-empty labels by name, then by empty label color name
|
||||||
|
let aLabels = [];
|
||||||
|
let bLabels = [];
|
||||||
|
let aLabelsEmpty = [];
|
||||||
|
let bLabelsEmpty = [];
|
||||||
|
if (a.labels) {
|
||||||
|
for (const aLabel of a.labels) {
|
||||||
|
if (aLabel.projectLabel.name && aLabel.projectLabel.name !== '') {
|
||||||
|
aLabels.push(aLabel.projectLabel.name);
|
||||||
|
} else {
|
||||||
|
aLabelsEmpty.push(aLabel.projectLabel.labelColor.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (b.labels) {
|
||||||
|
for (const bLabel of b.labels) {
|
||||||
|
if (bLabel.projectLabel.name && bLabel.projectLabel.name !== '') {
|
||||||
|
bLabels.push(bLabel.projectLabel.name);
|
||||||
|
} else {
|
||||||
|
bLabelsEmpty.push(bLabel.projectLabel.labelColor.name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
aLabels = aLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
|
||||||
|
bLabels = bLabels.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
|
||||||
|
aLabelsEmpty = aLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
|
||||||
|
bLabelsEmpty = bLabelsEmpty.sort((aLabel, bLabel) => sortString(aLabel, bLabel));
|
||||||
|
if (aLabelsEmpty.length !== 0 || bLabelsEmpty.length !== 0) {
|
||||||
|
if (aLabelsEmpty.length > bLabelsEmpty.length) {
|
||||||
|
if (bLabels.length !== 0) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (aLabels.length < bLabels.length) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (aLabels.length > bLabels.length) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
if (taskSorting.type === TaskSortingType.MEMBERS) {
|
||||||
|
let aMembers = [];
|
||||||
|
let bMembers = [];
|
||||||
|
if (a.assigned) {
|
||||||
|
for (const aMember of a.assigned) {
|
||||||
|
if (aMember.fullName) {
|
||||||
|
aMembers.push(aMember.fullName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
if (b.assigned) {
|
||||||
|
for (const bMember of b.assigned) {
|
||||||
|
if (bMember.fullName) {
|
||||||
|
bMembers.push(bMember.fullName);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
aMembers = aMembers.sort((aMember, bMember) => sortString(aMember, bMember));
|
||||||
|
bMembers = bMembers.sort((aMember, bMember) => sortString(aMember, bMember));
|
||||||
|
if (aMembers.length < bMembers.length) {
|
||||||
|
return 1;
|
||||||
|
}
|
||||||
|
if (aMembers.length > bMembers.length) {
|
||||||
|
return -1;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
||||||
|
return 0;
|
||||||
|
}
|
1
frontend/src/types.d.ts
vendored
1
frontend/src/types.d.ts
vendored
@ -64,6 +64,7 @@ type Task = {
|
|||||||
position: number;
|
position: number;
|
||||||
dueDate?: string;
|
dueDate?: string;
|
||||||
complete?: boolean;
|
complete?: boolean;
|
||||||
|
completedAt?: string | null;
|
||||||
labels: TaskLabel[];
|
labels: TaskLabel[];
|
||||||
description?: string | null;
|
description?: string | null;
|
||||||
assigned?: Array<TaskUser>;
|
assigned?: Array<TaskUser>;
|
||||||
|
@ -1,8 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
|
|
||||||
if (process.env.NODE_ENV === 'development') {
|
|
||||||
const whyDidYouRender = require('@welldone-software/why-did-you-render');
|
|
||||||
whyDidYouRender(React, {
|
|
||||||
trackAllPureComponents: true,
|
|
||||||
});
|
|
||||||
}
|
|
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user