danak/asan-installer-front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

complete installation device pagination

Browse Source
This commit is contained in:
Alihaghighattalab
2024-08-22 17:07:33 +03:30
parent 1b96b0dc2c
commit 4b4c546aaa
11 changed files with 176 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files
package-lock.json
Generated
+39 -1
View File
@@ -36,7 +36,8 @@
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4",
"yup": "^1.4.0"
"yup": "^1.4.0",
"zustand": "^4.5.5"
},
"devDependencies": {
"@tanstack/eslint-plugin-query": "^5.51.15",
@@ -19162,6 +19163,15 @@
"requires-port": "^1.0.0"
}
},
"node_modules/use-sync-external-store": {
"version": "1.2.2",
"resolved": "https://registry.npmjs.org/use-sync-external-store/-/use-sync-external-store-1.2.2.tgz",
"integrity": "sha512-PElTlVMwpblvbNqQ82d2n6RjStvdSoNe9FG28kNfz3WiXilJm4DdNkEzRhCZuIDwY8U08WVihhGR5iRqAwfDiw==",
"license": "MIT",
"peerDependencies": {
"react": "^16.8.0 || ^17.0.0 || ^18.0.0"
}
},
"node_modules/util-deprecate": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -20275,6 +20285,34 @@
"funding": {
"url": "https://github.com/sponsors/sindresorhus"
}
},
"node_modules/zustand": {
"version": "4.5.5",
"resolved": "https://registry.npmjs.org/zustand/-/zustand-4.5.5.tgz",
"integrity": "sha512-+0PALYNJNgK6hldkgDq2vLrw5f6g/jCInz52n9RTpropGgeAf/ioFUCdtsjCqu4gNhW9D01rUQBROoRjdzyn2Q==",
"license": "MIT",
"dependencies": {
"use-sync-external-store": "1.2.2"
},
"engines": {
"node": ">=12.7.0"
},
"peerDependencies": {
"@types/react": ">=16.8",
"immer": ">=9.0.6",
"react": ">=16.8"
},
"peerDependenciesMeta": {
"@types/react": {
"optional": true
},
"immer": {
"optional": true
},
"react": {
"optional": true
}
}
}
}
}
package.json
+2 -1
View File
@@ -31,7 +31,8 @@
"react-scripts": "5.0.1",
"typescript": "^4.9.5",
"web-vitals": "^2.1.4",
"yup": "^1.4.0"
"yup": "^1.4.0",
"zustand": "^4.5.5"
},
"scripts": {
"start": "react-scripts start",
src/components/common/combo-box.tsx
+10 -2
View File
@@ -2,15 +2,18 @@ import { Combobox, ComboboxButton, ComboboxInput, ComboboxOption, ComboboxOption
import { ArrowDown2 } from 'iconsax-react'
import { FC, useState } from 'react'
import { ComboBoxItems } from '../../types'
import { useParamsStore } from '../../store/params'
type Props = {
field?: any
placeholder?: string
className?: string,
data?: ComboBoxItems[] | []
mode?: "table" | "default"
}
export const ComboBox: FC<Props> = ({ field, placeholder, className, data = [] }) => {
export const ComboBox: FC<Props> = ({ field, placeholder, className, data = [], mode = "default" }) => {
const { updateParams } = useParamsStore()
const [query, setQuery] = useState('')
const filteredValue =
@@ -21,7 +24,12 @@ export const ComboBox: FC<Props> = ({ field, placeholder, className, data = [] }
})
return (
<Combobox value={field && field.value} onChange={field && field.onChange} onClose={() => setQuery('')} disabled={data?.length <= 0}>
<Combobox value={field && field.value} onChange={mode === "default" ? field && field.onChange : (e: ComboBoxItems) => {
console.log(e)
updateParams({
rows: e?.id
})
}} onClose={() => setQuery('')} disabled={data?.length <= 0}>
<div className="relative w-full">
<ComboboxInput
placeholder={placeholder}
src/components/common/input.tsx
+5 -3
View File
@@ -10,10 +10,12 @@ type Props = {
icon?: React.ReactNode,
field?: any,
ref?: any,
className?: string
className?: string,
value?: string,
onChange?: (value: string) => void
}
export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, ref, className }) => {
export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, ref, className, value, onChange }) => {
const [hidden, setHidden] = useState<boolean>(false)
const handleHidden = () => setHidden(prev => !prev)
return (
@@ -26,7 +28,7 @@ export const Input: FC<Props> = ({ placeholder, type = "text", icon, field, ref,
: icon}
{placeholder === "شماره کارت" && field.value && findBankByPAN(field.value).icon}
</div>
<InputComponent ref={ref} {...field} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className={`input-style min-w-full ${className}`} />
<InputComponent ref={ref} {...field} value={value} onChange={onChange} type={type === "password" && hidden ? "text" : type} placeholder={placeholder} className={`input-style min-w-full ${className}`} />
</div>
)
}
src/components/common/table.tsx
+33 -11
View File
@@ -1,21 +1,25 @@
import { flexRender, getCoreRowModel, getPaginationRowModel, SortingState, useReactTable } from "@tanstack/react-table"
import { ArrowDown2, ArrowLeft2, ArrowRight2, ArrowUp2, SearchNormal1 } from "iconsax-react"
import { FC } from "react"
import { FC, useEffect } from "react"
import { Input } from "./input"
import { ComboBox } from "./combo-box"
import { Loading } from "./loading"
import { useParamsStore } from "../../store/params"
import { tableRows } from "../../utility/table-rows"
type Props = {
columns: any
data: any
sorting: SortingState,
setSorting: React.Dispatch<React.SetStateAction<SortingState>>,
sorting?: SortingState,
setSorting?: React.Dispatch<React.SetStateAction<SortingState>>,
tableStatus?: string | number,
isLoading?: boolean
isLoading?: boolean,
totalData?: number
}
export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStatus, isLoading = false }) => {
export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStatus, isLoading = false, totalData = 0 }) => {
const { updateParams, params } = useParamsStore()
const totalPages = Math.ceil(totalData / params?.rows)
const table = useReactTable({
data: data ? data : [],
columns: columns ? columns : [],
@@ -32,14 +36,28 @@ export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStat
getPaginationRowModel: getPaginationRowModel()
})
const handleInputValue = (value: string) => {
updateParams({
search: value
})
}
useEffect(() => {
updateParams({
page: 1,
rows: 10,
search: ""
})
}, [updateParams])
return (
<div className="flex flex-col gap-10">
<div className="flex flex-col sm:flex-row justify-between items-center gap-2.5 md:gap-10">
<div className="sm:max-w-[300px] xl:max-w-[450px] w-full">
<Input placeholder="جستجو" className="bg-auth-form placeholder:text-[#777577]" icon={<SearchNormal1 color="#777577" />} />
<Input placeholder="جستجو" value={params?.search} onChange={(e: any) => handleInputValue(e?.target?.value)} className="bg-auth-form placeholder:text-[#777577]" icon={<SearchNormal1 color="#777577" />} />
</div>
<div className="w-full sm:max-w-[100px]">
<ComboBox placeholder="100" className="bg-auth-form" />
<ComboBox placeholder={params?.rows.toString()} className="bg-auth-form" data={tableRows} mode="table" />
</div>
</div>
{tableStatus && <div className="w-full flex justify-end items-end text-sm lg:text-lg text-primary-text-color font-normal -mb-7 pl-2">امتیاز من: {tableStatus}</div>}
@@ -73,9 +91,13 @@ export const Table: FC<Props> = ({ columns, data, setSorting, sorting, tableStat
</table>
{isLoading ? <Loading /> :
<div className="flex flex-row justify-center items-center border-t p-4 gap-x-3 mt-3">
<ArrowRight2 color="#11212D" size={19} className="cursor-pointer" onClick={() => table.getCanNextPage() && table.nextPage()} />
<p className="text-base font-normal text-primary-text-color">1-{table.getPageCount()}</p>
<ArrowLeft2 color="#11212D" size={19} className="cursor-pointer" onClick={() => table.getCanPreviousPage() && table.previousPage()} />
<ArrowRight2 color="#11212D" size={19} className="cursor-pointer" onClick={() => params?.page < totalPages && updateParams({
page: params?.page + 1
})} />
<p className="text-base font-normal text-primary-text-color">{params?.page}-{totalPages}</p>
<ArrowLeft2 color="#11212D" size={19} className="cursor-pointer" onClick={() => params?.page > 1 && updateParams({
page: params?.page - 1
})} />
</div>
}
</div>
src/components/installation-reports/index.tsx
+25 -9
View File
@@ -1,18 +1,34 @@
import { installationReportsCol } from "../../utility/reports"
import { Table } from "../common/table"
import { useState } from "react"
import { SortingState } from "@tanstack/react-table"
import { useQuery } from "@tanstack/react-query"
import { useEffect, useState } from "react"
import { useMutation } from "@tanstack/react-query"
import { getRegisterDeviceList } from "../../services/api/register-device"
import { RegisterDeviceResponse } from "../../types"
import { useParamsStore } from "../../store/params"
export const InstallationReports = () => {
const [sorting, setSorting] = useState<SortingState>([])
const { data, isLoading } = useQuery({
queryKey: ["register-device"],
queryFn: getRegisterDeviceList
const { params } = useParamsStore()
const [data, setData] = useState<RegisterDeviceResponse>({
data: [],
total: 0
})
const { mutate, isPending } = useMutation({
mutationFn: getRegisterDeviceList
})
useEffect(() => {
mutate({
...params
},
{
onSuccess: (res: any) => {
setData({
data: res?.data?.data,
total: res?.data?.total
})
}
})
}, [mutate, params])
return (
<Table columns={installationReportsCol} data={data?.data?.data} sorting={sorting} setSorting={setSorting} isLoading={isLoading} />
<Table columns={installationReportsCol} data={data?.data} totalData={data?.total} isLoading={isPending} />
)
}
src/services/api/auth.ts
+1 -1
View File
@@ -1,3 +1,3 @@
import axiosInstance from "../axios";
export const loginMutation = (payload: any) => axiosInstance.post<any>("/auth/gps/login", payload)
export const loginMutation = (payload: any) => axiosInstance.post<any>("/auth/gps/login/pass", payload)
src/services/api/register-device.ts
+4 -2
View File
@@ -1,4 +1,6 @@
import { RegisterDeviceResponse } from "../../types";
import { RegisterDeviceResponse, TableParams } from "../../types";
import axiosInstance from "../axios";
export const getRegisterDeviceList = () => axiosInstance.get<RegisterDeviceResponse[] | RegisterDeviceResponse | [], any>("/gps/register-device")
export const getRegisterDeviceList = (params: TableParams) => axiosInstance.get<RegisterDeviceResponse[] | RegisterDeviceResponse | [], any>("/gps/register-device", {
params: params
})
src/store/params.ts
+23
View File
@@ -0,0 +1,23 @@
import { create } from 'zustand';
import { TableParams } from '../types';
type ZustandState = {
params: TableParams;
updateParams: (newParams: Partial<TableParams>) => void;
};
export const useParamsStore = create<ZustandState>((set) => ({
params: {
page: 1,
rows: 10,
search: "",
},
updateParams: (newParams: Partial<TableParams>) =>
set((state) => ({
...state,
params: {
...state.params,
...newParams,
},
})),
}));
src/types/index.ts
+10 -11
View File
@@ -168,21 +168,14 @@ export interface DeviceId {
id: string
}
export interface RegisterDeviceResponse {
status: number,
_id: string,
deviceId: DeviceId
registerDate: string,
userId: string,
created_at: string,
updated_at: string,
__v: number,
id: string
data: RegisterDeviceData[] | [],
total: number
}
export interface RegisterDeviceData {
status: number,
_id: string,
deviceId: RegisterDeviceData[] | [],
deviceId: DeviceId[] | [],
registerDate: string,
userId: string,
created_at: string,
@@ -279,5 +272,11 @@ export interface ScoreResponse {
export interface ComboBoxItems {
name: string,
id: string | number
id: number
}
export interface TableParams {
page: number,
rows: number,
search: string
}
src/utility/table-rows.ts
+24
View File
@@ -0,0 +1,24 @@
import { ComboBoxItems } from "../types";
export const tableRows: ComboBoxItems[] | [] | undefined = [
{
id: 7,
name: "7"
},
{
id: 10,
name: "10"
},
{
id: 20,
name: "20"
},
{
id: 50,
name: "50"
},
{
id: 100,
name: "100"
},
]