Skip to content

Commit 4b68b86

Browse files
author
Konstantin BIFERT
committed
chore: messy code
1 parent 610a061 commit 4b68b86

File tree

10 files changed

+233
-26
lines changed

10 files changed

+233
-26
lines changed

‎.eslintrc.cjs‎

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -2,21 +2,21 @@
22
require("@rushstack/eslint-patch/modern-module-resolution");
33

44
module.exports = {
5-
"root": true,
6-
"extends": [
5+
root: true,
6+
extends: [
77
"plugin:vue/vue3-essential",
88
"eslint:recommended",
99
"@vue/eslint-config-typescript/recommended",
10-
"@vue/eslint-config-prettier"
10+
"@vue/eslint-config-prettier",
1111
],
12-
"overrides": [
12+
overrides: [
1313
{
14-
"files": [
15-
"cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}"
16-
],
17-
"extends": [
18-
"plugin:cypress/recommended"
19-
]
20-
}
21-
]
22-
}
14+
files: ["cypress/e2e/**.{cy,spec}.{js,ts,jsx,tsx}"],
15+
extends: ["plugin:cypress/recommended"],
16+
},
17+
],
18+
rules: {
19+
"vue/multi-word-component-names": "off",
20+
},
21+
ignorePatterns: ["*.config.js"],
22+
};

‎components.d.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,10 @@ declare module '@vue/runtime-core' {
99
AppImage: typeof import('./src/components/AppImage.vue')['default']
1010
AppImageDropzone: typeof import('./src/components/AppImageDropzone.vue')['default']
1111
BoardCard: typeof import('./src/components/BoardCard.vue')['default']
12+
BoardDragAndDrop: typeof import('./src/components/BoardDragAndDrop.vue')['default']
1213
RouterLink: typeof import('vue-router')['RouterLink']
1314
RouterView: typeof import('vue-router')['RouterView']
15+
TaskCard: typeof import('./src/components/TaskCard.vue')['default']
1416
TheAlerts: typeof import('./src/components/TheAlerts.vue')['default']
1517
TheDrawer: typeof import('./src/components/TheDrawer.vue')['default']
1618
TheNavbar: typeof import('./src/components/TheNavbar.vue')['default']

‎package-lock.json‎

Lines changed: 31 additions & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,8 @@
2222
"uuid": "^8.3.2",
2323
"vite-plugin-pages": "^0.24.3",
2424
"vue": "^3.2.37",
25-
"vue-router": "^4.0.16"
25+
"vue-router": "^4.0.16",
26+
"vuedraggable": "^4.1.0"
2627
},
2728
"devDependencies": {
2829
"@progress/kendo-licensing": "^1.2.2",

‎src/components/BoardCard.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -11,20 +11,20 @@ const randomColor = "#" + Math.floor(Math.random() * 16777215).toString(16);
1111
</script>
1212
<template>
1313
<router-link :to="`/boards/${board.id}`" class="block w-96">
14-
<KCard class="m-5">
14+
<KCard>
1515
<AppImage
1616
v-if="board.image"
1717
:src="board.image?.downloadUrl"
1818
width="384"
19-
class="aspect-video w-full"
19+
class="w-full aspect-video"
2020
/>
2121
<div
2222
v-else
23-
class="aspect-video w-full"
23+
class="w-full aspect-video"
2424
:style="{ backgroundColor: randomColor }"
2525
></div>
2626
<KCardTitle class="p-2">
27-
<span class="text-gray-700 text-xl">{{ board.title }}</span>
27+
<span class="text-xl text-gray-700">{{ board.title }}</span>
2828
</KCardTitle>
2929
</KCard>
3030
</router-link>

‎src/components/BoardDragAndDrop.vue‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
<script setup>
2+
import { watch, reactive, toRaw } from "vue";
3+
import { cloneDeep } from "lodash-es";
4+
import draggable from "vuedraggable";
5+
import { v4 as uuidv4 } from "uuid";
6+
7+
const props = defineProps({
8+
board: Object,
9+
tasks: Array,
10+
});
11+
12+
// emits
13+
const emit = defineEmits(["update"]);
14+
15+
// local data
16+
const tasks = reactive(cloneDeep(props.tasks));
17+
const board = reactive(cloneDeep(props.board));
18+
const columns = reactive(JSON.parse(board.order));
19+
20+
const addColumn = () =>
21+
columns.push({ id: uuidv4(), title: "New column", taskIds: [] });
22+
23+
watch(columns, () =>
24+
emit(
25+
"update",
26+
cloneDeep({
27+
...props.board,
28+
order: JSON.stringify(toRaw(columns)),
29+
})
30+
)
31+
);
32+
</script>
33+
34+
<template>
35+
<button class="text-gray-500" @click="addColumn">New Column +</button>
36+
<div class="flex items-start py-12">
37+
<!-- //! outer block -->
38+
<draggable
39+
:list="columns"
40+
group="columns"
41+
item-key="id"
42+
class="flex flex-grow-0 flex-shrink-0 overflow-x-scroll"
43+
>
44+
<template #item="{ element: column }">
45+
<div
46+
class="column bg-gray-100 flex flex-col justify-between rounded-lg px-3 py-3 rounded mr-4 w-[300px]"
47+
>
48+
<h2>{{ column.title }}</h2>
49+
<!-- //! inner block -->
50+
<draggable
51+
:list="column.taskIds"
52+
group="tasks"
53+
item-key="uid"
54+
:animation="200"
55+
ghost-class="ghost-card"
56+
class="min-h-[400px]"
57+
>
58+
<template #item="{ element: taskId }">
59+
<task-card
60+
v-if="tasks.find((t) => t.id === taskId)"
61+
:task="tasks.find((t) => t.id === taskId)"
62+
class="mt-3 cursor-move"
63+
/>
64+
</template>
65+
</draggable>
66+
</div>
67+
</template>
68+
</draggable>
69+
</div>
70+
</template>

‎src/components/TaskCard.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup>
2+
const props = defineProps({
3+
task: Object,
4+
});
5+
</script>
6+
7+
<template>
8+
<div class="p-5 bg-white">
9+
{{ task }}
10+
</div>
11+
</template>

‎src/pages/boards/[id].vue‎

Lines changed: 52 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,56 @@
1-
<script setup lang="ts">
2-
import AppImageDropzone from "../../components/AppImageDropzone.vue";
1+
<script setup>
2+
import { ref, toRefs } from "vue";
3+
// import AppPageHeading from "../../components/AppPageHeading.vue";
4+
import BoardDragAndDrop from "../../components/BoardDragAndDrop.vue";
5+
// import { useAlerts } from "@/stores/Alerts";
6+
// const alerts = useAlerts();
7+
8+
const props = defineProps({
9+
id: String,
10+
});
11+
12+
const { id: boardId } = toRefs(props);
13+
14+
const board = ref({
15+
id: boardId.value,
16+
title: "Let's have an amazing time at Vue.js forge!! 🍍",
17+
order: JSON.stringify([
18+
{ id: "1", title: "backlog 🌴", taskIds: ["1", "2"] },
19+
]),
20+
});
21+
22+
const tasks = ref([
23+
{ id: "1", title: "Code like mad people!" },
24+
{ id: "2", title: "Push clean code" },
25+
]);
26+
27+
const updateBoard = (b) => {
28+
board.value = b;
29+
// alerts.success("Board updated!");
30+
};
331
</script>
432

533
<template>
6-
<AppImageDropzone />
34+
<div>
35+
<!-- <app-page-heading>
36+
{{ board.title }}
37+
</app-page-heading> -->
38+
39+
<board-drag-and-drop :tasks="tasks" :board="board" @update="updateBoard" />
40+
41+
<details>
42+
<pre>
43+
{{ board }}
44+
</pre>
45+
</details>
46+
</div>
747
</template>
48+
49+
<style scoped>
50+
pre {
51+
width: 400px;
52+
overflow-x: auto;
53+
white-space: pre-wrap;
54+
word-wrap: break-word;
55+
}
56+
</style>

‎src/pages/boards/index.vue‎

Lines changed: 46 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,22 @@ const boards = ref<Partial<Board>[]>([
2222
{
2323
id: "3",
2424
title: "My Third Board",
25-
order: "[]",
25+
order: "https://picsum.photos/480/270?watermelon=3",
26+
},
27+
{
28+
id: "4",
29+
title: "And another one",
30+
order: "https://picsum.photos/480/270?watermelon=4",
31+
},
32+
{
33+
id: "5",
34+
title: "Cute boardie",
35+
order: "https://picsum.photos/480/270?watermelon=5",
36+
},
37+
{
38+
id: "6",
39+
title: "Serious corpo board",
40+
order: "https://picsum.photos/480/270?watermelon=6",
2641
},
2742
]);
2843
@@ -31,12 +46,40 @@ const alerts = useAlerts();
3146
function createBoard() {
3247
alerts.success("Board created!");
3348
}
49+
50+
const getCoolGradient = (index) => {
51+
let finalGradientString = "";
52+
switch (index) {
53+
case 1:
54+
finalGradientString = "from-orange-400 to-pink-500";
55+
break;
56+
case 2:
57+
finalGradientString = "from-green-400 to-blue-400";
58+
break;
59+
case 3:
60+
finalGradientString = "from-purple-400 to-blue-400";
61+
break;
62+
default:
63+
finalGradientString = "from-orange-400 to-yellow-500";
64+
}
65+
return finalGradientString;
66+
};
3467
</script>
3568

3669
<template>
3770
<h1 class="mb-5 text-3xl">Boards</h1>
38-
<div class="flex">
39-
<BoardCard v-for="board in boards" :key="board.id" :board="board" />
71+
<div class="flex flex-wrap gap-2">
72+
<div
73+
class="border rounded-md bg-gradient-to-tr"
74+
v-for="(board, index) in boards"
75+
:key="board.id"
76+
:class="getCoolGradient(index)"
77+
>
78+
<BoardCard
79+
:board="board"
80+
class="transition duration-100 ease-in border rounded-md hover:-rotate-3"
81+
/>
82+
</div>
4083
<button class="text-gray-500" @click="createBoard()">
4184
<span>New Board +</span>
4285
</button>

‎tsconfig.app.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@
88
"baseUrl": ".",
99
"paths": {
1010
"@/*": ["./src/*"]
11-
}
11+
},
12+
"allowJs": true // 👈 add this line
1213
}
1314
}

0 commit comments

Comments
 (0)