Grid ve Card Görünümü

2025-09-21 00:39:53 +03:00 · 2025-09-21 00:39:53 +03:00 · 3f69cc54e9
commit 3f69cc54e9
parent a01422ca60
8 changed files with 363 additions and 144 deletions
--- a/ui/src/components/ui/@types/common.ts
+++ b/ui/src/components/ui/@types/common.ts
@ -18,7 +18,7 @@ export declare namespace TypeAttributes {
    type Shape = 'round' | 'circle' | 'none'
    type Status = 'success' | 'warning' | 'danger' | 'info'
    type FormLayout = 'horizontal' | 'vertical' | 'inline'
-    type ControlSize = 'lg' | 'md' | 'sm'
+    type ControlSize = 'lg' | 'md' | 'sm' | 'xs'
    type MenuVariant = 'light' | 'dark' | 'themed' | 'transparent'
    type Direction = 'ltr' | 'rtl'
 }
--- a/ui/src/components/ui/Pagination/Pagination.tsx
+++ b/ui/src/components/ui/Pagination/Pagination.tsx
@ -8,132 +8,130 @@ import { useConfig } from '../ConfigProvider'
 import type { CommonProps } from '../@types/common'

 export interface PaginationProps extends CommonProps {
-    currentPage?: number
-    displayTotal?: boolean
-    onChange?: (pageNumber: number) => void
-    pageSize?: number
-    total?: number
+  currentPage?: number
+  displayTotal?: boolean
+  onChange?: (pageNumber: number) => void
+  pageSize?: number
+  total?: number
 }

 const Pagination = (props: PaginationProps) => {
-    const {
-        className,
-        currentPage = 1,
-        displayTotal = false,
-        onChange,
-        pageSize = 1,
-        total = 5,
-    } = props
+  const {
+    className,
+    currentPage = 1,
+    displayTotal = false,
+    onChange,
+    pageSize = 1,
+    total = 5,
+  } = props

-    const [paginationTotal, setPaginationTotal] = useState(total)
-    const [internalPageSize, setInternalPageSize] = useState(pageSize)
+  const [paginationTotal, setPaginationTotal] = useState(total)
+  const [internalPageSize, setInternalPageSize] = useState(pageSize)

-    const { themeColor, primaryColorLevel } = useConfig()
+  const { themeColor, primaryColorLevel } = useConfig()

-    const getInternalPageCount = useMemo(() => {
-        if (typeof paginationTotal === 'number') {
-            return Math.ceil(paginationTotal / internalPageSize)
+  const getInternalPageCount = useMemo(() => {
+    if (typeof paginationTotal === 'number') {
+      return Math.ceil(paginationTotal / internalPageSize)
+    }
+    return null
+  }, [paginationTotal, internalPageSize])
+
+  const getValidCurrentPage = useCallback(
+    (count: number | string) => {
+      const value = parseInt(count as string, 10)
+      const internalPageCount = getInternalPageCount
+      let resetValue
+      if (!internalPageCount) {
+        if (isNaN(value) || value < 1) {
+          resetValue = 1
        }
-        return null
-    }, [paginationTotal, internalPageSize])
-
-    const getValidCurrentPage = useCallback(
-        (count: number | string) => {
-            const value = parseInt(count as string, 10)
-            const internalPageCount = getInternalPageCount
-            let resetValue
-            if (!internalPageCount) {
-                if (isNaN(value) || value < 1) {
-                    resetValue = 1
-                }
-            } else {
-                if (value < 1) {
-                    resetValue = 1
-                }
-                if (value > internalPageCount) {
-                    resetValue = internalPageCount
-                }
-            }
-
-            if (
-                (resetValue === undefined && isNaN(value)) ||
-                resetValue === 0
-            ) {
-                resetValue = 1
-            }
-
-            return resetValue === undefined ? value : resetValue
-        },
-        [getInternalPageCount]
-    )
-
-    const [internalCurrentPage, setInternalCurrentPage] = useState(
-        currentPage ? getValidCurrentPage(currentPage) : 1
-    )
-
-    useEffect(() => {
-        if (total !== paginationTotal) {
-            setPaginationTotal(total)
+      } else {
+        if (value < 1) {
+          resetValue = 1
        }
-
-        if (pageSize !== internalPageSize) {
-            setInternalPageSize(pageSize)
+        if (value > internalPageCount) {
+          resetValue = internalPageCount
        }
+      }

-        if (currentPage !== internalCurrentPage) {
-            setInternalCurrentPage(currentPage)
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [total, pageSize, currentPage])
+      if ((resetValue === undefined && isNaN(value)) || resetValue === 0) {
+        resetValue = 1
+      }

-    const onPaginationChange = (val: number) => {
-        setInternalCurrentPage(getValidCurrentPage(val))
-        onChange?.(getValidCurrentPage(val))
+      return resetValue === undefined ? value : resetValue
+    },
+    [getInternalPageCount],
+  )
+
+  const [internalCurrentPage, setInternalCurrentPage] = useState(
+    currentPage ? getValidCurrentPage(currentPage) : 1,
+  )
+
+  useEffect(() => {
+    if (total !== paginationTotal) {
+      setPaginationTotal(total)
    }

-    const onPrev = useCallback(() => {
-        const newPage = internalCurrentPage - 1
-        setInternalCurrentPage(getValidCurrentPage(newPage))
-        onChange?.(getValidCurrentPage(newPage))
-    }, [onChange, internalCurrentPage, getValidCurrentPage])
-
-    const onNext = useCallback(() => {
-        const newPage = internalCurrentPage + 1
-        setInternalCurrentPage(getValidCurrentPage(newPage))
-        onChange?.(getValidCurrentPage(newPage))
-    }, [onChange, internalCurrentPage, getValidCurrentPage])
-
-    const pagerClass = {
-        default: 'pagination-pager',
-        inactive: 'pagination-pager-inactive',
-        active: `text-${themeColor}-${primaryColorLevel} bg-${themeColor}-50 hover:bg-${themeColor}-50 dark:bg-${themeColor}-${primaryColorLevel} dark:text-gray-100`,
-        disabled: 'pagination-pager-disabled',
+    if (pageSize !== internalPageSize) {
+      setInternalPageSize(pageSize)
    }

-    const paginationClass = classNames('pagination', className)
+    if (currentPage !== internalCurrentPage) {
+      setInternalCurrentPage(currentPage)
+    }
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [total, pageSize, currentPage])

-    return (
-        <div className={paginationClass}>
-            {displayTotal && <Total total={total} />}
-            <Prev
-                currentPage={internalCurrentPage}
-                pagerClass={pagerClass}
-                onPrev={onPrev}
-            />
-            <Pager
-                pageCount={getInternalPageCount as number}
-                currentPage={internalCurrentPage}
-                pagerClass={pagerClass}
-                onChange={onPaginationChange}
-            />
-            <Next
-                currentPage={internalCurrentPage}
-                pageCount={getInternalPageCount as number}
-                pagerClass={pagerClass}
-                onNext={onNext}
-            />
-        </div>
-    )
+  const onPaginationChange = (val: number) => {
+    setInternalCurrentPage(getValidCurrentPage(val))
+    onChange?.(getValidCurrentPage(val))
+  }
+
+  const onPrev = useCallback(() => {
+    const newPage = internalCurrentPage - 1
+    setInternalCurrentPage(getValidCurrentPage(newPage))
+    onChange?.(getValidCurrentPage(newPage))
+  }, [onChange, internalCurrentPage, getValidCurrentPage])
+
+  const onNext = useCallback(() => {
+    const newPage = internalCurrentPage + 1
+    setInternalCurrentPage(getValidCurrentPage(newPage))
+    onChange?.(getValidCurrentPage(newPage))
+  }, [onChange, internalCurrentPage, getValidCurrentPage])
+
+  const pagerClass = {
+    default: 'pagination-pager px-2 py-1 text-xs rounded-md', // 🔽 küçük padding + küçük yazı
+    inactive: 'pagination-pager-inactive text-gray-500',
+    active: `text-${themeColor}-${primaryColorLevel} bg-${themeColor}-50 
+           hover:bg-${themeColor}-100 
+           dark:bg-${themeColor}-${primaryColorLevel} dark:text-gray-100`,
+    disabled: 'pagination-pager-disabled opacity-50',
+  }
+
+  const paginationClass = classNames(
+    'pagination flex items-center justify-center text-xs', // 🔽 daha küçük yazı + boşluk azaldı
+    className,
+  )
+
+  return (
+    <div className={paginationClass}>
+      {displayTotal && <Total total={total} />}
+      <Prev currentPage={internalCurrentPage} pagerClass={pagerClass} onPrev={onPrev} />
+      <Pager
+        pageCount={getInternalPageCount as number}
+        currentPage={internalCurrentPage}
+        pagerClass={pagerClass}
+        onChange={onPaginationChange}
+      />
+      <Next
+        currentPage={internalCurrentPage}
+        pageCount={getInternalPageCount as number}
+        pagerClass={pagerClass}
+        onNext={onNext}
+      />
+    </div>
+  )
 }

 Pagination.displayName = 'Pagination'
--- a/ui/src/views/form/FormButtons.tsx
+++ b/ui/src/views/form/FormButtons.tsx
@ -104,7 +104,7 @@ const FormButtons = (props: {

  return (
    <>
-      <div className="flex flex-row items-center gap-2">
+      <div className="flex flex-row items-center gap-1">
        {toolbarData
          ?.filter(
            (item) =>
@ -168,6 +168,21 @@ const FormButtons = (props: {
        {!!commandColumnData?.buttons?.filter((item) => typeof item !== 'string').length && (
          <Badge innerClass="bg-blue-500" />
        )}
+        <Button
+          variant="solid"
+          size="xs"
+          color="gray-500"
+          title={translate('::Cancel')}
+          onClick={() => {
+            if (onActionView && id) {
+              onActionView()
+            } else {
+              navigate(-1)
+            }
+          }}
+        >
+          <FaBackward />
+        </Button>
        {mode != 'new' && (
          <Button
            variant="solid"
@ -241,23 +256,6 @@ const FormButtons = (props: {
            <FaFileAlt />
          </Button>
        )}
-        {mode === 'new' && (
-          <Button
-            variant="solid"
-            size="xs"
-            color="gray-500"
-            title={translate('::Cancel')}
-            onClick={() => {
-              if (onActionView && id) {
-                onActionView()
-              } else {
-                navigate(-1)
-              }
-            }}
-          >
-            <FaBackward />
-          </Button>
-        )}
        {(mode == 'edit' || mode == 'new') && (
          <Button
            variant="solid"
--- a/ui/src/views/form/FormEdit.tsx
+++ b/ui/src/views/form/FormEdit.tsx
@ -66,7 +66,7 @@ const FormEdit = (
          defaultTitle="Sözsoft Kurs Platform"
        ></Helmet>
      )}
-      <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center justify-between mb-2">
        <h3>{translate('::' + gridDto?.gridOptions.title)}</h3>
        {permissionResults && (
          <FormButtons
--- a/ui/src/views/form/FormView.tsx
+++ b/ui/src/views/form/FormView.tsx
@ -61,7 +61,7 @@ const FormView = (
          defaultTitle="Sözsoft Kurs Platform"
        ></Helmet>
      )}
-      <div className="flex items-center justify-between mb-4">
+      <div className="flex items-center justify-between mb-2">
        <h3>{translate('::' + gridDto?.gridOptions.title)}</h3>
        {permissionResults && (
          <FormButtons
--- a/ui/src/views/list/CardView.tsx
+++ b/ui/src/views/list/CardView.tsx
@ -0,0 +1,167 @@
+import React, { useCallback, useEffect, useState } from 'react'
+import { GridDto } from '@/proxy/form/models'
+import { captionize } from 'devextreme/core/utils/inflector'
+import { useListFormCustomDataSource } from '@/shared/useListFormCustomDataSource'
+import { useNavigate } from 'react-router-dom'
+import { Pagination, Select } from '@/components/ui'
+import classNames from 'classnames'
+import { useStoreState } from '@/store/store'
+import { getList } from '@/services/form.service'
+import { FaAngleRight } from 'react-icons/fa'
+
+interface MultiFormViewProps {
+  listFormCode: string
+  searchParams?: URLSearchParams
+}
+
+const CardView = ({ listFormCode, searchParams }: MultiFormViewProps) => {
+  const { createSelectDataSource } = useListFormCustomDataSource({})
+  const [gridDto, setGridDto] = useState<GridDto>()
+  const navigate = useNavigate()
+  const [data, setData] = useState<any[]>([])
+  const [totalCount, setTotalCount] = useState(0)
+  const [currentPage, setCurrentPage] = useState(1)
+  const [pageSize, setPageSize] = useState(10)
+  const [pageSizeOptions, setPageSizeOptions] = useState<Option[]>([])
+  const mode = useStoreState((state) => state.theme.mode)
+
+  type Option = {
+    value: number
+    label: string
+  }
+
+  const onPageSizeSelect = ({ value }: Option) => {
+    setPageSize(value)
+    setCurrentPage(1) // Sayfa boyutu değiştiğinde ilk sayfaya dön
+  }
+
+  const onPageChange = (page: number) => {
+    setCurrentPage(page)
+  }
+
+  const loadData = useCallback(() => {
+    if (!gridDto) return
+
+    const store = createSelectDataSource(gridDto.gridOptions, listFormCode, searchParams)
+
+    const loadOptions = {
+      skip: (currentPage - 1) * pageSize,
+      take: pageSize,
+      requireTotalCount: true,
+    }
+
+    store.load(loadOptions).then((res: any) => {
+      setData(res.data)
+      setTotalCount(res.totalCount || 0)
+    })
+  }, [gridDto, listFormCode, searchParams, currentPage, pageSize])
+
+  useEffect(() => {
+    getList({ listFormCode }).then((res: any) => setGridDto(res.data))
+  }, [listFormCode])
+
+  useEffect(() => {
+    if (!gridDto) return
+
+    const pagerOptions = gridDto.gridOptions.pagerOptionDto
+    // const initialPageSize = gridDto.gridOptions.pageSize || 10
+    const allowedSizes = pagerOptions?.allowedPageSizes
+      ?.split(',')
+      .map((s) => Number(s.trim()))
+      .filter((n) => !isNaN(n) && n > 0) || [20, 50, 100]
+
+    // setPageSize(initialPageSize)
+    setPageSizeOptions(allowedSizes.map((size) => ({ value: size, label: `${size} page` })))
+  }, [gridDto, listFormCode, searchParams])
+
+  useEffect(() => {
+    loadData()
+  }, [loadData])
+
+  if (!gridDto) return null
+
+  return (
+    <>
+      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5 gap-4">
+        {data.map((row, idx) => {
+          const keyField = gridDto.gridOptions.keyFieldName
+          const rowId = row[keyField!]
+
+          const handleCardClick = () => {
+            if (rowId) {
+              navigate(`/admin/form/${listFormCode}/${rowId}`)
+            }
+          }
+
+          return (
+            <div
+              key={rowId || idx}
+              className="bg-white dark:bg-neutral-800 hover:shadow-xl hover:border-blue-400 border dark:border-neutral-700 transition-all duration-300 cursor-pointer flex flex-col group"
+              onClick={handleCardClick}
+            >
+              <div className="p-4 flex-grow">
+                <div className="grid grid-cols-1 gap-y-3">
+                  {gridDto.columnFormats
+                    .filter((col) => col.visible && col.listOrderNo > 0)
+                    .sort((a, b) => a.listOrderNo - b.listOrderNo)
+                    .slice(0, 10) // İlk 10 görünür alanı gösterelim
+                    .map((col, colIdx) => (
+                      <div key={col.fieldName} className="truncate text-sm">
+                        <p className="text-xs text-slate-500 dark:text-slate-400 mb-0.5">
+                          {captionize(col.captionName || col.fieldName)}
+                        </p>
+                        <p
+                          className={classNames(
+                            'truncate',
+                            colIdx === 0
+                              ? 'font-semibold text-base text-slate-800 dark:text-slate-100'
+                              : 'text-slate-700 dark:text-slate-300',
+                          )}
+                          title={row[col.fieldName!]}
+                        >
+                          {row[col.fieldName!]}
+                        </p>
+                      </div>
+                    ))}
+                </div>
+              </div>
+              <div className="bg-gray-50 dark:bg-neutral-700/50 p-2 border-t border-gray-100 dark:border-neutral-700 flex items-center justify-end text-xs font-semibold text-blue-600 dark:text-blue-400 opacity-0 group-hover:opacity-100 transition-opacity duration-300">
+                Görüntüle
+                <FaAngleRight className="ml-1 w-3 h-3" />
+              </div>
+            </div>
+          )
+        })}
+      </div>
+
+      {gridDto.gridOptions.pagerOptionDto?.visible && totalCount > pageSize && (
+        <div
+          className={classNames(
+            'flex items-center justify-between border-t-2 border-solid gap-4 p-2',
+          )}
+        >
+          <div className="flex items-center gap-2">
+            <span className="text-xs text-gray-600 dark:text-gray-300">
+              Toplam {totalCount} kayıt
+            </span>
+            <Select
+              size='xs'
+              menuPlacement='top'
+              value={pageSizeOptions.find((o) => o.value === pageSize)}
+              options={pageSizeOptions}
+              onChange={(selected) => onPageSizeSelect(selected as Option)}
+            />
+          </div>
+          <Pagination
+            currentPage={currentPage}
+            total={totalCount}
+            pageSize={pageSize}
+            onChange={onPageChange}
+          />
+        </div>
+      )}
+    </>
+  )
+}
+
+export default CardView
--- a/ui/src/views/list/Grid.tsx
+++ b/ui/src/views/list/Grid.tsx
@ -75,6 +75,7 @@ interface GridProps {
  isSubForm?: boolean
  level?: number
  refreshData?: () => Promise<void>
+  onGridDtoLoad?: (gridDto: GridDto) => void
 }

 const statedGridPanelColor = 'rgba(50, 200, 200, 0.5)' // kullanici tanimli gridState ile islem gormus gridin paneline ait renk
@ -446,6 +447,10 @@ const Grid = (props: GridProps) => {
        })),
      )
    }
+
+    if (gridDto) {
+      props.onGridDtoLoad?.(gridDto)
+    }
  }, [gridDto])

  useEffect(() => {
--- a/ui/src/views/list/List.tsx
+++ b/ui/src/views/list/List.tsx
@ -1,24 +1,75 @@
-import { CommonProps } from '@/@types/common'
-import { Meta } from '@/@types/routes'
-import Container from '@/components/shared/Container'
 import { useParams, useSearchParams } from 'react-router-dom'
+import { useState } from 'react'
+import Container from '@/components/shared/Container'
 import Grid from './Grid'
+import { Button } from '@/components/ui/button'
+import { FaList, FaTh } from 'react-icons/fa'
+import { useStoreState } from '@/store/store'
+import classNames from 'classnames'
+import { useLocalization } from '@/utils/hooks/useLocalization'
+import { GridDto } from '@/proxy/form/models'
+import CardView from './CardView'

-export interface FormProps extends CommonProps, Meta {
-  listFormCode?: string
-}
-
-const List = (props?: FormProps) => {
+const List = () => {
  const params = useParams()
-  const _listFormCode = props?.listFormCode ?? params?.listFormCode ?? ''
+  const { translate } = useLocalization()
  const [searchParams] = useSearchParams()
+  const listFormCode = params?.listFormCode ?? ''
+  const [viewMode, setViewMode] = useState<'grid' | 'card'>('grid')
+  const mode = useStoreState((state) => state.theme.mode)
+  const [gridDto, setGridDto] = useState<GridDto>()

-  return _listFormCode ? (
+  if (!listFormCode) return null
+
+  return (
    <Container>
-      <Grid listFormCode={_listFormCode} searchParams={searchParams} isSubForm={false}></Grid>
+      <div
+        className={classNames('flex items-center border-b-2 border-solid gap-1 pb-1', {
+          'border-gray-100': mode === 'light',
+          'border-neutral-700': mode === 'dark',
+        })}
+      >
+        <h3>{translate('::' + gridDto?.gridOptions?.title)}</h3>
+
+        {gridDto?.gridOptions?.description === gridDto?.gridOptions?.title ? (
+          <p className="text-gray-600 mr-auto pt-1 ml-2"></p>
+        ) : (
+          <p className="text-gray-600 mr-auto pt-1 ml-2">
+            {translate('::' + gridDto?.gridOptions?.description)}
+          </p>
+        )}
+
+        <div className="flex gap-1">
+          <Button
+            size="xs"
+            variant={viewMode === 'grid' ? 'solid' : 'default'}
+            onClick={() => setViewMode('grid')}
+            title="Grid Görünümü"
+          >
+            <FaList className="w-4 h-4" />
+          </Button>
+          <Button
+            size="xs"
+            variant={viewMode === 'card' ? 'solid' : 'default'}
+            onClick={() => setViewMode('card')}
+            title="Kart Görünümü"
+          >
+            <FaTh className="w-4 h-4" />
+          </Button>
+        </div>
+      </div>
+
+      {viewMode === 'grid' ? (
+        <Grid
+          listFormCode={listFormCode}
+          searchParams={searchParams}
+          isSubForm={false}
+          onGridDtoLoad={setGridDto}
+        />
+      ) : (
+        <CardView listFormCode={listFormCode} searchParams={searchParams} />
+      )}
    </Container>
-  ) : (
-    <></>
  )
 }