439 lines
10 KiB
Vue
439 lines
10 KiB
Vue
<script setup lang="ts">
|
|
import { nextTick, onBeforeUnmount, ref, watch } from 'vue';
|
|
import UiIcon from '@/components/UiIcon.vue';
|
|
import AddDealButton from './AddDealButton.vue';
|
|
import DealCard from './DealCard.vue';
|
|
import type { PipelineDeal, PipelineStage, PipelineUiCopy } from '@/lib/pipeline-board';
|
|
import { DEAL_BOARD_COPY, PIPELINE_ACCENT, toFaItemCount } from '@/lib/pipeline-board';
|
|
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
stage: PipelineStage;
|
|
draggingId: string | null;
|
|
dropActive: boolean;
|
|
canManage?: boolean;
|
|
isFirst?: boolean;
|
|
isLast?: boolean;
|
|
copy?: PipelineUiCopy;
|
|
}>(),
|
|
{ copy: () => DEAL_BOARD_COPY },
|
|
);
|
|
|
|
const emit = defineEmits<{
|
|
dragStart: [deal: PipelineDeal, event: DragEvent];
|
|
dragEnd: [];
|
|
dragOver: [stageId: string, event: DragEvent];
|
|
drop: [stageId: string, event: DragEvent, index?: number];
|
|
addDeal: [stageId: string];
|
|
openDeal: [dealId: string];
|
|
menuDeal: [dealId: string];
|
|
rename: [stageId: string, title: string];
|
|
delete: [stageId: string];
|
|
move: [stageId: string, dir: -1 | 1];
|
|
columnDragStart: [stageId: string, event: DragEvent];
|
|
columnDragEnd: [];
|
|
}>();
|
|
|
|
const renaming = ref(false);
|
|
const draft = ref('');
|
|
const titleInput = ref<HTMLInputElement | null>(null);
|
|
const menuOpen = ref(false);
|
|
const menuRoot = ref<HTMLElement | null>(null);
|
|
|
|
function onCardDragOver(stageId: string, event: DragEvent) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
emit('dragOver', stageId, event);
|
|
}
|
|
|
|
function onCardDrop(stageId: string, index: number, event: DragEvent) {
|
|
event.preventDefault();
|
|
event.stopPropagation();
|
|
emit('drop', stageId, event, index);
|
|
}
|
|
|
|
function startRename() {
|
|
if (!props.canManage) return;
|
|
draft.value = props.stage.title;
|
|
renaming.value = true;
|
|
menuOpen.value = false;
|
|
void nextTick(() => titleInput.value?.select());
|
|
}
|
|
|
|
function commitRename() {
|
|
if (!renaming.value) return;
|
|
const title = draft.value.trim();
|
|
renaming.value = false;
|
|
if (!title || title === props.stage.title) return;
|
|
emit('rename', props.stage.id, title);
|
|
}
|
|
|
|
function cancelRename() {
|
|
renaming.value = false;
|
|
draft.value = props.stage.title;
|
|
}
|
|
|
|
function toggleMenu() {
|
|
menuOpen.value = !menuOpen.value;
|
|
}
|
|
|
|
function onColumnDragStart(event: DragEvent) {
|
|
event.dataTransfer?.setData('text/plain', `stage:${props.stage.id}`);
|
|
event.dataTransfer!.effectAllowed = 'move';
|
|
emit('columnDragStart', props.stage.id, event);
|
|
}
|
|
|
|
function onDocPointerDown(event: PointerEvent) {
|
|
const target = event.target as Node | null;
|
|
const root = menuRoot.value;
|
|
if (root && target && !root.contains(target)) menuOpen.value = false;
|
|
}
|
|
|
|
function onMenuOpened() {
|
|
document.addEventListener('pointerdown', onDocPointerDown);
|
|
}
|
|
|
|
function onMenuClosed() {
|
|
document.removeEventListener('pointerdown', onDocPointerDown);
|
|
}
|
|
|
|
watch(menuOpen, (open) => {
|
|
if (open) onMenuOpened();
|
|
else onMenuClosed();
|
|
});
|
|
|
|
onBeforeUnmount(() => {
|
|
document.removeEventListener('pointerdown', onDocPointerDown);
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<section
|
|
class="column"
|
|
:class="{ drop: dropActive }"
|
|
:style="{
|
|
'--stage-solid': PIPELINE_ACCENT[stage.color].solid,
|
|
'--stage-soft': PIPELINE_ACCENT[stage.color].soft,
|
|
'--stage-border': PIPELINE_ACCENT[stage.color].border,
|
|
'--stage-text': PIPELINE_ACCENT[stage.color].text,
|
|
}"
|
|
@dragover.prevent="emit('dragOver', stage.id, $event)"
|
|
@drop.prevent="emit('drop', stage.id, $event)"
|
|
>
|
|
<header class="column-head">
|
|
<span
|
|
v-if="canManage"
|
|
class="grip"
|
|
draggable="true"
|
|
title="کشیدن برای جابهجایی"
|
|
aria-label="جابهجایی ستون"
|
|
@dragstart="onColumnDragStart"
|
|
@dragend="emit('columnDragEnd')"
|
|
>
|
|
<UiIcon name="grip" :size="14" />
|
|
</span>
|
|
<div class="title-wrap">
|
|
<span class="dot" aria-hidden="true" />
|
|
<input
|
|
v-if="renaming"
|
|
ref="titleInput"
|
|
v-model="draft"
|
|
class="title-input"
|
|
maxlength="80"
|
|
aria-label="نام ستون"
|
|
@keydown.enter.prevent="commitRename"
|
|
@keydown.esc.prevent="cancelRename"
|
|
@blur="commitRename"
|
|
/>
|
|
<h2
|
|
v-else
|
|
:class="{ editable: canManage }"
|
|
:title="canManage ? 'برای تغییر نام کلیک کنید' : undefined"
|
|
@click="startRename"
|
|
>
|
|
{{ stage.title }}
|
|
</h2>
|
|
</div>
|
|
<span class="count">{{ toFaItemCount(stage.deals.length, copy.itemNoun) }}</span>
|
|
<div v-if="canManage" ref="menuRoot" class="more-wrap">
|
|
<button
|
|
type="button"
|
|
class="icon-btn"
|
|
aria-label="گزینههای ستون"
|
|
:aria-expanded="menuOpen"
|
|
@click.stop="toggleMenu"
|
|
>
|
|
<UiIcon name="dots-v" :size="16" />
|
|
</button>
|
|
<div v-if="menuOpen" class="col-menu" role="menu">
|
|
<button type="button" role="menuitem" @click="startRename">
|
|
تغییر نام
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
:disabled="isFirst"
|
|
@click="emit('move', stage.id, -1); menuOpen = false"
|
|
>
|
|
انتقال به راست
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
:disabled="isLast"
|
|
@click="emit('move', stage.id, 1); menuOpen = false"
|
|
>
|
|
انتقال به چپ
|
|
</button>
|
|
<button
|
|
type="button"
|
|
role="menuitem"
|
|
class="danger"
|
|
@click="emit('delete', stage.id); menuOpen = false"
|
|
>
|
|
حذف ستون
|
|
</button>
|
|
</div>
|
|
</div>
|
|
<button
|
|
type="button"
|
|
class="plus"
|
|
:aria-label="copy.addItemAria"
|
|
@click="emit('addDeal', stage.id)"
|
|
>
|
|
<UiIcon name="plus" :size="16" />
|
|
</button>
|
|
</header>
|
|
|
|
<div class="cards" role="list" :aria-label="stage.title">
|
|
<div
|
|
v-for="(deal, index) in stage.deals"
|
|
:key="deal.id"
|
|
class="card-slot"
|
|
@dragover="onCardDragOver(stage.id, $event)"
|
|
@drop="onCardDrop(stage.id, index, $event)"
|
|
>
|
|
<DealCard
|
|
:deal="deal"
|
|
:accent="stage.color"
|
|
:dragging="draggingId === deal.id"
|
|
:copy="copy"
|
|
@drag-start="(d, e) => emit('dragStart', d, e)"
|
|
@drag-end="emit('dragEnd')"
|
|
@open="emit('openDeal', $event)"
|
|
@menu="emit('menuDeal', $event)"
|
|
/>
|
|
</div>
|
|
<p v-if="!stage.deals.length" class="empty">{{ copy.empty }}</p>
|
|
</div>
|
|
|
|
<AddDealButton :accent="stage.color" :label="copy.addItem" @add="emit('addDeal', stage.id)" />
|
|
</section>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.column {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.75rem;
|
|
flex: 1 1 17.5rem;
|
|
min-width: 17.5rem;
|
|
min-height: 420px;
|
|
padding: 0.75rem;
|
|
border-radius: var(--radius);
|
|
border: 1px solid var(--line);
|
|
background: #fff;
|
|
transition: background 0.15s ease, border-color 0.15s ease;
|
|
}
|
|
|
|
.column.drop {
|
|
background: color-mix(in srgb, var(--stage-soft) 70%, transparent);
|
|
border-color: color-mix(in srgb, var(--stage-border) 80%, transparent);
|
|
}
|
|
|
|
.column-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 0.4rem;
|
|
padding: 0.1rem 0.1rem 0.15rem;
|
|
}
|
|
|
|
.grip {
|
|
display: grid;
|
|
place-items: center;
|
|
width: 1.25rem;
|
|
color: var(--muted);
|
|
cursor: grab;
|
|
flex: 0 0 auto;
|
|
touch-action: none;
|
|
}
|
|
|
|
.grip:active {
|
|
cursor: grabbing;
|
|
}
|
|
|
|
.title-wrap {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
gap: 0.45rem;
|
|
min-width: 0;
|
|
flex: 1;
|
|
}
|
|
|
|
.dot {
|
|
width: 0.55rem;
|
|
height: 0.55rem;
|
|
border-radius: 999px;
|
|
background: var(--stage-solid);
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.column-head h2,
|
|
.title-input {
|
|
margin: 0;
|
|
min-width: 0;
|
|
width: 100%;
|
|
font-size: 0.98rem;
|
|
font-weight: 600;
|
|
color: var(--ink);
|
|
font: inherit;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.column-head h2 {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.column-head h2.editable {
|
|
cursor: text;
|
|
}
|
|
|
|
.title-input {
|
|
height: 1.7rem;
|
|
padding: 0 0.4rem;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
background: #fff;
|
|
}
|
|
|
|
.count {
|
|
font-size: 0.78rem;
|
|
color: var(--muted);
|
|
font-weight: 600;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.more-wrap {
|
|
position: relative;
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
.icon-btn,
|
|
.plus {
|
|
width: var(--control-h);
|
|
height: var(--control-h);
|
|
border-radius: var(--radius);
|
|
display: grid;
|
|
place-items: center;
|
|
background: #fff;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.icon-btn {
|
|
border: 1px solid transparent;
|
|
color: var(--muted);
|
|
}
|
|
|
|
.icon-btn:hover,
|
|
.icon-btn:focus-visible {
|
|
background: var(--stage-soft);
|
|
color: var(--stage-solid);
|
|
outline: none;
|
|
}
|
|
|
|
.plus {
|
|
border: 1.5px solid var(--stage-solid);
|
|
color: var(--stage-solid);
|
|
}
|
|
|
|
.plus:hover,
|
|
.plus:focus-visible {
|
|
background: var(--stage-soft);
|
|
outline: none;
|
|
}
|
|
|
|
.col-menu {
|
|
position: absolute;
|
|
top: calc(100% + 4px);
|
|
inset-inline-end: 0;
|
|
z-index: 8;
|
|
min-width: 10.5rem;
|
|
padding: 0.3rem;
|
|
display: grid;
|
|
gap: 0.1rem;
|
|
background: #fff;
|
|
border: 1px solid var(--line);
|
|
border-radius: var(--radius);
|
|
box-shadow: var(--shadow);
|
|
}
|
|
|
|
.col-menu button {
|
|
border: 0;
|
|
background: transparent;
|
|
padding: 0.45rem 0.7rem;
|
|
font: inherit;
|
|
font-size: 0.86rem;
|
|
color: var(--ink);
|
|
text-align: right;
|
|
cursor: pointer;
|
|
border-radius: var(--radius);
|
|
}
|
|
|
|
.col-menu button:hover:not(:disabled) {
|
|
background: #f8fafc;
|
|
}
|
|
|
|
.col-menu button:disabled {
|
|
opacity: 0.4;
|
|
cursor: default;
|
|
}
|
|
|
|
.col-menu .danger {
|
|
color: var(--danger, #dc2626);
|
|
}
|
|
|
|
.cards {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 0.7rem;
|
|
flex: 1;
|
|
min-width: 0;
|
|
min-height: 4rem;
|
|
}
|
|
|
|
.card-slot {
|
|
min-width: 0;
|
|
}
|
|
|
|
.empty {
|
|
margin: 1rem 0;
|
|
text-align: center;
|
|
color: var(--muted);
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
@container pipeline (max-width: 720px) {
|
|
.column {
|
|
flex: 0 0 min(20rem, 86cqi);
|
|
width: min(20rem, 86cqi);
|
|
min-width: min(20rem, 86cqi);
|
|
max-width: none;
|
|
min-height: 360px;
|
|
scroll-snap-align: start;
|
|
}
|
|
}
|
|
</style>
|