392 lines
9.6 KiB
Vue
392 lines
9.6 KiB
Vue
 
|
<script setup lang="ts">
|
|||
|
|
import { computed, onMounted, ref, watch } from 'vue';
|
|||
|
|
import { RouterLink, useRoute, useRouter } from 'vue-router';
|
|||
|
|
import axios from 'axios';
|
|||
|
|
import { api } from '@/lib/api';
|
|||
|
|
import { useAuthStore } from '@/stores/auth';
|
|||
|
|
import type {
|
|||
|
|
ProjectBoardBoardDto,
|
|||
|
|
ProjectBoardDto,
|
|||
|
|
ProjectCardDto,
|
|||
|
|
} from '@mento/shared';
|
|||
|
|
import { canManageSettings } from '@/lib/roles';
|
|||
|
|
|
|||
|
|
const route = useRoute();
|
|||
|
|
const router = useRouter();
|
|||
|
|
const auth = useAuthStore();
|
|||
|
|
const canCreateBoard = computed(() => canManageSettings(auth.user?.role));
|
|||
|
|
const loading = ref(false);
|
|||
|
|
const saving = ref(false);
|
|||
|
|
const error = ref('');
|
|||
|
|
const board = ref<ProjectBoardBoardDto | null>(null);
|
|||
|
|
const boards = ref<ProjectBoardDto[]>([]);
|
|||
|
|
const draggingId = ref<string | null>(null);
|
|||
|
|
const dropStageId = ref<string | null>(null);
|
|||
|
|
const showCreate = ref(false);
|
|||
|
|
const newName = ref('');
|
|||
|
|
|
|||
|
|
const selectedBoardId = computed(() => {
|
|||
|
|
const q = route.query.boardId;
|
|||
|
|
if (typeof q === 'string' && q) return q;
|
|||
|
|
return board.value?.board.id ?? '';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
const cardCount = computed(
|
|||
|
|
() => board.value?.stages.reduce((n, s) => n + s.cards.length, 0) ?? 0,
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
async function loadBoards() {
|
|||
|
|
const { data } = await api.get<ProjectBoardDto[]>('/project-boards');
|
|||
|
|
boards.value = data;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function load() {
|
|||
|
|
loading.value = true;
|
|||
|
|
error.value = '';
|
|||
|
|
try {
|
|||
|
|
await loadBoards();
|
|||
|
|
const boardId =
|
|||
|
|
typeof route.query.boardId === 'string' ? route.query.boardId : undefined;
|
|||
|
|
const { data } = await api.get<ProjectBoardBoardDto>('/project-boards/board', {
|
|||
|
|
params: boardId ? { boardId } : undefined,
|
|||
|
|
});
|
|||
|
|
board.value = data;
|
|||
|
|
if (!boardId || boardId !== data.board.id) {
|
|||
|
|
await router.replace({
|
|||
|
|
name: 'projects',
|
|||
|
|
query: { boardId: data.board.id },
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
} catch (e) {
|
|||
|
|
if (axios.isAxiosError(e) && !e.response) {
|
|||
|
|
error.value = 'اتصال به API برقرار نشد.';
|
|||
|
|
} else {
|
|||
|
|
error.value = 'بارگذاری برد پروژه ناموفق بود.';
|
|||
|
|
}
|
|||
|
|
} finally {
|
|||
|
|
loading.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onSelectBoard(event: Event) {
|
|||
|
|
const id = (event.target as HTMLSelectElement).value;
|
|||
|
|
void router.replace({ name: 'projects', query: { boardId: id } });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function createBoard() {
|
|||
|
|
const name = newName.value.trim();
|
|||
|
|
if (name.length < 2 || saving.value) return;
|
|||
|
|
saving.value = true;
|
|||
|
|
error.value = '';
|
|||
|
|
try {
|
|||
|
|
const { data } = await api.post<ProjectBoardDto>('/project-boards', { name });
|
|||
|
|
newName.value = '';
|
|||
|
|
showCreate.value = false;
|
|||
|
|
await router.replace({ name: 'projects', query: { boardId: data.id } });
|
|||
|
|
} catch {
|
|||
|
|
error.value = 'ساخت برد ناموفق بود.';
|
|||
|
|
} finally {
|
|||
|
|
saving.value = false;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onDragStart(card: ProjectCardDto, event: DragEvent) {
|
|||
|
|
draggingId.value = card.id;
|
|||
|
|
event.dataTransfer?.setData('text/plain', card.id);
|
|||
|
|
event.dataTransfer!.effectAllowed = 'move';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onDragEnd() {
|
|||
|
|
draggingId.value = null;
|
|||
|
|
dropStageId.value = null;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function onDragOver(stageId: string, event: DragEvent) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
dropStageId.value = stageId;
|
|||
|
|
if (event.dataTransfer) event.dataTransfer.dropEffect = 'move';
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
async function onDrop(stageId: string, event: DragEvent) {
|
|||
|
|
event.preventDefault();
|
|||
|
|
const cardId = event.dataTransfer?.getData('text/plain') || draggingId.value;
|
|||
|
|
dropStageId.value = null;
|
|||
|
|
draggingId.value = null;
|
|||
|
|
if (!cardId || !board.value) return;
|
|||
|
|
|
|||
|
|
const current = board.value.stages.find((s) =>
|
|||
|
|
s.cards.some((c) => c.id === cardId),
|
|||
|
|
);
|
|||
|
|
if (current?.id === stageId) return;
|
|||
|
|
|
|||
|
|
try {
|
|||
|
|
await api.patch(`/project-cards/${cardId}/move`, { stageId });
|
|||
|
|
await load();
|
|||
|
|
} catch {
|
|||
|
|
error.value = 'جابهجایی کارت ناموفق بود.';
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
function openCard(id: string) {
|
|||
|
|
void router.push({ name: 'project-card-detail', params: { id } });
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
watch(
|
|||
|
|
() => route.query.boardId,
|
|||
|
|
(id, prev) => {
|
|||
|
|
if (id === prev) return;
|
|||
|
|
void load();
|
|||
|
|
},
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
onMounted(load);
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<template>
|
|||
|
|
<section class="page">
|
|||
|
|
<header class="page-head">
|
|||
|
|
<div>
|
|||
|
|
<p class="eyebrow">پسازفروش</p>
|
|||
|
|
<h1>{{ board?.board.name || 'کاریز پروژه' }}</h1>
|
|||
|
|
<p class="lead">
|
|||
|
|
کارهای داخلی و تحویل را روی برد جابهجا کنید.
|
|||
|
|
<span v-if="board">{{ cardCount }} کارت</span>
|
|||
|
|
</p>
|
|||
|
|
</div>
|
|||
|
|
<div class="actions">
|
|||
|
|
<button class="btn btn-ghost" type="button" :disabled="loading" @click="load">
|
|||
|
|
بروزرسانی
|
|||
|
|
</button>
|
|||
|
|
<RouterLink
|
|||
|
|
class="btn"
|
|||
|
|
:to="{
|
|||
|
|
name: 'project-card-new',
|
|||
|
|
query: selectedBoardId ? { boardId: selectedBoardId } : undefined,
|
|||
|
|
}"
|
|||
|
|
>
|
|||
|
|
کارت جدید
|
|||
|
|
</RouterLink>
|
|||
|
|
</div>
|
|||
|
|
</header>
|
|||
|
|
|
|||
|
|
<div class="pipeline-bar">
|
|||
|
|
<label class="picker">
|
|||
|
|
<span>برد</span>
|
|||
|
|
<select
|
|||
|
|
:value="selectedBoardId"
|
|||
|
|
:disabled="loading || !boards.length"
|
|||
|
|
@change="onSelectBoard"
|
|||
|
|
>
|
|||
|
|
<option v-for="b in boards" :key="b.id" :value="b.id">
|
|||
|
|
{{ b.name }}{{ b.isDefault ? ' (پیشفرض)' : '' }}
|
|||
|
|
</option>
|
|||
|
|
</select>
|
|||
|
|
</label>
|
|||
|
|
<button
|
|||
|
|
v-if="canCreateBoard"
|
|||
|
|
class="btn btn-ghost"
|
|||
|
|
type="button"
|
|||
|
|
@click="showCreate = !showCreate"
|
|||
|
|
>
|
|||
|
|
برد جدید
|
|||
|
|
</button>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
<form
|
|||
|
|
v-if="showCreate && canCreateBoard"
|
|||
|
|
class="create-box"
|
|||
|
|
@submit.prevent="createBoard"
|
|||
|
|
>
|
|||
|
|
<input
|
|||
|
|
v-model="newName"
|
|||
|
|
type="text"
|
|||
|
|
placeholder="نام برد جدید…"
|
|||
|
|
maxlength="120"
|
|||
|
|
required
|
|||
|
|
minlength="2"
|
|||
|
|
/>
|
|||
|
|
<button class="btn" type="submit" :disabled="saving || newName.trim().length < 2">
|
|||
|
|
{{ saving ? 'در حال ساخت…' : 'ساخت' }}
|
|||
|
|
</button>
|
|||
|
|
<button class="btn btn-ghost" type="button" @click="showCreate = false">انصراف</button>
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<p v-if="error" class="error">{{ error }}</p>
|
|||
|
|
<p v-else-if="loading && !board" class="muted">در حال بارگذاری…</p>
|
|||
|
|
|
|||
|
|
<div v-if="board" class="board">
|
|||
|
|
<div
|
|||
|
|
v-for="stage in board.stages"
|
|||
|
|
:key="stage.id"
|
|||
|
|
class="column"
|
|||
|
|
:class="{ drop: dropStageId === stage.id }"
|
|||
|
|
@dragover="onDragOver(stage.id, $event)"
|
|||
|
|
@dragleave="dropStageId = null"
|
|||
|
|
@drop="onDrop(stage.id, $event)"
|
|||
|
|
>
|
|||
|
|
<div class="column-head">
|
|||
|
|
<h2>{{ stage.name }}</h2>
|
|||
|
|
<span>{{ stage.cards.length }}</span>
|
|||
|
|
</div>
|
|||
|
|
<div class="cards">
|
|||
|
|
<article
|
|||
|
|
v-for="card in stage.cards"
|
|||
|
|
:key="card.id"
|
|||
|
|
class="card"
|
|||
|
|
:class="{ dragging: draggingId === card.id }"
|
|||
|
|
draggable="true"
|
|||
|
|
@dragstart="onDragStart(card, $event)"
|
|||
|
|
@dragend="onDragEnd"
|
|||
|
|
@dblclick="openCard(card.id)"
|
|||
|
|
>
|
|||
|
|
<h3 @click="openCard(card.id)">{{ card.title }}</h3>
|
|||
|
|
<p v-if="card.person || card.company" class="meta">
|
|||
|
|
<span v-if="card.person">{{ card.person.fullName }}</span>
|
|||
|
|
<span v-if="card.person && card.company"> · </span>
|
|||
|
|
<span v-if="card.company">{{ card.company.name }}</span>
|
|||
|
|
</p>
|
|||
|
|
<p v-if="card.deal" class="meta">معامله: {{ card.deal.title }}</p>
|
|||
|
|
<p v-if="card.owner" class="meta">مسئول: {{ card.owner.fullName }}</p>
|
|||
|
|
</article>
|
|||
|
|
<p v-if="!stage.cards.length" class="empty">خالی</p>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
</section>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.page {
|
|||
|
|
display: grid;
|
|||
|
|
gap: 1rem;
|
|||
|
|
min-width: 0;
|
|||
|
|
}
|
|||
|
|
.page-head {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
gap: 1rem;
|
|||
|
|
align-items: flex-start;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.eyebrow {
|
|||
|
|
margin: 0;
|
|||
|
|
color: var(--accent);
|
|||
|
|
font-weight: 700;
|
|||
|
|
}
|
|||
|
|
h1 {
|
|||
|
|
margin: 0.2rem 0;
|
|||
|
|
font-size: 1.85rem;
|
|||
|
|
}
|
|||
|
|
.lead,
|
|||
|
|
.muted {
|
|||
|
|
color: var(--muted);
|
|||
|
|
}
|
|||
|
|
.actions {
|
|||
|
|
display: flex;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
}
|
|||
|
|
.pipeline-bar {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.65rem;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.picker {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
flex: 1 1 200px;
|
|||
|
|
min-width: 0;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 0.9rem;
|
|||
|
|
}
|
|||
|
|
.picker select {
|
|||
|
|
flex: 1;
|
|||
|
|
min-width: 0;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 0.65rem 0.85rem;
|
|||
|
|
background: #fff;
|
|||
|
|
font: inherit;
|
|||
|
|
}
|
|||
|
|
.create-box {
|
|||
|
|
display: flex;
|
|||
|
|
flex-wrap: wrap;
|
|||
|
|
gap: 0.5rem;
|
|||
|
|
align-items: center;
|
|||
|
|
}
|
|||
|
|
.create-box input {
|
|||
|
|
flex: 1 1 180px;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 0.65rem 0.85rem;
|
|||
|
|
font: inherit;
|
|||
|
|
}
|
|||
|
|
.error {
|
|||
|
|
color: #b42318;
|
|||
|
|
}
|
|||
|
|
.board {
|
|||
|
|
display: grid;
|
|||
|
|
grid-auto-flow: column;
|
|||
|
|
grid-auto-columns: minmax(240px, 280px);
|
|||
|
|
gap: 0.85rem;
|
|||
|
|
overflow-x: auto;
|
|||
|
|
padding-bottom: 0.5rem;
|
|||
|
|
}
|
|||
|
|
.column {
|
|||
|
|
background: #f6f7f9;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: 16px;
|
|||
|
|
padding: 0.75rem;
|
|||
|
|
min-height: 320px;
|
|||
|
|
}
|
|||
|
|
.column.drop {
|
|||
|
|
outline: 2px dashed var(--accent);
|
|||
|
|
}
|
|||
|
|
.column-head {
|
|||
|
|
display: flex;
|
|||
|
|
justify-content: space-between;
|
|||
|
|
align-items: center;
|
|||
|
|
margin-bottom: 0.65rem;
|
|||
|
|
}
|
|||
|
|
.column-head h2 {
|
|||
|
|
margin: 0;
|
|||
|
|
font-size: 1rem;
|
|||
|
|
}
|
|||
|
|
.column-head span {
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
}
|
|||
|
|
.cards {
|
|||
|
|
display: grid;
|
|||
|
|
gap: 0.55rem;
|
|||
|
|
}
|
|||
|
|
.card {
|
|||
|
|
background: #fff;
|
|||
|
|
border: 1px solid var(--line);
|
|||
|
|
border-radius: 12px;
|
|||
|
|
padding: 0.7rem 0.8rem;
|
|||
|
|
cursor: grab;
|
|||
|
|
}
|
|||
|
|
.card.dragging {
|
|||
|
|
opacity: 0.55;
|
|||
|
|
}
|
|||
|
|
.card h3 {
|
|||
|
|
margin: 0 0 0.35rem;
|
|||
|
|
font-size: 0.98rem;
|
|||
|
|
cursor: pointer;
|
|||
|
|
}
|
|||
|
|
.meta {
|
|||
|
|
margin: 0.15rem 0 0;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 0.82rem;
|
|||
|
|
}
|
|||
|
|
.empty {
|
|||
|
|
margin: 0.5rem 0 0;
|
|||
|
|
color: var(--muted);
|
|||
|
|
font-size: 0.85rem;
|
|||
|
|
text-align: center;
|
|||
|
|
}
|
|||
|
|
</style>
|