Editing of the project's Kariz page

This commit is contained in:
2026-09-15 19:13:30 +03:30
parent 44f9849d0e
commit e61fad95c6
25 changed files with 1751 additions and 567 deletions
+86 -2
View File
@@ -20,7 +20,8 @@ import UiButton from '@/components/ui/UiButton.vue';
import UiInput from '@/components/ui/UiInput.vue';
import UiModal from '@/components/ui/UiModal.vue';
import DealFormView from '@/views/DealFormView.vue';
import type { PipelineBoardDto, PipelineDto } from '@mento/shared';
import type { ImportContactsResult, PipelineBoardDto, PipelineDto } from '@mento/shared';
import { brand } from '@mento/shared';
import { useAuthStore } from '@/stores/auth';
import { canManageSettings } from '@/lib/roles';
@@ -44,6 +45,9 @@ const newName = ref('');
const dealModal = ref<{ dealId?: string; stageId?: string } | null>(null);
const deleteStageId = ref<string | null>(null);
const stageBusy = ref(false);
const busy = ref(false);
const importMsg = ref('');
const fileInput = ref<HTMLInputElement | null>(null);
const draggingId = ref<string | null>(null);
const draggingColumnId = ref<string | null>(null);
@@ -367,6 +371,64 @@ function onOpenDeal(dealId: string) {
void router.push({ name: 'deal-detail', params: { id: dealId } });
}
async function exportExcel() {
busy.value = true;
importMsg.value = '';
error.value = '';
try {
const { data } = await api.get<Blob>('/deals/export', { responseType: 'blob' });
const url = URL.createObjectURL(data);
const a = document.createElement('a');
a.href = url;
a.download = `${brand.filePrefix}-deals.xlsx`;
a.click();
URL.revokeObjectURL(url);
} catch {
error.value = 'خروجی اکسل ناموفق بود.';
} finally {
busy.value = false;
}
}
function pickImportFile() {
fileInput.value?.click();
}
async function onImportFile(ev: Event) {
const input = ev.target as HTMLInputElement;
const file = input.files?.[0];
input.value = '';
if (!file) return;
busy.value = true;
importMsg.value = '';
error.value = '';
try {
const form = new FormData();
form.append('file', file);
const { data } = await api.post<ImportContactsResult>('/deals/import', form, {
headers: { 'Content-Type': undefined },
});
importMsg.value = `وارد شد: ${data.created} · تکراری رد شد: ${data.skipped}${
data.errors.length ? ` · خطا: ${data.errors.length}` : ''
}${data.boards?.length ? ` · کاریز: ${data.boards.join('، ')}` : ''}`;
if (data.errors.length) {
error.value = data.errors
.slice(0, 3)
.map((e) => `ردیف ${e.row}: ${e.message}`)
.join(' | ');
}
if (data.boardId && data.boardId !== selectedPipelineId.value) {
await router.replace({ name: 'pipeline', query: { pipelineId: data.boardId } });
} else {
await load();
}
} catch (e) {
error.value = apiMessage(e, 'ایمپورت ناموفق بود');
} finally {
busy.value = false;
}
}
function onMenuDeal(dealId: string) {
menuOpenId.value = menuOpenId.value === dealId ? null : dealId;
}
@@ -405,9 +467,26 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
v-model:amount-max="amountMax"
:can-create="canCreatePipeline"
@create="showCreate = true"
/>
>
<template #excel>
<button class="btn-ghost-sm" type="button" :disabled="loading || busy" @click="exportExcel">
خروجی اکسل
</button>
<button class="btn-ghost-sm" type="button" :disabled="loading || busy" @click="pickImportFile">
ورود از اکسل
</button>
<input
ref="fileInput"
type="file"
accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
hidden
@change="onImportFile"
/>
</template>
</PipelineToolbar>
<p v-if="error" class="error">{{ error }}</p>
<p v-if="importMsg" class="ok">{{ importMsg }}</p>
<p v-else-if="loading && !stages.length" class="muted">در حال بارگذاری کاریز…</p>
<PipelineList
@@ -565,6 +644,11 @@ defineExpose({ updateDealStage: applyUpdateDealStage });
font-weight: 600;
}
.ok {
color: #0f766e;
font-weight: 600;
}
.delete-copy {
margin: 0;
line-height: 1.7;
+87 -1
View File
@@ -9,7 +9,8 @@ import UiButton from '@/components/ui/UiButton.vue';
import UiModal from '@/components/ui/UiModal.vue';
import UiIcon from '@/components/UiIcon.vue';
import ProductFormView from '@/views/ProductFormView.vue';
import type { ProductDto } from '@mento/shared';
import type { ImportContactsResult, ProductDto } from '@mento/shared';
import { brand } from '@mento/shared';
type SortKey = 'name' | 'newest' | 'price';
type StatusFilter = 'all' | 'active' | 'inactive';
@@ -30,6 +31,9 @@ const menuId = ref<string | null>(null);
const sortOpen = ref(false);
const moreOpen = ref(false);
const productModal = ref(false);
const busy = ref(false);
const importMsg = ref('');
const fileInput = ref<HTMLInputElement | null>(null);
const categories = computed(() => {
const set = new Set<string>();
@@ -161,6 +165,70 @@ async function load() {
}
}
async function exportExcel() {
closeMenus();
busy.value = true;
importMsg.value = '';
error.value = '';
try {
const { data } = await api.get<Blob>('/products/export', {
params: { q: q.value || undefined },
responseType: 'blob',
});
const url = URL.createObjectURL(data);
const a = document.createElement('a');
a.href = url;
a.download = `${brand.filePrefix}-products.xlsx`;
a.click();
URL.revokeObjectURL(url);
} catch {
error.value = 'خروجی اکسل ناموفق بود.';
} finally {
busy.value = false;
}
}
function pickImportFile() {
closeMenus();
fileInput.value?.click();
}
async function onImportFile(ev: Event) {
const input = ev.target as HTMLInputElement;
const file = input.files?.[0];
input.value = '';
if (!file) return;
busy.value = true;
importMsg.value = '';
error.value = '';
try {
const form = new FormData();
form.append('file', file);
const { data } = await api.post<ImportContactsResult>('/products/import', form, {
headers: { 'Content-Type': undefined },
});
importMsg.value = `وارد شد: ${data.created} · تکراری رد شد: ${data.skipped}${
data.errors.length ? ` · خطا: ${data.errors.length}` : ''
}`;
if (data.errors.length) {
error.value = data.errors
.slice(0, 3)
.map((e) => `ردیف ${e.row}: ${e.message}`)
.join(' | ');
}
await load();
} catch (e) {
error.value = axios.isAxiosError(e)
? String(
(e.response?.data as { message?: string | string[] })?.message ??
'ایمپورت ناموفق بود',
)
: 'ایمپورت ناموفق بود';
} finally {
busy.value = false;
}
}
async function toggleActive(product: ProductDto) {
closeMenus();
await api.patch(`/products/${product.id}`, { isActive: !product.isActive });
@@ -208,6 +276,19 @@ onMounted(load);
</div>
</div>
<div class="head-actions" @click.stop>
<button class="ghost-btn" type="button" :disabled="busy" @click="exportExcel">
خروجی اکسل
</button>
<button class="ghost-btn" type="button" :disabled="busy" @click="pickImportFile">
ورود از اکسل
</button>
<input
ref="fileInput"
type="file"
accept=".xlsx,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
hidden
@change="onImportFile"
/>
<UiButton type="button" @click="productModal = true">
<UiIcon name="plus" :size="16" />
محصول جدید
@@ -269,6 +350,7 @@ onMounted(load);
</div>
<p v-if="error" class="error">{{ error }}</p>
<p v-if="importMsg" class="ok">{{ importMsg }}</p>
<p v-if="loading" class="muted">در حال بارگذاری…</p>
<template v-else>
@@ -789,6 +871,10 @@ tr:last-child td {
.error {
color: #b91c1c;
}
.ok {
color: #0f766e;
font-weight: 600;
}
.fab {
display: none;
position: fixed;
File diff suppressed because it is too large Load Diff
+74 -15
View File
@@ -6,9 +6,28 @@ import { api } from '@/lib/api';
import type { ProjectCardDto } from '@mento/shared';
import UiIcon from '@/components/UiIcon.vue';
const props = withDefaults(
defineProps<{
embedded?: boolean;
cardId?: string;
initialBoardId?: string;
initialStageId?: string;
}>(),
{ embedded: false },
);
const emit = defineEmits<{
saved: [];
cancel: [];
}>();
const route = useRoute();
const router = useRouter();
const isNew = computed(() => route.name === 'project-card-new');
const id = computed(() => {
if (props.embedded) return props.cardId ?? '';
return String(route.params.id || '');
});
const isNew = computed(() => (props.embedded ? !props.cardId : route.name === 'project-card-new'));
const pageTitle = computed(() => (isNew.value ? 'کارت جدید' : 'ویرایش کارت'));
const loading = ref(false);
@@ -16,17 +35,15 @@ const saving = ref(false);
const error = ref('');
const title = ref('');
const notes = ref('');
const cardId = ref('');
async function load() {
if (isNew.value) return;
const id = String(route.params.id || '');
if (!id) return;
const cardId = id.value;
if (!cardId) return;
loading.value = true;
error.value = '';
try {
const { data } = await api.get<ProjectCardDto>(`/project-cards/${id}`);
cardId.value = data.id;
const { data } = await api.get<ProjectCardDto>(`/project-cards/${cardId}`);
title.value = data.title;
notes.value = data.notes ?? '';
} catch (e) {
@@ -46,21 +63,33 @@ async function save() {
error.value = '';
try {
if (isNew.value) {
const boardId =
typeof route.query.boardId === 'string' ? route.query.boardId : undefined;
const boardId = props.embedded
? props.initialBoardId
: typeof route.query.boardId === 'string'
? route.query.boardId
: undefined;
const { data } = await api.post<ProjectCardDto>('/project-cards', {
title: title.value.trim(),
notes: notes.value.trim() || undefined,
boardId,
stageId: props.embedded ? props.initialStageId : undefined,
personId:
typeof route.query.personId === 'string' ? route.query.personId : undefined,
});
if (props.embedded) {
emit('saved');
return;
}
await router.replace({ name: 'project-card-detail', params: { id: data.id } });
} else {
await api.patch(`/project-cards/${cardId.value}`, {
await api.patch(`/project-cards/${id.value}`, {
title: title.value.trim(),
notes: notes.value.trim() || null,
});
if (props.embedded) {
emit('saved');
return;
}
}
} catch {
error.value = 'ذخیره کارت ناموفق بود.';
@@ -70,10 +99,14 @@ async function save() {
}
async function removeCard() {
if (isNew.value || !cardId.value) return;
if (isNew.value || !id.value) return;
if (!confirm('کارت حذف شود؟')) return;
try {
await api.delete(`/project-cards/${cardId.value}`);
await api.delete(`/project-cards/${id.value}`);
if (props.embedded) {
emit('saved');
return;
}
await router.push({ name: 'projects' });
} catch {
error.value = 'حذف کارت ناموفق بود.';
@@ -81,6 +114,10 @@ async function removeCard() {
}
function cancel() {
if (props.embedded) {
emit('cancel');
return;
}
void router.push({ name: 'projects' });
}
@@ -88,8 +125,20 @@ onMounted(load);
</script>
<template>
<section class="page">
<header class="desktop-head">
<section class="page" :class="{ embedded }">
<div v-if="embedded" class="embed-actions">
<button
class="btn primary"
type="button"
:disabled="saving || title.trim().length < 2"
@click="save"
>
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
</button>
<button class="btn cancel" type="button" @click="cancel">انصراف</button>
<button v-if="!isNew" class="btn danger" type="button" @click="removeCard">حذف</button>
</div>
<header v-if="!embedded" class="desktop-head">
<div class="title-block">
<span class="doc-ico"><UiIcon name="document" :size="22" /></span>
<div>
@@ -115,7 +164,7 @@ onMounted(load);
</div>
</header>
<header class="mobile-head">
<header v-if="!embedded" class="mobile-head">
<button
class="icon-btn"
type="button"
@@ -143,7 +192,7 @@ onMounted(load);
<label for="card-notes">یادداشت</label>
<textarea id="card-notes" v-model="notes" rows="5" maxlength="4000" />
</div>
<div class="mobile-actions">
<div v-if="!embedded" class="mobile-actions">
<button class="btn primary" type="submit" :disabled="saving || title.trim().length < 2">
{{ saving ? 'در حال ذخیره…' : 'ذخیره' }}
</button>
@@ -162,6 +211,16 @@ onMounted(load);
width: 100%;
}
.page.embedded {
max-width: none;
}
.embed-actions {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
.desktop-head {
display: none;
justify-content: space-between;