Pagination, Search, CSS for Admin Donation Tracking Table

[joshualipton]

Overview

"Computer programmers obtain quasi-magical, superhuman coding ability when they have a blood alcohol concentration percentage between 0.129% and 0.138%" - Former CEO of Microsoft

Running the program

1. Clone the repo through git clone
2. Navigate to the directory of your fph-frontend repo using the cd command.
3. Run git checkout dev and then git pull.
4. Create a branch off the dev branch in fph-frontend. For the name of the branch, use what the title of this issue as. Use git checkout -b <insert_branch_name>.
5. Install the necessary dependencies through running yarn. Test that your application works by running yarn format followed by yarn dev
6. Create your necessary code through creating files within the component folder.
7. Run the code with yarn (to install), yarn format (to format the code), and yarn start (to start the program).
8. Access localhost:3000/.

Task

https://www.figma.com/file/VkH80LtHkl1Ck76v88fTvk/FPH-Wireframes?type=design&node-id=2161-9159&mode=design&t=ArurxYmELbJ0wHNT-0

Setup pagination in the backend so that if we are on page 1 then we have only 1-10 showing, if on page 2 its 11-20, etc. Reference this PR (ctc-uci/fph-backend@d58e7fe) to see how it is done in the backend.

Reference this PR (https://github.com/ctc-uci/fph-frontend/pull/39/files), more specifically the AdminFilterDashboard. See how they setup the pagination on there.

The total number of donations for a business can be found by doing a GET by id on the donation tracking table. Please message me or Madhu if you are confused on this.

Use Chakra Components only to create the fields for this task.

For search, reference cell dogs:
Frontend:

<Box flex={3} display="flex" alignItems="center" marginTop="auto" gap="15px">
          <InputGroup size="sm" margin="auto">
            <InputLeftElement
              margin="auto"
              pointerEvents="none"
              display="flex"
              alignItems="center"
              justifyContent="center"
              top="12%"
            >
              <Search2Icon color="gray.300" />
            </InputLeftElement>
            <Input
              type="text"
              placeholder="Search"
              size="sm"
              value={searchDog}
              onChange={e => setSearchDog(e.target.value)}
              height="40px"
              borderRadius="md"
            />
          </InputGroup>
          {!isLargerThan768 && <FiltersButton />}
        </Box>

Backend:

dog.get('/search/:name', async (request, response) => {
  try {
    const { name } = request.params;
    const { filterBy, facility } = request.query;

    console.log(filterBy, facility);
    const conditionMap = {
      allMales: `"gender" = 'Male'`,
      allFemales: `"gender" = 'Female`,
      service: `"service" = true`,
      specialNeeds: `"specialNeeds" = true`,
      staffAdoption: `"staffAdoption" = true`,
      All: '',
    };
    const facilityCondition = facility ? `AND facilityid = $(facility)` : '';
    const stringMatchRows = await db.query(
      `SELECT * FROM dog WHERE (dogname ILIKE '%' || $(name) || '%' OR shelter ILIKE '%' || $(name) || '%' OR breed ILIKE '%' || $(name) || '%' OR 
      altname ILIKE '%' || $(name) || '%' OR notes ILIKE '%' || $(name) || '%' OR adoptername ILIKE '%' || $(name) || '%' OR adopterphone ILIKE '%' || $(name) || '%'
      OR addrline ILIKE '%' || $(name) || '%' OR adoptcity ILIKE '%' || $(name) || '%' OR adoptstate ILIKE '%' || $(name) || '%' OR zip ILIKE '%' || $(name) || 
      '%' OR adoptemail ILIKE '%' || $(name) || '%') AND ${
        conditionMap[filterBy] || '1=1'
      } ${facilityCondition} ORDER BY graddate DESC`,
      {
        name,
        facility,
      },
    );
    response.status(200).json(stringMatchRows);
  } catch (err) {
    console.log(err);
    response.status(400).send(err.message);
  }
});

Notice how we are doing search on all columns so that a user can search on any column and it will filter for them.

Try your best to match the wireframes provided by the designers. If you click on the figma element, you can see the properties such as color and size. Try not to use px and manully size things, instead try to use the chakra components in place as much as possible to do css like in the codeblock below:

// Sample card from Airbnb

function AirbnbExample() {
  const property = {
    imageUrl: "https://bit.ly/2Z4KKcF",
    imageAlt: "Rear view of modern home with pool",
    beds: 3,
    baths: 2,
    title: "Modern home in city center in the heart of historic Los Angeles",
    formattedPrice: "$1,900.00",
    reviewCount: 34,
    rating: 4,
  };

  return (
    <Box maxW="sm" borderWidth="1px" rounded="lg" overflow="hidden">
      <Image src={property.imageUrl} alt={property.imageAlt} />

      <Box p="6">
        <Box d="flex" alignItems="baseline">
          <Badge rounded="full" px="2" variantColor="teal">
            New
          </Badge>
          <Box
            color="gray.500"
            fontWeight="semibold"
            letterSpacing="wide"
            fontSize="xs"
            textTransform="uppercase"
            ml="2"
          >
            {property.beds} beds &bull; {property.baths} baths
          </Box>
        </Box>

        <Box
          mt="1"
          fontWeight="semibold"
          as="h4"
          lineHeight="tight"
          isTruncated
        >
          {property.title}
        </Box>

        <Box>
          {property.formattedPrice}
          <Box as="span" color="gray.600" fontSize="sm">
            / wk
          </Box>
        </Box>

        <Box d="flex" mt="2" alignItems="center">
          {Array(5)
            .fill("")
            .map((_, i) => (
              <StarIcon
                key={i}
                color={i < property.rating ? "teal.500" : "gray.300"}
              />
            ))}
          <Box as="span" ml="2" color="gray.600" fontSize="sm">
            {property.reviewCount} reviews
          </Box>
        </Box>
      </Box>
    </Box>
  );
}

Lastly, make sure the component is scalable. This means if you were to zoom in and out of the page the nav bar should still look relatively the same.

Support

Feel free to reach out to Madhu and Josh on Slack/Messenger for assistance.