refactor(workspace): extract communications sidebars
This commit is contained in:
Ruslan Bakiev
@@ -0,0 +1,222 @@
|
||||
<script setup lang="ts">
|
||||
type ContactRightPanelMode = "summary" | "documents";
|
||||
|
||||
defineProps<{
|
||||
selectedWorkspaceContactDocuments: any[];
|
||||
contactRightPanelMode: ContactRightPanelMode;
|
||||
onContactRightPanelModeChange: (mode: ContactRightPanelMode) => void;
|
||||
selectedDocumentId: string;
|
||||
onSelectedDocumentIdChange: (documentId: string) => void;
|
||||
contactDocumentsSearch: string;
|
||||
onContactDocumentsSearchInput: (value: string) => void;
|
||||
filteredSelectedWorkspaceContactDocuments: any[];
|
||||
formatStamp: (iso: string) => string;
|
||||
openDocumentsTab: (focusDocument?: boolean) => void;
|
||||
selectedWorkspaceDeal: any | null;
|
||||
isReviewHighlightedDeal: (dealId: string) => boolean;
|
||||
contextPickerEnabled: boolean;
|
||||
hasContextScope: (scope: "deal" | "summary") => boolean;
|
||||
toggleContextScope: (scope: "deal" | "summary") => void;
|
||||
formatDealHeadline: (deal: any) => string;
|
||||
selectedWorkspaceDealSubtitle: string;
|
||||
selectedWorkspaceDealSteps: any[];
|
||||
selectedDealStepsExpanded: boolean;
|
||||
onSelectedDealStepsExpandedChange: (value: boolean) => void;
|
||||
isDealStepDone: (step: any) => boolean;
|
||||
formatDealStepMeta: (step: any) => string;
|
||||
activeReviewContactDiff: {
|
||||
contactId?: string;
|
||||
before?: string;
|
||||
after?: string;
|
||||
} | null;
|
||||
selectedWorkspaceContact: {
|
||||
id: string;
|
||||
description: string;
|
||||
} | null;
|
||||
}>();
|
||||
|
||||
function onDocumentsSearchInput(event: Event) {
|
||||
const target = event.target as HTMLInputElement | null;
|
||||
onContactDocumentsSearchInput(target?.value ?? "");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="h-full min-h-0">
|
||||
<div class="flex h-full min-h-0 flex-col p-3">
|
||||
<div
|
||||
v-if="selectedWorkspaceContactDocuments.length"
|
||||
class="mb-2 flex flex-wrap items-center gap-1.5 rounded-xl border border-base-300 bg-base-200/35 px-2 py-1.5"
|
||||
>
|
||||
<button
|
||||
class="badge badge-sm badge-outline"
|
||||
@click="onContactRightPanelModeChange('documents')"
|
||||
>
|
||||
{{ selectedWorkspaceContactDocuments.length }} documents
|
||||
</button>
|
||||
<button
|
||||
v-for="doc in selectedWorkspaceContactDocuments.slice(0, 15)"
|
||||
:key="`contact-doc-chip-${doc.id}`"
|
||||
class="rounded-full border border-base-300 bg-base-100 px-2 py-0.5 text-[10px] text-base-content/80 hover:bg-base-200/70"
|
||||
@click="onContactRightPanelModeChange('documents'); onSelectedDocumentIdChange(doc.id)"
|
||||
>
|
||||
{{ doc.title }}
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div v-if="contactRightPanelMode === 'documents'" class="min-h-0 flex-1 overflow-y-auto pr-1">
|
||||
<div class="sticky top-0 z-10 border-b border-base-300 bg-base-100 pb-2">
|
||||
<div class="flex items-center justify-between gap-2">
|
||||
<p class="text-xs font-semibold uppercase tracking-wide text-base-content/60">
|
||||
Contact documents
|
||||
</p>
|
||||
<button class="btn btn-ghost btn-xs" @click="onContactRightPanelModeChange('summary')">Summary</button>
|
||||
</div>
|
||||
<input
|
||||
:value="contactDocumentsSearch"
|
||||
type="text"
|
||||
class="input input-bordered input-xs mt-2 w-full"
|
||||
placeholder="Search documents..."
|
||||
@input="onDocumentsSearchInput"
|
||||
>
|
||||
</div>
|
||||
<div class="mt-2 space-y-1.5">
|
||||
<article
|
||||
v-for="doc in filteredSelectedWorkspaceContactDocuments"
|
||||
:key="`contact-doc-right-${doc.id}`"
|
||||
class="w-full rounded-xl border border-base-300 px-2.5 py-2 text-left transition hover:bg-base-200/50"
|
||||
:class="selectedDocumentId === doc.id ? 'border-primary bg-primary/10' : ''"
|
||||
@click="onSelectedDocumentIdChange(doc.id)"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<p class="min-w-0 flex-1 truncate text-xs font-semibold">{{ doc.title }}</p>
|
||||
</div>
|
||||
<p class="mt-0.5 line-clamp-2 text-[11px] text-base-content/70">{{ doc.summary }}</p>
|
||||
<div class="mt-1 flex items-center justify-between gap-2">
|
||||
<p class="text-[10px] text-base-content/55">Updated {{ formatStamp(doc.updatedAt) }}</p>
|
||||
<button class="btn btn-ghost btn-xs px-1" @click.stop="onSelectedDocumentIdChange(doc.id); openDocumentsTab(true)">Open</button>
|
||||
</div>
|
||||
</article>
|
||||
<p v-if="filteredSelectedWorkspaceContactDocuments.length === 0" class="px-1 py-2 text-xs text-base-content/55">
|
||||
No linked documents.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-else class="min-h-0 flex-1 space-y-3 overflow-y-auto pr-1">
|
||||
<div
|
||||
v-if="selectedWorkspaceDeal"
|
||||
class="rounded-xl border border-base-300 bg-base-200/30 p-2.5"
|
||||
:class="[
|
||||
isReviewHighlightedDeal(selectedWorkspaceDeal.id) ? 'border-primary/60 bg-primary/10' : '',
|
||||
contextPickerEnabled ? 'context-scope-block context-scope-block-active' : '',
|
||||
hasContextScope('deal') ? 'context-scope-block-selected' : '',
|
||||
]"
|
||||
@click="toggleContextScope('deal')"
|
||||
>
|
||||
<span v-if="contextPickerEnabled" class="context-scope-label">Сделка</span>
|
||||
<p class="text-sm font-medium">
|
||||
{{ formatDealHeadline(selectedWorkspaceDeal) }}
|
||||
</p>
|
||||
<p class="mt-1 text-[11px] text-base-content/75">
|
||||
{{ selectedWorkspaceDealSubtitle }}
|
||||
</p>
|
||||
<button
|
||||
v-if="selectedWorkspaceDealSteps.length"
|
||||
class="mt-2 text-[11px] font-medium text-primary hover:underline"
|
||||
@click="onSelectedDealStepsExpandedChange(!selectedDealStepsExpanded)"
|
||||
>
|
||||
{{ selectedDealStepsExpanded ? "Скрыть шаги" : `Показать шаги (${selectedWorkspaceDealSteps.length})` }}
|
||||
</button>
|
||||
<div v-if="selectedDealStepsExpanded && selectedWorkspaceDealSteps.length" class="mt-2 space-y-1.5">
|
||||
<div
|
||||
v-for="step in selectedWorkspaceDealSteps"
|
||||
:key="step.id"
|
||||
class="flex items-start gap-2 rounded-lg border border-base-300/70 bg-base-100/80 px-2 py-1.5"
|
||||
>
|
||||
<input
|
||||
type="checkbox"
|
||||
class="checkbox checkbox-xs mt-0.5"
|
||||
:checked="isDealStepDone(step)"
|
||||
disabled
|
||||
>
|
||||
<div class="min-w-0 flex-1">
|
||||
<p class="truncate text-[11px] font-medium" :class="isDealStepDone(step) ? 'line-through text-base-content/60' : 'text-base-content/90'">
|
||||
{{ step.title }}
|
||||
</p>
|
||||
<p class="mt-0.5 text-[10px] text-base-content/55">{{ formatDealStepMeta(step) }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div
|
||||
class="relative"
|
||||
:class="[
|
||||
contextPickerEnabled ? 'context-scope-block context-scope-block-active' : '',
|
||||
hasContextScope('summary') ? 'context-scope-block-selected' : '',
|
||||
]"
|
||||
@click="toggleContextScope('summary')"
|
||||
>
|
||||
<span v-if="contextPickerEnabled" class="context-scope-label">Summary</span>
|
||||
<p class="mb-2 text-xs font-semibold uppercase tracking-wide text-base-content/60">Summary</p>
|
||||
<div
|
||||
v-if="activeReviewContactDiff && selectedWorkspaceContact && activeReviewContactDiff.contactId === selectedWorkspaceContact.id"
|
||||
class="mb-2 rounded-xl border border-primary/35 bg-primary/5 p-2"
|
||||
>
|
||||
<p class="text-[11px] font-semibold uppercase tracking-wide text-primary/80">Review diff</p>
|
||||
<p class="mt-1 text-[11px] text-base-content/65">Before</p>
|
||||
<pre class="mt-1 whitespace-pre-wrap rounded-lg border border-base-300/70 bg-base-100 px-2 py-1.5 text-[11px] leading-relaxed text-base-content/65 line-through">{{ activeReviewContactDiff.before || "Empty" }}</pre>
|
||||
<p class="mt-2 text-[11px] text-base-content/65">After</p>
|
||||
<pre class="mt-1 whitespace-pre-wrap rounded-lg border border-success/40 bg-success/10 px-2 py-1.5 text-[11px] leading-relaxed text-base-content">{{ activeReviewContactDiff.after || "Empty" }}</pre>
|
||||
</div>
|
||||
<ContactCollaborativeEditor
|
||||
v-if="selectedWorkspaceContact"
|
||||
:key="`contact-summary-${selectedWorkspaceContact.id}`"
|
||||
v-model="selectedWorkspaceContact.description"
|
||||
:room="`crm-contact-${selectedWorkspaceContact.id}`"
|
||||
placeholder="Contact summary..."
|
||||
:plain="true"
|
||||
/>
|
||||
<p v-else class="text-xs text-base-content/60">No contact selected.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.context-scope-block {
|
||||
position: relative;
|
||||
border-radius: 16px;
|
||||
outline: 1px solid color-mix(in oklab, var(--color-base-content) 14%, transparent);
|
||||
transition: outline-color 160ms ease, box-shadow 160ms ease;
|
||||
}
|
||||
|
||||
.context-scope-block-active {
|
||||
outline-color: color-mix(in oklab, var(--color-primary) 52%, transparent);
|
||||
box-shadow:
|
||||
0 0 0 1px color-mix(in oklab, var(--color-primary) 30%, transparent) inset,
|
||||
0 0 0 3px color-mix(in oklab, var(--color-primary) 12%, transparent);
|
||||
}
|
||||
|
||||
.context-scope-block-selected {
|
||||
outline-color: color-mix(in oklab, var(--color-primary) 70%, transparent);
|
||||
box-shadow: 0 0 0 1px color-mix(in oklab, var(--color-primary) 40%, transparent) inset;
|
||||
}
|
||||
|
||||
.context-scope-label {
|
||||
position: absolute;
|
||||
top: -10px;
|
||||
left: 12px;
|
||||
padding: 2px 8px;
|
||||
border-radius: 999px;
|
||||
font-size: 10px;
|
||||
letter-spacing: 0.06em;
|
||||
text-transform: uppercase;
|
||||
background: color-mix(in oklab, var(--color-primary) 18%, var(--color-base-100));
|
||||
color: color-mix(in oklab, var(--color-primary-content) 72%, var(--color-base-content));
|
||||
border: 1px solid color-mix(in oklab, var(--color-primary) 42%, transparent);
|
||||
pointer-events: none;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,206 @@
|
||||
<script setup lang="ts">
|
||||
type PeopleListMode = "contacts" | "deals";
|
||||
|
||||
defineProps<{
|
||||
peopleListMode: PeopleListMode;
|
||||
peopleSearch: string;
|
||||
peopleSortOptions: Array<{ value: string; label: string }>;
|
||||
peopleSortMode: string;
|
||||
peopleContactList: any[];
|
||||
selectedCommThreadId: string;
|
||||
isReviewHighlightedContact: (contactId: string) => boolean;
|
||||
openCommunicationThread: (contactName: string) => void;
|
||||
avatarSrcForThread: (thread: any) => string;
|
||||
markAvatarBroken: (threadId: string) => void;
|
||||
contactInitials: (contactName: string) => string;
|
||||
formatThreadTime: (iso: string) => string;
|
||||
threadChannelLabel: (thread: any) => string;
|
||||
threadInboxes: (thread: any) => any[];
|
||||
setInboxHidden: (inboxId: string, hidden: boolean) => void;
|
||||
formatInboxLabel: (inbox: any) => string;
|
||||
isInboxToggleLoading: (inboxId: string) => boolean;
|
||||
peopleDealList: any[];
|
||||
selectedDealId: string;
|
||||
isReviewHighlightedDeal: (dealId: string) => boolean;
|
||||
openDealThread: (deal: any) => void;
|
||||
getDealCurrentStepLabel: (deal: any) => string;
|
||||
onPeopleListModeChange: (mode: PeopleListMode) => void;
|
||||
onPeopleSearchInput: (value: string) => void;
|
||||
onPeopleSortModeChange: (mode: string) => void;
|
||||
}>();
|
||||
|
||||
function onSearchInput(event: Event) {
|
||||
const target = event.target as HTMLInputElement | null;
|
||||
onPeopleSearchInput(target?.value ?? "");
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<aside class="h-full min-h-0 border-r border-base-300 flex flex-col md:row-span-2">
|
||||
<div class="sticky top-0 z-20 h-12 border-b border-base-300 bg-base-100 px-2">
|
||||
<div class="flex h-full items-center gap-1">
|
||||
<div class="join rounded-lg border border-base-300 overflow-hidden">
|
||||
<button
|
||||
class="btn btn-ghost btn-sm join-item rounded-none"
|
||||
:class="peopleListMode === 'contacts' ? 'bg-base-200/80 text-base-content' : 'text-base-content/65 hover:text-base-content'"
|
||||
title="Contacts"
|
||||
@click="onPeopleListModeChange('contacts')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current">
|
||||
<path d="M12 12a5 5 0 1 0-5-5 5 5 0 0 0 5 5m0 2c-4.42 0-8 2.24-8 5v1h16v-1c0-2.76-3.58-5-8-5" />
|
||||
</svg>
|
||||
</button>
|
||||
<button
|
||||
class="btn btn-ghost btn-sm join-item rounded-none border-l border-base-300/70"
|
||||
:class="peopleListMode === 'deals' ? 'bg-base-200/80 text-base-content' : 'text-base-content/65 hover:text-base-content'"
|
||||
title="Deals"
|
||||
@click="onPeopleListModeChange('deals')"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current">
|
||||
<path d="M10 3h4a2 2 0 0 1 2 2v2h3a2 2 0 0 1 2 2v3H3V9a2 2 0 0 1 2-2h3V5a2 2 0 0 1 2-2m0 4h4V5h-4zm11 7v5a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-5h7v2h4v-2z" />
|
||||
</svg>
|
||||
</button>
|
||||
</div>
|
||||
<input
|
||||
:value="peopleSearch"
|
||||
type="text"
|
||||
class="input input-bordered input-sm w-full"
|
||||
:placeholder="peopleListMode === 'contacts' ? 'Search contacts' : 'Search deals'"
|
||||
@input="onSearchInput"
|
||||
>
|
||||
|
||||
<div class="dropdown dropdown-end">
|
||||
<button
|
||||
tabindex="0"
|
||||
class="btn btn-ghost btn-sm btn-square"
|
||||
:title="peopleListMode === 'contacts' ? 'Sort contacts' : 'Sort deals'"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" class="h-4 w-4 fill-current">
|
||||
<path d="M3 5h18v2H3zm3 6h12v2H6zm4 6h4v2h-4z" />
|
||||
</svg>
|
||||
</button>
|
||||
|
||||
<div tabindex="0" class="dropdown-content z-20 mt-2 w-52 rounded-xl border border-base-300 bg-base-100 p-2 shadow-lg">
|
||||
<template v-if="peopleListMode === 'contacts'">
|
||||
<p class="px-2 pb-1 text-[11px] font-semibold uppercase tracking-wide text-base-content/55">Sort contacts</p>
|
||||
<button
|
||||
v-for="option in peopleSortOptions"
|
||||
:key="`people-sort-${option.value}`"
|
||||
class="btn btn-ghost btn-sm w-full justify-between"
|
||||
@click="onPeopleSortModeChange(option.value)"
|
||||
>
|
||||
<span>{{ option.label }}</span>
|
||||
<span v-if="peopleSortMode === option.value">✓</span>
|
||||
</button>
|
||||
</template>
|
||||
<p v-else class="px-2 py-1 text-xs text-base-content/60">Deals are sorted by title.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-h-0 flex-1 overflow-y-auto p-0">
|
||||
<div
|
||||
v-if="peopleListMode === 'contacts'"
|
||||
v-for="thread in peopleContactList"
|
||||
:key="thread.id"
|
||||
class="w-full border-b border-base-300 px-3 py-2 text-left transition hover:bg-base-200/40"
|
||||
:class="[
|
||||
selectedCommThreadId === thread.id ? 'bg-primary/10' : '',
|
||||
isReviewHighlightedContact(thread.id) ? 'bg-primary/10 ring-1 ring-primary/45' : '',
|
||||
]"
|
||||
@click="openCommunicationThread(thread.contact)"
|
||||
role="button"
|
||||
tabindex="0"
|
||||
@keydown.enter.prevent="openCommunicationThread(thread.contact)"
|
||||
@keydown.space.prevent="openCommunicationThread(thread.contact)"
|
||||
>
|
||||
<div class="flex items-start gap-2">
|
||||
<div class="avatar shrink-0">
|
||||
<div class="h-8 w-8 rounded-full ring-1 ring-base-300/70">
|
||||
<img
|
||||
v-if="avatarSrcForThread(thread)"
|
||||
:src="avatarSrcForThread(thread)"
|
||||
:alt="thread.contact"
|
||||
@error="markAvatarBroken(thread.id)"
|
||||
>
|
||||
<span v-else class="flex h-full w-full items-center justify-center text-[10px] font-semibold text-base-content/65">
|
||||
{{ contactInitials(thread.contact) }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="min-w-0 flex-1">
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<p class="truncate text-xs font-semibold">{{ thread.contact }}</p>
|
||||
<span class="shrink-0 text-[10px] text-base-content/55">{{ formatThreadTime(thread.lastAt) }}</span>
|
||||
</div>
|
||||
<div class="mt-0.5 flex items-center justify-between gap-2">
|
||||
<p class="min-w-0 flex-1 truncate text-[11px] text-base-content/75">{{ threadChannelLabel(thread) }}</p>
|
||||
<div class="dropdown dropdown-end" @click.stop>
|
||||
<button
|
||||
tabindex="0"
|
||||
class="btn btn-ghost btn-xs btn-square h-5 min-h-5"
|
||||
title="Source visibility settings"
|
||||
>
|
||||
<svg viewBox="0 0 24 24" class="h-3.5 w-3.5 fill-current">
|
||||
<path d="M19.14 12.94a7.43 7.43 0 0 0 .05-.94 7.43 7.43 0 0 0-.05-.94l2.03-1.58a.5.5 0 0 0 .12-.63l-1.92-3.32a.5.5 0 0 0-.6-.22l-2.39.96a7.2 7.2 0 0 0-1.62-.94l-.36-2.54A.5.5 0 0 0 13.9 2h-3.8a.5.5 0 0 0-.49.41L9.25 4.95a7.2 7.2 0 0 0-1.62.94l-2.39-.96a.5.5 0 0 0-.6.22L2.72 8.47a.5.5 0 0 0 .12.63l2.03 1.58a7.43 7.43 0 0 0-.05.94c0 .31.02.63.05.94l-2.03 1.58a.5.5 0 0 0-.12.63l1.92 3.32c.13.23.39.32.6.22l2.39-.96c.5.39 1.05.71 1.62.94l.36 2.54c.04.24.25.41.49.41h3.8c.24 0 .45-.17.49-.41l.36-2.54c.57-.23 1.12-.55 1.62-.94l2.39.96c.22.09.47 0 .6-.22l1.92-3.32a.5.5 0 0 0-.12-.63zM12 15.5A3.5 3.5 0 1 1 12 8a3.5 3.5 0 0 1 0 7.5Z" />
|
||||
</svg>
|
||||
</button>
|
||||
<div tabindex="0" class="dropdown-content z-20 mt-1 w-60 rounded-xl border border-base-300 bg-base-100 p-2 shadow-lg">
|
||||
<p class="px-1 pb-1 text-[10px] font-semibold uppercase tracking-wide text-base-content/55">Sources</p>
|
||||
<div v-if="threadInboxes(thread).length" class="space-y-1">
|
||||
<button
|
||||
v-for="inbox in threadInboxes(thread)"
|
||||
:key="`thread-inbox-setting-${inbox.id}`"
|
||||
class="btn btn-ghost btn-xs h-auto min-h-0 w-full justify-between px-2 py-1 text-left normal-case"
|
||||
@click.stop="setInboxHidden(inbox.id, !inbox.isHidden)"
|
||||
>
|
||||
<span class="min-w-0 truncate">{{ formatInboxLabel(inbox) }}</span>
|
||||
<span class="shrink-0 text-[10px] text-base-content/70">
|
||||
{{
|
||||
isInboxToggleLoading(inbox.id)
|
||||
? "..."
|
||||
: inbox.isHidden
|
||||
? "Hidden"
|
||||
: "Visible"
|
||||
}}
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
<p v-else class="px-1 py-1 text-[11px] text-base-content/60">No sources.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="peopleListMode === 'deals'"
|
||||
v-for="deal in peopleDealList"
|
||||
:key="deal.id"
|
||||
class="w-full border-b border-base-300 px-3 py-2 text-left transition hover:bg-base-200/40"
|
||||
:class="[
|
||||
selectedDealId === deal.id ? 'bg-primary/10' : '',
|
||||
isReviewHighlightedDeal(deal.id) ? 'bg-primary/10 ring-1 ring-primary/45' : '',
|
||||
]"
|
||||
@click="openDealThread(deal)"
|
||||
>
|
||||
<div class="flex items-start justify-between gap-2">
|
||||
<p class="truncate text-xs font-semibold">{{ deal.title }}</p>
|
||||
<span class="shrink-0 text-[10px] text-base-content/55">{{ deal.amount }}</span>
|
||||
</div>
|
||||
<p class="mt-0.5 truncate text-[11px] text-base-content/75">{{ deal.company }} · {{ deal.stage }}</p>
|
||||
<p class="mt-0.5 truncate text-[11px] text-base-content/60">{{ getDealCurrentStepLabel(deal) }}</p>
|
||||
</button>
|
||||
|
||||
<p v-if="peopleListMode === 'contacts' && peopleContactList.length === 0" class="px-1 py-2 text-xs text-base-content/55">
|
||||
No contacts found.
|
||||
</p>
|
||||
<p v-if="peopleListMode === 'deals' && peopleDealList.length === 0" class="px-1 py-2 text-xs text-base-content/55">
|
||||
No deals found.
|
||||
</p>
|
||||
</div>
|
||||
</aside>
|
||||
</template>
|
||||
Reference in New Issue
Block a user