Revize a6999074

re #10871: PlanViewPage: ListView integration

src/api/planservice.ts

@@ -32 +32 @@
 @room: id of room in which we are looking for items
 @place: id of place inside a room in which we are looking for items
 */
-export const getPlanItemsRequest = async (params: {activeTab: number, page: number, room: number, items: number, place?: number, inventory?: string}) => {
+export const getPlanItemsRequest = async (params: { cursor: number, room: number, items?: number, place?: number, inventory?: string}) => {
 
 
-    let url = `search_v2?activeTab=${params.activeTab}&page=${params.page}&tabbed=true&room=${params.room}&cursor=${(params.page - 1)*params.items}&items=${params.items}`
+    let url = `search_v2?tabbed=true&room=${params.room}&cursor=${params.cursor}`
 
     if(params.place){
         url += `&place=${params.place}`
@@ -44 +44 @@
     if(params.inventory){
         url += `&inventory=${params.inventory}`
     }
+    else{
+        url += `&activeTab=0`
+    }
+
+    if(params.items){
+        url += `&items=${params.items}`
+    }
 
     console.log(url)
 

src/components/listView/ListView.tsx

@@ -10 +10 @@
 import { Inventory } from "../../types/searchFormTypes"
 
 type ListViewProps = {
-    navigation: any,
+    navigation: any
 
-    inventories: Inventory[],
-    numOfResults?: number,
+    inventories: Inventory[]
+    numOfResults?: number
 
     lastError?: string
 
@@ -21 +21 @@
     loadedPages: LoadedPagesOfInventories
     inventoriesDataLoading: {[key: string]: boolean}
 
-    handleLoadMoreItems: (inventoryName: string, cursor: number) => void; 
+    handleLoadMoreItems: (inventoryName: string, cursor: number) => void;
+    
+    hideHeaderText?: boolean
 }
 
 const ListView = (props: ListViewProps) => {
@@ -52 +54 @@
 
     return (
         <>
-            <Text fontSize={16} fontWeight={"bold"} color={"primary.500"}>Search results{numberOfResults ? ` (${numberOfResults})` : ""}:</Text>
+            {!props.hideHeaderText && <Text fontSize={16} fontWeight={"bold"} color={"primary.500"}>Search results{numberOfResults ? ` (${numberOfResults})` : ""}:</Text>}
             {inventories && inventories.length > 0 ?
                 (inventories.length > 1 ?
                     inventories.map((inventory) => (

src/pages/PlanViewPage.tsx

@@ -1 +1 @@
 import React, { useEffect, useState } from "react"
 import { useDispatch, useSelector } from "react-redux"
 import { AppDispatch, RootState } from "../stores/store"
-import { useWindowDimensions } from "react-native"
 import LoadingBox from "../components/loading/LoadingBox"
 import { log } from "../logging/logger"
 import { DrawerScreenProps } from "@react-navigation/drawer"
 import { RootDrawerParamList } from "./Navigation"
-import { Box, CloseIcon, Select, useToast, Button, Flex, Text } from "native-base"
+import { Box, CloseIcon, Select, useToast, Button, Flex, Text, Center, VStack, ScrollView } from "native-base"
 import { ErrorToast } from "../components/toast/ErrorToast"
 import { Floor, Place, Room } from "../types/plan"
 import { getFloorList, getPlanInventories, getPlanItems } from "../stores/actions/planThunks"
 import { login } from "../stores/actions/userThunks"
 import { getPlanItemsRequest } from "../api/planservice"
 import ItemPreview from "../components/listView/ItemPreview"
-import { parseArtists, parseImage } from "../components/listView/ListViewInventoryGroup"
 import PlanView from "../components/plan/PlanView"
 import { BASE_API_URL } from "../api/constants"
+import ListView from "../components/listView/ListView"
+import SearchForm from "../components/search/SearchForm"
+import { loadItemsByInventory } from "../stores/actions/listViewThunks"
 
 const PlanViewPage = ({ route, navigation }: DrawerScreenProps<RootDrawerParamList, 'Plan'>) => {
 
-  const layout = useWindowDimensions();
+  const dispatch = useDispatch<AppDispatch>()
 
   // Route: set selected room / place from 
   useEffect(() => {
@@ -28 +29 @@
     dispatch(getFloorList())
   }, [])
 
-  const pageSize = 20
-  const currentPage = 0
-  const totalPages = 100
-
   const DEFAULT_FLOOR = "first_floor"
 
   const [selectedFloor, setSelectedFloor] = useState<Floor | undefined>(undefined)
   const [selectedRoom, setSelectedRoom] = useState<Room | undefined>(undefined)
   const [selectedPlace, setSelectedPlace] = useState<Place | undefined>(undefined)
 
-  const dispatch = useDispatch<AppDispatch>();
+  const { floorListLoading, floorList, totalItemsCount, lastError } = useSelector((state: RootState) => state.planViewState)
+
+  const inventories = useSelector((state: RootState) => state.planViewState.itemInventories)
+  const inventoriesLoading = useSelector((state: RootState) => state.planViewState.itemInventoriesLoading)
 
-  const { floorListLoading, floorList, itemListLoading, itemList, itemInventories, itemInventoriesLoading, totalItemsCount, lastError } = useSelector((state: RootState) => state.planViewState)
+  const numberOfResults = useSelector((state: RootState) => state.planViewState.totalItemsCount)
+
+  const data = useSelector((state: RootState) => state.planViewState.itemList)
+  const dataLoading = useSelector((state: RootState) => state.planViewState.itemListLoading)
+  const pagination = useSelector((state: RootState) => state.planViewState.itemListPagination)
 
   const toast = useToast();
 
   useEffect(() => {
     if (floorList && !selectedFloor) {
+
       if (route.params && route.params.roomId) {
 
         selectRoom(route.params.roomId)
@@ -54 +59 @@
           selectPlace(route.params.placeId)
         }
 
-        if (!itemListLoading) {
-          searchSubmit(currentPage, route.params.roomId, route.params.placeId)
-        }
+        // if (!itemListLoading) {
+        //   searchSubmit(currentPage, route.params.roomId, route.params.placeId)
+        // }
 
       }
       else {
@@ -66 +71 @@
   }, [floorList, route.params.roomId, route.params.placeId])
 
   useEffect(() => {
-    if (floorList && selectedRoom) {
-      if (!itemInventoriesLoading) {
-        dispatch(getPlanInventories({ room: selectedRoom.id, place: selectedPlace?.id }))
+    if (floorList) {
+      if (!inventoriesLoading) {
+        dispatch(getPlanInventories({ room: selectedRoom?.id ?? 0, place: selectedPlace?.id }))
       }
     }
   }, [selectedPlace, selectedRoom])
@@ -89 +94 @@
   }, [lastError])
 
 
-  const searchSubmit = (pageNumber: number, roomId: number, placeId?: number) => {
+  const searchSubmit = (roomId: number, placeId?: number) => {
     log.debug("PlanView", "searchSubmit")
 
     console.log("searching " + roomId + ", " + placeId)
 
-    dispatch(getPlanItems({ page: pageNumber, items: pageSize, room: roomId, place: placeId, activeTab: 0 }))
+    dispatch(getPlanInventories({ room: roomId, place: placeId }))
   }
 
   const selectFloor = (floorId: string) => {
@@ -150 +155 @@
 
   const clearForm = () => {
     log.debug("PlanView", "clearForm")
-    selectFloor(DEFAULT_FLOOR)
-    setSelectedRoom(undefined)
     setSelectedPlace(undefined)
+    setSelectedRoom(undefined)
+    selectFloor(DEFAULT_FLOOR)
   }
 
   const onBackPressed = () => {
@@ -161 +166 @@
   }
 
   return (
-    <Box>
-      {/* Selection */}
-
-      {
-        floorListLoading ?
-          <LoadingBox text="Floor list loading"></LoadingBox>
-          :
-          <>
-            {/* Floor */}
-            <Select
-              mt={2.5}
-              ml={2.5}
-              mr={2.5}
-
-              placeholder={"Floor"}
-              selectedValue={selectedFloor?.id}
-              onValueChange={selectFloor}
-              variant="rounded"
-            >
-              {floorList.map((floor, index) => {
-                return (
-                  <Select.Item value={floor.id} label={floor.label} />
-                );
-              })}
-            </Select>
-
-            {/* Room */}
-            {selectedFloor && selectedFloor.roomList && selectedFloor.roomList.length > 0 &&
-              < Select
-                mt={2.5}
-                ml={2.5}
-                mr={2.5}
-
-                placeholder={"Room"}
-                selectedValue={selectedRoom?.id.toString()}
-                onValueChange={(value: string) => selectRoom(parseInt(value))}
-                variant="rounded"
-              >
-                {selectedFloor?.roomList?.map((room, index) => {
-                  if (room.room_list) {
+    <Center m={2} mr={0} mb={6} flex={1}>
+
+      <ScrollView flex={1} w={"100%"} >
+        <VStack space={1} mr={4}>
+
+          {/* Selection */}
+
+          {
+            floorListLoading ?
+              <LoadingBox text="Floor list loading"></LoadingBox>
+              :
+              <>
+                {/* Floor */}
+                <Select
+                  mt={2.5}
+                  ml={2.5}
+                  mr={2.5}
+
+                  placeholder={"Floor"}
+                  selectedValue={selectedFloor?.id}
+                  onValueChange={selectFloor}
+                  variant="rounded"
+                >
+                  {floorList.map((floor, index) => {
                     return (
-                      <Select.Item value={room.id.toString()} label={room.label} />
+                      <Select.Item value={floor.id} label={floor.label} />
                     );
-                  }
-                })}
-              </Select>
-            }
-
-            {/* Place */}
-            {selectedRoom && selectedRoom.places && selectedRoom.places.length > 0 &&
-              <Select
-                mt={2.5}
-                ml={2.5}
-                mr={2.5}
-
-                placeholder={"Place"}
-                selectedValue={selectedPlace?.id.toString()}
-                onValueChange={(value: string) => selectPlace(parseInt(value))}
-                variant="rounded"
-              >
-                {selectedRoom?.places?.map((place, index) => {
-                  return (
-                    <Select.Item value={place.id.toString()} label={place.label} />
-                  );
-                })}
-              </Select>
-            }
-
-            {/* Filter */}
-            <Flex direction="row" alignItems="center" justify="flex-end"
-              mt={2.5}
-              ml={2.5}
-              mr={3}
-            >
-              <Button
-                endIcon={
-                  <CloseIcon size="xs" />
+                  })}
+                </Select>
+
+                {/* Room */}
+                {selectedFloor && selectedFloor.roomList && selectedFloor.roomList.length > 0 &&
+                  < Select
+                    mt={2.5}
+                    ml={2.5}
+                    mr={2.5}
+
+                    placeholder={"Room"}
+                    selectedValue={selectedRoom?.id.toString()}
+                    onValueChange={(value: string) => selectRoom(parseInt(value))}
+                    variant="rounded"
+                  >
+                    {selectedFloor?.roomList?.map((room, index) => {
+                      if (room.room_list) {
+                        return (
+                          <Select.Item value={room.id.toString()} label={room.label} />
+                        );
+                      }
+                    })}
+                  </Select>
                 }
-                onPress={clearForm}
-                variant="outline"
-                color="primary.500"
-                borderColor="primary.100"
-                mr={2}
-                borderRadius={15}
-                size={"md"}
-              >
-                Reset
-              </Button>
-              <Button
-                onPress={() => {
-                  if (selectedRoom && !selectedPlace) {
-                    searchSubmit(currentPage, selectedRoom.id)
-                  }
-                  else if (selectedRoom && selectedPlace) {
-                    searchSubmit(currentPage, selectedRoom.id, selectedPlace.id)
-                  }
-
-                }}
-                colorScheme="primary"
-                background={"primary.100"}
-                variant="solid"
-                borderRadius={15}
-                size={"md"}
-              >
-                Search
-              </Button>
-            </Flex>
-          </>
-      }
-
-
 
-      {/* Plan */}
-      {/* temporary prototype */}
-
-      {selectedFloor && !floorListLoading &&
-        <PlanView imageUrl={BASE_API_URL + "/downloads/" + selectedFloor.id} />
-      }
+                {/* Place */}
+                {selectedRoom && selectedRoom.places && selectedRoom.places.length > 0 &&
+                  <Select
+                    mt={2.5}
+                    ml={2.5}
+                    mr={2.5}
+
+                    placeholder={"Place"}
+                    selectedValue={selectedPlace?.id.toString()}
+                    onValueChange={(value: string) => selectPlace(parseInt(value))}
+                    variant="rounded"
+                  >
+                    {selectedRoom?.places?.map((place, index) => {
+                      return (
+                        <Select.Item value={place.id.toString()} label={place.label} />
+                      );
+                    })}
+                  </Select>
+                }
 
-      {/* Item List */}
-      <>
-        {itemInventoriesLoading ?
-          <LoadingBox text="Loading available inventories..." />
-          :
+                {/* Filter */}
+                <Flex direction="row" alignItems="center" justify="flex-end"
+                  mt={2.5}
+                  ml={2.5}
+                  mr={3}
+                >
+                  <Button
+                    endIcon={
+                      <CloseIcon size="xs" />
+                    }
+                    onPress={clearForm}
+                    variant="outline"
+                    color="primary.500"
+                    borderColor="primary.100"
+                    mr={2}
+                    borderRadius={15}
+                    size={"md"}
+                  >
+                    Reset
+                  </Button>
+                  <Button
+                    onPress={() => {
+                      if (selectedRoom && !selectedPlace) {
+                        searchSubmit(selectedRoom.id)
+                      }
+                      else if (selectedRoom && selectedPlace) {
+                        searchSubmit(selectedRoom.id, selectedPlace.id)
+                      }
+
+                    }}
+                    colorScheme="primary"
+                    background={"primary.100"}
+                    variant="solid"
+                    borderRadius={15}
+                    size={"md"}
+                  >
+                    Search
+                  </Button>
+                </Flex>
+              </>
+          }
+
+          {/* Plan */}
+          {/* temporary prototype */}
+
+          {/* {selectedFloor && !floorListLoading &&
+            <PlanView imageUrl={BASE_API_URL + "/downloads/" + selectedFloor.id} />
+          } */}
+
+          {/* Item List */}
           <>
-            <Text>TODO view inventories in SearchItemPreview way</Text>
-            {itemInventories.map((inventory) => {
-              <Text>{inventory.label}</Text>
-            })}
+            {inventoriesLoading ?
+              <LoadingBox text="Loading available inventories..." />
+              :
+              <Box mt={2.5} ml={2.5}>
+                <ListView
+
+                  navigation={navigation}
+                  hideHeaderText
+
+                  inventories={inventories}
+                  numOfResults={numberOfResults}
+
+                  data={data}
+                  loadedPages={pagination ?? {}}
+                  inventoriesDataLoading={dataLoading ?? {}}
+                  handleLoadMoreItems={(inventoryName: string, cursor: number) => {
+                    dispatch(getPlanItems({ cursor: cursor, inventory: inventoryName, room: selectedRoom?.id ?? 0, place: selectedPlace?.id }))
+                  }
+                  }
+                />
+              </Box>
+            }
           </>
 
-        }
-        {/* 
-        {itemList.map((item, index) => {
-          return (
-            <Box>
-              <ItemPreview
-                // @ts-ignore
-                caption={item.object[0].caption}
-                title={item.text}
-                name={parseArtists(item)}
-                image={parseImage(item)}
-                itemId={item.xml_id}
-                inventoryLabel={item.inventory.label}
-                navigation={navigation}
-              />
-            </Box> */}
-      </>
-
-
-    </Box >
+        </VStack>
+      </ScrollView>
+    </Center>
 
 
   );

src/stores/actions/planThunks.ts

@@ -2 +2 @@
 import { SortOptions } from "../../types/general";
 import { Note } from "../../types/note";
 import { getPlanAllRequest, getPlanItemsRequest } from "../../api/planservice";
-import { Floor, InventoryTab, Room } from "../../types/plan";
+import { Floor, Room } from "../../types/plan";
 import { ItemPreviewType } from "../../types/listViewTypes";
 import { StringLiteralType } from "typescript";
+import { Inventory } from "../../types/searchFormTypes";
 
 export const getFloorList = createAsyncThunk(
     "plan/getFloorList",
@@ -60 +61 @@
     async (params: { room: number, place?: number }) => {
         try {
             try {
-                const response = await getPlanItemsRequest({ activeTab: 0, page: 1, room: params.room, items: 1, place: params.place })
+                const response = await getPlanItemsRequest({ cursor: 0, room: params.room, items: 1, place: params.place })
                 if (response.status === 200) {
 
-                    let inventories: InventoryTab[] = []
+                    console.log("response")
+                    console.log(response.data.pagination.inventories)
 
-                    for(let i = 0; i < response.data.pagination.inventories; i++){
-                        let inventory = response.data.pagination.inventories[i]
-                        
-                        inventories.push({
-                            tab: i,
-                            label: inventory.label,
-                            key: inventory.name
-                        })
-                    }
-
-                    let allInventoriesRecords = response.data.pagination.records
-
-                    console.log(inventories)
-                    console.log(allInventoriesRecords)
+                    const inventories: Inventory[] = response.data.pagination.inventories
+                    const allInventoriesRecords = response.data.pagination.records
 
                     return {
                         inventories: inventories,
-                        allInventoriesRecords : allInventoriesRecords
+                        allInventoriesRecords: allInventoriesRecords
                     }
                 } else {
                     return Promise.reject(response.data ? response.data : "Get plan items request failed")
@@ -99 +89 @@
 
 export const getPlanItems = createAsyncThunk(
     "plan/getPlanItems",
-    async (params: { activeTab: number, page: number, room: number, items: number, place?: number, inventory?: string }) => {
+    async (params: { cursor: number, room: number, place?: number, inventory: string }) => {
         try {
             try {
-                const response = await getPlanItemsRequest({ activeTab: params.activeTab, page: params.page, room: params.room, items: params.items, place: params.place, inventory: params.inventory })
+                const response = await getPlanItemsRequest({ cursor: params.cursor, room: params.room, place: params.place, inventory: params.inventory })
                 if (response.status === 200) {
 
-                    let items: ItemPreviewType[] = response.data.data
-                    let totalItemsCountByInventory: number = response.data.pagination.records
+                    const items: ItemPreviewType[] = response.data.data
+                    const inventoryPagination = {
+                        cursor: response.data.pagination.cursor,
+                        items: response.data.pagination.items,
+                        records: response.data.pagination.records
+                    }
 
                     return {
                         items: items,
-                        totalItemsCount: totalItemsCountByInventory,
+                        inventoryPagination: inventoryPagination,
                     }
                 } else {
                     return Promise.reject(response.data ? response.data : "Get plan items request failed")

src/stores/reducers/planSlice.ts

@@ -5 +5 @@
 const initialState: PlanViewState = {
     lastError: "",
 
-
     // TODO backend -> retrieve list of floors, not static -> not implemented at the time of coding
     floorList: [
-        { label: "Ground floor", id: "ground_floor", roomList: [] },
-        { label: "First floor", id: "first_floor", roomList: [] },
-        { label: "Second floor", id: "second_floor", roomList: [] }
     ],
     floorListLoading: false,
 
     itemInventories: [],
+    itemInventoriesLoading: false,
 
-    itemList: [],
+    // reseting itemList
+    itemListLoading: {},
+    itemList: {},
+    itemListPagination: {},
 }
 
 export const planSlice = createSlice({
@@ -27 +27 @@
 
         // getFloorList
         builder.addCase(getFloorList.fulfilled, (state, action) => {
-
             state.floorList = action.payload
             state.floorListLoading = false;
         })
@@ -41 +40 @@
 
         // getPlanItems
         builder.addCase(getPlanItems.fulfilled, (state, action) => {
-            state.itemList = action.payload.items
-            state.itemListLoading = false;
+            if (!state.itemList) {
+                state.itemList = {}
+            }
+
+            if (action.meta.arg.inventory in state.itemList) {
+                state.itemList[action.meta.arg.inventory] = state.itemList[action.meta.arg.inventory].concat(action.payload.items)
+            }
+            else {
+                state.itemList[action.meta.arg.inventory] = action.payload.items
+            }
+
+            if (!state.itemListLoading) {
+                state.itemListLoading = {}
+            }
+            state.itemListLoading[action.meta.arg.inventory] = false;
+
+            if (!state.itemListPagination) {
+                state.itemListPagination = {}
+            }
+            state.itemListPagination[action.meta.arg.inventory] = action.payload.inventoryPagination;
         })
+
         builder.addCase(getPlanItems.pending, (state, action) => {
-            state.itemListLoading = true;
+
+            if (!state.itemListLoading) {
+                state.itemListLoading = {}
+            }
+            state.itemListLoading[action.meta.arg.inventory] = true;
         })
         builder.addCase(getPlanItems.rejected, (state, action) => {
-            state.itemListLoading = false;
+
+            if (!state.itemListLoading) {
+                state.itemListLoading = {}
+            }
+            state.itemListLoading[action.meta.arg.inventory] = false;
             state.lastError = action.error.message
         })
 
-        
         // getPlanInventories
         builder.addCase(getPlanInventories.fulfilled, (state, action) => {
             state.itemInventories = action.payload.inventories
             state.totalItemsCount = action.payload.allInventoriesRecords
             state.itemInventoriesLoading = false;
+
+            // reseting itemList
+            state.itemListLoading = {}
+            state.itemList = {}
+            state.itemListPagination = {}
         })
         builder.addCase(getPlanInventories.pending, (state, action) => {
             state.itemInventoriesLoading = true;

src/types/plan.ts

@@ -1 @@
-import { ItemPreviewType } from "./listViewTypes"
+import { ItemPreviewType, LoadedPagesOfInventories } from "./listViewTypes"
+import { Inventory } from "./searchFormTypes"
 
 
 export type Floor = {
@@ -33 +34 @@
     label: string
 }
 
-
-export type InventoryTab = { tab: number, key: string, label: string }
-
-
 export type PlanViewState = {
 
     // floorList
     floorListLoading?: boolean
     floorList: Floor[]
 
-
-    // items
-    itemInventories: InventoryTab[],
-    itemInventoriesLoading?: boolean,
-
-    itemListLoading?: boolean,
-    itemList: ItemPreviewType[]
+    // inventories
+    itemInventories: Inventory[]
+    itemInventoriesLoading?: boolean
     totalItemsCount?: number
 
+    // itemsx
+    itemListPagination?: LoadedPagesOfInventories
+    itemListLoading?: { [key: string]: boolean }
+    itemList: Record<string, ItemPreviewType[]>
+
     // plan
     // @TODO
 
+
+    // last error
     lastError?: string
 }