Added pagination for nested modules.

area17 · Jul 25, 2024 · e504b7f · e504b7f
1 parent 4fa57e7
commit e504b7f
Show file tree

Hide file tree

Showing 3 changed files with 49 additions and 0 deletions.
diff --git a/frontend/js/components/table/nested/NestedDatatable.vue b/frontend/js/components/table/nested/NestedDatatable.vue
@@ -19,6 +19,11 @@
           :maxDepth="maxDepth"
           :draggable="draggable"
         />
+
+        <a17-paginate v-if="maxPage > 1 || initialMaxPage > maxPage && !isEmpty" :max="maxPage" :value="page"
+          :offset="offset" :availableOffsets="[initialOffset,initialOffset*3,initialOffset*6]"
+          @changePage="updatePage" @changeOffset="updateOffset"
+        />
       </div>
     </div>
   </div>
@@ -27,9 +32,12 @@
 <script>
   import { DatatableMixin, DraggableMixin, NestedDraggableMixin } from '@/mixins/index'
   import { DATATABLE } from '@/store/mutations/index'
+  import ACTIONS from '@/store/actions'
+  import { mapState } from 'vuex'
 
   import a17Table from './../Table.vue'
   import a17Tablehead from './../TableHead.vue'
+  import a17Paginate from './../Paginate.vue'
   import NestedList from './NestedList'
 
   export default {
@@ -43,8 +51,35 @@
     components: {
       'a17-table': a17Table,
       'a17-tablehead': a17Tablehead,
+      'a17-paginate': a17Paginate,
       'a17-nested-list': NestedList
     },
+    computed: {
+      ...mapState({
+        page: state => state.datatable.page,
+        offset: state => state.datatable.offset,
+        maxPage: state => state.datatable.maxPage,
+        initialOffset: state => state.datatable.defaultOffset,
+        initialMaxPage: state => state.datatable.defaultMaxPage
+      })
+    },
+    methods: {
+      updateOffset: function (value) {
+        this.$store.commit(DATATABLE.UPDATE_DATATABLE_PAGE, 1)
+        this.$store.commit(DATATABLE.UPDATE_DATATABLE_OFFSET, value)
+
+        // reload datas
+        this.$store.dispatch(ACTIONS.GET_DATATABLE)
+      },
+      updatePage: function (value) {
+        if (value !== this.page) {
+          this.$store.commit(DATATABLE.UPDATE_DATATABLE_PAGE, value)
+
+          // reload datas
+          this.$store.dispatch(ACTIONS.GET_DATATABLE)
+        }
+      }
+    },
     beforeMount: function () {
       function findBulkColumn (column) {
         return column.name === 'bulk'
@@ -93,5 +128,10 @@
   .nested-datatable__table {
     position: relative;
     width: 100%;
+
+    .paginate {
+      border: 1px solid #F2F2F2;
+      border-top: 0;
+    }
   }
 </style>
diff --git a/frontend/js/components/table/nested/NestedList.vue b/frontend/js/components/table/nested/NestedList.vue
@@ -138,6 +138,10 @@
     // border:1px solid grey;
     padding: 15px 0px 15px 0px;
 
+    &:first-child {
+      padding-bottom: 0px;
+    }
+
     * {
       will-change: auto;
     }

diff --git a/src/Repositories/ModuleRepository.php b/src/Repositories/ModuleRepository.php
@@ -26,6 +26,7 @@
 use Illuminate\Support\Facades\DB;
 use Illuminate\Support\Facades\Log;
 use Illuminate\Support\Str;
+use Kalnoy\Nestedset\NodeTrait;
 use ReflectionClass;
 
 abstract class ModuleRepository
@@ -61,6 +62,10 @@ public function get(
         array $appliedFilters = []
     ): LengthAwarePaginator|Collection {
         $query = $this->model->with($with);
+
+        if (in_array(NodeTrait::class, class_uses($this->model))) {
+            $query = $query->where('parent_id', NULL);
+        }
 
         $query = $this->filter($query, $scopes);
         $query = $this->order($query, $orders);