more changes

2022-12-09 03:56:42 +05:30
parent eafaf79341
commit 6f249c7106
8 changed files with 1311 additions and 1268 deletions
--- a/ProtectedRouter.tsx
+++ b/ProtectedRouter.tsx
@@ -14,6 +14,7 @@ import {getUniqueId} from 'react-native-device-info';
 import {useAppDispatch} from './src/hooks';
 import {setAuthData} from './src/reducer/commonSlice';
 import AllCases from './src/components/screens/allCases/AllCases';
+import AllCasesMain from './src/components/screens/allCases';

 const Stack = createNativeStackNavigator();

@@ -46,7 +47,7 @@ const ProtectedRouter = () => {
                <>
                    <Stack.Screen
                        name="Home"
-                        component={AllCases}
+                        component={HomeScreen}
                        options={{
                            header: () => null,
                        }}
@@ -66,7 +67,7 @@ const ProtectedRouter = () => {
                <>
                    <Stack.Screen
                        name="Login"
-                        component={AllCases}
+                        component={AllCasesMain}
                        options={{
                            header: () => null,
                        }}
--- a/src/components/formRenderingEngine/index.tsx
+++ b/src/components/formRenderingEngine/index.tsx
@@ -48,7 +48,6 @@ const RenderingEngine: React.FC<RenderingEngine> = props => {
        () =>
            journeyOrder.map((eachJourney, index) => {
                const journey = props.data.journeys[eachJourney];
-
                return (
                    <Pressable
                        onPress={() => handleNextContext(journey)}
--- a/src/components/screens/allCases/AllCases.tsx
+++ b/src/components/screens/allCases/AllCases.tsx
@@ -1,20 +1,18 @@
-import {
-    ListRenderItemInfo,
-    Pressable,
-    StyleSheet,
-    View,
-    VirtualizedList,
-} from 'react-native';
 import React from 'react';
+import {
+    ListRenderItemInfo, StyleSheet,
+    View,
+    VirtualizedList
+} from 'react-native';

-import data from '../../../data/cases.json';
 import Heading from '../../../../RN-UI-LIB/src/components/Heading';
-import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
-import Avatar from '../../../../RN-UI-LIB/src/components/Avatar';
 import Text from '../../../../RN-UI-LIB/src/components/Text';
-import {COLORS} from '../../../../RN-UI-LIB/src/styles/colors';
-import {SwipeContainer} from './SwipeContainer';
-import { caseStates, caseVerdict, Data, taskStatus, Type } from './interface';
+import { GenericStyles } from '../../../../RN-UI-LIB/src/styles';
+import { COLORS } from '../../../../RN-UI-LIB/src/styles/colors';
+import data from '../../../data/cases.json';
+import { caseStatus, caseVerdict, Data, taskStatus, Type } from './interface';
+import ListItem from './ListItem';
+import { SwipeContainer } from './SwipeContainer';


 interface IItem {
@@ -22,57 +20,24 @@ interface IItem {
    todoList: Array<Data>;
 }

-const CardItem: React.FC<Data> = props => {
-    const propData = props;
-    const onClick = () => {
-        alert(propData.caseId);
-    }
-    return (
-        // Todo kunal to add the page switching logic
-        <Pressable onPress={onClick}>
-            <View style={[GenericStyles.ph16, styles.pv12, GenericStyles.row]}>
-                <View style={[styles.avatarContainer, {alignSelf: 'center'}]}>
-                    <Avatar
-                        name={propData.customerInfo.name}
-                        dataURI={propData.customerInfo.imageUrl}
-                    />
-                </View>
-                <View style={[GenericStyles.ml8, {flexBasis: '80%'}]}>
-                    <Heading type={'h5'} bold dark>
-                        {propData.customerInfo.name}
-                    </Heading>
-                    <Text dark ellipsizeMode="tail" numberOfLines={2}>
-                        {propData.currentTask.title}: {' '}
-                        <Text>
-                            {propData.currentTask.detail}
-                        </Text>
-                    </Text>
-                    {/* TODO write color coding logic with tag component */}
-                    <Text small bold style={{color: COLORS.TEXT.GREEN}}>
-                        {propData.caseStatus}
-                    </Text>
-                </View>
-            </View>
-        </Pressable>
-    );
-};
-
 const Item: React.FC<IItem> = (props) => {
    const propData = props.data.item;
    const todoList = props.todoList;
    let completedCount = 0;
-    todoList.forEach(todo =>
-        todo.caseStatus === caseStates.COMPLETED_AND_VERIFIED ? completedCount++ : completedCount,
-    );
+    todoList.forEach(todo =>{
+        if(todo.caseStatus === caseStatus.CLOSED){
+            completedCount++;
+        }
+    });
    switch (propData.type) {
        case Type.CASES:
-            return <CardItem {...propData} />;
+            return <ListItem caseData ={propData} />;
        case Type.TODO:
            return (
                <SwipeContainer
                    onSwipeLeft={() => <Text>Left</Text>}
                    onSwipeRight={() => <Text>Right</Text>}>
-                    <CardItem {...propData} />
+                    <ListItem caseData ={propData} />
                </SwipeContainer>
            );
        case Type.CASES_HEADER:
@@ -92,7 +57,7 @@ const Item: React.FC<IItem> = (props) => {
                    <View
                        style={[GenericStyles.row, GenericStyles.alignCenter]}>
                        <Text light small>
-                            {todoList.length} pending
+                            {todoList.length - completedCount} pending
                        </Text>
                        <View
                            style={[
@@ -117,108 +82,20 @@ const Seperator = () => <View style={styles.seperator} />;
 const getItem = (item: Array<Data>, index: number) => item[index];

 const AllCases = () => {
-    const dataForTODOList = [
-        {
-            caseId: 1,
-            updatedAt: 1670434722030,
-            caseStatus: 'TODO',
-            caseVerdict: 'COMPLETED',
-            displayTag: "don't know",
-            customerInfo: {
-                name: 'Kunal Sharma',
-                imageUrl:
-                    'https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png',
-            },
-            currentTask: {
-                title: 'comms',
-                detail: '',
-                status: 'unVerified',
-            },
-            pinnedRank: 1,
-        },
-        {
-            caseId: 2,
-            updatedAt: 1670434722030,
-            caseStatus: 'TODO',
-            caseVerdict: 'COMPLEATED',
-            displayTag: "don't know",
-            customerInfo: {
-                name: 'Kunal Sharma',
-                imageUrl:
-                    'https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png',
-            },
-            currentTask: {
-                title: 'comms',
-                detail: '',
-                status: 'unVerified',
-            },
-            pinnedRank: 2,
-        },
-        {
-            caseId: 3,
-            updatedAt: 1670434722030,
-            caseStatus: 'TODO',
-            caseVerdict: 'COMPLEATED',
-            displayTag: "don't know",
-            customerInfo: {
-                name: 'Kunal Sharma',
-                imageUrl:
-                    'https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png',
-            },
-            currentTask: {
-                title: 'comms',
-                detail: '',
-                status: 'unVerified',
-            },
-            pinnedRank: 3,
-        },
-        {
-            caseId: 4,
-            updatedAt: 1670434722030,
-            caseStatus: 'TODO',
-            caseVerdict: 'COMPLEATED',
-            displayTag: "don't know",
-            customerInfo: {
-                name: 'Kunal Sharma',
-                imageUrl:
-                    'https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png',
-            },
-            currentTask: {
-                title: 'comms',
-                detail: '',
-                status: 'unVerified',
-            },
-            pinnedRank: 4,
-        },
-        {
-            caseId: 5,
-            updatedAt: 1670434722030,
-            caseStatus: 'TODO',
-            caseVerdict: 'COMPLEATED',
-            displayTag: "don't know",
-            customerInfo: {
-                name: 'Kunal Sharma',
-                imageUrl:
-                    'https://d33wubrfki0l68.cloudfront.net/2a3556a09e73a07aacedb2bcfaa39512cd37a3f4/68f50/img/templates/akshay-kumar-scheme-pose.png',
-            },
-            currentTask: {
-                title: 'comms',
-                detail: '',
-                status: 'unVerified',
-            },
-            pinnedRank: 5,
-        },
-    ];
+    
+    const todo = data.allCases.filter(data => data.pinnedRank);
+
+    const other = data.allCases.filter(data => !data.pinnedRank);

    let dataForList: Data[] = [];

-    if (dataForTODOList.length) {
+    if (todo.length) {
        dataForList.push({
            type: Type.TODO_HEADER,
-            caseId: 111111111,
+            caseId: 11111221111,
            updatedAt: 111111111,
-            caseStatus: caseStates.IN_PROGRESS,
-            caseVerdict: caseVerdict.assigned,
+            caseStatus: caseStatus.IN_PROGRESS,
+            caseVerdict: caseVerdict.ASSIGNED,
            displayTag: 'string',
            customerInfo: {
                name: 'string',
@@ -229,42 +106,42 @@ const AllCases = () => {
                detail: 'string',
                status: taskStatus.OPEN,
            },
-            pinnedRank: 111111111,
-        });
-        dataForTODOList.forEach(item => {
-            dataForList.push({
-                type: Type.TODO,
-                ...item,
-            });
-        });
-        dataForList.push({
-            type: Type.CASES_HEADER,
-            caseId: 11111111231,
-            updatedAt: 111111111,
-            caseStatus: caseStates.COMPLETED_AND_VERIFIED,
-            caseVerdict: caseVerdict.assigned,
-            displayTag: 'string',
-            customerInfo: {
-                name: 'string',
-                imageUrl: 'string',
-            },
-            currentTask: {
-                title: 'string',
-                detail: 'string',
-                status: taskStatus.OPEN,
-            },
-            pinnedRank: 111111111,
+            pinnedRank: 0,
        });
+       todo.forEach(todo => dataForList.push({
+            type: Type.TODO,
+             ...todo
+        }))
    }

-    data.allCases.forEach(item => {
-        if (!dataForTODOList.some(id => id.caseId === item.caseId)) {
+    if(other.length){
+        if(todo.length){
            dataForList.push({
-                type: Type.CASES,
-                ...item,
+                type: Type.CASES_HEADER,
+                caseId: 111111111,
+                updatedAt: 111111111,
+                caseStatus: caseStatus.IN_PROGRESS,
+                caseVerdict: caseVerdict.ASSIGNED,
+                displayTag: 'string',
+                customerInfo: {
+                    name: 'string',
+                    imageUrl: 'string',
+                },
+                currentTask: {
+                    title: 'string',
+                    detail: 'string',
+                    status: taskStatus.OPEN,
+                },
+                pinnedRank: 111111111,
            });
        }
-    });
+        other.forEach(todo => dataForList.push({
+            type: Type.CASES,
+            ...todo
+        }))
+    }
+
+    console.log(dataForList.length)

    return (
        <View>
@@ -272,7 +149,7 @@ const AllCases = () => {
                data={dataForList as Array<Data>}
                initialNumToRender={4}
                renderItem={row => (
-                    <Item data={row} todoList={dataForTODOList} />
+                    <Item data={row} todoList={todo} />
                )}
                keyExtractor={item => item.caseId}
                getItemCount={item => item.length}
@@ -291,10 +168,6 @@ const styles = StyleSheet.create({
    pv12: {
        paddingVertical: 12,
    },
-    avatarContainer: {
-        height: 40,
-        width: 40,
-    },
    dot: {
        height: 5,
        width: 5,
--- a/src/components/screens/allCases/ComplatedCase.tsx
+++ b/src/components/screens/allCases/ComplatedCase.tsx
@@ -0,0 +1,41 @@
+import {StyleSheet, View, VirtualizedList} from 'react-native';
+import React from 'react';
+import data from '../../../data/cases.json';
+import {caseStatus, Data} from './interface';
+import ListItem from './ListItem';
+import {COLORS} from '../../../../RN-UI-LIB/src//styles/colors';
+// import Text from '../../../../RN-UI-LIB/src/components/Text';
+
+const Seperator = () => <View style={styles.seperator} />;
+
+const getItem = (item: Array<Data>, index: number) => item[index];
+
+const ComplatedCase = () => {
+    const completed = data.allCases.filter(
+        data => data.caseStatus === caseStatus.CLOSED,
+    );
+    return (
+        <View>
+            <VirtualizedList
+                data={completed as Array<Data>}
+                initialNumToRender={4}
+                renderItem={row => (
+                    <ListItem caseData={row.item} compleatedList />
+                )}
+                keyExtractor={item => item.caseId}
+                getItemCount={item => item.length}
+                getItem={getItem}
+                ItemSeparatorComponent={<Seperator />}
+            />
+        </View>
+    );
+};
+
+const styles = StyleSheet.create({
+    seperator: {
+        backgroundColor: COLORS.BORDER.PRIMARY,
+        height: 2,
+    },
+});
+
+export default ComplatedCase;
--- a/src/components/screens/allCases/ListItem.tsx
+++ b/src/components/screens/allCases/ListItem.tsx
@@ -0,0 +1,74 @@
+import {Pressable, StyleSheet, View} from 'react-native';
+import React from 'react';
+import {caseStatus, caseVerdict, caseVerdictAndColor, Data} from './interface';
+import Avatar from '../../../../RN-UI-LIB/src/components/Avatar';
+import Text from '../../../../RN-UI-LIB/src/components/Text';
+import Heading from '../../../../RN-UI-LIB/src/components/Heading';
+import {GenericStyles} from '../../../../RN-UI-LIB/src/styles';
+
+interface IListItem {
+    caseData: Data;
+    compleatedList?: boolean;
+}
+
+const ListItem: React.FC<IListItem> = props => {
+    const {caseData, compleatedList} =props;
+    const onClick = () => {
+        alert(caseData.caseId);
+    };
+    if (!compleatedList && caseData.caseStatus === caseStatus.CLOSED) {
+        return null;
+    }
+    return (
+        // Todo kunal to add the page switching logic
+        <Pressable onPress={onClick}>
+            <View style={[GenericStyles.ph16, styles.pv12, GenericStyles.row]}>
+                <Pressable onPress={() => alert('clicked on avatar')}>
+                    <View
+                        style={[styles.avatarContainer, {alignSelf: 'center'}]}>
+                        <Avatar
+                            name={caseData.customerInfo.name}
+                            dataURI={caseData.customerInfo.imageUrl}
+                        />
+                    </View>
+                </Pressable>
+                <View style={[GenericStyles.ml8, styles.fb80]}>
+                    <Heading numberOfLines={1} type={'h5'} bold dark>
+                        {caseData.customerInfo.name}
+                    </Heading>
+                    <Text dark ellipsizeMode="tail" numberOfLines={2}>
+                        {caseData.currentTask.title}:{' '}
+                        <Text>{caseData.currentTask.detail}</Text>
+                    </Text>
+                    {/* TODO write color coding logic with tag component */}
+                    {caseData.caseVerdict !== caseVerdict.NEW && (
+                        <Text
+                            bold
+                            dark
+                            style={{
+                                color: caseVerdictAndColor[caseData.caseVerdict]
+                                    .color,
+                            }}>
+                            {caseVerdictAndColor[caseData.caseVerdict].text}
+                        </Text>
+                    )}
+                </View>
+            </View>
+        </Pressable>
+    );
+};
+
+const styles = StyleSheet.create({
+    pv12: {
+        paddingVertical: 12,
+    },
+    avatarContainer: {
+        height: 40,
+        width: 40,
+    },
+    fb80: {
+        flexBasis: '80%',
+    },
+});
+
+export default ListItem;
--- a/src/components/screens/allCases/index.tsx
+++ b/src/components/screens/allCases/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import {View} from 'react-native';
+import {GenericStyles} from '../../../../RN-UI-LIB/src//styles';
+import Tabs from '../../../../RN-UI-LIB/src/components/tabs/Tabs';
+import AllCases from './AllCases';
+import ComplatedCase from './ComplatedCase';
+
+const tabItems = [
+    {key: 'first', title: 'First', content: AllCases},
+    {key: 'second', title: 'Second', content: ComplatedCase},
+];
+
+const AllCasesMain = () => {
+    return (
+        <View style={GenericStyles.fill}>
+            <View />
+            <Tabs
+                tabItems={tabItems}
+                selectedTab="second"
+                tabBarStyles={[
+                    {backgroundColor: '#001833'},
+                    GenericStyles.ph16,
+                ]}
+                tabLabelStyle={{color: '#fff'}}
+            />
+        </View>
+    );
+};
+
+export default AllCasesMain;
--- a/src/components/screens/allCases/interface.ts
+++ b/src/components/screens/allCases/interface.ts
@@ -1,3 +1,5 @@
+import {COLORS} from '../../../../RN-UI-LIB/src/styles/colors';
+
 export enum Type {
    TODO,
    TODO_HEADER,
@@ -6,13 +8,12 @@ export enum Type {
 }

 export enum caseVerdict {
-    new,
-    unassigned,
-    assigned,
-    in_progress,
-    closed,
-    forced_Closed,
-    expired,
+    NEW = 'NEW',
+    IN_PROGRESS = 'IN_PROGRESS',
+    CLOSED = 'CLOSED',
+    FORCE_CLOSE = 'FORCE_CLOSE',
+    EXPIRED = 'FORCE_CLOSE',
+    NEW_ADDRESS_FOUND = 'NEW_ADDRESS_FOUND',
 }

 export enum taskStatus {
@@ -23,16 +24,40 @@ export enum taskStatus {
    NOT_REQUIRED,
 }

-export enum caseStates {
-    COMPLETED_AND_VERIFIED,
-    IN_PROGRESS,
+export enum caseStatus {
+    NEW = 'NEW',
+    UNASSIGNED = 'UNASSIGNED',
+    ASSIGNED = 'ASSIGNED',
+    IN_PROGRESS = 'IN_PROGRESS',
+    CLOSED = 'CLOSED',
+    FORCE_CLOSE = 'FORCE_CLOSE',
+    EXPIRED = 'FORCE_CLOSE',
 }

+export const caseVerdictAndColor = {
+    COMPLETED_AND_VERIFIED: {
+        text: 'Verified',
+        color: COLORS.TEXT.BLUE,
+    },
+    IN_PROGRESS: {
+        text: 'In Progress',
+        color: COLORS.TEXT.GREEN,
+    },
+    ASSIGNED: {
+        text: 'Assigned',
+        color: COLORS.TEXT.GREEN,
+    },
+    NEW_ADDRESS_FOUND: {
+        text: 'New Address Found',
+        color: COLORS.TEXT.YELLOW,
+    },
+};
+
 export interface Data {
    type?: Type; // this is for maintaing frontend
    caseId: number;
    updatedAt: number;
-    caseStatus: caseStates;
+    caseStatus: caseStatus;
    caseVerdict: caseVerdict;
    displayTag: string;
    customerInfo: {
--- a/src/data/cases.json
+++ b/src/data/cases.json