feat: add filter to journal (#6758)

Co-authored-by: Alexis Saettler <[email protected]>
monicahq · Nov 6, 2023 · 6ec0735 · 6ec0735
1 parent e4a41d8
commit 6ec0735
Show file tree

Hide file tree

Showing 29 changed files with 294 additions and 22 deletions.
diff --git a/app/Http/Controllers/JournalController.php b/app/Http/Controllers/JournalController.php
@@ -28,10 +28,26 @@ public function index()
      *
      * @return array
      */
-    public function list()
+    public function list(Request $request)
     {
+
+        $startDate = $request->input('start_date');
+        $endDate = $request->input('end_date');
+        $sortBy = $request->input('sort_by', 'created_at'); 
+        $sortOrder = $request->input('sort_order', 'desc'); 
+        $perPage = $request->input('per_page', 30);
+
         $entries = collect([]);
-        $journalEntries = auth()->user()->account->journalEntries()->paginate(30);
+
+        $journalEntriesQuery = auth()->user()->account->journalEntries();
+
+        if ($startDate && $endDate) {
+            $journalEntriesQuery->whereDate('date', '>=', $startDate)
+                ->whereDate('date', '<=', $endDate);
+        }
+        $journalEntries = $journalEntriesQuery->orderBy($sortBy, $sortOrder)
+        ->paginate($perPage);
+
 
         // this is needed to determine if we need to display the calendar
         // (month + year) next to the journal entry

diff --git a/resources/js/components/journal/JournalList.vue b/resources/js/components/journal/JournalList.vue
@@ -1,29 +1,74 @@
 <style scoped>
 .fade-enter-active,
 .fade-leave-active {
-    transition: opacity .4s
+  transition: opacity .4s
 }
 </style>
 
 <template>
   <div class="mw9 center">
     <!-- Left sidebar -->
-    <div :class="[ dirltr ? 'fl' : 'fr' ]" class="w-70-ns w-100 pa2">
+    <div :class="[dirltr ? 'fl' : 'fr']" class="w-70-ns w-100 pa2">
+      <!-- Filters -->
+      <div class="filter mb-4">
+        <div class="d-flex pb-2">
+          <div class="dt">
+            <label for="start-date">{{ $t('journal.start_date') }}:</label>
+            <input id="start-date" v-model="startDate" type="date" class="form-control" />
+          </div>
+          <div class="dt pl-2">
+            <label for="end-date py-2">{{ $t('journal.end_date') }}:</label>
+            <input id="end-date" v-model="endDate" type="date" class="form-control" />
+          </div>
+          <div class="dt pl-2">
+            <label for="per-page">{{ $t('journal.per_page') }}:</label>
+            <input id="per-page" v-model="perPage" type="number" class="form-control" />
+          </div>
+          <div class="dt pl-2">
+            <label for="sort-order">{{ $t('journal.sort_order') }} :</label>
+            <select id="sort-order" v-model="sortOrder" class="form-control">
+              <option value="asc">
+                {{ $t('journal.ascending') }}
+              </option>
+              <option value="desc">
+                {{ $t('journal.descending') }}
+              </option>
+            </select>
+          </div>
+        </div>
+        <button class="btn btn-primary" @click="getEntries">
+          {{ $t('journal.apply_filter') }}
+        </button>
+      </div>
+
+
       <!-- How was your day -->
       <journal-rate-day @hasRated="hasRated" />
 
       <!-- Logs -->
-      <div v-if="journalEntries.data" v-cy-name="'journal-entries-body'" v-cy-items="journalEntries.data.map(j => j.id)" :cy-object-items="journalEntries.data.map(j => j.object.id)">
-        <div v-for="journalEntry in journalEntries.data" :key="journalEntry.id" v-cy-name="'entry-body-' + journalEntry.id" class="cf">
-          <journal-content-rate v-if="journalEntry.journalable_type === 'App\\Models\\Journal\\Day'" :journal-entry="journalEntry" @deleteJournalEntry="deleteJournalEntry" />
-
-          <journal-content-activity v-else-if="journalEntry.journalable_type === 'App\\Models\\Account\\Activity'" :journal-entry="journalEntry" />
-
-          <journal-content-entry v-else-if="journalEntry.journalable_type === 'App\\Models\\Journal\\Entry'" :journal-entry="journalEntry" @deleteJournalEntry="deleteJournalEntry" />
+      <div v-if="journalEntries.data" v-cy-name="'journal-entries-body'" v-cy-items="journalEntries.data.map(j => j.id)"
+           :cy-object-items="journalEntries.data.map(j => j.object.id)"
+      >
+        <div v-for="journalEntry in journalEntries.data" :key="journalEntry.id"
+             v-cy-name="'entry-body-' + journalEntry.id" class="cf"
+        >
+          <journal-content-rate v-if="journalEntry.journalable_type === 'App\\Models\\Journal\\Day'"
+                                :journal-entry="journalEntry" @deleteJournalEntry="deleteJournalEntry"
+          />
+
+          <journal-content-activity v-else-if="journalEntry.journalable_type === 'App\\Models\\Account\\Activity'"
+                                    :journal-entry="journalEntry"
+          />
+
+          <journal-content-entry v-else-if="journalEntry.journalable_type === 'App\\Models\\Journal\\Entry'"
+                                 :journal-entry="journalEntry" @deleteJournalEntry="deleteJournalEntry"
+          />
         </div>
       </div>
 
-      <div v-if="(journalEntries.per_page * journalEntries.current_page) <= journalEntries.total" class="br3 ba b--gray-monica bg-white pr3 pb3 pt3 mb3 tc">
+      <div v-if="(journalEntries.per_page * journalEntries.current_page) <= journalEntries.total"
+           class="br3 ba b--gray-monica bg-white pr3 pb3 pt3 mb3 tc"
+      >
         <p class="mb0 pointer" @click="loadMore()">
           <span v-if="!loadingMore">
             {{ $t('app.load_more') }}
@@ -34,7 +79,9 @@
         </p>
       </div>
 
-      <div v-if="journalEntries.total === 0" v-cy-name="'journal-blank-state'" class="br3 ba b--gray-monica bg-white pr3 pb3 pt3 mb3 tc">
+      <div v-if="journalEntries.total === 0" v-cy-name="'journal-blank-state'"
+           class="br3 ba b--gray-monica bg-white pr3 pb3 pt3 mb3 tc"
+      >
         <div class="tc mb4">
           <img src="img/journal/blank.svg" :alt="$t('journal.journal_empty')" />
         </div>
@@ -46,7 +93,7 @@
     </div>
 
     <!-- Right sidebar -->
-    <div :class="[ dirltr ? 'fl' : 'fr' ]" class="w-30-ns w-100 pa2">
+    <div :class="[dirltr ? 'fl' : 'fr']" class="w-30-ns w-100 pa2">
       <a v-cy-name="'add-entry-button'" href="journal/add" class="btn btn-primary w-100 mb4">
         {{ $t('journal.journal_add') }}
       </a>
@@ -68,15 +115,19 @@ export default {
       showSadSmileyColor: false,
       showHappySmileyColor: false,
       loadingMore: false,
-
+      startDate: '',
+      endDate: '',
+      sortBy: 'created_at', // Specify the field to sort by (e.g., 'created_at', 'updated_at')
+      sortOrder: 'desc', // Specify the sort order ('asc' or 'desc')
+      perPage: 30, // Specify the number of entries per page
     };
   },
 
   computed: {
     dirltr() {
       return this.$root.htmldir === 'ltr';
     },
-    hasMorePage: function() {
+    hasMorePage: function () {
       var total = this.journalEntries.per_page * this.journalEntries.current_page;
 
       if (total >= this.journalEntries.total) {
@@ -97,7 +148,15 @@ export default {
     },
 
     getEntries() {
-      axios.get('journal/entries')
+      axios.get('journal/entries', {
+        params: {
+          start_date: this.startDate,
+          end_date: this.endDate,
+          per_page: this.perPage,
+          sort_order: this.sortOrder,
+          sort_by: this.sortBy,
+        },
+      })
         .then(response => {
           this.journalEntries = response.data;
           this.journalEntries.current_page = response.data.current_page;
@@ -109,28 +168,36 @@ export default {
     },
 
     // This event is omited from the child component
-    deleteJournalEntry: function($journalEntryId) {
+    deleteJournalEntry: function ($journalEntryId) {
       // check if the deleted entry date is today. If that's the case
       // we need to put back the Rate box. This is only necessary if
       // the user does all his actions on the same page without ever
       // reloading the page.
-      this.journalEntries.data.filter(function(obj) {
+      this.journalEntries.data.filter(function (obj) {
         return obj.id === $journalEntryId;
       });
 
       // Filter out the array without the deleted Journal Entry
-      this.journalEntries.data = this.journalEntries.data.filter(function(element) {
+      this.journalEntries.data = this.journalEntries.data.filter(function (element) {
         return element.id !== $journalEntryId;
       });
     },
 
-    hasRated: function(journalObject) {
+    hasRated: function (journalObject) {
       this.journalEntries.data.unshift(journalObject);
     },
 
     loadMore() {
       this.loadingMore = true;
-      axios.get('journal/entries?page=' + (this.journalEntries.current_page + 1))
+      axios.get('journal/entries?page=' + (this.journalEntries.current_page + 1),{
+        params: {
+          start_date: this.startDate,
+          end_date: this.endDate,
+          per_page: this.perPage,
+          sort_order: this.sortOrder,
+          sort_by: this.sortBy,
+        },
+      })
         .then(response => {
           this.journalEntries.current_page = response.data.current_page;
           this.journalEntries.next_page_url = response.data.next_page_url;

diff --git a/resources/lang/ar/journal.php b/resources/lang/ar/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'قم بتدوين مذكرتك الأولى',
     'journal_blank_description' => 'المذكرة تدَعُك تدون الأحداث التي حصلت لك، لتتذكرها.',
     'delete_confirmation' => 'هل أنت متأكد من حذف تدوين هذه المذكرة؟',
+    'apply_filter' => 'طبق الفلترة',
+    "start_date" => "تاريخ البدء" ,
+     "end_date" => "تاريخ الانتهاء" ,
+     "per_page" => "لكل صفحة" ,
+     'Sort_order' => 'فرز حسب تاريخ الإنشاء',
+     "ascending" => "تصاعدي" ,
+     "descending" => "تنازلي" ,
 ];
diff --git a/resources/lang/cs/journal.php b/resources/lang/cs/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Přidej svůj první deníkový záznam',
     'journal_blank_description' => 'Deník umožňuje zaznamenávání událostí které se staly a ulehčuje jejich zapamatování.',
     'delete_confirmation' => 'Opravdu chcete smazat tento deníkový záznam?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/da/journal.php b/resources/lang/da/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Add your first journal entry',
     'journal_blank_description' => 'The journal lets you write events that happened to you, and remember them.',
     'delete_confirmation' => 'Are you sure you want to delete this journal entry?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/de/journal.php b/resources/lang/de/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Schreibe deinen ersten Eintrag',
     'journal_blank_description' => 'Im Tagebuch kannst du deine Erlebnisse festhalten und dich später an sie erinnern.',
     'delete_confirmation' => 'Willst du diesen Eintrag wirklich löschen?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/el/journal.php b/resources/lang/el/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Προσθέστε την πρώτη καταχώρηση ημερολογίου',
     'journal_blank_description' => 'Το ημερολόγιο σας επιτρέπει να γράφετε γεγονότα που σας συνέβησαν και να τα θυμάστε.',
     'delete_confirmation' => 'Είστε βέβαιοι ότι θέλετε να διαγράψετε αυτή την καταχώρηση ημερολογίου;',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/en-GB/journal.php b/resources/lang/en-GB/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Add your first journal entry',
     'journal_blank_description' => 'The journal lets you write events that happened to you, and remember them.',
     'delete_confirmation' => 'Are you sure you want to delete this journal entry?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/en/journal.php b/resources/lang/en/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Add your first journal entry',
     'journal_blank_description' => 'The journal lets you write events that happened to you, and remember them.',
     'delete_confirmation' => 'Are you sure you want to delete this journal entry?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/es/journal.php b/resources/lang/es/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Añade tu primera entrada de diario',
     'journal_blank_description' => 'El diario te permite escribir eventos que te han pasado y recordarlos.',
     'delete_confirmation' => '¿Seguro que deseas eliminar esta entrada de tu diario?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/fa/journal.php b/resources/lang/fa/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Add your first journal entry',
     'journal_blank_description' => 'The journal lets you write events that happened to you, and remember them.',
     'delete_confirmation' => 'Are you sure you want to delete this journal entry?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/fi/journal.php b/resources/lang/fi/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Add your first journal entry',
     'journal_blank_description' => 'The journal lets you write events that happened to you, and remember them.',
     'delete_confirmation' => 'Are you sure you want to delete this journal entry?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/fr/journal.php b/resources/lang/fr/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Ajouter votre première entrée dans le journal',
     'journal_blank_description' => 'Le journal vous permet de vous rappeler d’évènements passés, ou à venir.',
     'delete_confirmation' => 'Êtes-vous sûr de vouloir supprimer cette entrée ?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/he/journal.php b/resources/lang/he/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'ניתן להוסיף את רשומת היומן הראשונה שלך',
     'journal_blank_description' => 'היומן מאפשר לך לכתוב אירועים שעברו עליך ולזכור אותם.',
     'delete_confirmation' => 'למחוק את הרשומה הזאת ביומן?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/hr/journal.php b/resources/lang/hr/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Add your first journal entry',
     'journal_blank_description' => 'The journal lets you write events that happened to you, and remember them.',
     'delete_confirmation' => 'Are you sure you want to delete this journal entry?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/id/journal.php b/resources/lang/id/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Tambahkan entri jurnal pertama Anda',
     'journal_blank_description' => 'Jurnal memungkinkan Anda menulis peristiwa yang terjadi pada Anda, dan mengingatnya.',
     'delete_confirmation' => 'Apakah Anda yakin ingin menghapus entri jurnal ini?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];
diff --git a/resources/lang/it/journal.php b/resources/lang/it/journal.php
@@ -28,4 +28,11 @@
     'journal_blank_cta' => 'Scrivi qualcosa nel diario',
     'journal_blank_description' => 'Il diario ti permette di appuntare cose che ti succedono, e ricordarle.',
     'delete_confirmation' => 'Sei sicuro di voler rimuovere questa pagina dal diario?',
+    'apply_filter' => 'Apply filter',
+    'start_date' => 'Start Date',
+    'end_date' => 'End Date',
+    'per_page' => 'Per Page',
+    'sort_order' => 'Sort By Created At',
+    'ascending' => 'Ascending',
+    'descending' => 'Descending',
 ];