Fakultas Ilmu Komputer UI

Commit 1ef209ac authored by Sean Zeliq Urian's avatar Sean Zeliq Urian
Browse files

[REFACTOR] fix error data when filtered not in first page

parent 2dc0e3f8
Pipeline #79936 passed with stages
in 4 minutes and 20 seconds
import React, { useContext, useEffect, useState } from 'react';
import styled, { ThemeContext } from 'styled-components';
import {
Box,
Text,
Gap,
Icon,
Field,
Button,
Checkbox,
} from 'components';
import { Box, Text, Gap, Icon, Field, Button, Checkbox } from 'components';
import { AppContext } from 'contexts';
import Loading from 'components/Loading';
import { DateProps } from 'contexts/AppContext/types';
import { Log } from 'scenes/ActivityLog/types/types';
import { generateLogDetail, generateLogMessage } from "scenes/ActivityLog/utilities/utils";
import { DEFAULT_THEME } from 'scenes/ActivityLog'
import {
generateLogDetail,
generateLogMessage,
} from 'scenes/ActivityLog/utilities/utils';
import { DEFAULT_THEME } from 'scenes/ActivityLog';
export default function ActivityList() {
const { colors } = useContext(ThemeContext) || DEFAULT_THEME;
......@@ -26,7 +21,7 @@ export default function ActivityList() {
const [totalLog, setTotalLog] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const verticalLineHeight = (logList.length - 1) * 52;
const [roleFilterQuery, setRoleFilterQuery] = useState<String>("Semua Peran");
const [roleFilterQuery, setRoleFilterQuery] = useState<String>('Semua Peran');
const [ignoreDateFilterQuery, setIgnoredateFilterQuery] = useState<boolean>(
true
);
......@@ -51,27 +46,49 @@ export default function ActivityList() {
margin-right: 20px;
`;
const fetchLog = async (page: number, roleFilterQuery: String, dateFilterQuery: DateProps, ignoreDateFilterQuery: boolean) => {
const fetchLog = async (
page: number,
roleFilterQuery: String,
dateFilterQuery: DateProps,
ignoreDateFilterQuery: boolean
) => {
let dateOnly = {
start_date: dateFilterQuery.start_date.toISOString().split('T')[0],
end_date: dateFilterQuery.end_date.toISOString().split('T')[0]
}
end_date: dateFilterQuery.end_date.toISOString().split('T')[0],
};
setIsLoading(true);
const logResponse = await services.main.getLog(page, roleFilterQuery, dateOnly.start_date, dateOnly.end_date, ignoreDateFilterQuery);
const logResponse = await services.main.getLog(
page,
roleFilterQuery,
dateOnly.start_date,
dateOnly.end_date,
ignoreDateFilterQuery
);
console.log(logResponse);
let logs: Log[] = [];
for (let log of logResponse.data.results) {
let logObject: Log = {
timestamp: new Date(log.recorded_at),
message: await generateLogMessage(log, services),
detail: await generateLogDetail(log, services),
};
logs.push(logObject);
console.log(logResponse.data.results);
if (
logResponse.data.results !== undefined &&
logResponse.data.results.length > 0
) {
for (let log of logResponse.data.results) {
let logObject: Log = {
timestamp: new Date(log.recorded_at),
message: await generateLogMessage(log, services),
detail: await generateLogDetail(log, services),
};
logs.push(logObject);
}
} else {
setPage(1);
}
setLogList(logs);
setNext(logResponse.data.next ? true : false);
setPrev(logResponse.data.previous ? true : false);
setTotalLog(logResponse.data.count);
setIsLoading(false);
};
......@@ -125,7 +142,18 @@ export default function ActivityList() {
updateValue={(value) => setRoleFilterQuery(value)}
/>
<Gap gap={50} axis={Gap.Axis.Horizontal} />
<Button id="filter" onClick={() => fetchLog(page, roleFilterQuery, dateFilterQuery, ignoreDateFilterQuery)}>
<Button
id="filter"
onClick={() => {
fetchLog(
1,
roleFilterQuery,
dateFilterQuery,
ignoreDateFilterQuery
);
setPage(1);
}}
>
Terapkan Filter
</Button>
</Box>
......@@ -175,7 +203,7 @@ export default function ActivityList() {
<Icon
id="prev-button"
cursor="pointer"
onClick={prev ? () => setPage(page - 1) : () => { }}
onClick={prev ? () => setPage(page - 1) : () => {}}
src="/assets/icons/right-paging.svg"
origin="50% 50%"
height="16px"
......@@ -188,7 +216,7 @@ export default function ActivityList() {
<Icon
id="next-button"
cursor="pointer"
onClick={next ? () => setPage(page + 1) : () => { }}
onClick={next ? () => setPage(page + 1) : () => {}}
src="/assets/icons/right-paging.svg"
height="16px"
opacity={next ? 1 : 0.5}
......
import React, { useContext, useEffect, useState } from 'react';
import { ThemeContext } from 'styled-components';
import {
Box,
Gap,
Icon,
Table,
Field,
Button,
Checkbox,
} from 'components';
import { Box, Gap, Icon, Table, Field, Button, Checkbox } from 'components';
import { AppContext } from 'contexts';
import { DateProps } from 'contexts/AppContext/types';
import { Log } from 'scenes/ActivityLog/types/types';
import { generateLogDetail, generateLogMessage } from "scenes/ActivityLog/utilities/utils";
import {
generateLogDetail,
generateLogMessage,
} from 'scenes/ActivityLog/utilities/utils';
export default function ActivityTabel() {
const { services } = useContext(AppContext);
......@@ -22,7 +17,8 @@ export default function ActivityTabel() {
const [totalLog, setTotalLog] = useState(0);
const [dateAscending, setDateAscending] = useState(true);
const [objAscending, setObjAscending] = useState(true);
const [roleFilterQuery, setRoleFilterQuery] = useState<String>("Semua Peran");
const [filterToggle, setFilterToggle] = useState<boolean>(true);
const [roleFilterQuery, setRoleFilterQuery] = useState<String>('Semua Peran');
const [ignoreDateFilterQuery, setIgnoredateFilterQuery] = useState<boolean>(
true
);
......@@ -31,21 +27,40 @@ export default function ActivityTabel() {
end_date: new Date(),
});
const fetchLog = async (page: number, roleFilterQuery: String, dateFilterQuery: DateProps, ignoreDateFilterQuery: boolean) => {
const fetchLog = async (
page: number,
roleFilterQuery: String,
dateFilterQuery: DateProps,
ignoreDateFilterQuery: boolean
) => {
let dateOnly = {
start_date: dateFilterQuery.start_date.toISOString().split('T')[0],
end_date: dateFilterQuery.end_date.toISOString().split('T')[0]
}
const logResponse = await services.main.getLog(page, roleFilterQuery, dateOnly.start_date, dateOnly.end_date, ignoreDateFilterQuery);
end_date: dateFilterQuery.end_date.toISOString().split('T')[0],
};
const logResponse = await services.main.getLog(
page,
roleFilterQuery,
dateOnly.start_date,
dateOnly.end_date,
ignoreDateFilterQuery
);
let logs: Log[] = [];
for (let log of logResponse.data.results) {
let logObject: Log = {
timestamp: new Date(log.recorded_at),
message: await generateLogMessage(log, services),
detail: await generateLogDetail(log, services),
};
logs.push(logObject);
if (
logResponse.data.results !== undefined &&
logResponse.data.results.length > 0
) {
for (let log of logResponse.data.results) {
let logObject: Log = {
timestamp: new Date(log.recorded_at),
message: await generateLogMessage(log, services),
detail: await generateLogDetail(log, services),
};
logs.push(logObject);
}
} else {
setFilterToggle(!filterToggle);
setPage(1);
}
setLogList(logs);
setLogTable(logs);
......@@ -160,7 +175,19 @@ export default function ActivityTabel() {
updateValue={(value) => setRoleFilterQuery(value)}
/>
<Gap gap={50} axis={Gap.Axis.Horizontal} />
<Button id="filter" onClick={() => fetchLog(page, roleFilterQuery, dateFilterQuery, ignoreDateFilterQuery)}>
<Button
id="filter"
onClick={() => {
setFilterToggle(!filterToggle);
fetchLog(
1,
roleFilterQuery,
dateFilterQuery,
ignoreDateFilterQuery
);
setPage(1);
}}
>
Terapkan Filter
</Button>
</Box>
......@@ -190,6 +217,7 @@ export default function ActivityTabel() {
Nama Objek (A-Z)
</Box>
<Table
key={String(filterToggle)}
header={[
'Hari, Tanggal',
'Waktu',
......
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