Fix alter name/desc for node, make /node /edge funcitonal

static/js/alpine/pagination.js

@@ -5,6 +5,125 @@
  */
 
 document.addEventListener('alpine:init', () => {
+
+  const basePagination = (
+    items,
+    currentPage,
+    totalPages,
+    totalItems,
+    perPage,
+    isReviewed,
+    instanceId
+  ) => ({
+    items,
+    currentPage,
+    totalPages,
+    totalItems,
+    perPage,
+    isReviewed,
+    instanceId,
+
+    get paginatedItems() {
+      return this.items;
+    },
+
+    get showingStart() {
+      if (this.totalItems === 0) return 0;
+      return (this.currentPage - 1) * this.perPage + 1;
+    },
+
+    get showingEnd() {
+      if (this.totalItems === 0) return 0;
+      return Math.min((this.currentPage - 1) * this.perPage + this.items.length, this.totalItems);
+    },
+
+    nextPage() {
+      if (this.currentPage < this.totalPages) {
+        this.fetchPage(this.currentPage + 1);
+      }
+    },
+
+    prevPage() {
+      if (this.currentPage > 1) {
+        this.fetchPage(this.currentPage - 1);
+      }
+    },
+
+    goToPage(page) {
+      if (page >= 1 && page <= this.totalPages) {
+        this.fetchPage(page);
+      }
+    },
+
+    get pageNumbers() {
+      const pages = [];
+      const total = this.totalPages;
+      const current = this.currentPage;
+
+      if (total === 0) {
+        return pages;
+      }
+
+      if (total <= 7) {
+        for (let i = 1; i <= total; i++) {
+          pages.push({ page: i, isEllipsis: false, key: `${this.instanceId}-page-${i}` });
+        }
+      } else {
+        pages.push({ page: 1, isEllipsis: false, key: `${this.instanceId}-page-1` });
+
+        let rangeStart;
+        let rangeEnd;
+
+        if (current <= 4) {
+          rangeStart = 2;
+          rangeEnd = 5;
+        } else if (current >= total - 3) {
+          rangeStart = total - 4;
+          rangeEnd = total - 1;
+        } else {
+          rangeStart = current - 1;
+          rangeEnd = current + 1;
+        }
+
+        if (rangeStart > 2) {
+          pages.push({ page: '...', isEllipsis: true, key: `${this.instanceId}-ellipsis-start` });
+        }
+
+        for (let i = rangeStart; i <= rangeEnd; i++) {
+          pages.push({ page: i, isEllipsis: false, key: `${this.instanceId}-page-${i}` });
+        }
+
+        if (rangeEnd < total - 1) {
+          pages.push({ page: '...', isEllipsis: true, key: `${this.instanceId}-ellipsis-end` });
+        }
+
+        pages.push({ page: total, isEllipsis: false, key: `${this.instanceId}-page-${total}` });
+      }
+
+      return pages;
+    }
+  });
+
+  Alpine.data('paginatedList',
+    (items, options = {}) => ({
+      ...basePagination(items,1, 0, 0, options.perPage || 50, options.isReviewed || false, options.instanceId || Math.random().toString(36).substring(2, 9),),
+
+      init() {
+        this.fetchPage(1);
+      },
+
+      async fetchPage(page) {
+        this.totalItems = this.items.length;
+        this.totalPages = Math.ceil(this.items.length / this.perPage);
+        this.currentPage = page
+
+        const start = page * this.perPage - this.perPage;
+        const end = page * this.perPage;
+        return this.items.slice(start, end);
+      }
+
+    }));
+
   Alpine.data('remotePaginatedList', (options = {}) => ({
     items: [],
     currentPage: 1,