From a4c5fddeb471ee825d9b0076c06f569dc68d6242 Mon Sep 17 00:00:00 2001 From: Daniel Wilkowski Date: Tue, 12 Dec 2023 13:06:20 +0100 Subject: [PATCH] Add emojis to private messages editor --- app/Http/Controllers/User/PmController.php | 41 +++++++++++++--------- resources/js/pages/pm.js | 32 +++++++++-------- resources/views/user/pm/home.twig | 24 +++++++------ resources/views/user/pm/partials/form.twig | 1 + resources/views/user/pm/show.twig | 34 ++++++++++-------- 5 files changed, 74 insertions(+), 58 deletions(-) diff --git a/app/Http/Controllers/User/PmController.php b/app/Http/Controllers/User/PmController.php index 3cf8a8ab56..0d92c1239b 100644 --- a/app/Http/Controllers/User/PmController.php +++ b/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(), ]); } diff --git a/resources/js/pages/pm.js b/resources/js/pages/pm.js index 69746ba819..3090b0158b 100644 --- a/resources/js/pages/pm.js +++ b/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); diff --git a/resources/views/user/pm/home.twig b/resources/views/user/pm/home.twig index d74385c9a4..7582d33bbc 100644 --- a/resources/views/user/pm/home.twig +++ b/resources/views/user/pm/home.twig @@ -2,23 +2,24 @@ {% block pm %} - -
Brak wiadomości prywatnych.
- +
+ Brak wiadomości prywatnych. +
{% endblock %} @@ -31,6 +32,7 @@ total: {{ total }}, current_page: {{ current_page }} }; + var emojis = {{ emojis|json_encode|raw }}; {{ parent() }} diff --git a/resources/views/user/pm/partials/form.twig b/resources/views/user/pm/partials/form.twig index 3e1a6217be..72b2861848 100644 --- a/resources/views/user/pm/partials/form.twig +++ b/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" diff --git a/resources/views/user/pm/show.twig b/resources/views/user/pm/show.twig index 66970fe3fc..118983c86c 100644 --- a/resources/views/user/pm/show.twig +++ b/resources/views/user/pm/show.twig @@ -5,30 +5,34 @@
+ ref="autocomplete" + :tabindex="1" + :value.sync="recipient.name" + :errors="errors.recipient" + placeholder="Odbiorca..." + @select="selectName"> +
+ v-for="(message, index) in sequentialMessages" + :message="message" + :key="message.id" + :last="index + 1 === messages.length">
-
${ recipient.name } pisze...
+
+ + + ${ recipient.name } pisze... + +
{% 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 }}; - {{ parent() }} {% endblock %}