Add available remarks

Author: Vincy-fivestones

client/src/apis/record.ts

@@ -38,3 +38,10 @@ export async function deleteRecord(id: number) {
 
   return response.data;
 }
+
+export async function getRemarks(categoryId: number): Promise<string[]> {
+  const url = `v1/records/category/${categoryId}/remarks`;
+  const response = await Axios.get(url);
+
+  return response.data;
+}

client/src/components/record/RecordModal.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import CustomModal from '../Custom/CustomModal';
 import {
   ICategory,
@@ -11,7 +11,12 @@ import {
 import Calculator from '../calculator/Calculator';
 import { evaluate } from 'mathjs';
 import CustomTextField from '../Custom/CustomTextField';
-import { createRecord, deleteRecord, updateRecord } from '../../apis/record';
+import {
+  createRecord,
+  deleteRecord,
+  getRemarks,
+  updateRecord,
+} from '../../apis/record';
 import { useQueryClient, useMutation, useQuery } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { toast } from 'react-toastify';
@@ -73,8 +78,16 @@ const RecordModal = ({
     profile(userId!),
   );
 
+  const { data: remarks } = useQuery<string[]>(
+    ['remarks', selectedCategory?.id],
+    () => getRemarks(selectedCategory?.id!),
+  );
+
   const { wallets } = useRecord();
 
+  const datePickerRef = useRef<any>(null);
+  const textInputRef = useRef<HTMLDivElement>(null);
+
   const updateCalc = (key: string) => {
     if (key === '=') {
       return setValue((prev) => {
@@ -267,6 +280,7 @@ const RecordModal = ({
     type: 'Once' | 'Continue',
   ) => {
     event.preventDefault();
+
     try {
       if (!editRecord.price) {
         return toast('Please input the expense/income', { type: 'warning' });
@@ -301,6 +315,12 @@ const RecordModal = ({
 
   useEffect(() => {
     const keyListener = (event: KeyboardEvent) => {
+      if (
+        textInputRef.current?.contains(document.activeElement) ||
+        datePickerRef.current.input.contains(document.activeElement)
+      ) {
+        return;
+      }
       const reg = /\d|\/|\*|-|\+|\./g;
 
       if (event.key === 'Backspace') {
@@ -447,6 +467,7 @@ const RecordModal = ({
                 </div>
               </div>
               <DatePicker
+                ref={datePickerRef}
                 onChange={(e) => {
                   if (e) {
                     setEditRecord((prev) => {
@@ -480,7 +501,7 @@ const RecordModal = ({
               }}
             />
           </div>
-          <div className="py-2">
+          <div className="py-2" ref={textInputRef}>
             <CustomTextField
               type={'text'}
               name="Remarks"
@@ -494,6 +515,23 @@ const RecordModal = ({
                 });
               }}
             />
+            <div className="text-sm pt-2 flex flex-wrap gap-2">
+              {remarks?.map((remark) => (
+                <span
+                  className="bg-info-100 rounded-lg p-1 cursor-pointer hover:bg-info-200"
+                  onClick={() => {
+                    setEditRecord((prev) => {
+                      return {
+                        ...prev,
+                        remarks: remark,
+                      };
+                    });
+                  }}
+                >
+                  {remark}
+                </span>
+              ))}
+            </div>
           </div>
 
           {/* Submit button and choose continue or close */}

client/src/pages/Records.tsx

@@ -156,9 +156,10 @@ const Records = (props: Props) => {
                         >
                           <IconSelector name={record.category.icon} />
                         </div>
-
-                        <span>{record.category.name}</span>
-                        <span>{record.remarks}</span>
+                        <span className="flex items-baseline gap-2">
+                          <span>{record.category.name}</span>
+                          <span className="text-sm">{record.remarks}</span>
+                        </span>
                       </div>
 
                       <span>

src/categories/categories.service.ts

@@ -36,7 +36,7 @@ export class CategoriesService {
   }
 
   async findOne(id: number) {
-    return await this.categoryRepository.find({
+    return await this.categoryRepository.findOne({
       where: {
         id,
       },

src/records/records.controller.ts

@@ -20,6 +20,7 @@ import { ApiTags, ApiBearerAuth } from '@nestjs/swagger';
 import { JwtAuthGuard } from '../auth/jwt-auth.guard';
 import { UsersService } from '../users/users.service';
 import { WalletsService } from '../wallets/wallets.service';
+import { CategoriesService } from '../categories/categories.service';
 
 @ApiTags('Record')
 @ApiBearerAuth()
@@ -30,7 +31,8 @@ export class RecordsController {
   constructor(
     private readonly recordsService: RecordsService,
     private readonly usersService: UsersService,
-    private readonly walletService: WalletsService,
+    private readonly walletsService: WalletsService,
+    private readonly categoriesService: CategoriesService,
   ) {}
 
   @Post()
@@ -46,7 +48,7 @@ export class RecordsController {
 
   @Get('/wallet/:id')
   async findAll(@Param('id') id: number) {
-    const wallet = await this.walletService.findOne(id);
+    const wallet = await this.walletsService.findOne(id);
 
     if (!wallet) {
       throw new BadRequestException('Wallet does not exist');
@@ -56,7 +58,7 @@ export class RecordsController {
   }
 
   @Get(':id')
-  findOne(@Param('id') id: string) {
+  findOne(@Param('id') id: number) {
     return this.recordsService.findOne(+id);
   }
 
@@ -75,7 +77,28 @@ export class RecordsController {
   }
 
   @Delete(':id')
-  remove(@Param('id') id: string) {
-    return this.recordsService.remove(+id);
+  async remove(@Param('id') id: number) {
+    return await this.recordsService.remove(+id);
+  }
+
+  @Get('/category/:categoryId/remarks')
+  async getRemarks(@Param('categoryId') categoryId: number) {
+    // Get all the remarks of that category
+    const category = await this.categoriesService.findOne(categoryId);
+
+    if (!category) {
+      throw new BadRequestException('The category does not exist');
+    }
+
+    const records = await this.recordsService.getRemarks(category);
+    return records.reduce((remarks: string[], record) => {
+      if (
+        record.remarks &&
+        !remarks.find((remark) => remark === record.remarks)
+      ) {
+        remarks.push(record.remarks);
+      }
+      return remarks;
+    }, []);
   }
 }

src/records/records.module.ts

@@ -5,9 +5,15 @@ import { TypeOrmModule } from '@nestjs/typeorm';
 import { Record } from './entities/record.entity';
 import { UsersModule } from '../users/users.module';
 import { WalletsModule } from '../wallets/wallets.module';
+import { CategoriesModule } from '../categories/categories.module';
 
 @Module({
-  imports: [TypeOrmModule.forFeature([Record]), UsersModule, WalletsModule],
+  imports: [
+    TypeOrmModule.forFeature([Record]),
+    UsersModule,
+    WalletsModule,
+    CategoriesModule,
+  ],
   controllers: [RecordsController],
   providers: [RecordsService],
 })

src/records/records.service.ts

@@ -5,6 +5,7 @@ import { InjectRepository } from '@nestjs/typeorm';
 import { Record } from './entities/record.entity';
 import { Repository } from 'typeorm';
 import { Wallet } from '../wallets/entities/wallet.entity';
+import { Category } from '../categories/entities/category.entity';
 
 @Injectable()
 export class RecordsService {
@@ -53,4 +54,15 @@ export class RecordsService {
   async remove(id: number) {
     return await this.recordRepository.softDelete(id);
   }
+
+  async getRemarks(category: Category) {
+    return await this.recordRepository.find({
+      relations: { category: true },
+      where: {
+        category: {
+          id: category.id,
+        },
+      },
+    });
+  }
 }