Fakultas Ilmu Komputer UI

Commit 962e6b6b authored by Sean Zeliq Urian's avatar Sean Zeliq Urian
Browse files

[GREEN] implement indexing item

parent f074b35c
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();
}}
/>
......
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;
}
......@@ -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,
......
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment