feat: Add notes for Contacts (#3273)

Fixes #2275

app/javascript/dashboard/modules/notes/NotesOnContactPage.vue

@@ -1,8 +1,14 @@
 <template>
-  <note-list :notes="notes" @add="onAdd" @delete="onDelete" />
+  <note-list
+    :is-fetching="uiFlags.isFetching"
+    :notes="notes"
+    @add="onAdd"
+    @delete="onDelete"
+  />
 </template>
 
 <script>
+import { mapGetters } from 'vuex';
 import NoteList from './components/NoteList';
 
 export default {
@@ -16,6 +22,7 @@ export default {
     },
   },
   computed: {
+    ...mapGetters({ uiFlags: 'contactNotes/getUIFlags' }),
     notes() {
       return this.$store.getters['contactNotes/getAllNotesByContact'](
         this.contactId

app/javascript/dashboard/modules/notes/components/AddNote.vue

@@ -1,45 +1,64 @@
 <template>
   <div class="card">
-    <textarea
-      v-model="inputText"
-      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
+    <woot-message-editor
+      v-model="noteContent"
       class="input--note"
-      @keydown.enter.shift.exact="onAdd"
+      :placeholder="$t('NOTES.ADD.PLACEHOLDER')"
+      :enable-suggestions="false"
     />
     <div class="footer">
       <woot-button
-        size="tiny"
         color-scheme="warning"
         :title="$t('NOTES.ADD.TITLE')"
         :is-disabled="buttonDisabled"
         @click="onAdd"
       >
-        {{ $t('NOTES.ADD.BUTTON') }}
+        {{ $t('NOTES.ADD.BUTTON') }} (⌘⏎)
       </woot-button>
     </div>
   </div>
 </template>
 
 <script>
+import WootMessageEditor from 'dashboard/components/widgets/WootWriter/Editor';
+import { hasPressedCommandAndEnter } from 'shared/helpers/KeyboardHelpers';
 export default {
+  components: {
+    WootMessageEditor,
+  },
+
   data() {
     return {
-      inputText: '',
+      noteContent: '',
     };
   },
 
   computed: {
     buttonDisabled() {
-      return this.inputText === '';
+      return this.noteContent === '';
     },
   },
 
+  mounted() {
+    document.addEventListener('keydown', this.onMetaEnter);
+  },
+
+  beforeDestroy() {
+    document.removeEventListener('keydown', this.onMetaEnter);
+  },
+
   methods: {
-    onAdd() {
-      if (this.inputText !== '') {
-        this.$emit('add', this.inputText);
+    onMetaEnter(e) {
+      if (hasPressedCommandAndEnter(e)) {
+        e.preventDefault();
+        this.onAdd();
       }
-      this.inputText = '';
+    },
+    onAdd() {
+      if (this.noteContent !== '') {
+        this.$emit('add', this.noteContent);
+      }
+      this.noteContent = '';
     },
   },
 };
@@ -47,12 +66,14 @@ export default {
 
 <style lang="scss" scoped>
 .input--note {
-  font-size: var(--font-size-mini);
-  border-color: transparent;
-  margin-bottom: var(--space-small);
-  padding: 0;
-  resize: none;
-  min-height: var(--space-larger);
+  &::v-deep .ProseMirror-menubar {
+    padding: 0;
+    margin-top: var(--space-minus-small);
+  }
+
+  &::v-deep .ProseMirror-woot-style {
+    max-height: 36rem;
+  }
 }
 
 .footer {

app/javascript/dashboard/modules/notes/components/ContactNote.vue

@@ -1,26 +1,22 @@
 <template>
   <div class="card note-wrap">
-    <p class="note__content">
-      {{ note }}
-    </p>
-    <div class="footer">
+    <div class="header">
       <div class="meta">
-        <div :title="userName">
-          <thumbnail :src="thumbnail" :username="userName" size="16px" />
-        </div>
+        <thumbnail
+          :title="noteAuthorName"
+          :src="noteAuthor.thumbnail"
+          :username="noteAuthorName"
+          size="20px"
+        />
         <div class="date-wrap">
-          <span>{{ readableTime }}</span>
+          <span class="fw-medium"> {{ noteAuthorName }} </span>
+          <span> {{ $t('NOTES.LIST.LABEL') }} </span>
+          <span class="fw-medium"> {{ readableTime }} </span>
         </div>
       </div>
       <div class="actions">
         <woot-button
-          variant="smooth"
-          size="tiny"
-          icon="ion-compose"
-          color-scheme="secondary"
-          @click="onEdit"
-        />
-        <woot-button
+          v-tooltip="$t('NOTES.CONTENT_HEADER.DELETE')"
           variant="smooth"
           size="tiny"
           icon="ion-trash-b"
@@ -29,19 +25,21 @@
         />
       </div>
     </div>
+    <p class="note__content" v-html="formatMessage(note || '')" />
   </div>
 </template>
 
 <script>
 import Thumbnail from 'dashboard/components/widgets/Thumbnail';
 import timeMixin from 'dashboard/mixins/time';
+import messageFormatterMixin from 'shared/mixins/messageFormatterMixin';
 
 export default {
   components: {
     Thumbnail,
   },
 
-  mixins: [timeMixin],
+  mixins: [timeMixin, messageFormatterMixin],
 
   props: {
     id: {
@@ -52,30 +50,29 @@ export default {
       type: String,
       default: '',
     },
-    userName: {
-      type: String,
-      default: '',
+    user: {
+      type: Object,
+      default: () => {},
     },
-    timeStamp: {
+    createdAt: {
       type: Number,
       default: 0,
     },
-    thumbnail: {
-      type: String,
-      default: '',
-    },
   },
 
   computed: {
     readableTime() {
-      return this.dynamicTime(this.timeStamp);
+      return this.dynamicTime(this.createdAt);
+    },
+    noteAuthor() {
+      return this.user || {};
+    },
+    noteAuthorName() {
+      return this.noteAuthor.name || this.$t('APP_GLOBAL.DELETED_USER');
     },
   },
 
   methods: {
-    onEdit() {
-      this.$emit('edit', this.id);
-    },
     onDelete() {
       this.$emit('delete', this.id);
     },
@@ -85,24 +82,23 @@ export default {
 
 <style lang="scss" scoped>
 .note__content {
-  font-size: var(--font-size-mini);
-  margin-bottom: var(--space-smaller);
+  margin-top: var(--space-normal);
 }
 
-.footer {
+.header {
   display: flex;
   justify-content: space-between;
   align-items: flex-end;
+  font-size: var(--font-size-mini);
 
   .meta {
     display: flex;
-    padding: var(--space-smaller) 0;
+    align-items: center;
 
     .date-wrap {
       margin-left: var(--space-smaller);
       padding: var(--space-micro);
       color: var(--color-body);
-      font-size: var(--font-size-micro);
     }
   }
   .actions {

app/javascript/dashboard/modules/notes/components/NoteList.vue

@@ -1,39 +1,37 @@
 <template>
   <div>
-    <div class="notelist-wrap">
-      <h3 class="block-title">
-        {{ $t('NOTES.HEADER.TITLE') }}
-      </h3>
-      <add-note @add="onAddNote" />
-      <contact-note
-        v-for="note in notes"
-        :id="note.id"
-        :key="note.id"
-        :note="note.content"
-        :user-name="note.user.name"
-        :time-stamp="note.created_at"
-        :thumbnail="note.user.thumbnail"
-        @edit="onEditNote"
-        @delete="onDeleteNote"
-      />
-      <div class="button-wrap">
-        <woot-button variant="link" @click="onclick">
-          {{ $t('NOTES.FOOTER.BUTTON') }}
-          <i class="ion-arrow-right-c" />
-        </woot-button>
-      </div>
+    <add-note @add="onAddNote" />
+    <contact-note
+      v-for="note in notes"
+      :id="note.id"
+      :key="note.id"
+      :note="note.content"
+      :user="note.user"
+      :created-at="note.created_at"
+      @edit="onEditNote"
+      @delete="onDeleteNote"
+    />
+
+    <div v-if="isFetching" class="text-center p-normal fs-default">
+      <spinner size="" />
+      <span>{{ $t('NOTES.FETCHING_NOTES') }}</span>
+    </div>
+    <div v-else-if="!notes.length" class="text-center p-normal fs-default">
+      <span>{{ $t('NOTES.NOT_AVAILABLE') }}</span>
     </div>
   </div>
 </template>
 
 <script>
-import ContactNote from './ContactNote';
 import AddNote from './AddNote';
+import ContactNote from './ContactNote';
+import Spinner from 'shared/components/Spinner';
 
 export default {
   components: {
-    ContactNote,
     AddNote,
+    ContactNote,
+    Spinner,
   },
 
   props: {
@@ -41,12 +39,13 @@ export default {
       type: Array,
       default: () => [],
     },
+    isFetching: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   methods: {
-    onclick() {
-      this.$emit('show');
-    },
     onAddNote(value) {
       this.$emit('add', value);
     },
@@ -59,9 +58,3 @@ export default {
   },
 };
 </script>
-
-<style lang="scss" scoped>
-.button-wrap {
-  margin-top: var(--space-one);
-}
-</style>