feat: incorporate mentions in posts (vue-tribute)

Ali1 · Ali1 · commit 65d2057702cd · 2025-02-26T15:03:08.000Z
diff --git a/app/Domains/Vault/ManageJournals/Web/ViewHelpers/JournalShowViewHelper.php b/app/Domains/Vault/ManageJournals/Web/ViewHelpers/JournalShowViewHelper.php
@@ -3,6 +3,7 @@
 namespace App\Domains\Vault\ManageJournals\Web\ViewHelpers;
 
 use App\Helpers\DateHelper;
+use App\Helpers\NameHelper;
 use App\Helpers\SliceOfLifeHelper;
 use App\Helpers\SQLHelper;
 use App\Models\Journal;
@@ -95,6 +96,18 @@ public static function postsInYear(Journal $journal, int $year, User $user): Col
                             'post' => $post,
                         ]),
                     ],
+                    'contacts' => $post->contacts->map(function ($contact) use ($user) {
+                        // Format the contact name using the NameHelper
+                        $contact->name = NameHelper::formatContactName($user, $contact);
+
+                        // Generate the URL for the contact
+                        $contact->url = route('contact.show', [
+                            'vault' => $contact->vault_id,
+                            'contact' => $contact->id,
+                        ]);
+
+                        return $contact;
+                    }),
                 ]);
 
             $monthsCollection->push([
diff --git a/app/Domains/Vault/Search/Web/ViewHelpers/VaultContactSearchViewHelper.php b/app/Domains/Vault/Search/Web/ViewHelpers/VaultContactSearchViewHelper.php
@@ -2,9 +2,11 @@
 
 namespace App\Domains\Vault\Search\Web\ViewHelpers;
 
+use App\Helpers\NameHelper;
 use App\Models\Contact;
 use App\Models\Vault;
 use Illuminate\Support\Collection;
+use Illuminate\Support\Facades\Auth;
 
 class VaultContactSearchViewHelper
 {
@@ -16,10 +18,14 @@ public static function data(Vault $vault, string $term): Collection
             ->take(5)
             ->get();
 
-        return $contacts->map(function (Contact $contact): array {
+        // Get the current user
+        $user = Auth::user();
+
+        return $contacts->map(function (Contact $contact) use ($user): array {
             return [
                 'id' => $contact->id,
-                'name' => $contact->first_name.' '.$contact->last_name.' '.$contact->nickname.' '.$contact->maiden_name.' '.$contact->middle_name,
+                // Format the name using the NameHelper to ensure consistency
+                'name' => NameHelper::formatContactName($user, $contact),
                 'url' => route('contact.show', [
                     'vault' => $contact->vault_id,
                     'contact' => $contact->id,
diff --git a/package.json b/package.json
@@ -40,11 +40,13 @@
     "sass": "^1.85.1",
     "tailwindcss": "^4.0.9",
     "tiny-emitter": "^2.1.0",
+    "tributejs": "^5.1.3",
     "uploadcare-vue": "^1.0.0",
     "v-calendar": "^3.1.2",
     "vite": "^6.2.0",
     "vue": "^3.5.13",
     "vue-clipboard3": "^2.0.0",
+    "vue-tribute": "^2.0.0",
     "vuedraggable": "^4.1.0",
     "ziggy-js": "2.5.1"
   },
diff --git a/resources/js/Pages/Vault/Journal/Post/Edit.vue b/resources/js/Pages/Vault/Journal/Post/Edit.vue
@@ -1,6 +1,6 @@
 <script setup>
 import { Link, useForm } from '@inertiajs/vue3';
-import { watch, ref } from 'vue';
+import { watch, ref, defineProps, computed } from 'vue';
 import { debounce } from 'lodash';
 import { trans } from 'laravel-vue-i18n';
 import { DatePicker } from 'v-calendar';
@@ -30,7 +30,20 @@ const form = useForm({
   sections: props.data.sections.map((section) => ({
     id: section.id,
     label: section.label,
-    content: section.content,
+    content: (section.content || '').replace(
+      // not defined when dealing with a new post
+      /\{\{\{CONTACT-ID:([a-f0-9-]+)\|(.*?)\}\}\}/g,
+      (match, contactId, fallbackName) => {
+        let contact = props.data.contacts.find((c) => c.id === contactId);
+
+        if (contact) {
+          return `@"${contact.name.trim()}"`;
+        }
+
+        // If contact is missing, use fallback name
+        return `@${fallbackName} (contact no longer linked to post)`;
+      },
+    ),
   })),
   uuid: null,
   name: null,
@@ -40,6 +53,22 @@ const form = useForm({
   size: null,
 });
 
+const hasInvalidMentions = ref(false); // Track if there are invalid mentions
+const mentionErrorMessage = ref(''); // Error message for invalid mentions
+
+const tributeOptions = computed(() => ({
+  trigger: '@',
+  allowSpaces: true,
+  values: form.contacts.map((contact) => ({
+    key: contact.name,
+    value: contact.name,
+    id: contact.id,
+    original: contact,
+  })),
+  selectTemplate: function (item) {
+    return `@"${item.original.key.trim()}"`;
+  },
+}));
 const saveInProgress = ref(false);
 const statistics = ref(props.data.statistics);
 const deletePhotoModalShown = ref(false);
@@ -131,8 +160,54 @@ const destroyPhoto = () => {
 const update = () => {
   saveInProgress.value = true;
 
+  // Clone form to avoid modifying the UI content
+  let processedForm = JSON.parse(JSON.stringify(form));
+
+  let invalidMentionsFound = false;
+  let invalidMentionText = '';
+
+  processedForm.sections.forEach((section) => {
+    if (section.content) {
+      section.content = section.content.replace(/@"([A-Za-z.'’]+(?:\s+[A-Za-z.'’]+)*)"/g, (match, name) => {
+        name = name.trim(); // Trim spaces from the mention name
+        console.log('Matched Name:', name);
+
+        let contact = processedForm.contacts.find((c) => c.name.trim() === name); // Trim contact names before matching
+
+        if (contact) {
+          // Check if there are duplicate contacts with the same name and different IDs
+          const duplicateContacts = processedForm.contacts.filter((c) => c.name.trim() === name && c.id !== contact.id);
+
+          if (duplicateContacts.length > 0) {
+            // If there are duplicate contacts with the same name and different IDs, mark as invalid
+            invalidMentionsFound = true;
+            invalidMentionText = `${trans('Cannot mention a contact when there are 2 identical contacts linked: @name', { name })}`;
+            return `@${name} (duplicate contacts exist)`;
+          }
+
+          return `{{{CONTACT-ID:${contact.id}|${name}}}}`;
+        }
+
+        // If no contact is found, mark as invalid
+        invalidMentionsFound = true;
+        invalidMentionText = trans('Invalid mention') + `: @${name}`;
+
+        // If no contact is found, remove apostrophes and add fallback text
+        return `@${name} (contact not linked to post)`;
+      });
+    }
+  });
+
+  // If invalid mentions were found, set the error state and stop the upload
+  if (invalidMentionsFound) {
+    hasInvalidMentions.value = true;
+    mentionErrorMessage.value = invalidMentionText;
+    saveInProgress.value = false;
+    return; // Prevent the form from being uploaded
+  }
+
   axios
-    .put(props.data.url.update, form)
+    .put(props.data.url.update, processedForm)
     .then((response) => {
       setTimeout(() => (saveInProgress.value = false), 350);
       statistics.value = response.data.data;
@@ -326,7 +401,15 @@ const destroy = () => {
                     :required="true"
                     :maxlength="65535"
                     :markdown="true"
-                    :textarea-class="'block w-full'" />
+                    :tribute-options="tributeOptions"
+                    :textarea-class="{
+                      'block w-full': true,
+                      'border-red-500': hasInvalidMentions, // Add the red border if invalid mentions
+                    }" />
+                </div>
+                <!-- Show error message if invalid mentions exist -->
+                <div v-if="hasInvalidMentions" class="text-red-500 text-sm mt-2">
+                  {{ mentionErrorMessage }}
                 </div>
               </div>
             </div>
@@ -343,7 +426,8 @@ const destroy = () => {
 
             <!-- auto save -->
             <div class="mb-6 text-sm">
-              <div v-if="!saveInProgress" class="flex items-center justify-center">
+              <!-- Show the auto-saved message unless there's an error with mentions -->
+              <div v-if="!hasInvalidMentions && !saveInProgress" class="flex items-center justify-center">
                 <svg
                   class="me-2 h-4 w-4 text-green-700"
                   xmlns="http://www.w3.org/2000/svg"
@@ -371,6 +455,10 @@ const destroy = () => {
               </div>
             </div>
 
+            <div v-if="hasInvalidMentions" class="text-red-500 text-sm mt-2 flex items-center justify-center">
+              <span>{{ $t('Not saving until errors are fixed') }}</span>
+            </div>
+
             <!-- written at -->
             <p class="mb-2 flex items-center font-bold">
               <span>{{ $t('Written on') }}</span>
diff --git a/resources/js/Pages/Vault/Journal/Post/Show.vue b/resources/js/Pages/Vault/Journal/Post/Show.vue
@@ -2,10 +2,11 @@
 import { Link } from '@inertiajs/vue3';
 import Layout from '@/Shared/Layout.vue';
 import ContactCard from '@/Shared/ContactCard.vue';
+import { convertMentions } from '@/utils/mentionUtils.js';
 
-defineProps({
+const props = defineProps({
   layoutData: Object,
-  data: Object,
+  data: Object, // Ensure data is correctly passed as a prop
 });
 </script>
 
@@ -138,7 +139,7 @@ defineProps({
                     {{ section.label }}
                   </div>
 
-                  <div class="mb-6" v-html="section.content"></div>
+                  <div class="mb-6" v-html="convertMentions(section.content, props.data.contacts)"></div>
                 </div>
               </div>
 
diff --git a/resources/js/Pages/Vault/Journal/Show.vue b/resources/js/Pages/Vault/Journal/Show.vue
@@ -3,7 +3,8 @@ import { Link, useForm } from '@inertiajs/vue3';
 import Layout from '@/Shared/Layout.vue';
 import PrettyLink from '@/Shared/Form/PrettyLink.vue';
 import { trans } from 'laravel-vue-i18n';
-import { ChevronRight } from 'lucide-vue-next';
+import { convertMentions } from '@/utils/mentionUtils.js';
+
 const props = defineProps({
   layoutData: Object,
   data: Object,
@@ -25,28 +26,37 @@ const destroy = () => {
 <template>
   <layout :layout-data="layoutData" :inside-vault="true">
     <!-- breadcrumb -->
-    <nav class="bg-white dark:bg-gray-900 sm:mt-20 sm:border-b sm:border-gray-300 dark:border-gray-700">
+    <nav class="bg-white dark:bg-gray-900 sm:mt-20 sm:border-b">
       <div class="max-w-8xl mx-auto hidden px-4 py-2 sm:px-6 md:block">
-        <div class="flex items-center gap-1 text-sm">
-          <div class="text-gray-600 dark:text-gray-400">
-            {{ $t('You are here:') }}
-          </div>
-          <div class="inline">
-            <Link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
-              {{ $t('Journals') }}
-            </Link>
-          </div>
-          <div class="relative inline">
-            <ChevronRight class="h-3 w-3" />
-          </div>
-          <div class="inline">
-            {{ data.name }}
-          </div>
+        <div class="flex items-baseline justify-between space-x-6">
+          <ul class="text-sm">
+            <li class="me-2 inline text-gray-600 dark:text-gray-400">
+              {{ $t('You are here:') }}
+            </li>
+            <li class="me-2 inline">
+              <Link :href="layoutData.vault.url.journals" class="text-blue-500 hover:underline">
+                {{ $t('Journals') }}
+              </Link>
+            </li>
+            <li class="relative me-2 inline">
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                class="icon-breadcrumb relative inline h-3 w-3"
+                fill="none"
+                viewBox="0 0 24 24"
+                stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 5l7 7-7 7" />
+              </svg>
+            </li>
+            <li class="inline">
+              {{ data.name }}
+            </li>
+          </ul>
         </div>
       </div>
     </nav>
 
-    <main class="sm:mt-10 relative">
+    <main class="sm:mt-18 relative">
       <div class="mx-auto max-w-6xl px-2 py-2 sm:px-6 sm:py-6 lg:px-8">
         <h1 class="text-2xl" :class="data.description ? 'mb-4' : 'mb-8'">{{ data.name }}</h1>
 
@@ -170,10 +180,12 @@ const destroy = () => {
                       <div class="flex w-full items-center justify-between">
                         <!-- title and excerpt -->
                         <div>
-                          <span>
-                            <Link :href="post.url.show" class="text-blue-500 hover:underline">{{ post.title }}</Link>
-                          </span>
-                          <p v-if="post.excerpt">{{ post.excerpt }}</p>
+                          <span
+                            ><Link :href="post.url.show" class="text-blue-500 hover:underline">{{
+                              post.title
+                            }}</Link></span
+                          >
+                          <p v-if="post.excerpt" v-html="convertMentions(post.excerpt, post.contacts)"></p>
                         </div>
 
                         <!-- photo -->
diff --git a/resources/js/Shared/Form/TextArea.vue b/resources/js/Shared/Form/TextArea.vue
diff --git a/resources/js/utils/mentionUtils.js b/resources/js/utils/mentionUtils.js
diff --git a/yarn.lock b/yarn.lock
