Add personal/team note visibility and edit history.
Notes can be marked personal or team, with revision snapshots and restore from the notes UI.
This commit is contained in:
@@ -21,11 +21,14 @@ import type {
|
||||
NoteAiSuggestionDto,
|
||||
NoteChecklistItemDto,
|
||||
NoteDto,
|
||||
NoteRevisionDto,
|
||||
NoteType,
|
||||
NoteVisibility,
|
||||
PaginatedResponse,
|
||||
PersonDto,
|
||||
PipelineBoardDto,
|
||||
} from '@mento/shared';
|
||||
import { NOTE_VISIBILITY_LABELS } from '@mento/shared';
|
||||
|
||||
type ViewMode = 'grid' | 'list';
|
||||
type SortKey = 'updatedAt' | 'createdAt' | 'reminderAt';
|
||||
@@ -39,6 +42,7 @@ const saving = ref(false);
|
||||
const error = ref('');
|
||||
const q = ref('');
|
||||
const typeFilter = ref<NoteType | 'all'>('all');
|
||||
const visibilityFilter = ref<NoteVisibility | 'all'>('all');
|
||||
const sortKey = ref<SortKey>('updatedAt');
|
||||
const viewMode = ref<ViewMode>('grid');
|
||||
const notes = ref<NoteDto[]>([]);
|
||||
@@ -67,10 +71,17 @@ const draftReminder = ref('');
|
||||
const draftLocation = ref('');
|
||||
const draftAnalyze = ref(true);
|
||||
const draftPinned = ref(false);
|
||||
const draftVisibility = ref<NoteVisibility>('team');
|
||||
const draftChecklist = ref<NoteChecklistItemDto[]>([]);
|
||||
const draftFiles = ref<File[]>([]);
|
||||
const existingAttachments = ref<NoteAttachmentDto[]>([]);
|
||||
|
||||
const historyOpen = ref(false);
|
||||
const historyLoading = ref(false);
|
||||
const historyError = ref('');
|
||||
const historyNoteId = ref<string | null>(null);
|
||||
const historyItems = ref<NoteRevisionDto[]>([]);
|
||||
|
||||
const imageInput = ref<HTMLInputElement | null>(null);
|
||||
const fileInput = ref<HTMLInputElement | null>(null);
|
||||
const audioInput = ref<HTMLInputElement | null>(null);
|
||||
@@ -127,6 +138,10 @@ const typeLabelMap: Record<string, string> = {
|
||||
|
||||
const editorTitle = computed(() => (editingId.value ? 'ویرایش' : 'یادداشت جدید'));
|
||||
const draftColorCss = computed(() => colorToCss(draftColor.value));
|
||||
const historyNoteRevisionCount = computed(() => {
|
||||
if (!editingId.value) return 0;
|
||||
return notes.value.find((n) => n.id === editingId.value)?.revisionCount ?? 0;
|
||||
});
|
||||
const personName = (id: string) =>
|
||||
people.value.find((p) => p.id === id)?.fullName ?? '';
|
||||
|
||||
@@ -314,6 +329,10 @@ async function load() {
|
||||
params: {
|
||||
q: q.value || undefined,
|
||||
noteType: typeFilter.value === 'all' ? undefined : typeFilter.value,
|
||||
visibility:
|
||||
visibilityFilter.value === 'all'
|
||||
? undefined
|
||||
: visibilityFilter.value,
|
||||
sort: sortKey.value,
|
||||
limit: 100,
|
||||
},
|
||||
@@ -361,6 +380,7 @@ function resetDraft() {
|
||||
draftLocation.value = '';
|
||||
draftAnalyze.value = true;
|
||||
draftPinned.value = false;
|
||||
draftVisibility.value = 'team';
|
||||
draftChecklist.value = [];
|
||||
draftFiles.value = [];
|
||||
existingAttachments.value = [];
|
||||
@@ -384,6 +404,8 @@ function openEditor(mode: OpenMode = 'default', note?: NoteDto) {
|
||||
draftLocation.value = note.locationText ?? '';
|
||||
draftAnalyze.value = note.analyzeEnabled !== false;
|
||||
draftPinned.value = note.pinned;
|
||||
draftVisibility.value =
|
||||
note.visibility === 'personal' ? 'personal' : 'team';
|
||||
draftChecklist.value = [...(note.checklist ?? [])];
|
||||
draftFiles.value = [];
|
||||
existingAttachments.value = [...note.attachments];
|
||||
@@ -487,6 +509,7 @@ async function saveNote() {
|
||||
title: draftTitle.value.trim() || null,
|
||||
body: body || (checklist.length ? 'چکلیست' : ''),
|
||||
noteType: draftType.value,
|
||||
visibility: draftVisibility.value,
|
||||
color: draftColor.value === 'default' ? 'default' : draftColor.value,
|
||||
tags: parseTags(draftTags.value),
|
||||
personId: draftPersonId.value || null,
|
||||
@@ -532,6 +555,56 @@ async function saveNote() {
|
||||
}
|
||||
}
|
||||
|
||||
async function openHistory(note: NoteDto) {
|
||||
menuOpenId.value = null;
|
||||
historyNoteId.value = note.id;
|
||||
historyOpen.value = true;
|
||||
historyLoading.value = true;
|
||||
historyError.value = '';
|
||||
historyItems.value = [];
|
||||
try {
|
||||
const { data } = await api.get<NoteRevisionDto[]>(
|
||||
`/notes/${note.id}/revisions`,
|
||||
);
|
||||
historyItems.value = data;
|
||||
} catch (e) {
|
||||
historyError.value = axios.isAxiosError(e)
|
||||
? String(
|
||||
(e.response?.data as { message?: string })?.message ??
|
||||
'بارگذاری تاریخچه ناموفق بود.',
|
||||
)
|
||||
: 'بارگذاری تاریخچه ناموفق بود.';
|
||||
} finally {
|
||||
historyLoading.value = false;
|
||||
}
|
||||
}
|
||||
|
||||
function closeHistory() {
|
||||
historyOpen.value = false;
|
||||
historyNoteId.value = null;
|
||||
historyItems.value = [];
|
||||
historyError.value = '';
|
||||
}
|
||||
|
||||
async function restoreRevision(revisionId: string) {
|
||||
if (!historyNoteId.value) return;
|
||||
if (!confirm('این نسخه جایگزین متن فعلی شود؟')) return;
|
||||
try {
|
||||
await api.post(
|
||||
`/notes/${historyNoteId.value}/revisions/${revisionId}/restore`,
|
||||
);
|
||||
closeHistory();
|
||||
await load();
|
||||
} catch (e) {
|
||||
historyError.value = axios.isAxiosError(e)
|
||||
? String(
|
||||
(e.response?.data as { message?: string })?.message ??
|
||||
'بازگردانی ناموفق بود.',
|
||||
)
|
||||
: 'بازگردانی ناموفق بود.';
|
||||
}
|
||||
}
|
||||
|
||||
async function togglePin(id: string) {
|
||||
menuOpenId.value = null;
|
||||
await api.patch(`/notes/${id}/pin`);
|
||||
@@ -587,6 +660,9 @@ function onDocClick(ev: MouseEvent) {
|
||||
watch(typeFilter, () => {
|
||||
void load();
|
||||
});
|
||||
watch(visibilityFilter, () => {
|
||||
void load();
|
||||
});
|
||||
watch(sortKey, () => {
|
||||
void load();
|
||||
});
|
||||
@@ -636,6 +712,31 @@ onBeforeUnmount(() => {
|
||||
<span v-if="chip.value !== 'all'" class="dot" />
|
||||
{{ chip.label }}
|
||||
</button>
|
||||
<span class="chip-sep" aria-hidden="true" />
|
||||
<button
|
||||
type="button"
|
||||
class="chip"
|
||||
:class="{ active: visibilityFilter === 'all' }"
|
||||
@click="visibilityFilter = 'all'"
|
||||
>
|
||||
همه دسترسیها
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="chip tone-team"
|
||||
:class="{ active: visibilityFilter === 'team' }"
|
||||
@click="visibilityFilter = 'team'"
|
||||
>
|
||||
تیمی
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="chip tone-private"
|
||||
:class="{ active: visibilityFilter === 'personal' }"
|
||||
@click="visibilityFilter = 'personal'"
|
||||
>
|
||||
فقط من
|
||||
</button>
|
||||
</div>
|
||||
<div class="toolbar-end">
|
||||
<div class="view-toggle" role="group" aria-label="نمای لیست">
|
||||
@@ -725,6 +826,31 @@ onBeforeUnmount(() => {
|
||||
<span v-if="chip.value !== 'all'" class="dot" />
|
||||
{{ chip.label }}
|
||||
</button>
|
||||
<span class="chip-sep" aria-hidden="true" />
|
||||
<button
|
||||
type="button"
|
||||
class="chip"
|
||||
:class="{ active: visibilityFilter === 'all' }"
|
||||
@click="visibilityFilter = 'all'"
|
||||
>
|
||||
همه دسترسیها
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="chip tone-team"
|
||||
:class="{ active: visibilityFilter === 'team' }"
|
||||
@click="visibilityFilter = 'team'"
|
||||
>
|
||||
تیمی
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="chip tone-private"
|
||||
:class="{ active: visibilityFilter === 'personal' }"
|
||||
@click="visibilityFilter = 'personal'"
|
||||
>
|
||||
فقط من
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<p v-if="loading" class="state-msg">در حال بارگذاری…</p>
|
||||
@@ -763,6 +889,13 @@ onBeforeUnmount(() => {
|
||||
<button type="button" @click="togglePin(note.id)">
|
||||
{{ note.pinned ? 'برداشتن سنجاق' : 'سنجاق کردن' }}
|
||||
</button>
|
||||
<button
|
||||
v-if="(note.revisionCount ?? 0) > 0"
|
||||
type="button"
|
||||
@click="openHistory(note)"
|
||||
>
|
||||
تاریخچه ویرایش
|
||||
</button>
|
||||
<button type="button" class="danger" @click="removeNote(note.id)">حذف</button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -819,6 +952,16 @@ onBeforeUnmount(() => {
|
||||
<span class="type-badge" :class="`tone-${typeTone(String(note.noteType))}`">
|
||||
{{ typeLabel(String(note.noteType)) }}
|
||||
</span>
|
||||
<span
|
||||
class="vis-badge"
|
||||
:class="note.visibility === 'personal' ? 'private' : 'team'"
|
||||
>
|
||||
{{
|
||||
note.visibility === 'personal'
|
||||
? NOTE_VISIBILITY_LABELS.personal
|
||||
: NOTE_VISIBILITY_LABELS.team
|
||||
}}
|
||||
</span>
|
||||
<span v-if="pendingAi[note.id]" class="ai-badge" title="پیشنهاد AI">
|
||||
<UiIcon name="sparkle" :size="12" />
|
||||
AI
|
||||
@@ -891,6 +1034,19 @@ onBeforeUnmount(() => {
|
||||
<header class="panel-head">
|
||||
<h2>{{ editorTitle }}</h2>
|
||||
<div class="panel-head-actions">
|
||||
<button
|
||||
v-if="editingId && historyNoteRevisionCount > 0"
|
||||
type="button"
|
||||
class="btn-ghost history-btn"
|
||||
@click="
|
||||
openHistory({
|
||||
id: editingId,
|
||||
revisionCount: historyNoteRevisionCount,
|
||||
} as NoteDto)
|
||||
"
|
||||
>
|
||||
تاریخچه
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-save mobile-only-flex"
|
||||
@@ -1028,6 +1184,15 @@ onBeforeUnmount(() => {
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>سطح دسترسی</span>
|
||||
<select v-model="draftVisibility">
|
||||
<option value="team">{{ NOTE_VISIBILITY_LABELS.team }}</option>
|
||||
<option value="personal">
|
||||
{{ NOTE_VISIBILITY_LABELS.personal }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<div class="field-row">
|
||||
<label class="field">
|
||||
<span>مرتبط با — مشتری</span>
|
||||
@@ -1075,6 +1240,13 @@ onBeforeUnmount(() => {
|
||||
<span v-if="draftPersonId" class="tag-chip">{{ personName(draftPersonId) }}</span>
|
||||
<span v-if="draftDealId" class="tag-chip">معامله</span>
|
||||
<span v-if="draftLocation" class="tag-chip">{{ draftLocation }}</span>
|
||||
<span class="tag-chip">
|
||||
{{
|
||||
draftVisibility === 'personal'
|
||||
? NOTE_VISIBILITY_LABELS.personal
|
||||
: NOTE_VISIBILITY_LABELS.team
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<NoteAiSuggestionPanel
|
||||
@@ -1178,6 +1350,15 @@ onBeforeUnmount(() => {
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>سطح دسترسی</span>
|
||||
<select v-model="draftVisibility">
|
||||
<option value="team">{{ NOTE_VISIBILITY_LABELS.team }}</option>
|
||||
<option value="personal">
|
||||
{{ NOTE_VISIBILITY_LABELS.personal }}
|
||||
</option>
|
||||
</select>
|
||||
</label>
|
||||
<label class="field">
|
||||
<span>یادآوری</span>
|
||||
<JalaliDateInput v-model="draftReminder" mode="datetime" icon="bell" />
|
||||
@@ -1201,6 +1382,58 @@ onBeforeUnmount(() => {
|
||||
</aside>
|
||||
</div>
|
||||
</Teleport>
|
||||
|
||||
<Teleport to="body">
|
||||
<div v-if="historyOpen" class="history-root">
|
||||
<div class="history-backdrop" @click="closeHistory" />
|
||||
<aside class="history-panel" role="dialog" aria-label="تاریخچه ویرایش">
|
||||
<header class="history-head">
|
||||
<h2>تاریخچه ویرایش</h2>
|
||||
<button type="button" class="icon-btn" @click="closeHistory">
|
||||
<UiIcon name="x" :size="20" />
|
||||
</button>
|
||||
</header>
|
||||
<p v-if="historyLoading" class="state-msg">در حال بارگذاری…</p>
|
||||
<p v-else-if="historyError" class="banner-error">{{ historyError }}</p>
|
||||
<p v-else-if="!historyItems.length" class="state-msg">
|
||||
هنوز نسخهای ذخیره نشده.
|
||||
</p>
|
||||
<ul v-else class="history-list">
|
||||
<li v-for="rev in historyItems" :key="rev.id" class="history-item">
|
||||
<div class="history-meta">
|
||||
<strong>
|
||||
{{ formatJalaliDay(new Date(rev.createdAt)) }}
|
||||
·
|
||||
{{ formatClockFa(new Date(rev.createdAt)) }}
|
||||
</strong>
|
||||
<span v-if="rev.editor?.fullName" class="muted">
|
||||
{{ rev.editor.fullName }}
|
||||
</span>
|
||||
<span
|
||||
class="vis-badge"
|
||||
:class="rev.visibility === 'personal' ? 'private' : 'team'"
|
||||
>
|
||||
{{
|
||||
rev.visibility === 'personal'
|
||||
? NOTE_VISIBILITY_LABELS.personal
|
||||
: NOTE_VISIBILITY_LABELS.team
|
||||
}}
|
||||
</span>
|
||||
</div>
|
||||
<h4 v-if="rev.title">{{ rev.title }}</h4>
|
||||
<p class="history-body">{{ previewBody(rev.body) }}</p>
|
||||
<button
|
||||
type="button"
|
||||
class="btn-ghost"
|
||||
@click="restoreRevision(rev.id)"
|
||||
>
|
||||
بازگردانی این نسخه
|
||||
</button>
|
||||
</li>
|
||||
</ul>
|
||||
</aside>
|
||||
</div>
|
||||
</Teleport>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
@@ -1336,6 +1569,34 @@ onBeforeUnmount(() => {
|
||||
background: #f5f3ff;
|
||||
border-color: #c4b5fd;
|
||||
}
|
||||
.chip-sep {
|
||||
width: 1px;
|
||||
align-self: stretch;
|
||||
margin: 0.15rem 0.2rem;
|
||||
background: #e2e8f0;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
.chip.tone-team {
|
||||
color: #0f766e;
|
||||
}
|
||||
.chip.tone-team.active {
|
||||
background: #ccfbf1;
|
||||
border-color: #5eead4;
|
||||
color: #0f766e;
|
||||
}
|
||||
.chip.tone-private {
|
||||
color: #9a3412;
|
||||
}
|
||||
.chip.tone-private.active {
|
||||
background: #ffedd5;
|
||||
border-color: #fdba74;
|
||||
color: #9a3412;
|
||||
}
|
||||
.chip:not([class*='tone-']).active {
|
||||
background: var(--teal);
|
||||
border-color: var(--teal);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.view-toggle {
|
||||
display: inline-flex;
|
||||
@@ -1678,6 +1939,22 @@ onBeforeUnmount(() => {
|
||||
background: #f5f3ff;
|
||||
color: #7c3aed;
|
||||
}
|
||||
.vis-badge {
|
||||
font-size: 0.7rem;
|
||||
font-weight: 600;
|
||||
padding: 0.15rem 0.45rem;
|
||||
border-radius: 999px;
|
||||
background: #ecfdf5;
|
||||
color: #0f766e;
|
||||
}
|
||||
.vis-badge.private {
|
||||
background: #ffedd5;
|
||||
color: #9a3412;
|
||||
}
|
||||
.vis-badge.team {
|
||||
background: #ecfdf5;
|
||||
color: #0f766e;
|
||||
}
|
||||
.ai-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
@@ -2193,4 +2470,90 @@ onBeforeUnmount(() => {
|
||||
font-size: 0.88rem;
|
||||
}
|
||||
}
|
||||
|
||||
.history-btn {
|
||||
padding: 0.35rem 0.65rem;
|
||||
font-size: 0.82rem;
|
||||
}
|
||||
.history-root {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 120;
|
||||
display: grid;
|
||||
place-items: center;
|
||||
padding: 1rem;
|
||||
}
|
||||
.history-backdrop {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(15, 23, 42, 0.45);
|
||||
}
|
||||
.history-panel {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
width: min(100%, 480px);
|
||||
max-height: min(88vh, 640px);
|
||||
overflow: auto;
|
||||
background: #fff;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
|
||||
padding: 1rem 1.1rem 1.25rem;
|
||||
}
|
||||
.history-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
.history-head h2 {
|
||||
margin: 0;
|
||||
font-size: 1.1rem;
|
||||
font-weight: 650;
|
||||
color: #0f172a;
|
||||
}
|
||||
.history-list {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.85rem;
|
||||
}
|
||||
.history-item {
|
||||
border: 1px solid #e2e8f0;
|
||||
border-radius: 10px;
|
||||
padding: 0.75rem 0.85rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0.4rem;
|
||||
}
|
||||
.history-meta {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.35rem 0.55rem;
|
||||
align-items: center;
|
||||
font-size: 0.82rem;
|
||||
color: #334155;
|
||||
}
|
||||
.history-meta .muted {
|
||||
color: #94a3b8;
|
||||
}
|
||||
.history-item h4 {
|
||||
margin: 0;
|
||||
font-size: 0.92rem;
|
||||
color: #0f172a;
|
||||
}
|
||||
.history-body {
|
||||
margin: 0;
|
||||
font-size: 0.88rem;
|
||||
color: #475569;
|
||||
white-space: pre-wrap;
|
||||
line-height: 1.55;
|
||||
}
|
||||
.history-item .btn-ghost {
|
||||
align-self: flex-start;
|
||||
padding: 0.35rem 0.7rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user