updated lang change and FormDisplay Components

2025-04-30 14:30:22 +03:00
parent f2cc7a69b5
commit 36e63960f8
87 changed files with 5517 additions and 312 deletions
--- a/WebServices/client-frontend/src/components/common/PaginationModifiers/PageNavigation.tsx
+++ b/WebServices/client-frontend/src/components/common/PaginationModifiers/PageNavigation.tsx
@@ -0,0 +1,116 @@
+"use client";
+import React from "react";
+import { Button } from "@/components/ui/button";
+import { PaginationBaseProps } from "./types";
+
+/**
+ * Calculate the page numbers to display in pagination
+ * @param currentPage Current active page
+ * @param totalPages Total number of pages
+ * @param maxButtons Maximum number of page buttons to show (default: 5)
+ * @returns Array of page numbers to display
+ */
+const getPageNumbers = (currentPage: number, totalPages: number, maxButtons: number = 5): number[] => {
+  const pageNumbers: number[] = [];
+  
+  // If we have fewer pages than the maximum buttons, show all pages
+  if (totalPages <= maxButtons) {
+    for (let i = 1; i <= totalPages; i++) {
+      pageNumbers.push(i);
+    }
+  } 
+  // If we're near the beginning, show first maxButtons pages
+  else if (currentPage <= 3) {
+    for (let i = 1; i <= maxButtons; i++) {
+      pageNumbers.push(i);
+    }
+  } 
+  // If we're near the end, show last maxButtons pages
+  else if (currentPage >= totalPages - 2) {
+    for (let i = totalPages - maxButtons + 1; i <= totalPages; i++) {
+      pageNumbers.push(i);
+    }
+  } 
+  // Otherwise, show pages centered around current page
+  else {
+    for (let i = currentPage - 2; i <= currentPage + 2; i++) {
+      pageNumbers.push(i);
+    }
+  }
+  
+  return pageNumbers;
+};
+
+export const PageNavigation: React.FC<PaginationBaseProps> = ({
+  pagination,
+  updatePagination,
+  loading = false,
+  lang,
+  translations,
+}) => {
+  const t = translations[lang] || {};
+
+  const handlePageChange = (newPage: number) => {
+    if (newPage >= 1 && newPage <= pagination.totalPages) {
+      updatePagination({ page: newPage });
+    }
+  };
+  
+  // Get the page numbers to display
+  const pageNumbers = getPageNumbers(pagination.page, pagination.totalPages);
+
+  return (
+    <div className="flex items-center space-x-2">
+      {pagination.back ? (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => handlePageChange(pagination.page - 1)}
+          disabled={loading}
+        >
+          {t.previous || "Previous"}
+        </Button>
+      ) : (
+        <Button variant="ghost" size="sm" disabled>
+          {t.previous || "Previous"}
+        </Button>
+      )}
+
+      {/* Page number buttons */}
+      <div className="flex items-center space-x-1">
+        {pageNumbers.map((pageNum) => (
+          <Button
+            key={pageNum}
+            variant={pagination.page === pageNum ? "default" : "outline"}
+            size="sm"
+            className="w-9 h-9 p-0"
+            onClick={() => handlePageChange(pageNum)}
+            disabled={loading}
+          >
+            {pageNum}
+          </Button>
+        ))}
+      </div>
+
+      {pagination.page < pagination.totalPages ? (
+        <Button
+          variant="outline"
+          size="sm"
+          onClick={() => handlePageChange(pagination.page + 1)}
+          disabled={loading}
+        >
+          {t.next || "Next"}
+        </Button>
+      ) : (
+        <Button variant="ghost" size="sm" disabled>
+          {t.next || "Next"}
+        </Button>
+      )}
+
+      {/* Page text display */}
+      <span className="px-4 py-1 text-sm text-muted-foreground">
+        {t.page || "Page"} {pagination.page} {t.of || "of"} {pagination.totalPages}
+      </span>
+    </div>
+  );
+};