diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue index a51129483..dfe3f437c 100644 --- a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue +++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/ContactNotes.vue @@ -3,21 +3,17 @@ import { reactive, computed } from 'vue'; import { useI18n } from 'vue-i18n'; import { useStore, useMapGetter } from 'dashboard/composables/store'; import { useRoute } from 'vue-router'; -import { useMessageFormatter } from 'shared/composables/useMessageFormatter'; -import { dynamicTime } from 'shared/helpers/timeHelper'; import { useKeyboardEvents } from 'dashboard/composables/useKeyboardEvents'; import Editor from 'dashboard/components-next/Editor/Editor.vue'; -import Avatar from 'dashboard/components-next/avatar/Avatar.vue'; import Spinner from 'dashboard/components-next/spinner/Spinner.vue'; import Button from 'dashboard/components-next/button/Button.vue'; +import ContactNoteItem from './components/ContactNoteItem.vue'; const { t } = useI18n(); const store = useStore(); const route = useRoute(); -const { formatMessage } = useMessageFormatter(); - const state = reactive({ message: '', }); @@ -88,45 +84,13 @@ useKeyboardEvents(keyboardEvents);
-
-
-
- -
- - {{ getWrittenBy(note) }} - {{ $t('CONTACTS_LAYOUT.SIDEBAR.NOTES.WROTE') }} - {{ - dynamicTime(note.createdAt) - }} - -
-
-
-

-

+ :note="note" + :written-by="getWrittenBy(note)" + @delete="onDelete" + />

{{ t('CONTACTS_LAYOUT.SIDEBAR.NOTES.EMPTY_STATE') }} diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue new file mode 100644 index 000000000..81f7a147f --- /dev/null +++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/ContactNoteItem.vue @@ -0,0 +1,63 @@ + + + diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue new file mode 100644 index 000000000..0dbf8bf01 --- /dev/null +++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/ContactNoteItem.story.vue @@ -0,0 +1,39 @@ + + + diff --git a/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js new file mode 100644 index 000000000..440ad95df --- /dev/null +++ b/app/javascript/dashboard/components-next/Contacts/ContactsSidebar/components/story/fixtures.js @@ -0,0 +1,69 @@ +export default [ + { + id: 12, + content: + 'This tutorial will show you how to use Chatwoot and, hence, ensure you practice effective customer communication. We will explain in detail the following:\n\n* Step-by-step setup of your account, with illustrative screenshots.\n\n* An in-depth explanation of all the core features of Chatwoot.\n\n* Get your account up and running by the end of this tutorial.\n\n* Basic concepts of customer communication.', + accountId: null, + contactId: null, + user: { + id: 30, + account_id: 2, + availability_status: 'offline', + auto_offline: true, + confirmed: true, + email: 'bruce@paperlayer.test', + available_name: 'Bruce', + name: 'Bruce', + role: 'administrator', + thumbnail: + 'https://sivin-tunnel.chatwoot.dev/rails/active_storage/representations/redirect/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaHBJZz09IiwiZXhwIjpudWxsLCJwdXIiOiJibG9iX2lkIn19--515dbb35e9ba3c36d14f4c4b77220a675513c1fb/eyJfcmFpbHMiOnsibWVzc2FnZSI6IkJBaDdCem9MWm05eWJXRjBTU0lJYW5CbkJqb0dSVlE2RTNKbGMybDZaVjkwYjE5bWFXeHNXd2RwQWZvdyIsImV4cCI6bnVsbCwicHVyIjoidmFyaWF0aW9uIn19--df796c2af3c0153e55236c2f3cf3a199ac2cb6f7/2.jpg', + custom_role_id: null, + }, + createdAt: 1730786556, + updatedAt: 1730786556, + }, + { + id: 10, + content: + 'We discussed a couple of things:\n\n* Product offering and how it can be useful to talk with people.\n\n* They’ll reach out to us after an internal review.', + accountId: null, + contactId: null, + user: { + id: 1, + account_id: 2, + availability_status: 'online', + auto_offline: false, + confirmed: true, + email: 'hillary@chatwoot.com', + available_name: 'Hillary', + name: 'Hillary', + role: 'administrator', + thumbnail: '', + custom_role_id: null, + }, + createdAt: 1730782566, + updatedAt: 1730782566, + }, + { + id: 9, + content: + 'We discussed a couple of things:\n\n* Product offering and how it can be useful to talk with people.\n\n* They’ll reach out to us after an internal review.', + accountId: null, + contactId: null, + user: { + id: 1, + account_id: 2, + availability_status: 'online', + auto_offline: false, + confirmed: true, + email: 'john@chatwoot.com', + available_name: 'John', + name: 'John', + role: 'administrator', + thumbnail: '', + custom_role_id: null, + }, + createdAt: 1730782564, + updatedAt: 1730782564, + }, +]; diff --git a/app/javascript/histoire.setup.ts b/app/javascript/histoire.setup.ts index 173d7415b..ebc2da9fd 100644 --- a/app/javascript/histoire.setup.ts +++ b/app/javascript/histoire.setup.ts @@ -6,6 +6,8 @@ import { vResizeObserver } from '@vueuse/components'; import { directive as onClickaway } from 'vue3-click-away'; import FloatingVue from 'floating-vue'; import store from 'dashboard/store'; +import VueDOMPurifyHTML from 'vue-dompurify-html'; +import { domPurifyConfig } from 'shared/helpers/HTMLSanitizer.js'; const i18n = createI18n({ legacy: false, // https://github.com/intlify/vue-i18n/issues/1902 @@ -23,4 +25,5 @@ export const setupVue3 = defineSetupVue3(({ app }) => { arrowOverflow: false, disposeTimeout: 5000000, }); + app.use(VueDOMPurifyHTML, domPurifyConfig); });