akadmin/chatwoot
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

feat: updated the contact details page layout

Browse Source
This commit is contained in:
iamsivin
2026-06-23 11:14:42 +05:30
parent e86222034e
commit df7ec2f596
12 changed files with 449 additions and 316 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue
+73 -36
View File
@@ -1,5 +1,5 @@
<script setup>
import { reactive, computed } from 'vue';
import { reactive, computed, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { useStore, useMapGetter } from 'dashboard/composables/store';
import { useRoute } from 'vue-router';
@@ -8,6 +8,7 @@ import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents';
import Editor from 'dashboard/components-next/Editor/Editor.vue';
import Spinner from 'dashboard/components-next/spinner/Spinner.vue';
import Button from 'dashboard/components-next/button/Button.vue';
import ContactSidebarSection from 'dashboard/components-next/Contacts/ContactsSidebar/ContactSidebarSection.vue';
import ContactNoteItem from './components/ContactNoteItem.vue';
const { t } = useI18n();
@@ -25,6 +26,16 @@ const isFetchingNotes = computed(() => uiFlags.value.isFetching);
const isCreatingNote = computed(() => uiFlags.value.isCreating);
const notes = computed(() => notesByContact.value(route.params.contactId));
const searchQuery = ref('');
const filteredNotes = computed(() => {
const query = searchQuery.value.trim().toLowerCase();
if (!query) return notes.value;
return notes.value.filter(note =>
(note.content || '').toLowerCase().includes(query)
);
});
const getWrittenBy = note => {
const isCurrentUser = note?.user?.id === currentUser.value.id;
return isCurrentUser
@@ -55,47 +66,73 @@ useKeyboardEvents(keyboardEvents);
</script>
<template>
<div class="flex flex-col gap-6">
<Editor
v-model="state.message"
:placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"
focus-on-mount
class="[&>div]:!border-transparent [&>div]:px-4 [&>div]:py-4 px-6"
>
<template #actions>
<div class="flex items-center gap-3">
<Button
variant="link"
color="blue"
size="sm"
:label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.SAVE')"
class="hover:no-underline"
:is-loading="isCreatingNote"
:disabled="!state.message || isCreatingNote"
@click="onAdd(state.message)"
/>
</div>
</template>
</Editor>
<ContactSidebarSection
:title="t('CONTACTS_LAYOUT.PROFILE.SECTIONS.NOTES')"
:count="notes.length || null"
body-class="p-0"
>
<div class="border-b border-n-weak">
<Editor
v-model="state.message"
:placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.PLACEHOLDER')"
class="[&>div]:!border-transparent [&>div]:!bg-transparent [&>div]:px-4 [&>div]:py-3"
>
<template #actions>
<div class="flex items-center gap-3">
<Button
variant="link"
color="blue"
size="sm"
:label="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.SAVE')"
class="hover:no-underline"
:is-loading="isCreatingNote"
:disabled="!state.message || isCreatingNote"
@click="onAdd(state.message)"
/>
</div>
</template>
</Editor>
</div>
<div
v-if="isFetchingNotes"
class="flex items-center justify-center py-10 text-n-slate-11"
>
<Spinner />
</div>
<div v-else-if="notes.length > 0">
<ContactNoteItem
v-for="note in notes"
:key="note.id"
class="mx-6 py-4"
:note="note"
:written-by="getWrittenBy(note)"
allow-delete
@delete="onDelete"
/>
</div>
<p v-else class="px-6 py-6 text-sm leading-6 text-center text-n-slate-11">
<template v-else-if="notes.length > 0">
<div class="px-4 py-3 border-b border-n-weak">
<div class="relative">
<span
class="absolute i-lucide-search size-3.5 top-2.5 left-3 text-n-slate-10"
/>
<input
v-model="searchQuery"
type="search"
:placeholder="t('CONTACTS_LAYOUT.SIDEBAR.NOTES.SEARCH_PLACEHOLDER')"
class="w-full h-8 py-2 pl-10 pr-2 text-sm border outline-none reset-base rounded-lg border-n-weak bg-n-alpha-black2 dark:bg-n-solid-2 text-n-slate-12"
/>
</div>
</div>
<div class="px-4 max-h-[60vh] overflow-y-auto [&>div]:!border-b-0">
<ContactNoteItem
v-for="note in filteredNotes"
:key="note.id"
class="py-3.5"
:note="note"
:written-by="getWrittenBy(note)"
allow-delete
@delete="onDelete"
/>
<p
v-if="filteredNotes.length === 0"
class="py-6 text-sm leading-6 text-center text-n-slate-11"
>
{{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.NO_RESULTS') }}
</p>
</div>
</template>
<p v-else class="px-4 py-6 text-sm leading-6 text-center text-n-slate-11">
{{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EMPTY_STATE') }}
</p>
</div>
</ContactSidebarSection>
</template>