Skip to content

Commit

Permalink
fix(Vue-trello): refactor to more components
Browse files Browse the repository at this point in the history
  • Loading branch information
@sabertazimi
sabertazimi committed Sep 29, 2021
1 parent fbe0a1c commit ff7567b
Show file tree
Hide file tree
Showing 2 changed files with 175 additions and 158 deletions.
170 changes: 170 additions & 0 deletions packages/vue-trello/src/components/BoardColumn.vue
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,170 @@
<script setup lang="ts">
import { useAppRouter } from 'src/router';
import { useAppStore } from 'src/store';
import type { BoardColumnType, TaskType } from 'src/services';
defineProps<{ columnIndex: number; column: BoardColumnType }>();
const router = useAppRouter();
const store = useAppStore();
const goToTask = (task: TaskType) =>
router.push({ name: 'task', params: { id: task.id } });
const createTask = (event: Event, columnIndex: number) => {
const inputElement = event.target as HTMLInputElement;
store.commit('createTask', {
columnIndex,
name: inputElement.value,
});
inputElement.value = '';
};
const deleteTask = (columnIndex: number, id: string) =>
store.commit('deleteTask', { columnIndex, id });
const pickupTask = (
event: DragEvent,
fromColumnIndex: number,
fromTaskIndex: number
) => {
const dataTransfer = event.dataTransfer;
if (dataTransfer) {
dataTransfer.dropEffect = 'move';
dataTransfer.effectAllowed = 'move';
dataTransfer.setData('fromColumnIndex', fromColumnIndex.toString());
dataTransfer.setData('fromTaskIndex', fromTaskIndex.toString());
}
};
const moveTask = (
event: React.DragEvent,
toColumnIndex: number,
toTaskIndex?: number
) => {
const dataTransfer = event.dataTransfer;
if (dataTransfer) {
const fromColumnIndex = parseInt(dataTransfer.getData('fromColumnIndex'));
const fromTaskIndex = parseInt(dataTransfer.getData('fromTaskIndex'));
store.commit('moveTask', {
fromColumnIndex,
toColumnIndex,
fromTaskIndex,
toTaskIndex,
});
}
};
const deleteColumn = (id: string) => store.commit('deleteColumn', { id });
const pickupColumn = (event: DragEvent, fromColumnIndex: number) => {
const dataTransfer = event.dataTransfer;
if (dataTransfer) {
dataTransfer.dropEffect = 'move';
dataTransfer.effectAllowed = 'move';
dataTransfer.setData('fromColumnIndex', fromColumnIndex.toString());
dataTransfer.setData('type', 'column');
}
};
const moveColumn = (event: React.DragEvent, toColumnIndex: number) => {
const dataTransfer = event.dataTransfer;
if (dataTransfer) {
const fromColumnIndex = parseInt(dataTransfer.getData('fromColumnIndex'));
store.commit('moveColumn', { fromColumnIndex, toColumnIndex });
}
};
const moveTaskOrColumn = (
event: React.DragEvent,
toColumnIndex: number,
toTaskIndex?: number
) => {
const dataTransfer = event.dataTransfer;
const type = dataTransfer.getData('type');
if (type === 'column') {
moveColumn(event, toColumnIndex);
} else {
moveTask(event, toColumnIndex, toTaskIndex);
}
};
</script>

<template>
<div
draggable="true"
@dragenter.prevent
@dragover.prevent
@drop="moveTaskOrColumn($event, columnIndex)"
@dragstart.self="pickupColumn($event, columnIndex)"
>
<div class="flex items-center mb-2 font-bold">
<span>{{ column.name }}</span>
<button
class="btn-block danger ml-auto"
@click.stop="deleteColumn(column.id)"
>
X
</button>
</div>
<div v-if="column.tasks">
<transition-group v-if="column.tasks">
<div
v-for="(task, taskIndex) in column.tasks"
:key="task.id"
class="task"
draggable="true"
@dragenter.prevent
@dragover.prevent
@dragstart="pickupTask($event, columnIndex, taskIndex)"
@drop.stop="moveTaskOrColumn($event, columnIndex, taskIndex)"
@click="goToTask(task)"
>
<div class="task-name">
<span class="px-4 py-2">{{ task.name }}</span>
<button
class="btn-block ml-auto"
@click.stop="deleteTask(columnIndex, task.id)"
>
X
</button>
</div>
<p
v-if="task.description"
class="flex-shrink-0 w-full mt-1 px-4 py-2"
>
{{ task.description }}
</p>
</div>
</transition-group>
<input
type="text"
class="task-input"
placeholder="+ Enter new task ..."
@keyup.enter="createTask($event, columnIndex)"
/>
</div>
</div>
</template>

<style scoped>
.task {
@apply flex items-center flex-wrap mb-2;
@apply bg-white text-gray-900 shadow no-underline cursor-pointer;
}
.task-name {
@apply flex flex-row items-center flex-shrink-0 w-full font-bold;
}
.task-input {
@apply block w-full p-2 bg-transparent border border-transparent outline-none;
@apply focus:border-green-500;
@apply transition duration-500;
}
</style>
163 changes: 5 additions & 158 deletions packages/vue-trello/src/views/Board.vue
View file
Original file line number Diff line number Diff line change
@@ -1,62 +1,11 @@
<script setup lang="ts">
import { computed } from 'vue';
import { useAppRouter } from 'src/router';
import { useAppStore } from 'src/store';
import type { BoardColumnType, TaskType } from 'src/services';
import BoardColumn from 'src/components/BoardColumn.vue';
const router = useAppRouter();
const store = useAppStore();
const columns = computed(() => store.state.board.columns);
const goToTask = (task: TaskType) =>
router.push({ name: 'task', params: { id: task.id } });
const createTask = (event: Event, columnIndex: number) => {
const inputElement = event.target as HTMLInputElement;
store.commit('createTask', {
columnIndex,
name: inputElement.value,
});
inputElement.value = '';
};
const deleteTask = (columnIndex: number, id: string) =>
store.commit('deleteTask', { columnIndex, id });
const pickupTask = (
event: DragEvent,
fromColumnIndex: number,
fromTaskIndex: number
) => {
const dataTransfer = event.dataTransfer;
if (dataTransfer) {
dataTransfer.dropEffect = 'move';
dataTransfer.effectAllowed = 'move';
dataTransfer.setData('fromColumnIndex', fromColumnIndex.toString());
dataTransfer.setData('fromTaskIndex', fromTaskIndex.toString());
}
};
const moveTask = (
event: React.DragEvent,
toColumnIndex: number,
toTaskIndex?: number
) => {
const dataTransfer = event.dataTransfer;
if (dataTransfer) {
const fromColumnIndex = parseInt(dataTransfer.getData('fromColumnIndex'));
const fromTaskIndex = parseInt(dataTransfer.getData('fromTaskIndex'));
store.commit('moveTask', {
fromColumnIndex,
toColumnIndex,
fromTaskIndex,
toTaskIndex,
});
}
};
const createColumn = (event: Event) => {
const inputElement = event.target as HTMLInputElement;
Expand All @@ -65,105 +14,18 @@ const createColumn = (event: Event) => {
inputElement.value = '';
}
};
const deleteColumn = (id: string) => store.commit('deleteColumn', { id });
const pickupColumn = (event: DragEvent, fromColumnIndex: number) => {
const dataTransfer = event.dataTransfer;
if (dataTransfer) {
dataTransfer.dropEffect = 'move';
dataTransfer.effectAllowed = 'move';
dataTransfer.setData('fromColumnIndex', fromColumnIndex.toString());
dataTransfer.setData('type', 'column');
}
};
const moveColumn = (event: React.DragEvent, toColumnIndex: number) => {
const dataTransfer = event.dataTransfer;
if (dataTransfer) {
const fromColumnIndex = parseInt(dataTransfer.getData('fromColumnIndex'));
store.commit('moveColumn', { fromColumnIndex, toColumnIndex });
}
};
const moveTaskOrColumn = (
event: React.DragEvent,
toColumnIndex: number,
toTaskIndex?: number
) => {
const dataTransfer = event.dataTransfer;
const type = dataTransfer.getData('type');
if (type === 'column') {
moveColumn(event, toColumnIndex);
} else {
moveTask(event, toColumnIndex, toTaskIndex);
}
};
</script>

<template>
<div class="board-view">
<div v-if="columns" class="columns">
<div
<BoardColumn
v-for="(column, columnIndex) in columns"
:key="column.id"
class="column"
draggable="true"
@dragenter.prevent
@dragover.prevent
@drop="moveTaskOrColumn($event, columnIndex)"
@dragstart.self="pickupColumn($event, columnIndex)"
>
<div class="flex items-center mb-2 font-bold">
<span>{{ column.name }}</span>
<button
class="btn-block danger ml-auto"
@click.stop="deleteColumn(column.id)"
>
X
</button>
</div>
<div v-if="column.tasks">
<transition-group v-if="column.tasks">
<div
v-for="(task, taskIndex) in column.tasks"
:key="task.id"
class="task"
draggable="true"
@dragenter.prevent
@dragover.prevent
@dragstart="pickupTask($event, columnIndex, taskIndex)"
@drop.stop="moveTaskOrColumn($event, columnIndex, taskIndex)"
@click="goToTask(task)"
>
<div class="task-name">
<span class="px-4 py-2">{{ task.name }}</span>
<button
class="btn-block ml-auto"
@click.stop="deleteTask(columnIndex, task.id)"
>
X
</button>
</div>
<p
v-if="task.description"
class="flex-shrink-0 w-full mt-1 px-4 py-2"
>
{{ task.description }}
</p>
</div>
</transition-group>
<input
type="text"
class="task-input"
placeholder="+ Enter new task ..."
@keyup.enter="createTask($event, columnIndex)"
/>
</div>
</div>
:column-index="columnIndex"
:column="column"
/>
<div class="column">
<input
type="text"
Expand Down Expand Up @@ -197,21 +59,6 @@ const moveTaskOrColumn = (
min-width: 350px;
}
.task {
@apply flex items-center flex-wrap mb-2;
@apply bg-white text-gray-900 shadow no-underline cursor-pointer;
}
.task-name {
@apply flex flex-row items-center flex-shrink-0 w-full font-bold;
}
.task-input {
@apply block w-full p-2 bg-transparent border border-transparent outline-none;
@apply focus:border-green-500;
@apply transition duration-500;
}
.column-input {
@apply block w-full p-2 bg-white border border-transparent outline-none;
@apply focus:border-green-500;
Expand Down

0 comments on commit ff7567b

Please sign in to comment.