feat: limit number of items appearing in feed (monicahq/chandler#210)

monicahq · Sep 10, 2022 · 374a704 · 374a704
1 parent b4aca45
commit 374a704
Show file tree

Hide file tree

Showing 13 changed files with 158 additions and 33 deletions.
diff --git a/domains/Contact/ManageContact/Web/ViewHelpers/ContactShowViewHelper.php b/domains/Contact/ManageContact/Web/ViewHelpers/ContactShowViewHelper.php
@@ -5,7 +5,6 @@
 use App\Contact\ManageAvatar\Web\ViewHelpers\ModuleAvatarViewHelper;
 use App\Contact\ManageCalls\Web\ViewHelpers\ModuleCallsViewHelper;
 use App\Contact\ManageContactAddresses\Web\ViewHelpers\ModuleContactAddressesViewHelper;
-use App\Contact\ManageContactFeed\Web\ViewHelpers\ModuleFeedViewHelper;
 use App\Contact\ManageContactImportantDates\Web\ViewHelpers\ModuleImportantDatesViewHelper;
 use App\Contact\ManageContactInformation\Web\ViewHelpers\ModuleContactInformationViewHelper;
 use App\Contact\ManageContactName\Web\ViewHelpers\ModuleContactNameViewHelper;
@@ -26,7 +25,6 @@
 use App\Contact\ManageTasks\Web\ViewHelpers\ModuleContactTasksViewHelper;
 use App\Helpers\StorageHelper;
 use App\Models\Contact;
-use App\Models\ContactFeedItem;
 use App\Models\Module;
 use App\Models\TemplatePage;
 use App\Models\User;
@@ -226,12 +224,12 @@ public static function modules(TemplatePage $page, Contact $contact, User $user)
             }
 
             if ($module->type == Module::TYPE_FEED) {
-                $items = ContactFeedItem::where('contact_id', $contact->id)
-                    ->with('author')
-                    ->with('contact')
-                    ->orderBy('created_at', 'desc')
-                    ->get();
-                $data = ModuleFeedViewHelper::data($items, $user);
+                // this is the only module where the data is loaded asynchroniously
+                // so it needs an URL to load the data from
+                $data = route('contact.feed.show', [
+                    'vault' => $contact->vault_id,
+                    'contact' => $contact->id,
+                ]);
             }
 
             if ($module->type == Module::TYPE_REMINDERS) {

diff --git a/domains/Contact/ManageContactFeed/Web/Controllers/ContactFeedController.php b/domains/Contact/ManageContactFeed/Web/Controllers/ContactFeedController.php
@@ -0,0 +1,30 @@
+<?php
+
+namespace App\Contact\ManageContactFeed\Web\Controllers;
+
+use App\Contact\ManageContactFeed\Web\ViewHelpers\ModuleFeedViewHelper;
+use App\Helpers\PaginatorHelper;
+use App\Http\Controllers\Controller;
+use App\Models\ContactFeedItem;
+use App\Models\Vault;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class ContactFeedController extends Controller
+{
+    public function show(Request $request, int $vaultId, int $contactId)
+    {
+        $items = ContactFeedItem::where('contact_id', $contactId)
+            ->with('author')
+            ->with('contact')
+            ->orderBy('created_at', 'desc')
+            ->paginate(15);
+
+        $vault = Vault::find($vaultId);
+
+        return response()->json([
+            'data' => ModuleFeedViewHelper::data($items, Auth::user(), $vault),
+            'paginator' => PaginatorHelper::getData($items),
+        ], 200);
+    }
+}
diff --git a/domains/Contact/ManageContactFeed/Web/ViewHelpers/ModuleFeedViewHelper.php b/domains/Contact/ManageContactFeed/Web/ViewHelpers/ModuleFeedViewHelper.php
@@ -11,10 +11,11 @@
 use App\Helpers\UserHelper;
 use App\Models\ContactFeedItem;
 use App\Models\User;
+use App\Models\Vault;
 
 class ModuleFeedViewHelper
 {
-    public static function data($items, User $user): array
+    public static function data($items, User $user, Vault $vault): array
     {
         $itemsCollection = $items->map(function ($item) use ($user) {
             return [

diff --git a/domains/Vault/ManageVault/Web/Controllers/VaultController.php b/domains/Vault/ManageVault/Web/Controllers/VaultController.php
@@ -2,10 +2,7 @@
 
 namespace App\Vault\ManageVault\Web\Controllers;
 
-use App\Contact\ManageContactFeed\Web\ViewHelpers\ModuleFeedViewHelper;
 use App\Http\Controllers\Controller;
-use App\Models\Contact;
-use App\Models\ContactFeedItem;
 use App\Models\Vault;
 use App\Vault\ManageVault\Services\CreateVault;
 use App\Vault\ManageVault\Services\DestroyVault;
@@ -55,21 +52,15 @@ public function show(Request $request, int $vaultId)
     {
         $vault = Vault::find($vaultId);
 
-        $contactIds = Contact::where('vault_id', $vaultId)->select('id')->get()->toArray();
-
-        $items = ContactFeedItem::whereIn('contact_id', $contactIds)
-            ->with('author')
-            ->with('contact')
-            ->orderBy('created_at', 'desc')
-            ->get();
-
         return Inertia::render('Vault/Dashboard/Index', [
             'layoutData' => VaultIndexViewHelper::layoutData($vault),
             'lastUpdatedContacts' => VaultShowViewHelper::lastUpdatedContacts($vault),
             'upcomingReminders' => VaultShowViewHelper::upcomingReminders($vault, Auth::user()),
             'favorites' => VaultShowViewHelper::favorites($vault, Auth::user()),
-            'feed' => ModuleFeedViewHelper::data($items, Auth::user()),
             'dueTasks' => VaultShowViewHelper::dueTasks($vault, Auth::user()),
+            'loadFeedUrl' => route('vault.feed.show', [
+                'vault' => $vaultId,
+            ]),
         ]);
     }
 

diff --git a/domains/Vault/ManageVault/Web/Controllers/VaultFeedController.php b/domains/Vault/ManageVault/Web/Controllers/VaultFeedController.php
@@ -0,0 +1,33 @@
+<?php
+
+namespace App\Vault\ManageVault\Web\Controllers;
+
+use App\Contact\ManageContactFeed\Web\ViewHelpers\ModuleFeedViewHelper;
+use App\Helpers\PaginatorHelper;
+use App\Http\Controllers\Controller;
+use App\Models\Contact;
+use App\Models\ContactFeedItem;
+use App\Models\Vault;
+use Illuminate\Http\Request;
+use Illuminate\Support\Facades\Auth;
+
+class VaultFeedController extends Controller
+{
+    public function show(Request $request, int $vaultId)
+    {
+        $vault = Vault::findOrFail($vaultId);
+
+        $contactIds = Contact::where('vault_id', $vaultId)->select('id')->get()->toArray();
+
+        $items = ContactFeedItem::whereIn('contact_id', $contactIds)
+            ->with('author')
+            ->with('contact')
+            ->orderBy('created_at', 'desc')
+            ->paginate(15);
+
+        return response()->json([
+            'data' => ModuleFeedViewHelper::data($items, Auth::user(), $vault),
+            'paginator' => PaginatorHelper::getData($items),
+        ], 200);
+    }
+}
diff --git a/lang/en/app.php b/lang/en/app.php
@@ -65,6 +65,7 @@
     'next' => 'Next',
     'view_all' => 'View all',
     'view_map' => 'View on map',
+    'view_older' => 'Load previous entries',
     'download' => 'Download',
 
     'unknown_name' => 'Unknown name',

diff --git a/lang/fr/app.php b/lang/fr/app.php
@@ -65,6 +65,7 @@
     'next' => 'Suivant',
     'view_all' => 'Tout voir',
     'view_map' => 'Voir sur la carte',
+    'view_older' => 'Voir les entrées précédentes',
     'download' => 'Télécharger',
 
     'unknown_name' => 'Nom non renseigné',

diff --git a/resources/js/Pages/Vault/Contact/Show.vue b/resources/js/Pages/Vault/Contact/Show.vue
@@ -152,7 +152,7 @@
 
                 <reminders v-if="module.type == 'reminders'" :data="reminders" />
 
-                <feed v-if="module.type == 'feed'" :data="feed" />
+                <feed v-if="module.type == 'feed'" :url="feed" />
 
                 <loans v-if="module.type == 'loans'" :data="loans" :layout-data="layoutData" />
 

diff --git a/resources/js/Pages/Vault/Dashboard/Index.vue b/resources/js/Pages/Vault/Dashboard/Index.vue
@@ -58,7 +58,7 @@
               </button>
             </div>
 
-            <feed :data="feed" :contact-view-mode="false" />
+            <feed :url="loadFeedUrl" :contact-view-mode="false" />
 
             <!-- feed -->
             <div class="mb-10 overflow-auto">
@@ -156,8 +156,8 @@ export default {
       type: Object,
       default: null,
     },
-    feed: {
-      type: Object,
+    loadFeedUrl: {
+      type: String,
       default: null,
     },
     dueTasks: {

diff --git a/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue b/resources/js/Pages/Vault/Dashboard/Partials/UpcomingReminders.vue
@@ -48,7 +48,7 @@
     <!-- blank state -->
     <div
       v-if="data.reminders.length == 0"
-      class="mb-6 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
+      class="mb-4 rounded-lg border border-gray-200 bg-white dark:border-gray-700 dark:bg-gray-900">
       <p class="p-5 text-center">
         {{ $t('vault.dashboard_reminders_blank') }}
       </p>

diff --git a/resources/js/Shared/Modules/Feed.vue b/resources/js/Shared/Modules/Feed.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="mb-4">
     <div class="ml-4 border-l border-gray-200 dark:border-gray-700">
-      <div v-for="feedItem in data.items" :key="feedItem.id" class="mb-8">
+      <div v-for="feedItem in feed" :key="feedItem.id" class="mb-8">
         <!-- action & user -->
         <div class="mb-3 flex">
           <div class="icon-avatar relative w-6">
@@ -118,13 +118,28 @@
     </div>
 
     <!-- blank state -->
-    <div v-if="data.items.length == 0">
+    <div v-if="feed.length == 0 && !loading">
       <p class="p-5 text-center">There is no activity yet.</p>
     </div>
+
+    <!-- loading mode -->
+    <div v-if="loading" class="mb-5 rounded-lg border border-gray-200 p-20 text-center">
+      <loading />
+    </div>
+
+    <!-- load more -->
+    <div class="text-center" v-if="paginator.hasMorePages">
+      <span
+        @click="load()"
+        class="cursor-pointer rounded border border-gray-200 px-3 py-1 text-sm text-blue-500 hover:border-gray-500 dark:border-gray-700">
+        {{ $t('app.view_older') }}
+      </span>
+    </div>
   </div>
 </template>
 
 <script>
+import Loading from '@/Shared/Loading.vue';
 import Avatar from '@/Shared/Avatar.vue';
 import GenericAction from '@/Shared/Modules/FeedItems/GenericAction.vue';
 import LabelAssigned from '@/Shared/Modules/FeedItems/LabelAssigned.vue';
@@ -134,6 +149,7 @@ import Pet from '@/Shared/Modules/FeedItems/Pet.vue';
 
 export default {
   components: {
+    Loading,
     Avatar,
     GenericAction,
     LabelAssigned,
@@ -143,14 +159,54 @@ export default {
   },
 
   props: {
-    data: {
-      type: Object,
-      default: null,
-    },
     contactViewMode: {
       type: Boolean,
       default: true,
     },
+    url: {
+      type: String,
+      default: '',
+    },
+  },
+
+  data() {
+    return {
+      feed: [],
+      loading: false,
+      paginator: [],
+    };
+  },
+
+  mounted() {
+    this.initialLoad();
+  },
+
+  methods: {
+    initialLoad() {
+      this.loading = true;
+      axios
+        .get(this.url)
+        .then((response) => {
+          this.loading = false;
+          response.data.data.items.forEach((entry) => {
+            this.feed.push(entry);
+          });
+          this.paginator = response.data.paginator;
+        })
+        .catch(() => {});
+    },
+
+    load() {
+      axios
+        .get(this.paginator.nextPageUrl)
+        .then((response) => {
+          response.data.data.items.forEach((entry) => {
+            this.feed.push(entry);
+          });
+          this.paginator = response.data.paginator;
+        })
+        .catch(() => {});
+    },
   },
 };
 </script>

diff --git a/routes/web.php b/routes/web.php
@@ -11,6 +11,7 @@
 use App\Contact\ManageContact\Web\Controllers\ContactTemplateController;
 use App\Contact\ManageContactAddresses\Web\Controllers\ContactModuleAddressController;
 use App\Contact\ManageContactAddresses\Web\Controllers\ContactModuleAddressImageController;
+use App\Contact\ManageContactFeed\Web\Controllers\ContactFeedController;
 use App\Contact\ManageContactImportantDates\Web\Controllers\ContactImportantDatesController;
 use App\Contact\ManageContactInformation\Web\Controllers\ContactInformationController;
 use App\Contact\ManageDocuments\Web\Controllers\ContactModuleDocumentController;
@@ -85,6 +86,7 @@
 use App\Vault\ManageFiles\Web\Controllers\VaultFileController;
 use App\Vault\ManageTasks\Web\Controllers\VaultTaskController;
 use App\Vault\ManageVault\Web\Controllers\VaultController;
+use App\Vault\ManageVault\Web\Controllers\VaultFeedController;
 use App\Vault\ManageVault\Web\Controllers\VaultReminderController;
 use App\Vault\ManageVaultSettings\Web\Controllers\VaultSettingsContactImportantDateTypeController;
 use App\Vault\ManageVaultSettings\Web\Controllers\VaultSettingsController;
@@ -128,6 +130,9 @@
             // reminders
             Route::get('reminders', [VaultReminderController::class, 'index'])->name('vault.reminder.index');
 
+            // vault feed entries
+            Route::get('feed', [VaultFeedController::class, 'show'])->name('vault.feed.show');
+
             // tasks
             Route::get('tasks', [VaultTaskController::class, 'index'])->name('vault.tasks.index');
 
@@ -142,21 +147,30 @@
 
                 // contact page
                 Route::middleware(['contact'])->prefix('{contact}')->group(function () {
+                    // general page information
                     Route::get('', [ContactController::class, 'show'])->name('contact.show');
                     Route::get('/edit', [ContactController::class, 'edit'])->name('contact.edit');
                     Route::post('', [ContactController::class, 'update'])->name('contact.update');
                     Route::delete('', [ContactController::class, 'destroy'])->name('contact.destroy');
+
+                    // toggle archive/favorite
                     Route::put('/toggle', [ContactArchiveController::class, 'update'])->name('contact.archive.update');
                     Route::put('/toggle-favorite', [ContactFavoriteController::class, 'update'])->name('contact.favorite.update');
+
+                    // template
                     Route::get('update-template', [ContactNoTemplateController::class, 'show'])->name('contact.blank');
                     Route::put('template', [ContactTemplateController::class, 'update'])->name('contact.template.update');
 
+                    // get the proper tab
                     Route::get('tabs/{slug}', [ContactPageController::class, 'show'])->name('contact.page.show');
 
                     // avatar
                     Route::put('avatar', [ModuleAvatarController::class, 'update'])->name('contact.avatar.update');
                     Route::delete('avatar', [ModuleAvatarController::class, 'destroy'])->name('contact.avatar.destroy');
 
+                    // contact feed entries
+                    Route::get('feed', [ContactFeedController::class, 'show'])->name('contact.feed.show');
+
                     // important dates
                     Route::get('dates', [ContactImportantDatesController::class, 'index'])->name('contact.date.index');
                     Route::post('dates', [ContactImportantDatesController::class, 'store'])->name('contact.date.store');

diff --git a/tests/Unit/Domains/Contact/ManageContactFeed/Web/ViewHelpers/ModuleFeedViewHelperTest.php b/tests/Unit/Domains/Contact/ManageContactFeed/Web/ViewHelpers/ModuleFeedViewHelperTest.php
@@ -27,7 +27,7 @@ public function it_gets_the_data_needed_for_the_view(): void
             ->orderBy('created_at', 'desc')
             ->get();
 
-        $array = ModuleFeedViewHelper::data($items, $user);
+        $array = ModuleFeedViewHelper::data($items, $user, $contact->vault);
 
         $this->assertEquals(
             1,