feat(admin): interested user modal

cjtim · Oct 21, 2022 · 0bc272b · 0bc272b
1 parent b20e32b
commit 0bc272b
Show file tree

Hide file tree

Showing 11 changed files with 179 additions and 56 deletions.
diff --git a/components/global/TextLink.tsx b/components/global/TextLink.tsx
@@ -1,30 +1,34 @@
 import { Text, useColorModeValue } from '@chakra-ui/react'
 import NextLink from 'next/link'
 import { useRouter } from 'next/router'
+import { ExternalLinkIcon } from '@chakra-ui/icons'
 
 interface Props {
   text: string
   to: string
   title?: string
+  showIcon?: boolean
 }
 
 // eslint-disable-next-line no-undef
-const TextLink: React.FC<Props> = ({ text, to, title }) => {
+const TextLink: React.FC<Props> = ({ text, to, title, showIcon }) => {
   const { pathname } = useRouter()
   const color = useColorModeValue('black', 'white')
   return (
-    <Text
-      fontWeight="semibold"
-      cursor="pointer"
-      color={pathname === to ? color : 'gray'}
-      _hover={{
-        color,
-      }}
-    >
-      <NextLink href={to} title={title}>
-        {text}
-      </NextLink>
-    </Text>
+    <NextLink href={to} title={title}>
+      <Text
+        fontWeight="semibold"
+        cursor="pointer"
+        color={pathname === to ? color : 'gray'}
+        _hover={{
+          color,
+        }}
+      >
+        <>
+          {text} {showIcon && <ExternalLinkIcon />}
+        </>
+      </Text>
+    </NextLink>
   )
 }
 

diff --git a/components/interested/InterestedModal.tsx b/components/interested/InterestedModal.tsx
@@ -0,0 +1,82 @@
+import { InterestedSteps, InterestedUser } from 'interfaces/interested'
+import {
+  Modal,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalBody,
+  ModalCloseButton,
+  UseDisclosureProps,
+} from '@chakra-ui/react'
+import Table from 'components/global/Table'
+import { CellProps, Column } from 'react-table'
+import { Select } from 'chakra-react-select'
+import { useState } from 'react'
+import axios from 'libs/axios'
+import { config } from 'config'
+
+interface Props extends UseDisclosureProps {
+  interestedUsers: InterestedUser[]
+}
+
+const InterestedModal: React.FC<Props> = ({ interestedUsers: originalInterestedUser, isOpen, onClose }) => {
+  const [interestedUsers, setInterestedUsers] = useState<InterestedUser[]>(originalInterestedUser)
+  return (
+    <Modal isOpen={isOpen || false} onClose={onClose as () => void} size="full">
+      <ModalOverlay />
+      <ModalContent>
+        <ModalHeader>ผู้ที่สนใจสัตว์</ModalHeader>
+        <ModalCloseButton />
+        <ModalBody>
+          <Table
+            columns={
+              [
+                { accessor: 'name', Header: 'ชื่อ' },
+                { accessor: 'phone', Header: 'โทรศัพท์' },
+                {
+                  accessor: 'step',
+                  Header: 'สถานะ',
+                  Cell: ({ row }: CellProps<InterestedUser>) => (
+                    <Select
+                      focusBorderColor="green.500"
+                      defaultValue={{ label: row.original.step, value: row.original.step }}
+                      options={InterestedSteps.map(step => ({ label: step, value: step }))}
+                      onChange={newVal => {
+                        const find = interestedUsers.find(
+                          u => u.user_id === row.original.user_id && u.pet_id === row.original.pet_id,
+                        )
+                        const newArr: InterestedUser[] = [
+                          ...interestedUsers.filter(
+                            u => !(u.user_id === row.original.user_id && u.pet_id === row.original.pet_id),
+                          ),
+                          { ...find, step: newVal?.value } as InterestedUser,
+                        ]
+                        // Update API
+                        axios.put(
+                          config.interest.PUT_update.replace(':pet_id', String(row.original.pet_id)),
+                          {},
+                          {
+                            params: {
+                              step: newVal?.value,
+                              user_id: row.original.user_id,
+                            },
+                          },
+                        )
+
+                        setInterestedUsers(newArr)
+                      }}
+                      menuPosition="fixed"
+                    />
+                  ),
+                },
+              ] as Column<InterestedUser>[]
+            }
+            data={interestedUsers}
+          />
+        </ModalBody>
+      </ModalContent>
+    </Modal>
+  )
+}
+
+export default InterestedModal
diff --git a/components/login/LoginCard.tsx b/components/login/LoginCard.tsx
@@ -71,10 +71,10 @@ const LoginCard: React.FC<Props> = ({ onClickLineLogin, onSubmitLogin, ...boxPro
 
           <Flex gap={4}>
             <ButtonLink href={internalPages.user.register}>
-              <Button variant="brandSolid">{t('register')}</Button>
+              <Button variant="brandSolid">ลงทะเบียน</Button>
             </ButtonLink>
             <Button variant="brandOutline" isLoading={isSubmitting} type="submit">
-              {t('login')}
+              เข้าสู่ระบบ
             </Button>
           </Flex>
         </Center>

diff --git a/components/pets/PetsTable.tsx b/components/pets/PetsTable.tsx
@@ -37,6 +37,16 @@ const columns: Column<Pet>[] = [
     Header: <Text>ลงทะเบียนเมื่อ</Text>,
     Cell: ({ row }: CellProps<Pet>) => <>{ParseDateTime(row.original.created_at)}</>,
   },
+  {
+    accessor: 'interested',
+    Header: <Text>สนใจอุปถัมภ์</Text>,
+    Cell: ({ row }: CellProps<Pet>) => <>{row.original.interested.length || 0} คน</>,
+  },
+  {
+    accessor: 'liked',
+    Header: <Text>ถูกใจ</Text>,
+    Cell: ({ row }: CellProps<Pet>) => <>{row.original.liked.length || 0} คน</>,
+  },
 ]
 
 const PetsTable: React.FC<Props> = ({ pets }) => <Table data={pets} columns={columns} />

diff --git a/components/pets/RegisterCard.tsx b/components/pets/RegisterCard.tsx
@@ -1,6 +1,17 @@
 import { Pet, PetRegister } from 'interfaces/Pet'
 import { SubmitHandler, useForm } from 'react-hook-form'
-import { Box, FormControl, FormLabel, Input, FormErrorMessage, Button, BoxProps, Flex, Stack } from '@chakra-ui/react'
+import {
+  Box,
+  FormControl,
+  FormLabel,
+  Input,
+  FormErrorMessage,
+  Button,
+  BoxProps,
+  Flex,
+  Stack,
+  Textarea,
+} from '@chakra-ui/react'
 import { useTranslation } from 'next-i18next'
 import SelectLocationMap from 'components/global/SelectLocationMap'
 import { Select } from 'chakra-react-select'
@@ -56,7 +67,7 @@ const PetRegisterCard: React.FC<Props> = ({ onSubmitRegister, tags, defaultValue
             {/* Description */}
             <FormControl isInvalid={Boolean(errors.description)}>
               <FormLabel htmlFor="description">{t('register.description')}</FormLabel>
-              <Input id="description" placeholder={t('register.description')} {...register('description')} />
+              <Textarea id="description" placeholder={t('register.description')} {...register('description')} />
               <FormErrorMessage>{errors.description && errors.description.message}</FormErrorMessage>
             </FormControl>
             {/* Image */}

diff --git a/components/shelters/TableList.tsx b/components/shelters/TableList.tsx
@@ -25,6 +25,7 @@ const columns: Column<User>[] = [
           title={row.original.name}
           text={row.original.name}
           to={`${internalPages.shelters.index}/${row.original.id}`}
+          showIcon
         />
       </Flex>
     ),

diff --git a/config.ts b/config.ts
@@ -23,16 +23,16 @@ export const config = {
     POST_line_login: `/api/v1/auth/login`,
   },
   pet: {
-    GET_list: '/api/v1/pet',
-    GET_my: '/api/v1/pet/my',
-    GET_details: '/api/v1/pet/:pet_id',
-    POST_create: '/api/v1/pet',
-    PUT_update: '/api/v1/pet',
-    POST_img: '/api/v1/pet/img',
+    GET_list: '/api/v1/pet', // Anyone - list pets maps
+    GET_my: '/api/v1/pet/my', // Shelter - list pets
+    GET_details: '/api/v1/pet/:pet_id', // Loggedin user - pet details
+    POST_create: '/api/v1/pet', // Shelter - create pet
+    PUT_update: '/api/v1/pet', // Shelter - update pet
+    POST_img: '/api/v1/pet/img', // Shelter - add pet image
   },
   shelter: {
-    GET_list: '/api/v1/shelter',
-    GET_details: '/api/v1/shelter/:id',
+    GET_list: '/api/v1/shelter', // Loggedin user = Shelter list
+    GET_details: '/api/v1/shelter/:id', // Loggedin user - Shelter details
   },
   like: {
     GET_list: '/api/v1/like',
@@ -43,6 +43,7 @@ export const config = {
     GET_list: `/api/v1/interest`,
     GET_byPetId: `/api/v1/interest`, // params pet_id
     POST_add: `/api/v1/interest/:pet_id`,
+    PUT_update: `/api/v1/interest/:pet_id`,
     DELETE_delete: `/api/v1/interest/:pet_id`,
   },
   tag: {

diff --git a/interfaces/interested.ts b/interfaces/interested.ts
@@ -1,12 +1,26 @@
+/* eslint-disable no-unused-vars */
 import { Pet } from './Pet'
 import { User } from './User'
 
+// eslint-disable-next-line no-shadow
+export enum InterestedStep {
+  PENDING = 'ได้รับข้อมูลแล้ว',
+  REVIEWING = 'กำลังตรวจสอบข้อมูล และติดต่อกลับ',
+  ADOPED = 'เสร็จสิ้น',
+}
+
 export interface Interested {
   user_id: string
   pet_id: number
-  step: 'PENDING' | 'REVIEWING' | 'ADOPED'
+  step: InterestedStep
 }
 
+export const InterestedSteps: InterestedStep[] = [
+  InterestedStep.PENDING,
+  InterestedStep.REVIEWING,
+  InterestedStep.ADOPED,
+]
+
 export interface InterestedPet extends Interested, Pet {}
 
 export interface InterestedUser extends Interested, User {}
diff --git a/pages/pets/[pet_id]/index.tsx b/pages/pets/[pet_id]/index.tsx
@@ -1,13 +1,13 @@
 import { StarIcon } from '@chakra-ui/icons'
-import { Box, Button, Divider, Flex, Heading, Stack, Tag, Text, Tooltip } from '@chakra-ui/react'
+import { Box, Button, Divider, Flex, Heading, Stack, Tag, Text, Tooltip, useDisclosure } from '@chakra-ui/react'
 import ButtonLink from 'components/global/ButtonLink'
 import Gallery from 'components/global/Gallery'
 import Navbar from 'components/global/Navbar'
 import PageLayout from 'components/global/PageLayout'
 import StaticMap from 'components/global/StaticMap'
-import Table from 'components/global/Table'
 import TextLink from 'components/global/TextLink'
 import UserImg from 'components/global/UserImg'
+import InterestedModal from 'components/interested/InterestedModal'
 import PetStatusTag from 'components/pets/PetStatusTag'
 import { config, internalPages } from 'config'
 import { InterestedUser } from 'interfaces/interested'
@@ -20,7 +20,6 @@ import { GetServerSidePropsContext, NextPage } from 'next'
 import { serverSideTranslations } from 'next-i18next/serverSideTranslations'
 import { useRouter } from 'next/router'
 import { UserProps } from 'pages/_app'
-import { Column } from 'react-table'
 
 interface Props {
   pet: Pet
@@ -50,6 +49,9 @@ const PetDetails: NextPage<UserProps & Props> = ({ user, pet, shelter, createdAt
     }
     router.replace(router.asPath)
   }
+
+  const interestedDisclosure = useDisclosure()
+
   return (
     <PageLayout title={`Pet ${pet?.name}`}>
       <Navbar user={user} />
@@ -68,12 +70,18 @@ const PetDetails: NextPage<UserProps & Props> = ({ user, pet, shelter, createdAt
             <PetStatusTag status={pet.status} />
             <Flex marginLeft="auto" gap={4}>
               {user?.is_org && user?.id === pet.user_id && (
-                <ButtonLink href={`/pets/${pet.id}/update`}>
-                  <Button colorScheme="red">แก้ไขข้อมูล</Button>
-                </ButtonLink>
+                <Flex gap={2}>
+                  <Button colorScheme="blue" onClick={interestedDisclosure.onOpen}>
+                    ผู้ที่สนใจสัตว์
+                    <InterestedModal {...interestedDisclosure} interestedUsers={interestedUsers} />
+                  </Button>
+                  <ButtonLink href={`/pets/${pet.id}/update`}>
+                    <Button colorScheme="red">แก้ไขข้อมูล</Button>
+                  </ButtonLink>
+                </Flex>
               )}
               {!user?.is_org && (
-                <>
+                <Flex>
                   <Button colorScheme="blue" onClick={onClickLike} leftIcon={<StarIcon />}>
                     {isLiked ? 'ยกเลิกถูกใจ' : 'ถูกใจ'}
                   </Button>
@@ -82,7 +90,7 @@ const PetDetails: NextPage<UserProps & Props> = ({ user, pet, shelter, createdAt
                       {isInterested ? 'อยู่ในกระบวนการพิจารณาการอุปการะ' : 'สนใจรับอุปการะ'}
                     </Button>
                   </Tooltip>
-                </>
+                </Flex>
               )}
             </Flex>
           </Flex>
@@ -99,7 +107,12 @@ const PetDetails: NextPage<UserProps & Props> = ({ user, pet, shelter, createdAt
 
           <Flex gap={2} alignItems="center">
             <UserImg user={shelter} />
-            <TextLink text={shelter.name} to={`${internalPages.shelters.index}/${shelter.id}`} title={shelter.name} />
+            <TextLink
+              text={shelter.name}
+              to={`${internalPages.shelters.index}/${shelter.id}`}
+              title={shelter.name}
+              showIcon
+            />
           </Flex>
           <Divider />
           <Stack>
@@ -115,22 +128,6 @@ const PetDetails: NextPage<UserProps & Props> = ({ user, pet, shelter, createdAt
           </Flex>
         </Stack>
       </Flex>
-
-      {/* PET ADMIN AREA */}
-      {user?.is_org && user?.id === pet.user_id && (
-        <Stack borderRadius="2xl">
-          <Heading>ผู้ที่สนใจสัตว์</Heading>
-          <Table
-            columns={
-              [
-                { accessor: 'name', Header: 'Name' },
-                { accessor: 'step', Header: 'Step' },
-              ] as Column<InterestedUser>[]
-            }
-            data={interestedUsers}
-          />
-        </Stack>
-      )}
     </PageLayout>
   )
 }

diff --git a/pages/pets/[pet_id]/update.tsx b/pages/pets/[pet_id]/update.tsx
@@ -1,4 +1,4 @@
-import { Center } from '@chakra-ui/react'
+import { Center, Heading } from '@chakra-ui/react'
 import { AxiosResponse } from 'axios'
 import Navbar from 'components/global/Navbar'
 import PageLayout from 'components/global/PageLayout'
@@ -41,7 +41,8 @@ const PetUpdate: NextPage<UserProps & Props> = ({ user, pet, tags }) => {
   return (
     <PageLayout title={`Update pet - ${pet.name}`}>
       <Navbar user={user} />
-      <Center>
+      <Center flexDir="column" gap={2} p={4}>
+        <Heading>แก้ไขข้อมูลสัตว์เลี้ยง</Heading>
         <PetRegisterCard onSubmitRegister={onSubmit} tags={tags} defaultValues={pet} isUpdate />
       </Center>
     </PageLayout>