Skip to content

Commit da5d1b9

Browse files
danielkellyiodanielkellyio
committed
get data for boards from 8base and delete board in 8base
1 parent 20ae8c2 commit da5d1b9

File tree

10 files changed

+149
-74
lines changed

10 files changed

+149
-74
lines changed

‎components.d.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,6 +8,7 @@ declare module '@vue/runtime-core' {
88
AppButton: typeof import('./src/components/AppButton.vue')['default']
99
AppImage: typeof import('./src/components/AppImage.vue')['default']
1010
AppImageDropzone: typeof import('./src/components/AppImageDropzone.vue')['default']
11+
AppLoader: typeof import('./src/components/AppLoader.vue')['default']
1112
AppPageHeading: typeof import('./src/components/AppPageHeading.vue')['default']
1213
BoardCard: typeof import('./src/components/BoardCard.vue')['default']
1314
BoardDragAndDrop: typeof import('./src/components/BoardDragAndDrop.vue')['default']

‎src/components/AppLoader.vue‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<script setup lang="ts">
2+
import { Loader as KLoader } from "@progress/kendo-vue-indicators";
3+
defineProps<{
4+
overlay: boolean;
5+
}>();
6+
</script>
7+
<template>
8+
<div :class="{ overlay }">
9+
<KLoader type="pulsing" />
10+
</div>
11+
</template>
12+
13+
<style scoped>
14+
.overlay {
15+
@apply absolute top-0 bottom-0 left-0 right-0 flex justify-center items-center;
16+
background: rgba(255, 255, 255, 0.95);
17+
z-index: 2;
18+
}
19+
</style>

‎src/components/BoardDragAndDrop.vue‎

Lines changed: 7 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@ const alerts = useAlerts();
1111
const props = defineProps<{
1212
board: Board;
1313
tasks: Task[];
14-
addTask(task: Partial<Task>): Task;
14+
addTask(task: Partial<Task>): Promise<Task>;
1515
}>();
1616
1717
// events
@@ -22,7 +22,11 @@ const emit = defineEmits<{
2222
// local data
2323
const tasks = reactive(cloneDeep(props.tasks));
2424
const board = reactive(cloneDeep(props.board));
25-
const columns = reactive<Column[]>(JSON.parse(board.order as string));
25+
const columns = reactive<Column[]>(
26+
typeof board.order === "string"
27+
? JSON.parse(board.order as string)
28+
: board.order
29+
);
2630
2731
// methods
2832
function addColumn() {
@@ -69,7 +73,7 @@ async function addTask({ column, title }: { column: Column; title: string }) {
6973
<draggable
7074
:list="column.taskIds"
7175
group="tasks"
72-
item-key="uid"
76+
item-key="id"
7377
:animation="200"
7478
ghost-class="ghost-card"
7579
class="min-h-[400px]"

‎src/graphql/apolloClient.ts‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
import {
2+
ApolloClient,
3+
createHttpLink,
4+
InMemoryCache,
5+
} from "@apollo/client/core";
6+
const httpLink = createHttpLink({
7+
uri: "https://api.8base.com/cl5ittcmt05gm09kz812y1b3t",
8+
});
9+
10+
const cache = new InMemoryCache();
11+
12+
export const apolloClient = new ApolloClient({
13+
link: httpLink,
14+
cache,
15+
});

‎src/graphql/mutations/deleteBoard.mutation.gql‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
mutation deleteBoard($id: ID!) {
2+
boardDelete(filter: { id: $id }, force: true) {
3+
success
4+
}
5+
}

‎src/graphql/mutations/updateBoard.mutation.gql‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
mutation updateBoard($id: ID, $order: JSON, $title: String) {
2+
boardUpdate(filter: { id: $id }, data: { order: $order, title: $title }) {
3+
id
4+
title
5+
order
6+
}
7+
}

‎src/graphql/queries/board.query.gql‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
query getBoard($id: ID) {
2+
board(id: $id) {
3+
id
4+
title
5+
order
6+
createdAt
7+
updatedAt
8+
image {
9+
id
10+
downloadUrl
11+
}
12+
tasks {
13+
items {
14+
id
15+
title
16+
description
17+
createdAt
18+
updatedAt
19+
dueAt
20+
}
21+
}
22+
}
23+
}

‎src/main.ts‎

Lines changed: 5 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -4,29 +4,16 @@ import App from "./App.vue";
44
import router from "./router";
55
import "@/assets/base.css";
66
import "@progress/kendo-theme-default/dist/all.css";
7-
import { ApolloClient, createHttpLink, gql, InMemoryCache } from '@apollo/client/core'
8-
import { DefaultApolloClient } from '@vue/apollo-composable'
9-
10-
11-
const httpLink = createHttpLink({
12-
uri: 'https://api.8base.com/cl5ittcmt05gm09kz812y1b3t'
13-
})
14-
15-
const cache = new InMemoryCache()
16-
17-
const apolloClient = new ApolloClient({
18-
link: httpLink,
19-
cache,
20-
})
21-
7+
import { DefaultApolloClient } from "@vue/apollo-composable";
8+
import { apolloClient } from "@/graphql/apolloClient";
229

2310
const app = createApp({
24-
setup () {
25-
provide(DefaultApolloClient, apolloClient)
11+
setup() {
12+
provide(DefaultApolloClient, apolloClient);
2613
},
2714

2815
render: () => h(App),
29-
})
16+
});
3017

3118
app.use(router).use(createPinia());
3219

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

Lines changed: 65 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,73 +1,89 @@
11
<script setup lang="ts">
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-
import type { Task } from "@/types";
2+
import { toRefs, computed } from "vue";
3+
import type { Task, Board } from "@/types";
4+
import { useAlerts } from "@/stores/alerts";
5+
import { useQuery, useMutation } from "@vue/apollo-composable";
6+
import getBoardQuery from "@/graphql/queries/board.query.gql";
7+
import boardsQuery from "@/graphql/queries/boards.query.gql";
8+
import deleteBoardMutation from "@/graphql/mutations/deleteBoard.mutation.gql";
9+
import updateBoardMutation from "@/graphql/mutations/updateBoard.mutation.gql";
810
import { v4 as uuidv4 } from "uuid";
11+
import { useRouter } from "vue-router";
912
10-
const props = defineProps({
11-
id: String,
12-
});
13+
const alerts = useAlerts();
14+
const router = useRouter();
1315
16+
// Define Props
17+
const props = defineProps<{
18+
id: string;
19+
}>();
1420
const { id: boardId } = toRefs(props);
1521
16-
const board = ref({
17-
id: boardId?.value || "1",
18-
title: "Let's have an amazing time at Vue.js forge!! 🍍",
19-
order: JSON.stringify([
20-
{ id: "1", title: "backlog 🌴", taskIds: ["1", "2"] },
21-
]),
22-
});
22+
// Init Page Data with Board and tasks
23+
const {
24+
result: boardData,
25+
loading: loadingBoard,
26+
onError: onBoardError,
27+
} = useQuery(getBoardQuery, { id: boardId.value });
28+
onBoardError(() => alerts.error("Error loading board"));
29+
const board = computed(() => boardData.value?.board || null);
30+
const tasks = computed(() => board.value?.tasks?.items);
2331
24-
const tasks = ref<Partial<Task>[]>([
25-
{ id: "1", title: "Code like mad people!" },
26-
{ id: "2", title: "Push clean code" },
27-
]);
32+
// handle board updates
33+
const { mutate: updateBoard } = useMutation(updateBoardMutation);
2834
29-
async function addTask(task: Task) {
35+
//handle delete board
36+
const { mutate: deleteBoard, onError: onErrorDeletingBoard } = useMutation(
37+
deleteBoardMutation,
38+
{
39+
update(cache, { data: { boardDelete } }) {
40+
console.log(boardDelete);
41+
cache.updateQuery({ query: boardsQuery }, (res) => ({
42+
boardsList: {
43+
items: res.boardsList.items.filter(
44+
(b: Board) => b.id !== boardId.value
45+
),
46+
},
47+
}));
48+
},
49+
}
50+
);
51+
onErrorDeletingBoard(() => alerts.error("Error deleting board"));
52+
async function deleteBoardIfConfirmed() {
53+
const yes = confirm("Are you sure you want to delete this board?");
54+
if (yes) {
55+
await deleteBoard({ id: boardId.value });
56+
router.push("/");
57+
alerts.success(`Board successfully deleted`);
58+
}
59+
}
60+
61+
function addTask(task: Task) {
3062
return new Promise((resolve, reject) => {
31-
const taskWithTheId = {
63+
const taskWithId = {
3264
...task,
3365
id: uuidv4(),
3466
};
35-
tasks.value.push(taskWithTheId);
36-
resolve(taskWithTheId);
67+
tasks.value.push(taskWithId);
68+
resolve(taskWithId);
3769
});
3870
}
39-
40-
const updateBoard = (b) => {
41-
board.value = b;
42-
// alerts.success("Board updated!");
43-
};
44-
45-
const deleteBoardIfConfirmed = () => {
46-
console.log("delete board");
47-
};
4871
</script>
49-
5072
<template>
51-
<div>
52-
<AppPageHeading>
53-
{{ board.title }}
54-
</AppPageHeading>
55-
<BoardMenu :board="board" @deleteBoard="deleteBoardIfConfirmed" />
73+
<div v-if="board">
74+
<div class="flex justify-between">
75+
<AppPageHeading>
76+
{{ board.title }}
77+
</AppPageHeading>
78+
<BoardMenu :board="board" @deleteBoard="deleteBoardIfConfirmed" />
79+
</div>
5680

5781
<BoardDragAndDrop
58-
:tasks="tasks"
5982
:board="board"
83+
:tasks="tasks"
6084
@update="updateBoard"
6185
:addTask="addTask"
6286
/>
6387
</div>
88+
<AppLoader v-if="loadingBoard" :overlay="true" />
6489
</template>
65-
66-
<style scoped>
67-
pre {
68-
width: 400px;
69-
overflow-x: auto;
70-
white-space: pre-wrap;
71-
word-wrap: break-word;
72-
}
73-
</style>

‎src/pages/boards/index.vue‎

Lines changed: 2 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,9 @@
11
<script setup lang="ts">
22
import { useAlerts } from "@/stores/alerts";
3-
import type { Board } from "@/types";
4-
import { ref } from "vue";
53
import boardsQuery from "@/graphql/queries/boards.query.gql";
64
import createBoardMutation from "@/graphql/mutations/createBoard.mutation.gql";
75
import { useMutation, useQuery } from "@vue/apollo-composable";
8-
import { computed } from "@vue/reactivity";
6+
import { computed } from "vue";
97
108
const { result, loading, onError } = useQuery(boardsQuery);
119
const boards = computed(() => result.value?.boardsList?.items || []);
@@ -71,5 +69,5 @@ const getCoolGradient = (index) => {
7169
<span>New Board +</span>
7270
</button>
7371
</div>
74-
<p v-if="loading">Loading...</p>
72+
<AppLoader v-if="loading" :overlay="true" />
7573
</template>

0 commit comments

Comments
 (0)