[GREEN] implement indexing item

src/scenes/ActivityLog/components/ActivityTabel/index.tsx

 import React, { useContext, useEffect, useState } from 'react';
-import { ThemeContext } from 'styled-components';
 import { Box, Gap, Icon, Table, Field, Button, Checkbox } from 'components';
 import { AppContext } from 'contexts';
 import { DateProps } from 'contexts/AppContext/types';
@@ -10,11 +9,13 @@ import {
 } from 'scenes/ActivityLog/utilities/utils';
 
 export default function ActivityTabel() {
+  const itemPerPage = 10;
   const { services } = useContext(AppContext);
   const [logList, setLogList] = useState<Log[]>([]);
   const [logTable, setLogTable] = useState<Log[]>([]);
   const [page, setPage] = useState(1);
   const [totalLog, setTotalLog] = useState(0);
+  const [indexAscending, setIndexAscending] = useState(false);
   const [dateAscending, setDateAscending] = useState(true);
   const [objAscending, setObjAscending] = useState(true);
   const [filterToggle, setFilterToggle] = useState<boolean>(true);
@@ -27,6 +28,13 @@ export default function ActivityTabel() {
     end_date: new Date(),
   });
 
+  const addNumber = (page: number, logs: any) => {
+    for (let i = 0; i < logs.length; i++) {
+      logs[i]['detail']['index'] = itemPerPage * (page - 1) + i + 1;
+    }
+    return logs;
+  };
+
   const fetchLog = async (
     page: number,
     roleFilterQuery: String,
@@ -69,11 +77,31 @@ export default function ActivityTabel() {
       setFilterToggle(!filterToggle);
       setPage(1);
     }
+    logs = addNumber(page, logs);
     setLogList(logs);
     setLogTable(logs);
     setTotalLog(logResponse.data.count);
   };
 
+  const sortLogByIndex = () => {
+    if (indexAscending) {
+      setLogTable(
+        logList.sort((a, b) => {
+          if (a.detail.index === b.detail.index) return 0;
+          return a.detail.index > b.detail.index ? 1 : -1;
+        })
+      );
+    } else {
+      setLogTable(
+        logList.sort((a, b) => {
+          if (a.detail.index === b.detail.index) return 0;
+          return a.detail.index < b.detail.index ? 1 : -1;
+        })
+      );
+    }
+    setIndexAscending(!indexAscending);
+  };
+
   const sortLogByDate = () => {
     if (dateAscending) {
       setLogTable(
@@ -112,8 +140,9 @@ export default function ActivityTabel() {
     setObjAscending(!objAscending);
   };
 
-  const getTableData = () =>
-    logTable.map(({ timestamp, detail }) => [
+  const getTableData = () => {
+    let tempData = logTable.map(({ timestamp, detail }) => [
+      detail.index,
       timestamp.toLocaleString('id-ID', {
         weekday: 'long',
         year: 'numeric',
@@ -131,6 +160,8 @@ export default function ActivityTabel() {
         ? detail.object.slice(0, 77) + '...'
         : detail.object,
     ]);
+    return tempData;
+  };
 
   useEffect(() => {
     fetchLog(page, roleFilterQuery, dateFilterQuery, ignoreDateFilterQuery);
@@ -201,6 +232,17 @@ export default function ActivityTabel() {
       <Box width="100%" axis={Box.Axis.Horizontal} margin="2em 2em">
         Urutkan dengan
         <Gap gap={40} axis={Gap.Axis.Horizontal} />
+        <Icon
+          src="/assets/icons/right-paging.svg"
+          width="20px"
+          height="17px"
+          id="sortbyindex"
+          onClick={sortLogByIndex}
+          transform={indexAscending ? 'rotateZ(-90deg)' : 'rotateZ(90deg)'}
+        />
+        <Gap gap={12} axis={Gap.Axis.Horizontal} />
+        No
+        <Gap gap={40} axis={Gap.Axis.Horizontal} />
         <Icon
           src="/assets/icons/right-paging.svg"
           width="20px"
@@ -226,6 +268,7 @@ export default function ActivityTabel() {
       <Table
         key={String(filterToggle)}
         header={[
+          'No.',
           'Hari, Tanggal',
           'Waktu',
           'Aktivitas',
@@ -237,10 +280,10 @@ export default function ActivityTabel() {
         data={getTableData()}
         maximumData={totalLog}
         onChange={async (val, pageInput) => {
+          setPage(pageInput);
           setLogTable(
-            logList.filter((e) => (val ? e.detail.object === val : true))
+            logList.filter((e) => (val ? e.detail.object.includes(val) : true))
           );
-          setPage(pageInput);
           return getTableData();
         }}
       />

src/scenes/ActivityLog/types/types.tsx

 export interface Log {
-    timestamp: Date;
-    message: string;
-    detail: LogDetail;
+  timestamp: Date;
+  message: string;
+  detail: LogDetail;
 }
 
 export interface LogDetail {
-    activity: string;
-    authorRole: 'admin' | 'kader';
-    authorName: string;
-    object: string;
-}
\ No newline at end of file
+  index: number;
+  activity: string;
+  authorRole: 'admin' | 'kader';
+  authorName: string;
+  object: string;
+}

src/scenes/ActivityLog/utilities/utils.tsx

@@ -85,6 +85,7 @@ const generateLogDetail = async (
   services: any
 ): Promise<LogDetail> => {
   let logDetail: LogDetail = {
+    index: log.index,
     activity: log.model_name,
     authorRole: log.author.is_admin ? 'admin' : 'kader',
     authorName: log.author.username,