From a8121b34a4e9514cebc5884b39606b3859ad33d3 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Wed, 27 Jul 2022 10:56:38 +0530 Subject: [PATCH 1/4] util updates --- src/utils/util.ts | 106 +++++++++++++++++++++++----------------------- 1 file changed, 53 insertions(+), 53 deletions(-) diff --git a/src/utils/util.ts b/src/utils/util.ts index 2cb9439..6ace15b 100644 --- a/src/utils/util.ts +++ b/src/utils/util.ts @@ -1,53 +1,53 @@ -export const debounce = (callback: (param?: any) => void, wait = 1000) => { - let timeout: NodeJS.Timeout - - return function executedFunction(...parameters: any) { - const later = () => { - clearTimeout(timeout) - callback(...parameters) - } - - clearTimeout(timeout) - timeout = setTimeout(later, wait) - } -} - -export const capitalizeFirstLetter = (string = "") => `${string?.charAt(0)?.toUpperCase()}${string?.slice(1)}` - -export const changeToCode = (string = "") => - string - .replace(/[^\s\w]/gi, "") - ?.toUpperCase() - ?.replace(/ /g, "_") - -export const isObject = (data: any) => data?.constructor?.name === "Object" -export const isString = (data: any) => data?.constructor?.name === "String" -export const isArray = (data: any) => data?.constructor?.name === "Array" - -export const isEmpty = (data: any) => { - if (isObject(data)) return Object.keys(data).length === 0 - if (isArray(data)) return data.length === 0 - if (isString(data)) return !data || data.length === 0 - if ([undefined, null, ""].includes(data)) return true - return false -} - -export const build_path = (...args: string[]) => { - return args - .map((part, i) => { - if (i === 0) { - return part.trim().replace(/[\/]*$/g, "") - } else { - return part.trim().replace(/(^[\/]*|[\/]*$)/g, "") - } - }) - .filter((x) => x.length) - .join("/") -} - -export function createTranslation(t: TFunc | undefined, obj: Record) { - return function (key: string): string { - if (typeof t === "function") return t(key) - return obj[key] || "" - } -} +export const debounce = (callback: (param?: any) => void, wait = 1000) => { + let timeout: NodeJS.Timeout + + return function executedFunction(...parameters: any) { + const later = () => { + clearTimeout(timeout) + callback(...parameters) + } + + clearTimeout(timeout) + timeout = setTimeout(later, wait) + } +} + +export const capitalizeFirstLetter = (string = "") => `${string?.charAt(0)?.toUpperCase()}${string?.slice(1)}` + +export const changeToCode = (string = "") => + string + .replace(/[^\s\w]/gi, "") + ?.toUpperCase() + ?.replace(/ /g, "_") + +export const isObject = (data: any) => data?.constructor?.name === "Object" +export const isString = (data: any) => data?.constructor?.name === "String" +export const isArray = (data: any) => data?.constructor?.name === "Array" + +export const isEmpty = (data: any) => { + if (isObject(data)) return Object.keys(data).length === 0 + if (isArray(data)) return data.length === 0 + if (isString(data)) return !data || data.length === 0 + if ([undefined, null, ""].includes(data)) return true + return false +} + +export const build_path = (...args: string[]) => { + return args + .map((part, i) => { + if (i === 0) { + return part.trim().replace(/[\/]*$/g, "") + } else { + return part.trim().replace(/(^[\/]*|[\/]*$)/g, "") + } + }) + .filter((x) => x.length) + .join("/") +} + +export function createTranslation(t: TFunc | undefined, obj: Record) { + return function (key: string): string { + if (typeof t === "function") return t(key) + return obj[key] || "" + } +} From 2b00d414490e9ebca2cb0eacdf2fe1e21c10b81b Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Wed, 27 Jul 2022 10:59:03 +0530 Subject: [PATCH 2/4] updated sequencing functionality --- dts.config.js | 12 +-- example/index.tsx | 5 +- package.json | 10 ++- src/api/list.ts | 8 +- src/components/Common/DNDTable/DNDTable.tsx | 31 ++++---- .../SubMaster/SubMaster/SubMaster.tsx | 18 +++-- .../SubMasterTable/SubMasterTable.tsx | 73 +++++++++++++++---- src/context/SubMasterContext.tsx | 6 ++ src/hook/useSubMaster.tsx | 56 +++++++++++--- src/icons/checkIcon.tsx | 16 ++++ src/icons/closeIcon.tsx | 4 +- src/icons/moveIcon.tsx | 12 ++- src/icons/updateIcon.tsx | 34 +++++---- src/icons/xIcon.tsx | 16 ++++ src/style.css | 34 ++++++++- tailwind.config.js | 18 ++--- types/global.d.ts | 8 +- yarn.lock | 28 +++---- 18 files changed, 287 insertions(+), 102 deletions(-) create mode 100644 src/icons/checkIcon.tsx create mode 100644 src/icons/xIcon.tsx diff --git a/dts.config.js b/dts.config.js index ca360d7..bb692ca 100644 --- a/dts.config.js +++ b/dts.config.js @@ -1,6 +1,6 @@ const postcss = require('rollup-plugin-postcss'); const autoprefixer = require('autoprefixer'); -const cssnano = require('cssnano'); +// const cssnano = require('cssnano'); module.exports = { rollup(config, options) { @@ -8,15 +8,15 @@ module.exports = { postcss({ plugins: [ autoprefixer(), - cssnano({ - preset: 'default', - }), + // cssnano({ + // preset: 'default', + // }), ], // inject: false, // only write out CSS for the first bundle (avoids pointless extra files): extract: !!options.writeMeta, - }) - ); + }), + ) return config; }, }; diff --git a/example/index.tsx b/example/index.tsx index e634311..20aef3c 100644 --- a/example/index.tsx +++ b/example/index.tsx @@ -10,7 +10,7 @@ const App = () => { baseUrl="http://localhost:8080" token="ABCD" // token={getToken()} > -

Master

+ {/*

Master

{ + */} {/* {(data) => ( data.open ?

Drawer

: null )} */} -

Sub-Master

+ diff --git a/package.json b/package.json index 679d510..7b655cc 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,9 @@ }, "jest": { "testEnvironment": "jsdom", - "setupFilesAfterEnv": ["./jest.setup.ts"] + "setupFilesAfterEnv": [ + "./jest.setup.ts" + ] }, "devDependencies": { "@knovator/api": "^0.0.10", @@ -63,7 +65,6 @@ "@testing-library/react": "^13.3.0", "@tsconfig/create-react-app": "^1.0.2", "@tsconfig/recommended": "^1.0.1", - "@types/react-beautiful-dnd": "^13.1.2", "@types/react-dom": "^18.0.6", "@types/react-dropzone": "^5.1.0", "@types/react-table": "^7.7.12", @@ -75,7 +76,6 @@ "msw": "^0.42.3", "postcss": "^8.4.14", "react": "^18.2.0", - "react-beautiful-dnd": "^13.1.0", "react-dom": "^18.2.0", "react-dropzone": "^14.2.1", "react-hook-form": "^7.32.2", @@ -105,5 +105,9 @@ "react-dom": ">=17.0.1", "react-hook-form": "^7.32.2", "react-table": "^7.8.0" + }, + "dependencies": { + "@types/react-beautiful-dnd": "^13.1.2", + "react-beautiful-dnd": "^13.1.0" } } diff --git a/src/api/list.ts b/src/api/list.ts index d188b5c..abf0786 100644 --- a/src/api/list.ts +++ b/src/api/list.ts @@ -6,7 +6,7 @@ const apiList = { }), IMAGE_REMOVE: ({ id }: API_INPUT_TYPE) => ({ url: `files/${id}/delete`, - method: 'DELETE' + method: "DELETE", }), LIST: ({ module }: API_INPUT_TYPE) => ({ url: `admin/${module}/list`, @@ -24,10 +24,10 @@ const apiList = { url: `admin/${module}/soft-delete`, method: "PUT", }), - SEQUENCE: ({ module, id }: API_INPUT_TYPE) => ({ - url: `admin/${module}/partial-update/sequence/${id}`, + SEQUENCE: ({ module }: API_INPUT_TYPE) => ({ + url: `admin/${module}/partial-update/sequence`, method: "PATCH", - }) + }), } export default apiList diff --git a/src/components/Common/DNDTable/DNDTable.tsx b/src/components/Common/DNDTable/DNDTable.tsx index 9349daa..01c3287 100644 --- a/src/components/Common/DNDTable/DNDTable.tsx +++ b/src/components/Common/DNDTable/DNDTable.tsx @@ -12,21 +12,23 @@ const DNDTable = ({ loader, loading, onMove, + dragEnable = false, }: TableProps) => { const getSortConfigClassName = useCallback( (accessor: string, up = true) => { - if (!sortConfig || accessor !== sortConfig[0]) return "kms_sort-inactive" + if (!sortConfig || accessor !== sortConfig[0] || dragEnable) return "kms_sort-inactive" else { if (up && sortConfig[1] === SORT_ASCENDING) return "" else if (!up && sortConfig[1] === SORT_DESCENDING) return "" else return "kms_sort-inactive" } }, - [sortConfig], + [sortConfig, dragEnable], ) const sortConfigRenderer = useCallback( (accessor: string) => { - if (!sortable || EXCLUDE_SORT_COLUMNS.includes(String(accessor).toLocaleLowerCase())) return null + if (!sortable || EXCLUDE_SORT_COLUMNS.includes(String(accessor).toLocaleLowerCase()) || dragEnable) + return null return (
@@ -49,13 +51,14 @@ const DNDTable = ({ [setSortConfig, sortConfig], ) const handleDragEnd = (results: DropResult) => { - if (!results.destination) return - const temporaryData = [...data] - const [selectedRow] = temporaryData.splice(results.source.index, 1) + if (!results.destination || !onMove) return + onMove(results.source.index, results.destination.index) + // const temporaryData = [...data] + // const [selectedRow] = temporaryData.splice(results.source.index, 1) // const [row] = data.splice(results.destination.index, 1) - const seq = results.destination.index + 1 + // const seq = results.destination.index + 1 // temporaryData.splice(results.destination.index, 0, selectedRow) - if (typeof onMove === "function") onMove(selectedRow.id || selectedRow._id, seq) + // if (typeof onMove === "function") onMove(selectedRow.id || selectedRow._id, seq) } const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows } = useTable({ // @ts-ignore @@ -96,8 +99,8 @@ const DNDTable = ({ {...getTableBodyProps()} {...provided.droppableProps} > - {rows.length > 0 - ? rows.map((row, i) => { + {rows.length > 0 ? ( + rows.map((row, i) => { prepareRow(row) return ( // @ts-ignore @@ -105,6 +108,7 @@ const DNDTable = ({ draggableId={row.original.id || row.original._id || row.id} key={row.original.id || row.original._id} index={i} + isDragDisabled={!dragEnable} > {(provided) => ( ) }) - : ( + ) : ( + No data found - ) - } + + )} )} diff --git a/src/components/SubMaster/SubMaster/SubMaster.tsx b/src/components/SubMaster/SubMaster/SubMaster.tsx index 19e81eb..d00799c 100644 --- a/src/components/SubMaster/SubMaster/SubMaster.tsx +++ b/src/components/SubMaster/SubMaster/SubMaster.tsx @@ -60,27 +60,32 @@ const SubMaster = ({ const formRef = useRef(null) const { list, + getSubMastersList, loading, partialUpdate, + onChangeSequence, + sequencing, + setSequencing, + onConfirmSequence, + // Pagination + pageSize, totalPages, - totalRecords, currentPage, + totalRecords, setCurrentPage, - pageSize, setPageSize, + // Sorting sortConfig, setSortConfig, - getSubMastersList, // Form formState, itemData, onChangeFormState, onCloseForm, onDataSubmit, - onChangeSequence, onCofirmDeleteMaster, onImageUpload, - onImageRemove + onImageRemove, } = useSubMaster({ defaultLimit: Array.isArray(limits) && limits.length > 0 ? limits[0] : DEFAULT_LIMIT, routes, @@ -114,6 +119,8 @@ const SubMaster = ({ limits={limits ? limits : PAGE_LIMITS} canList={permissions?.list} // Table + sequencing={sequencing} + setSequencing={setSequencing} onUpdate={partialUpdate} data={list} sortable={sortable} @@ -125,6 +132,7 @@ const SubMaster = ({ getSubMastersList={getSubMastersList} canPartialUpdate={permissions?.partialUpdate} onChangeSequence={onChangeSequence} + onConfirmSequence={onConfirmSequence} > {children ? ( children diff --git a/src/components/SubMaster/SubMasterTable/SubMasterTable.tsx b/src/components/SubMaster/SubMasterTable/SubMasterTable.tsx index c381eff..f786424 100644 --- a/src/components/SubMaster/SubMasterTable/SubMasterTable.tsx +++ b/src/components/SubMaster/SubMasterTable/SubMasterTable.tsx @@ -2,8 +2,11 @@ import React, { useCallback, useEffect, useState } from "react" import { useSubMasterState } from "../../../context/SubMasterContext" import { DNDTable } from "../../../components/Common" import DeleteIcon from "../../../icons/deleteIcon" -import UpdateIcon from "../../../icons/updateIcon" +import UpdateIcon, { UpdateSVG } from "../../../icons/updateIcon" +import { CheckSVG } from "../../../icons/checkIcon" +import { XSVG } from "../../../icons/xIcon" import MoveIcon from "../../../icons/moveIcon" +import classNames from "classnames" const SubMasterTable = ({ columns, actions }: TableWrapperProps) => { const { @@ -22,6 +25,9 @@ const SubMasterTable = ({ columns, actions }: TableWrapperProps) => { canPartialUpdate, onChangeSequence, t, + sequencing, + setSequencing, + onConfirmSequence, } = useSubMasterState() const [tableColumns, setTableColumns] = useState([]) @@ -35,15 +41,18 @@ const SubMasterTable = ({ columns, actions }: TableWrapperProps) => { }, [canPartialUpdate, onUpdate], ) - - const updateSequence = useCallback( - (id: string, seq: number) => { - onChangeSequence(id, seq) - }, - [onUpdate, setSortConfig], - ) + const onUpdateSequenceClick = () => { + setSequencing(true) + } + const onCancelClick = () => { + setSequencing(false) + } + const updateSequence = useCallback((sourceIndex: number, destinationIndex: number) => { + onChangeSequence(sourceIndex, destinationIndex) + }, []) const verifyAndUpdateColumns = useCallback(() => { + let len = Array.isArray(data) ? data.length : 0 let modifiedColumns = [...(columns ? columns : defaultColumns)] // Handling Table Actions @@ -105,13 +114,47 @@ const SubMasterTable = ({ columns, actions }: TableWrapperProps) => { modifiedColumns.push({ id: "sequence", accessor: "sequence", - Header: () => { - return
- }, + Header: () => ( +
+ {sequencing ? ( + <> + + + + ) : ( + <> + + + )} +
+ ), Cell: () => ( -
- {" "} - +
+
), }) @@ -127,6 +170,7 @@ const SubMasterTable = ({ columns, actions }: TableWrapperProps) => { onChangeFormState, sortable, updateClosure, + data, ]) useEffect(() => { @@ -144,6 +188,7 @@ const SubMasterTable = ({ columns, actions }: TableWrapperProps) => { loader={loader} loading={loading} onMove={updateSequence} + dragEnable={sequencing} /> ) } diff --git a/src/context/SubMasterContext.tsx b/src/context/SubMasterContext.tsx index a3ea747..5016adb 100644 --- a/src/context/SubMasterContext.tsx +++ b/src/context/SubMasterContext.tsx @@ -45,6 +45,9 @@ const SubMasterContextProvider = ({ canPartialUpdate = false, loader = undefined, onChangeSequence = () => Promise.resolve(), + sequencing = false, + setSequencing = () => {}, + onConfirmSequence = () => {}, // other children, }: SubMasterContextProviderProps) => { @@ -63,6 +66,8 @@ const SubMasterContextProvider = ({ canUpdate, onImageUpload, onImageRemove, + sequencing, + setSequencing, // Pagination currentPage, limits, @@ -84,6 +89,7 @@ const SubMasterContextProvider = ({ canPartialUpdate, loader, onChangeSequence, + onConfirmSequence, }} > {children} diff --git a/src/hook/useSubMaster.tsx b/src/hook/useSubMaster.tsx index 753a2c7..539de65 100644 --- a/src/hook/useSubMaster.tsx +++ b/src/hook/useSubMaster.tsx @@ -12,11 +12,12 @@ interface UseMasterProps { preConfirmDelete?: (data: { row: any }) => Promise } -const useMaster = ({ defaultLimit, routes, defaultSort = ["seq", 1], preConfirmDelete }: UseMasterProps) => { +const useSubMaster = ({ defaultLimit, routes, defaultSort = ["seq", 1], preConfirmDelete }: UseMasterProps) => { const [list, setList] = useState([]) const [loading, setLoading] = useState(false) const [totalPages, setTotalPages] = useState(0) const [totalRecords, setTotalRecords] = useState(0) + const [sequencing, setSequencing] = useState(false) const [itemData, setItemData] = useState(null) const [formState, setFormState] = useState() @@ -34,7 +35,7 @@ const useMaster = ({ defaultLimit, routes, defaultSort = ["seq", 1], preConfirmD onError(code, "error", data?.message) } const getSubMastersList = useCallback( - async (search?: string) => { + async (search?: string, all: boolean = false) => { try { let sortConfig = sortConfigRef.current setLoading(true) @@ -60,6 +61,7 @@ const useMaster = ({ defaultLimit, routes, defaultSort = ["seq", 1], preConfirmD pagination: true, populate: ["img"], }, + all, }, }) if (response?.code === "SUCCESS") { @@ -205,11 +207,34 @@ const useMaster = ({ defaultLimit, routes, defaultSort = ["seq", 1], preConfirmD setItemData(data || null) setFormState(state) } - const onChangeSequence = async (id: string, seq: number) => { + const onChangeSequence = async (sourceIndex: number, destinationIndex: number) => { try { - let api = getApiType({ routes, action: "SEQUENCE", module: "masters", id }) + setList((listData) => { + let temporaryData = [...listData] + const [selectedRow] = temporaryData.splice(sourceIndex, 1) + temporaryData.splice(destinationIndex, 0, selectedRow) + temporaryData = temporaryData.map((item, index) => { + return { + ...item, + seq: index + 1, + } + }) + return temporaryData + }) + } catch (error) { + console.log(error) + } + } + const onConfirmSequence = async () => { + try { + let api = getApiType({ routes, action: "SEQUENCE", module: "masters" }) + let sequences = list.map((item) => ({ + id: item.id || item._id, + seq: item.seq, + })) + setLoading(true) let response = await request({ - data: { seq }, + data: { sequences }, baseUrl, token, method: api.method, @@ -219,12 +244,16 @@ const useMaster = ({ defaultLimit, routes, defaultSort = ["seq", 1], preConfirmD if (response?.code === "SUCCESS") { onSuccess(CALLBACK_CODES.SEQUENCE_UPDATE, response.code, response.message) sortConfigRef.current = ["seq", 1] + setSequencing(false) getSubMastersList() + setLoading(false) } else { onError(CALLBACK_CODES.SEQUENCE_UPDATE, response.code, response.message) + setLoading(false) } } catch (error) { onError(CALLBACK_CODES.SEQUENCE_UPDATE, INTERNAL_ERROR_CODE, (error as Error).message) + setLoading(false) } } const onImageUpload = async (file: File): Promise<{ fileUrl: string; fileId: string } | void> => { @@ -245,13 +274,12 @@ const useMaster = ({ defaultLimit, routes, defaultSort = ["seq", 1], preConfirmD onError: handleError(CALLBACK_CODES.IMAGE_UPLOAD), }) if (response.code === "SUCCESS") { - let responseData = response?.data[0] || response?.data; + let responseData = response?.data[0] || response?.data return { fileId: responseData?._id || responseData?.id, fileUrl: build_path(baseUrl, responseData?.uri), } - } else - onError(CALLBACK_CODES.IMAGE_REMOVE, response.code, response.message) + } else onError(CALLBACK_CODES.IMAGE_REMOVE, response.code, response.message) } catch (error) { onError(CALLBACK_CODES.IMAGE_REMOVE, INTERNAL_ERROR_CODE, (error as Error).message) } @@ -275,6 +303,11 @@ const useMaster = ({ defaultLimit, routes, defaultSort = ["seq", 1], preConfirmD onError(CALLBACK_CODES.IMAGE_REMOVE, INTERNAL_ERROR_CODE, (error as Error).message) } } + const onSequenceToggle = (status: boolean): void => { + setSequencing(status) + sortConfigRef.current = ["seq", 1] + getSubMastersList("", status) + } useEffect(() => { if (selectedMaster) getSubMastersList() // eslint-disable-next-line react-hooks/exhaustive-deps @@ -287,6 +320,9 @@ const useMaster = ({ defaultLimit, routes, defaultSort = ["seq", 1], preConfirmD setLoading, partialUpdate, onChangeSequence, + sequencing, + setSequencing: onSequenceToggle, + onConfirmSequence, // Pagination pageSize, @@ -308,8 +344,8 @@ const useMaster = ({ defaultLimit, routes, defaultSort = ["seq", 1], preConfirmD onDataSubmit, onCofirmDeleteMaster, onImageUpload, - onImageRemove + onImageRemove, } } -export default useMaster +export default useSubMaster diff --git a/src/icons/checkIcon.tsx b/src/icons/checkIcon.tsx new file mode 100644 index 0000000..8e55e04 --- /dev/null +++ b/src/icons/checkIcon.tsx @@ -0,0 +1,16 @@ +import React from "react" + +export const CheckSVG = (properties: any) => { + return ( + + + + ) +} diff --git a/src/icons/closeIcon.tsx b/src/icons/closeIcon.tsx index 36ef5da..303056e 100644 --- a/src/icons/closeIcon.tsx +++ b/src/icons/closeIcon.tsx @@ -6,8 +6,8 @@ const CloseIcon = ({ className }: { className?: string }) => { // { +const MoveIcon = (properties: any) => { return ( - + { + return ( + + + + ) +} + const UpdateIcon = (properties: any) => { return ( - - - + ) } diff --git a/src/icons/xIcon.tsx b/src/icons/xIcon.tsx new file mode 100644 index 0000000..836f2ad --- /dev/null +++ b/src/icons/xIcon.tsx @@ -0,0 +1,16 @@ +import React from "react" + +export const XSVG = (properties: any) => { + return ( + + + + ) +} diff --git a/src/style.css b/src/style.css index 88271cb..055009e 100644 --- a/src/style.css +++ b/src/style.css @@ -8,7 +8,9 @@ @apply flex items-center gap-3; } .kms_actions-update, - .kms_actions-delete { + .kms_actions-delete, + .kms_actions-check, + .kms_actions-x { @apply cursor-pointer; } .kms_table-container { @@ -63,6 +65,15 @@ .kms_btn-primary { @apply bg-blue-600 text-white hover:bg-blue-500 ring-blue-400; } + .kms_btn-info { + @apply bg-cyan-600 text-white hover:bg-cyan-500 ring-cyan-400; + } + .kms_btn-success { + @apply bg-green-600 text-white hover:bg-green-500 ring-green-400; + } + .kms_btn-cancel { + @apply bg-gray-600 text-white hover:bg-gray-500 ring-gray-400; + } .kms_btn-primary:disabled { @apply bg-blue-500; } @@ -327,4 +338,25 @@ @apply p-3 border border-white mt-6 rounded-lg cursor-pointer; } /* \End of Image Upload */ + + /* Utility */ + .kms_text-primary { + @apply text-blue-600; + } + .kms_text-info { + @apply text-blue-500; + } + .kms_text-success { + @apply text-green-600; + } + .kms_text-cancel { + @apply text-red-600; + } + .kms_sequence-action { + @apply py-0 px-2; + } + .kms_sequence-action:disabled { + @apply text-slate-400 cursor-not-allowed; + } + /* \End of Utility */ } diff --git a/tailwind.config.js b/tailwind.config.js index 3e5ec0d..f63c82d 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -1,13 +1,13 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./src/**/*.{html,js,ts,tsx,jsx}"], - safelist: [ - { - pattern: /^kms_\w+/, + content: ["./src/**/*.{html,js,ts,tsx,jsx,css}"], + // safelist: [ + // { + // pattern: /^kms_\w+/, + // }, + // ], + theme: { + extend: {}, }, - ], - theme: { - extend: {}, - }, - plugins: [], + plugins: [], } \ No newline at end of file diff --git a/types/global.d.ts b/types/global.d.ts index 46faea3..cc18c4b 100644 --- a/types/global.d.ts +++ b/types/global.d.ts @@ -110,7 +110,8 @@ interface TableProps { sortable?: boolean sortConfig?: SortConfigType setSortConfig?: (data: SortConfigType) => void - onMove?: (id: string, seq: number) => void + onMove?: (sourceIndex: number, destinationIndex: number) => void + dragEnable?: boolean } interface TableActionTypes { @@ -226,7 +227,10 @@ interface SubMasterContextType { canDelete?: boolean canPartialUpdate?: boolean getSubMastersList: (search?: string) => Promise - onChangeSequence: (id: string, seq: number) => Promise + onChangeSequence: (sourceIndex: number, destinationIndex: number) => Promise + sequencing: boolean + setSequencing: (status: boolean) => void + onConfirmSequence: () => void } type onDelete = ({ data, confirmDelete }: { data: any; confirmDelete: () => void }) => any // \ End of Context diff --git a/yarn.lock b/yarn.lock index 0818f6b..34e82b7 100644 --- a/yarn.lock +++ b/yarn.lock @@ -885,14 +885,14 @@ core-js-pure "^3.20.2" regenerator-runtime "^0.13.4" -"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4": +"@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.15.4", "@babel/runtime@^7.18.9", "@babel/runtime@^7.8.4": version "7.18.9" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a" integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw== dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.15.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": +"@babel/runtime@^7.5.5", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2": version "7.18.3" resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.18.3.tgz" integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug== @@ -1531,7 +1531,7 @@ "@types/hoist-non-react-statics@^3.3.0": version "3.3.1" - resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== dependencies: "@types/react" "*" @@ -1614,7 +1614,7 @@ "@types/react-beautiful-dnd@^13.1.2": version "13.1.2" - resolved "https://registry.npmjs.org/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz" + resolved "https://registry.yarnpkg.com/@types/react-beautiful-dnd/-/react-beautiful-dnd-13.1.2.tgz#510405abb09f493afdfd898bf83995dc6385c130" integrity sha512-+OvPkB8CdE/bGdXKyIhc/Lm2U7UAYCCJgsqmopFmh9gbAudmslkI8eOrPDjg4JhwSE6wytz4a3/wRjKtovHVJg== dependencies: "@types/react" "*" @@ -1635,7 +1635,7 @@ "@types/react-redux@^7.1.20": version "7.1.24" - resolved "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.24.tgz" + resolved "https://registry.yarnpkg.com/@types/react-redux/-/react-redux-7.1.24.tgz#6caaff1603aba17b27d20f8ad073e4c077e975c0" integrity sha512-7FkurKcS1k0FHZEtdbbgN8Oc6b+stGSfZYjQGicofJ0j4U0qIn/jaSvnP2pLwZKiai3/17xqqxkkrxTgN8UNbQ== dependencies: "@types/hoist-non-react-statics" "^3.3.0" @@ -2561,7 +2561,7 @@ cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3: css-box-model@^1.2.0: version "1.2.1" - resolved "https://registry.npmjs.org/css-box-model/-/css-box-model-1.2.1.tgz" + resolved "https://registry.yarnpkg.com/css-box-model/-/css-box-model-1.2.1.tgz#59951d3b81fd6b2074a62d49444415b0d2b4d7c1" integrity sha512-a7Vr4Q/kd/aw96bnJG332W9V9LkJO69JRcaCYDUqjp6/z0w6VcZjgAcTbgFxEPfBgdnAwlh3iwu+hLopa+flJw== dependencies: tiny-invariant "^1.0.6" @@ -3919,7 +3919,7 @@ headers-polyfill@^3.0.4: hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.2: version "3.3.2" - resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz" + resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== dependencies: react-is "^16.7.0" @@ -5080,7 +5080,7 @@ mdn-data@2.0.14: memoize-one@^5.1.1: version "5.2.1" - resolved "https://registry.npmjs.org/memoize-one/-/memoize-one-5.2.1.tgz" + resolved "https://registry.yarnpkg.com/memoize-one/-/memoize-one-5.2.1.tgz#8337aa3c4335581839ec01c3d594090cebe8f00e" integrity sha512-zYiwtZUcYyXKo/np96AGZAckk+FWWsUdJ3cHGGmld7+AhvcWmQyGCYUh1hc4Q/pkOhb65dQR/pqCyK0cOaHz4Q== merge-stream@^2.0.0: @@ -5969,7 +5969,7 @@ quick-lru@^5.1.1: raf-schd@^4.0.2: version "4.0.3" - resolved "https://registry.npmjs.org/raf-schd/-/raf-schd-4.0.3.tgz" + resolved "https://registry.yarnpkg.com/raf-schd/-/raf-schd-4.0.3.tgz#5d6c34ef46f8b2a0e880a8fcdb743efc5bfdbc1a" integrity sha512-tQkJl2GRWh83ui2DiPTJz9wEiMN20syf+5oKfB03yYP7ioZcJwsIK8FjrtLwH1m7C7e+Tt2yYBlrOpdT+dyeIQ== randombytes@^2.1.0: @@ -5981,7 +5981,7 @@ randombytes@^2.1.0: react-beautiful-dnd@^13.1.0: version "13.1.0" - resolved "https://registry.npmjs.org/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz" + resolved "https://registry.yarnpkg.com/react-beautiful-dnd/-/react-beautiful-dnd-13.1.0.tgz#ec97c81093593526454b0de69852ae433783844d" integrity sha512-aGvblPZTJowOWUNiwd6tNfEpgkX5OxmpqxHKNW/4VmvZTNTbeiq7bA3bn5T+QSF2uibXB0D1DmJsb1aC/+3cUA== dependencies: "@babel/runtime" "^7.9.2" @@ -6031,7 +6031,7 @@ react-is@^18.0.0: react-redux@^7.2.0: version "7.2.8" - resolved "https://registry.npmjs.org/react-redux/-/react-redux-7.2.8.tgz" + resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.2.8.tgz#a894068315e65de5b1b68899f9c6ee0923dd28de" integrity sha512-6+uDjhs3PSIclqoCk0kd6iX74gzrGc3W5zcAjbrFgEdIjRSQObdIwfx80unTkVUYvbQ95Y8Av3OvFHq1w5EOUw== dependencies: "@babel/runtime" "^7.15.4" @@ -6103,7 +6103,7 @@ redent@^3.0.0: redux@^4.0.0, redux@^4.0.4: version "4.2.0" - resolved "https://registry.npmjs.org/redux/-/redux-4.2.0.tgz" + resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13" integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA== dependencies: "@babel/runtime" "^7.9.2" @@ -6804,7 +6804,7 @@ tiny-glob@^0.2.9: tiny-invariant@^1.0.6: version "1.2.0" - resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.2.0.tgz" + resolved "https://registry.yarnpkg.com/tiny-invariant/-/tiny-invariant-1.2.0.tgz#a1141f86b672a9148c72e978a19a73b9b94a15a9" integrity sha512-1Uhn/aqw5C6RI4KejVeTg6mIS7IqxnLJ8Mv2tV5rTc0qWobay7pDUz6Wi392Cnc8ak1H0F2cjoRzb2/AW4+Fvg== tmp@^0.0.33: @@ -7031,7 +7031,7 @@ uri-js@^4.2.2: use-memo-one@^1.1.1: version "1.1.2" - resolved "https://registry.npmjs.org/use-memo-one/-/use-memo-one-1.1.2.tgz" + resolved "https://registry.yarnpkg.com/use-memo-one/-/use-memo-one-1.1.2.tgz#0c8203a329f76e040047a35a1197defe342fab20" integrity sha512-u2qFKtxLsia/r8qG0ZKkbytbztzRb317XCkT7yP8wxL0tZ/CzK2G+WWie5vWvpyeP7+YoPIwbJoIHJ4Ba4k0oQ== util-deprecate@^1.0.1, util-deprecate@^1.0.2: From 66428d77e635885a6d193f3965b0d68ef3a159bd Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Wed, 27 Jul 2022 11:35:12 +0530 Subject: [PATCH 3/4] Updated pagination design with bigger buttons and split on small screen --- .../Common/Pagination/Pagination.tsx | 166 +++++++++--------- src/style.css | 2 +- 2 files changed, 83 insertions(+), 85 deletions(-) diff --git a/src/components/Common/Pagination/Pagination.tsx b/src/components/Common/Pagination/Pagination.tsx index 80a4497..c97e8f6 100644 --- a/src/components/Common/Pagination/Pagination.tsx +++ b/src/components/Common/Pagination/Pagination.tsx @@ -1,84 +1,82 @@ -import React from "react" -import Button from "../Button" - -const Pagination = ({ - totalPages, - currentPage, - pageSize, - setPageSize, - setCurrentPage, - totalRecords, - limits, - pageLabel = "Page", - nextLabel = "Next", - previousLabel = "Previous", -}: PaginationProps) => { - const pageHandler = (e: React.KeyboardEvent) => { - if (e.key === "Enter") { - // @ts-ignore - setCurrentPage(Number.parseInt(e.target.value, 10) || 1) - } - } - const handleNumbers = (e: React.KeyboardEvent) => { - if (["e", "+", "-"].includes(e.key)) { - e.preventDefault() - } - } - const pageChange = (e: React.ChangeEvent) => { - if (e.target.value && Number(e.target.value) <= totalPages && e.target.value !== "0") { - setCurrentPage(Number.parseInt(e.target.value, 10)) - } - } - return ( -
-
- {(currentPage - 1) * pageSize + 1} - {Math.min(currentPage * pageSize, totalRecords)} of {totalRecords} -
-
-
-
- ) -} - -Pagination.type = "Pagination" - -export default Pagination +import React from "react" +import Button from "../Button" + +const Pagination = ({ + totalPages, + currentPage, + pageSize, + setPageSize, + setCurrentPage, + totalRecords, + limits, + pageLabel = "Page", + nextLabel = "Next", + previousLabel = "Previous", +}: PaginationProps) => { + const pageHandler = (e: React.KeyboardEvent) => { + if (e.key === "Enter") { + // @ts-ignore + setCurrentPage(Number.parseInt(e.target.value, 10) || 1) + } + } + const handleNumbers = (e: React.KeyboardEvent) => { + if (["e", "+", "-"].includes(e.key)) { + e.preventDefault() + } + } + const pageChange = (e: React.ChangeEvent) => { + if (e.target.value && Number(e.target.value) <= totalPages && e.target.value !== "0") { + setCurrentPage(Number.parseInt(e.target.value, 10)) + } + } + return ( +
+
+ {(currentPage - 1) * pageSize + 1} - {Math.min(currentPage * pageSize, totalRecords)} of {totalRecords} +
+
+
+
+ ) +} + +Pagination.type = "Pagination" + +export default Pagination diff --git a/src/style.css b/src/style.css index 055009e..d46ec4b 100644 --- a/src/style.css +++ b/src/style.css @@ -45,7 +45,7 @@ /* Pagination */ .kms_pagination { - @apply flex justify-between items-center px-4 py-3; + @apply flex flex-col justify-center md:flex-row md:justify-between items-center px-4 py-3; } .kms_pagination-actions { @apply flex items-center justify-center gap-2; From bd27fe22e867c973965f868fd6fe1bbf8d1312b4 Mon Sep 17 00:00:00 2001 From: chavda-bhavik Date: Wed, 27 Jul 2022 11:57:52 +0530 Subject: [PATCH 4/4] created classes for deleteModal --- src/components/Common/DNDTable/DNDTable.tsx | 6 ----- .../Common/DeleteModal/DeleteModal.tsx | 12 ++++----- src/style.css | 25 +++++++++++++++++-- 3 files changed, 29 insertions(+), 14 deletions(-) diff --git a/src/components/Common/DNDTable/DNDTable.tsx b/src/components/Common/DNDTable/DNDTable.tsx index 01c3287..d7f6cb0 100644 --- a/src/components/Common/DNDTable/DNDTable.tsx +++ b/src/components/Common/DNDTable/DNDTable.tsx @@ -53,12 +53,6 @@ const DNDTable = ({ const handleDragEnd = (results: DropResult) => { if (!results.destination || !onMove) return onMove(results.source.index, results.destination.index) - // const temporaryData = [...data] - // const [selectedRow] = temporaryData.splice(results.source.index, 1) - // const [row] = data.splice(results.destination.index, 1) - // const seq = results.destination.index + 1 - // temporaryData.splice(results.destination.index, 0, selectedRow) - // if (typeof onMove === "function") onMove(selectedRow.id || selectedRow._id, seq) } const { getTableProps, getTableBodyProps, headerGroups, prepareRow, rows } = useTable({ // @ts-ignore diff --git a/src/components/Common/DeleteModal/DeleteModal.tsx b/src/components/Common/DeleteModal/DeleteModal.tsx index 61c77e8..7f836f1 100644 --- a/src/components/Common/DeleteModal/DeleteModal.tsx +++ b/src/components/Common/DeleteModal/DeleteModal.tsx @@ -32,25 +32,25 @@ const DeleteModal = ({ }, [formState]) return ( -
+

{permanentlyDelete} {itemData?.name}

-
+

{lossOfData}

-

+

{pleaseType} {itemData?.name} {toProceedOrCancel}

-
+
setUserInput(e.target.value)} /> -
+
diff --git a/src/style.css b/src/style.css index d46ec4b..f1c6f49 100644 --- a/src/style.css +++ b/src/style.css @@ -20,7 +20,7 @@ @apply w-full text-sm; } .kms_thead { - @apply bg-slate-200; + @apply bg-slate-200 z-10; } .kms_thead th { @apply px-4 py-3 text-left; @@ -219,7 +219,7 @@ /* Modal */ .kms_modal-wrapper-1 { - @apply fixed inset-0 z-10 overflow-y-auto; + @apply fixed inset-0 z-20 overflow-y-auto; } .kms_modal-wrapper-2 { @apply flex items-end justify-center min-h-screen px-4 pt-4 pb-20 text-center sm:block sm:p-0 relative; @@ -250,6 +250,27 @@ } /* \ End of Modal */ + /* Delete Modal */ + .kms_delete-header { + @apply py-2 px-4 rounded-lg flex items-center gap-3 text-black text-sm bg-red-200; + } + .kms_delete-content { + @apply mt-3 text-black text-sm; + } + .kms_delete-note { + @apply mt-3; + } + .kms_delete-actions { + @apply mt-3 flex flex-row gap-3; + } + .kms_delete-input { + @apply w-full flex-grow; + } + .kms_delete-buttons { + @apply col-span-3; + } + /* \ End of Delete Modal */ + /* Animations */ .kms_drawer-enter { opacity: 0.1;