Add emojis to private messages editor

app/Http/Controllers/User/PmController.php

@@ -12,6 +12,7 @@
 use Coyote\Repositories\Contracts\NotificationRepositoryInterface as NotificationRepository;
 use Coyote\Repositories\Contracts\PmRepositoryInterface as PmRepository;
 use Coyote\Repositories\Contracts\UserRepositoryInterface as UserRepository;
+use Coyote\Services\Parser\Extensions\Emoji;
 use Coyote\Services\Parser\Factories\PmFactory;
 use Coyote\User;
 use Illuminate\Http\JsonResponse;
@@ -45,10 +46,10 @@ public function index(Request $request): JsonResponse|View
         $pm = $this->pm->lengthAwarePaginate($this->userId);
         $messages = PmResource::collection(collect($pm->items()));
         $result = [
-          'messages'     => $messages->toArray($this->request),
-          'per_page'     => $pm->perPage(),
-          'total'        => $pm->total(),
-          'current_page' => $pm->currentPage(),
+            'messages'     => $messages->toArray($this->request),
+            'per_page'     => $pm->perPage(),
+            'total'        => $pm->total(),
+            'current_page' => $pm->currentPage(),
         ];
         if ($request->wantsJson()) {
             return response()->json($result);
@@ -61,25 +62,28 @@ public function show(Pm $pm, Request $request): View
         $this->authorize('show', $pm);
 
         $messages = PmResource::collection($this->pm->conversation(
-          $this->userId,
-          $pm->author_id,
-          10,
-          (int)$request->query('offset', 0)));
+            $this->userId,
+            $pm->author_id,
+            10,
+            (int)$request->query('offset', 0)));
 
         $this->markAllAsRead($pm->author);
 
-        return $this->view('user.pm.show')
-          ->with(compact('pm', 'messages'))
-          ->with('recipient', $pm->author);
+        return $this->view('user.pm.show', [
+            'pm'        => $pm,
+            'messages'  => $messages,
+            'recipient' => $pm->author,
+            'emojis'    => Emoji::all(),
+        ]);
     }
 
     public function infinity(Request $request): ResourceCollection
     {
         return PmResource::collection($this->pm->conversation(
-          $this->userId,
-          (int)$request->input('author_id'),
-          10,
-          (int)$request->query('offset', 0)));
+            $this->userId,
+            (int)$request->input('author_id'),
+            10,
+            (int)$request->query('offset', 0)));
     }
 
     public function inbox(): ResourceCollection
@@ -93,8 +97,11 @@ public function submit(Request $request): View
     {
         $this->breadcrumb->push('Napisz wiadomość', route('user.pm.submit'));
         return $this->view('user.pm.show', [
-          'recipient' => $request->has('to') ? $this->user->findByName($this->request->input('to')) : new \stdClass(),
-          'messages'  => []
+            'recipient' => $request->has('to')
+                ? $this->user->findByName($this->request->input('to'))
+                : new \stdClass(),
+            'messages'  => [],
+            'emojis'    => Emoji::all(),
         ]);
     }
 

resources/js/pages/pm.js

@@ -1,22 +1,23 @@
-import store from '../store';
-import { mapState } from 'vuex';
+import differenceInMinutes from 'date-fns/differenceInMinutes';
+import parseISO from 'date-fns/parseISO';
 import Vue from 'vue';
-import PerfectScrollbar from '../components/perfect-scrollbar';
-import VuePm from '../components/pm/message.vue';
-import VueAutosave from '../plugins/autosave';
-import VuePrompt from '../components/forms/prompt.vue';
-import VueMarkdown from '../components/forms/markdown.vue';
+import VueNotifications from "vue-notification";
+import {mapState} from 'vuex';
+
+import VueAutocomplete from '../components/forms/autocomplete.vue';
 import VueButton from '../components/forms/button.vue';
 import VueError from '../components/forms/error.vue';
+import VueMarkdown from '../components/forms/markdown.vue';
+import VuePrompt from '../components/forms/prompt.vue';
+import VuePagination from '../components/pagination.vue';
+import PerfectScrollbar from '../components/perfect-scrollbar';
+import VuePm from '../components/pm/message.vue';
+import {default as axiosErrorHandler} from "../libs/axios-error-handler.js";
 import {default as ws} from '../libs/realtime.ts';
+import VueAutosave from '../plugins/autosave';
+import VueModals from '../plugins/modals';
 import VuePaste from '../plugins/paste.js';
-import VuePagination from '../components/pagination.vue';
-import VueAutocomplete from '../components/forms/autocomplete.vue';
-import differenceInMinutes from 'date-fns/differenceInMinutes';
-import parseISO from 'date-fns/parseISO';
-import {default as axiosErrorHandler} from "@/libs/axios-error-handler";
-import VueNotifications from "vue-notification";
-import VueModals from '@/plugins/modals';
+import store from '../store';
 
 Vue.use(VueAutosave);
 Vue.use(VueNotifications, {componentName: 'vue-notifications'});
@@ -45,6 +46,7 @@ new Vue({
     return {
       recipient: window.data.recipient,
       sender: window.data.sender,
+      emojis: window.emojis,
       text: '',
       isProcessing: false,
       errors: {},
@@ -111,7 +113,7 @@ new Vue({
     },
 
     listenForMessage() {
-      this.channel().on('PmCreated', ({ data }) => {
+      this.channel().on('PmCreated', ({data}) => {
         if (data.user.id === this.recipient.id) {
           store.commit('messages/add', data);
 

resources/views/user/pm/home.twig

@@ -2,23 +2,24 @@
 
 {% block pm %}
   <nav class="d-flex justify-content-center mt-2 mb-2">
-    <vue-pagination :total-pages="totalPages" :current-page="currentPage" @change="changePage"></vue-pagination>
+    <vue-pagination :total-pages="totalPages" :current-page="currentPage" @change="changePage">
+    </vue-pagination>
   </nav>
-
   <template v-if="messages.length">
     <vue-pm
-      v-for="(message, index) in messages"
-      :message="message"
-      :key="message.id"
-      :last="false"
-      :clickable-text="true"
-    >
+        v-for="(message, index) in messages"
+        :message="message"
+        :key="message.id"
+        :last="false"
+        :clickable-text="true">
     </vue-pm>
   </template>
-  <div v-cloak v-else class="text-center p-3">Brak wiadomości prywatnych.</div>
-
+  <div v-cloak v-else class="text-center p-3">
+    Brak wiadomości prywatnych.
+  </div>
   <nav class="d-flex justify-content-center mt-2 mb-2">
-    <vue-pagination :total-pages="totalPages" :current-page="currentPage" @change="changePage"></vue-pagination>
+    <vue-pagination :total-pages="totalPages" :current-page="currentPage" @change="changePage">
+    </vue-pagination>
   </nav>
 {% endblock %}
 
@@ -31,6 +32,7 @@
       total: {{ total }},
       current_page: {{ current_page }}
     };
+    var emojis = {{ emojis|json_encode|raw }};
   </script>
 
   {{ parent() }}

resources/views/user/pm/partials/form.twig

@@ -4,6 +4,7 @@
       v-model="text"
       :assets.sync="assets"
       :error="errors.text"
+      :emojis="emojis"
       @save="sendMessage"
       ref="editor"
       preview-url="/User/Pm/Preview"

resources/views/user/pm/show.twig

@@ -5,30 +5,34 @@
   <div v-if="!messages.length" class="row">
     <div class="col-12">
       <vue-autocomplete
-        ref="autocomplete"
-        :tabindex="1"
-        :value.sync="recipient.name"
-        :errors="errors.recipient"
-        placeholder="Odbiorca..."
-        @select="selectName"
-      ></vue-autocomplete>
+          ref="autocomplete"
+          :tabindex="1"
+          :value.sync="recipient.name"
+          :errors="errors.recipient"
+          placeholder="Odbiorca..."
+          @select="selectName">
+      </vue-autocomplete>
     </div>
   </div>
 
   <perfect-scrollbar v-if="messages.length" id="wrap" ref="scrollbar">
     <div id="overview">
       <vue-pm
-        v-for="(message, index) in sequentialMessages"
-        :message="message"
-        :key="message.id"
-        :last="index + 1 === messages.length"
-      >
+          v-for="(message, index) in sequentialMessages"
+          :message="message"
+          :key="message.id"
+          :last="index + 1 === messages.length">
       </vue-pm>
     </div>
   </perfect-scrollbar>
 
   <div v-cloak class="typing">
-    <div v-if="isTyping" class="small pt-1"><small><i class="far fa-comment-dots"></i> <em>${ recipient.name } pisze...</em></small></div>
+    <div v-if="isTyping" class="small pt-1">
+      <small>
+        <i class="far fa-comment-dots"></i>
+        <em>${ recipient.name } pisze...</em>
+      </small>
+    </div>
   </div>
 
   {% include 'user.pm.partials.form' %}
@@ -39,9 +43,9 @@
     var data = {
       messages: {{ messages|json_encode|raw }},
       recipient: {{ recipient|json_encode|raw }},
-      sender: {{ {id: user('id'), name: user('name')}|json_encode|raw  }}
+      sender: {{ {id: user('id'), name: user('name')}|json_encode|raw }}
     };
+    var emojis = {{ emojis|json_encode|raw }};
   </script>
-
   {{ parent() }}
 {% endblock %}