From 70877560adfb1a5038db00e9caa59a46895190c4 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Thu, 8 Aug 2024 12:22:16 +0530 Subject: [PATCH 1/2] Issue feat: add created at , updated at, createdby, updatedby fields in usertable --- src/components/DynamicForm.tsx | 9 +--- src/components/KaTableComponent.tsx | 4 +- src/components/UserTable.tsx | 16 ++++--- src/data/tableColumns.ts | 71 +++++++++++++++++++++++++++-- src/utils/useSharedState.ts | 3 -- 5 files changed, 80 insertions(+), 23 deletions(-) diff --git a/src/components/DynamicForm.tsx b/src/components/DynamicForm.tsx index ae3c94d6..37277e45 100644 --- a/src/components/DynamicForm.tsx +++ b/src/components/DynamicForm.tsx @@ -1,13 +1,12 @@ +import useSubmittedButtonStore from "@/utils/useSharedState"; import { IChangeEvent, withTheme } from "@rjsf/core"; import { Theme as MaterialUITheme } from "@rjsf/mui"; import { RJSFSchema, RegistryFieldsType, WidgetProps } from "@rjsf/utils"; import validator from "@rjsf/validator-ajv8"; import { useTranslation } from "next-i18next"; -import React, { ReactNode, useState , useEffect} from "react"; +import React, { ReactNode, useEffect, useState } from "react"; import CustomRadioWidget from "./CustomRadioWidget"; import MultiSelectCheckboxes from "./MultiSelectCheckboxes"; -import { Button, Box } from "@mui/material"; -import useSubmittedButtonStore from "@/utils/useSharedState"; const FormWithMaterialUI = withTheme(MaterialUITheme); interface DynamicFormProps { @@ -50,10 +49,6 @@ const DynamicForm: React.FC = ({ const [localFormData, setLocalFormData] = useState(formData || {}); const submittedButtonStatus = useSubmittedButtonStore((state: any) => state.submittedButtonStatus); const setSubmittedButtonStatus = useSubmittedButtonStore((state:any) => state.setSubmittedButtonStatus); - const setSubmittedButtonEnable = useSubmittedButtonStore((state:any) => state.setSubmittedButtonEnable); - const submittedButtonEnable = useSubmittedButtonStore((state: any) => state.submittedButtonEnable); - - const widgets: any = { MultiSelectCheckboxes: MultiSelectCheckboxes, diff --git a/src/components/KaTableComponent.tsx b/src/components/KaTableComponent.tsx index 34e9f227..829bb58f 100644 --- a/src/components/KaTableComponent.tsx +++ b/src/components/KaTableComponent.tsx @@ -108,12 +108,12 @@ const KaTableComponent: React.FC = ({ /> ); } - if (props.column.key === DataKey.UPDATEDAT) { + if (props.column.key === DataKey?.UPDATEDAT) { return format( props.rowData?.updatedAt, DateFormat.YYYY_MM_DD, ); - } else if (props.column.key === DataKey.CREATEDAT) { + } else if (props.column.key === DataKey?.CREATEDAT) { return format( props.rowData?.createdAt, DateFormat.YYYY_MM_DD, diff --git a/src/components/UserTable.tsx b/src/components/UserTable.tsx index ea970444..093d7f57 100644 --- a/src/components/UserTable.tsx +++ b/src/components/UserTable.tsx @@ -95,7 +95,7 @@ const UserTable: React.FC = ({ const [deleteUserState, setDeleteUserState] = useState(false); const isMobile: boolean = useMediaQuery((theme: Theme) => - theme.breakpoints.down('sm'), + theme.breakpoints.down('md'), ); const [confirmButtonDisable, setConfirmButtonDisable] = useState(true); @@ -467,19 +467,19 @@ const UserTable: React.FC = ({ console.log(result); const finalResult = result?.map((user: any) => { const ageField = user.customFields.find( - (field: any) => field.name === "age", + (field: any) => field.label === "AGE", ); const genderField = user.customFields.find( - (field: any) => field.name === "gender", + (field: any) => field.label === "GENDER", ); const blockField = user.customFields.find( - (field: any) => field.name === "blocks", + (field: any) => field.label === "BLOCKS", ); const districtField = user.customFields.find( - (field: any) => field.name === "districts", + (field: any) => field.label === "DISTRICTS", ); const stateField = user.customFields.find( - (field: any) => field.name === "states", + (field: any) => field.label === "STATES", ); return { @@ -500,6 +500,10 @@ const UserTable: React.FC = ({ ? genderField.value?.charAt(0)?.toUpperCase() + genderField.value.slice(1).toLowerCase() : "-", + createdAt:user.createdAt, + updatedAt:user.updatedAt, + createdBy:user.createdBy, + updatedBy:user.updatedBy // centers: null, // Programs: null, }; diff --git a/src/data/tableColumns.ts b/src/data/tableColumns.ts index 024e6fcb..7b9d2e2a 100644 --- a/src/data/tableColumns.ts +++ b/src/data/tableColumns.ts @@ -33,21 +33,21 @@ export const getUserTableColumns = (t: any, isMobile: any) => { key: "mobile", title: t("FORM.MOBILE_NUMBER"), dataType: DataType.String, - width: isMobile ? 160 : undefined, + width: 130, }, { key: "state", title: t("FORM.STATE"), dataType: DataType.String, sortDirection: SortDirection.Ascend, - width: isMobile ? 160 : undefined, + width: 130, }, { key: "district", title: t("FORM.DISTRICT"), dataType: DataType.String, sortDirection: SortDirection.Ascend, - width: isMobile ? 160 : undefined, + width: 130, }, { @@ -64,12 +64,43 @@ export const getUserTableColumns = (t: any, isMobile: any) => { sortDirection: SortDirection.Ascend, width: isMobile ? 160 : undefined, }, + + { + key: "updatedBy", + title: t("TABLE_TITLE.UPDATED_BY"), + dataType: DataType.String, + sortDirection: SortDirection.Ascend, + width: isMobile ? 95 : "", + }, + { + key: "createdBy", + title: t("TABLE_TITLE.CREATED_BY"), + dataType: DataType.String, + sortDirection: SortDirection.Ascend, + width: isMobile ? 95 : "", + }, + { + key: "createdAt", + title: t("TABLE_TITLE.CREATED_DATE"), + dataType: DataType.String, + sortDirection: SortDirection.Ascend, + width: isMobile ? 95 : "", + }, + + { + key: "updatedAt", + title: t("TABLE_TITLE.UPDATED_DATE"), + dataType: DataType.String, + sortDirection: SortDirection.Ascend, + width: isMobile ? 95 : "", + }, { key: "actions", title: t("FORM.ACTION"), dataType: DataType.String, width: isMobile ? 160 : undefined, }, + ]; }; @@ -108,14 +139,14 @@ export const getTLTableColumns = (t: any, isMobile: any) => { title: t("FORM.STATE"), dataType: DataType.String, sortDirection: SortDirection.Ascend, - width: isMobile?160:undefined, + width: 160, }, { key: "district", title: t("FORM.DISTRICT"), dataType: DataType.String, sortDirection: SortDirection.Ascend, - width: isMobile?160:undefined, + width: 160, }, { @@ -125,6 +156,36 @@ export const getTLTableColumns = (t: any, isMobile: any) => { // sortDirection: SortDirection.Ascend, width: isMobile?160:undefined, }, + { + key: "updatedBy", + title: t("TABLE_TITLE.UPDATED_BY"), + dataType: DataType.String, + sortDirection: SortDirection.Ascend, + width: isMobile ? 95 : "", + }, + { + key: "createdBy", + title: t("TABLE_TITLE.CREATED_BY"), + dataType: DataType.String, + sortDirection: SortDirection.Ascend, + width: isMobile ? 95 : "", + }, + { + key: "createdAt", + title: t("TABLE_TITLE.CREATED_DATE"), + dataType: DataType.String, + sortDirection: SortDirection.Ascend, + width: isMobile ? 95 : "", + }, + + { + key: "updatedAt", + title: t("TABLE_TITLE.UPDATED_DATE"), + dataType: DataType.String, + sortDirection: SortDirection.Ascend, + width: isMobile ? 95 : "", + }, + { key: "actions", diff --git a/src/utils/useSharedState.ts b/src/utils/useSharedState.ts index 153234f9..fdfce6be 100644 --- a/src/utils/useSharedState.ts +++ b/src/utils/useSharedState.ts @@ -2,10 +2,7 @@ import { create } from 'zustand'; const useSubmittedButtonStore = create((set) => ({ submittedButtonStatus: false, - submittedButtonEnable: false, - setSubmittedButtonStatus: (status: boolean) => set({ submittedButtonStatus: status }), - setSubmittedButtonEnable: (status: boolean) => set({ submittedButtonEnable: status }), })); export default useSubmittedButtonStore; From cd87338d1271928e2089912728470ba1015e9751 Mon Sep 17 00:00:00 2001 From: Akshata Katwal Date: Thu, 8 Aug 2024 12:28:30 +0530 Subject: [PATCH 2/2] optimize code --- src/data/tableColumns.ts | 307 +++++++-------------------------------- 1 file changed, 50 insertions(+), 257 deletions(-) diff --git a/src/data/tableColumns.ts b/src/data/tableColumns.ts index 7b9d2e2a..7f2e2ed7 100644 --- a/src/data/tableColumns.ts +++ b/src/data/tableColumns.ts @@ -1,259 +1,52 @@ import { DataType, SortDirection } from "ka-table"; -export const getUserTableColumns = (t: any, isMobile: any) => { - return [ - { - key: "name", - title: t("FORM.NAME"), - dataType: DataType.String, - // sortDirection: SortDirection.Ascend, - width: isMobile ? 160 : undefined, - }, - { - key: "status", - title: t("FORM.STATUS"), - dataType: DataType.String, - /// sortDirection: SortDirection.Ascend, - width: isMobile ? 160 : undefined, - }, - - { - key: "age", - title: t("FORM.AGE"), - dataType: DataType.String, - width: isMobile ? 160 : undefined, - }, - { - key: "gender", - title: t("FORM.GENDER"), - dataType: DataType.String, - width: isMobile ? 160 : undefined, - }, - { - key: "mobile", - title: t("FORM.MOBILE_NUMBER"), - dataType: DataType.String, - width: 130, - }, - { - key: "state", - title: t("FORM.STATE"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: 130, - }, - { - key: "district", - title: t("FORM.DISTRICT"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: 130, - }, - - { - key: "blocks", - title: t("FORM.BLOCK"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 160 : undefined, - }, - { - key: "centers", - title: t("FORM.CENTER"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 160 : undefined, - }, - - { - key: "updatedBy", - title: t("TABLE_TITLE.UPDATED_BY"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - { - key: "createdBy", - title: t("TABLE_TITLE.CREATED_BY"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - { - key: "createdAt", - title: t("TABLE_TITLE.CREATED_DATE"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - - { - key: "updatedAt", - title: t("TABLE_TITLE.UPDATED_DATE"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - { - key: "actions", - title: t("FORM.ACTION"), - dataType: DataType.String, - width: isMobile ? 160 : undefined, - }, - - ]; -}; - -export const getTLTableColumns = (t: any, isMobile: any) => { - return [ - { - key: "name", - title: t("FORM.NAME"), - dataType: DataType.String, - //sortDirection: SortDirection.Ascend, - width: isMobile?160:undefined, - }, - { - key: "status", - title: t("FORM.STATUS"), - dataType: DataType.String, - // sortDirection: SortDirection.Ascend, - width: isMobile?160:undefined, - }, - - { - key: "age", - title: t("FORM.AGE"), - dataType: DataType.String, - width: isMobile?160:undefined, - }, - { - key: "gender", - title: t("FORM.GENDER"), - dataType: DataType.String, - width: isMobile?160:undefined, - }, - - { - key: "state", - title: t("FORM.STATE"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: 160, - }, - { - key: "district", - title: t("FORM.DISTRICT"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: 160, - }, - - { - key: "blocks", - title: t("FORM.BLOCK"), - dataType: DataType.String, - // sortDirection: SortDirection.Ascend, - width: isMobile?160:undefined, - }, - { - key: "updatedBy", - title: t("TABLE_TITLE.UPDATED_BY"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - { - key: "createdBy", - title: t("TABLE_TITLE.CREATED_BY"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - { - key: "createdAt", - title: t("TABLE_TITLE.CREATED_DATE"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - - { - key: "updatedAt", - title: t("TABLE_TITLE.UPDATED_DATE"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - - - { - key: "actions", - title: t("FORM.ACTION"), - dataType: DataType.String, - width: isMobile?160:undefined, - }, - ]; -}; - -export const getCenterTableData = (t: any, isMobile: any) => { - return [ - { - key: "name", - title: t("TABLE_TITLE.NAME"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - { - key: "status", - title: t("TABLE_TITLE.STATUS"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - { - key: "updatedBy", - title: t("TABLE_TITLE.UPDATED_BY"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - { - key: "createdBy", - title: t("TABLE_TITLE.CREATED_BY"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - { - key: "createdAt", - title: t("TABLE_TITLE.CREATED_DATE"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - - { - key: "updatedAt", - title: t("TABLE_TITLE.UPDATED_DATE"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - - { - key: "customFieldValues", - title: t("FORM.TYPE_OF_COHORT"), - dataType: DataType.String, - sortDirection: SortDirection.Ascend, - width: isMobile ? 95 : "", - }, - { - key: "actions", - title: t("TABLE_TITLE.ACTIONS"), - dataType: DataType.String, - width: isMobile ? 125 : "", - }, - ]; -}; +const createColumn = (key: string, title: string, dataType: DataType, isMobile: boolean, sortDirection?: SortDirection, width?: number) => ({ + key, + title, + dataType, + sortDirection, + width: isMobile ? (width || 160) : width, +}); + +export const getUserTableColumns = (t: any, isMobile: boolean) => [ + createColumn("name", t("FORM.NAME"), DataType.String, isMobile), + createColumn("status", t("FORM.STATUS"), DataType.String, isMobile), + createColumn("age", t("FORM.AGE"), DataType.String, isMobile), + createColumn("gender", t("FORM.GENDER"), DataType.String, isMobile), + createColumn("mobile", t("FORM.MOBILE_NUMBER"), DataType.String, isMobile, undefined, 130), + createColumn("state", t("FORM.STATE"), DataType.String, isMobile, SortDirection.Ascend, 130), + createColumn("district", t("FORM.DISTRICT"), DataType.String, isMobile, SortDirection.Ascend, 130), + createColumn("blocks", t("FORM.BLOCK"), DataType.String, isMobile), + createColumn("centers", t("FORM.CENTER"), DataType.String, isMobile), + createColumn("updatedBy", t("TABLE_TITLE.UPDATED_BY"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("createdBy", t("TABLE_TITLE.CREATED_BY"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("createdAt", t("TABLE_TITLE.CREATED_DATE"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("updatedAt", t("TABLE_TITLE.UPDATED_DATE"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("actions", t("FORM.ACTION"), DataType.String, isMobile), +]; + +export const getTLTableColumns = (t: any, isMobile: boolean) => [ + createColumn("name", t("FORM.NAME"), DataType.String, isMobile), + createColumn("status", t("FORM.STATUS"), DataType.String, isMobile), + createColumn("age", t("FORM.AGE"), DataType.String, isMobile), + createColumn("gender", t("FORM.GENDER"), DataType.String, isMobile), + createColumn("state", t("FORM.STATE"), DataType.String, isMobile, SortDirection.Ascend, 160), + createColumn("district", t("FORM.DISTRICT"), DataType.String, isMobile, SortDirection.Ascend, 160), + createColumn("blocks", t("FORM.BLOCK"), DataType.String, isMobile), + createColumn("updatedBy", t("TABLE_TITLE.UPDATED_BY"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("createdBy", t("TABLE_TITLE.CREATED_BY"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("createdAt", t("TABLE_TITLE.CREATED_DATE"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("updatedAt", t("TABLE_TITLE.UPDATED_DATE"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("actions", t("FORM.ACTION"), DataType.String, isMobile), +]; + +export const getCenterTableData = (t: any, isMobile: boolean) => [ + createColumn("name", t("TABLE_TITLE.NAME"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("status", t("TABLE_TITLE.STATUS"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("updatedBy", t("TABLE_TITLE.UPDATED_BY"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("createdBy", t("TABLE_TITLE.CREATED_BY"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("createdAt", t("TABLE_TITLE.CREATED_DATE"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("updatedAt", t("TABLE_TITLE.UPDATED_DATE"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("customFieldValues", t("FORM.TYPE_OF_COHORT"), DataType.String, isMobile, SortDirection.Ascend, 95), + createColumn("actions", t("TABLE_TITLE.ACTIONS"), DataType.String, isMobile, undefined, 125), +];