forked from vikunja/frontend
Compare commits
1045 Commits
renovate/n
...
main
Author | SHA1 | Date | |
---|---|---|---|
a72cd31202 | |||
2141171529 | |||
9b050846a4 | |||
f6b8d2c4ca | |||
86119ff414 | |||
7c5622af11 | |||
6ac3ce65b4 | |||
07f9784e0d | |||
fb751236d1 | |||
396943b3a6 | |||
b8a19ac88a | |||
02fac73e07 | |||
21e52c3b1f | |||
213ef84586 | |||
25852ffac3 | |||
1255b50ed7 | |||
afe8198158 | |||
abe43c4ef8 | |||
8d5ddd695a | |||
a0087bc34a | |||
18a73c39e5 | |||
e0351495ff | |||
b97e045118 | |||
a052305adf | |||
237de35b25 | |||
85beebf0d8 | |||
e81b216f85 | |||
fc9e75e9b3 | |||
b576621569 | |||
08a031ca07 | |||
d306bb967c | |||
3f6a64d7f9 | |||
2d392c9973 | |||
9897bc9b43 | |||
92546f4b34 | |||
8d326aca03 | |||
4bf9284b38 | |||
0de9376b2b | |||
0602f6693b | |||
7d5cde53e3 | |||
8361640559 | |||
517a6cea1e | |||
ed4dd93bba | |||
d50de97490 | |||
aa719d3a68 | |||
463d22b07c | |||
33494cab6b | |||
8fa922a0ca | |||
e5815e21cb | |||
529b47e488 | |||
63c3e4ea58 | |||
d52e917357 | |||
b2da4fd126 | |||
83fb8c3ded | |||
|
b44d11cfc0 | ||
d4133b9e78 | |||
c478926038 | |||
00e40a0f53 | |||
0567ba2a47 | |||
|
3b95824f58 | ||
963f3bfb07 | |||
d1c05eb3fb | |||
2326e50d5d | |||
b7fa1a3ca1 | |||
a3e1e43ec7 | |||
39f163df4a | |||
f0e8ff93ff | |||
|
3ee0bc345d | ||
b4ffee8929 | |||
e3c3d3ee53 | |||
67e7b94f5d | |||
6bbddeae8c | |||
94a0e1e25f | |||
4df9bc33df | |||
5c64e8a2d7 | |||
e10791f28c | |||
44b58ff34b | |||
da17f78d30 | |||
61cdb7a91f | |||
1b8ed9417a | |||
4657da8c90 | |||
6cd2908040 | |||
4dd99ae6fc | |||
0d5fa1326d | |||
dd692de7c4 | |||
|
93d95b0821 | ||
|
422e731fe0 | ||
|
7db79ff04e | ||
59cc241226 | |||
2ac2e95cf2 | |||
f8ce3d6ed6 | |||
93f33d9647 | |||
6d32b22da3 | |||
b333898595 | |||
ccc633f3d9 | |||
d39b0675d3 | |||
274092bfc4 | |||
cb2c032e60 | |||
fdf294bcb3 | |||
58baa5960c | |||
e948678e42 | |||
|
5ccedc6f67 | ||
74ad98de68 | |||
3282f55c34 | |||
d9984b28f7 | |||
4fc7b9c67e | |||
ff9efe7889 | |||
66be0e6ac4 | |||
|
da8df8b667 | ||
42e9f306e8 | |||
|
4b47478440 | ||
|
b42e4cca59 | ||
|
33d4efecc4 | ||
|
45ec1623d5 | ||
|
8ef309243d | ||
|
3aaacf4533 | ||
0350e37fbb | |||
244c436202 | |||
18d0c8ba2c | |||
3891d5b876 | |||
|
98b38af43c | ||
77ff0aa256 | |||
2ab26ee7c5 | |||
58f38bcfc3 | |||
bcb5190365 | |||
c99d09c83e | |||
f49ea9752d | |||
a56683cdc2 | |||
7f4af63003 | |||
8c44ed83e6 | |||
b388677eaf | |||
bd7430b405 | |||
4baed8fe79 | |||
fdbe4e8314 | |||
4a7f839449 | |||
c359f4d4dd | |||
79d6212e48 | |||
e541213872 | |||
|
fd1d01164f | ||
34edf0dc5f | |||
631a19fa92 | |||
fba402fcd0 | |||
|
4c4adfdf4e | ||
|
06775cf4c7 | ||
c07954f2b8 | |||
995cc12880 | |||
|
293402b6fd | ||
|
708ef2d72e | ||
|
4c458a1ad0 | ||
|
02de481297 | ||
|
9d604f7a3b | ||
|
0f1f131f7a | ||
|
eb4c2a4b9d | ||
|
599c1ba4b5 | ||
|
12a8f7ebe9 | ||
|
9f0f0b39f8 | ||
4a550da6a6 | |||
52ba168d41 | |||
9c7680aa55 | |||
|
83bb030c6e | ||
|
163d9366d3 | ||
5cff9988a3 | |||
a15ace0dbc | |||
65bb514093 | |||
403f1ee400 | |||
bb58dba8e0 | |||
4bad685f39 | |||
e5f631af8d | |||
925f2aa837 | |||
1de22386da | |||
602af9ec96 | |||
57feb65e00 | |||
94508173dc | |||
bd0c4d0355 | |||
2952a0155f | |||
6055fecc5d | |||
7ec2b6c0d2 | |||
13bd434cb9 | |||
b98d9fb7ec | |||
c2dd18edaa | |||
d47791b957 | |||
e6eaac1b46 | |||
cf2103734b | |||
bb9c5046b3 | |||
a7a6a4c2d6 | |||
28257fcf5f | |||
c314d56f73 | |||
612e592da7 | |||
1a329464ab | |||
d5efe9f656 | |||
4a5f1a783a | |||
906b3a5cdf | |||
678dc8ef51 | |||
da1d5eaba1 | |||
02448700b3 | |||
d9ca798aad | |||
23668e55d7 | |||
3be9de76c5 | |||
a9f41e3f37 | |||
f0492d49ef | |||
|
d85abbd77a | ||
5186aeb086 | |||
7ba421e810 | |||
e0fd4f216f | |||
|
5057b69382 | ||
07297196f9 | |||
|
7fbb6e8f70 | ||
|
38cef79f68 | ||
|
6a93701649 | ||
|
d9a8382049 | ||
66e60a4e6a | |||
0f67a78ec8 | |||
722802fb2e | |||
752ead3a75 | |||
b0b261d647 | |||
442a14242c | |||
|
66c0c322a2 | ||
|
f4bc2b94f0 | ||
|
f7728e5384 | ||
78b765ddc4 | |||
f967bcb205 | |||
|
e49f960aea | ||
98cb878250 | |||
03f2b253b8 | |||
69c0726b9d | |||
|
eb59ca5836 | ||
|
8b7b4d61a3 | ||
0ed7114260 | |||
dda162c16f | |||
|
eeb562314e | ||
|
7f00c7dabd | ||
0ff0d8c5b8 | |||
9c9a5d08ff | |||
9a2b88d295 | |||
09b76b7bd4 | |||
f72c847e99 | |||
8ea899fa26 | |||
e01df4d369 | |||
|
096daad80a | ||
3c5bfcc6f3 | |||
0182695cda | |||
|
44e6981759 | ||
15b64c7e8a | |||
9c357cb83e | |||
0cf9b7595a | |||
21dce0d8a8 | |||
218b96b230 | |||
|
d19c48a4f5 | ||
480aa8813e | |||
caa29c152d | |||
1101fcb3ff | |||
5d601ca4b3 | |||
53c9a9bc9c | |||
d6cb965ea7 | |||
964aba4824 | |||
35f4bb1385 | |||
0b58973d87 | |||
02deb0bedd | |||
4cd0e90fea | |||
e8c6afce72 | |||
a2c1702eef | |||
599e28e5e5 | |||
|
1002579173 | ||
|
5ae8bace82 | ||
|
0832184222 | ||
|
a50eca852f | ||
|
b4f4fd45a4 | ||
|
15ef86d597 | ||
|
825ba100f0 | ||
|
839d331bf5 | ||
1798388e31 | |||
c3f8dcefb6 | |||
816292e86a | |||
ea1c7f1a7e | |||
6cb17c1267 | |||
cbb2cf2951 | |||
85e1b36b00 | |||
c9b9367c0b | |||
a14644c156 | |||
189b5ee8aa | |||
61ed47fab4 | |||
f18c03fa4d | |||
0e219b48a3 | |||
9ee05d5583 | |||
6d20e762ee | |||
5143e09d2b | |||
b428523c89 | |||
6ef0a0ded9 | |||
bd7fc44722 | |||
549e7b4310 | |||
89a125599e | |||
da2a7a224e | |||
da478a49d1 | |||
98943377b8 | |||
d28bbb7dc0 | |||
|
386fd79b49 | ||
|
9807858436 | ||
|
9ded3d0cd6 | ||
d5258b7315 | |||
eccaeae9e9 | |||
fd3e7e655d | |||
5271166120 | |||
61a89117d2 | |||
066553838a | |||
443e1a063d | |||
9a84fb6d7f | |||
d8d3e4c8a6 | |||
b4f88bd4a6 | |||
abc26496cf | |||
b8cc828bc0 | |||
874dc1e5fc | |||
e74e6fcc99 | |||
52d4d0bdb9 | |||
6bf6357cbd | |||
cf0eaf9ba1 | |||
8dea4082bb | |||
51dc123d89 | |||
acb3ddc73f | |||
407f5f2ef8 | |||
73eab6c5b5 | |||
aefda38bdd | |||
a70a2e3ba6 | |||
db611ab2d3 | |||
e1f49f2ff1 | |||
b8e7b87f96 | |||
6c619072b4 | |||
26e522cf8c | |||
7f4114b703 | |||
c7dd20ef57 | |||
c1da04eda1 | |||
2c732eb0d5 | |||
2acb70c562 | |||
eaf777864a | |||
0b194bb0cf | |||
e968c88cfd | |||
df02dd5291 | |||
acdbf2f8f5 | |||
9f146c8c7f | |||
3b244dfdbe | |||
2f820e517f | |||
56b88218b3 | |||
957d8f05a5 | |||
31f2065d20 | |||
f5fd14124f | |||
d91bc5090a | |||
f21a4e1e9f | |||
970a04d973 | |||
fd9d0ad155 | |||
4be0977014 | |||
6975a2b286 | |||
64fdae81ec | |||
56a25734d7 | |||
ed5d3be7cb | |||
98d0398ca8 | |||
d3925b8d80 | |||
b7b4530a11 | |||
766b4c669f | |||
5f7159ebc4 | |||
0a9588e097 | |||
091beecc19 | |||
6cb331ee0f | |||
8c62a9e198 | |||
29dcc02217 | |||
3eacc0754f | |||
ebd824bddf | |||
2c012e1a08 | |||
10c6db3849 | |||
80c151ca6c | |||
7a7a1c985e | |||
c8eac914d1 | |||
d2c40926de | |||
c3cae78213 | |||
c289a6ae18 | |||
ef4689335b | |||
3b48adad67 | |||
736e5a8bf5 | |||
ed241d21be | |||
49a24977f9 | |||
2b0df8c237 | |||
ef3f19d046 | |||
7ce880239e | |||
aa2278a564 | |||
96e44bf225 | |||
4ad99bdad1 | |||
5e7fe3280c | |||
7ec31363c3 | |||
c40c1fb10a | |||
59be904d4a | |||
1d9d093b31 | |||
ef6bc3cbab | |||
e13e477682 | |||
8a5b1ab3e3 | |||
70e81ee682 | |||
a0795db040 | |||
35649d0e87 | |||
67145fe00b | |||
22d93a1a3c | |||
51471b9551 | |||
22a18f8437 | |||
f17bbeddec | |||
eae555475d | |||
12faafbe7c | |||
5ddce387fe | |||
05d000fc50 | |||
333df9b247 | |||
8d368c552d | |||
57cc7b8f37 | |||
527873dad4 | |||
d67dca4a81 | |||
6083301d1f | |||
3f04571e43 | |||
d7ac2ad697 | |||
820823b5c3 | |||
d7fb1a1e14 | |||
7e218e03b2 | |||
d7048d589e | |||
80230069c6 | |||
a695719128 | |||
f61723dac2 | |||
ae27502022 | |||
8fdd3e785d | |||
5d038dc79f | |||
b2ef66e5df | |||
af819f9539 | |||
9cf0a9a89e | |||
91b70c2de4 | |||
643a5b6d7d | |||
e6f7ddc9ce | |||
73575302de | |||
4ed665fbd9 | |||
f30e948abd | |||
ea758f0c58 | |||
617a48157d | |||
419c0b2d96 | |||
449b11c1ff | |||
f818c207c2 | |||
4ee8f600a3 | |||
29f68747bb | |||
ce201e0880 | |||
bd26b81318 | |||
|
b80f82c411 | ||
5afafb7c82 | |||
9de20b4c54 | |||
c9b18232c9 | |||
8e460f9856 | |||
2db263f2d2 | |||
79872c96de | |||
2c881b3126 | |||
8093ce9441 | |||
c4d7f6fdfa | |||
c20de51a3c | |||
ed56176f2d | |||
ab7d889650 | |||
b334712dfe | |||
454b680117 | |||
830ecc2c03 | |||
0e448a123e | |||
1c01fcbb84 | |||
e8fb4ce1fa | |||
37cbbdbec8 | |||
e5aabfc753 | |||
66f193871a | |||
d7907d8075 | |||
38aa32c42d | |||
39d868278e | |||
1c8919ee2a | |||
e26932aa95 | |||
90ecea74c7 | |||
9bde803ef9 | |||
82ac8aeb6c | |||
b73d285c88 | |||
dd252273d7 | |||
47cc400417 | |||
5826e2ebcc | |||
e5b60b7cd3 | |||
a47167197d | |||
e811695cb0 | |||
87ad58b4b7 | |||
3e8e5bb554 | |||
322724c2a6 | |||
37956b5933 | |||
be64831035 | |||
8458e8f687 | |||
c6d6da3171 | |||
1af4f7811a | |||
35155034e0 | |||
feeaca2c02 | |||
4784e3a22f | |||
ba28617464 | |||
766f2b7461 | |||
6c1cd9f911 | |||
48cb3defc4 | |||
59cb0c82f9 | |||
6d587fad6e | |||
458df80443 | |||
96a8308d16 | |||
0a29197715 | |||
172d353df7 | |||
a895bde661 | |||
4ebe17f4f3 | |||
59b0f12424 | |||
44549bb441 | |||
c8aa3db205 | |||
74a9b9ab1b | |||
5b733ffa8a | |||
b62ec79939 | |||
17b31e0b95 | |||
bc1e366750 | |||
d4c179c862 | |||
d77addd266 | |||
5be75f3c54 | |||
8e905de41b | |||
07d38a4aa3 | |||
ab75e3ab50 | |||
b806a01e95 | |||
820db3e96d | |||
f405b2105b | |||
3af20b6220 | |||
38fc157f24 | |||
01f648c20c | |||
1be516a905 | |||
fd71de4b5d | |||
31e39aa6c8 | |||
f01107fd73 | |||
a7731370a0 | |||
84a1abf347 | |||
ee3965eae9 | |||
fad72e091b | |||
eb80bfa00d | |||
43258ab74e | |||
877e425055 | |||
054d70cbe5 | |||
3d88fdaadd | |||
|
eae7cc5a6b | ||
e2f02cfc61 | |||
|
00e0a23d48 | ||
114724faaa | |||
|
c206fc6f34 | ||
|
6f2dedcb48 | ||
4655e1ce34 | |||
|
f360ebfe98 | ||
812f519de9 | |||
104fe7433b | |||
db627ed28a | |||
cbec1f24aa | |||
bb8ed57b7c | |||
|
3248dcd663 | ||
|
06c1a54886 | ||
9022954257 | |||
12215c043d | |||
3e21a8ed6e | |||
|
f1852f1f33 | ||
|
c2321703a7 | ||
3060d09287 | |||
af7f8400e9 | |||
367ad1e5a5 | |||
9126d22822 | |||
2923504bf4 | |||
2cda229b69 | |||
44c0d55fba | |||
80226df0de | |||
ed47aa4119 | |||
4c0ce26f2d | |||
a5925baff0 | |||
|
b08dd58552 | ||
|
0620b8f0b3 | ||
|
ff1968aa36 | ||
|
63fb8a1962 | ||
940063784b | |||
|
78a6d38641 | ||
|
2dc36c032b | ||
1d7f857070 | |||
7f281fc5e9 | |||
df74f9d80c | |||
d1d7cd535e | |||
e2d5c6e12f | |||
0ada383395 | |||
68219ee224 | |||
2f2fb357c1 | |||
5585966584 | |||
e999b38d3b | |||
f8450f58a4 | |||
72b731d620 | |||
266f877455 | |||
13157e3bba | |||
fd3c15d064 | |||
5b606936c3 | |||
d120e8c82d | |||
ec227a6872 | |||
5bd7c77b68 | |||
d58f8b4ba1 | |||
8ce242bb65 | |||
5f5ed410df | |||
3970d0fd31 | |||
cc378b83fe | |||
8c394d8024 | |||
b84da722ca | |||
c35810f28f | |||
9f26ae1ee6 | |||
34ffd1d572 | |||
64cf1c8ccf | |||
1fdda07f65 | |||
9856fab38f | |||
8e3f54ae42 | |||
|
8f25f5d353 | ||
|
94d6f38e89 | ||
c421701fb7 | |||
176ad565cc | |||
7b53e684aa | |||
f30c964c06 | |||
|
bbf4ef4697 | ||
|
63f2e6ba6f | ||
|
e9cf562969 | ||
|
878c6ea9e1 | ||
|
ca899d3b51 | ||
8b63df6f41 | |||
ebfbb5ca9b | |||
fd13b453f4 | |||
2cd442780d | |||
c342756efd | |||
cf745726bc | |||
c9546d52c0 | |||
6a828078a3 | |||
bc833091f2 | |||
f4a5f59400 | |||
|
7f581cbe27 | ||
a199fc7a8e | |||
e8f0b56651 | |||
ecd0df21c1 | |||
069d03932d | |||
|
9f3936544d | ||
|
89e428b4d2 | ||
|
ba2605af1b | ||
1eae7ece9c | |||
5f6cfa8e09 | |||
b1f2229d22 | |||
b44c71e6cc | |||
4e9c592090 | |||
a737fc5bc2 | |||
9e8c429864 | |||
95ad245b59 | |||
62ed7c5964 | |||
2bf9771e28 | |||
3c9c5eff12 | |||
aa64e9835c | |||
ede5cdd8cf | |||
5ffb13a3a8 | |||
20e9420638 | |||
c2ba1b2828 | |||
2fd9f0ee47 | |||
6e5501a5f1 | |||
937fd36f72 | |||
|
4dfcd8e70f | ||
13bc25ff5d | |||
0e072b582b | |||
b9335a7362 | |||
479fc7e433 | |||
02e73fa377 | |||
ad694ff8bc | |||
093ab766d4 | |||
9474240cb9 | |||
1c58fccd92 | |||
f7ca064127 | |||
ef6454483a | |||
dfb3561310 | |||
62e227c767 | |||
6624db1d49 | |||
b542221dac | |||
d57e27b4a6 | |||
|
0814890cac | ||
43e2d036d7 | |||
ce0f58c783 | |||
943d5f7975 | |||
|
a38075f376 | ||
e5d04c98da | |||
d76b526916 | |||
f85a08afb4 | |||
|
d67e5e386d | ||
|
e91b5fde02 | ||
|
ff5d1fc8c1 | ||
ddabd7f63a | |||
4c9a018c13 | |||
fadaac4ef1 | |||
b06e3cac3f | |||
1ecb186b7c | |||
070ef7e5aa | |||
e8613b48fc | |||
de7617fbaf | |||
0360cd0867 | |||
54e9513c14 | |||
fc0cf3fc87 | |||
0fccb3d5a9 | |||
9134269ead | |||
ba4913e2cb | |||
2eff239f9e | |||
fa77b20c13 | |||
|
3b713dede2 | ||
ad6b335d41 | |||
221edb2086 | |||
565765537d | |||
f70b1d2902 | |||
4fce71f729 | |||
84260841be | |||
6d9c4a7aa0 | |||
b24d5f2dce | |||
2683fec0a6 | |||
2df2bd38e2 | |||
91976e23f9 | |||
|
602ab8379e | ||
92f24e59a7 | |||
49217889b5 | |||
9c367877f4 | |||
064001e259 | |||
0316656d81 | |||
a18c6ab8d8 | |||
bdf992c9bf | |||
51c806c12b | |||
a6e9b36bd6 | |||
854068fff9 | |||
6576b6148c | |||
224cea33ce | |||
7e7fa807fd | |||
|
f083f181e2 | ||
2b82df5dbd | |||
e67fc7fb7e | |||
|
db8b8812af | ||
2013924949 | |||
1a11b43ca8 | |||
61427987c2 | |||
|
7b398f73f6 | ||
64726a6421 | |||
53858e0c31 | |||
2f0f648d28 | |||
6e026cc7cc | |||
d0fefd3c08 | |||
4dd397e3d2 | |||
2a41ccb980 | |||
38d72b59df | |||
add080d214 | |||
65f9def438 | |||
f1a726550e | |||
26d02d5593 | |||
5f678e2449 | |||
23598dd2ee | |||
d91d1fecf1 | |||
7a457eb161 | |||
d3171b59be | |||
63f5f446fd | |||
b8d77a617b | |||
d822709991 | |||
86a04da470 | |||
e6fbf1cb50 | |||
4fe6186ee6 | |||
6bf5f6efd4 | |||
03f448457a | |||
7f6f8963e7 | |||
65fd2f14a0 | |||
2e84c27d1e | |||
ee79a1d604 | |||
d17428d4d0 | |||
bca53ec8ae | |||
fef1af6ce7 | |||
3209206260 | |||
d819b9b0ba | |||
e95904351f | |||
a541afdf9d | |||
5d189035f2 | |||
dbea1f7a51 | |||
54de368642 | |||
878b5bf236 | |||
b4cba6f7d9 | |||
c06b781837 | |||
9616badc33 | |||
49f3b928cb | |||
7d4ba6249e | |||
8416b1f448 | |||
8be1f81848 | |||
d36577c04e | |||
2445f0eec8 | |||
96f5f00c07 | |||
041a1a4cc0 | |||
4a50e6aae2 | |||
f9b51306c3 | |||
106abfc842 | |||
3ba423ed23 | |||
244478400a | |||
a6b96f857d | |||
80eaf38090 | |||
79e7e4a8ae | |||
3766b5e51b | |||
c9e85cb52b | |||
42e72d14a4 | |||
6f93d6343c | |||
4a247b2a7d | |||
e93f95f8c2 | |||
b0ee316a26 | |||
332acf012c | |||
8fb00653e4 | |||
af630d3b8c | |||
797de0c543 | |||
74ad6e65e8 | |||
02ddf90cbb | |||
59801d797b | |||
d7b7328a0e | |||
377201dda9 | |||
5b8ebba4c0 | |||
9657b6b2d3 | |||
|
6e4a3ff199 | ||
3e770e11f1 | |||
48af80dcf9 | |||
b3300f5552 | |||
9bc04a3ffc | |||
b77b4105a0 | |||
|
f6437c81da | ||
deef7106e6 | |||
2521102712 | |||
ed02c6c81c | |||
5c5f3d88af | |||
1409750a30 | |||
5923bd8225 | |||
a5629bd556 | |||
2e2eebf206 | |||
e8572fe13b | |||
308971ad05 | |||
67cee63cf0 | |||
5a92228b96 | |||
|
ff655808b3 | ||
a8d4892a0f | |||
c936b92654 | |||
d323ed5b4b | |||
91ad503a11 | |||
35081befae | |||
17607df6ff | |||
149696b7de | |||
4582e98795 | |||
d6f82955a6 | |||
270432afe4 | |||
4d3b7c8759 | |||
c4f3e09cc7 | |||
bdd5ea27ac | |||
65b694d8e6 | |||
78abe20f7d | |||
7163dc351b | |||
7098b6315f | |||
dc70df54ba | |||
24dcbaba27 | |||
eedbba5657 | |||
1223d8b679 | |||
c6e7390f13 | |||
a84fb8b5df | |||
7bbd452f3b | |||
01c29578fb | |||
5d58c4baa3 | |||
b1493e2be6 | |||
50f19829d5 | |||
99cba7fc02 | |||
89c67c9726 | |||
3ab58a015c | |||
45b7434bda | |||
ae47298b3c | |||
9f36085505 | |||
cf6eea97b1 | |||
739b26ae9f | |||
f9e9c9d6e3 | |||
2cb482dc93 | |||
196b2f0c6c | |||
52e94df048 | |||
2454b0862d | |||
63bbc44ed6 | |||
05e8986916 | |||
600808beb0 | |||
30bc74a5aa | |||
d44d9f44bc | |||
ee89358be6 | |||
7e5e3f81b3 | |||
1bf41edb96 | |||
67b1b0b118 | |||
8d76bec525 | |||
0da9262cce | |||
1149d7adfd | |||
8e472211ff | |||
2ca0bc6dad | |||
51ffe93048 | |||
3440d71e74 | |||
067173f08e | |||
40fa551f28 | |||
a804df342e | |||
896196f08f | |||
245b134c92 | |||
667afa3c05 | |||
42e830eb73 | |||
8718efbc1c | |||
8c8a07f1de | |||
985f379845 | |||
5b8d142abb | |||
76cb94c488 | |||
4994db4f77 | |||
35d3cd6e83 | |||
7a46843a28 | |||
bafef06e90 | |||
d5445e0298 | |||
9bbaa67eec | |||
1f14e7bee8 | |||
e05b729c21 | |||
ad7ed86d36 | |||
e82a83c8cf | |||
31480eae72 | |||
c8162728b7 | |||
8b3072672a | |||
0e09f9fded | |||
ab406f00d9 | |||
2507f661e8 | |||
cf27131e48 | |||
54d8e341ab | |||
7b17ccbf1f | |||
ce7563ea4c | |||
d9f3555d8d | |||
b2dd63630c | |||
db1a41f845 | |||
08ae0046de | |||
c173542b23 | |||
518417c0de | |||
c2e58a2320 | |||
d94a25c83f | |||
ad9ca61969 | |||
d28d9218bd | |||
af08713bf0 | |||
0b01f2aace | |||
579de70a7a | |||
660ab928a2 | |||
9394f57fc9 | |||
873169c371 | |||
098fd0a875 | |||
c0cd69dd82 | |||
4666087aa9 | |||
56147dc9fb | |||
ff48178051 | |||
cb3f269937 | |||
4c560f1a03 | |||
0fe2a16a7c | |||
9cebf5305a | |||
71c8540c74 | |||
8183fce829 | |||
3becf8738b | |||
9ddb55a5ef | |||
cdb63b578d | |||
d6a10b01dd | |||
b74c961723 | |||
8b0e88b574 | |||
175fb02629 | |||
dac9d918b5 | |||
e7de930129 | |||
a0d0c2cb1f | |||
a4d3cafdf1 | |||
f5bb697032 | |||
62bbffb17e | |||
c2d5370e4a | |||
6dc02c45dd | |||
|
0456f4a041 | ||
c1dd20a30b | |||
acc7bf4305 | |||
86688d7e95 | |||
aaee49b70e | |||
6b23b954a8 | |||
9fd2f4ea5c | |||
dca05f852c | |||
5aa6cce185 | |||
d96ea384dc | |||
5d33144b8e | |||
d462d56202 | |||
2648592ac0 | |||
1ac78729a4 | |||
9d1195a2ed | |||
8db3c6c09f | |||
b927c65637 | |||
0af0a9808f | |||
24294217ea | |||
a71d0a8e94 | |||
3304983c18 | |||
0714c83ed9 | |||
5f35bee025 | |||
c73d828d4e | |||
95c3599bd7 | |||
6effd80702 | |||
d4a4fc00a4 | |||
a460327492 | |||
743902fa52 | |||
0afbc99ce3 | |||
ee43c588ef | |||
c6b9162ec0 | |||
646840141d | |||
202c9c4190 | |||
309d4b785d | |||
537fedcd24 | |||
c9d6dc8e8e | |||
d8aef0c4e5 | |||
2f6c962eef | |||
d0cb6b1757 | |||
e87621bea5 | |||
e06b44b6b3 | |||
f052148c53 | |||
7b6de0d22f | |||
0f44902ffc | |||
2a85ccd316 | |||
a4c3939fb6 | |||
ef0fe0b11d | |||
99cd68ad43 | |||
302728526a | |||
99a5afc817 | |||
4a8b7a726a | |||
579cff647d | |||
2a20c95ba5 | |||
97e6147351 | |||
e8705c66dd | |||
6973d76e17 | |||
cc079336a8 | |||
ab7bf7d8f9 | |||
|
6e54929104 | ||
dff5d84ebb | |||
990639dd24 | |||
a073cfac66 | |||
40b30079c1 | |||
f3835d7dfe | |||
9a26310ad6 | |||
6ddede4863 | |||
12544c52ca | |||
02f985d8a3 | |||
3b9bc5b2f8 | |||
9e1ec72739 | |||
|
2c2fc4c9ee | ||
c6d214b9eb | |||
77466e3373 | |||
8f82dd2783 | |||
58358481bc | |||
321850ec20 | |||
7fe9f17e43 | |||
d064f0acc0 | |||
c6aac15d24 | |||
513a51fb73 | |||
4070d64404 | |||
|
4cd6857072 | ||
580b012993 | |||
f9b892e32f | |||
6b4964c5a8 | |||
6d36cec91e |
432
.drone.yml
432
.drone.yml
|
@ -1,5 +1,6 @@
|
||||||
---
|
---
|
||||||
kind: pipeline
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
name: build
|
name: build
|
||||||
|
|
||||||
trigger:
|
trigger:
|
||||||
|
@ -22,36 +23,101 @@ steps:
|
||||||
# Disabled until we figure out why it is so slow
|
# Disabled until we figure out why it is so slow
|
||||||
# - name: restore-cache
|
# - name: restore-cache
|
||||||
# image: meltwater/drone-cache:dev
|
# image: meltwater/drone-cache:dev
|
||||||
# pull: true
|
# pull: always
|
||||||
# environment:
|
# environment:
|
||||||
# AWS_ACCESS_KEY_ID:
|
# AWS_ACCESS_KEY_ID:
|
||||||
# from_secret: cache_aws_access_key_id
|
# from_secret: cache_aws_access_key_id
|
||||||
# AWS_SECRET_ACCESS_KEY:
|
# AWS_SECRET_ACCESS_KEY:
|
||||||
# from_secret: cache_aws_secret_access_key
|
# from_secret: cache_aws_secret_access_key
|
||||||
# settings:
|
# settings:
|
||||||
|
# debug: true
|
||||||
# restore: true
|
# restore: true
|
||||||
# bucket: kolaente.dev-drone-dependency-cache
|
# bucket: kolaente.dev-drone-dependency-cache
|
||||||
# endpoint: https://s3.fr-par.scw.cloud
|
# endpoint: https://s3.fr-par.scw.cloud
|
||||||
# region: fr-par
|
# region: fr-par
|
||||||
# path_style: true
|
# path_style: true
|
||||||
# cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
|
# cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
|
||||||
# mount:
|
# mount:
|
||||||
# - '.cache'
|
# - .cache
|
||||||
|
|
||||||
- name: dependencies
|
- name: dependencies
|
||||||
image: node:18
|
image: node:18-alpine
|
||||||
pull: true
|
pull: always
|
||||||
environment:
|
environment:
|
||||||
YARN_CACHE_FOLDER: .cache/yarn/
|
PNPM_CACHE_FOLDER: .cache/pnpm
|
||||||
CYPRESS_CACHE_FOLDER: .cache/cypress/
|
CYPRESS_CACHE_FOLDER: .cache/cypress
|
||||||
commands:
|
commands:
|
||||||
- yarn --frozen-lockfile --network-timeout 100000
|
- corepack enable && pnpm config set store-dir .cache/pnpm
|
||||||
|
- pnpm install --fetch-timeout 100000
|
||||||
# depends_on:
|
# depends_on:
|
||||||
# - restore-cache
|
# - restore-cache
|
||||||
|
|
||||||
|
- name: lint
|
||||||
|
image: node:18-alpine
|
||||||
|
pull: always
|
||||||
|
environment:
|
||||||
|
PNPM_CACHE_FOLDER: .cache/pnpm
|
||||||
|
commands:
|
||||||
|
- corepack enable && pnpm config set store-dir .cache/pnpm
|
||||||
|
- pnpm run lint
|
||||||
|
depends_on:
|
||||||
|
- dependencies
|
||||||
|
|
||||||
|
- name: build-prod
|
||||||
|
image: node:18-alpine
|
||||||
|
pull: always
|
||||||
|
environment:
|
||||||
|
PNPM_CACHE_FOLDER: .cache/pnpm
|
||||||
|
commands:
|
||||||
|
- corepack enable && pnpm config set store-dir .cache/pnpm
|
||||||
|
- pnpm run build
|
||||||
|
depends_on:
|
||||||
|
- dependencies
|
||||||
|
|
||||||
|
- name: test-unit
|
||||||
|
image: node:18-alpine
|
||||||
|
pull: always
|
||||||
|
commands:
|
||||||
|
- corepack enable && pnpm config set store-dir .cache/pnpm
|
||||||
|
- pnpm run test:unit
|
||||||
|
depends_on:
|
||||||
|
- dependencies
|
||||||
|
|
||||||
|
- name: typecheck
|
||||||
|
failure: ignore
|
||||||
|
image: node:18-alpine
|
||||||
|
pull: always
|
||||||
|
environment:
|
||||||
|
PNPM_CACHE_FOLDER: .cache/pnpm
|
||||||
|
commands:
|
||||||
|
- corepack enable && pnpm config set store-dir .cache/pnpm
|
||||||
|
- pnpm run typecheck
|
||||||
|
depends_on:
|
||||||
|
- dependencies
|
||||||
|
|
||||||
|
- name: test-frontend
|
||||||
|
image: cypress/browsers:node18.12.0-chrome106-ff106
|
||||||
|
pull: always
|
||||||
|
environment:
|
||||||
|
CYPRESS_API_URL: http://api:3456/api/v1
|
||||||
|
CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
|
||||||
|
PNPM_CACHE_FOLDER: .cache/pnpm
|
||||||
|
CYPRESS_CACHE_FOLDER: .cache/cypress
|
||||||
|
CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
|
||||||
|
CYPRESS_RECORD_KEY:
|
||||||
|
from_secret: cypress_project_key
|
||||||
|
commands:
|
||||||
|
- sed -i 's/localhost/api/g' dist/index.html
|
||||||
|
- corepack enable && pnpm config set store-dir .cache/pnpm
|
||||||
|
- pnpm cypress install
|
||||||
|
- pnpm run serve:dist & npx wait-on http://localhost:4173
|
||||||
|
- pnpm run test:frontend --browser chrome --record
|
||||||
|
depends_on:
|
||||||
|
- build-prod
|
||||||
|
|
||||||
# - name: rebuild-cache
|
# - name: rebuild-cache
|
||||||
# image: meltwater/drone-cache:dev
|
# image: meltwater/drone-cache:dev
|
||||||
# pull: true
|
# pull: always
|
||||||
# environment:
|
# environment:
|
||||||
# AWS_ACCESS_KEY_ID:
|
# AWS_ACCESS_KEY_ID:
|
||||||
# from_secret: cache_aws_access_key_id
|
# from_secret: cache_aws_access_key_id
|
||||||
|
@ -63,71 +129,15 @@ steps:
|
||||||
# endpoint: https://s3.fr-par.scw.cloud
|
# endpoint: https://s3.fr-par.scw.cloud
|
||||||
# region: fr-par
|
# region: fr-par
|
||||||
# path_style: true
|
# path_style: true
|
||||||
# cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
|
# cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
|
||||||
# mount:
|
# mount:
|
||||||
# - '.cache'
|
# - .cache
|
||||||
# depends_on:
|
# depends_on:
|
||||||
# - dependencies
|
# - dependencies
|
||||||
|
|
||||||
- name: lint
|
|
||||||
image: node:18
|
|
||||||
pull: true
|
|
||||||
environment:
|
|
||||||
YARN_CACHE_FOLDER: .cache/yarn/
|
|
||||||
CYPRESS_CACHE_FOLDER: .cache/cypress/
|
|
||||||
commands:
|
|
||||||
- yarn run lint
|
|
||||||
depends_on:
|
|
||||||
- dependencies
|
|
||||||
|
|
||||||
- name: build-prod
|
|
||||||
image: node:18
|
|
||||||
pull: true
|
|
||||||
environment:
|
|
||||||
YARN_CACHE_FOLDER: .cache/yarn/
|
|
||||||
commands:
|
|
||||||
- yarn build
|
|
||||||
depends_on:
|
|
||||||
- dependencies
|
|
||||||
|
|
||||||
- name: test-unit
|
|
||||||
image: node:18
|
|
||||||
pull: true
|
|
||||||
commands:
|
|
||||||
- yarn test:unit
|
|
||||||
depends_on:
|
|
||||||
- dependencies
|
|
||||||
|
|
||||||
- name: typecheck
|
|
||||||
failure: ignore
|
|
||||||
image: node:18
|
|
||||||
pull: true
|
|
||||||
commands:
|
|
||||||
- yarn typecheck
|
|
||||||
depends_on:
|
|
||||||
- dependencies
|
|
||||||
|
|
||||||
- name: test-frontend
|
|
||||||
image: cypress/browsers:node16.5.0-chrome94-ff93
|
|
||||||
pull: true
|
|
||||||
environment:
|
|
||||||
CYPRESS_API_URL: http://api:3456/api/v1
|
|
||||||
CYPRESS_TEST_SECRET: averyLongSecretToSe33dtheDB
|
|
||||||
YARN_CACHE_FOLDER: .cache/yarn/
|
|
||||||
CYPRESS_CACHE_FOLDER: .cache/cypress/
|
|
||||||
CYPRESS_DEFAULT_COMMAND_TIMEOUT: 60000
|
|
||||||
CYPRESS_RECORD_KEY:
|
|
||||||
from_secret: cypress_project_key
|
|
||||||
commands:
|
|
||||||
- sed -i 's/localhost/api/g' dist/index.html
|
|
||||||
- yarn serve:dist & npx wait-on http://localhost:4173
|
|
||||||
- yarn test:frontend --browser chrome --record
|
|
||||||
depends_on:
|
|
||||||
- build-prod
|
|
||||||
|
|
||||||
- name: deploy-preview
|
- name: deploy-preview
|
||||||
image: node:18
|
image: node:18-alpine
|
||||||
pull: true
|
pull: always
|
||||||
environment:
|
environment:
|
||||||
NETLIFY_AUTH_TOKEN:
|
NETLIFY_AUTH_TOKEN:
|
||||||
from_secret: netlify_auth_token
|
from_secret: netlify_auth_token
|
||||||
|
@ -138,7 +148,8 @@ steps:
|
||||||
commands:
|
commands:
|
||||||
- cp -r dist dist-preview
|
- cp -r dist dist-preview
|
||||||
# Override the default api url used for preview
|
# Override the default api url used for preview
|
||||||
- sed -i 's|localhost:3456|try.vikunja.io|g' dist-preview/index.html
|
- sed -i 's|http://localhost:3456|https://try.vikunja.io|g' dist-preview/index.html
|
||||||
|
- apk add --no-cache perl-utils
|
||||||
- shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
|
- shasum -a 384 -c ./scripts/deploy-preview-netlify.js.sha384
|
||||||
- node ./scripts/deploy-preview-netlify.js
|
- node ./scripts/deploy-preview-netlify.js
|
||||||
depends_on:
|
depends_on:
|
||||||
|
@ -150,6 +161,7 @@ steps:
|
||||||
|
|
||||||
---
|
---
|
||||||
kind: pipeline
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
name: release-latest
|
name: release-latest
|
||||||
|
|
||||||
depends_on:
|
depends_on:
|
||||||
|
@ -169,7 +181,7 @@ steps:
|
||||||
|
|
||||||
# - name: restore-cache
|
# - name: restore-cache
|
||||||
# image: meltwater/drone-cache:dev
|
# image: meltwater/drone-cache:dev
|
||||||
# pull: true
|
# pull: always
|
||||||
# environment:
|
# environment:
|
||||||
# AWS_ACCESS_KEY_ID:
|
# AWS_ACCESS_KEY_ID:
|
||||||
# from_secret: cache_aws_access_key_id
|
# from_secret: cache_aws_access_key_id
|
||||||
|
@ -181,28 +193,29 @@ steps:
|
||||||
# endpoint: https://s3.fr-par.scw.cloud
|
# endpoint: https://s3.fr-par.scw.cloud
|
||||||
# region: fr-par
|
# region: fr-par
|
||||||
# path_style: true
|
# path_style: true
|
||||||
# cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
|
# cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
|
||||||
# mount:
|
# mount:
|
||||||
# - '.cache'
|
# - .cache
|
||||||
|
|
||||||
- name: build
|
- name: build
|
||||||
image: node:18
|
image: node:18-alpine
|
||||||
pull: true
|
pull: always
|
||||||
group: build-static
|
|
||||||
environment:
|
environment:
|
||||||
YARN_CACHE_FOLDER: .cache/yarn/
|
PNPM_CACHE_FOLDER: .cache/pnpm
|
||||||
commands:
|
commands:
|
||||||
- yarn --frozen-lockfile --network-timeout 100000
|
- apk add git
|
||||||
- yarn run lint
|
- corepack enable && pnpm config set store-dir .cache/.pnpm
|
||||||
|
- pnpm install --fetch-timeout 100000 --frozen-lockfile
|
||||||
|
- pnpm run lint
|
||||||
- "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
|
- "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
|
||||||
- yarn run build
|
- pnpm run build
|
||||||
- sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
|
- sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
|
||||||
# depends_on:
|
# depends_on:
|
||||||
# - restore-cache
|
# - restore-cache
|
||||||
|
|
||||||
- name: static
|
- name: static
|
||||||
image: kolaente/zip
|
image: kolaente/zip
|
||||||
pull: true
|
pull: always
|
||||||
commands:
|
commands:
|
||||||
- cd dist
|
- cd dist
|
||||||
- zip -r ../vikunja-frontend-unstable.zip *
|
- zip -r ../vikunja-frontend-unstable.zip *
|
||||||
|
@ -211,7 +224,7 @@ steps:
|
||||||
|
|
||||||
- name: release
|
- name: release
|
||||||
image: plugins/s3
|
image: plugins/s3
|
||||||
pull: true
|
pull: always
|
||||||
settings:
|
settings:
|
||||||
bucket: vikunja-releases
|
bucket: vikunja-releases
|
||||||
access_key:
|
access_key:
|
||||||
|
@ -227,6 +240,7 @@ steps:
|
||||||
|
|
||||||
---
|
---
|
||||||
kind: pipeline
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
name: release-version
|
name: release-version
|
||||||
|
|
||||||
depends_on:
|
depends_on:
|
||||||
|
@ -244,7 +258,7 @@ steps:
|
||||||
|
|
||||||
# - name: restore-cache
|
# - name: restore-cache
|
||||||
# image: meltwater/drone-cache:dev
|
# image: meltwater/drone-cache:dev
|
||||||
# pull: true
|
# pull: always
|
||||||
# environment:
|
# environment:
|
||||||
# AWS_ACCESS_KEY_ID:
|
# AWS_ACCESS_KEY_ID:
|
||||||
# from_secret: cache_aws_access_key_id
|
# from_secret: cache_aws_access_key_id
|
||||||
|
@ -256,28 +270,29 @@ steps:
|
||||||
# endpoint: https://s3.fr-par.scw.cloud
|
# endpoint: https://s3.fr-par.scw.cloud
|
||||||
# region: fr-par
|
# region: fr-par
|
||||||
# path_style: true
|
# path_style: true
|
||||||
# cache_key: '{{ .Repo.Name }}_{{ checksum "yarn.lock" }}_{{ arch }}_{{ os }}'
|
# cache_key: '{{ .Repo.Name }}_{{ checksum "pnpm-lock.yaml" }}_{{ arch }}_{{ os }}'
|
||||||
# mount:
|
# mount:
|
||||||
# - '.cache'
|
# - .cache
|
||||||
|
|
||||||
- name: build
|
- name: build
|
||||||
image: node:18
|
image: node:18-alpine
|
||||||
pull: true
|
pull: always
|
||||||
group: build-static
|
|
||||||
environment:
|
environment:
|
||||||
YARN_CACHE_FOLDER: .cache/yarn/
|
PNPM_CACHE_FOLDER: .cache/pnpm
|
||||||
commands:
|
commands:
|
||||||
- yarn --frozen-lockfile --network-timeout 100000
|
- apk add git
|
||||||
- yarn run lint
|
- corepack enable && pnpm config set store-dir .cache/pnpm
|
||||||
|
- pnpm install --fetch-timeout 100000 --frozen-lockfile
|
||||||
|
- pnpm run lint
|
||||||
- "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
|
- "echo '{\"VERSION\": \"'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'\"}' > src/version.json"
|
||||||
- yarn run build
|
- pnpm run build
|
||||||
- sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
|
- sed -i 's/http\:\\/\\/localhost\\:3456\\/api\\/v1/\\/api\\/v1/g' dist/index.html # Override the default api url used for developing
|
||||||
# depends_on:
|
# depends_on:
|
||||||
# - restore-cache
|
# - restore-cache
|
||||||
|
|
||||||
- name: static
|
- name: static
|
||||||
image: kolaente/zip
|
image: kolaente/zip
|
||||||
pull: true
|
pull: always
|
||||||
commands:
|
commands:
|
||||||
- cd dist
|
- cd dist
|
||||||
- zip -r ../vikunja-frontend-${DRONE_TAG##v}.zip *
|
- zip -r ../vikunja-frontend-${DRONE_TAG##v}.zip *
|
||||||
|
@ -286,7 +301,7 @@ steps:
|
||||||
|
|
||||||
- name: release
|
- name: release
|
||||||
image: plugins/s3
|
image: plugins/s3
|
||||||
pull: true
|
pull: always
|
||||||
settings:
|
settings:
|
||||||
bucket: vikunja-releases
|
bucket: vikunja-releases
|
||||||
access_key:
|
access_key:
|
||||||
|
@ -302,6 +317,7 @@ steps:
|
||||||
|
|
||||||
---
|
---
|
||||||
kind: pipeline
|
kind: pipeline
|
||||||
|
type: docker
|
||||||
name: trigger-desktop-update
|
name: trigger-desktop-update
|
||||||
|
|
||||||
trigger:
|
trigger:
|
||||||
|
@ -326,111 +342,7 @@ steps:
|
||||||
---
|
---
|
||||||
kind: pipeline
|
kind: pipeline
|
||||||
type: docker
|
type: docker
|
||||||
name: docker-arm-release
|
name: docker-release
|
||||||
|
|
||||||
depends_on:
|
|
||||||
- release-latest
|
|
||||||
- release-version
|
|
||||||
|
|
||||||
platform:
|
|
||||||
os: linux
|
|
||||||
arch: arm64
|
|
||||||
|
|
||||||
trigger:
|
|
||||||
ref:
|
|
||||||
- refs/heads/main
|
|
||||||
- "refs/tags/**"
|
|
||||||
event:
|
|
||||||
exclude:
|
|
||||||
- cron
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: docker-unstable
|
|
||||||
image: plugins/docker:linux-arm
|
|
||||||
pull: true
|
|
||||||
settings:
|
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
repo: vikunja/frontend
|
|
||||||
tags: unstable-linux-arm
|
|
||||||
build_args:
|
|
||||||
- USE_RELEASE=true
|
|
||||||
- RELEASE_VERSION=unstable
|
|
||||||
when:
|
|
||||||
ref:
|
|
||||||
- refs/heads/main
|
|
||||||
depends_on:
|
|
||||||
- clone
|
|
||||||
|
|
||||||
- name: docker-version
|
|
||||||
image: plugins/docker:linux-arm
|
|
||||||
pull: true
|
|
||||||
settings:
|
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
repo: vikunja/frontend
|
|
||||||
auto_tag: true
|
|
||||||
auto_tag_suffix: linux-arm
|
|
||||||
build_args:
|
|
||||||
- USE_RELEASE=true
|
|
||||||
- RELEASE_VERSION=${DRONE_TAG##v}
|
|
||||||
when:
|
|
||||||
ref:
|
|
||||||
- "refs/tags/**"
|
|
||||||
depends_on:
|
|
||||||
- clone
|
|
||||||
|
|
||||||
- name: docker-unstable-arm64
|
|
||||||
image: plugins/docker:linux-arm64
|
|
||||||
pull: true
|
|
||||||
settings:
|
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
repo: vikunja/frontend
|
|
||||||
tags: unstable-linux-arm64
|
|
||||||
build_args:
|
|
||||||
- USE_RELEASE=true
|
|
||||||
- RELEASE_VERSION=unstable
|
|
||||||
when:
|
|
||||||
ref:
|
|
||||||
- refs/heads/main
|
|
||||||
depends_on:
|
|
||||||
- clone
|
|
||||||
|
|
||||||
- name: docker-version-arm64
|
|
||||||
image: plugins/docker:linux-arm64
|
|
||||||
pull: true
|
|
||||||
settings:
|
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
repo: vikunja/frontend
|
|
||||||
auto_tag: true
|
|
||||||
auto_tag_suffix: linux-arm64
|
|
||||||
build_args:
|
|
||||||
- USE_RELEASE=true
|
|
||||||
- RELEASE_VERSION=${DRONE_TAG##v}
|
|
||||||
when:
|
|
||||||
ref:
|
|
||||||
- "refs/tags/**"
|
|
||||||
depends_on:
|
|
||||||
- clone
|
|
||||||
|
|
||||||
---
|
|
||||||
kind: pipeline
|
|
||||||
type: docker
|
|
||||||
name: docker-amd64-release
|
|
||||||
|
|
||||||
platform:
|
|
||||||
os: linux
|
|
||||||
arch: amd64
|
|
||||||
|
|
||||||
depends_on:
|
depends_on:
|
||||||
- release-latest
|
- release-latest
|
||||||
|
@ -445,8 +357,14 @@ trigger:
|
||||||
- cron
|
- cron
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
|
- name: fetch-tags
|
||||||
|
image: docker:git
|
||||||
|
commands:
|
||||||
|
- git fetch --tags
|
||||||
|
|
||||||
- name: docker-unstable
|
- name: docker-unstable
|
||||||
image: plugins/docker:linux-amd64
|
image: thegeeklab/drone-docker-buildx
|
||||||
|
privileged: true
|
||||||
pull: true
|
pull: true
|
||||||
settings:
|
settings:
|
||||||
username:
|
username:
|
||||||
|
@ -454,92 +372,42 @@ steps:
|
||||||
password:
|
password:
|
||||||
from_secret: docker_password
|
from_secret: docker_password
|
||||||
repo: vikunja/frontend
|
repo: vikunja/frontend
|
||||||
tags: unstable-linux-amd64
|
|
||||||
build_args:
|
|
||||||
- USE_RELEASE=true
|
|
||||||
- RELEASE_VERSION=unstable
|
|
||||||
when:
|
|
||||||
ref:
|
|
||||||
- refs/heads/main
|
|
||||||
|
|
||||||
- name: docker-version
|
|
||||||
image: plugins/docker:linux-amd64
|
|
||||||
pull: true
|
|
||||||
settings:
|
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
repo: vikunja/frontend
|
|
||||||
auto_tag: true
|
|
||||||
auto_tag_suffix: linux-amd64
|
|
||||||
build_args:
|
|
||||||
- USE_RELEASE=true
|
|
||||||
- RELEASE_VERSION=${DRONE_TAG##v}
|
|
||||||
when:
|
|
||||||
ref:
|
|
||||||
- "refs/tags/**"
|
|
||||||
|
|
||||||
---
|
|
||||||
kind: pipeline
|
|
||||||
type: docker
|
|
||||||
name: docker-manifest
|
|
||||||
|
|
||||||
trigger:
|
|
||||||
ref:
|
|
||||||
- refs/heads/main
|
|
||||||
- "refs/tags/**"
|
|
||||||
event:
|
|
||||||
exclude:
|
|
||||||
- cron
|
|
||||||
|
|
||||||
depends_on:
|
|
||||||
- docker-amd64-release
|
|
||||||
- docker-arm-release
|
|
||||||
|
|
||||||
steps:
|
|
||||||
- name: manifest-unstable
|
|
||||||
pull: always
|
|
||||||
image: plugins/manifest
|
|
||||||
settings:
|
|
||||||
tags: unstable
|
tags: unstable
|
||||||
spec: docker-manifest-unstable.tmpl
|
build_args:
|
||||||
password:
|
- USE_RELEASE=true
|
||||||
from_secret: docker_password
|
- RELEASE_VERSION=unstable
|
||||||
username:
|
platforms:
|
||||||
from_secret: docker_username
|
- linux/386
|
||||||
|
- linux/amd64
|
||||||
|
- linux/arm/v6
|
||||||
|
- linux/arm/v7
|
||||||
|
- linux/arm64/v8
|
||||||
|
depends_on: [ fetch-tags ]
|
||||||
when:
|
when:
|
||||||
ref:
|
ref:
|
||||||
- refs/heads/main
|
- refs/heads/main
|
||||||
|
|
||||||
- name: manifest-release
|
- name: docker-release
|
||||||
pull: always
|
image: thegeeklab/drone-docker-buildx
|
||||||
image: plugins/manifest
|
privileged: true
|
||||||
|
pull: true
|
||||||
settings:
|
settings:
|
||||||
|
username:
|
||||||
|
from_secret: docker_username
|
||||||
|
password:
|
||||||
|
from_secret: docker_password
|
||||||
|
repo: vikunja/frontend
|
||||||
auto_tag: true
|
auto_tag: true
|
||||||
ignore_missing: true
|
build_args:
|
||||||
spec: docker-manifest.tmpl
|
- USE_RELEASE=true
|
||||||
password:
|
- RELEASE_VERSION=${DRONE_TAG##v}
|
||||||
from_secret: docker_password
|
platforms:
|
||||||
username:
|
- linux/386
|
||||||
from_secret: docker_username
|
- linux/amd64
|
||||||
when:
|
- linux/arm/v6
|
||||||
ref:
|
- linux/arm/v7
|
||||||
- "refs/tags/**"
|
- linux/arm64/v8
|
||||||
|
depends_on: [ fetch-tags ]
|
||||||
- name: manifest-release-latest
|
|
||||||
pull: always
|
|
||||||
image: plugins/manifest
|
|
||||||
depends_on:
|
|
||||||
- clone
|
|
||||||
settings:
|
|
||||||
tags: latest
|
|
||||||
ignore_missing: true
|
|
||||||
spec: docker-manifest.tmpl
|
|
||||||
password:
|
|
||||||
from_secret: docker_password
|
|
||||||
username:
|
|
||||||
from_secret: docker_username
|
|
||||||
when:
|
when:
|
||||||
ref:
|
ref:
|
||||||
- "refs/tags/**"
|
- "refs/tags/**"
|
||||||
|
@ -562,9 +430,7 @@ depends_on:
|
||||||
- release-version
|
- release-version
|
||||||
- release-latest
|
- release-latest
|
||||||
- trigger-desktop-update
|
- trigger-desktop-update
|
||||||
- docker-arm-release
|
- docker-release
|
||||||
- docker-amd64-release
|
|
||||||
- docker-manifest
|
|
||||||
|
|
||||||
steps:
|
steps:
|
||||||
- name: notify
|
- name: notify
|
||||||
|
@ -647,6 +513,6 @@ steps:
|
||||||
from_secret: crowdin_key
|
from_secret: crowdin_key
|
||||||
---
|
---
|
||||||
kind: signature
|
kind: signature
|
||||||
hmac: 997e1badebe484ac29557c4af356e63db4d3d57f3d32e92d482f117f8cec64da
|
hmac: 9f26b5af73e3464e9ee1b5fbcb96854ca8a7e5f8d6ee2d85fd8376aad951b446
|
||||||
|
|
||||||
...
|
...
|
||||||
|
|
58
.eslintrc.cjs
Normal file
58
.eslintrc.cjs
Normal file
|
@ -0,0 +1,58 @@
|
||||||
|
/* eslint-env node */
|
||||||
|
require("@rushstack/eslint-patch/modern-module-resolution")
|
||||||
|
|
||||||
|
module.exports = {
|
||||||
|
'root': true,
|
||||||
|
'env': {
|
||||||
|
'browser': true,
|
||||||
|
'es2022': true,
|
||||||
|
'node': true,
|
||||||
|
'vue/setup-compiler-macros': true,
|
||||||
|
},
|
||||||
|
'extends': [
|
||||||
|
'eslint:recommended',
|
||||||
|
'plugin:vue/vue3-essential',
|
||||||
|
'@vue/eslint-config-typescript/recommended',
|
||||||
|
],
|
||||||
|
'rules': {
|
||||||
|
'vue/html-quotes': [
|
||||||
|
'error',
|
||||||
|
'double',
|
||||||
|
],
|
||||||
|
'quotes': [
|
||||||
|
'error',
|
||||||
|
'single',
|
||||||
|
],
|
||||||
|
'comma-dangle': [
|
||||||
|
'error',
|
||||||
|
'always-multiline',
|
||||||
|
],
|
||||||
|
'semi': [
|
||||||
|
'error',
|
||||||
|
'never',
|
||||||
|
],
|
||||||
|
|
||||||
|
// see https://segmentfault.com/q/1010000040813116/a-1020000041134455 (original in chinese)
|
||||||
|
'no-unused-vars': 'off',
|
||||||
|
'@typescript-eslint/no-unused-vars': ['error', { vars: 'all', args: 'after-used', ignoreRestSiblings: true }],
|
||||||
|
|
||||||
|
'vue/multi-word-component-names': 0,
|
||||||
|
// disabled until we have support for reactivityTransform
|
||||||
|
// See https://github.com/vuejs/eslint-plugin-vue/issues/1948
|
||||||
|
// see also setting in `vite.config`
|
||||||
|
'vue/no-setup-props-destructure': 0,
|
||||||
|
},
|
||||||
|
'parser': 'vue-eslint-parser',
|
||||||
|
'parserOptions': {
|
||||||
|
'parser': '@typescript-eslint/parser',
|
||||||
|
'ecmaVersion': 2022,
|
||||||
|
'sourceType': 'module',
|
||||||
|
},
|
||||||
|
'ignorePatterns': [
|
||||||
|
'*.test.*',
|
||||||
|
'cypress/*',
|
||||||
|
],
|
||||||
|
'globals': {
|
||||||
|
'defineProps': 'readonly',
|
||||||
|
},
|
||||||
|
}
|
44
.gitea/issue_template.md
Normal file
44
.gitea/issue_template.md
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
<!--
|
||||||
|
|
||||||
|
Please fill out this issue template to report a bug.
|
||||||
|
If you want to propose a new feature, please open a discussion thread in the forum: https://community.vikunja.io
|
||||||
|
|
||||||
|
-->
|
||||||
|
|
||||||
|
**Version information:**
|
||||||
|
|
||||||
|
Frontend Version:
|
||||||
|
API Version:
|
||||||
|
Browser and OS Version:
|
||||||
|
|
||||||
|
**Steps to reproduce:**
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Add clear steps to reproduce the bug. Provide screenshots where applicable.
|
||||||
|
-->
|
||||||
|
|
||||||
|
1.
|
||||||
|
2.
|
||||||
|
...
|
||||||
|
|
||||||
|
**Expected behavior:**
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Describe what happened.
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Actual behavior:**
|
||||||
|
|
||||||
|
<!--
|
||||||
|
Describe what happened instead.
|
||||||
|
-->
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Checklist:**
|
||||||
|
|
||||||
|
* [ ] I have provided all required information
|
||||||
|
* [ ] I am using the latest release or the latest unstable build
|
||||||
|
* [ ] I was able to reproduce the bug on [try](https://try.vikunja.io)
|
58
.github/ISSUE_TEMPLATE/bug-report.yml
vendored
Normal file
58
.github/ISSUE_TEMPLATE/bug-report.yml
vendored
Normal file
|
@ -0,0 +1,58 @@
|
||||||
|
name: Bug Report
|
||||||
|
description: Found something you weren't expecting? Report it here!
|
||||||
|
labels: kind/bug
|
||||||
|
body:
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |
|
||||||
|
NOTE: If your issue is a security concern, please send an email to security@vikunja.io instead of opening a public issue.
|
||||||
|
- type: markdown
|
||||||
|
attributes:
|
||||||
|
value: |
|
||||||
|
Please fill out this issue template to report a bug.
|
||||||
|
|
||||||
|
1. If you want to propose a new feature, please open a discussion thread in the forum: https://community.vikunja.io
|
||||||
|
2. Please ask questions or configuration/deploy problems on our [Matrix Room](https://matrix.to/#/#vikunja:matrix.org) or forum (https://community.vikunja.io).
|
||||||
|
3. Make sure you are using the latest release and
|
||||||
|
take a moment to check that your issue hasn't been reported before.
|
||||||
|
4. Please give all relevant information below for bug reports, because
|
||||||
|
incomplete details will be handled as an invalid report and closed.
|
||||||
|
- type: textarea
|
||||||
|
id: description
|
||||||
|
attributes:
|
||||||
|
label: Description
|
||||||
|
description: |
|
||||||
|
Please provide a description of your issue here, with a URL if you were able to reproduce the issue (see below).
|
||||||
|
- type: input
|
||||||
|
id: frontend-version
|
||||||
|
attributes:
|
||||||
|
label: Vikunja Frontend Version
|
||||||
|
description: Vikunja frontend version (or commit reference) of your instance
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: input
|
||||||
|
id: api-version
|
||||||
|
attributes:
|
||||||
|
label: Vikunja API Version
|
||||||
|
description: Vikunja API version (or commit reference) of your instance
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: input
|
||||||
|
id: browser-version
|
||||||
|
attributes:
|
||||||
|
label: Browser and version
|
||||||
|
description: If your issue is related to a frontend problem, please provide the browser and version you used to reproduce it.
|
||||||
|
- type: dropdown
|
||||||
|
id: can-reproduce
|
||||||
|
attributes:
|
||||||
|
label: Can you reproduce the bug on the Vikunja demo site?
|
||||||
|
options:
|
||||||
|
- "Yes"
|
||||||
|
- "No"
|
||||||
|
validations:
|
||||||
|
required: true
|
||||||
|
- type: textarea
|
||||||
|
id: screenshots
|
||||||
|
attributes:
|
||||||
|
label: Screenshots
|
||||||
|
description: If this issue involves the Web Interface, please provide one or more screenshots
|
17
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
17
.github/ISSUE_TEMPLATE/config.yml
vendored
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
blank_issues_enabled: false
|
||||||
|
contact_links:
|
||||||
|
- name: API issues
|
||||||
|
url: https://code.vikunja.io/api/issues
|
||||||
|
about: This is the frontend repo. Please open api-related bug reports and discussions in the api 0repo. Not sure if your issue is frontend or api? Ask in Matrix or the forum first.
|
||||||
|
- name: Forum
|
||||||
|
url: https://community.vikunja.io/
|
||||||
|
about: Feature Requests, Questions, configuration or deployment problems should be discussed in the forum.
|
||||||
|
- name: Security-related issues
|
||||||
|
url: https://vikunja.io/contact/#security
|
||||||
|
about: For security concerns, please send a mail to security@vikunja.io instead of opening a public issue.
|
||||||
|
- name: Chat on Matrix
|
||||||
|
url: https://matrix.to/#/#vikunja:matrix.org
|
||||||
|
about: Please ask any quick questions here.
|
||||||
|
- name: Translations
|
||||||
|
url: https://crowdin.com/project/vikunja
|
||||||
|
about: Any problems or requests for new languages about translations should be handled in crowdin.
|
5
.gitignore
vendored
5
.gitignore
vendored
|
@ -2,16 +2,21 @@
|
||||||
node_modules
|
node_modules
|
||||||
/dist*
|
/dist*
|
||||||
*.zip
|
*.zip
|
||||||
|
.direnv/
|
||||||
|
|
||||||
# local env files
|
# local env files
|
||||||
.env.local
|
.env.local
|
||||||
.env.*.local
|
.env.*.local
|
||||||
|
|
||||||
# Log files
|
# Log files
|
||||||
|
logs
|
||||||
|
*.log
|
||||||
npm-debug.log*
|
npm-debug.log*
|
||||||
yarn-debug.log*
|
yarn-debug.log*
|
||||||
yarn-error.log*
|
yarn-error.log*
|
||||||
stats.html
|
stats.html
|
||||||
|
pnpm-debug.log*
|
||||||
|
lerna-debug.log*
|
||||||
|
|
||||||
# Editor directories and files
|
# Editor directories and files
|
||||||
.idea
|
.idea
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"eslint.packageManager": "yarn",
|
"eslint.packageManager": "pnpm",
|
||||||
"editor.formatOnSave": false,
|
"editor.formatOnSave": false,
|
||||||
"editor.codeActionsOnSave": {
|
"editor.codeActionsOnSave": {
|
||||||
"source.fixAll": true
|
"source.fixAll": true
|
||||||
|
@ -18,13 +18,11 @@
|
||||||
"javascriptreact",
|
"javascriptreact",
|
||||||
"vue"
|
"vue"
|
||||||
],
|
],
|
||||||
"vetur.validation.template": false,
|
|
||||||
|
|
||||||
// i18n ally
|
// i18n ally
|
||||||
"i18n-ally.localesPaths": [
|
"i18n-ally.localesPaths": [
|
||||||
"src/i18n/lang"
|
"src/i18n/lang"
|
||||||
],
|
],
|
||||||
"i18n-ally.sortKeys": true,
|
"i18n-ally.sortKeys": true,
|
||||||
"i18n-ally.keepFulfilled": true,
|
"i18n-ally.keepFulfilled": true,
|
||||||
"i18n-ally.keystyle": "nested",
|
"i18n-ally.keystyle": "nested"
|
||||||
}
|
}
|
2743
CHANGELOG.md
2743
CHANGELOG.md
File diff suppressed because it is too large
Load Diff
26
Dockerfile
26
Dockerfile
|
@ -1,31 +1,35 @@
|
||||||
# Stage 1: Build application
|
# Stage 1: Build application
|
||||||
FROM node:18 AS compile-image
|
FROM --platform=$BUILDPLATFORM node:18-alpine AS compile-image
|
||||||
|
|
||||||
WORKDIR /build
|
WORKDIR /build
|
||||||
|
|
||||||
ARG USE_RELEASE=false
|
ARG USE_RELEASE=false
|
||||||
ARG RELEASE_VERSION=main
|
ARG RELEASE_VERSION=main
|
||||||
|
|
||||||
ENV YARN_CACHE_FOLDER .cache/yarn/
|
ENV PNPM_CACHE_FOLDER .cache/pnpm/
|
||||||
COPY . ./
|
ADD . ./
|
||||||
|
|
||||||
RUN \
|
RUN \
|
||||||
if [ $USE_RELEASE = true ]; then \
|
if [ $USE_RELEASE = true ]; then \
|
||||||
rm -rf dist/ && \
|
|
||||||
wget https://dl.vikunja.io/frontend/vikunja-frontend-$RELEASE_VERSION.zip -O frontend-release.zip && \
|
wget https://dl.vikunja.io/frontend/vikunja-frontend-$RELEASE_VERSION.zip -O frontend-release.zip && \
|
||||||
unzip frontend-release.zip -d dist/ && \
|
unzip frontend-release.zip -d dist/ && \
|
||||||
exit 0; \
|
exit 0; \
|
||||||
fi && \
|
fi && \
|
||||||
|
# https://pnpm.io/installation#using-corepack
|
||||||
|
corepack enable && \
|
||||||
|
# we don't use corepack prepare here by intend since
|
||||||
|
# we have renovate to keep our dependencies up to date
|
||||||
# Build the frontend
|
# Build the frontend
|
||||||
yarn install --frozen-lockfile --network-timeout 100000 && \
|
pnpm install && \
|
||||||
|
apk add --no-cache git && \
|
||||||
echo '{"VERSION": "'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'"}' > src/version.json && \
|
echo '{"VERSION": "'$(git describe --tags --always --abbrev=10 | sed 's/-/+/' | sed 's/^v//' | sed 's/-g/-/')'"}' > src/version.json && \
|
||||||
yarn run build
|
pnpm run build
|
||||||
|
|
||||||
# Stage 2: copy
|
# Stage 2: copy
|
||||||
FROM nginx
|
FROM nginx:alpine
|
||||||
|
|
||||||
COPY nginx.conf /etc/nginx/nginx.conf
|
COPY nginx.conf /etc/nginx/nginx.conf
|
||||||
COPY run.sh /run.sh
|
COPY scripts/run.sh /run.sh
|
||||||
|
|
||||||
# copy compiled files from stage 1
|
# copy compiled files from stage 1
|
||||||
COPY --from=compile-image /build/dist /usr/share/nginx/html
|
COPY --from=compile-image /build/dist /usr/share/nginx/html
|
||||||
|
@ -36,4 +40,10 @@ ENV PGID 1000
|
||||||
|
|
||||||
LABEL maintainer="maintainers@vikunja.io"
|
LABEL maintainer="maintainers@vikunja.io"
|
||||||
|
|
||||||
|
RUN apk add --no-cache \
|
||||||
|
# for sh file
|
||||||
|
bash \
|
||||||
|
# installs usermod and groupmod
|
||||||
|
shadow
|
||||||
|
|
||||||
CMD "/run.sh"
|
CMD "/run.sh"
|
||||||
|
|
14
README.md
14
README.md
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
[![Build Status](https://drone.kolaente.de/api/badges/vikunja/frontend/status.svg)](https://drone.kolaente.de/vikunja/frontend)
|
[![Build Status](https://drone.kolaente.de/api/badges/vikunja/frontend/status.svg)](https://drone.kolaente.de/vikunja/frontend)
|
||||||
[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
|
[![License: AGPL v3](https://img.shields.io/badge/License-AGPL%20v3-blue.svg)](LICENSE)
|
||||||
[![Download](https://img.shields.io/badge/download-v0.18.2-brightgreen.svg)](https://dl.vikunja.io)
|
[![Download](https://img.shields.io/badge/download-v0.20.1-brightgreen.svg)](https://dl.vikunja.io)
|
||||||
[![Translation](https://badges.crowdin.net/vikunja/localized.svg)](https://crowdin.com/project/vikunja)
|
[![Translation](https://badges.crowdin.net/vikunja/localized.svg)](https://crowdin.com/project/vikunja)
|
||||||
|
|
||||||
This is the web frontend for Vikunja, written in Vue.js.
|
This is the web frontend for Vikunja, written in Vue.js.
|
||||||
|
@ -22,23 +22,27 @@ There is a [docker image available](https://hub.docker.com/r/vikunja/api) with s
|
||||||
## Project setup
|
## Project setup
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
yarn install
|
pnpm install
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and hot-reloads for development
|
### Compiles and hot-reloads for development
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
yarn run serve
|
pnpm run serve
|
||||||
```
|
```
|
||||||
|
|
||||||
### Compiles and minifies for production
|
### Compiles and minifies for production
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
yarn run build
|
pnpm run build
|
||||||
```
|
```
|
||||||
|
|
||||||
### Lints and fixes files
|
### Lints and fixes files
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
yarn run lint
|
pnpm run lint
|
||||||
```
|
```
|
||||||
|
|
||||||
|
## Sponsors
|
||||||
|
|
||||||
|
[![Relm](https://vikunja.io/images/sponsors/relm.png)](https://relm.us)
|
||||||
|
|
59
cliff.toml
Normal file
59
cliff.toml
Normal file
|
@ -0,0 +1,59 @@
|
||||||
|
[changelog]
|
||||||
|
body = """
|
||||||
|
{% if version %}\
|
||||||
|
## [{{ version | trim_start_matches(pat="v") }}] - {{ timestamp | date(format="%Y-%m-%d") }}
|
||||||
|
{% else %}\
|
||||||
|
## [unreleased]
|
||||||
|
{% endif %}\
|
||||||
|
|
||||||
|
|
||||||
|
{% for group, commits in commits | group_by(attribute="group") %}
|
||||||
|
### {{ group | upper_first }}
|
||||||
|
{% for commit in commits
|
||||||
|
| filter(attribute="scope")
|
||||||
|
| sort(attribute="scope") %}
|
||||||
|
* *({{commit.scope}})* {{ commit.message | upper_first }}
|
||||||
|
{%- if commit.breaking %}
|
||||||
|
{% raw %} {% endraw %}- **BREAKING**: {{commit.breaking_description}}
|
||||||
|
{%- endif -%}
|
||||||
|
{%- endfor -%}
|
||||||
|
{%- for commit in commits %}
|
||||||
|
{%- if commit.scope -%}
|
||||||
|
{% else -%}
|
||||||
|
* {{ commit.message | upper_first }} ([{{ commit.id | truncate(length=7, end="") }}]({{ commit.id }}))
|
||||||
|
{% if commit.breaking -%}
|
||||||
|
{% raw %} {% endraw %}- **BREAKING**: {{commit.breaking_description}}
|
||||||
|
{% endif -%}
|
||||||
|
{% endif -%}
|
||||||
|
{% endfor -%}
|
||||||
|
{% raw %}\n{% endraw %}\
|
||||||
|
{% endfor %}\n
|
||||||
|
|
||||||
|
"""
|
||||||
|
#{% for group, commits in commits | group_by(attribute="group") %}
|
||||||
|
# ### {{ group | upper_first }}
|
||||||
|
# {% for commit in commits %}\
|
||||||
|
# - {% if commit.breaking %}[**breaking**] {% endif %}{{ commit.message | upper_first }} ([{{ commit.id | truncate(length=7, end="") }}]({{ commit.id }}))
|
||||||
|
# {% endfor %}\
|
||||||
|
#{% endfor %}\n
|
||||||
|
# remove the leading and trailing whitespace from the template
|
||||||
|
trim = true
|
||||||
|
|
||||||
|
[git]
|
||||||
|
conventional_commits = true
|
||||||
|
filter_unconventional = false
|
||||||
|
commit_parsers = [
|
||||||
|
{ message = ".*(deps).*", group = "Dependencies"},
|
||||||
|
{ message = "^feat", group = "Features"},
|
||||||
|
{ message = "^fix", group = "Bug Fixes"},
|
||||||
|
{ message = "^doc", group = "Documentation"},
|
||||||
|
{ message = "^perf", group = "Performance"},
|
||||||
|
{ message = "^refactor", group = "Refactor"},
|
||||||
|
{ message = "^style", group = "Styling"},
|
||||||
|
{ message = "^test", group = "Testing"},
|
||||||
|
{ message = "^chore\\(release\\): prepare for", skip = true},
|
||||||
|
{ message = "^chore", group = "Miscellaneous Tasks"},
|
||||||
|
{ body = ".*security", group = "Security"},
|
||||||
|
{ message = ".*", group = "Other", default_scope = "other"}, # Everything that's not a conventional commit goes into the "Other" category
|
||||||
|
]
|
||||||
|
|
|
@ -1,22 +1,25 @@
|
||||||
import { defineConfig } from 'cypress'
|
import {defineConfig} from 'cypress'
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
env: {
|
env: {
|
||||||
API_URL: 'http://localhost:3456/api/v1',
|
API_URL: 'http://localhost:3456/api/v1',
|
||||||
TEST_SECRET: 'averyLongSecretToSe33dtheDB',
|
TEST_SECRET: 'averyLongSecretToSe33dtheDB',
|
||||||
},
|
},
|
||||||
video: false,
|
video: false,
|
||||||
retries: {
|
retries: {
|
||||||
runMode: 2,
|
runMode: 2,
|
||||||
},
|
},
|
||||||
projectId: '181c7x',
|
projectId: '181c7x',
|
||||||
e2e: {
|
e2e: {
|
||||||
// We've imported your old cypress plugins here.
|
baseUrl: 'http://localhost:4173',
|
||||||
// You may want to clean this up later by importing these.
|
specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
|
||||||
setupNodeEvents(on, config) {
|
},
|
||||||
return require('./cypress/plugins/index.js')(on, config)
|
component: {
|
||||||
},
|
devServer: {
|
||||||
baseUrl: 'http://localhost:4173',
|
framework: 'vue',
|
||||||
specPattern: 'cypress/e2e/**/*.{js,jsx,ts,tsx}',
|
bundler: 'vite',
|
||||||
},
|
},
|
||||||
|
},
|
||||||
|
viewportWidth: 1600,
|
||||||
|
viewportHeight: 900,
|
||||||
})
|
})
|
||||||
|
|
|
@ -36,7 +36,7 @@ to get a shell inside the cypress container.
|
||||||
In that shell you can then execute the tests with
|
In that shell you can then execute the tests with
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
yarn test:frontend
|
pnpm run test:frontend
|
||||||
```
|
```
|
||||||
|
|
||||||
### Using The Cypress Dashboard
|
### Using The Cypress Dashboard
|
||||||
|
@ -44,5 +44,5 @@ yarn test:frontend
|
||||||
To open the Cypress Dashboard and run tests from there, run
|
To open the Cypress Dashboard and run tests from there, run
|
||||||
|
|
||||||
```shell
|
```shell
|
||||||
yarn cypress:open
|
pnpm run cypress:open
|
||||||
```
|
```
|
||||||
|
|
|
@ -9,7 +9,7 @@ services:
|
||||||
ports:
|
ports:
|
||||||
- 3456:3456
|
- 3456:3456
|
||||||
cypress:
|
cypress:
|
||||||
image: cypress/browsers:node12.18.3-chrome87-ff82
|
image: cypress/browsers:node16.14.0-chrome99-ff97
|
||||||
volumes:
|
volumes:
|
||||||
- ..:/project
|
- ..:/project
|
||||||
- $HOME/.cache:/home/node/.cache/
|
- $HOME/.cache:/home/node/.cache/
|
||||||
|
|
|
@ -45,7 +45,7 @@ describe('List History', () => {
|
||||||
|
|
||||||
cy.get('body')
|
cy.get('body')
|
||||||
.should('contain', 'Last viewed')
|
.should('contain', 'Last viewed')
|
||||||
cy.get('.list-cards-wrapper-2-rows')
|
cy.get('[data-cy="listCardGrid"]')
|
||||||
.should('not.contain', lists[0].title)
|
.should('not.contain', lists[0].title)
|
||||||
.should('contain', lists[1].title)
|
.should('contain', lists[1].title)
|
||||||
.should('contain', lists[2].title)
|
.should('contain', lists[2].title)
|
|
@ -1,76 +0,0 @@
|
||||||
import {formatISO, format} from 'date-fns'
|
|
||||||
import {TaskFactory} from '../../factories/task'
|
|
||||||
import {prepareLists} from './prepareLists'
|
|
||||||
|
|
||||||
import '../../support/authenticateUser'
|
|
||||||
|
|
||||||
describe('List View Gantt', () => {
|
|
||||||
prepareLists()
|
|
||||||
|
|
||||||
it('Hides tasks with no dates', () => {
|
|
||||||
const tasks = TaskFactory.create(1)
|
|
||||||
cy.visit('/lists/1/gantt')
|
|
||||||
|
|
||||||
cy.get('.gantt-chart .tasks')
|
|
||||||
.should('not.contain', tasks[0].title)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('Shows tasks from the current and next month', () => {
|
|
||||||
const now = new Date()
|
|
||||||
const nextMonth = now
|
|
||||||
nextMonth.setDate(1)
|
|
||||||
nextMonth.setMonth(now.getMonth() + 1)
|
|
||||||
|
|
||||||
cy.visit('/lists/1/gantt')
|
|
||||||
|
|
||||||
cy.get('.gantt-chart .months')
|
|
||||||
.should('contain', format(now, 'MMMM'))
|
|
||||||
.should('contain', format(nextMonth, 'MMMM'))
|
|
||||||
})
|
|
||||||
|
|
||||||
it('Shows tasks with dates', () => {
|
|
||||||
const now = new Date()
|
|
||||||
const tasks = TaskFactory.create(1, {
|
|
||||||
start_date: formatISO(now),
|
|
||||||
end_date: formatISO(now.setDate(now.getDate() + 4))
|
|
||||||
})
|
|
||||||
cy.visit('/lists/1/gantt')
|
|
||||||
|
|
||||||
cy.get('.gantt-chart .tasks')
|
|
||||||
.should('not.be.empty')
|
|
||||||
cy.get('.gantt-chart .tasks')
|
|
||||||
.should('contain', tasks[0].title)
|
|
||||||
})
|
|
||||||
|
|
||||||
it('Shows tasks with no dates after enabling them', () => {
|
|
||||||
TaskFactory.create(1, {
|
|
||||||
start_date: null,
|
|
||||||
end_date: null,
|
|
||||||
})
|
|
||||||
cy.visit('/lists/1/gantt')
|
|
||||||
|
|
||||||
cy.get('.gantt-options .fancycheckbox')
|
|
||||||
.contains('Show tasks which don\'t have dates set')
|
|
||||||
.click()
|
|
||||||
|
|
||||||
cy.get('.gantt-chart .tasks')
|
|
||||||
.should('not.be.empty')
|
|
||||||
cy.get('.gantt-chart .tasks .task.nodate')
|
|
||||||
.should('exist')
|
|
||||||
})
|
|
||||||
|
|
||||||
it('Drags a task around', () => {
|
|
||||||
const now = new Date()
|
|
||||||
TaskFactory.create(1, {
|
|
||||||
start_date: formatISO(now),
|
|
||||||
end_date: formatISO(now.setDate(now.getDate() + 4))
|
|
||||||
})
|
|
||||||
cy.visit('/lists/1/gantt')
|
|
||||||
|
|
||||||
cy.get('.gantt-chart .tasks .task')
|
|
||||||
.first()
|
|
||||||
.trigger('mousedown', {which: 1})
|
|
||||||
.trigger('mousemove', {clientX: 500, clientY: 0})
|
|
||||||
.trigger('mouseup', {force: true})
|
|
||||||
})
|
|
||||||
})
|
|
125
cypress/e2e/list/list-view-gantt.spec.ts
Normal file
125
cypress/e2e/list/list-view-gantt.spec.ts
Normal file
|
@ -0,0 +1,125 @@
|
||||||
|
import {formatISO, format} from 'date-fns'
|
||||||
|
import {TaskFactory} from '../../factories/task'
|
||||||
|
import {prepareLists} from './prepareLists'
|
||||||
|
|
||||||
|
import '../../support/authenticateUser'
|
||||||
|
|
||||||
|
describe('List View Gantt', () => {
|
||||||
|
prepareLists()
|
||||||
|
|
||||||
|
it('Hides tasks with no dates', () => {
|
||||||
|
const tasks = TaskFactory.create(1)
|
||||||
|
cy.visit('/lists/1/gantt')
|
||||||
|
|
||||||
|
cy.get('.g-gantt-rows-container')
|
||||||
|
.should('not.contain', tasks[0].title)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Shows tasks from the current and next month', () => {
|
||||||
|
const now = Date.UTC(2022, 8, 25)
|
||||||
|
cy.clock(now, ['Date'])
|
||||||
|
|
||||||
|
const nextMonth = new Date(now)
|
||||||
|
nextMonth.setDate(1)
|
||||||
|
nextMonth.setMonth(9)
|
||||||
|
|
||||||
|
cy.visit('/lists/1/gantt')
|
||||||
|
|
||||||
|
cy.get('.g-timeunits-container')
|
||||||
|
.should('contain', format(now, 'MMMM'))
|
||||||
|
.should('contain', format(nextMonth, 'MMMM'))
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Shows tasks with dates', () => {
|
||||||
|
const now = new Date()
|
||||||
|
const tasks = TaskFactory.create(1, {
|
||||||
|
start_date: formatISO(now),
|
||||||
|
end_date: formatISO(now.setDate(now.getDate() + 4)),
|
||||||
|
})
|
||||||
|
cy.visit('/lists/1/gantt')
|
||||||
|
|
||||||
|
cy.get('.g-gantt-rows-container')
|
||||||
|
.should('not.be.empty')
|
||||||
|
.should('contain', tasks[0].title)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Shows tasks with no dates after enabling them', () => {
|
||||||
|
const tasks = TaskFactory.create(1, {
|
||||||
|
start_date: null,
|
||||||
|
end_date: null,
|
||||||
|
})
|
||||||
|
cy.visit('/lists/1/gantt')
|
||||||
|
|
||||||
|
cy.get('.gantt-options .fancycheckbox')
|
||||||
|
.contains('Show tasks which don\'t have dates set')
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.get('.g-gantt-rows-container')
|
||||||
|
.should('not.be.empty')
|
||||||
|
.should('contain', tasks[0].title)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Drags a task around', () => {
|
||||||
|
cy.intercept('**/api/v1/tasks/*')
|
||||||
|
.as('taskUpdate')
|
||||||
|
|
||||||
|
const now = new Date()
|
||||||
|
TaskFactory.create(1, {
|
||||||
|
start_date: formatISO(now),
|
||||||
|
end_date: formatISO(now.setDate(now.getDate() + 4)),
|
||||||
|
})
|
||||||
|
cy.visit('/lists/1/gantt')
|
||||||
|
|
||||||
|
cy.get('.g-gantt-rows-container .g-gantt-row .g-gantt-row-bars-container div .g-gantt-bar')
|
||||||
|
.first()
|
||||||
|
.trigger('mousedown', {which: 1})
|
||||||
|
.trigger('mousemove', {clientX: 500, clientY: 0})
|
||||||
|
.trigger('mouseup', {force: true})
|
||||||
|
cy.wait('@taskUpdate')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Should change the query parameters when selecting a date range', () => {
|
||||||
|
const now = Date.UTC(2022, 10, 9)
|
||||||
|
cy.clock(now, ['Date'])
|
||||||
|
|
||||||
|
cy.visit('/lists/1/gantt')
|
||||||
|
|
||||||
|
cy.get('.list-gantt .gantt-options .field .control input.input.form-control')
|
||||||
|
.click()
|
||||||
|
cy.get('.flatpickr-calendar .flatpickr-innerContainer .dayContainer .flatpickr-day')
|
||||||
|
.first()
|
||||||
|
.click()
|
||||||
|
cy.get('.flatpickr-calendar .flatpickr-innerContainer .dayContainer .flatpickr-day')
|
||||||
|
.last()
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.url().should('contain', 'dateFrom=2022-09-25')
|
||||||
|
cy.url().should('contain', 'dateTo=2022-11-05')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Should change the date range based on date query parameters', () => {
|
||||||
|
cy.visit('/lists/1/gantt?dateFrom=2022-09-25&dateTo=2022-11-05')
|
||||||
|
|
||||||
|
cy.get('.g-timeunits-container')
|
||||||
|
.should('contain', 'September 2022')
|
||||||
|
.should('contain', 'October 2022')
|
||||||
|
.should('contain', 'November 2022')
|
||||||
|
cy.get('.list-gantt .gantt-options .field .control input.input.form-control')
|
||||||
|
.should('have.value', '25 Sep 2022 to 5 Nov 2022')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Should open a task when double clicked on it', () => {
|
||||||
|
const now = new Date()
|
||||||
|
const tasks = TaskFactory.create(1, {
|
||||||
|
start_date: formatISO(now),
|
||||||
|
end_date: formatISO(now.setDate(now.getDate() + 4)),
|
||||||
|
})
|
||||||
|
cy.visit('/lists/1/gantt')
|
||||||
|
|
||||||
|
cy.get('.gantt-container .g-gantt-chart .g-gantt-row-bars-container .g-gantt-bar')
|
||||||
|
.dblclick()
|
||||||
|
|
||||||
|
cy.url()
|
||||||
|
.should('contain', `/tasks/${tasks[0].id}`)
|
||||||
|
})
|
||||||
|
})
|
|
@ -193,4 +193,48 @@ describe('List View Kanban', () => {
|
||||||
cy.get('.kanban .bucket')
|
cy.get('.kanban .bucket')
|
||||||
.should('not.contain', task.title)
|
.should('not.contain', task.title)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('Shows a button to filter the kanban board', () => {
|
||||||
|
const data = TaskFactory.create(10, {
|
||||||
|
list_id: 1,
|
||||||
|
bucket_id: 1,
|
||||||
|
})
|
||||||
|
cy.visit('/lists/1/kanban')
|
||||||
|
|
||||||
|
cy.get('.list-kanban .filter-container .base-button')
|
||||||
|
.should('exist')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Should remove a task from the board when deleting it', () => {
|
||||||
|
const lists = ListFactory.create(1)
|
||||||
|
const buckets = BucketFactory.create(2, {
|
||||||
|
list_id: lists[0].id,
|
||||||
|
})
|
||||||
|
const tasks = TaskFactory.create(5, {
|
||||||
|
list_id: 1,
|
||||||
|
bucket_id: buckets[0].id,
|
||||||
|
})
|
||||||
|
const task = tasks[0]
|
||||||
|
cy.visit('/lists/1/kanban')
|
||||||
|
|
||||||
|
cy.getSettled('.kanban .bucket .tasks .task')
|
||||||
|
.contains(task.title)
|
||||||
|
.should('be.visible')
|
||||||
|
.click()
|
||||||
|
cy.get('.task-view .action-buttons .button')
|
||||||
|
.should('be.visible')
|
||||||
|
.contains('Delete')
|
||||||
|
.click()
|
||||||
|
cy.get('.modal-mask .modal-container .modal-content .header')
|
||||||
|
.should('contain', 'Delete this task')
|
||||||
|
cy.get('.modal-mask .modal-container .modal-content .actions .button')
|
||||||
|
.contains('Do it!')
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.get('.global-notification')
|
||||||
|
.should('contain', 'Success')
|
||||||
|
|
||||||
|
cy.getSettled('.kanban .bucket .tasks')
|
||||||
|
.should('not.contain', task.title)
|
||||||
|
})
|
||||||
})
|
})
|
|
@ -61,7 +61,7 @@ describe('List View List', () => {
|
||||||
})
|
})
|
||||||
cy.visit(`/lists/${lists[1].id}/`)
|
cy.visit(`/lists/${lists[1].id}/`)
|
||||||
|
|
||||||
cy.get('.list-title a.icon')
|
cy.get('.list-title .icon')
|
||||||
.should('not.exist')
|
.should('not.exist')
|
||||||
cy.get('input.input[placeholder="Add a new task..."')
|
cy.get('input.input[placeholder="Add a new task..."')
|
||||||
.should('not.exist')
|
.should('not.exist')
|
||||||
|
@ -78,7 +78,7 @@ describe('List View List', () => {
|
||||||
|
|
||||||
cy.get('.menu-list li .list-menu-link .color-bubble')
|
cy.get('.menu-list li .list-menu-link .color-bubble')
|
||||||
.should('have.css', 'background-color', 'rgb(0, 219, 96)')
|
.should('have.css', 'background-color', 'rgb(0, 219, 96)')
|
||||||
cy.get('.tasks-container .tasks .color-bubble')
|
cy.get('.tasks .color-bubble')
|
||||||
.should('not.exist')
|
.should('not.exist')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -90,8 +90,10 @@ describe('List View List', () => {
|
||||||
})
|
})
|
||||||
cy.visit('/lists/1/list')
|
cy.visit('/lists/1/list')
|
||||||
|
|
||||||
cy.get('.tasks-container .tasks')
|
cy.get('.tasks')
|
||||||
.should('contain', tasks[99].title)
|
.should('contain', tasks[1].title)
|
||||||
|
cy.get('.tasks')
|
||||||
|
.should('not.contain', tasks[99].title)
|
||||||
|
|
||||||
cy.get('.card-content .pagination .pagination-link')
|
cy.get('.card-content .pagination .pagination-link')
|
||||||
.contains('2')
|
.contains('2')
|
||||||
|
@ -99,9 +101,9 @@ describe('List View List', () => {
|
||||||
|
|
||||||
cy.url()
|
cy.url()
|
||||||
.should('contain', '?page=2')
|
.should('contain', '?page=2')
|
||||||
cy.get('.tasks-container .tasks')
|
cy.get('.tasks')
|
||||||
.should('contain', tasks[1].title)
|
.should('contain', tasks[99].title)
|
||||||
cy.get('.tasks-container .tasks')
|
cy.get('.tasks')
|
||||||
.should('not.contain', tasks[99].title)
|
.should('not.contain', tasks[1].title)
|
||||||
})
|
})
|
||||||
})
|
})
|
|
@ -52,14 +52,14 @@ describe('Lists', () => {
|
||||||
cy.get('.list-title h1')
|
cy.get('.list-title h1')
|
||||||
.should('contain', 'First List')
|
.should('contain', 'First List')
|
||||||
|
|
||||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
|
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
|
||||||
.click()
|
.click()
|
||||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
|
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
|
||||||
.contains('Edit')
|
.contains('Edit')
|
||||||
.click()
|
.click()
|
||||||
cy.get('#title')
|
cy.get('#title')
|
||||||
.type(`{selectall}${newListName}`)
|
.type(`{selectall}${newListName}`)
|
||||||
cy.get('footer.modal-card-foot .button')
|
cy.get('footer.card-footer .button')
|
||||||
.contains('Save')
|
.contains('Save')
|
||||||
.click()
|
.click()
|
||||||
|
|
||||||
|
@ -68,7 +68,7 @@ describe('Lists', () => {
|
||||||
cy.get('.list-title h1')
|
cy.get('.list-title h1')
|
||||||
.should('contain', newListName)
|
.should('contain', newListName)
|
||||||
.should('not.contain', lists[0].title)
|
.should('not.contain', lists[0].title)
|
||||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child')
|
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child')
|
||||||
.should('contain', newListName)
|
.should('contain', newListName)
|
||||||
.should('not.contain', lists[0].title)
|
.should('not.contain', lists[0].title)
|
||||||
cy.visit('/')
|
cy.visit('/')
|
||||||
|
@ -80,9 +80,9 @@ describe('Lists', () => {
|
||||||
it('Should remove a list', () => {
|
it('Should remove a list', () => {
|
||||||
cy.visit(`/lists/${lists[0].id}`)
|
cy.visit(`/lists/${lists[0].id}`)
|
||||||
|
|
||||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-trigger')
|
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .menu-list-dropdown-trigger')
|
||||||
.click()
|
.click()
|
||||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list li:first-child .dropdown .dropdown-content')
|
cy.get('.namespace-container .menu.namespaces-lists .menu-list li:first-child .dropdown .dropdown-content')
|
||||||
.contains('Delete')
|
.contains('Delete')
|
||||||
.click()
|
.click()
|
||||||
cy.url()
|
cy.url()
|
||||||
|
@ -93,7 +93,7 @@ describe('Lists', () => {
|
||||||
|
|
||||||
cy.get('.global-notification')
|
cy.get('.global-notification')
|
||||||
.should('contain', 'Success')
|
.should('contain', 'Success')
|
||||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
|
cy.get('.namespace-container .menu.namespaces-lists .menu-list')
|
||||||
.should('not.contain', lists[0].title)
|
.should('not.contain', lists[0].title)
|
||||||
cy.location('pathname')
|
cy.location('pathname')
|
||||||
.should('equal', '/')
|
.should('equal', '/')
|
||||||
|
@ -112,7 +112,7 @@ describe('Lists', () => {
|
||||||
cy.get('.modal-content [data-cy=modalPrimary]')
|
cy.get('.modal-content [data-cy=modalPrimary]')
|
||||||
.click()
|
.click()
|
||||||
|
|
||||||
cy.get('.namespace-container .menu.namespaces-lists .more-container .menu-list')
|
cy.get('.namespace-container .menu.namespaces-lists .menu-list')
|
||||||
.should('not.contain', lists[0].title)
|
.should('not.contain', lists[0].title)
|
||||||
cy.get('main.app-content')
|
cy.get('main.app-content')
|
||||||
.should('contain.text', 'This list is archived. It is not possible to create new or edit tasks for it.')
|
.should('contain.text', 'This list is archived. It is not possible to create new or edit tasks for it.')
|
|
@ -63,7 +63,7 @@ describe('Namepaces', () => {
|
||||||
.should('equal', newNamespaces[0].title) // wait until the namespace data is loaded
|
.should('equal', newNamespaces[0].title) // wait until the namespace data is loaded
|
||||||
cy.get('#namespacetext')
|
cy.get('#namespacetext')
|
||||||
.type(`{selectall}${newNamespaceName}`)
|
.type(`{selectall}${newNamespaceName}`)
|
||||||
cy.get('footer.modal-card-foot .button')
|
cy.get('footer.card-footer .button')
|
||||||
.contains('Save')
|
.contains('Save')
|
||||||
.click()
|
.click()
|
||||||
|
|
|
@ -3,14 +3,19 @@ import {UserFactory} from '../../factories/user'
|
||||||
import {NamespaceFactory} from '../../factories/namespace'
|
import {NamespaceFactory} from '../../factories/namespace'
|
||||||
import {TaskFactory} from '../../factories/task'
|
import {TaskFactory} from '../../factories/task'
|
||||||
|
|
||||||
|
export function createLists() {
|
||||||
|
UserFactory.create(1)
|
||||||
|
NamespaceFactory.create(1)
|
||||||
|
const lists = ListFactory.create(1, {
|
||||||
|
title: 'First List'
|
||||||
|
})
|
||||||
|
TaskFactory.truncate()
|
||||||
|
return lists
|
||||||
|
}
|
||||||
|
|
||||||
export function prepareLists(setLists = () => {}) {
|
export function prepareLists(setLists = () => {}) {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
UserFactory.create(1)
|
const lists = createLists()
|
||||||
NamespaceFactory.create(1)
|
|
||||||
const lists = ListFactory.create(1, {
|
|
||||||
title: 'First List'
|
|
||||||
})
|
|
||||||
setLists(lists)
|
setLists(lists)
|
||||||
TaskFactory.truncate()
|
|
||||||
})
|
})
|
||||||
}
|
}
|
|
@ -128,4 +128,24 @@ describe('Home Page Task Overview', () => {
|
||||||
.last()
|
.last()
|
||||||
.should('contain.text', newTaskTitle)
|
.should('contain.text', newTaskTitle)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('Should show the cta buttons for new list when there are no tasks', () => {
|
||||||
|
TaskFactory.truncate()
|
||||||
|
|
||||||
|
cy.visit('/')
|
||||||
|
|
||||||
|
cy.get('.home.app-content .content')
|
||||||
|
.should('contain.text', 'You can create a new list for your new tasks:')
|
||||||
|
.should('contain.text', 'Or import your lists and tasks from other services into Vikunja:')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Should not show the cta buttons for new list when there are tasks', () => {
|
||||||
|
seedTasks()
|
||||||
|
|
||||||
|
cy.visit('/')
|
||||||
|
|
||||||
|
cy.get('.home.app-content .content')
|
||||||
|
.should('not.contain.text', 'You can create a new list for your new tasks:')
|
||||||
|
.should('not.contain.text', 'Or import your lists and tasks from other services into Vikunja:')
|
||||||
|
})
|
||||||
})
|
})
|
|
@ -12,15 +12,51 @@ import {LabelTaskFactory} from '../../factories/label_task'
|
||||||
import {BucketFactory} from '../../factories/bucket'
|
import {BucketFactory} from '../../factories/bucket'
|
||||||
|
|
||||||
import '../../support/authenticateUser'
|
import '../../support/authenticateUser'
|
||||||
|
import {TaskAttachmentFactory} from '../../factories/task_attachments'
|
||||||
|
|
||||||
|
function addLabelToTaskAndVerify(labelTitle: string) {
|
||||||
|
cy.get('.task-view .action-buttons .button')
|
||||||
|
.contains('Add Labels')
|
||||||
|
.click()
|
||||||
|
cy.get('.task-view .details.labels-list .multiselect input')
|
||||||
|
.type(labelTitle)
|
||||||
|
cy.get('.task-view .details.labels-list .multiselect .search-results')
|
||||||
|
.children()
|
||||||
|
.first()
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.get('.global-notification', { timeout: 4000 })
|
||||||
|
.should('contain', 'Success')
|
||||||
|
cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
|
||||||
|
.should('exist')
|
||||||
|
.should('contain', labelTitle)
|
||||||
|
}
|
||||||
|
|
||||||
|
function uploadAttachmentAndVerify(taskId: number) {
|
||||||
|
cy.intercept(`${Cypress.env('API_URL')}/tasks/${taskId}/attachments`).as('uploadAttachment')
|
||||||
|
cy.get('.task-view .action-buttons .button')
|
||||||
|
.contains('Add Attachments')
|
||||||
|
.click()
|
||||||
|
cy.get('input[type=file]', {timeout: 1000})
|
||||||
|
.selectFile('cypress/fixtures/image.jpg', {force: true}) // The input is not visible, but on purpose
|
||||||
|
cy.wait('@uploadAttachment')
|
||||||
|
|
||||||
|
cy.get('.attachments .attachments .files a.attachment')
|
||||||
|
.should('exist')
|
||||||
|
}
|
||||||
|
|
||||||
describe('Task', () => {
|
describe('Task', () => {
|
||||||
let namespaces
|
let namespaces
|
||||||
let lists
|
let lists
|
||||||
|
let buckets
|
||||||
|
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
UserFactory.create(1)
|
UserFactory.create(1)
|
||||||
namespaces = NamespaceFactory.create(1)
|
namespaces = NamespaceFactory.create(1)
|
||||||
lists = ListFactory.create(1)
|
lists = ListFactory.create(1)
|
||||||
|
buckets = BucketFactory.create(1, {
|
||||||
|
list_id: lists[0].id,
|
||||||
|
})
|
||||||
TaskFactory.truncate()
|
TaskFactory.truncate()
|
||||||
UserListFactory.truncate()
|
UserListFactory.truncate()
|
||||||
})
|
})
|
||||||
|
@ -80,6 +116,7 @@ describe('Task', () => {
|
||||||
describe('Task Detail View', () => {
|
describe('Task Detail View', () => {
|
||||||
beforeEach(() => {
|
beforeEach(() => {
|
||||||
TaskCommentFactory.truncate()
|
TaskCommentFactory.truncate()
|
||||||
|
LabelTaskFactory.truncate()
|
||||||
})
|
})
|
||||||
|
|
||||||
it('Shows all task details', () => {
|
it('Shows all task details', () => {
|
||||||
|
@ -165,7 +202,7 @@ describe('Task', () => {
|
||||||
})
|
})
|
||||||
cy.visit(`/tasks/${tasks[0].id}`)
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
cy.get('.task-view .details.content.description .editor a')
|
cy.get('.task-view .details.content.description .editor button')
|
||||||
.click()
|
.click()
|
||||||
cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
|
cy.get('.task-view .details.content.description .editor .vue-easymde .EasyMDEContainer .CodeMirror-scroll')
|
||||||
.type('{selectall}New Description')
|
.type('{selectall}New Description')
|
||||||
|
@ -297,7 +334,7 @@ describe('Task', () => {
|
||||||
cy.visit(`/tasks/${tasks[0].id}`)
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
cy.get('.task-view .column.assignees .multiselect .input-wrapper span.assignee')
|
cy.get('.task-view .column.assignees .multiselect .input-wrapper span.assignee')
|
||||||
.get('a.remove-assignee')
|
.get('.remove-assignee')
|
||||||
.click()
|
.click()
|
||||||
|
|
||||||
cy.get('.global-notification')
|
cy.get('.global-notification')
|
||||||
|
@ -340,24 +377,35 @@ describe('Task', () => {
|
||||||
list_id: 1,
|
list_id: 1,
|
||||||
})
|
})
|
||||||
const labels = LabelFactory.create(1)
|
const labels = LabelFactory.create(1)
|
||||||
|
LabelTaskFactory.truncate()
|
||||||
|
|
||||||
cy.visit(`/tasks/${tasks[0].id}`)
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
cy.get('.task-view .action-buttons .button')
|
addLabelToTaskAndVerify(labels[0].title)
|
||||||
.contains('Add Labels')
|
})
|
||||||
|
|
||||||
|
it('Can add a label to a task and it shows up on the kanban board afterwards', () => {
|
||||||
|
const tasks = TaskFactory.create(1, {
|
||||||
|
id: 1,
|
||||||
|
list_id: lists[0].id,
|
||||||
|
bucket_id: buckets[0].id,
|
||||||
|
})
|
||||||
|
const labels = LabelFactory.create(1)
|
||||||
|
LabelTaskFactory.truncate()
|
||||||
|
|
||||||
|
cy.visit(`/lists/${lists[0].id}/kanban`)
|
||||||
|
|
||||||
|
cy.get('.bucket .task')
|
||||||
|
.contains(tasks[0].title)
|
||||||
.click()
|
.click()
|
||||||
cy.get('.task-view .details.labels-list .multiselect input')
|
|
||||||
.type(labels[0].title)
|
addLabelToTaskAndVerify(labels[0].title)
|
||||||
cy.get('.task-view .details.labels-list .multiselect .search-results')
|
|
||||||
.children()
|
cy.get('.modal-content .close')
|
||||||
.first()
|
|
||||||
.click()
|
.click()
|
||||||
|
|
||||||
cy.get('.global-notification', { timeout: 4000 })
|
cy.get('.bucket .task')
|
||||||
.should('contain', 'Success')
|
.should('contain.text', labels[0].title)
|
||||||
cy.get('.task-view .details.labels-list .multiselect .input-wrapper span.tag')
|
|
||||||
.should('exist')
|
|
||||||
.should('contain', labels[0].title)
|
|
||||||
})
|
})
|
||||||
|
|
||||||
it('Can remove a label from a task', () => {
|
it('Can remove a label from a task', () => {
|
||||||
|
@ -402,7 +450,7 @@ describe('Task', () => {
|
||||||
.contains('Due Date')
|
.contains('Due Date')
|
||||||
.get('.date-input .datepicker .show')
|
.get('.date-input .datepicker .show')
|
||||||
.click()
|
.click()
|
||||||
cy.get('.datepicker .datepicker-popup a')
|
cy.get('.datepicker .datepicker-popup button')
|
||||||
.contains('Tomorrow')
|
.contains('Tomorrow')
|
||||||
.click()
|
.click()
|
||||||
cy.get('[data-cy="closeDatepicker"]')
|
cy.get('[data-cy="closeDatepicker"]')
|
||||||
|
@ -416,5 +464,117 @@ describe('Task', () => {
|
||||||
cy.get('.global-notification')
|
cy.get('.global-notification')
|
||||||
.should('contain', 'Success')
|
.should('contain', 'Success')
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('Can set a priority for a task', () => {
|
||||||
|
const tasks = TaskFactory.create(1, {
|
||||||
|
id: 1,
|
||||||
|
})
|
||||||
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
|
cy.get('.task-view .action-buttons .button')
|
||||||
|
.contains('Set Priority')
|
||||||
|
.click()
|
||||||
|
cy.get('.task-view .columns.details .column')
|
||||||
|
.contains('Priority')
|
||||||
|
.get('.select select')
|
||||||
|
.select('Urgent')
|
||||||
|
cy.get('.global-notification')
|
||||||
|
.should('contain', 'Success')
|
||||||
|
|
||||||
|
cy.get('.task-view .columns.details .column')
|
||||||
|
.contains('Priority')
|
||||||
|
.get('.select select')
|
||||||
|
.should('have.value', '4')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Can set the progress for a task', () => {
|
||||||
|
const tasks = TaskFactory.create(1, {
|
||||||
|
id: 1,
|
||||||
|
})
|
||||||
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
|
cy.get('.task-view .action-buttons .button')
|
||||||
|
.contains('Set Progress')
|
||||||
|
.click()
|
||||||
|
cy.get('.task-view .columns.details .column')
|
||||||
|
.contains('Progress')
|
||||||
|
.get('.select select')
|
||||||
|
.select('50%')
|
||||||
|
cy.get('.global-notification')
|
||||||
|
.should('contain', 'Success')
|
||||||
|
|
||||||
|
cy.wait(200)
|
||||||
|
|
||||||
|
cy.get('.task-view .columns.details .column')
|
||||||
|
.contains('Progress')
|
||||||
|
.get('.select select')
|
||||||
|
.should('be.visible')
|
||||||
|
.should('have.value', '0.5')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Can add an attachment to a task', () => {
|
||||||
|
TaskAttachmentFactory.truncate()
|
||||||
|
const tasks = TaskFactory.create(1, {
|
||||||
|
id: 1,
|
||||||
|
})
|
||||||
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
|
uploadAttachmentAndVerify(tasks[0].id)
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Can add an attachment to a task and see it appearing on kanban', () => {
|
||||||
|
TaskAttachmentFactory.truncate()
|
||||||
|
const tasks = TaskFactory.create(1, {
|
||||||
|
id: 1,
|
||||||
|
list_id: lists[0].id,
|
||||||
|
bucket_id: buckets[0].id,
|
||||||
|
})
|
||||||
|
const labels = LabelFactory.create(1)
|
||||||
|
LabelTaskFactory.truncate()
|
||||||
|
|
||||||
|
cy.visit(`/lists/${lists[0].id}/kanban`)
|
||||||
|
|
||||||
|
cy.get('.bucket .task')
|
||||||
|
.contains(tasks[0].title)
|
||||||
|
.click()
|
||||||
|
|
||||||
|
uploadAttachmentAndVerify(tasks[0].id)
|
||||||
|
|
||||||
|
cy.get('.modal-content .close')
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.get('.bucket .task .footer .icon svg.fa-paperclip')
|
||||||
|
.should('exist')
|
||||||
|
})
|
||||||
|
|
||||||
|
it('Can check items off a checklist', () => {
|
||||||
|
const tasks = TaskFactory.create(1, {
|
||||||
|
id: 1,
|
||||||
|
description: `
|
||||||
|
This is a checklist:
|
||||||
|
|
||||||
|
* [ ] one item
|
||||||
|
* [ ] another item
|
||||||
|
* [ ] third item
|
||||||
|
* [ ] fourth item
|
||||||
|
* [x] and this one is already done
|
||||||
|
`,
|
||||||
|
})
|
||||||
|
cy.visit(`/tasks/${tasks[0].id}`)
|
||||||
|
|
||||||
|
cy.get('.task-view .checklist-summary')
|
||||||
|
.should('contain.text', '1 of 5 tasks')
|
||||||
|
cy.get('.editor .content ul > li input[type=checkbox]')
|
||||||
|
.eq(2)
|
||||||
|
.click()
|
||||||
|
|
||||||
|
cy.get('.editor .content ul > li input[type=checkbox]')
|
||||||
|
.eq(2)
|
||||||
|
.should('be.checked')
|
||||||
|
cy.get('.editor .content input[type=checkbox]')
|
||||||
|
.should('have.length', 5)
|
||||||
|
cy.get('.task-view .checklist-summary')
|
||||||
|
.should('contain.text', '2 of 5 tasks')
|
||||||
|
})
|
||||||
})
|
})
|
||||||
})
|
})
|
|
@ -55,4 +55,9 @@ context('Login', () => {
|
||||||
|
|
||||||
testAndAssertFailed(fixture)
|
testAndAssertFailed(fixture)
|
||||||
})
|
})
|
||||||
|
|
||||||
|
it('Should redirect to /login when no user is logged in', () => {
|
||||||
|
cy.visit('/')
|
||||||
|
cy.url().should('include', '/login')
|
||||||
|
})
|
||||||
})
|
})
|
|
@ -1,16 +0,0 @@
|
||||||
import '../../support/authenticateUser'
|
|
||||||
|
|
||||||
describe('Log out', () => {
|
|
||||||
it('Logs the user out', () => {
|
|
||||||
cy.visit('/')
|
|
||||||
|
|
||||||
cy.get('.navbar .user .username')
|
|
||||||
.click()
|
|
||||||
cy.get('.navbar .user .dropdown-menu .dropdown-item')
|
|
||||||
.contains('Logout')
|
|
||||||
.click()
|
|
||||||
|
|
||||||
cy.url()
|
|
||||||
.should('contain', '/login')
|
|
||||||
})
|
|
||||||
})
|
|
44
cypress/e2e/user/logout.spec.ts
Normal file
44
cypress/e2e/user/logout.spec.ts
Normal file
|
@ -0,0 +1,44 @@
|
||||||
|
import '../../support/authenticateUser'
|
||||||
|
import {createLists} from '../list/prepareLists'
|
||||||
|
|
||||||
|
function logout() {
|
||||||
|
cy.get('.navbar .user .username')
|
||||||
|
.click()
|
||||||
|
cy.get('.navbar .user .dropdown-menu .dropdown-item')
|
||||||
|
.contains('Logout')
|
||||||
|
.click()
|
||||||
|
}
|
||||||
|
|
||||||
|
describe('Log out', () => {
|
||||||
|
it('Logs the user out', () => {
|
||||||
|
cy.visit('/')
|
||||||
|
|
||||||
|
expect(localStorage.getItem('token')).to.not.eq(null)
|
||||||
|
|
||||||
|
logout()
|
||||||
|
|
||||||
|
cy.url()
|
||||||
|
.should('contain', '/login')
|
||||||
|
.then(() => {
|
||||||
|
expect(localStorage.getItem('token')).to.eq(null)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
|
||||||
|
it.skip('Should clear the list history after logging the user out', () => {
|
||||||
|
const lists = createLists()
|
||||||
|
cy.visit(`/lists/${lists[0].id}`)
|
||||||
|
.then(() => {
|
||||||
|
expect(localStorage.getItem('listHistory')).to.not.eq(null)
|
||||||
|
})
|
||||||
|
|
||||||
|
logout()
|
||||||
|
|
||||||
|
cy.wait(1000) // This makes re-loading of the list and associated entities (and the resulting error) visible
|
||||||
|
|
||||||
|
cy.url()
|
||||||
|
.should('contain', '/login')
|
||||||
|
.then(() => {
|
||||||
|
expect(localStorage.getItem('listHistory')).to.eq(null)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
|
@ -15,6 +15,7 @@ export class TaskFactory extends Factory {
|
||||||
list_id: 1,
|
list_id: 1,
|
||||||
created_by_id: 1,
|
created_by_id: 1,
|
||||||
index: '{increment}',
|
index: '{increment}',
|
||||||
|
position: '{increment}',
|
||||||
created: formatISO(now),
|
created: formatISO(now),
|
||||||
updated: formatISO(now)
|
updated: formatISO(now)
|
||||||
}
|
}
|
17
cypress/factories/task_attachments.ts
Normal file
17
cypress/factories/task_attachments.ts
Normal file
|
@ -0,0 +1,17 @@
|
||||||
|
import {Factory} from '../support/factory'
|
||||||
|
import {formatISO} from 'date-fns'
|
||||||
|
|
||||||
|
export class TaskAttachmentFactory extends Factory {
|
||||||
|
static table = 'task_attachments'
|
||||||
|
|
||||||
|
static factory() {
|
||||||
|
const now = new Date()
|
||||||
|
|
||||||
|
return {
|
||||||
|
id: '{increment}',
|
||||||
|
task_id: 1,
|
||||||
|
file_id: 1,
|
||||||
|
created: formatISO(now),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
|
@ -14,6 +14,7 @@ export class UserFactory extends Factory {
|
||||||
username: faker.lorem.word(10) + faker.datatype.uuid(),
|
username: faker.lorem.word(10) + faker.datatype.uuid(),
|
||||||
password: '$2a$14$dcadBoMBL9jQoOcZK8Fju.cy0Ptx2oZECkKLnaa8ekRoTFe1w7To.', // 1234
|
password: '$2a$14$dcadBoMBL9jQoOcZK8Fju.cy0Ptx2oZECkKLnaa8ekRoTFe1w7To.', // 1234
|
||||||
status: 0,
|
status: 0,
|
||||||
|
issuer: 'local',
|
||||||
created: formatISO(now),
|
created: formatISO(now),
|
||||||
updated: formatISO(now)
|
updated: formatISO(now)
|
||||||
}
|
}
|
|
@ -1,21 +0,0 @@
|
||||||
/// <reference types="cypress" />
|
|
||||||
// ***********************************************************
|
|
||||||
// This example plugins/index.js can be used to load plugins
|
|
||||||
//
|
|
||||||
// You can change the location of this file or turn off loading
|
|
||||||
// the plugins file with the 'pluginsFile' configuration option.
|
|
||||||
//
|
|
||||||
// You can read more here:
|
|
||||||
// https://on.cypress.io/plugins-guide
|
|
||||||
// ***********************************************************
|
|
||||||
|
|
||||||
// This function is called when a project is opened or re-opened (e.g. due to
|
|
||||||
// the project's config changing)
|
|
||||||
|
|
||||||
/**
|
|
||||||
* @type {Cypress.PluginConfig}
|
|
||||||
*/
|
|
||||||
module.exports = (on, config) => {
|
|
||||||
// `on` is used to hook into various events Cypress emits
|
|
||||||
// `config` is the resolved Cypress config
|
|
||||||
}
|
|
|
@ -1,33 +0,0 @@
|
||||||
/**
|
|
||||||
* Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
|
|
||||||
*
|
|
||||||
* Source: https://github.com/cypress-io/cypress/issues/7306#issuecomment-850621378
|
|
||||||
*/
|
|
||||||
Cypress.Commands.add('getSettled', (selector, opts = {}) => {
|
|
||||||
const retries = opts.retries || 3
|
|
||||||
const delay = opts.delay || 100
|
|
||||||
|
|
||||||
const isAttached = (resolve, count = 0) => {
|
|
||||||
const el = Cypress.$(selector)
|
|
||||||
|
|
||||||
// is element attached to the DOM?
|
|
||||||
count = Cypress.dom.isAttached(el) ? count + 1 : 0
|
|
||||||
|
|
||||||
// hit our base case, return the element
|
|
||||||
if (count >= retries) {
|
|
||||||
return resolve(el)
|
|
||||||
}
|
|
||||||
|
|
||||||
// retry after a bit of a delay
|
|
||||||
setTimeout(() => isAttached(resolve, count), delay)
|
|
||||||
}
|
|
||||||
|
|
||||||
// wrap, so we can chain cypress commands off the result
|
|
||||||
return cy.wrap(null).then(() => {
|
|
||||||
return new Cypress.Promise((resolve) => {
|
|
||||||
return isAttached(resolve, 0)
|
|
||||||
}).then((el) => {
|
|
||||||
return cy.wrap(el)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
})
|
|
71
cypress/support/commands.ts
Normal file
71
cypress/support/commands.ts
Normal file
|
@ -0,0 +1,71 @@
|
||||||
|
/// <reference types="cypress" />
|
||||||
|
// ***********************************************
|
||||||
|
// This example commands.ts shows you how to
|
||||||
|
// create various custom commands and overwrite
|
||||||
|
// existing commands.
|
||||||
|
//
|
||||||
|
// For more comprehensive examples of custom
|
||||||
|
// commands please read more here:
|
||||||
|
// https://on.cypress.io/custom-commands
|
||||||
|
// ***********************************************
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a parent command --
|
||||||
|
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a child command --
|
||||||
|
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This is a dual command --
|
||||||
|
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||||
|
//
|
||||||
|
//
|
||||||
|
// -- This will overwrite an existing command --
|
||||||
|
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||||
|
//
|
||||||
|
// declare global {
|
||||||
|
// namespace Cypress {
|
||||||
|
// interface Chainable {
|
||||||
|
// login(email: string, password: string): Chainable<void>
|
||||||
|
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||||
|
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||||
|
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Recursively gets an element, returning only after it's determined to be attached to the DOM for good.
|
||||||
|
*
|
||||||
|
* Source: https://github.com/cypress-io/cypress/issues/7306#issuecomment-850621378
|
||||||
|
*/
|
||||||
|
Cypress.Commands.add('getSettled', (selector, opts = {}) => {
|
||||||
|
const retries = opts.retries || 3
|
||||||
|
const delay = opts.delay || 100
|
||||||
|
|
||||||
|
const isAttached = (resolve, count = 0) => {
|
||||||
|
const el = Cypress.$(selector)
|
||||||
|
|
||||||
|
// is element attached to the DOM?
|
||||||
|
count = Cypress.dom.isAttached(el) ? count + 1 : 0
|
||||||
|
|
||||||
|
// hit our base case, return the element
|
||||||
|
if (count >= retries) {
|
||||||
|
return resolve(el)
|
||||||
|
}
|
||||||
|
|
||||||
|
// retry after a bit of a delay
|
||||||
|
setTimeout(() => isAttached(resolve, count), delay)
|
||||||
|
}
|
||||||
|
|
||||||
|
// wrap, so we can chain cypress commands off the result
|
||||||
|
return cy.wrap(null).then(() => {
|
||||||
|
return new Cypress.Promise((resolve) => {
|
||||||
|
return isAttached(resolve, 0)
|
||||||
|
}).then((el) => {
|
||||||
|
return cy.wrap(el)
|
||||||
|
})
|
||||||
|
})
|
||||||
|
})
|
12
cypress/support/component.index.html
Normal file
12
cypress/support/component.index.html
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title>Components App</title>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div data-cy-root></div>
|
||||||
|
</body>
|
||||||
|
</html>
|
29
cypress/support/component.ts
Normal file
29
cypress/support/component.ts
Normal file
|
@ -0,0 +1,29 @@
|
||||||
|
// ***********************************************************
|
||||||
|
// This example support/component.ts is processed and
|
||||||
|
// loaded automatically before your test files.
|
||||||
|
//
|
||||||
|
// This is a great place to put global configuration and
|
||||||
|
// behavior that modifies Cypress.
|
||||||
|
//
|
||||||
|
// You can change the location of this file or turn off
|
||||||
|
// automatically serving support files with the
|
||||||
|
// 'supportFile' configuration option.
|
||||||
|
//
|
||||||
|
// You can read more here:
|
||||||
|
// https://on.cypress.io/configuration
|
||||||
|
// ***********************************************************
|
||||||
|
|
||||||
|
// Import commands.js using ES2015 syntax:
|
||||||
|
import './commands'
|
||||||
|
|
||||||
|
// Alternatively you can use CommonJS syntax:
|
||||||
|
// require('./commands')
|
||||||
|
|
||||||
|
import { mount } from 'cypress/vue'
|
||||||
|
// Ensure global styles are loaded
|
||||||
|
import '../../src/styles/global.scss';
|
||||||
|
|
||||||
|
Cypress.Commands.add('mount', mount)
|
||||||
|
|
||||||
|
// Example use:
|
||||||
|
// cy.mount(MyComponent)
|
10
cypress/tsconfig.json
Normal file
10
cypress/tsconfig.json
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
"extends": "@vue/tsconfig/tsconfig.web.json",
|
||||||
|
"include": ["./integration/**/*", "./support/**/*"],
|
||||||
|
"compilerOptions": {
|
||||||
|
"isolatedModules": false,
|
||||||
|
"target": "es5",
|
||||||
|
"lib": ["es5", "dom"],
|
||||||
|
"types": ["cypress"]
|
||||||
|
}
|
||||||
|
}
|
|
@ -1,17 +0,0 @@
|
||||||
image: vikunja/frontend:unstable
|
|
||||||
manifests:
|
|
||||||
-
|
|
||||||
image: vikunja/frontend:unstable-linux-amd64
|
|
||||||
platform:
|
|
||||||
architecture: amd64
|
|
||||||
os: linux
|
|
||||||
-
|
|
||||||
image: vikunja/frontend:unstable-linux-arm64
|
|
||||||
platform:
|
|
||||||
architecture: arm64
|
|
||||||
os: linux
|
|
||||||
-
|
|
||||||
image: vikunja/frontend:unstable-linux-arm
|
|
||||||
platform:
|
|
||||||
architecture: arm
|
|
||||||
os: linux
|
|
|
@ -1,23 +0,0 @@
|
||||||
image: vikunja/frontend:{{#if build.tag}}{{trimPrefix "v" build.tag}}{{else}}latest{{/if}}
|
|
||||||
{{#if build.tags}}
|
|
||||||
tags:
|
|
||||||
{{#each build.tags}}
|
|
||||||
- {{this}}
|
|
||||||
{{/each}}
|
|
||||||
{{/if}}
|
|
||||||
manifests:
|
|
||||||
-
|
|
||||||
image: vikunja/frontend:{{#if build.tag}}{{trimPrefix "v" build.tag}}-{{/if}}linux-amd64
|
|
||||||
platform:
|
|
||||||
architecture: amd64
|
|
||||||
os: linux
|
|
||||||
-
|
|
||||||
image: vikunja/frontend:{{#if build.tag}}{{trimPrefix "v" build.tag}}-{{/if}}linux-arm64
|
|
||||||
platform:
|
|
||||||
architecture: arm64
|
|
||||||
os: linux
|
|
||||||
-
|
|
||||||
image: vikunja/frontend:{{#if build.tag}}{{trimPrefix "v" build.tag}}-{{/if}}linux-arm
|
|
||||||
platform:
|
|
||||||
architecture: arm
|
|
||||||
os: linux
|
|
3
env.d.ts
vendored
Normal file
3
env.d.ts
vendored
Normal file
|
@ -0,0 +1,3 @@
|
||||||
|
/// <reference types="vite/client" />
|
||||||
|
/// <reference types="vite-svg-loader" />
|
||||||
|
/// <reference types="cypress" />
|
25
flake.lock
Normal file
25
flake.lock
Normal file
|
@ -0,0 +1,25 @@
|
||||||
|
{
|
||||||
|
"nodes": {
|
||||||
|
"nixpkgs": {
|
||||||
|
"locked": {
|
||||||
|
"lastModified": 1664753041,
|
||||||
|
"narHash": "sha256-0ogaD8PaGHluARFeupofvk1Nq9gpVeZdlFM0Kcwguys=",
|
||||||
|
"owner": "NixOS",
|
||||||
|
"repo": "nixpkgs",
|
||||||
|
"rev": "a62844b302507c7531ad68a86cb7aa54704c9cb4",
|
||||||
|
"type": "github"
|
||||||
|
},
|
||||||
|
"original": {
|
||||||
|
"id": "nixpkgs",
|
||||||
|
"type": "indirect"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": {
|
||||||
|
"inputs": {
|
||||||
|
"nixpkgs": "nixpkgs"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"root": "root",
|
||||||
|
"version": 7
|
||||||
|
}
|
10
flake.nix
Normal file
10
flake.nix
Normal file
|
@ -0,0 +1,10 @@
|
||||||
|
{
|
||||||
|
description = "Vikunja frontend dev environment";
|
||||||
|
|
||||||
|
outputs = { self, nixpkgs }:
|
||||||
|
let pkgs = nixpkgs.legacyPackages.x86_64-linux;
|
||||||
|
in {
|
||||||
|
defaultPackage.x86_64-linux =
|
||||||
|
pkgs.mkShell { buildInputs = [ pkgs.nodePackages.pnpm pkgs.cypress pkgs.git-cliff ]; };
|
||||||
|
};
|
||||||
|
}
|
|
@ -1,10 +1,9 @@
|
||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
<head>
|
||||||
<title>Vikunja</title>
|
|
||||||
<meta charset="utf-8">
|
<meta charset="utf-8">
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title>Vikunja</title>
|
||||||
<meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">
|
<meta name="description" content="Vikunja (/vɪˈkuːnjə/) - The to-do app to organize your life.">
|
||||||
<meta name="theme-color" content="#1973ff"/>
|
<meta name="theme-color" content="#1973ff"/>
|
||||||
|
|
||||||
|
|
|
@ -1,5 +1,5 @@
|
||||||
[build]
|
[build]
|
||||||
command = "yarn build"
|
command = "pnpm run build"
|
||||||
publish = "dist-preview"
|
publish = "dist-preview"
|
||||||
|
|
||||||
[[redirects]]
|
[[redirects]]
|
||||||
|
|
190
package.json
190
package.json
|
@ -9,140 +9,106 @@
|
||||||
"build": "vite build && workbox copyLibraries dist/",
|
"build": "vite build && workbox copyLibraries dist/",
|
||||||
"build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
|
"build:modern-only": "BUILD_MODERN_ONLY=true vite build && workbox copyLibraries dist/",
|
||||||
"build:dev": "vite build -m development --outDir dist-dev/",
|
"build:dev": "vite build -m development --outDir dist-dev/",
|
||||||
"typecheck": "vue-tsc --noEmit",
|
|
||||||
"lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
|
"lint": "eslint --ignore-pattern '*.test.*' ./src --ext .vue,.js,.ts",
|
||||||
"cypress:open": "cypress open",
|
"cypress:open": "cypress open",
|
||||||
"test:unit": "vitest run",
|
"test:unit": "vitest --run",
|
||||||
"test:unit-watch": "vitest watch",
|
"test:unit-watch": "vitest watch",
|
||||||
"test:frontend": "cypress run",
|
"test:frontend": "cypress run",
|
||||||
|
"typecheck": "vue-tsc --noEmit && vue-tsc --noEmit -p tsconfig.vitest.json --composite false",
|
||||||
"browserslist:update": "npx browserslist@latest --update-db"
|
"browserslist:update": "npx browserslist@latest --update-db"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@github/hotkey": "2.0.0",
|
"@fortawesome/fontawesome-svg-core": "6.2.1",
|
||||||
"@kyvg/vue3-notification": "2.3.4",
|
"@fortawesome/free-regular-svg-icons": "6.2.1",
|
||||||
"@sentry/tracing": "7.4.1",
|
"@fortawesome/free-solid-svg-icons": "6.2.1",
|
||||||
"@sentry/vue": "7.4.1",
|
"@fortawesome/vue-fontawesome": "3.0.2",
|
||||||
|
"@github/hotkey": "2.0.1",
|
||||||
|
"@infectoone/vue-ganttastic": "2.1.3",
|
||||||
|
"@intlify/unplugin-vue-i18n": "0.8.0",
|
||||||
|
"@kyvg/vue3-notification": "2.7.0",
|
||||||
|
"@sentry/tracing": "7.24.2",
|
||||||
|
"@sentry/vue": "7.24.2",
|
||||||
"@types/is-touch-device": "1.0.0",
|
"@types/is-touch-device": "1.0.0",
|
||||||
"@types/sortablejs": "1.13.0",
|
"@types/lodash.clonedeep": "4.5.7",
|
||||||
"@vueuse/core": "8.7.5",
|
"@types/sortablejs": "1.15.0",
|
||||||
"@vueuse/router": "8.7.5",
|
"@vueuse/core": "9.6.0",
|
||||||
"blurhash": "1.1.5",
|
"axios": "0.27.2",
|
||||||
|
"blurhash": "2.0.4",
|
||||||
"bulma-css-variables": "0.9.33",
|
"bulma-css-variables": "0.9.33",
|
||||||
"camel-case": "4.1.2",
|
"camel-case": "4.1.2",
|
||||||
"date-fns": "2.28.0",
|
"codemirror": "5.65.10",
|
||||||
"dompurify": "2.3.8",
|
"date-fns": "2.29.3",
|
||||||
"easymde": "2.16.1",
|
"dayjs": "1.11.7",
|
||||||
|
"dompurify": "2.4.1",
|
||||||
|
"easymde": "2.18.0",
|
||||||
|
"fast-deep-equal": "3.1.3",
|
||||||
"flatpickr": "4.6.13",
|
"flatpickr": "4.6.13",
|
||||||
"flexsearch": "0.7.21",
|
"flexsearch": "0.7.21",
|
||||||
"highlight.js": "11.5.1",
|
"floating-vue": "2.0.0-beta.20",
|
||||||
|
"highlight.js": "11.7.0",
|
||||||
"is-touch-device": "1.0.1",
|
"is-touch-device": "1.0.1",
|
||||||
"lodash.clonedeep": "4.5.0",
|
"lodash.clonedeep": "4.5.0",
|
||||||
"lodash.debounce": "4.0.8",
|
"lodash.debounce": "4.0.8",
|
||||||
"marked": "4.0.17",
|
"marked": "4.2.4",
|
||||||
"minimist": "1.2.6",
|
"minimist": "1.2.7",
|
||||||
|
"pinia": "2.0.28",
|
||||||
"register-service-worker": "1.7.2",
|
"register-service-worker": "1.7.2",
|
||||||
"snake-case": "3.0.4",
|
"snake-case": "3.0.4",
|
||||||
"ufo": "0.8.4",
|
"sortablejs": "1.15.0",
|
||||||
"v-tooltip": "4.0.0-beta.17",
|
"ufo": "1.0.1",
|
||||||
"vue": "3.2.37",
|
"vue": "3.2.45",
|
||||||
"vue-advanced-cropper": "2.8.3",
|
"vue-advanced-cropper": "2.8.6",
|
||||||
"vue-drag-resize": "2.0.3",
|
"vue-flatpickr-component": "11.0.1",
|
||||||
"vue-flatpickr-component": "9.0.6",
|
"vue-i18n": "9.2.2",
|
||||||
"vue-i18n": "9.2.0-beta.36",
|
"vue-router": "4.1.6",
|
||||||
"vue-router": "4.0.16",
|
"workbox-precaching": "6.5.4",
|
||||||
"vuex": "4.0.2",
|
|
||||||
"workbox-precaching": "6.5.3",
|
|
||||||
"zhyswan-vuedraggable": "4.1.3"
|
"zhyswan-vuedraggable": "4.1.3"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@4tw/cypress-drag-drop": "2.2.1",
|
"@4tw/cypress-drag-drop": "2.2.2",
|
||||||
"@faker-js/faker": "7.3.0",
|
"@cypress/vite-dev-server": "5.0.2",
|
||||||
"@fortawesome/fontawesome-svg-core": "6.1.1",
|
"@cypress/vue": "5.0.3",
|
||||||
"@fortawesome/free-regular-svg-icons": "6.1.1",
|
"@faker-js/faker": "7.6.0",
|
||||||
"@fortawesome/free-solid-svg-icons": "6.1.1",
|
"@rushstack/eslint-patch": "1.2.0",
|
||||||
"@fortawesome/vue-fontawesome": "3.0.1",
|
"@types/codemirror": "5.60.5",
|
||||||
|
"@types/dompurify": "2.4.0",
|
||||||
"@types/flexsearch": "0.7.3",
|
"@types/flexsearch": "0.7.3",
|
||||||
"@typescript-eslint/eslint-plugin": "5.30.4",
|
"@types/lodash.debounce": "4.0.7",
|
||||||
"@typescript-eslint/parser": "5.30.4",
|
"@types/marked": "4.0.8",
|
||||||
"@vitejs/plugin-legacy": "1.8.2",
|
"@types/node": "18.11.13",
|
||||||
"@vitejs/plugin-vue": "2.3.3",
|
"@types/postcss-preset-env": "7.7.0",
|
||||||
"@vue/eslint-config-typescript": "11.0.0",
|
"@typescript-eslint/eslint-plugin": "5.46.0",
|
||||||
"autoprefixer": "10.4.7",
|
"@typescript-eslint/parser": "5.46.0",
|
||||||
"axios": "0.27.2",
|
"@vitejs/plugin-legacy": "3.0.1",
|
||||||
"browserslist": "4.20.4",
|
"@vitejs/plugin-vue": "4.0.0",
|
||||||
"caniuse-lite": "1.0.30001357",
|
"@vue/eslint-config-typescript": "11.0.2",
|
||||||
"cypress": "10.3.0",
|
"@vue/test-utils": "2.2.6",
|
||||||
"esbuild": "0.14.48",
|
"@vue/tsconfig": "0.1.3",
|
||||||
"eslint": "8.19.0",
|
"autoprefixer": "10.4.13",
|
||||||
"eslint-plugin-vue": "9.1.1",
|
"browserslist": "4.21.4",
|
||||||
"express": "4.18.1",
|
"caniuse-lite": "1.0.30001436",
|
||||||
"happy-dom": "6.0.0",
|
"csstype": "3.1.1",
|
||||||
"netlify-cli": "10.3.1",
|
"cypress": "12.0.2",
|
||||||
"postcss": "8.4.14",
|
"esbuild": "0.16.4",
|
||||||
"postcss-preset-env": "7.7.2",
|
"eslint": "8.29.0",
|
||||||
"rollup": "2.75.7",
|
"eslint-plugin-vue": "9.8.0",
|
||||||
"rollup-plugin-visualizer": "5.6.0",
|
"express": "4.18.2",
|
||||||
"sass": "1.53.0",
|
"happy-dom": "7.7.2",
|
||||||
"typescript": "4.7.4",
|
"netlify-cli": "12.2.8",
|
||||||
"vite": "2.9.13",
|
"postcss": "8.4.19",
|
||||||
"vite-plugin-pwa": "0.12.2",
|
"postcss-preset-env": "7.8.3",
|
||||||
"vite-svg-loader": "3.4.0",
|
"rollup": "3.7.2",
|
||||||
"vitest": "0.17.0",
|
"rollup-plugin-visualizer": "5.8.3",
|
||||||
"vue-tsc": "0.38.2",
|
"sass": "1.56.2",
|
||||||
|
"typescript": "4.9.4",
|
||||||
|
"vite": "3.2.5",
|
||||||
|
"vite-plugin-pwa": "0.13.3",
|
||||||
|
"vite-svg-loader": "3.6.0",
|
||||||
|
"vitest": "0.25.7",
|
||||||
|
"vue-tsc": "1.0.12",
|
||||||
"wait-on": "6.0.1",
|
"wait-on": "6.0.1",
|
||||||
"workbox-cli": "6.5.3"
|
"workbox-cli": "6.5.4"
|
||||||
},
|
|
||||||
"eslintConfig": {
|
|
||||||
"root": true,
|
|
||||||
"env": {
|
|
||||||
"browser": true,
|
|
||||||
"es2021": true,
|
|
||||||
"node": true,
|
|
||||||
"vue/setup-compiler-macros": true
|
|
||||||
},
|
|
||||||
"extends": [
|
|
||||||
"eslint:recommended",
|
|
||||||
"plugin:vue/vue3-essential",
|
|
||||||
"@vue/typescript"
|
|
||||||
],
|
|
||||||
"rules": {
|
|
||||||
"vue/html-quotes": [
|
|
||||||
"error",
|
|
||||||
"double"
|
|
||||||
],
|
|
||||||
"quotes": [
|
|
||||||
"error",
|
|
||||||
"single"
|
|
||||||
],
|
|
||||||
"comma-dangle": [
|
|
||||||
"error",
|
|
||||||
"always-multiline"
|
|
||||||
],
|
|
||||||
"semi": [
|
|
||||||
"error",
|
|
||||||
"never"
|
|
||||||
],
|
|
||||||
"vue/script-setup-uses-vars": "error",
|
|
||||||
"vue/multi-word-component-names": 0
|
|
||||||
},
|
|
||||||
"parser": "vue-eslint-parser",
|
|
||||||
"parserOptions": {
|
|
||||||
"parser": "@typescript-eslint/parser",
|
|
||||||
"ecmaVersion": 2022
|
|
||||||
},
|
|
||||||
"ignorePatterns": [
|
|
||||||
"*.test.*",
|
|
||||||
"cypress/*"
|
|
||||||
],
|
|
||||||
"globals": {
|
|
||||||
"defineProps": "readonly"
|
|
||||||
}
|
|
||||||
},
|
|
||||||
"postcss": {
|
|
||||||
"plugins": {
|
|
||||||
"autoprefixer": {}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"license": "AGPL-3.0-or-later",
|
"license": "AGPL-3.0-or-later",
|
||||||
"packageManager": "yarn@1.22.19"
|
"packageManager": "pnpm@7.18.1"
|
||||||
}
|
}
|
||||||
|
|
13995
pnpm-lock.yaml
Normal file
13995
pnpm-lock.yaml
Normal file
File diff suppressed because it is too large
Load Diff
|
@ -6,7 +6,7 @@
|
||||||
],
|
],
|
||||||
"packageRules": [
|
"packageRules": [
|
||||||
{
|
{
|
||||||
"matchPackageNames": ["netlify-cli"],
|
"matchPackageNames": ["netlify-cli", "happy-dom"],
|
||||||
"extends": ["schedule:weekly"]
|
"extends": ["schedule:weekly"]
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
@ -19,6 +19,12 @@
|
||||||
"matchPackagePrefixes": [
|
"matchPackagePrefixes": [
|
||||||
"@vueuse/"
|
"@vueuse/"
|
||||||
]
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"matchDepTypes": ["devDependencies"],
|
||||||
|
"automerge": true,
|
||||||
|
"automergeStrategy": "squash",
|
||||||
|
"automergeType": "pr"
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
const {exec} = require('child_process')
|
const { exec } = require('child_process')
|
||||||
const axios = require('axios')
|
|
||||||
|
|
||||||
const BOT_USER_ID = 513
|
const BOT_USER_ID = 513
|
||||||
const giteaToken = process.env.GITEA_TOKEN
|
const giteaToken = process.env.GITEA_TOKEN
|
||||||
|
@ -35,7 +34,7 @@ const promiseExec = cmd => {
|
||||||
stdout = await promiseExec(`./node_modules/.bin/netlify deploy --alias ${alias}`)
|
stdout = await promiseExec(`./node_modules/.bin/netlify deploy --alias ${alias}`)
|
||||||
console.log(stdout)
|
console.log(stdout)
|
||||||
|
|
||||||
const {data} = await axios.get(prIssueCommentsUrl)
|
const data = await fetch(prIssueCommentsUrl).then(response => response.json())
|
||||||
const hasComment = data.some(c => c.user.id === BOT_USER_ID)
|
const hasComment = data.some(c => c.user.id === BOT_USER_ID)
|
||||||
|
|
||||||
if (hasComment) {
|
if (hasComment) {
|
||||||
|
@ -43,8 +42,7 @@ const promiseExec = cmd => {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
await axios.post(prIssueCommentsUrl, {
|
const message = `
|
||||||
body: `
|
|
||||||
Hi ${process.env.DRONE_COMMIT_AUTHOR}!
|
Hi ${process.env.DRONE_COMMIT_AUTHOR}!
|
||||||
|
|
||||||
Thank you for creating a PR!
|
Thank you for creating a PR!
|
||||||
|
@ -57,14 +55,25 @@ You will need to manually connect this to an api running somehwere. The easiest
|
||||||
Have a nice day!
|
Have a nice day!
|
||||||
|
|
||||||
> Beep boop, I'm a bot.
|
> Beep boop, I'm a bot.
|
||||||
`,
|
`
|
||||||
}, {
|
|
||||||
headers: {
|
|
||||||
'Content-Type': 'application/json',
|
|
||||||
'accept': 'application/json',
|
|
||||||
'Authorization': `token ${giteaToken}`,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
console.log(`Preview comment sent successfully to PR #${prNumber}!`)
|
try {
|
||||||
|
const response = await fetch(prIssueCommentsUrl, {
|
||||||
|
method: 'POST',
|
||||||
|
body: JSON.stringify({
|
||||||
|
body: message,
|
||||||
|
}),
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'accept': 'application/json',
|
||||||
|
'Authorization': `token ${giteaToken}`,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
if (!response.ok) {
|
||||||
|
throw new Error(`HTTP error, status = ${response.status}`)
|
||||||
|
}
|
||||||
|
console.log(`Preview comment sent successfully to PR #${prNumber}!`)
|
||||||
|
} catch (e) {
|
||||||
|
console.log(`Could not send preview comment to PR #${prNumber}! ${e.message}`)
|
||||||
|
}
|
||||||
})()
|
})()
|
|
@ -1 +1 @@
|
||||||
bb46342a0a08105b340ba7976cff9d80ef89901120ec0639669caa70bb7d2dbc43e78b1f635a7654ab2456e8358c98a4 ./scripts/deploy-preview-netlify.js
|
05c69e5323a4d4bac041ade830735becd52c230277396d1f72be8fde83683a75dc095f6678804083b2ca66f27cc7995f ./scripts/deploy-preview-netlify.js
|
||||||
|
|
36
src/App.vue
36
src/App.vue
|
@ -10,17 +10,13 @@
|
||||||
</no-auth-wrapper>
|
</no-auth-wrapper>
|
||||||
<Notification/>
|
<Notification/>
|
||||||
|
|
||||||
<transition name="fade">
|
<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
|
||||||
<keyboard-shortcuts v-if="keyboardShortcutsActive"/>
|
|
||||||
</transition>
|
|
||||||
</ready>
|
</ready>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {computed, watch, Ref} from 'vue'
|
import {computed, watch} from 'vue'
|
||||||
import {useRouter} from 'vue-router'
|
import {useRoute, useRouter} from 'vue-router'
|
||||||
import {useRouteQuery} from '@vueuse/router'
|
|
||||||
import {useStore} from 'vuex'
|
|
||||||
import {useI18n} from 'vue-i18n'
|
import {useI18n} from 'vue-i18n'
|
||||||
import isTouchDevice from 'is-touch-device'
|
import isTouchDevice from 'is-touch-device'
|
||||||
import {success} from '@/message'
|
import {success} from '@/message'
|
||||||
|
@ -36,37 +32,41 @@ import Ready from '@/components/misc/ready.vue'
|
||||||
import {setLanguage} from './i18n'
|
import {setLanguage} from './i18n'
|
||||||
import AccountDeleteService from '@/services/accountDelete'
|
import AccountDeleteService from '@/services/accountDelete'
|
||||||
|
|
||||||
|
import {useBaseStore} from '@/stores/base'
|
||||||
import {useColorScheme} from '@/composables/useColorScheme'
|
import {useColorScheme} from '@/composables/useColorScheme'
|
||||||
import {useBodyClass} from '@/composables/useBodyClass'
|
import {useBodyClass} from '@/composables/useBodyClass'
|
||||||
|
import {useAuthStore} from './stores/auth'
|
||||||
|
|
||||||
const store = useStore()
|
const baseStore = useBaseStore()
|
||||||
|
const authStore = useAuthStore()
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
useBodyClass('is-touch', isTouchDevice())
|
useBodyClass('is-touch', isTouchDevice())
|
||||||
const keyboardShortcutsActive = computed(() => store.state.keyboardShortcutsActive)
|
const keyboardShortcutsActive = computed(() => baseStore.keyboardShortcutsActive)
|
||||||
|
|
||||||
const authUser = computed(() => store.getters['auth/authUser'])
|
const authUser = computed(() => authStore.authUser)
|
||||||
const authLinkShare = computed(() => store.getters['auth/authLinkShare'])
|
const authLinkShare = computed(() => authStore.authLinkShare)
|
||||||
|
|
||||||
const {t} = useI18n({useScope: 'global'})
|
const {t} = useI18n({useScope: 'global'})
|
||||||
|
|
||||||
// setup account deletion verification
|
// setup account deletion verification
|
||||||
const accountDeletionConfirm = useRouteQuery('accountDeletionConfirm') as Ref<null | string>
|
const accountDeletionConfirm = computed(() => route.query?.accountDeletionConfirm as (string | undefined))
|
||||||
watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
|
watch(accountDeletionConfirm, async (accountDeletionConfirm) => {
|
||||||
if (accountDeletionConfirm === null) {
|
if (accountDeletionConfirm === undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
const accountDeletionService = new AccountDeleteService()
|
const accountDeletionService = new AccountDeleteService()
|
||||||
await accountDeletionService.confirm(accountDeletionConfirm)
|
await accountDeletionService.confirm(accountDeletionConfirm)
|
||||||
success({message: t('user.deletion.confirmSuccess')})
|
success({message: t('user.deletion.confirmSuccess')})
|
||||||
store.dispatch('auth/refreshUserInfo')
|
authStore.refreshUserInfo()
|
||||||
}, { immediate: true })
|
}, { immediate: true })
|
||||||
|
|
||||||
// setup password reset redirect
|
// setup password reset redirect
|
||||||
const userPasswordReset = useRouteQuery('userPasswordReset') as Ref<null | string>
|
const userPasswordReset = computed(() => route.query?.userPasswordReset as (string | undefined))
|
||||||
watch(userPasswordReset, (userPasswordReset) => {
|
watch(userPasswordReset, (userPasswordReset) => {
|
||||||
if (userPasswordReset === null) {
|
if (userPasswordReset === undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -75,9 +75,9 @@ watch(userPasswordReset, (userPasswordReset) => {
|
||||||
}, { immediate: true })
|
}, { immediate: true })
|
||||||
|
|
||||||
// setup email verification redirect
|
// setup email verification redirect
|
||||||
const userEmailConfirm = useRouteQuery('userEmailConfirm') as Ref<null | string>
|
const userEmailConfirm = computed(() => route.query?.userEmailConfirm as (string | undefined))
|
||||||
watch(userEmailConfirm, (userEmailConfirm) => {
|
watch(userEmailConfirm, (userEmailConfirm) => {
|
||||||
if (userEmailConfirm === null) {
|
if (userEmailConfirm === undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,22 +1,53 @@
|
||||||
|
<!-- a disabled link of any kind is not a link -->
|
||||||
|
<!-- we have a router link -->
|
||||||
|
<!-- just a normal link -->
|
||||||
|
<!-- a button it shall be -->
|
||||||
|
<!-- note that we only pass the click listener here -->
|
||||||
<template>
|
<template>
|
||||||
<component
|
<div
|
||||||
:is="componentNodeName"
|
v-if="disabled === true && (to !== undefined || href !== undefined)"
|
||||||
class="base-button"
|
class="base-button"
|
||||||
:class="{ 'base-button--type-button': isButton }"
|
:aria-disabled="disabled || undefined"
|
||||||
v-bind="elementBindings"
|
ref="button"
|
||||||
:disabled="disabled || undefined"
|
|
||||||
>
|
>
|
||||||
<slot />
|
<slot/>
|
||||||
</component>
|
</div>
|
||||||
|
<router-link
|
||||||
|
v-else-if="to !== undefined"
|
||||||
|
:to="to"
|
||||||
|
class="base-button"
|
||||||
|
ref="button"
|
||||||
|
>
|
||||||
|
<slot/>
|
||||||
|
</router-link>
|
||||||
|
<a v-else-if="href !== undefined"
|
||||||
|
class="base-button"
|
||||||
|
:href="href"
|
||||||
|
rel="noreferrer noopener nofollow"
|
||||||
|
target="_blank"
|
||||||
|
ref="button"
|
||||||
|
>
|
||||||
|
<slot/>
|
||||||
|
</a>
|
||||||
|
<button
|
||||||
|
v-else
|
||||||
|
:type="type"
|
||||||
|
class="base-button base-button--type-button"
|
||||||
|
:disabled="disabled || undefined"
|
||||||
|
ref="button"
|
||||||
|
@click="(event: MouseEvent) => emit('click', event)"
|
||||||
|
>
|
||||||
|
<slot/>
|
||||||
|
</button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {defineComponent} from 'vue'
|
const BASE_BUTTON_TYPES_MAP = {
|
||||||
|
BUTTON: 'button',
|
||||||
|
SUBMIT: 'submit',
|
||||||
|
} as const
|
||||||
|
|
||||||
// see https://v3.vuejs.org/api/sfc-script-setup.html#usage-alongside-normal-script
|
export type BaseButtonTypes = typeof BASE_BUTTON_TYPES_MAP[keyof typeof BASE_BUTTON_TYPES_MAP] | undefined
|
||||||
export default defineComponent({
|
|
||||||
inheritAttrs: false,
|
|
||||||
})
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -24,67 +55,41 @@ export default defineComponent({
|
||||||
// by doing so we make it easy abstract the functionality from style and enable easier and semantic
|
// by doing so we make it easy abstract the functionality from style and enable easier and semantic
|
||||||
// correct button and link usage. Also see: https://css-tricks.com/a-complete-guide-to-links-and-buttons/#accessibility-considerations
|
// correct button and link usage. Also see: https://css-tricks.com/a-complete-guide-to-links-and-buttons/#accessibility-considerations
|
||||||
|
|
||||||
// the component tries to heuristically determine what it should be checking the props (see the
|
// the component tries to heuristically determine what it should be checking the props
|
||||||
// componentNodeName and elementBindings ref for this).
|
|
||||||
|
|
||||||
// NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
|
// NOTE: Do NOT use buttons with @click to push routes. => Use router-links instead!
|
||||||
|
|
||||||
import { ref, watchEffect, computed, useAttrs, PropType } from 'vue'
|
import {unrefElement} from '@vueuse/core'
|
||||||
|
import {ref, type HTMLAttributes} from 'vue'
|
||||||
|
import type {RouteLocationNamedRaw} from 'vue-router'
|
||||||
|
|
||||||
const BASE_BUTTON_TYPES_MAP = Object.freeze({
|
export interface BaseButtonProps extends HTMLAttributes {
|
||||||
button: 'button',
|
type?: BaseButtonTypes
|
||||||
submit: 'submit',
|
disabled?: boolean
|
||||||
})
|
to?: RouteLocationNamedRaw
|
||||||
|
href?: string
|
||||||
type BaseButtonTypes = keyof typeof BASE_BUTTON_TYPES_MAP
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
type: {
|
|
||||||
type: String as PropType<BaseButtonTypes>,
|
|
||||||
default: 'button',
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
const componentNodeName = ref<Node['nodeName']>('button')
|
|
||||||
interface ElementBindings {
|
|
||||||
type?: string;
|
|
||||||
rel?: string,
|
|
||||||
}
|
}
|
||||||
|
|
||||||
const elementBindings = ref({})
|
export interface BaseButtonEmits {
|
||||||
|
(e: 'click', payload: MouseEvent): void
|
||||||
|
}
|
||||||
|
|
||||||
const attrs = useAttrs()
|
const {
|
||||||
watchEffect(() => {
|
type = BASE_BUTTON_TYPES_MAP.BUTTON,
|
||||||
// by default this component is a button element with the attribute of the type "button" (default prop value)
|
disabled = false,
|
||||||
let nodeName = 'button'
|
} = defineProps<BaseButtonProps>()
|
||||||
let bindings: ElementBindings = {type: props.type}
|
|
||||||
|
|
||||||
// if we find a "to" prop we set it as router-link
|
const emit = defineEmits<BaseButtonEmits>()
|
||||||
if ('to' in attrs) {
|
|
||||||
nodeName = 'router-link'
|
|
||||||
bindings = {}
|
|
||||||
}
|
|
||||||
|
|
||||||
// if there is a href we assume the user wants an external link via a link element
|
const button = ref<HTMLElement | null>(null)
|
||||||
// we also set a predefined value for the attribute rel, but make it possible to overwrite this by the user.
|
|
||||||
if ('href' in attrs) {
|
|
||||||
nodeName = 'a'
|
|
||||||
bindings = {rel: 'noreferrer noopener nofollow'}
|
|
||||||
}
|
|
||||||
|
|
||||||
componentNodeName.value = nodeName
|
function focus() {
|
||||||
elementBindings.value = {
|
unrefElement(button)?.focus()
|
||||||
...bindings,
|
}
|
||||||
...attrs,
|
|
||||||
}
|
defineExpose({
|
||||||
|
focus,
|
||||||
})
|
})
|
||||||
|
|
||||||
const isButton = computed(() => componentNodeName.value === 'button')
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
@ -103,13 +108,13 @@ const isButton = computed(() => componentNodeName.value === 'button')
|
||||||
|
|
||||||
:where(.base-button) {
|
:where(.base-button) {
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
display: block;
|
display: inline-block;
|
||||||
color: inherit;
|
color: inherit;
|
||||||
font: inherit;
|
font: inherit;
|
||||||
user-select: none;
|
user-select: none;
|
||||||
pointer-events: auto; // disable possible resets
|
pointer-events: auto; // disable possible resets
|
||||||
|
|
||||||
&:focus {
|
&:focus, &.is-focused {
|
||||||
outline: transparent;
|
outline: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -6,13 +6,13 @@
|
||||||
{{ $t('input.datemathHelp.intro') }}
|
{{ $t('input.datemathHelp.intro') }}
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<i18n-t keypath="input.datemathHelp.expression">
|
<i18n-t keypath="input.datemathHelp.expression" scope="global">
|
||||||
<code>now</code>
|
<code>now</code>
|
||||||
<code>||</code>
|
<code>||</code>
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
</p>
|
</p>
|
||||||
<p>
|
<p>
|
||||||
<i18n-t keypath="input.datemathHelp.similar">
|
<i18n-t keypath="input.datemathHelp.similar" scope="global">
|
||||||
<BaseButton
|
<BaseButton
|
||||||
href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
|
href="https://grafana.com/docs/grafana/latest/dashboards/time-range-controls/"
|
||||||
target="_blank">
|
target="_blank">
|
||||||
|
@ -99,7 +99,7 @@
|
||||||
<tr>
|
<tr>
|
||||||
<td><code>{{ exampleDate }}||+1M/d</code></td>
|
<td><code>{{ exampleDate }}||+1M/d</code></td>
|
||||||
<td>
|
<td>
|
||||||
<i18n-t keypath="input.datemathHelp.examples.datePlusMonth">
|
<i18n-t keypath="input.datemathHelp.examples.datePlusMonth" scope="global">
|
||||||
<code>{{ exampleDate }}</code>
|
<code>{{ exampleDate }}</code>
|
||||||
</i18n-t>
|
</i18n-t>
|
||||||
</td>
|
</td>
|
||||||
|
@ -110,13 +110,13 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {format} from 'date-fns'
|
import {formatDate} from '@/helpers/time/formatDate'
|
||||||
import BaseButton from '@/components/base/BaseButton.vue'
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
|
|
||||||
const exampleDate = format(new Date(), 'yyyy-MM-dd')
|
const exampleDate = formatDate(new Date(), 'yyyy-MM-dd')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped lang="scss">
|
||||||
.how-it-works-modal {
|
.how-it-works-modal {
|
||||||
font-size: 1rem;
|
font-size: 1rem;
|
||||||
}
|
}
|
||||||
|
|
|
@ -54,8 +54,8 @@
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<modal
|
<modal
|
||||||
@close="() => showHowItWorks = false"
|
|
||||||
:enabled="showHowItWorks"
|
:enabled="showHowItWorks"
|
||||||
|
@close="() => showHowItWorks = false"
|
||||||
transition-name="fade"
|
transition-name="fade"
|
||||||
:overflow="true"
|
:overflow="true"
|
||||||
variant="hint-modal"
|
variant="hint-modal"
|
||||||
|
@ -71,7 +71,6 @@
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {computed, ref, watch} from 'vue'
|
import {computed, ref, watch} from 'vue'
|
||||||
import {useStore} from 'vuex'
|
|
||||||
import {useI18n} from 'vue-i18n'
|
import {useI18n} from 'vue-i18n'
|
||||||
|
|
||||||
import flatPickr from 'vue-flatpickr-component'
|
import flatPickr from 'vue-flatpickr-component'
|
||||||
|
@ -81,14 +80,20 @@ import Popup from '@/components/misc/popup.vue'
|
||||||
import {DATE_RANGES} from '@/components/date/dateRanges'
|
import {DATE_RANGES} from '@/components/date/dateRanges'
|
||||||
import BaseButton from '@/components/base/BaseButton.vue'
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
import DatemathHelp from '@/components/date/datemathHelp.vue'
|
import DatemathHelp from '@/components/date/datemathHelp.vue'
|
||||||
|
import {useAuthStore} from '@/stores/auth'
|
||||||
|
|
||||||
const store = useStore()
|
const authStore = useAuthStore()
|
||||||
const {t} = useI18n({useScope: 'global'})
|
const {t} = useI18n({useScope: 'global'})
|
||||||
|
|
||||||
const emit = defineEmits(['dateChanged'])
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
required: false,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
// FIXME: This seems to always contain the default value - that breaks the picker
|
// FIXME: This seems to always contain the default value - that breaks the picker
|
||||||
const weekStart = computed<number>(() => store.state.auth.settings.weekStart ?? 0)
|
const weekStart = computed(() => authStore.settings.weekStart ?? 0)
|
||||||
const flatPickerConfig = computed(() => ({
|
const flatPickerConfig = computed(() => ({
|
||||||
altFormat: t('date.altFormatLong'),
|
altFormat: t('date.altFormatLong'),
|
||||||
altInput: true,
|
altInput: true,
|
||||||
|
@ -108,11 +113,27 @@ const flatpickrRange = ref('')
|
||||||
const from = ref('')
|
const from = ref('')
|
||||||
const to = ref('')
|
const to = ref('')
|
||||||
|
|
||||||
|
watch(
|
||||||
|
() => props.modelValue,
|
||||||
|
newValue => {
|
||||||
|
from.value = newValue.dateFrom
|
||||||
|
to.value = newValue.dateTo
|
||||||
|
// Only set the date back to flatpickr when it's an actual date.
|
||||||
|
// Otherwise flatpickr runs in an endless loop and slows down the browser.
|
||||||
|
const dateFrom = new Date(from.value)
|
||||||
|
const dateTo = new Date(to.value)
|
||||||
|
if (dateTo.getTime() === dateTo.getTime() && dateFrom.getTime() === dateFrom.getTime()) {
|
||||||
|
flatpickrRange.value = `${from.value} to ${to.value}`
|
||||||
|
}
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
function emitChanged() {
|
function emitChanged() {
|
||||||
emit('dateChanged', {
|
const args = {
|
||||||
dateFrom: from.value === '' ? null : from.value,
|
dateFrom: from.value === '' ? null : from.value,
|
||||||
dateTo: to.value === '' ? null : to.value,
|
dateTo: to.value === '' ? null : to.value,
|
||||||
})
|
}
|
||||||
|
emit('update:modelValue', args)
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
|
|
|
@ -1,8 +1,8 @@
|
||||||
<template>
|
<template>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
class="menu-show-button"
|
class="menu-show-button"
|
||||||
@click="$store.commit('toggleMenu')"
|
@click="baseStore.toggleMenu()"
|
||||||
@shortkey="() => $store.commit('toggleMenu')"
|
@shortkey="() => baseStore.toggleMenu()"
|
||||||
v-shortcut="'Control+e'"
|
v-shortcut="'Control+e'"
|
||||||
:title="$t('keyboardShortcuts.toggleMenu')"
|
:title="$t('keyboardShortcuts.toggleMenu')"
|
||||||
:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
|
:aria-label="menuActive ? $t('misc.hideMenu') : $t('misc.showMenu')"
|
||||||
|
@ -11,12 +11,12 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {computed} from 'vue'
|
import {computed} from 'vue'
|
||||||
import {useStore} from 'vuex'
|
import {useBaseStore} from '@/stores/base'
|
||||||
|
|
||||||
import BaseButton from '@/components/base/BaseButton.vue'
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
|
|
||||||
const store = useStore()
|
const baseStore = useBaseStore()
|
||||||
const menuActive = computed(() => store.state.menuActive)
|
const menuActive = computed(() => baseStore.menuActive)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -16,20 +16,24 @@
|
||||||
{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
|
{{ currentList.title === '' ? $t('misc.loading') : getListTitle(currentList) }}
|
||||||
</h1>
|
</h1>
|
||||||
|
|
||||||
|
<BaseButton :to="{name: 'list.info', params: {listId: currentList.id}}" class="info-button">
|
||||||
|
<icon icon="circle-info"/>
|
||||||
|
</BaseButton>
|
||||||
|
|
||||||
<list-settings-dropdown v-if="canWriteCurrentList && currentList.id !== -1" :list="currentList"/>
|
<list-settings-dropdown v-if="canWriteCurrentList && currentList.id !== -1" :list="currentList"/>
|
||||||
</template>
|
</template>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="navbar-end">
|
<div class="navbar-end">
|
||||||
<update/>
|
<update/>
|
||||||
<a
|
<BaseButton
|
||||||
@click="openQuickActions"
|
@click="openQuickActions"
|
||||||
class="trigger-button pr-0"
|
class="trigger-button pr-0"
|
||||||
v-shortcut="'Control+k'"
|
v-shortcut="'Control+k'"
|
||||||
:title="$t('keyboardShortcuts.quickSearch')"
|
:title="$t('keyboardShortcuts.quickSearch')"
|
||||||
>
|
>
|
||||||
<icon icon="search"/>
|
<icon icon="search"/>
|
||||||
</a>
|
</BaseButton>
|
||||||
<notifications/>
|
<notifications/>
|
||||||
<div class="user">
|
<div class="user">
|
||||||
<dropdown class="is-right" ref="usernameDropdown">
|
<dropdown class="is-right" ref="usernameDropdown">
|
||||||
|
@ -40,52 +44,46 @@
|
||||||
variant="secondary"
|
variant="secondary"
|
||||||
:shadow="false"
|
:shadow="false"
|
||||||
>
|
>
|
||||||
<img :src="userAvatar" alt="" class="avatar" width="40" height="40"/>
|
<img :src="authStore.avatarUrl" alt="" class="avatar" width="40" height="40"/>
|
||||||
<span class="username">{{ userInfo.name !== '' ? userInfo.name : userInfo.username }}</span>
|
<span class="username">{{ authStore.userDisplayName }}</span>
|
||||||
<span class="icon is-small">
|
<span class="icon is-small">
|
||||||
<icon icon="chevron-down"/>
|
<icon icon="chevron-down"/>
|
||||||
</span>
|
</span>
|
||||||
</x-button>
|
</x-button>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<BaseButton
|
<dropdown-item
|
||||||
:to="{name: 'user.settings'}"
|
:to="{name: 'user.settings'}"
|
||||||
class="dropdown-item"
|
|
||||||
>
|
>
|
||||||
{{ $t('user.settings.title') }}
|
{{ $t('user.settings.title') }}
|
||||||
</BaseButton>
|
</dropdown-item>
|
||||||
<BaseButton
|
<dropdown-item
|
||||||
v-if="imprintUrl"
|
v-if="imprintUrl"
|
||||||
:href="imprintUrl"
|
:href="imprintUrl"
|
||||||
class="dropdown-item"
|
|
||||||
>
|
>
|
||||||
{{ $t('navigation.imprint') }}
|
{{ $t('navigation.imprint') }}
|
||||||
</BaseButton>
|
</dropdown-item>
|
||||||
<BaseButton
|
<dropdown-item
|
||||||
v-if="privacyPolicyUrl"
|
v-if="privacyPolicyUrl"
|
||||||
:href="privacyPolicyUrl"
|
:href="privacyPolicyUrl"
|
||||||
class="dropdown-item"
|
|
||||||
>
|
>
|
||||||
{{ $t('navigation.privacy') }}
|
{{ $t('navigation.privacy') }}
|
||||||
</BaseButton>
|
</dropdown-item>
|
||||||
<BaseButton
|
<dropdown-item
|
||||||
@click="$store.commit('keyboardShortcutsActive', true)"
|
@click="baseStore.setKeyboardShortcutsActive(true)"
|
||||||
class="dropdown-item"
|
|
||||||
>
|
>
|
||||||
{{ $t('keyboardShortcuts.title') }}
|
{{ $t('keyboardShortcuts.title') }}
|
||||||
</BaseButton>
|
</dropdown-item>
|
||||||
<BaseButton
|
<dropdown-item
|
||||||
:to="{name: 'about'}"
|
:to="{name: 'about'}"
|
||||||
class="dropdown-item"
|
|
||||||
>
|
>
|
||||||
{{ $t('about.title') }}
|
{{ $t('about.title') }}
|
||||||
</BaseButton>
|
</dropdown-item>
|
||||||
<BaseButton
|
<dropdown-item
|
||||||
@click="logout()"
|
@click="authStore.logout()"
|
||||||
class="dropdown-item"
|
|
||||||
>
|
>
|
||||||
{{ $t('user.auth.logout') }}
|
{{ $t('user.auth.logout') }}
|
||||||
</BaseButton>
|
</dropdown-item>
|
||||||
</dropdown>
|
</dropdown>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -94,30 +92,35 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {ref, computed, onMounted, nextTick} from 'vue'
|
import {ref, computed, onMounted, nextTick} from 'vue'
|
||||||
import {useStore} from 'vuex'
|
|
||||||
import {useRouter} from 'vue-router'
|
|
||||||
|
|
||||||
import {QUICK_ACTIONS_ACTIVE} from '@/store/mutation-types'
|
import {RIGHTS as Rights} from '@/constants/rights'
|
||||||
import Rights from '@/models/constants/rights.json'
|
|
||||||
|
|
||||||
import Update from '@/components/home/update.vue'
|
import Update from '@/components/home/update.vue'
|
||||||
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
|
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
|
||||||
import Dropdown from '@/components/misc/dropdown.vue'
|
import Dropdown from '@/components/misc/dropdown.vue'
|
||||||
|
import DropdownItem from '@/components/misc/dropdown-item.vue'
|
||||||
import Notifications from '@/components/notifications/notifications.vue'
|
import Notifications from '@/components/notifications/notifications.vue'
|
||||||
import Logo from '@/components/home/Logo.vue'
|
import Logo from '@/components/home/Logo.vue'
|
||||||
import BaseButton from '@/components/base/BaseButton.vue'
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
import MenuButton from '@/components/home/MenuButton.vue'
|
import MenuButton from '@/components/home/MenuButton.vue'
|
||||||
|
|
||||||
const store = useStore()
|
import {getListTitle} from '@/helpers/getListTitle'
|
||||||
|
|
||||||
const userInfo = computed(() => store.state.auth.info)
|
import {useBaseStore} from '@/stores/base'
|
||||||
const userAvatar = computed(() => store.state.auth.avatarUrl)
|
import {useConfigStore} from '@/stores/config'
|
||||||
const currentList = computed(() => store.state.currentList)
|
import {useAuthStore} from '@/stores/auth'
|
||||||
const background = computed(() => store.state.background)
|
|
||||||
const imprintUrl = computed(() => store.state.config.legal.imprintUrl)
|
const baseStore = useBaseStore()
|
||||||
const privacyPolicyUrl = computed(() => store.state.config.legal.privacyPolicyUrl)
|
const currentList = computed(() => baseStore.currentList)
|
||||||
const canWriteCurrentList = computed(() => store.state.currentList.maxRight > Rights.READ)
|
const background = computed(() => baseStore.background)
|
||||||
const menuActive = computed(() => store.state.menuActive)
|
const canWriteCurrentList = computed(() => baseStore.currentList.maxRight > Rights.READ)
|
||||||
|
const menuActive = computed(() => baseStore.menuActive)
|
||||||
|
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
|
||||||
|
const configStore = useConfigStore()
|
||||||
|
const imprintUrl = computed(() => configStore.legal.imprintUrl)
|
||||||
|
const privacyPolicyUrl = computed(() => configStore.legal.privacyPolicyUrl)
|
||||||
|
|
||||||
const usernameDropdown = ref()
|
const usernameDropdown = ref()
|
||||||
const listTitle = ref()
|
const listTitle = ref()
|
||||||
|
@ -131,15 +134,8 @@ onMounted(async () => {
|
||||||
listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
|
listTitle.value.style.setProperty('--nav-username-width', `${usernameWidth}px`)
|
||||||
})
|
})
|
||||||
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
function logout() {
|
|
||||||
store.dispatch('auth/logout')
|
|
||||||
router.push({name: 'user.login'})
|
|
||||||
}
|
|
||||||
|
|
||||||
function openQuickActions() {
|
function openQuickActions() {
|
||||||
store.commit(QUICK_ACTIONS_ACTIVE, true)
|
baseStore.setQuickActionsActive(true)
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
@ -287,10 +283,21 @@ $hamburger-menu-icon-width: 28px;
|
||||||
|
|
||||||
:deep(.dropdown-trigger) {
|
:deep(.dropdown-trigger) {
|
||||||
color: var(--grey-400);
|
color: var(--grey-400);
|
||||||
margin-left: 1rem;
|
margin-left: .5rem;
|
||||||
height: 1rem;
|
height: 1rem;
|
||||||
width: 1rem;
|
width: 1rem;
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.info-button {
|
||||||
|
text-align: center;
|
||||||
|
height: 1.25rem;
|
||||||
|
line-height: 1.25rem;
|
||||||
|
width: 2rem;
|
||||||
|
margin-top: .25rem;
|
||||||
|
padding: 0 .5rem;
|
||||||
|
color: var(--grey-400);
|
||||||
|
margin-left: .5rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -2,7 +2,7 @@
|
||||||
<div class="content-auth">
|
<div class="content-auth">
|
||||||
<BaseButton
|
<BaseButton
|
||||||
v-if="menuActive"
|
v-if="menuActive"
|
||||||
@click="$store.commit('menuActive', false)"
|
@click="baseStore.setMenuActive(false)"
|
||||||
class="menu-hide-button d-print-none"
|
class="menu-hide-button d-print-none"
|
||||||
>
|
>
|
||||||
<icon icon="times"/>
|
<icon icon="times"/>
|
||||||
|
@ -26,7 +26,7 @@
|
||||||
>
|
>
|
||||||
<BaseButton
|
<BaseButton
|
||||||
v-if="menuActive"
|
v-if="menuActive"
|
||||||
@click="$store.commit('menuActive', false)"
|
@click="baseStore.setMenuActive(false)"
|
||||||
class="mobile-overlay d-print-none"
|
class="mobile-overlay d-print-none"
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
@ -38,105 +38,56 @@
|
||||||
</keep-alive>
|
</keep-alive>
|
||||||
</router-view>
|
</router-view>
|
||||||
|
|
||||||
<transition name="modal">
|
<modal
|
||||||
<modal
|
:enabled="Boolean(currentModal)"
|
||||||
v-if="currentModal"
|
@close="closeModal()"
|
||||||
@close="closeModal()"
|
variant="scrolling"
|
||||||
variant="scrolling"
|
class="task-detail-view-modal"
|
||||||
class="task-detail-view-modal"
|
>
|
||||||
>
|
<component :is="currentModal"/>
|
||||||
<component :is="currentModal"/>
|
</modal>
|
||||||
</modal>
|
|
||||||
</transition>
|
|
||||||
|
|
||||||
<a
|
<BaseButton
|
||||||
class="keyboard-shortcuts-button d-print-none"
|
class="keyboard-shortcuts-button d-print-none"
|
||||||
@click="showKeyboardShortcuts()"
|
@click="showKeyboardShortcuts()"
|
||||||
v-shortcut="'?'"
|
v-shortcut="'?'"
|
||||||
>
|
>
|
||||||
<icon icon="keyboard"/>
|
<icon icon="keyboard"/>
|
||||||
</a>
|
</BaseButton>
|
||||||
</main>
|
</main>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {watch, computed, shallowRef, watchEffect, VNode, h} from 'vue'
|
import {watch, computed} from 'vue'
|
||||||
import {useStore} from 'vuex'
|
import {useRoute} from 'vue-router'
|
||||||
import {useRoute, useRouter} from 'vue-router'
|
|
||||||
import {useEventListener} from '@vueuse/core'
|
|
||||||
|
|
||||||
import {CURRENT_LIST, KEYBOARD_SHORTCUTS_ACTIVE, MENU_ACTIVE} from '@/store/mutation-types'
|
|
||||||
import Navigation from '@/components/home/navigation.vue'
|
import Navigation from '@/components/home/navigation.vue'
|
||||||
import QuickActions from '@/components/quick-actions/quick-actions.vue'
|
import QuickActions from '@/components/quick-actions/quick-actions.vue'
|
||||||
import BaseButton from '@/components/base/BaseButton.vue'
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
|
|
||||||
function useRouteWithModal() {
|
import {useBaseStore} from '@/stores/base'
|
||||||
const router = useRouter()
|
import {useLabelStore} from '@/stores/labels'
|
||||||
const route = useRoute()
|
|
||||||
const backdropView = computed(() => route.fullPath && window.history.state.backdropView)
|
|
||||||
|
|
||||||
const routeWithModal = computed(() => {
|
import {useRouteWithModal} from '@/composables/useRouteWithModal'
|
||||||
return backdropView.value
|
import {useRenewTokenOnFocus} from '@/composables/useRenewTokenOnFocus'
|
||||||
? router.resolve(backdropView.value)
|
|
||||||
: route
|
|
||||||
})
|
|
||||||
|
|
||||||
const currentModal = shallowRef<VNode>()
|
|
||||||
watchEffect(() => {
|
|
||||||
if (!backdropView.value) {
|
|
||||||
currentModal.value = undefined
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// logic from vue-router
|
|
||||||
// https://github.com/vuejs/vue-router-next/blob/798cab0d1e21f9b4d45a2bd12b840d2c7415f38a/src/RouterView.ts#L125
|
|
||||||
const routePropsOption = route.matched[0]?.props.default
|
|
||||||
const routeProps = routePropsOption
|
|
||||||
? routePropsOption === true
|
|
||||||
? route.params
|
|
||||||
: typeof routePropsOption === 'function'
|
|
||||||
? routePropsOption(route)
|
|
||||||
: routePropsOption
|
|
||||||
: null
|
|
||||||
|
|
||||||
currentModal.value = h(
|
|
||||||
route.matched[0]?.components.default,
|
|
||||||
routeProps,
|
|
||||||
)
|
|
||||||
})
|
|
||||||
|
|
||||||
function closeModal() {
|
|
||||||
const historyState = computed(() => route.fullPath && window.history.state)
|
|
||||||
|
|
||||||
if (historyState.value) {
|
|
||||||
router.back()
|
|
||||||
} else {
|
|
||||||
const backdropRoute = historyState.value?.backdropView && router.resolve(historyState.value.backdropView)
|
|
||||||
router.push(backdropRoute)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {routeWithModal, currentModal, closeModal}
|
|
||||||
}
|
|
||||||
|
|
||||||
const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
|
const {routeWithModal, currentModal, closeModal} = useRouteWithModal()
|
||||||
|
|
||||||
const store = useStore()
|
const baseStore = useBaseStore()
|
||||||
|
const background = computed(() => baseStore.background)
|
||||||
const background = computed(() => store.state.background)
|
const blurHash = computed(() => baseStore.blurHash)
|
||||||
const blurHash = computed(() => store.state.blurHash)
|
const menuActive = computed(() => baseStore.menuActive)
|
||||||
const menuActive = computed(() => store.state.menuActive)
|
|
||||||
|
|
||||||
function showKeyboardShortcuts() {
|
function showKeyboardShortcuts() {
|
||||||
store.commit(KEYBOARD_SHORTCUTS_ACTIVE, true)
|
baseStore.setKeyboardShortcutsActive(true)
|
||||||
}
|
}
|
||||||
|
|
||||||
const route = useRoute()
|
const route = useRoute()
|
||||||
|
|
||||||
// hide menu on mobile
|
// hide menu on mobile
|
||||||
watch(() => route.fullPath, () => window.innerWidth < 769 && store.commit(MENU_ACTIVE, false))
|
watch(() => route.fullPath, () => window.innerWidth < 769 && baseStore.setMenuActive(false))
|
||||||
|
|
||||||
// FIXME: this is really error prone
|
// FIXME: this is really error prone
|
||||||
// Reset the current list highlight in menu if the current route is not list related.
|
// Reset the current list highlight in menu if the current route is not list related.
|
||||||
|
@ -158,48 +109,16 @@ watch(() => route.name as string, (routeName) => {
|
||||||
routeName.startsWith('user.settings')
|
routeName.startsWith('user.settings')
|
||||||
)
|
)
|
||||||
) {
|
) {
|
||||||
store.dispatch(CURRENT_LIST, {list: null})
|
baseStore.handleSetCurrentList({list: null})
|
||||||
}
|
}
|
||||||
})
|
})
|
||||||
|
|
||||||
// TODO: Reset the title if the page component does not set one itself
|
// TODO: Reset the title if the page component does not set one itself
|
||||||
|
|
||||||
function useRenewTokenOnFocus() {
|
|
||||||
const router = useRouter()
|
|
||||||
|
|
||||||
const userInfo = computed(() => store.state.auth.info)
|
|
||||||
const authenticated = computed(() => store.state.auth.authenticated)
|
|
||||||
|
|
||||||
// Try renewing the token every time vikunja is loaded initially
|
|
||||||
// (When opening the browser the focus event is not fired)
|
|
||||||
store.dispatch('auth/renewToken')
|
|
||||||
|
|
||||||
// Check if the token is still valid if the window gets focus again to maybe renew it
|
|
||||||
useEventListener('focus', () => {
|
|
||||||
if (!authenticated.value) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const expiresIn = (userInfo.value !== null ? userInfo.value.exp : 0) - +new Date() / 1000
|
|
||||||
|
|
||||||
// If the token expiry is negative, it is already expired and we have no choice but to redirect
|
|
||||||
// the user to the login page
|
|
||||||
if (expiresIn < 0) {
|
|
||||||
store.dispatch('auth/checkAuth')
|
|
||||||
router.push({name: 'user.login'})
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if the token is valid for less than 60 hours and renew if thats the case
|
|
||||||
if (expiresIn < 60 * 3600) {
|
|
||||||
store.dispatch('auth/renewToken')
|
|
||||||
console.debug('renewed token')
|
|
||||||
}
|
|
||||||
})
|
|
||||||
}
|
|
||||||
|
|
||||||
useRenewTokenOnFocus()
|
useRenewTokenOnFocus()
|
||||||
store.dispatch('labels/loadAllLabels')
|
|
||||||
|
const labelStore = useLabelStore()
|
||||||
|
labelStore.loadAllLabels()
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -235,41 +154,36 @@ store.dispatch('labels/loadAllLabels')
|
||||||
@media screen and (max-width: $tablet) {
|
@media screen and (max-width: $tablet) {
|
||||||
padding-top: $navbar-height;
|
padding-top: $navbar-height;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.app-content {
|
.app-content {
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
position: relative;
|
position: relative;
|
||||||
padding-top: 1rem;
|
padding: 1.5rem 0.5rem 1rem;
|
||||||
|
|
||||||
@media screen {
|
@media screen and (max-width: $tablet) {
|
||||||
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
|
margin-left: 0;
|
||||||
|
min-height: calc(100vh - 4rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (min-width: $tablet) {
|
||||||
|
padding: $navbar-height + 1.5rem 1.5rem 1rem 1.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-menu-enabled {
|
||||||
|
@media screen and (min-width: $tablet) {
|
||||||
|
margin-left: $navbar-width;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
// Used to make sure the spinner is always in the middle while loading
|
// Used to make sure the spinner is always in the middle while loading
|
||||||
> .loader-container {
|
> .loader-container {
|
||||||
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
|
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem});
|
||||||
}
|
}
|
||||||
|
|
||||||
@media screen and (max-width: $tablet) {
|
// FIXME: This should be somehow defined inside Card.vue
|
||||||
margin-left: 0;
|
.card {
|
||||||
padding-top: 1.5rem;
|
background: var(--white);
|
||||||
min-height: calc(100vh - 4rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen {
|
|
||||||
&.is-menu-enabled {
|
|
||||||
margin-left: $navbar-width;
|
|
||||||
|
|
||||||
@media screen and (max-width: $tablet) {
|
|
||||||
min-width: 100%;
|
|
||||||
margin-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.card {
|
|
||||||
background: var(--white);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -316,6 +230,4 @@ store.dispatch('labels/loadAllLabels')
|
||||||
.content-auth.z-unset {
|
.content-auth.z-unset {
|
||||||
z-index: unset;
|
z-index: unset;
|
||||||
}
|
}
|
||||||
|
|
||||||
@include modal-transition();
|
|
||||||
</style>
|
</style>
|
|
@ -6,15 +6,16 @@
|
||||||
>
|
>
|
||||||
<div class="container has-text-centered link-share-view">
|
<div class="container has-text-centered link-share-view">
|
||||||
<div class="column is-10 is-offset-1">
|
<div class="column is-10 is-offset-1">
|
||||||
<Logo class="logo" />
|
<Logo class="logo" v-if="logoVisible"/>
|
||||||
<h1
|
<h1
|
||||||
|
:class="{'m-0': !logoVisible}"
|
||||||
:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
|
:style="{ 'opacity': currentList.title === '' ? '0': '1' }"
|
||||||
class="title">
|
class="title">
|
||||||
{{ currentList.title === '' ? $t('misc.loading') : currentList.title }}
|
{{ currentList.title === '' ? $t('misc.loading') : currentList.title }}
|
||||||
</h1>
|
</h1>
|
||||||
<div class="box has-text-left view">
|
<div class="box has-text-left view">
|
||||||
<router-view/>
|
<router-view/>
|
||||||
<PoweredByLink />
|
<PoweredByLink/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -23,26 +24,29 @@
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {computed} from 'vue'
|
import {computed} from 'vue'
|
||||||
import {useStore} from 'vuex'
|
|
||||||
|
import {useBaseStore} from '@/stores/base'
|
||||||
|
|
||||||
import Logo from '@/components/home/Logo.vue'
|
import Logo from '@/components/home/Logo.vue'
|
||||||
import PoweredByLink from './PoweredByLink.vue'
|
import PoweredByLink from './PoweredByLink.vue'
|
||||||
|
|
||||||
const store = useStore()
|
const baseStore = useBaseStore()
|
||||||
const currentList = computed(() => store.state.currentList)
|
const currentList = computed(() => baseStore.currentList)
|
||||||
const background = computed(() => store.state.background)
|
const background = computed(() => baseStore.background)
|
||||||
|
const logoVisible = computed(() => baseStore.logoVisible)
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.link-share-container.has-background .view {
|
.link-share-container.has-background .view {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
border: none;
|
border: none;
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo {
|
.logo {
|
||||||
max-width: 300px;
|
max-width: 300px;
|
||||||
width: 90%;
|
width: 90%;
|
||||||
margin: 2rem 0 1.5rem;
|
margin: 2rem 0 1.5rem;
|
||||||
|
height: 100px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.column {
|
.column {
|
||||||
|
@ -55,6 +59,6 @@ const background = computed(() => store.state.background)
|
||||||
|
|
||||||
// FIXME: this should be defined somewhere deep
|
// FIXME: this should be defined somewhere deep
|
||||||
.link-share-view .card {
|
.link-share-view .card {
|
||||||
background-color: var(--white);
|
background-color: var(--white);
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -7,7 +7,7 @@
|
||||||
<ul class="menu-list">
|
<ul class="menu-list">
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
|
<router-link :to="{ name: 'home'}" v-shortcut="'g o'">
|
||||||
<span class="icon">
|
<span class="menu-item-icon icon">
|
||||||
<icon icon="calendar"/>
|
<icon icon="calendar"/>
|
||||||
</span>
|
</span>
|
||||||
{{ $t('navigation.overview') }}
|
{{ $t('navigation.overview') }}
|
||||||
|
@ -15,7 +15,7 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
|
<router-link :to="{ name: 'tasks.range'}" v-shortcut="'g u'">
|
||||||
<span class="icon">
|
<span class="menu-item-icon icon">
|
||||||
<icon :icon="['far', 'calendar-alt']"/>
|
<icon :icon="['far', 'calendar-alt']"/>
|
||||||
</span>
|
</span>
|
||||||
{{ $t('navigation.upcoming') }}
|
{{ $t('navigation.upcoming') }}
|
||||||
|
@ -23,7 +23,7 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'namespaces.index'}" v-shortcut="'g n'">
|
<router-link :to="{ name: 'namespaces.index'}" v-shortcut="'g n'">
|
||||||
<span class="icon">
|
<span class="menu-item-icon icon">
|
||||||
<icon icon="layer-group"/>
|
<icon icon="layer-group"/>
|
||||||
</span>
|
</span>
|
||||||
{{ $t('namespace.title') }}
|
{{ $t('namespace.title') }}
|
||||||
|
@ -31,7 +31,7 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
|
<router-link :to="{ name: 'labels.index'}" v-shortcut="'g a'">
|
||||||
<span class="icon">
|
<span class="menu-item-icon icon">
|
||||||
<icon icon="tags"/>
|
<icon icon="tags"/>
|
||||||
</span>
|
</span>
|
||||||
{{ $t('label.title') }}
|
{{ $t('label.title') }}
|
||||||
|
@ -39,7 +39,7 @@
|
||||||
</li>
|
</li>
|
||||||
<li>
|
<li>
|
||||||
<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
|
<router-link :to="{ name: 'teams.index'}" v-shortcut="'g m'">
|
||||||
<span class="icon">
|
<span class="menu-item-icon icon">
|
||||||
<icon icon="users"/>
|
<icon icon="users"/>
|
||||||
</span>
|
</span>
|
||||||
{{ $t('team.title') }}
|
{{ $t('team.title') }}
|
||||||
|
@ -51,42 +51,35 @@
|
||||||
<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
|
<nav class="menu namespaces-lists loader-container is-loading-small" :class="{'is-loading': loading}">
|
||||||
<template v-for="(n, nk) in namespaces" :key="n.id">
|
<template v-for="(n, nk) in namespaces" :key="n.id">
|
||||||
<div class="namespace-title" :class="{'has-menu': n.id > 0}">
|
<div class="namespace-title" :class="{'has-menu': n.id > 0}">
|
||||||
<span
|
<BaseButton
|
||||||
@click="toggleLists(n.id)"
|
@click="toggleLists(n.id)"
|
||||||
class="menu-label"
|
class="menu-label"
|
||||||
v-tooltip="namespaceTitles[nk]"
|
v-tooltip="namespaceTitles[nk]"
|
||||||
>
|
>
|
||||||
<span
|
<ColorBubble
|
||||||
v-if="n.hexColor !== ''"
|
v-if="n.hexColor !== ''"
|
||||||
:style="{ backgroundColor: n.hexColor }"
|
:color="n.hexColor"
|
||||||
class="color-bubble"
|
class="mr-1"
|
||||||
/>
|
/>
|
||||||
<span class="name">
|
<span class="name">{{ namespaceTitles[nk] }}</span>
|
||||||
{{ namespaceTitles[nk] }}
|
<div
|
||||||
</span>
|
class="icon menu-item-icon is-small toggle-lists-icon pl-2"
|
||||||
<a
|
|
||||||
class="icon is-small toggle-lists-icon pl-2"
|
|
||||||
:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
|
:class="{'active': typeof listsVisible[n.id] !== 'undefined' ? listsVisible[n.id] : true}"
|
||||||
@click="toggleLists(n.id)"
|
|
||||||
>
|
>
|
||||||
<icon icon="chevron-down"/>
|
<icon icon="chevron-down"/>
|
||||||
</a>
|
</div>
|
||||||
<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
|
<span class="count" :class="{'ml-2 mr-0': n.id > 0}">
|
||||||
({{ namespaceListsCount[nk] }})
|
({{ namespaceListsCount[nk] }})
|
||||||
</span>
|
</span>
|
||||||
</span>
|
</BaseButton>
|
||||||
<namespace-settings-dropdown :namespace="n" v-if="n.id > 0"/>
|
<namespace-settings-dropdown class="menu-list-dropdown" :namespace="n" v-if="n.id > 0"/>
|
||||||
</div>
|
</div>
|
||||||
<div
|
|
||||||
v-if="listsVisible[n.id] ?? true"
|
|
||||||
:key="n.id + 'child'"
|
|
||||||
class="more-container"
|
|
||||||
>
|
|
||||||
<!--
|
<!--
|
||||||
NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
|
NOTE: a v-model / computed setter is not possible, since the updateActiveLists function
|
||||||
triggered by the change needs to have access to the current namespace
|
triggered by the change needs to have access to the current namespace
|
||||||
-->
|
-->
|
||||||
<draggable
|
<draggable
|
||||||
|
v-if="listsVisible[n.id] ?? true"
|
||||||
v-bind="dragOptions"
|
v-bind="dragOptions"
|
||||||
:modelValue="activeLists[nk]"
|
:modelValue="activeLists[nk]"
|
||||||
@update:modelValue="(lists) => updateActiveLists(n, lists)"
|
@update:modelValue="(lists) => updateActiveLists(n, lists)"
|
||||||
|
@ -95,13 +88,12 @@
|
||||||
@end="saveListPosition"
|
@end="saveListPosition"
|
||||||
handle=".handle"
|
handle=".handle"
|
||||||
:disabled="n.id < 0 || undefined"
|
:disabled="n.id < 0 || undefined"
|
||||||
tag="transition-group"
|
tag="ul"
|
||||||
item-key="id"
|
item-key="id"
|
||||||
:data-namespace-id="n.id"
|
:data-namespace-id="n.id"
|
||||||
:data-namespace-index="nk"
|
:data-namespace-index="nk"
|
||||||
:component-data="{
|
:component-data="{
|
||||||
type: 'transition',
|
type: 'transition-group',
|
||||||
tag: 'ul',
|
|
||||||
name: !drag ? 'flip-list' : null,
|
name: !drag ? 'flip-list' : null,
|
||||||
class: [
|
class: [
|
||||||
'menu-list can-be-hidden',
|
'menu-list can-be-hidden',
|
||||||
|
@ -111,45 +103,42 @@
|
||||||
>
|
>
|
||||||
<template #item="{element: l}">
|
<template #item="{element: l}">
|
||||||
<li
|
<li
|
||||||
class="loader-container is-loading-small"
|
class="list-menu loader-container is-loading-small"
|
||||||
:class="{'is-loading': listUpdating[l.id]}"
|
:class="{'is-loading': listUpdating[l.id]}"
|
||||||
>
|
>
|
||||||
<router-link
|
<BaseButton
|
||||||
:to="{ name: 'list.index', params: { listId: l.id} }"
|
:to="{ name: 'list.index', params: { listId: l.id} }"
|
||||||
v-slot="{ href, navigate, isActive }"
|
class="list-menu-link"
|
||||||
custom
|
:class="{'router-link-exact-active': currentList.id === l.id}"
|
||||||
>
|
>
|
||||||
<a
|
<span class="icon menu-item-icon handle">
|
||||||
@click="navigate"
|
<icon icon="grip-lines"/>
|
||||||
:href="href"
|
</span>
|
||||||
class="list-menu-link"
|
<ColorBubble
|
||||||
:class="{'router-link-exact-active': isActive || currentList?.id === l.id}"
|
v-if="l.hexColor !== ''"
|
||||||
>
|
:color="l.hexColor"
|
||||||
<span class="icon handle">
|
class="mr-1"
|
||||||
<icon icon="grip-lines"/>
|
/>
|
||||||
</span>
|
<span class="list-menu-title">{{ getListTitle(l) }}</span>
|
||||||
<span
|
</BaseButton>
|
||||||
:style="{ backgroundColor: l.hexColor }"
|
<BaseButton
|
||||||
class="color-bubble"
|
class="favorite"
|
||||||
v-if="l.hexColor !== ''">
|
:class="{'is-favorite': l.isFavorite}"
|
||||||
</span>
|
@click="listStore.toggleListFavorite(l)"
|
||||||
<span class="list-menu-title">
|
>
|
||||||
{{ getListTitle(l) }}
|
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
|
||||||
</span>
|
</BaseButton>
|
||||||
<span
|
<list-settings-dropdown class="menu-list-dropdown" :list="l" v-if="l.id > 0">
|
||||||
:class="{'is-favorite': l.isFavorite}"
|
<template #trigger="{toggleOpen}">
|
||||||
@click.prevent.stop="toggleFavoriteList(l)"
|
<BaseButton class="menu-list-dropdown-trigger" @click="toggleOpen">
|
||||||
class="favorite">
|
<icon icon="ellipsis-h" class="icon"/>
|
||||||
<icon :icon="l.isFavorite ? 'star' : ['far', 'star']"/>
|
</BaseButton>
|
||||||
</span>
|
</template>
|
||||||
</a>
|
</list-settings-dropdown>
|
||||||
</router-link>
|
|
||||||
<list-settings-dropdown :list="l" v-if="l.id > 0"/>
|
|
||||||
<span class="list-setting-spacer" v-else></span>
|
<span class="list-setting-spacer" v-else></span>
|
||||||
</li>
|
</li>
|
||||||
</template>
|
</template>
|
||||||
</draggable>
|
</draggable>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
</nav>
|
</nav>
|
||||||
<PoweredByLink/>
|
<PoweredByLink/>
|
||||||
|
@ -158,21 +147,26 @@
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {ref, computed, onMounted, onBeforeMount} from 'vue'
|
import {ref, computed, onMounted, onBeforeMount} from 'vue'
|
||||||
import {useStore} from 'vuex'
|
|
||||||
import draggable from 'zhyswan-vuedraggable'
|
import draggable from 'zhyswan-vuedraggable'
|
||||||
import {SortableEvent} from 'sortablejs'
|
import type {SortableEvent} from 'sortablejs'
|
||||||
|
|
||||||
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
|
import ListSettingsDropdown from '@/components/list/list-settings-dropdown.vue'
|
||||||
import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
|
import NamespaceSettingsDropdown from '@/components/namespace/namespace-settings-dropdown.vue'
|
||||||
import PoweredByLink from '@/components/home/PoweredByLink.vue'
|
import PoweredByLink from '@/components/home/PoweredByLink.vue'
|
||||||
import Logo from '@/components/home/Logo.vue'
|
import Logo from '@/components/home/Logo.vue'
|
||||||
|
|
||||||
import {MENU_ACTIVE} from '@/store/mutation-types'
|
|
||||||
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
|
import {calculateItemPosition} from '@/helpers/calculateItemPosition'
|
||||||
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
|
import {getNamespaceTitle} from '@/helpers/getNamespaceTitle'
|
||||||
|
import {getListTitle} from '@/helpers/getListTitle'
|
||||||
import {useEventListener} from '@vueuse/core'
|
import {useEventListener} from '@vueuse/core'
|
||||||
import NamespaceModel from '@/models/namespace'
|
import type {IList} from '@/modelTypes/IList'
|
||||||
import ListModel from '@/models/list'
|
import type {INamespace} from '@/modelTypes/INamespace'
|
||||||
|
import ColorBubble from '@/components/misc/colorBubble.vue'
|
||||||
|
|
||||||
|
import {useBaseStore} from '@/stores/base'
|
||||||
|
import {useListStore} from '@/stores/lists'
|
||||||
|
import {useNamespaceStore} from '@/stores/namespaces'
|
||||||
|
|
||||||
const drag = ref(false)
|
const drag = ref(false)
|
||||||
const dragOptions = {
|
const dragOptions = {
|
||||||
|
@ -180,14 +174,15 @@ const dragOptions = {
|
||||||
ghostClass: 'ghost',
|
ghostClass: 'ghost',
|
||||||
}
|
}
|
||||||
|
|
||||||
const store = useStore()
|
const baseStore = useBaseStore()
|
||||||
const currentList = computed(() => store.state.currentList)
|
const namespaceStore = useNamespaceStore()
|
||||||
const menuActive = computed(() => store.state.menuActive)
|
const currentList = computed(() => baseStore.currentList)
|
||||||
const loading = computed(() => store.state.loading && store.state.loadingModule === 'namespaces')
|
const menuActive = computed(() => baseStore.menuActive)
|
||||||
|
const loading = computed(() => namespaceStore.isLoading)
|
||||||
|
|
||||||
|
|
||||||
const namespaces = computed(() => {
|
const namespaces = computed(() => {
|
||||||
return (store.state.namespaces.namespaces as NamespaceModel[]).filter(n => !n.isArchived)
|
return namespaceStore.namespaces.filter(n => !n.isArchived)
|
||||||
})
|
})
|
||||||
const activeLists = computed(() => {
|
const activeLists = computed(() => {
|
||||||
return namespaces.value.map(({lists}) => {
|
return namespaces.value.map(({lists}) => {
|
||||||
|
@ -209,29 +204,21 @@ const namespaceListsCount = computed(() => {
|
||||||
useEventListener('resize', resize)
|
useEventListener('resize', resize)
|
||||||
onMounted(() => resize())
|
onMounted(() => resize())
|
||||||
|
|
||||||
|
const listStore = useListStore()
|
||||||
function toggleFavoriteList(list: ListModel) {
|
|
||||||
// The favorites pseudo list is always favorite
|
|
||||||
// Archived lists cannot be marked favorite
|
|
||||||
if (list.id === -1 || list.isArchived) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
store.dispatch('lists/toggleListFavorite', list)
|
|
||||||
}
|
|
||||||
|
|
||||||
function resize() {
|
function resize() {
|
||||||
// Hide the menu by default on mobile
|
// Hide the menu by default on mobile
|
||||||
store.commit(MENU_ACTIVE, window.innerWidth >= 770)
|
baseStore.setMenuActive(window.innerWidth >= 770)
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleLists(namespaceId: number) {
|
function toggleLists(namespaceId: INamespace['id']) {
|
||||||
listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
|
listsVisible.value[namespaceId] = !listsVisible.value[namespaceId]
|
||||||
}
|
}
|
||||||
|
|
||||||
const listsVisible = ref<{ [id: NamespaceModel['id']]: boolean }>({})
|
const listsVisible = ref<{ [id: INamespace['id']]: boolean }>({})
|
||||||
// FIXME: async action will be unfinished when component mounts
|
// FIXME: async action will be unfinished when component mounts
|
||||||
onBeforeMount(async () => {
|
onBeforeMount(async () => {
|
||||||
const namespaces = await store.dispatch('namespaces/loadNamespaces') as NamespaceModel[]
|
const namespaces = await namespaceStore.loadNamespaces()
|
||||||
namespaces.forEach(n => {
|
namespaces.forEach(n => {
|
||||||
if (typeof listsVisible.value[n.id] === 'undefined') {
|
if (typeof listsVisible.value[n.id] === 'undefined') {
|
||||||
listsVisible.value[n.id] = true
|
listsVisible.value[n.id] = true
|
||||||
|
@ -239,7 +226,7 @@ onBeforeMount(async () => {
|
||||||
})
|
})
|
||||||
})
|
})
|
||||||
|
|
||||||
function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[]) {
|
function updateActiveLists(namespace: INamespace, activeLists: IList[]) {
|
||||||
// This is a bit hacky: since we do have to filter out the archived items from the list
|
// This is a bit hacky: since we do have to filter out the archived items from the list
|
||||||
// for vue draggable updating it is not as simple as replacing it.
|
// for vue draggable updating it is not as simple as replacing it.
|
||||||
// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
|
// To work around this, we merge the active lists with the archived ones. Doing so breaks the order
|
||||||
|
@ -250,24 +237,29 @@ function updateActiveLists(namespace: NamespaceModel, activeLists: ListModel[])
|
||||||
...namespace.lists.filter(l => l.isArchived),
|
...namespace.lists.filter(l => l.isArchived),
|
||||||
]
|
]
|
||||||
|
|
||||||
store.commit('namespaces/setNamespaceById', {
|
namespaceStore.setNamespaceById({
|
||||||
...namespace,
|
...namespace,
|
||||||
lists,
|
lists,
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const listUpdating = ref<{ [id: NamespaceModel['id']]: boolean }>({})
|
const listUpdating = ref<{ [id: INamespace['id']]: boolean }>({})
|
||||||
|
|
||||||
async function saveListPosition(e: SortableEvent) {
|
async function saveListPosition(e: SortableEvent) {
|
||||||
if (!e.newIndex) return
|
if (!e.newIndex && e.newIndex !== 0) return
|
||||||
|
|
||||||
const namespaceId = parseInt(e.to.dataset.namespaceId as string)
|
const namespaceId = parseInt(e.to.dataset.namespaceId as string)
|
||||||
const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex as string)
|
const newNamespaceIndex = parseInt(e.to.dataset.namespaceIndex as string)
|
||||||
|
|
||||||
const listsActive = activeLists.value[newNamespaceIndex]
|
const listsActive = activeLists.value[newNamespaceIndex]
|
||||||
const list = listsActive[e.newIndex]
|
// If the list was dragged to the last position, Safari will report e.newIndex as the size of the listsActive
|
||||||
const listBefore = listsActive[e.newIndex - 1] ?? null
|
// array instead of using the position. Because the index is wrong in that case, dragging the list will fail.
|
||||||
const listAfter = listsActive[e.newIndex + 1] ?? null
|
// To work around that we're explicitly checking that case here and decrease the index.
|
||||||
|
const newIndex = e.newIndex === listsActive.length ? e.newIndex - 1 : e.newIndex
|
||||||
|
|
||||||
|
const list = listsActive[newIndex]
|
||||||
|
const listBefore = listsActive[newIndex - 1] ?? null
|
||||||
|
const listAfter = listsActive[newIndex + 1] ?? null
|
||||||
listUpdating.value[list.id] = true
|
listUpdating.value[list.id] = true
|
||||||
|
|
||||||
const position = calculateItemPosition(
|
const position = calculateItemPosition(
|
||||||
|
@ -276,8 +268,8 @@ async function saveListPosition(e: SortableEvent) {
|
||||||
)
|
)
|
||||||
|
|
||||||
try {
|
try {
|
||||||
// create a copy of the list in order to not violate vuex mutations
|
// create a copy of the list in order to not violate pinia manipulation
|
||||||
await store.dispatch('lists/updateList', {
|
await listStore.updateList({
|
||||||
...list,
|
...list,
|
||||||
position,
|
position,
|
||||||
namespaceId,
|
namespaceId,
|
||||||
|
@ -294,6 +286,18 @@ $vikunja-nav-background: var(--site-background);
|
||||||
$vikunja-nav-color: var(--grey-700);
|
$vikunja-nav-color: var(--grey-700);
|
||||||
$vikunja-nav-selected-width: 0.4rem;
|
$vikunja-nav-selected-width: 0.4rem;
|
||||||
|
|
||||||
|
.logo {
|
||||||
|
display: block;
|
||||||
|
|
||||||
|
padding-left: 1rem;
|
||||||
|
margin-right: 1rem;
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
|
||||||
|
@media screen and (min-width: $tablet) {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.namespace-container {
|
.namespace-container {
|
||||||
background: $vikunja-nav-background;
|
background: $vikunja-nav-background;
|
||||||
color: $vikunja-nav-color;
|
color: $vikunja-nav-color;
|
||||||
|
@ -317,254 +321,226 @@ $vikunja-nav-selected-width: 0.4rem;
|
||||||
transform: translateX(0);
|
transform: translateX(0);
|
||||||
transition: transform $transition-duration ease-out;
|
transition: transform $transition-duration ease-out;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.menu {
|
// these are general menu styles
|
||||||
.menu-label {
|
// should be in own components
|
||||||
font-size: 1rem;
|
.menu {
|
||||||
font-weight: 700;
|
.menu-label,
|
||||||
font-weight: bold;
|
.menu-list .list-menu-link,
|
||||||
font-family: $vikunja-font;
|
.menu-list a {
|
||||||
color: $vikunja-nav-color;
|
display: flex;
|
||||||
font-weight: 500;
|
align-items: center;
|
||||||
min-height: 2.5rem;
|
justify-content: space-between;
|
||||||
padding-top: 0;
|
cursor: pointer;
|
||||||
padding-left: $navbar-padding;
|
|
||||||
|
|
||||||
overflow: hidden;
|
.color-bubble {
|
||||||
}
|
height: 12px;
|
||||||
|
flex: 0 0 12px;
|
||||||
.menu-label,
|
|
||||||
.menu-list span.list-menu-link,
|
|
||||||
.menu-list a {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
cursor: pointer;
|
|
||||||
|
|
||||||
.list-menu-title {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
width: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.color-bubble {
|
|
||||||
height: 12px;
|
|
||||||
flex: 0 0 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.favorite {
|
|
||||||
margin-left: .25rem;
|
|
||||||
transition: opacity $transition, color $transition;
|
|
||||||
opacity: 0;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
color: var(--warning);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.is-favorite {
|
|
||||||
opacity: 1;
|
|
||||||
color: var(--warning);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .favorite {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-label {
|
|
||||||
.color-bubble {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
flex-basis: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.is-archived {
|
|
||||||
min-width: 85px;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.namespace-title {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.menu-label {
|
|
||||||
margin-bottom: 0;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
|
|
||||||
.name {
|
|
||||||
overflow: hidden;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
white-space: nowrap;
|
|
||||||
margin-right: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.count {
|
|
||||||
color: var(--grey-500);
|
|
||||||
margin-right: .5rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a:not(.dropdown-item) {
|
|
||||||
color: $vikunja-nav-color;
|
|
||||||
padding: 0 .25rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.dropdown-trigger) {
|
|
||||||
padding: .5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.toggle-lists-icon {
|
|
||||||
svg {
|
|
||||||
transition: all $transition;
|
|
||||||
transform: rotate(90deg);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.active svg {
|
|
||||||
transform: rotate(0deg);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .toggle-lists-icon svg {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:not(.has-menu) .toggle-lists-icon {
|
|
||||||
padding-right: 1rem;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-label,
|
|
||||||
.nsettings,
|
|
||||||
.menu-list span.list-menu-link,
|
|
||||||
.menu-list a {
|
|
||||||
color: $vikunja-nav-color;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-list {
|
|
||||||
li {
|
|
||||||
height: 44px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--white);
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.dropdown-trigger) {
|
|
||||||
opacity: 0;
|
|
||||||
padding: .5rem;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: $transition;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover :deep(.dropdown-trigger) {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.flip-list-move {
|
|
||||||
transition: transform $transition-duration;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ghost {
|
|
||||||
background: var(--grey-200);
|
|
||||||
|
|
||||||
* {
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
span.list-menu-link, li > a {
|
|
||||||
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
|
|
||||||
border-radius: 0;
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
width: 100%;
|
|
||||||
border-left: $vikunja-nav-selected-width solid transparent;
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
height: 1rem;
|
|
||||||
vertical-align: middle;
|
|
||||||
padding-right: 0.5rem;
|
|
||||||
|
|
||||||
&.handle {
|
|
||||||
opacity: 0;
|
|
||||||
transition: opacity $transition;
|
|
||||||
margin-right: .25rem;
|
|
||||||
cursor: grab;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover .icon.handle {
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.router-link-exact-active {
|
|
||||||
color: var(--primary);
|
|
||||||
border-left: $vikunja-nav-selected-width solid var(--primary);
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
color: var(--primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-left: $vikunja-nav-selected-width solid var(--primary);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.logo {
|
|
||||||
display: block;
|
|
||||||
|
|
||||||
padding-left: 1rem;
|
|
||||||
margin-right: 1rem;
|
|
||||||
margin-bottom: 1rem;
|
|
||||||
|
|
||||||
@media screen and (min-width: $tablet) {
|
|
||||||
display: none;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.namespaces-lists {
|
|
||||||
padding-top: math.div($navbar-padding, 2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
color: var(--grey-400) !important;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.top-menu {
|
.menu-list {
|
||||||
margin-top: math.div($navbar-padding, 2);
|
li {
|
||||||
|
height: 44px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
.menu-list {
|
&:hover {
|
||||||
li {
|
background: var(--white);
|
||||||
font-weight: 500;
|
|
||||||
font-family: $vikunja-font;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
span.list-menu-link, li > a {
|
.menu-list-dropdown {
|
||||||
padding-left: 2rem;
|
opacity: 0;
|
||||||
display: inline-block;
|
transition: $transition;
|
||||||
|
}
|
||||||
|
|
||||||
.icon {
|
&:hover .menu-list-dropdown {
|
||||||
padding-bottom: .25rem;
|
opacity: 1;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.menu-item-icon {
|
||||||
|
color: var(--grey-400);
|
||||||
|
}
|
||||||
|
|
||||||
|
.menu-list-dropdown-trigger {
|
||||||
|
display: flex;
|
||||||
|
padding: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flip-list-move {
|
||||||
|
transition: transform $transition-duration;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ghost {
|
||||||
|
background: var(--grey-200);
|
||||||
|
|
||||||
|
* {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
a:hover {
|
||||||
|
background: transparent;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-menu-link,
|
||||||
|
li > a {
|
||||||
|
color: $vikunja-nav-color;
|
||||||
|
padding: 0.75rem .5rem 0.75rem ($navbar-padding * 1.5 - 1.75rem);
|
||||||
|
transition: all 0.2s ease;
|
||||||
|
|
||||||
|
border-radius: 0;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
width: 100%;
|
||||||
|
border-left: $vikunja-nav-selected-width solid transparent;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
border-left: $vikunja-nav-selected-width solid var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.router-link-exact-active {
|
||||||
|
color: var(--primary);
|
||||||
|
border-left: $vikunja-nav-selected-width solid var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
height: 1rem;
|
||||||
|
vertical-align: middle;
|
||||||
|
padding-right: 0.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.router-link-exact-active .icon:not(.handle) {
|
||||||
|
color: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity $transition;
|
||||||
|
margin-right: .25rem;
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
&:hover .handle {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.top-menu {
|
||||||
|
margin-top: math.div($navbar-padding, 2);
|
||||||
|
|
||||||
|
.menu-list {
|
||||||
|
li {
|
||||||
|
font-weight: 500;
|
||||||
|
font-family: $vikunja-font;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-menu-link,
|
||||||
|
li > a {
|
||||||
|
padding-left: 2rem;
|
||||||
|
display: inline-block;
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
padding-bottom: .25rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.namespaces-lists {
|
||||||
|
padding-top: math.div($navbar-padding, 2);
|
||||||
|
|
||||||
|
.menu-label {
|
||||||
|
font-size: 1rem;
|
||||||
|
font-weight: 700;
|
||||||
|
font-weight: bold;
|
||||||
|
font-family: $vikunja-font;
|
||||||
|
color: $vikunja-nav-color;
|
||||||
|
font-weight: 500;
|
||||||
|
min-height: 2.5rem;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-left: $navbar-padding;
|
||||||
|
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 0;
|
||||||
|
flex: 1 1 auto;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
white-space: nowrap;
|
||||||
|
margin-right: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.count {
|
||||||
|
color: var(--grey-500);
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite {
|
||||||
|
margin-left: .25rem;
|
||||||
|
transition: opacity $transition, color $transition;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&:hover,
|
||||||
|
&.is-favorite {
|
||||||
|
color: var(--warning);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite.is-favorite,
|
||||||
|
.list-menu:hover .favorite {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-menu-title {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.color-bubble {
|
||||||
|
width: 14px;
|
||||||
|
height: 14px;
|
||||||
|
flex-basis: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-archived {
|
||||||
|
min-width: 85px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.namespace-title {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
color: $vikunja-nav-color;
|
||||||
|
padding: 0 .25rem;
|
||||||
|
|
||||||
|
.toggle-lists-icon {
|
||||||
|
svg {
|
||||||
|
transition: all $transition;
|
||||||
|
transform: rotate(90deg);
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.active svg {
|
||||||
|
transform: rotate(0deg);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .toggle-lists-icon svg {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:not(.has-menu) .toggle-lists-icon {
|
||||||
|
padding-right: 1rem;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@ -576,8 +552,4 @@ $vikunja-nav-selected-width: 0.4rem;
|
||||||
.namespaces-list.loader-container.is-loading {
|
.namespaces-list.loader-container.is-loading {
|
||||||
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
|
min-height: calc(100vh - #{$navbar-height + 1.5rem + 1rem + 1.5rem});
|
||||||
}
|
}
|
||||||
|
|
||||||
a.dropdown-item:hover {
|
|
||||||
background: var(--dropdown-item-hover-background-color) !important;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="update-notification" v-if="updateAvailable">
|
<div class="update-notification" v-if="updateAvailable">
|
||||||
<p>{{ $t('update.available') }}</p>
|
<p>{{ $t('update.available') }}</p>
|
||||||
<x-button @click="refreshApp()" :shadow="false">
|
<x-button @click="refreshApp()" :shadow="false" class="has-no-text-wrap">
|
||||||
{{ $t('update.do') }}
|
{{ $t('update.do') }}
|
||||||
</x-button>
|
</x-button>
|
||||||
</div>
|
</div>
|
||||||
|
@ -26,7 +26,7 @@ if (navigator && navigator.serviceWorker) {
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
function showRefreshUI(e) {
|
function showRefreshUI(e: Event) {
|
||||||
console.log('recieved refresh event', e)
|
console.log('recieved refresh event', e)
|
||||||
registration.value = e.detail
|
registration.value = e.detail
|
||||||
updateAvailable.value = true
|
updateAvailable.value = true
|
||||||
|
@ -43,24 +43,19 @@ function refreshApp() {
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.update-notification {
|
.update-notification {
|
||||||
margin: .5rem;
|
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
background: $warning;
|
background: $warning;
|
||||||
padding: 0 .25rem;
|
padding: .5rem;
|
||||||
border-radius: $radius;
|
border-radius: $radius;
|
||||||
font-size: .9rem;
|
font-size: .9rem;
|
||||||
color: var(--grey-900);
|
color: var(--grey-900);
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
|
|
||||||
@media screen and (max-width: $desktop) {
|
position: fixed;
|
||||||
position: fixed;
|
bottom: 1rem;
|
||||||
bottom: 1rem;
|
width: 450px;
|
||||||
margin: 0;
|
left: calc(50vw - 225px);
|
||||||
width: 450px;
|
|
||||||
left: calc(50vw - 225px);
|
|
||||||
padding: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
@media screen and (max-width: $tablet) {
|
@media screen and (max-width: $tablet) {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
|
|
|
@ -1,12 +1,3 @@
|
||||||
import { defineAsyncComponent } from 'vue'
|
import {createAsyncComponent} from '@/helpers/createAsyncComponent'
|
||||||
import ErrorComponent from '@/components/misc/error.vue'
|
|
||||||
import LoadingComponent from '@/components/misc/loading.vue'
|
|
||||||
|
|
||||||
const Editor = () => import('@/components/input/editor.vue')
|
export default createAsyncComponent(() => import('@/components/input/editor.vue'))
|
||||||
|
|
||||||
export default defineAsyncComponent({
|
|
||||||
loader: Editor,
|
|
||||||
loadingComponent: LoadingComponent,
|
|
||||||
errorComponent: ErrorComponent,
|
|
||||||
timeout: 60000,
|
|
||||||
})
|
|
63
src/components/input/SelectList.vue
Normal file
63
src/components/input/SelectList.vue
Normal file
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<multiselect
|
||||||
|
v-model="selectedLists"
|
||||||
|
:search-results="foundLists"
|
||||||
|
:loading="listService.loading"
|
||||||
|
:multiple="true"
|
||||||
|
:placeholder="$t('list.search')"
|
||||||
|
label="title"
|
||||||
|
@search="findLists"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
|
||||||
|
|
||||||
|
import Multiselect from '@/components/input/multiselect.vue'
|
||||||
|
|
||||||
|
import type {IList} from '@/modelTypes/IList'
|
||||||
|
|
||||||
|
import ListService from '@/services/list'
|
||||||
|
import {includesById} from '@/helpers/utils'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: Array as PropType<IList[]>,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:modelValue', value: IList[]): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const lists = ref<IList[]>([])
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
lists.value = props.modelValue
|
||||||
|
})
|
||||||
|
|
||||||
|
const selectedLists = computed({
|
||||||
|
get() {
|
||||||
|
return lists.value
|
||||||
|
},
|
||||||
|
set: (value) => {
|
||||||
|
lists.value = value
|
||||||
|
emit('update:modelValue', value)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const listService = shallowReactive(new ListService())
|
||||||
|
const foundLists = ref<IList[]>([])
|
||||||
|
|
||||||
|
async function findLists(query: string) {
|
||||||
|
if (query === '') {
|
||||||
|
foundLists.value = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await listService.getAll({}, {s: query}) as IList[]
|
||||||
|
|
||||||
|
// Filter selected items from the results
|
||||||
|
foundLists.value = response.filter(({id}) => !includesById(lists.value, id))
|
||||||
|
}
|
||||||
|
</script>
|
63
src/components/input/SelectNamespace.vue
Normal file
63
src/components/input/SelectNamespace.vue
Normal file
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<multiselect
|
||||||
|
v-model="selectedNamespaces"
|
||||||
|
:search-results="foundNamespaces"
|
||||||
|
:loading="namespaceService.loading"
|
||||||
|
:multiple="true"
|
||||||
|
:placeholder="$t('namespace.search')"
|
||||||
|
label="namespace"
|
||||||
|
@search="findNamespaces"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
|
||||||
|
|
||||||
|
import Multiselect from '@/components/input/multiselect.vue'
|
||||||
|
|
||||||
|
import type {INamespace} from '@/modelTypes/INamespace'
|
||||||
|
|
||||||
|
import NamespaceService from '@/services/namespace'
|
||||||
|
import {includesById} from '@/helpers/utils'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: Array as PropType<INamespace[]>,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:modelValue', value: INamespace[]): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const namespaces = ref<INamespace[]>([])
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
namespaces.value = props.modelValue
|
||||||
|
})
|
||||||
|
|
||||||
|
const selectedNamespaces = computed({
|
||||||
|
get() {
|
||||||
|
return namespaces.value
|
||||||
|
},
|
||||||
|
set: (value) => {
|
||||||
|
namespaces.value = value
|
||||||
|
emit('update:modelValue', value)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const namespaceService = shallowReactive(new NamespaceService())
|
||||||
|
const foundNamespaces = ref<INamespace[]>([])
|
||||||
|
|
||||||
|
async function findNamespaces(query: string) {
|
||||||
|
if (query === '') {
|
||||||
|
foundNamespaces.value = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await namespaceService.getAll({}, {s: query}) as INamespace[]
|
||||||
|
|
||||||
|
// Filter selected items from the results
|
||||||
|
foundNamespaces.value = response.filter(({id}) => !includesById(namespaces.value, id))
|
||||||
|
}
|
||||||
|
</script>
|
63
src/components/input/SelectUser.vue
Normal file
63
src/components/input/SelectUser.vue
Normal file
|
@ -0,0 +1,63 @@
|
||||||
|
<template>
|
||||||
|
<multiselect
|
||||||
|
v-model="selectedUsers"
|
||||||
|
:search-results="foundUsers"
|
||||||
|
:loading="userService.loading"
|
||||||
|
:multiple="true"
|
||||||
|
:placeholder="$t('team.edit.search')"
|
||||||
|
label="username"
|
||||||
|
@search="findUsers"
|
||||||
|
/>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {computed, ref, shallowReactive, watchEffect, type PropType} from 'vue'
|
||||||
|
|
||||||
|
import Multiselect from '@/components/input/multiselect.vue'
|
||||||
|
|
||||||
|
import type {IUser} from '@/modelTypes/IUser'
|
||||||
|
|
||||||
|
import UserService from '@/services/user'
|
||||||
|
import {includesById} from '@/helpers/utils'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: Array as PropType<IUser[]>,
|
||||||
|
default: () => [],
|
||||||
|
},
|
||||||
|
})
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:modelValue', value: IUser[]): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const users = ref<IUser[]>([])
|
||||||
|
|
||||||
|
watchEffect(() => {
|
||||||
|
users.value = props.modelValue
|
||||||
|
})
|
||||||
|
|
||||||
|
const selectedUsers = computed({
|
||||||
|
get() {
|
||||||
|
return users.value
|
||||||
|
},
|
||||||
|
set: (value) => {
|
||||||
|
users.value = value
|
||||||
|
emit('update:modelValue', value)
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const userService = shallowReactive(new UserService())
|
||||||
|
const foundUsers = ref<IUser[]>([])
|
||||||
|
|
||||||
|
async function findUsers(query: string) {
|
||||||
|
if (query === '') {
|
||||||
|
foundUsers.value = []
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const response = await userService.getAll({}, {s: query}) as IUser[]
|
||||||
|
|
||||||
|
// Filter selected items from the results
|
||||||
|
foundUsers.value = response.filter(({id}) => !includesById(users.value, id))
|
||||||
|
}
|
||||||
|
</script>
|
|
@ -9,57 +9,61 @@
|
||||||
}
|
}
|
||||||
]"
|
]"
|
||||||
>
|
>
|
||||||
<icon :icon="icon" v-if="showIconOnly"/>
|
<template v-if="icon">
|
||||||
<span class="icon is-small" v-else-if="icon !== ''">
|
<icon
|
||||||
<icon :icon="icon"/>
|
v-if="showIconOnly"
|
||||||
</span>
|
:icon="icon"
|
||||||
|
:style="{'color': iconColor !== '' ? iconColor : false}"
|
||||||
|
/>
|
||||||
|
<span class="icon is-small" v-else>
|
||||||
|
<icon
|
||||||
|
:icon="icon"
|
||||||
|
:style="{'color': iconColor !== '' ? iconColor : false}"
|
||||||
|
/>
|
||||||
|
</span>
|
||||||
|
</template>
|
||||||
<slot />
|
<slot />
|
||||||
</BaseButton>
|
</BaseButton>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import {defineComponent} from 'vue'
|
const BUTTON_TYPES_MAP = {
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'x-button',
|
|
||||||
})
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<script setup lang="ts">
|
|
||||||
import {computed, useSlots, PropType} from 'vue'
|
|
||||||
import BaseButton from '@/components/base/BaseButton.vue'
|
|
||||||
|
|
||||||
const BUTTON_TYPES_MAP = Object.freeze({
|
|
||||||
primary: 'is-primary',
|
primary: 'is-primary',
|
||||||
secondary: 'is-outlined',
|
secondary: 'is-outlined',
|
||||||
tertiary: 'is-text is-inverted underline-none',
|
tertiary: 'is-text is-inverted underline-none',
|
||||||
})
|
} as const
|
||||||
|
|
||||||
type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
|
export type ButtonTypes = keyof typeof BUTTON_TYPES_MAP
|
||||||
|
|
||||||
const props = defineProps({
|
export default { name: 'x-button' }
|
||||||
variant: {
|
</script>
|
||||||
type: String as PropType<ButtonTypes>,
|
|
||||||
default: 'primary',
|
|
||||||
},
|
|
||||||
icon: {
|
|
||||||
type: [String, Array],
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
shadow: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
const variantClass = computed(() => BUTTON_TYPES_MAP[props.variant])
|
<script setup lang="ts">
|
||||||
|
import {computed, useSlots} from 'vue'
|
||||||
|
import BaseButton, {type BaseButtonProps} from '@/components/base/BaseButton.vue'
|
||||||
|
import type { IconProp } from '@fortawesome/fontawesome-svg-core'
|
||||||
|
|
||||||
|
// extending the props of the BaseButton
|
||||||
|
export interface ButtonProps extends BaseButtonProps {
|
||||||
|
variant?: ButtonTypes
|
||||||
|
icon?: IconProp
|
||||||
|
iconColor?: string
|
||||||
|
loading?: boolean
|
||||||
|
shadow?: boolean
|
||||||
|
}
|
||||||
|
|
||||||
|
const {
|
||||||
|
variant = 'primary',
|
||||||
|
icon = '',
|
||||||
|
iconColor = '',
|
||||||
|
loading = false,
|
||||||
|
shadow = true,
|
||||||
|
} = defineProps<ButtonProps>()
|
||||||
|
|
||||||
|
const variantClass = computed(() => BUTTON_TYPES_MAP[variant])
|
||||||
|
|
||||||
const slots = useSlots()
|
const slots = useSlots()
|
||||||
const showIconOnly = computed(() => props.icon !== '' && typeof slots.default === 'undefined')
|
const showIconOnly = computed(() => icon !== '' && typeof slots.default === 'undefined')
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -69,9 +73,11 @@ const showIconOnly = computed(() => props.icon !== '' && typeof slots.default ==
|
||||||
text-transform: uppercase;
|
text-transform: uppercase;
|
||||||
font-size: 0.85rem;
|
font-size: 0.85rem;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
|
height: auto;
|
||||||
min-height: $button-height;
|
min-height: $button-height;
|
||||||
box-shadow: var(--shadow-sm);
|
box-shadow: var(--shadow-sm);
|
||||||
display: inline-flex;
|
display: inline-flex;
|
||||||
|
white-space: break-spaces;
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
box-shadow: var(--shadow-md);
|
box-shadow: var(--shadow-md);
|
||||||
|
|
|
@ -34,9 +34,8 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import {defineComponent} from 'vue'
|
import {computed, ref, toRef, watch} from 'vue'
|
||||||
|
|
||||||
import {createRandomID} from '@/helpers/randomId'
|
import {createRandomID} from '@/helpers/randomId'
|
||||||
|
|
||||||
const DEFAULT_COLORS = [
|
const DEFAULT_COLORS = [
|
||||||
|
@ -48,67 +47,57 @@ const DEFAULT_COLORS = [
|
||||||
'#00db60',
|
'#00db60',
|
||||||
]
|
]
|
||||||
|
|
||||||
export default defineComponent({
|
const color = ref('')
|
||||||
name: 'colorPicker',
|
const lastChangeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
|
||||||
data() {
|
const defaultColors = ref(DEFAULT_COLORS)
|
||||||
return {
|
const colorListID = ref(createRandomID())
|
||||||
color: '',
|
|
||||||
lastChangeTimeout: null,
|
|
||||||
defaultColors: DEFAULT_COLORS,
|
|
||||||
colorListID: createRandomID(),
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
modelValue: {
|
|
||||||
type: String,
|
|
||||||
required: true,
|
|
||||||
},
|
|
||||||
menuPosition: {
|
|
||||||
type: String,
|
|
||||||
default: 'top',
|
|
||||||
},
|
|
||||||
},
|
|
||||||
emits: ['update:modelValue', 'change'],
|
|
||||||
watch: {
|
|
||||||
modelValue: {
|
|
||||||
handler(modelValue) {
|
|
||||||
this.color = modelValue
|
|
||||||
},
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
color() {
|
|
||||||
this.update()
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
isEmpty() {
|
|
||||||
return this.color === '#000000' || this.color === ''
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
update(force = false) {
|
|
||||||
|
|
||||||
if(this.isEmpty && !force) {
|
const props = defineProps({
|
||||||
return
|
modelValue: {
|
||||||
}
|
type: String,
|
||||||
|
required: true,
|
||||||
if (this.lastChangeTimeout !== null) {
|
},
|
||||||
clearTimeout(this.lastChangeTimeout)
|
menuPosition: {
|
||||||
}
|
type: String,
|
||||||
|
default: 'top',
|
||||||
this.lastChangeTimeout = setTimeout(() => {
|
|
||||||
this.$emit('update:modelValue', this.color)
|
|
||||||
this.$emit('change')
|
|
||||||
}, 500)
|
|
||||||
},
|
|
||||||
reset() {
|
|
||||||
// FIXME: I havn't found a way to make it clear to the user the color war reset.
|
|
||||||
// Not sure if verte is capable of this - it does not show the change when setting this.color = ''
|
|
||||||
this.color = ''
|
|
||||||
this.update(true)
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
|
const modelValue = toRef(props, 'modelValue')
|
||||||
|
watch(
|
||||||
|
modelValue,
|
||||||
|
(newValue) => {
|
||||||
|
color.value = newValue
|
||||||
|
},
|
||||||
|
{immediate: true},
|
||||||
|
)
|
||||||
|
|
||||||
|
watch(color, () => update())
|
||||||
|
|
||||||
|
const isEmpty = computed(() => color.value === '#000000' || color.value === '')
|
||||||
|
|
||||||
|
function update(force = false) {
|
||||||
|
if(isEmpty.value && !force) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (lastChangeTimeout.value !== null) {
|
||||||
|
clearTimeout(lastChangeTimeout.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
lastChangeTimeout.value = setTimeout(() => {
|
||||||
|
emit('update:modelValue', color.value)
|
||||||
|
}, 500)
|
||||||
|
}
|
||||||
|
|
||||||
|
function reset() {
|
||||||
|
// FIXME: I havn't found a way to make it clear to the user the color war reset.
|
||||||
|
// Not sure if verte is capable of this - it does not show the change when setting this.color = ''
|
||||||
|
color.value = ''
|
||||||
|
update(true)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|
|
@ -1,95 +1,73 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="datepicker" :class="{'disabled': disabled}">
|
<div class="datepicker">
|
||||||
<a @click.stop="toggleDatePopup" class="show">
|
<BaseButton @click.stop="toggleDatePopup" class="show" :disabled="disabled || undefined">
|
||||||
<template v-if="date === null">
|
{{ date === null ? chooseDateLabel : formatDateShort(date) }}
|
||||||
{{ chooseDateLabel }}
|
</BaseButton>
|
||||||
</template>
|
|
||||||
<template v-else>
|
|
||||||
{{ formatDateShort(date) }}
|
|
||||||
</template>
|
|
||||||
</a>
|
|
||||||
|
|
||||||
<transition name="fade">
|
<CustomTransition name="fade">
|
||||||
<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
|
<div v-if="show" class="datepicker-popup" ref="datepickerPopup">
|
||||||
|
|
||||||
<a @click.stop="() => setDate('today')" v-if="(new Date()).getHours() < 21">
|
<BaseButton
|
||||||
<span class="icon">
|
v-if="(new Date()).getHours() < 21"
|
||||||
<icon :icon="['far', 'calendar-alt']"/>
|
class="datepicker__quick-select-date"
|
||||||
</span>
|
@click.stop="setDate('today')"
|
||||||
|
>
|
||||||
|
<span class="icon"><icon :icon="['far', 'calendar-alt']"/></span>
|
||||||
<span class="text">
|
<span class="text">
|
||||||
<span>
|
<span>{{ $t('input.datepicker.today') }}</span>
|
||||||
{{ $t('input.datepicker.today') }}
|
<span class="weekday">{{ getWeekdayFromStringInterval('today') }}</span>
|
||||||
</span>
|
|
||||||
<span class="weekday">
|
|
||||||
{{ getWeekdayFromStringInterval('today') }}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a @click.stop="() => setDate('tomorrow')">
|
|
||||||
<span class="icon">
|
|
||||||
<icon :icon="['far', 'sun']"/>
|
|
||||||
</span>
|
</span>
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton
|
||||||
|
class="datepicker__quick-select-date"
|
||||||
|
@click.stop="setDate('tomorrow')"
|
||||||
|
>
|
||||||
|
<span class="icon"><icon :icon="['far', 'sun']"/></span>
|
||||||
<span class="text">
|
<span class="text">
|
||||||
<span>
|
<span>{{ $t('input.datepicker.tomorrow') }}</span>
|
||||||
{{ $t('input.datepicker.tomorrow') }}
|
<span class="weekday">{{ getWeekdayFromStringInterval('tomorrow') }}</span>
|
||||||
</span>
|
|
||||||
<span class="weekday">
|
|
||||||
{{ getWeekdayFromStringInterval('tomorrow') }}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a @click.stop="() => setDate('nextMonday')">
|
|
||||||
<span class="icon">
|
|
||||||
<icon icon="coffee"/>
|
|
||||||
</span>
|
</span>
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton
|
||||||
|
class="datepicker__quick-select-date"
|
||||||
|
@click.stop="setDate('nextMonday')"
|
||||||
|
>
|
||||||
|
<span class="icon"><icon icon="coffee"/></span>
|
||||||
<span class="text">
|
<span class="text">
|
||||||
<span>
|
<span>{{ $t('input.datepicker.nextMonday') }}</span>
|
||||||
{{ $t('input.datepicker.nextMonday') }}
|
<span class="weekday">{{ getWeekdayFromStringInterval('nextMonday') }}</span>
|
||||||
</span>
|
|
||||||
<span class="weekday">
|
|
||||||
{{ getWeekdayFromStringInterval('nextMonday') }}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a @click.stop="() => setDate('thisWeekend')">
|
|
||||||
<span class="icon">
|
|
||||||
<icon icon="cocktail"/>
|
|
||||||
</span>
|
</span>
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton
|
||||||
|
class="datepicker__quick-select-date"
|
||||||
|
@click.stop="setDate('thisWeekend')"
|
||||||
|
>
|
||||||
|
<span class="icon"><icon icon="cocktail"/></span>
|
||||||
<span class="text">
|
<span class="text">
|
||||||
<span>
|
<span>{{ $t('input.datepicker.thisWeekend') }}</span>
|
||||||
{{ $t('input.datepicker.thisWeekend') }}
|
<span class="weekday">{{ getWeekdayFromStringInterval('thisWeekend') }}</span>
|
||||||
</span>
|
|
||||||
<span class="weekday">
|
|
||||||
{{ getWeekdayFromStringInterval('thisWeekend') }}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a @click.stop="() => setDate('laterThisWeek')">
|
|
||||||
<span class="icon">
|
|
||||||
<icon icon="chess-knight"/>
|
|
||||||
</span>
|
</span>
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton
|
||||||
|
class="datepicker__quick-select-date"
|
||||||
|
@click.stop="setDate('laterThisWeek')"
|
||||||
|
>
|
||||||
|
<span class="icon"><icon icon="chess-knight"/></span>
|
||||||
<span class="text">
|
<span class="text">
|
||||||
<span>
|
<span>{{ $t('input.datepicker.laterThisWeek') }}</span>
|
||||||
{{ $t('input.datepicker.laterThisWeek') }}
|
<span class="weekday">{{ getWeekdayFromStringInterval('laterThisWeek') }}</span>
|
||||||
</span>
|
|
||||||
<span class="weekday">
|
|
||||||
{{ getWeekdayFromStringInterval('laterThisWeek') }}
|
|
||||||
</span>
|
|
||||||
</span>
|
|
||||||
</a>
|
|
||||||
<a @click.stop="() => setDate('nextWeek')">
|
|
||||||
<span class="icon">
|
|
||||||
<icon icon="forward"/>
|
|
||||||
</span>
|
</span>
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton
|
||||||
|
class="datepicker__quick-select-date"
|
||||||
|
@click.stop="setDate('nextWeek')"
|
||||||
|
>
|
||||||
|
<span class="icon"><icon icon="forward"/></span>
|
||||||
<span class="text">
|
<span class="text">
|
||||||
<span>
|
<span>{{ $t('input.datepicker.nextWeek') }}</span>
|
||||||
{{ $t('input.datepicker.nextWeek') }}
|
<span class="weekday">{{ getWeekdayFromStringInterval('nextWeek') }}</span>
|
||||||
</span>
|
|
||||||
<span class="weekday">
|
|
||||||
{{ getWeekdayFromStringInterval('nextWeek') }}
|
|
||||||
</span>
|
|
||||||
</span>
|
</span>
|
||||||
</a>
|
</BaseButton>
|
||||||
|
|
||||||
<flat-pickr
|
<flat-pickr
|
||||||
:config="flatPickerConfig"
|
:config="flatPickerConfig"
|
||||||
|
@ -98,7 +76,7 @@
|
||||||
/>
|
/>
|
||||||
|
|
||||||
<x-button
|
<x-button
|
||||||
class="is-fullwidth"
|
class="datepicker__close-button"
|
||||||
:shadow="false"
|
:shadow="false"
|
||||||
@click="close"
|
@click="close"
|
||||||
v-cy="'closeDatepicker'"
|
v-cy="'closeDatepicker'"
|
||||||
|
@ -106,156 +84,157 @@
|
||||||
{{ $t('misc.confirm') }}
|
{{ $t('misc.confirm') }}
|
||||||
</x-button>
|
</x-button>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</CustomTransition>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import {defineComponent} from 'vue'
|
import {ref, onMounted, onBeforeUnmount, toRef, watch, computed, type PropType} from 'vue'
|
||||||
|
|
||||||
import flatPickr from 'vue-flatpickr-component'
|
import flatPickr from 'vue-flatpickr-component'
|
||||||
import 'flatpickr/dist/flatpickr.css'
|
import 'flatpickr/dist/flatpickr.css'
|
||||||
import {i18n} from '@/i18n'
|
|
||||||
|
|
||||||
import {format} from 'date-fns'
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
|
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||||
|
|
||||||
|
import {formatDate, formatDateShort} from '@/helpers/time/formatDate'
|
||||||
import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
|
import {calculateDayInterval} from '@/helpers/time/calculateDayInterval'
|
||||||
import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
|
import {calculateNearestHours} from '@/helpers/time/calculateNearestHours'
|
||||||
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
||||||
import {createDateFromString} from '@/helpers/time/createDateFromString'
|
import {createDateFromString} from '@/helpers/time/createDateFromString'
|
||||||
|
import {useAuthStore} from '@/stores/auth'
|
||||||
|
import {useI18n} from 'vue-i18n'
|
||||||
|
|
||||||
export default defineComponent({
|
const props = defineProps({
|
||||||
name: 'datepicker',
|
modelValue: {
|
||||||
data() {
|
type: [Date, null, String] as PropType<Date | null | string>,
|
||||||
return {
|
validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
|
||||||
date: null,
|
default: null,
|
||||||
show: false,
|
|
||||||
changed: false,
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
components: {
|
chooseDateLabel: {
|
||||||
flatPickr,
|
type: String,
|
||||||
},
|
default() {
|
||||||
props: {
|
const {t} = useI18n({useScope: 'global'})
|
||||||
modelValue: {
|
return t('input.datepicker.chooseDate')
|
||||||
validator: prop => prop instanceof Date || prop === null || typeof prop === 'string',
|
|
||||||
},
|
|
||||||
chooseDateLabel: {
|
|
||||||
type: String,
|
|
||||||
default() {
|
|
||||||
return i18n.global.t('input.datepicker.chooseDate')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
emits: ['update:modelValue', 'change', 'close', 'close-on-change'],
|
disabled: {
|
||||||
mounted() {
|
type: Boolean,
|
||||||
document.addEventListener('click', this.hideDatePopup)
|
default: false,
|
||||||
},
|
|
||||||
beforeUnmount() {
|
|
||||||
document.removeEventListener('click', this.hideDatePopup)
|
|
||||||
},
|
|
||||||
watch: {
|
|
||||||
modelValue: {
|
|
||||||
handler: 'setDateValue',
|
|
||||||
immediate: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
computed: {
|
|
||||||
flatPickerConfig() {
|
|
||||||
return {
|
|
||||||
altFormat: this.$t('date.altFormatLong'),
|
|
||||||
altInput: true,
|
|
||||||
dateFormat: 'Y-m-d H:i',
|
|
||||||
enableTime: true,
|
|
||||||
time_24hr: true,
|
|
||||||
inline: true,
|
|
||||||
locale: {
|
|
||||||
firstDayOfWeek: this.$store.state.auth.settings.weekStart,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
},
|
|
||||||
// Since flatpickr dates are strings, we need to convert them to native date objects.
|
|
||||||
// To make that work, we need a separate variable since flatpickr does not have a change event.
|
|
||||||
flatPickrDate: {
|
|
||||||
set(newValue) {
|
|
||||||
this.date = createDateFromString(newValue)
|
|
||||||
this.updateData()
|
|
||||||
},
|
|
||||||
get() {
|
|
||||||
if (!this.date) {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
|
|
||||||
return format(this.date, 'yyy-LL-dd H:mm')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
methods: {
|
|
||||||
setDateValue(newVal) {
|
|
||||||
if (newVal === null) {
|
|
||||||
this.date = null
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.date = createDateFromString(newVal)
|
|
||||||
},
|
|
||||||
updateData() {
|
|
||||||
this.changed = true
|
|
||||||
this.$emit('update:modelValue', this.date)
|
|
||||||
this.$emit('change', this.date)
|
|
||||||
},
|
|
||||||
toggleDatePopup() {
|
|
||||||
if (this.disabled) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.show = !this.show
|
|
||||||
},
|
|
||||||
hideDatePopup(e) {
|
|
||||||
if (this.show) {
|
|
||||||
closeWhenClickedOutside(e, this.$refs.datepickerPopup, this.close)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
close() {
|
|
||||||
// Kind of dirty, but the timeout allows us to enter a time and click on "confirm" without
|
|
||||||
// having to click on another input field before it is actually used.
|
|
||||||
setTimeout(() => {
|
|
||||||
this.show = false
|
|
||||||
this.$emit('close', this.changed)
|
|
||||||
if (this.changed) {
|
|
||||||
this.changed = false
|
|
||||||
this.$emit('close-on-change', this.changed)
|
|
||||||
}
|
|
||||||
}, 200)
|
|
||||||
},
|
|
||||||
setDate(date) {
|
|
||||||
if (this.date === null) {
|
|
||||||
this.date = new Date()
|
|
||||||
}
|
|
||||||
|
|
||||||
const interval = calculateDayInterval(date)
|
|
||||||
const newDate = new Date()
|
|
||||||
newDate.setDate(newDate.getDate() + interval)
|
|
||||||
newDate.setHours(calculateNearestHours(newDate))
|
|
||||||
newDate.setMinutes(0)
|
|
||||||
newDate.setSeconds(0)
|
|
||||||
this.date = newDate
|
|
||||||
this.flatPickrDate = newDate
|
|
||||||
this.updateData()
|
|
||||||
},
|
|
||||||
getDayIntervalFromString(date) {
|
|
||||||
return calculateDayInterval(date)
|
|
||||||
},
|
|
||||||
getWeekdayFromStringInterval(date) {
|
|
||||||
const interval = calculateDayInterval(date)
|
|
||||||
const newDate = new Date()
|
|
||||||
newDate.setDate(newDate.getDate() + interval)
|
|
||||||
return format(newDate, 'E')
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue', 'close', 'close-on-change'])
|
||||||
|
|
||||||
|
const {t} = useI18n({useScope: 'global'})
|
||||||
|
|
||||||
|
const date = ref<Date | null>()
|
||||||
|
const show = ref(false)
|
||||||
|
const changed = ref(false)
|
||||||
|
|
||||||
|
onMounted(() => document.addEventListener('click', hideDatePopup))
|
||||||
|
onBeforeUnmount(() =>document.removeEventListener('click', hideDatePopup))
|
||||||
|
|
||||||
|
const modelValue = toRef(props, 'modelValue')
|
||||||
|
watch(
|
||||||
|
modelValue,
|
||||||
|
setDateValue,
|
||||||
|
{immediate: true},
|
||||||
|
)
|
||||||
|
|
||||||
|
const authStore = useAuthStore()
|
||||||
|
const weekStart = computed(() => authStore.settings.weekStart)
|
||||||
|
const flatPickerConfig = computed(() => ({
|
||||||
|
altFormat: t('date.altFormatLong'),
|
||||||
|
altInput: true,
|
||||||
|
dateFormat: 'Y-m-d H:i',
|
||||||
|
enableTime: true,
|
||||||
|
time_24hr: true,
|
||||||
|
inline: true,
|
||||||
|
locale: {
|
||||||
|
firstDayOfWeek: weekStart.value,
|
||||||
|
},
|
||||||
|
}))
|
||||||
|
|
||||||
|
// Since flatpickr dates are strings, we need to convert them to native date objects.
|
||||||
|
// To make that work, we need a separate variable since flatpickr does not have a change event.
|
||||||
|
const flatPickrDate = computed({
|
||||||
|
set(newValue: string | Date) {
|
||||||
|
date.value = createDateFromString(newValue)
|
||||||
|
updateData()
|
||||||
|
},
|
||||||
|
get() {
|
||||||
|
if (!date.value) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
return formatDate(date.value, 'yyy-LL-dd H:mm')
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
function setDateValue(dateString: string | Date | null) {
|
||||||
|
if (dateString === null) {
|
||||||
|
date.value = null
|
||||||
|
return
|
||||||
|
}
|
||||||
|
date.value = createDateFromString(dateString)
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateData() {
|
||||||
|
changed.value = true
|
||||||
|
emit('update:modelValue', date.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleDatePopup() {
|
||||||
|
if (props.disabled) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
show.value = !show.value
|
||||||
|
}
|
||||||
|
|
||||||
|
const datepickerPopup = ref<HTMLElement | null>(null)
|
||||||
|
function hideDatePopup(e: MouseEvent) {
|
||||||
|
if (show.value) {
|
||||||
|
closeWhenClickedOutside(e, datepickerPopup.value, close)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function close() {
|
||||||
|
// Kind of dirty, but the timeout allows us to enter a time and click on "confirm" without
|
||||||
|
// having to click on another input field before it is actually used.
|
||||||
|
setTimeout(() => {
|
||||||
|
show.value = false
|
||||||
|
emit('close', changed.value)
|
||||||
|
if (changed.value) {
|
||||||
|
changed.value = false
|
||||||
|
emit('close-on-change', changed.value)
|
||||||
|
}
|
||||||
|
}, 200)
|
||||||
|
}
|
||||||
|
|
||||||
|
function setDate(dateString: string) {
|
||||||
|
if (date.value === null) {
|
||||||
|
date.value = new Date()
|
||||||
|
}
|
||||||
|
|
||||||
|
const interval = calculateDayInterval(dateString)
|
||||||
|
const newDate = new Date()
|
||||||
|
newDate.setDate(newDate.getDate() + interval)
|
||||||
|
newDate.setHours(calculateNearestHours(newDate))
|
||||||
|
newDate.setMinutes(0)
|
||||||
|
newDate.setSeconds(0)
|
||||||
|
date.value = newDate
|
||||||
|
flatPickrDate.value = newDate
|
||||||
|
updateData()
|
||||||
|
}
|
||||||
|
|
||||||
|
function getWeekdayFromStringInterval(dateString: string) {
|
||||||
|
const interval = calculateDayInterval(dateString)
|
||||||
|
const newDate = new Date()
|
||||||
|
newDate.setDate(newDate.getDate() + interval)
|
||||||
|
return formatDate(newDate, 'E')
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -263,68 +242,64 @@ export default defineComponent({
|
||||||
input.input {
|
input.input {
|
||||||
display: none;
|
display: none;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.disabled a {
|
.datepicker-popup {
|
||||||
cursor: default;
|
position: absolute;
|
||||||
}
|
z-index: 99;
|
||||||
|
width: 320px;
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: $radius;
|
||||||
|
box-shadow: $shadow;
|
||||||
|
|
||||||
.datepicker-popup {
|
@media screen and (max-width: ($tablet)) {
|
||||||
position: absolute;
|
width: calc(100vw - 5rem);
|
||||||
z-index: 99;
|
|
||||||
width: 320px;
|
|
||||||
background: var(--white);
|
|
||||||
border-radius: $radius;
|
|
||||||
box-shadow: $shadow;
|
|
||||||
|
|
||||||
@media screen and (max-width: ($tablet)) {
|
|
||||||
width: calc(100vw - 5rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
a:not(.button) {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
padding: 0 .5rem;
|
|
||||||
width: 100%;
|
|
||||||
height: 2.25rem;
|
|
||||||
color: var(--text);
|
|
||||||
transition: all $transition;
|
|
||||||
|
|
||||||
&:first-child {
|
|
||||||
border-radius: $radius $radius 0 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
background: var(--grey-100);
|
|
||||||
}
|
|
||||||
|
|
||||||
.text {
|
|
||||||
width: 100%;
|
|
||||||
font-size: .85rem;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding-right: .25rem;
|
|
||||||
|
|
||||||
.weekday {
|
|
||||||
color: var(--text-light);
|
|
||||||
text-transform: capitalize;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon {
|
|
||||||
width: 2rem;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
a.button {
|
|
||||||
margin: 1rem;
|
|
||||||
width: calc(100% - 2rem);
|
|
||||||
}
|
|
||||||
|
|
||||||
:deep(.flatpickr-calendar) {
|
|
||||||
margin: 0 auto 8px;
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.datepicker__quick-select-date {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
padding: 0 .5rem;
|
||||||
|
width: 100%;
|
||||||
|
height: 2.25rem;
|
||||||
|
color: var(--text);
|
||||||
|
transition: all $transition;
|
||||||
|
|
||||||
|
&:first-child {
|
||||||
|
border-radius: $radius $radius 0 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background: var(--grey-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.text {
|
||||||
|
width: 100%;
|
||||||
|
font-size: .85rem;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
padding-right: .25rem;
|
||||||
|
|
||||||
|
.weekday {
|
||||||
|
color: var(--text-light);
|
||||||
|
text-transform: capitalize;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
width: 2rem;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.datepicker__close-button {
|
||||||
|
margin: 1rem;
|
||||||
|
width: calc(100% - 2rem);
|
||||||
|
}
|
||||||
|
|
||||||
|
:deep(.flatpickr-calendar) {
|
||||||
|
margin: 0 auto 8px;
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
<vue-easymde
|
<vue-easymde
|
||||||
:configs="config"
|
:configs="config"
|
||||||
@change="bubble"
|
@change="() => bubble()"
|
||||||
@update:modelValue="handleInput"
|
@update:modelValue="handleInput"
|
||||||
class="content"
|
class="content"
|
||||||
v-if="isEditActive"
|
v-if="isEditActive"
|
||||||
|
@ -16,23 +16,42 @@
|
||||||
<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
|
<p class="has-text-centered has-text-grey is-italic my-5" v-if="showPreviewText">
|
||||||
{{ emptyText }}
|
{{ emptyText }}
|
||||||
<template v-if="isEditEnabled">
|
<template v-if="isEditEnabled">
|
||||||
<a @click="toggleEdit" class="d-print-none">{{ $t('input.editor.edit') }}</a>.
|
<ButtonLink
|
||||||
|
@click="toggleEdit"
|
||||||
|
v-shortcut="editShortcut"
|
||||||
|
class="d-print-none">
|
||||||
|
{{ $t('input.editor.edit') }}
|
||||||
|
</ButtonLink>.
|
||||||
</template>
|
</template>
|
||||||
</p>
|
</p>
|
||||||
|
|
||||||
<ul class="actions d-print-none" v-if="bottomActions.length > 0">
|
<ul class="actions d-print-none" v-if="bottomActions.length > 0">
|
||||||
<li v-if="isEditEnabled && !showPreviewText && showSave">
|
<li v-if="isEditEnabled && !showPreviewText && showSave">
|
||||||
<a v-if="showEditButton" @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
|
<BaseButton
|
||||||
<a v-else-if="isEditActive" @click="toggleEdit" class="done-edit">{{ $t('misc.save') }}</a>
|
v-if="showEditButton"
|
||||||
|
@click="toggleEdit"
|
||||||
|
v-shortcut="editShortcut">
|
||||||
|
{{ $t('input.editor.edit') }}
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton
|
||||||
|
v-else-if="isEditActive"
|
||||||
|
@click="toggleEdit"
|
||||||
|
class="done-edit">
|
||||||
|
{{ $t('misc.save') }}
|
||||||
|
</BaseButton>
|
||||||
</li>
|
</li>
|
||||||
<li v-for="(action, k) in bottomActions" :key="k">
|
<li v-for="(action, k) in bottomActions" :key="k">
|
||||||
<a @click="action.action">{{ action.title }}</a>
|
<BaseButton @click="action.action">{{ action.title }}</BaseButton>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<template v-else-if="isEditEnabled && showSave">
|
<template v-else-if="isEditEnabled && showSave">
|
||||||
<ul v-if="showEditButton" class="actions d-print-none">
|
<ul v-if="showEditButton" class="actions d-print-none">
|
||||||
<li>
|
<li>
|
||||||
<a @click="toggleEdit">{{ $t('input.editor.edit') }}</a>
|
<BaseButton
|
||||||
|
@click="toggleEdit"
|
||||||
|
v-shortcut="editShortcut">
|
||||||
|
{{ $t('input.editor.edit') }}
|
||||||
|
</BaseButton>
|
||||||
</li>
|
</li>
|
||||||
</ul>
|
</ul>
|
||||||
<x-button
|
<x-button
|
||||||
|
@ -47,271 +66,246 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import {defineComponent} from 'vue'
|
import {computed, nextTick, onMounted, ref, toRefs, watch} from 'vue'
|
||||||
|
|
||||||
import VueEasymde from './vue-easymde.vue'
|
import VueEasymde from './vue-easymde.vue'
|
||||||
import {marked} from 'marked'
|
import {marked} from 'marked'
|
||||||
import DOMPurify from 'dompurify'
|
import DOMPurify from 'dompurify'
|
||||||
import hljs from 'highlight.js/lib/common'
|
|
||||||
|
|
||||||
import {createEasyMDEConfig} from './editorConfig'
|
import {createEasyMDEConfig} from './editorConfig'
|
||||||
|
|
||||||
import AttachmentModel from '../../models/attachment'
|
import AttachmentModel from '@/models/attachment'
|
||||||
import AttachmentService from '../../services/attachment'
|
import AttachmentService from '@/services/attachment'
|
||||||
import {findCheckboxesInText} from '../../helpers/checklistFromText'
|
|
||||||
|
import {setupMarkdownRenderer} from '@/helpers/markdownRenderer'
|
||||||
|
import {findCheckboxesInText} from '@/helpers/checklistFromText'
|
||||||
import {createRandomID} from '@/helpers/randomId'
|
import {createRandomID} from '@/helpers/randomId'
|
||||||
|
|
||||||
export default defineComponent({
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
name: 'editor',
|
import ButtonLink from '@/components/misc/ButtonLink.vue'
|
||||||
components: {
|
import type { IAttachment } from '@/modelTypes/IAttachment'
|
||||||
VueEasymde,
|
import type { ITask } from '@/modelTypes/ITask'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
modelValue: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
},
|
},
|
||||||
props: {
|
placeholder: {
|
||||||
modelValue: {
|
type: String,
|
||||||
type: String,
|
default: '',
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
uploadEnabled: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
uploadCallback: {
|
|
||||||
type: Function,
|
|
||||||
},
|
|
||||||
hasPreview: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
previewIsDefault: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
isEditEnabled: {
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
bottomActions: {
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
emptyText: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
showSave: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
emits: ['update:modelValue', 'change'],
|
uploadEnabled: {
|
||||||
computed: {
|
type: Boolean,
|
||||||
showPreviewText() {
|
default: false,
|
||||||
return this.isPreviewActive && this.text === '' && this.emptyText !== ''
|
|
||||||
},
|
|
||||||
showEditButton() {
|
|
||||||
return !this.isEditActive && this.text !== ''
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
data() {
|
uploadCallback: {
|
||||||
return {
|
type: Function,
|
||||||
text: '',
|
|
||||||
changeTimeout: null,
|
|
||||||
isEditActive: false,
|
|
||||||
isPreviewActive: true,
|
|
||||||
|
|
||||||
preview: '',
|
|
||||||
attachmentService: null,
|
|
||||||
loadedAttachments: {},
|
|
||||||
config: createEasyMDEConfig({
|
|
||||||
placeholder: this.placeholder,
|
|
||||||
uploadImage: this.uploadEnabled,
|
|
||||||
imageUploadFunction: this.uploadCallback,
|
|
||||||
}),
|
|
||||||
checkboxId: createRandomID(),
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
watch: {
|
hasPreview: {
|
||||||
modelValue(modelValue) {
|
type: Boolean,
|
||||||
this.text = modelValue
|
default: true,
|
||||||
this.$nextTick(this.renderPreview)
|
|
||||||
},
|
|
||||||
text(newVal, oldVal) {
|
|
||||||
// Only bubble the new value if it actually changed, but not if the component just got mounted and the text changed from the outside.
|
|
||||||
if (oldVal === '' && this.text === this.modelValue) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.bubble()
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
mounted() {
|
previewIsDefault: {
|
||||||
if (this.modelValue !== '') {
|
type: Boolean,
|
||||||
this.text = this.modelValue
|
default: true,
|
||||||
}
|
|
||||||
|
|
||||||
if (this.previewIsDefault && this.hasPreview) {
|
|
||||||
this.$nextTick(this.renderPreview)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.isPreviewActive = false
|
|
||||||
this.isEditActive = true
|
|
||||||
},
|
},
|
||||||
methods: {
|
isEditEnabled: {
|
||||||
// This gets triggered when only pasting content into the editor.
|
default: true,
|
||||||
// A change event would not get generated by that, an input event does.
|
},
|
||||||
// Therefore, we're using this handler to catch paste events.
|
bottomActions: {
|
||||||
// But because this also gets triggered when typing into the editor, we give
|
type: Array,
|
||||||
// it a higher timeout to make the timouts cancel each other in that case so
|
default: () => [],
|
||||||
// that in the end, only one change event is triggered to the outside per change.
|
},
|
||||||
handleInput(val) {
|
emptyText: {
|
||||||
// Don't bubble if the text is up to date
|
type: String,
|
||||||
if (val === this.text) {
|
default: '',
|
||||||
return
|
},
|
||||||
}
|
showSave: {
|
||||||
|
type: Boolean,
|
||||||
this.text = val
|
default: false,
|
||||||
this.bubble(1000)
|
},
|
||||||
},
|
// If a key is passed the editor will go in "edit" mode when the key is pressed.
|
||||||
bubble(timeout = 500) {
|
// Disabled if an empty string is passed.
|
||||||
if (this.changeTimeout !== null) {
|
editShortcut: {
|
||||||
clearTimeout(this.changeTimeout)
|
type: String,
|
||||||
}
|
default: '',
|
||||||
|
|
||||||
this.changeTimeout = setTimeout(() => {
|
|
||||||
this.$emit('update:modelValue', this.text)
|
|
||||||
this.$emit('change', this.text)
|
|
||||||
}, timeout)
|
|
||||||
},
|
|
||||||
replaceAt(str, index, replacement) {
|
|
||||||
return str.substr(0, index) + replacement + str.substr(index + replacement.length)
|
|
||||||
},
|
|
||||||
findNthIndex(str, n) {
|
|
||||||
const checkboxes = findCheckboxesInText(str)
|
|
||||||
return checkboxes[n]
|
|
||||||
},
|
|
||||||
renderPreview() {
|
|
||||||
const renderer = new marked.Renderer()
|
|
||||||
const linkRenderer = renderer.link
|
|
||||||
|
|
||||||
let checkboxNum = -1
|
|
||||||
marked.use({
|
|
||||||
renderer: {
|
|
||||||
image: (src, title, text) => {
|
|
||||||
|
|
||||||
title = title ? ` title="${title}` : ''
|
|
||||||
|
|
||||||
// If the url starts with the api url, the image is likely an attachment and
|
|
||||||
// we'll need to download and parse it properly.
|
|
||||||
if (src.substr(0, window.API_URL.length + 7) === `${window.API_URL}/tasks/`) {
|
|
||||||
return `<img data-src="${src}" alt="${text}" ${title} class="attachment-image"/>`
|
|
||||||
}
|
|
||||||
|
|
||||||
return `<img src="${src}" alt="${text}" ${title}/>`
|
|
||||||
},
|
|
||||||
checkbox: (checked) => {
|
|
||||||
if (checked) {
|
|
||||||
checked = ' checked="checked"'
|
|
||||||
}
|
|
||||||
|
|
||||||
checkboxNum++
|
|
||||||
return `<input type="checkbox" data-checkbox-num="${checkboxNum}" ${checked} class="text-checkbox-${this.checkboxId}"/>`
|
|
||||||
},
|
|
||||||
link: (href, title, text) => {
|
|
||||||
const isLocal = href.startsWith(`${location.protocol}//${location.hostname}`)
|
|
||||||
const html = linkRenderer.call(renderer, href, title, text)
|
|
||||||
return isLocal ? html : html.replace(/^<a /, '<a target="_blank" rel="noreferrer noopener nofollow" ')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
highlight: function (code, language) {
|
|
||||||
const validLanguage = hljs.getLanguage(language) ? language : 'plaintext'
|
|
||||||
return hljs.highlight(code, {language: validLanguage}).value
|
|
||||||
},
|
|
||||||
})
|
|
||||||
|
|
||||||
this.preview = DOMPurify.sanitize(marked(this.text), {ADD_ATTR: ['target']})
|
|
||||||
|
|
||||||
// Since the render function is synchronous, we can't do async http requests in it.
|
|
||||||
// Therefore, we can't resolve the blob url at (markdown) compile time.
|
|
||||||
// To work around this, we modify the url after rendering it in the vue component.
|
|
||||||
// We're doing the whole thing in the next tick to ensure the image elements are available in the
|
|
||||||
// dom tree. If we're calling this right after setting this.preview it could be the images were
|
|
||||||
// not already made available.
|
|
||||||
// Some docs at https://stackoverflow.com/q/62865160/10924593
|
|
||||||
this.$nextTick(async () => {
|
|
||||||
const attachmentImage = document.getElementsByClassName('attachment-image')
|
|
||||||
if (attachmentImage) {
|
|
||||||
for (const img of attachmentImage) {
|
|
||||||
// The url is something like /tasks/<id>/attachments/<id>
|
|
||||||
const parts = img.dataset.src.substr(window.API_URL.length + 1).split('/')
|
|
||||||
const taskId = parseInt(parts[1])
|
|
||||||
const attachmentId = parseInt(parts[3])
|
|
||||||
const cacheKey = `${taskId}-${attachmentId}`
|
|
||||||
|
|
||||||
if (typeof this.loadedAttachments[cacheKey] !== 'undefined') {
|
|
||||||
img.src = this.loadedAttachments[cacheKey]
|
|
||||||
continue
|
|
||||||
}
|
|
||||||
|
|
||||||
const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
|
|
||||||
|
|
||||||
if (this.attachmentService === null) {
|
|
||||||
this.attachmentService = new AttachmentService()
|
|
||||||
}
|
|
||||||
|
|
||||||
const url = await this.attachmentService.getBlobUrl(attachment)
|
|
||||||
img.src = url
|
|
||||||
this.loadedAttachments[cacheKey] = url
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const textCheckbox = document.getElementsByClassName(`text-checkbox-${this.checkboxId}`)
|
|
||||||
if (textCheckbox) {
|
|
||||||
for (const check of textCheckbox) {
|
|
||||||
check.removeEventListener('change', this.handleCheckboxClick)
|
|
||||||
check.addEventListener('change', this.handleCheckboxClick)
|
|
||||||
check.parentElement.classList.add('has-checkbox')
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
},
|
|
||||||
handleCheckboxClick(e) {
|
|
||||||
// Find the original markdown checkbox this is targeting
|
|
||||||
const checked = e.target.checked
|
|
||||||
const numMarkdownCheck = parseInt(e.target.dataset.checkboxNum)
|
|
||||||
|
|
||||||
const index = this.findNthIndex(this.text, numMarkdownCheck)
|
|
||||||
if (index < 0 || typeof index === 'undefined') {
|
|
||||||
console.debug('no index found')
|
|
||||||
return
|
|
||||||
}
|
|
||||||
console.debug(index, this.text.substr(index, 9))
|
|
||||||
|
|
||||||
const listPrefix = this.text.substr(index, 1)
|
|
||||||
|
|
||||||
if (checked) {
|
|
||||||
this.text = this.replaceAt(this.text, index, `${listPrefix} [x] `)
|
|
||||||
} else {
|
|
||||||
this.text = this.replaceAt(this.text, index, `${listPrefix} [ ] `)
|
|
||||||
}
|
|
||||||
this.bubble()
|
|
||||||
this.renderPreview()
|
|
||||||
},
|
|
||||||
toggleEdit() {
|
|
||||||
if (this.isEditActive) {
|
|
||||||
this.isPreviewActive = true
|
|
||||||
this.isEditActive = false
|
|
||||||
this.renderPreview()
|
|
||||||
this.bubble(0) // save instantly
|
|
||||||
} else {
|
|
||||||
this.isPreviewActive = false
|
|
||||||
this.isEditActive = true
|
|
||||||
}
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits(['update:modelValue'])
|
||||||
|
|
||||||
|
const text = ref('')
|
||||||
|
const changeTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
|
||||||
|
const isEditActive = ref(false)
|
||||||
|
const isPreviewActive = ref(true)
|
||||||
|
|
||||||
|
const showPreviewText = computed(() => isPreviewActive.value && text.value === '' && props.emptyText !== '')
|
||||||
|
const showEditButton = computed(() => !isEditActive.value && text.value !== '')
|
||||||
|
|
||||||
|
const preview = ref('')
|
||||||
|
const attachmentService = new AttachmentService()
|
||||||
|
|
||||||
|
type CacheKey = `${ITask['id']}-${IAttachment['id']}`
|
||||||
|
const loadedAttachments = ref<{[key: CacheKey]: string}>({})
|
||||||
|
const config = ref(createEasyMDEConfig({
|
||||||
|
placeholder: props.placeholder,
|
||||||
|
uploadImage: props.uploadEnabled,
|
||||||
|
imageUploadFunction: props.uploadCallback,
|
||||||
|
}))
|
||||||
|
|
||||||
|
const checkboxId = ref(createRandomID())
|
||||||
|
|
||||||
|
const {modelValue} = toRefs(props)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
modelValue,
|
||||||
|
async (value) => {
|
||||||
|
text.value = value
|
||||||
|
await nextTick()
|
||||||
|
renderPreview()
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
text,
|
||||||
|
(newVal, oldVal) => {
|
||||||
|
// Only bubble the new value if it actually changed, but not if the component just got mounted and the text changed from the outside.
|
||||||
|
if (oldVal === '' && text.value === modelValue.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
bubble()
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
|
||||||
|
onMounted(() => {
|
||||||
|
if (modelValue.value !== '') {
|
||||||
|
text.value = modelValue.value
|
||||||
|
}
|
||||||
|
|
||||||
|
if (props.previewIsDefault && props.hasPreview) {
|
||||||
|
nextTick(() => renderPreview())
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
isPreviewActive.value = false
|
||||||
|
isEditActive.value = true
|
||||||
|
})
|
||||||
|
|
||||||
|
|
||||||
|
// This gets triggered when only pasting content into the editor.
|
||||||
|
// A change event would not get generated by that, an input event does.
|
||||||
|
// Therefore, we're using this handler to catch paste events.
|
||||||
|
// But because this also gets triggered when typing into the editor, we give
|
||||||
|
// it a higher timeout to make the timouts cancel each other in that case so
|
||||||
|
// that in the end, only one change event is triggered to the outside per change.
|
||||||
|
function handleInput(val: string) {
|
||||||
|
// Don't bubble if the text is up to date
|
||||||
|
if (val === text.value) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
text.value = val
|
||||||
|
bubble(1000)
|
||||||
|
}
|
||||||
|
|
||||||
|
function bubble(timeout = 500) {
|
||||||
|
if (changeTimeout.value !== null) {
|
||||||
|
clearTimeout(changeTimeout.value)
|
||||||
|
}
|
||||||
|
|
||||||
|
changeTimeout.value = setTimeout(() => {
|
||||||
|
emit('update:modelValue', text.value)
|
||||||
|
}, timeout)
|
||||||
|
}
|
||||||
|
|
||||||
|
function replaceAt(str: string, index: number, replacement: string) {
|
||||||
|
return str.slice(0, index) + replacement + str.slice(index + replacement.length)
|
||||||
|
}
|
||||||
|
|
||||||
|
function findNthIndex(str: string, n: number) {
|
||||||
|
const checkboxes = findCheckboxesInText(str)
|
||||||
|
return checkboxes[n]
|
||||||
|
}
|
||||||
|
|
||||||
|
function renderPreview() {
|
||||||
|
setupMarkdownRenderer(checkboxId.value)
|
||||||
|
|
||||||
|
preview.value = DOMPurify.sanitize(marked(text.value), {ADD_ATTR: ['target']})
|
||||||
|
|
||||||
|
// Since the render function is synchronous, we can't do async http requests in it.
|
||||||
|
// Therefore, we can't resolve the blob url at (markdown) compile time.
|
||||||
|
// To work around this, we modify the url after rendering it in the vue component.
|
||||||
|
// We're doing the whole thing in the next tick to ensure the image elements are available in the
|
||||||
|
// dom tree. If we're calling this right after setting this.preview it could be the images were
|
||||||
|
// not already made available.
|
||||||
|
// Some docs at https://stackoverflow.com/q/62865160/10924593
|
||||||
|
nextTick().then(async () => {
|
||||||
|
const attachmentImage = document.querySelectorAll<HTMLImageElement>('.attachment-image')
|
||||||
|
if (attachmentImage) {
|
||||||
|
Array.from(attachmentImage).forEach(async (img) => {
|
||||||
|
// The url is something like /tasks/<id>/attachments/<id>
|
||||||
|
const parts = img.dataset.src?.slice(window.API_URL.length + 1).split('/')
|
||||||
|
const taskId = Number(parts[1])
|
||||||
|
const attachmentId = Number(parts[3])
|
||||||
|
const cacheKey: CacheKey = `${taskId}-${attachmentId}`
|
||||||
|
|
||||||
|
if (typeof loadedAttachments.value[cacheKey] !== 'undefined') {
|
||||||
|
img.src = loadedAttachments.value[cacheKey]
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const attachment = new AttachmentModel({taskId: taskId, id: attachmentId})
|
||||||
|
|
||||||
|
const url = await attachmentService.getBlobUrl(attachment)
|
||||||
|
img.src = url
|
||||||
|
loadedAttachments.value[cacheKey] = url
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
const textCheckbox = document.querySelectorAll<HTMLInputElement>(`.text-checkbox-${checkboxId.value}`)
|
||||||
|
if (textCheckbox) {
|
||||||
|
Array.from(textCheckbox).forEach(check => {
|
||||||
|
check.removeEventListener('change', handleCheckboxClick)
|
||||||
|
check.addEventListener('change', handleCheckboxClick)
|
||||||
|
check.parentElement?.classList.add('has-checkbox')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleCheckboxClick(e: Event) {
|
||||||
|
// Find the original markdown checkbox this is targeting
|
||||||
|
const checked = (e.target as HTMLInputElement).checked
|
||||||
|
const numMarkdownCheck = Number((e.target as HTMLInputElement).dataset.checkboxNum)
|
||||||
|
|
||||||
|
const index = findNthIndex(text.value, numMarkdownCheck)
|
||||||
|
if (index < 0 || typeof index === 'undefined') {
|
||||||
|
console.debug('no index found')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const listPrefix = text.value.substring(index, index + 1)
|
||||||
|
|
||||||
|
console.debug({index, listPrefix, checked, text: text.value})
|
||||||
|
|
||||||
|
text.value = replaceAt(text.value, index, `${listPrefix} ${checked ? '[x]' : '[ ]'} `)
|
||||||
|
bubble()
|
||||||
|
renderPreview()
|
||||||
|
}
|
||||||
|
|
||||||
|
function toggleEdit() {
|
||||||
|
if (isEditActive.value) {
|
||||||
|
isPreviewActive.value = true
|
||||||
|
isEditActive.value = false
|
||||||
|
renderPreview()
|
||||||
|
bubble(0) // save instantly
|
||||||
|
} else {
|
||||||
|
isPreviewActive.value = false
|
||||||
|
isEditActive.value = true
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
|
|
|
@ -9,6 +9,7 @@ export function createEasyMDEConfig({ placeholder, uploadImage, imageUploadFunct
|
||||||
uploadImage,
|
uploadImage,
|
||||||
imageUploadFunction,
|
imageUploadFunction,
|
||||||
minHeight: '150px',
|
minHeight: '150px',
|
||||||
|
sideBySideFullscreen: false,
|
||||||
toolbar: [
|
toolbar: [
|
||||||
{
|
{
|
||||||
name: 'heading-1',
|
name: 'heading-1',
|
||||||
|
|
|
@ -4,8 +4,9 @@
|
||||||
:checked="checked"
|
:checked="checked"
|
||||||
:disabled="disabled || undefined"
|
:disabled="disabled || undefined"
|
||||||
:id="checkBoxId"
|
:id="checkBoxId"
|
||||||
@change="(event) => updateData(event.target.checked)"
|
@change="(event: Event) => updateData((event.target as HTMLInputElement).checked)"
|
||||||
type="checkbox"/>
|
type="checkbox"
|
||||||
|
/>
|
||||||
<label :for="checkBoxId" class="check">
|
<label :for="checkBoxId" class="check">
|
||||||
<svg height="18px" viewBox="0 0 18 18" width="18px">
|
<svg height="18px" viewBox="0 0 18 18" width="18px">
|
||||||
<path
|
<path
|
||||||
|
@ -19,47 +20,42 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import {defineComponent} from 'vue'
|
import {ref, toRef, watch} from 'vue'
|
||||||
|
|
||||||
import {createRandomID} from '@/helpers/randomId'
|
import {createRandomID} from '@/helpers/randomId'
|
||||||
|
|
||||||
export default defineComponent({
|
const checked = ref(false)
|
||||||
name: 'fancycheckbox',
|
const checkBoxId = `fancycheckbox_${createRandomID()}`
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
checked: false,
|
|
||||||
checkBoxId: `fancycheckbox_${createRandomID()}`,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
modelValue: {
|
|
||||||
required: false,
|
|
||||||
},
|
|
||||||
disabled: {
|
|
||||||
type: Boolean,
|
|
||||||
required: false,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
emits: ['update:modelValue', 'change'],
|
|
||||||
watch: {
|
|
||||||
modelValue: {
|
|
||||||
handler(modelValue) {
|
|
||||||
this.checked = modelValue
|
|
||||||
|
|
||||||
},
|
const props = defineProps({
|
||||||
immediate: true,
|
modelValue: {
|
||||||
},
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
},
|
},
|
||||||
methods: {
|
disabled: {
|
||||||
updateData(checked) {
|
type: Boolean,
|
||||||
this.checked = checked
|
required: false,
|
||||||
this.$emit('update:modelValue', checked)
|
default: false,
|
||||||
this.$emit('change', checked)
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
const emit = defineEmits(['update:modelValue', 'change'])
|
||||||
|
|
||||||
|
const modelValue = toRef(props, 'modelValue')
|
||||||
|
|
||||||
|
watch(
|
||||||
|
modelValue,
|
||||||
|
newValue => {
|
||||||
|
checked.value = newValue
|
||||||
|
},
|
||||||
|
{immediate: true},
|
||||||
|
)
|
||||||
|
|
||||||
|
function updateData(newChecked: boolean) {
|
||||||
|
checked.value = newChecked
|
||||||
|
emit('update:modelValue', newChecked)
|
||||||
|
emit('change', newChecked)
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
|
@ -9,13 +9,14 @@
|
||||||
<div class="control" :class="{'is-loading': loading || localLoading}">
|
<div class="control" :class="{'is-loading': loading || localLoading}">
|
||||||
<div
|
<div
|
||||||
class="input-wrapper input"
|
class="input-wrapper input"
|
||||||
:class="{'has-multiple': hasMultiple}">
|
:class="{'has-multiple': hasMultiple}"
|
||||||
|
>
|
||||||
<template v-if="Array.isArray(internalValue)">
|
<template v-if="Array.isArray(internalValue)">
|
||||||
<template v-for="(item, key) in internalValue">
|
<template v-for="(item, key) in internalValue">
|
||||||
<slot name="tag" :item="item">
|
<slot name="tag" :item="item">
|
||||||
<span :key="`item${key}`" class="tag ml-2 mt-2">
|
<span :key="`item${key}`" class="tag ml-2 mt-2">
|
||||||
{{ label !== '' ? item[label] : item }}
|
{{ label !== '' ? item[label] : item }}
|
||||||
<a @click="() => remove(item)" class="delete is-small"></a>
|
<BaseButton @click="() => remove(item)" class="delete is-small"></BaseButton>
|
||||||
</span>
|
</span>
|
||||||
</slot>
|
</slot>
|
||||||
</template>
|
</template>
|
||||||
|
@ -35,15 +36,15 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<transition name="fade">
|
<CustomTransition name="fade">
|
||||||
<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
|
<div class="search-results" :class="{'search-results-inline': inline}" v-if="searchResultsVisible">
|
||||||
<button
|
<BaseButton
|
||||||
class="is-fullwidth"
|
class="search-result-button is-fullwidth"
|
||||||
v-for="(data, key) in filteredSearchResults"
|
v-for="(data, index) in filteredSearchResults"
|
||||||
:key="key"
|
:key="index"
|
||||||
:ref="`result-${key}`"
|
:ref="(el) => setResult(el, index)"
|
||||||
@keydown.up.prevent="() => preSelect(key - 1)"
|
@keydown.up.prevent="() => preSelect(index - 1)"
|
||||||
@keydown.down.prevent="() => preSelect(key + 1)"
|
@keydown.down.prevent="() => preSelect(index + 1)"
|
||||||
@click.prevent.stop="() => select(data)"
|
@click.prevent.stop="() => select(data)"
|
||||||
>
|
>
|
||||||
<span>
|
<span>
|
||||||
|
@ -54,12 +55,12 @@
|
||||||
<span class="hint-text">
|
<span class="hint-text">
|
||||||
{{ selectPlaceholder }}
|
{{ selectPlaceholder }}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</BaseButton>
|
||||||
|
|
||||||
<button
|
<BaseButton
|
||||||
v-if="creatableAvailable"
|
v-if="creatableAvailable"
|
||||||
class="is-fullwidth"
|
class="search-result-button is-fullwidth"
|
||||||
:ref="`result-${filteredSearchResults.length}`"
|
:ref="(el) => setResult(el, filteredSearchResults.length)"
|
||||||
@keydown.up.prevent="() => preSelect(filteredSearchResults.length - 1)"
|
@keydown.up.prevent="() => preSelect(filteredSearchResults.length - 1)"
|
||||||
@keydown.down.prevent="() => preSelect(filteredSearchResults.length + 1)"
|
@keydown.down.prevent="() => preSelect(filteredSearchResults.length + 1)"
|
||||||
@keyup.enter.prevent="create"
|
@keyup.enter.prevent="create"
|
||||||
|
@ -75,299 +76,355 @@
|
||||||
<span class="hint-text">
|
<span class="hint-text">
|
||||||
{{ createPlaceholder }}
|
{{ createPlaceholder }}
|
||||||
</span>
|
</span>
|
||||||
</button>
|
</BaseButton>
|
||||||
</div>
|
</div>
|
||||||
</transition>
|
</CustomTransition>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts">
|
<script setup lang="ts">
|
||||||
import {defineComponent} from 'vue'
|
import {computed, onBeforeUnmount, onMounted, ref, toRefs, watch, type ComponentPublicInstance, type PropType} from 'vue'
|
||||||
import {i18n} from '@/i18n'
|
import {useI18n} from 'vue-i18n'
|
||||||
|
|
||||||
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
import {closeWhenClickedOutside} from '@/helpers/closeWhenClickedOutside'
|
||||||
|
|
||||||
export default defineComponent({
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
name: 'multiselect',
|
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||||
data() {
|
|
||||||
return {
|
|
||||||
query: '',
|
|
||||||
searchTimeout: null,
|
|
||||||
localLoading: false,
|
|
||||||
showSearchResults: false,
|
|
||||||
internalValue: null,
|
|
||||||
}
|
|
||||||
},
|
|
||||||
props: {
|
|
||||||
// When true, shows a loading spinner
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default() {
|
|
||||||
return false
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// The placeholder of the search input
|
|
||||||
placeholder: {
|
|
||||||
type: String,
|
|
||||||
default() {
|
|
||||||
return ''
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// The search results where the @search listener needs to put the results into
|
|
||||||
searchResults: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// The name of the property of the searched object to show the user.
|
|
||||||
// If empty the component will show all raw data of an entry.
|
|
||||||
label: {
|
|
||||||
type: String,
|
|
||||||
default() {
|
|
||||||
return ''
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// The object with the value, updated every time an entry is selected.
|
|
||||||
modelValue: {
|
|
||||||
default() {
|
|
||||||
return null
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// If true, will provide an "add this as a new value" entry which fires an @create event when clicking on it.
|
|
||||||
creatable: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
// The text shown next to the new value option.
|
|
||||||
createPlaceholder: {
|
|
||||||
type: String,
|
|
||||||
default() {
|
|
||||||
return i18n.global.t('input.multiselect.createPlaceholder')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// The text shown next to an option.
|
|
||||||
selectPlaceholder: {
|
|
||||||
type: String,
|
|
||||||
default() {
|
|
||||||
return i18n.global.t('input.multiselect.selectPlaceholder')
|
|
||||||
},
|
|
||||||
},
|
|
||||||
// If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.
|
|
||||||
multiple: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
// If true, displays the search results inline instead of using a dropdown.
|
|
||||||
inline: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
// If true, shows search results when no query is specified.
|
|
||||||
showEmpty: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
// The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke.
|
|
||||||
searchDelay: {
|
|
||||||
type: Number,
|
|
||||||
default() {
|
|
||||||
return 200
|
|
||||||
},
|
|
||||||
},
|
|
||||||
closeAfterSelect: {
|
|
||||||
type: Boolean,
|
|
||||||
default: true,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
|
function elementInResults(elem: string | any, label: string, query: string): boolean {
|
||||||
|
// Don't make create available if we have an exact match in our search results.
|
||||||
|
if (label !== '') {
|
||||||
|
return elem[label] === query
|
||||||
|
}
|
||||||
|
|
||||||
|
return elem === query
|
||||||
|
}
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
/**
|
/**
|
||||||
* Available events:
|
* When true, shows a loading spinner
|
||||||
* @search: Triggered every time the search query input changes
|
|
||||||
* @select: Triggered every time an option from the search results is selected. Also triggers a change in v-model.
|
|
||||||
* @create: If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
|
|
||||||
* @remove: If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
|
|
||||||
*/
|
*/
|
||||||
emits: ['update:modelValue', 'search', 'select', 'create', 'remove'],
|
loading: {
|
||||||
|
type: Boolean,
|
||||||
mounted() {
|
default: false,
|
||||||
document.addEventListener('click', this.hideSearchResultsHandler)
|
|
||||||
},
|
},
|
||||||
beforeUnmount() {
|
/**
|
||||||
document.removeEventListener('click', this.hideSearchResultsHandler)
|
* The placeholder of the search input
|
||||||
|
*/
|
||||||
|
placeholder: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
},
|
},
|
||||||
watch: {
|
/**
|
||||||
modelValue: {
|
* The search results where the @search listener needs to put the results into
|
||||||
handler(value) {
|
*/
|
||||||
this.setSelectedObject(value)
|
searchResults: {
|
||||||
},
|
type: Array as PropType<{[id: string]: any}>,
|
||||||
immediate: true,
|
default: () => [],
|
||||||
deep: true,
|
},
|
||||||
|
/**
|
||||||
|
* The name of the property of the searched object to show the user.
|
||||||
|
* If empty the component will show all raw data of an entry.
|
||||||
|
*/
|
||||||
|
label: {
|
||||||
|
type: String,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* The object with the value, updated every time an entry is selected.
|
||||||
|
*/
|
||||||
|
modelValue: {
|
||||||
|
type: [Object] as PropType<{[key: string]: any}>,
|
||||||
|
default: null,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* If true, will provide an "add this as a new value" entry which fires an @create event when clicking on it.
|
||||||
|
*/
|
||||||
|
creatable: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
/**
|
||||||
|
* The text shown next to the new value option.
|
||||||
|
*/
|
||||||
|
createPlaceholder: {
|
||||||
|
type: String,
|
||||||
|
default() {
|
||||||
|
const {t} = useI18n({useScope: 'global'})
|
||||||
|
return t('input.multiselect.createPlaceholder')
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
computed: {
|
/**
|
||||||
searchResultsVisible() {
|
* The text shown next to an option.
|
||||||
if (this.query === '' && !this.showEmpty) {
|
*/
|
||||||
return false
|
selectPlaceholder: {
|
||||||
}
|
type: String,
|
||||||
|
default() {
|
||||||
return this.showSearchResults && (
|
const {t} = useI18n({useScope: 'global'})
|
||||||
(this.filteredSearchResults.length > 0) ||
|
return t('input.multiselect.selectPlaceholder')
|
||||||
(this.creatable && this.query !== '')
|
|
||||||
)
|
|
||||||
},
|
|
||||||
creatableAvailable() {
|
|
||||||
return this.creatable && this.query !== '' && !this.filteredSearchResults.some(elem => {
|
|
||||||
// Don't make create available if we have an exact match in our search results.
|
|
||||||
if (this.label !== '') {
|
|
||||||
return elem[this.label] === this.query
|
|
||||||
}
|
|
||||||
|
|
||||||
return elem === this.query
|
|
||||||
})
|
|
||||||
},
|
|
||||||
filteredSearchResults() {
|
|
||||||
if (this.multiple && this.internalValue !== null && Array.isArray(this.internalValue)) {
|
|
||||||
return this.searchResults.filter(item => !this.internalValue.some(e => e === item))
|
|
||||||
}
|
|
||||||
|
|
||||||
return this.searchResults
|
|
||||||
},
|
|
||||||
hasMultiple() {
|
|
||||||
return this.multiple && Array.isArray(this.internalValue) && this.internalValue.length > 0
|
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
methods: {
|
/**
|
||||||
// Searching will be triggered with a 200ms delay to avoid searching on every keyup event.
|
* If true, allows for selecting multiple items. v-model will be an array with all selected values in that case.
|
||||||
search() {
|
*/
|
||||||
|
multiple: {
|
||||||
// Updating the query with a binding does not work on mobile for some reason,
|
type: Boolean,
|
||||||
// getting the value manual does.
|
default: false,
|
||||||
this.query = this.$refs.searchInput.value
|
},
|
||||||
|
/**
|
||||||
if (this.searchTimeout !== null) {
|
* If true, displays the search results inline instead of using a dropdown.
|
||||||
clearTimeout(this.searchTimeout)
|
*/
|
||||||
this.searchTimeout = null
|
inline: {
|
||||||
}
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
this.localLoading = true
|
},
|
||||||
|
/**
|
||||||
this.searchTimeout = setTimeout(() => {
|
* If true, shows search results when no query is specified.
|
||||||
this.$emit('search', this.query)
|
*/
|
||||||
setTimeout(() => {
|
showEmpty: {
|
||||||
this.localLoading = false
|
type: Boolean,
|
||||||
}, 100) // The duration of the loading timeout of the services
|
default: true,
|
||||||
this.showSearchResults = true
|
},
|
||||||
}, this.searchDelay)
|
/**
|
||||||
},
|
* The delay in ms after which the search event will be fired. Used to avoid hitting the network on every keystroke.
|
||||||
hideSearchResultsHandler(e) {
|
*/
|
||||||
closeWhenClickedOutside(e, this.$refs.multiselectRoot, this.closeSearchResults)
|
searchDelay: {
|
||||||
},
|
type: Number,
|
||||||
closeSearchResults() {
|
default: 200,
|
||||||
this.showSearchResults = false
|
},
|
||||||
},
|
closeAfterSelect: {
|
||||||
handleFocus() {
|
type: Boolean,
|
||||||
// We need the timeout to avoid the hideSearchResultsHandler hiding the search results right after the input
|
default: true,
|
||||||
// is focused. That would lead to flickering pre-loaded search results and hiding them right after showing.
|
|
||||||
setTimeout(() => {
|
|
||||||
this.showSearchResults = true
|
|
||||||
}, 10)
|
|
||||||
},
|
|
||||||
select(object) {
|
|
||||||
if (this.multiple) {
|
|
||||||
if (this.internalValue === null) {
|
|
||||||
this.internalValue = []
|
|
||||||
}
|
|
||||||
|
|
||||||
this.internalValue.push(object)
|
|
||||||
} else {
|
|
||||||
this.internalValue = object
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$emit('update:modelValue', this.internalValue)
|
|
||||||
this.$emit('select', object)
|
|
||||||
this.setSelectedObject(object)
|
|
||||||
if (this.closeAfterSelect && this.filteredSearchResults.length > 0 && !this.creatableAvailable) {
|
|
||||||
this.closeSearchResults()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
setSelectedObject(object, resetOnly = false) {
|
|
||||||
this.internalValue = object
|
|
||||||
|
|
||||||
// We assume we're getting an array when multiple is enabled and can therefore leave the query
|
|
||||||
// value etc as it is
|
|
||||||
if (this.multiple) {
|
|
||||||
this.query = ''
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (object === null) {
|
|
||||||
this.query = ''
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (resetOnly) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.query = this.label !== '' ? object[this.label] : object
|
|
||||||
},
|
|
||||||
preSelect(index) {
|
|
||||||
if (index < 0) {
|
|
||||||
this.$refs.searchInput.focus()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const elems = this.$refs[`result-${index}`]
|
|
||||||
if (typeof elems === 'undefined' || elems.length === 0) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (Array.isArray(elems)) {
|
|
||||||
elems[0].focus()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
elems.focus()
|
|
||||||
},
|
|
||||||
create() {
|
|
||||||
if (this.query === '') {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$emit('create', this.query)
|
|
||||||
this.setSelectedObject(this.query, true)
|
|
||||||
this.closeSearchResults()
|
|
||||||
},
|
|
||||||
createOrSelectOnEnter() {
|
|
||||||
|
|
||||||
if (!this.creatableAvailable && this.searchResults.length === 1) {
|
|
||||||
this.select(this.searchResults[0])
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
if (!this.creatableAvailable) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.create()
|
|
||||||
},
|
|
||||||
remove(item) {
|
|
||||||
for (const ind in this.internalValue) {
|
|
||||||
if (this.internalValue[ind] === item) {
|
|
||||||
this.internalValue.splice(ind, 1)
|
|
||||||
break
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
this.$emit('update:modelValue', this.internalValue)
|
|
||||||
this.$emit('remove', item)
|
|
||||||
},
|
|
||||||
focus() {
|
|
||||||
this.$refs.searchInput.focus()
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const emit = defineEmits<{
|
||||||
|
(e: 'update:modelValue', value: null): void
|
||||||
|
/**
|
||||||
|
* Triggered every time the search query input changes
|
||||||
|
*/
|
||||||
|
(e: 'search', query: string): void
|
||||||
|
/**
|
||||||
|
* Triggered every time an option from the search results is selected. Also triggers a change in v-model.
|
||||||
|
*/
|
||||||
|
(e: 'select', value: {[key: string]: any}): void
|
||||||
|
/**
|
||||||
|
* If nothing or no exact match was found and `creatable` is true, this event is triggered with the current value of the search query.
|
||||||
|
*/
|
||||||
|
(e: 'create', query: string): void
|
||||||
|
/**
|
||||||
|
* If `multiple` is enabled, this will be fired every time an item is removed from the array of selected items.
|
||||||
|
*/
|
||||||
|
(e: 'remove', value: null): void
|
||||||
|
}>()
|
||||||
|
|
||||||
|
const query = ref<string | {[key: string]: any}>('')
|
||||||
|
const searchTimeout = ref<ReturnType<typeof setTimeout> | null>(null)
|
||||||
|
const localLoading = ref(false)
|
||||||
|
const showSearchResults = ref(false)
|
||||||
|
const internalValue = ref<string | {[key: string]: any} | any[] | null>(null)
|
||||||
|
|
||||||
|
onMounted(() => document.addEventListener('click', hideSearchResultsHandler))
|
||||||
|
onBeforeUnmount(() => document.removeEventListener('click', hideSearchResultsHandler))
|
||||||
|
|
||||||
|
const {modelValue, searchResults} = toRefs(props)
|
||||||
|
|
||||||
|
watch(
|
||||||
|
modelValue,
|
||||||
|
(value) => setSelectedObject(value),
|
||||||
|
{
|
||||||
|
immediate: true,
|
||||||
|
deep: true,
|
||||||
|
},
|
||||||
|
)
|
||||||
|
|
||||||
|
const searchResultsVisible = computed(() => {
|
||||||
|
if (query.value === '' && !props.showEmpty) {
|
||||||
|
return false
|
||||||
|
}
|
||||||
|
|
||||||
|
return showSearchResults.value && (
|
||||||
|
(filteredSearchResults.value.length > 0) ||
|
||||||
|
(props.creatable && query.value !== '')
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
const creatableAvailable = computed(() => {
|
||||||
|
const hasResult = filteredSearchResults.value.some((elem: any) => elementInResults(elem, props.label, query.value))
|
||||||
|
const hasQueryAlreadyAdded = Array.isArray(internalValue.value) && internalValue.value.some(elem => elementInResults(elem, props.label, query.value))
|
||||||
|
|
||||||
|
return props.creatable
|
||||||
|
&& query.value !== ''
|
||||||
|
&& !(hasResult || hasQueryAlreadyAdded)
|
||||||
|
})
|
||||||
|
|
||||||
|
const filteredSearchResults = computed(() => {
|
||||||
|
const currentInternal = internalValue.value
|
||||||
|
if (props.multiple && currentInternal !== null && Array.isArray(currentInternal)) {
|
||||||
|
return searchResults.value.filter((item: any) => !currentInternal.some(e => e === item))
|
||||||
|
}
|
||||||
|
|
||||||
|
return searchResults.value
|
||||||
|
})
|
||||||
|
|
||||||
|
const hasMultiple = computed(() => {
|
||||||
|
return props.multiple && Array.isArray(internalValue.value) && internalValue.value.length > 0
|
||||||
|
})
|
||||||
|
|
||||||
|
const searchInput = ref<HTMLInputElement | null>(null)
|
||||||
|
// Searching will be triggered with a 200ms delay to avoid searching on every keyup event.
|
||||||
|
function search() {
|
||||||
|
|
||||||
|
// Updating the query with a binding does not work on mobile for some reason,
|
||||||
|
// getting the value manual does.
|
||||||
|
query.value = searchInput.value?.value || ''
|
||||||
|
|
||||||
|
if (searchTimeout.value !== null) {
|
||||||
|
clearTimeout(searchTimeout.value)
|
||||||
|
searchTimeout.value = null
|
||||||
|
}
|
||||||
|
|
||||||
|
localLoading.value = true
|
||||||
|
|
||||||
|
searchTimeout.value = setTimeout(() => {
|
||||||
|
emit('search', query.value)
|
||||||
|
setTimeout(() => {
|
||||||
|
localLoading.value = false
|
||||||
|
}, 100) // The duration of the loading timeout of the services
|
||||||
|
showSearchResults.value = true
|
||||||
|
}, props.searchDelay)
|
||||||
|
}
|
||||||
|
|
||||||
|
const multiselectRoot = ref<HTMLElement | null>(null)
|
||||||
|
function hideSearchResultsHandler(e: MouseEvent) {
|
||||||
|
closeWhenClickedOutside(e, multiselectRoot.value, closeSearchResults)
|
||||||
|
}
|
||||||
|
|
||||||
|
function closeSearchResults() {
|
||||||
|
showSearchResults.value = false
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleFocus() {
|
||||||
|
// We need the timeout to avoid the hideSearchResultsHandler hiding the search results right after the input
|
||||||
|
// is focused. That would lead to flickering pre-loaded search results and hiding them right after showing.
|
||||||
|
setTimeout(() => {
|
||||||
|
showSearchResults.value = true
|
||||||
|
}, 10)
|
||||||
|
}
|
||||||
|
|
||||||
|
function select(object: {[key: string]: any}) {
|
||||||
|
if (props.multiple) {
|
||||||
|
if (internalValue.value === null) {
|
||||||
|
internalValue.value = []
|
||||||
|
}
|
||||||
|
|
||||||
|
(internalValue.value as any[]).push(object)
|
||||||
|
} else {
|
||||||
|
internalValue.value = object
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('update:modelValue', internalValue.value)
|
||||||
|
emit('select', object)
|
||||||
|
setSelectedObject(object)
|
||||||
|
if (props.closeAfterSelect && filteredSearchResults.value.length > 0 && !creatableAvailable.value) {
|
||||||
|
closeSearchResults()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setSelectedObject(object: string | {[id: string]: any} | null, resetOnly = false) {
|
||||||
|
internalValue.value = object
|
||||||
|
|
||||||
|
// We assume we're getting an array when multiple is enabled and can therefore leave the query
|
||||||
|
// value etc as it is
|
||||||
|
if (props.multiple) {
|
||||||
|
query.value = ''
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (object === null) {
|
||||||
|
query.value = ''
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (resetOnly) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
query.value = props.label !== '' ? object[props.label] : object
|
||||||
|
}
|
||||||
|
|
||||||
|
const results = ref<(Element | ComponentPublicInstance)[]>([])
|
||||||
|
function setResult(el: Element | ComponentPublicInstance | null, index: number) {
|
||||||
|
if (el === null) {
|
||||||
|
delete results.value[index]
|
||||||
|
} else {
|
||||||
|
results.value[index] = el
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function preSelect(index: number) {
|
||||||
|
if (index < 0) {
|
||||||
|
searchInput.value?.focus()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const elems = results.value[index]
|
||||||
|
if (typeof elems === 'undefined' || elems.length === 0) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (Array.isArray(elems)) {
|
||||||
|
elems[0].focus()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
elems.focus()
|
||||||
|
}
|
||||||
|
|
||||||
|
function create() {
|
||||||
|
if (query.value === '') {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('create', query.value)
|
||||||
|
setSelectedObject(query.value, true)
|
||||||
|
closeSearchResults()
|
||||||
|
}
|
||||||
|
|
||||||
|
function createOrSelectOnEnter() {
|
||||||
|
if (!creatableAvailable.value && searchResults.value.length === 1) {
|
||||||
|
select(searchResults.value[0])
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
if (!creatableAvailable.value) {
|
||||||
|
// Check if there's an exact match for our search term
|
||||||
|
const exactMatch = filteredSearchResults.value.find((elem: any) => elementInResults(elem, props.label, query.value))
|
||||||
|
if(exactMatch) {
|
||||||
|
select(exactMatch)
|
||||||
|
}
|
||||||
|
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
create()
|
||||||
|
}
|
||||||
|
|
||||||
|
function remove(item: any) {
|
||||||
|
for (const ind in internalValue.value) {
|
||||||
|
if (internalValue.value[ind] === item) {
|
||||||
|
internalValue.value.splice(ind, 1)
|
||||||
|
break
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
emit('update:modelValue', internalValue.value)
|
||||||
|
emit('remove', item)
|
||||||
|
}
|
||||||
|
|
||||||
|
function focus() {
|
||||||
|
searchInput.value?.focus()
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
@ -378,122 +435,125 @@ export default defineComponent({
|
||||||
.control.is-loading::after {
|
.control.is-loading::after {
|
||||||
top: .75rem;
|
top: .75rem;
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
&.has-search-results .input-wrapper {
|
.input-wrapper {
|
||||||
border-radius: $radius $radius 0 0;
|
padding: 0;
|
||||||
border-color: var(--primary) !important;
|
background: var(--white);
|
||||||
background: var(--white) !important;
|
border-color: var(--grey-200);
|
||||||
|
flex-wrap: wrap;
|
||||||
|
height: auto;
|
||||||
|
|
||||||
&, &:focus-within {
|
&:hover {
|
||||||
border-bottom-color: var(--grey-200) !important;
|
border-color: var(--grey-300) !important;
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.input-wrapper {
|
.input {
|
||||||
padding: 0;
|
display: flex;
|
||||||
background: var(--white) !important;
|
max-width: 100%;
|
||||||
border-color: var(--grey-200) !important;
|
width: 100%;
|
||||||
flex-wrap: wrap;
|
align-items: center;
|
||||||
|
border: none !important;
|
||||||
|
background: transparent;
|
||||||
height: auto;
|
height: auto;
|
||||||
|
|
||||||
&:hover {
|
&::placeholder {
|
||||||
border-color: var(--grey-300) !important;
|
font-style: normal !important;
|
||||||
}
|
|
||||||
|
|
||||||
.input {
|
|
||||||
display: flex;
|
|
||||||
max-width: 100%;
|
|
||||||
width: 100%;
|
|
||||||
align-items: center;
|
|
||||||
border: none !important;
|
|
||||||
background: transparent;
|
|
||||||
height: auto;
|
|
||||||
|
|
||||||
&::placeholder {
|
|
||||||
font-style: normal !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.has-multiple .input {
|
|
||||||
max-width: 250px;
|
|
||||||
|
|
||||||
input {
|
|
||||||
padding-left: 0;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus-within {
|
|
||||||
border-color: var(--primary) !important;
|
|
||||||
background: var(--white) !important;
|
|
||||||
}
|
|
||||||
|
|
||||||
.loader {
|
|
||||||
margin: 0 .5rem;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.search-results {
|
&.has-multiple .input {
|
||||||
background: var(--white);
|
max-width: 250px;
|
||||||
border-radius: 0 0 $radius $radius;
|
|
||||||
border: 1px solid var(--primary);
|
|
||||||
border-top: none;
|
|
||||||
|
|
||||||
max-height: 50vh;
|
input {
|
||||||
overflow-x: auto;
|
padding-left: 0;
|
||||||
position: absolute;
|
|
||||||
z-index: 100;
|
|
||||||
max-width: 100%;
|
|
||||||
min-width: 100%;
|
|
||||||
|
|
||||||
&-inline {
|
|
||||||
position: static;
|
|
||||||
}
|
}
|
||||||
|
}
|
||||||
|
|
||||||
button {
|
&:focus-within {
|
||||||
background: transparent;
|
border-color: var(--primary) !important;
|
||||||
text-align: left;
|
background: var(--white) !important;
|
||||||
box-shadow: none;
|
}
|
||||||
border-radius: 0;
|
|
||||||
text-transform: none;
|
|
||||||
font-family: $family-sans-serif;
|
|
||||||
font-weight: normal;
|
|
||||||
padding: .5rem;
|
|
||||||
border: none;
|
|
||||||
cursor: pointer;
|
|
||||||
color: var(--grey-800);
|
|
||||||
|
|
||||||
display: flex;
|
// doesn't seem to be used. maybe inside the slot?
|
||||||
justify-content: space-between;
|
.loader {
|
||||||
align-items: center;
|
margin: 0 .5rem;
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.search-result {
|
|
||||||
white-space: nowrap;
|
|
||||||
text-overflow: ellipsis;
|
|
||||||
overflow: hidden;
|
|
||||||
padding: .5rem .75rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hint-text {
|
|
||||||
font-size: .75rem;
|
|
||||||
color: transparent;
|
|
||||||
transition: color $transition;
|
|
||||||
padding-left: .5rem;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:focus, &:hover {
|
|
||||||
background: var(--grey-100);
|
|
||||||
box-shadow: none !important;
|
|
||||||
|
|
||||||
.hint-text {
|
|
||||||
color: var(--text);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active {
|
|
||||||
background: var(--grey-200);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.has-search-results .input-wrapper {
|
||||||
|
border-radius: $radius $radius 0 0;
|
||||||
|
border-color: var(--primary) !important;
|
||||||
|
background: var(--white) !important;
|
||||||
|
|
||||||
|
&, &:focus-within {
|
||||||
|
border-bottom-color: var(--grey-200) !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results {
|
||||||
|
background: var(--white);
|
||||||
|
border-radius: 0 0 $radius $radius;
|
||||||
|
border: 1px solid var(--primary);
|
||||||
|
border-top: none;
|
||||||
|
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow-x: auto;
|
||||||
|
position: absolute;
|
||||||
|
z-index: 100;
|
||||||
|
max-width: 100%;
|
||||||
|
min-width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-results-inline {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-result-button {
|
||||||
|
background: transparent;
|
||||||
|
text-align: left;
|
||||||
|
box-shadow: none;
|
||||||
|
border-radius: 0;
|
||||||
|
text-transform: none;
|
||||||
|
font-family: $family-sans-serif;
|
||||||
|
font-weight: normal;
|
||||||
|
padding: .5rem;
|
||||||
|
border: none;
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--grey-800);
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
&:focus,
|
||||||
|
&:hover {
|
||||||
|
background: var(--grey-100);
|
||||||
|
box-shadow: none !important;
|
||||||
|
|
||||||
|
.hint-text {
|
||||||
|
color: var(--text);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active {
|
||||||
|
background: var(--grey-200);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.search-result {
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: .5rem .75rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.hint-text {
|
||||||
|
font-size: .75rem;
|
||||||
|
color: transparent;
|
||||||
|
transition: color $transition;
|
||||||
|
padding-left: .5rem;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
|
@ -45,7 +45,7 @@ const password = ref('')
|
||||||
const isValid = ref(!props.validateInitially)
|
const isValid = ref(!props.validateInitially)
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
props.validateInitially,
|
() => props.validateInitially,
|
||||||
() => props.validateInitially && validate(),
|
() => props.validateInitially && validate(),
|
||||||
{immediate: true},
|
{immediate: true},
|
||||||
)
|
)
|
||||||
|
|
|
@ -4,22 +4,28 @@
|
||||||
class="vue-simplemde-textarea"
|
class="vue-simplemde-textarea"
|
||||||
:name="name"
|
:name="name"
|
||||||
:value="modelValue"
|
:value="modelValue"
|
||||||
@input="handleInput($event.target.value)"
|
@input="handleInput(($event.target as HTMLTextAreaElement).value)"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {ref, watch, onMounted, onDeactivated, onBeforeUnmount, nextTick, shallowReactive} from 'vue'
|
import {ref, watch, onMounted, onDeactivated, onBeforeUnmount, nextTick, shallowReactive, type ShallowReactive, type PropType} from 'vue'
|
||||||
import type { ShallowReactive } from 'vue'
|
import EasyMDE, {toggleFullScreen} from 'easymde'
|
||||||
|
|
||||||
import EasyMDE from 'easymde'
|
|
||||||
import {marked} from 'marked'
|
import {marked} from 'marked'
|
||||||
|
import type CodeMirror from 'codemirror'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
modelValue: String,
|
modelValue: {
|
||||||
name: String,
|
type: String,
|
||||||
previewClass: String,
|
default: '',
|
||||||
|
},
|
||||||
|
name: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
|
previewClass: {
|
||||||
|
type: String,
|
||||||
|
},
|
||||||
autoinit: {
|
autoinit: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: true,
|
default: true,
|
||||||
|
@ -37,7 +43,7 @@ const props = defineProps({
|
||||||
default: () => ({}),
|
default: () => ({}),
|
||||||
},
|
},
|
||||||
previewRender: {
|
previewRender: {
|
||||||
type: Function,
|
type: Function as PropType<EasyMDE.Options['previewRender']>,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
@ -51,9 +57,9 @@ onMounted(() => {
|
||||||
})
|
})
|
||||||
|
|
||||||
onDeactivated(() => {
|
onDeactivated(() => {
|
||||||
if (!easymde) return
|
if (easymde === undefined) return
|
||||||
const isFullScreen = easymde.codemirror.getOption('fullScreen')
|
if (easymde.isFullscreenActive()) toggleFullScreen(easymde)
|
||||||
if (isFullScreen) easymde.toggleFullScreen()
|
easymde.toTextArea
|
||||||
})
|
})
|
||||||
|
|
||||||
onBeforeUnmount(() => {
|
onBeforeUnmount(() => {
|
||||||
|
@ -67,8 +73,8 @@ onBeforeUnmount(() => {
|
||||||
const easymdeRef = ref<HTMLElement | null>(null)
|
const easymdeRef = ref<HTMLElement | null>(null)
|
||||||
|
|
||||||
function initialize() {
|
function initialize() {
|
||||||
const configs = Object.assign({
|
const configs: EasyMDE.Options = Object.assign({
|
||||||
element: easymdeRef.value?.firstElementChild,
|
element: easymdeRef.value?.firstElementChild as HTMLElement,
|
||||||
initialValue: props.modelValue,
|
initialValue: props.modelValue,
|
||||||
previewRender: props.previewRender,
|
previewRender: props.previewRender,
|
||||||
renderingConfig: {},
|
renderingConfig: {},
|
||||||
|
@ -81,7 +87,7 @@ function initialize() {
|
||||||
|
|
||||||
// Determine whether to enable code highlighting
|
// Determine whether to enable code highlighting
|
||||||
if (props.highlight) {
|
if (props.highlight) {
|
||||||
configs.renderingConfig.codeSyntaxHighlighting = true
|
configs.renderingConfig!.codeSyntaxHighlighting = true
|
||||||
}
|
}
|
||||||
|
|
||||||
// Set whether to render the input html
|
// Set whether to render the input html
|
||||||
|
@ -92,15 +98,16 @@ function initialize() {
|
||||||
|
|
||||||
// Add a custom previewClass
|
// Add a custom previewClass
|
||||||
const className = props.previewClass || ''
|
const className = props.previewClass || ''
|
||||||
addPreviewClass(className)
|
addPreviewClass(easymde, className)
|
||||||
|
|
||||||
// Binding event
|
// Binding event
|
||||||
bindingEvents()
|
easymde.codemirror.on('change', handleCodemirrorInput)
|
||||||
|
easymde.codemirror.on('blur', handleCodemirrorBlur)
|
||||||
|
|
||||||
nextTick(() => emit('initialized', easymde))
|
nextTick(() => emit('initialized', easymde))
|
||||||
}
|
}
|
||||||
|
|
||||||
function addPreviewClass(className: string) {
|
function addPreviewClass(easymde: EasyMDE, className: string) {
|
||||||
const wrapper = easymde.codemirror.getWrapperElement()
|
const wrapper = easymde.codemirror.getWrapperElement()
|
||||||
const preview = document.createElement('div')
|
const preview = document.createElement('div')
|
||||||
wrapper.nextSibling.className += ` ${className}`
|
wrapper.nextSibling.className += ` ${className}`
|
||||||
|
@ -108,28 +115,24 @@ function addPreviewClass(className: string) {
|
||||||
wrapper.appendChild(preview)
|
wrapper.appendChild(preview)
|
||||||
}
|
}
|
||||||
|
|
||||||
function bindingEvents() {
|
function handleInput(val: string) {
|
||||||
easymde.codemirror.on('change', handleCodemirrorInput)
|
isValueUpdateFromInner.value = true
|
||||||
easymde.codemirror.on('blur', handleCodemirrorBlur)
|
emit('update:modelValue', val)
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleCodemirrorInput(instance, changeObj) {
|
function handleCodemirrorInput(instance: CodeMirror.Editor, changeObj: CodeMirror.EditorChange) {
|
||||||
if (changeObj.origin === 'setValue') {
|
if (changeObj.origin === 'setValue' || easymde === undefined) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
const val = easymde.value()
|
handleInput(easymde.value())
|
||||||
handleInput(val)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
function handleCodemirrorBlur() {
|
function handleCodemirrorBlur() {
|
||||||
const val = easymde.value()
|
if (easymde === undefined) {
|
||||||
|
return
|
||||||
|
}
|
||||||
isValueUpdateFromInner.value = true
|
isValueUpdateFromInner.value = true
|
||||||
emit('blur', val)
|
emit('blur', easymde.value())
|
||||||
}
|
|
||||||
|
|
||||||
function handleInput(val) {
|
|
||||||
isValueUpdateFromInner.value = true
|
|
||||||
emit('update:modelValue', val)
|
|
||||||
}
|
}
|
||||||
|
|
||||||
watch(
|
watch(
|
||||||
|
@ -138,7 +141,7 @@ watch(
|
||||||
if (isValueUpdateFromInner.value) {
|
if (isValueUpdateFromInner.value) {
|
||||||
isValueUpdateFromInner.value = false
|
isValueUpdateFromInner.value = false
|
||||||
} else {
|
} else {
|
||||||
easymde.value(val)
|
easymde?.value(val)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
)
|
)
|
||||||
|
|
200
src/components/list/ListWrapper.vue
Normal file
200
src/components/list/ListWrapper.vue
Normal file
|
@ -0,0 +1,200 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
:class="{ 'is-loading': listService.loading, 'is-archived': currentList.isArchived}"
|
||||||
|
class="loader-container"
|
||||||
|
>
|
||||||
|
<div class="switch-view-container">
|
||||||
|
<div class="switch-view">
|
||||||
|
<BaseButton
|
||||||
|
v-shortcut="'g l'"
|
||||||
|
:title="$t('keyboardShortcuts.list.switchToListView')"
|
||||||
|
class="switch-view-button"
|
||||||
|
:class="{'is-active': viewName === 'list'}"
|
||||||
|
:to="{ name: 'list.list', params: { listId } }"
|
||||||
|
>
|
||||||
|
{{ $t('list.list.title') }}
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton
|
||||||
|
v-shortcut="'g g'"
|
||||||
|
:title="$t('keyboardShortcuts.list.switchToGanttView')"
|
||||||
|
class="switch-view-button"
|
||||||
|
:class="{'is-active': viewName === 'gantt'}"
|
||||||
|
:to="{ name: 'list.gantt', params: { listId } }"
|
||||||
|
>
|
||||||
|
{{ $t('list.gantt.title') }}
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton
|
||||||
|
v-shortcut="'g t'"
|
||||||
|
:title="$t('keyboardShortcuts.list.switchToTableView')"
|
||||||
|
class="switch-view-button"
|
||||||
|
:class="{'is-active': viewName === 'table'}"
|
||||||
|
:to="{ name: 'list.table', params: { listId } }"
|
||||||
|
>
|
||||||
|
{{ $t('list.table.title') }}
|
||||||
|
</BaseButton>
|
||||||
|
<BaseButton
|
||||||
|
v-shortcut="'g k'"
|
||||||
|
:title="$t('keyboardShortcuts.list.switchToKanbanView')"
|
||||||
|
class="switch-view-button"
|
||||||
|
:class="{'is-active': viewName === 'kanban'}"
|
||||||
|
:to="{ name: 'list.kanban', params: { listId } }"
|
||||||
|
>
|
||||||
|
{{ $t('list.kanban.title') }}
|
||||||
|
</BaseButton>
|
||||||
|
</div>
|
||||||
|
<slot name="header" />
|
||||||
|
</div>
|
||||||
|
<CustomTransition name="fade">
|
||||||
|
<Message variant="warning" v-if="currentList.isArchived" class="mb-4">
|
||||||
|
{{ $t('list.archived') }}
|
||||||
|
</Message>
|
||||||
|
</CustomTransition>
|
||||||
|
|
||||||
|
<slot v-if="loadedListId"/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {ref, computed, watch} from 'vue'
|
||||||
|
import {useRoute} from 'vue-router'
|
||||||
|
|
||||||
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
|
import Message from '@/components/misc/message.vue'
|
||||||
|
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||||
|
|
||||||
|
import ListModel from '@/models/list'
|
||||||
|
import ListService from '@/services/list'
|
||||||
|
|
||||||
|
import {getListTitle} from '@/helpers/getListTitle'
|
||||||
|
import {saveListToHistory} from '@/modules/listHistory'
|
||||||
|
import {useTitle} from '@/composables/useTitle'
|
||||||
|
|
||||||
|
import {useBaseStore} from '@/stores/base'
|
||||||
|
import {useListStore} from '@/stores/lists'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
listId: {
|
||||||
|
type: Number,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
viewName: {
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
|
|
||||||
|
const baseStore = useBaseStore()
|
||||||
|
const listStore = useListStore()
|
||||||
|
const listService = ref(new ListService())
|
||||||
|
const loadedListId = ref(0)
|
||||||
|
|
||||||
|
const currentList = computed(() => {
|
||||||
|
return typeof baseStore.currentList === 'undefined' ? {
|
||||||
|
id: 0,
|
||||||
|
title: '',
|
||||||
|
isArchived: false,
|
||||||
|
maxRight: null,
|
||||||
|
} : baseStore.currentList
|
||||||
|
})
|
||||||
|
useTitle(() => currentList.value.id ? getListTitle(currentList.value) : '')
|
||||||
|
|
||||||
|
// watchEffect would be called every time the prop would get a value assigned, even if that value was the same as before.
|
||||||
|
// This resulted in loading and setting the list multiple times, even when navigating away from it.
|
||||||
|
// This caused wired bugs where the list background would be set on the home page but only right after setting a new
|
||||||
|
// list background and then navigating to home. It also highlighted the list in the menu and didn't allow changing any
|
||||||
|
// of it, most likely due to the rights not being properly populated.
|
||||||
|
watch(
|
||||||
|
() => props.listId,
|
||||||
|
// loadList
|
||||||
|
async (listIdToLoad: number) => {
|
||||||
|
const listData = {id: listIdToLoad}
|
||||||
|
saveListToHistory(listData)
|
||||||
|
|
||||||
|
// Don't load the list if we either already loaded it or aren't dealing with a list at all currently and
|
||||||
|
// the currently loaded list has the right set.
|
||||||
|
if (
|
||||||
|
(
|
||||||
|
listIdToLoad === loadedListId.value ||
|
||||||
|
typeof listIdToLoad === 'undefined' ||
|
||||||
|
listIdToLoad === currentList.value.id
|
||||||
|
)
|
||||||
|
&& typeof currentList.value !== 'undefined' && currentList.value.maxRight !== null
|
||||||
|
) {
|
||||||
|
loadedListId.value = props.listId
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
console.debug(`Loading list, props.viewName = ${props.viewName}, $route.params =`, route.params, `, loadedListId = ${loadedListId.value}, currentList = `, currentList.value)
|
||||||
|
|
||||||
|
// Set the current list to the one we're about to load so that the title is already shown at the top
|
||||||
|
loadedListId.value = 0
|
||||||
|
const listFromStore = listStore.getListById(listData.id)
|
||||||
|
if (listFromStore !== null) {
|
||||||
|
baseStore.setBackground(null)
|
||||||
|
baseStore.setBlurHash(null)
|
||||||
|
baseStore.handleSetCurrentList({list: listFromStore})
|
||||||
|
}
|
||||||
|
|
||||||
|
// We create an extra list object instead of creating it in list.value because that would trigger a ui update which would result in bad ux.
|
||||||
|
const list = new ListModel(listData)
|
||||||
|
try {
|
||||||
|
const loadedList = await listService.value.get(list)
|
||||||
|
baseStore.handleSetCurrentList({list: loadedList})
|
||||||
|
} finally {
|
||||||
|
loadedListId.value = props.listId
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{immediate: true},
|
||||||
|
)
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.switch-view-container {
|
||||||
|
@media screen and (max-width: $tablet) {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-view {
|
||||||
|
background: var(--white);
|
||||||
|
display: inline-flex;
|
||||||
|
border-radius: $radius;
|
||||||
|
font-size: .75rem;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
height: $switch-view-height;
|
||||||
|
margin: 0 auto 1rem;
|
||||||
|
padding: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.switch-view-button {
|
||||||
|
padding: .25rem .5rem;
|
||||||
|
display: block;
|
||||||
|
border-radius: $radius;
|
||||||
|
transition: all 100ms;
|
||||||
|
|
||||||
|
&:not(:last-child) {
|
||||||
|
margin-right: .5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--switch-view-color);
|
||||||
|
background: var(--primary);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-active {
|
||||||
|
color: var(--switch-view-color);
|
||||||
|
background: var(--primary);
|
||||||
|
font-weight: bold;
|
||||||
|
box-shadow: var(--shadow-xs);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// FIXME: this should be in notification and set via a prop
|
||||||
|
.is-archived .notification.is-warning {
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
</style>
|
|
@ -1,6 +1,14 @@
|
||||||
<template>
|
<template>
|
||||||
<dropdown>
|
<dropdown>
|
||||||
<template v-if="isSavedFilter">
|
<template #trigger="triggerProps">
|
||||||
|
<slot name="trigger" v-bind="triggerProps">
|
||||||
|
<BaseButton class="dropdown-trigger" @click="triggerProps.toggleOpen">
|
||||||
|
<icon icon="ellipsis-h" class="icon"/>
|
||||||
|
</BaseButton>
|
||||||
|
</slot>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-if="isSavedFilter(list)">
|
||||||
<dropdown-item
|
<dropdown-item
|
||||||
:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
|
:to="{ name: 'filter.settings.edit', params: { listId: list.id } }"
|
||||||
icon="pen"
|
icon="pen"
|
||||||
|
@ -55,13 +63,14 @@
|
||||||
>
|
>
|
||||||
{{ $t('menu.archive') }}
|
{{ $t('menu.archive') }}
|
||||||
</dropdown-item>
|
</dropdown-item>
|
||||||
<task-subscription
|
<Subscription
|
||||||
class="dropdown-item has-no-shadow"
|
class="has-no-shadow"
|
||||||
:is-button="false"
|
:is-button="false"
|
||||||
entity="list"
|
entity="list"
|
||||||
:entity-id="list.id"
|
:entity-id="list.id"
|
||||||
:subscription="list.subscription"
|
:model-value="list.subscription"
|
||||||
@change="sub => subscription = sub"
|
@update:model-value="setSubscriptionInStore"
|
||||||
|
type="dropdown"
|
||||||
/>
|
/>
|
||||||
<dropdown-item
|
<dropdown-item
|
||||||
:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
|
:to="{ name: 'list.settings.delete', params: { listId: list.id } }"
|
||||||
|
@ -75,29 +84,44 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import {ref, computed, watchEffect} from 'vue'
|
import {ref, computed, watchEffect, type PropType} from 'vue'
|
||||||
import {useStore} from 'vuex'
|
|
||||||
|
|
||||||
import {getSavedFilterIdFromListId} from '@/helpers/savedFilter'
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
import Dropdown from '@/components/misc/dropdown.vue'
|
import Dropdown from '@/components/misc/dropdown.vue'
|
||||||
import DropdownItem from '@/components/misc/dropdown-item.vue'
|
import DropdownItem from '@/components/misc/dropdown-item.vue'
|
||||||
import TaskSubscription from '@/components/misc/subscription.vue'
|
import Subscription from '@/components/misc/subscription.vue'
|
||||||
import ListModel from '@/models/list'
|
import type {IList} from '@/modelTypes/IList'
|
||||||
import SubscriptionModel from '@/models/subscription'
|
import type {ISubscription} from '@/modelTypes/ISubscription'
|
||||||
|
|
||||||
|
import {isSavedFilter} from '@/services/savedFilter'
|
||||||
|
import {useConfigStore} from '@/stores/config'
|
||||||
|
import {useListStore} from '@/stores/lists'
|
||||||
|
import {useNamespaceStore} from '@/stores/namespaces'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
list: {
|
list: {
|
||||||
type: ListModel,
|
type: Object as PropType<IList>,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
const subscription = ref<SubscriptionModel | null>(null)
|
const listStore = useListStore()
|
||||||
|
const namespaceStore = useNamespaceStore()
|
||||||
|
const subscription = ref<ISubscription | null>(null)
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
subscription.value = props.list.subscription ?? null
|
subscription.value = props.list.subscription ?? null
|
||||||
})
|
})
|
||||||
|
|
||||||
const store = useStore()
|
const configStore = useConfigStore()
|
||||||
const backgroundsEnabled = computed(() => store.state.config.enabledBackgroundProviders?.length > 0)
|
const backgroundsEnabled = computed(() => configStore.enabledBackgroundProviders?.length > 0)
|
||||||
const isSavedFilter = computed(() => getSavedFilterIdFromListId(props.list.id) > 0)
|
|
||||||
</script>
|
function setSubscriptionInStore(sub: ISubscription) {
|
||||||
|
subscription.value = sub
|
||||||
|
const updatedList = {
|
||||||
|
...props.list,
|
||||||
|
subscription: sub,
|
||||||
|
}
|
||||||
|
listStore.setList(updatedList)
|
||||||
|
namespaceStore.setListInNamespaceById(updatedList)
|
||||||
|
}
|
||||||
|
</script>
|
176
src/components/list/partials/ListCard.vue
Normal file
176
src/components/list/partials/ListCard.vue
Normal file
|
@ -0,0 +1,176 @@
|
||||||
|
<template>
|
||||||
|
<div
|
||||||
|
class="list-card"
|
||||||
|
:class="{
|
||||||
|
'has-light-text': background !== null,
|
||||||
|
'has-background': blurHashUrl !== '' || background !== null
|
||||||
|
}"
|
||||||
|
:style="{
|
||||||
|
'border-left': list.hexColor ? `0.25rem solid ${list.hexColor}` : undefined,
|
||||||
|
'background-image': blurHashUrl !== '' ? `url(${blurHashUrl})` : undefined,
|
||||||
|
}"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
class="list-background background-fade-in"
|
||||||
|
:class="{'is-visible': background}"
|
||||||
|
:style="{'background-image': background !== null ? `url(${background})` : undefined}"
|
||||||
|
/>
|
||||||
|
<span v-if="list.isArchived" class="is-archived" >{{ $t('namespace.archived') }}</span>
|
||||||
|
|
||||||
|
<div class="list-title" aria-hidden="true">{{ list.title }}</div>
|
||||||
|
<BaseButton
|
||||||
|
class="list-button"
|
||||||
|
:aria-label="list.title"
|
||||||
|
:title="list.description"
|
||||||
|
:to="{
|
||||||
|
name: 'list.index',
|
||||||
|
params: { listId: list.id}
|
||||||
|
}"
|
||||||
|
/>
|
||||||
|
<BaseButton
|
||||||
|
v-if="!list.isArchived"
|
||||||
|
class="favorite"
|
||||||
|
:class="{'is-favorite': list.isFavorite}"
|
||||||
|
@click.prevent.stop="listStore.toggleListFavorite(list)"
|
||||||
|
>
|
||||||
|
<icon :icon="list.isFavorite ? 'star' : ['far', 'star']" />
|
||||||
|
</BaseButton>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script lang="ts" setup>
|
||||||
|
import {toRef, type PropType} from 'vue'
|
||||||
|
|
||||||
|
import type {IList} from '@/modelTypes/IList'
|
||||||
|
|
||||||
|
import BaseButton from '@/components/base/BaseButton.vue'
|
||||||
|
|
||||||
|
import {useListBackground} from './useListBackground'
|
||||||
|
import {useListStore} from '@/stores/lists'
|
||||||
|
|
||||||
|
const props = defineProps({
|
||||||
|
list: {
|
||||||
|
type: Object as PropType<IList>,
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
})
|
||||||
|
|
||||||
|
const {background, blurHashUrl} = useListBackground(toRef(props, 'list'))
|
||||||
|
|
||||||
|
const listStore = useListStore()
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style lang="scss" scoped>
|
||||||
|
.list-card {
|
||||||
|
--list-card-padding: 1rem;
|
||||||
|
background: var(--white);
|
||||||
|
padding: var(--list-card-padding);
|
||||||
|
border-radius: $radius;
|
||||||
|
box-shadow: var(--shadow-sm);
|
||||||
|
transition: box-shadow $transition;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden; // hide background
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
box-shadow: var(--shadow-md);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:active,
|
||||||
|
&:focus {
|
||||||
|
box-shadow: var(--shadow-xs) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
> * {
|
||||||
|
// so the elements are on top of the background
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-background,
|
||||||
|
.list-background {
|
||||||
|
background-size: cover;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-background,
|
||||||
|
.list-button {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.is-archived {
|
||||||
|
font-size: .75rem;
|
||||||
|
float: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-title {
|
||||||
|
align-self: flex-end;
|
||||||
|
font-family: $vikunja-font;
|
||||||
|
font-weight: 400;
|
||||||
|
font-size: 1.5rem;
|
||||||
|
line-height: var(--title-line-height);
|
||||||
|
color: var(--text);
|
||||||
|
width: 100%;
|
||||||
|
margin-bottom: 0;
|
||||||
|
max-height: calc(100% - (var(--list-card-padding) + 1rem)); // padding & height of the "is archived" badge
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
word-break: break-word;
|
||||||
|
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 3;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-light-text .list-title {
|
||||||
|
color: var(--grey-100);
|
||||||
|
}
|
||||||
|
|
||||||
|
.has-background .list-title {
|
||||||
|
text-shadow:
|
||||||
|
0 0 10px var(--black),
|
||||||
|
1px 1px 5px var(--grey-700),
|
||||||
|
-1px -1px 5px var(--grey-700);
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite {
|
||||||
|
position: absolute;
|
||||||
|
top: var(--list-card-padding);
|
||||||
|
right: var(--list-card-padding);
|
||||||
|
transition: opacity $transition, color $transition;
|
||||||
|
opacity: 0;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
color: var(--warning);
|
||||||
|
}
|
||||||
|
|
||||||
|
&.is-favorite {
|
||||||
|
display: inline-block;
|
||||||
|
opacity: 1;
|
||||||
|
color: var(--warning);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-card:hover .favorite {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-fade-in {
|
||||||
|
opacity: 0;
|
||||||
|
transition: opacity $transition;
|
||||||
|
transition-delay: $transition-duration * 2; // To fake an appearing background
|
||||||
|
|
||||||
|
&.is-visible {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue
Block a user