Fakultas Ilmu Komputer UI

Skip to content
GitLab
Commit 4f4f3ff3 authored by Nabilah Adani's avatar Nabilah Adani
Browse files

Merge branch 'sean/tampilan-log-aktivitas' into 'PBI-14-Log-Aktivitas' 

Change Item per Page to max 20 and bug fixing

See merge request !48
parents 562bcd32 ac348b0c
Pipeline #81667 passed with stages
in 10 minutes and 24 seconds
Hide whitespace changes
Inline Side-by-side
src/components/Table/index.tsx
View file @ 4f4f3ff3
......@@ -23,6 +23,7 @@ interface TableProps {
searchPlaceholder?: string;
maximumData?: number;
rowOnClick?: (row: Array<ValueType>) => void;
itemPerPage?: number;
}
const Click = styled.div`
......@@ -93,6 +94,7 @@ export default function Table({
onChange = async () => new Promise<Array<Array<ValueType>>>(() => []),
maximumData = -1,
rowOnClick,
itemPerPage,
}: TableProps) {
const { colors } = useContext(ThemeContext) || DEFAULT_THEME;
const [previousDataTotal, setPreviousDataTotal] = useState(0);
......@@ -118,18 +120,24 @@ export default function Table({
return;
setIsLoading(true);
const newData: Array<Array<ValueType>> = await onChange(
searchValue,
newPageNumber
);
setIsLoading(false);
await onChange(searchValue, newPageNumber).then((newData) => {
setIsLoading(false);
if (newData.length === 0 || newData[0].length === 0) return;
setPageNumber(newPageNumber);
setPreviousDataTotal(
previousDataTotal + (sign === 1 ? data.length : -newData.length)
);
setData([...newData]);
if (newData.length === 0 || newData[0].length === 0) return;
setPageNumber(newPageNumber);
setPreviousDataTotal(
previousDataTotal + (sign === 1 ? data.length : -newData.length)
);
if (
action === PageAction.Prev &&
previousDataTotal + data.length === maximumData
) {
setPreviousDataTotal(
previousDataTotal - (itemPerPage ? itemPerPage : 10)
);
}
setData([...newData]);
});
};
const [couldGoBack, couldGoNext] = [
......@@ -175,14 +183,14 @@ export default function Table({
<Button
data-test-id="search-button"
onClick={async () => {
const newPageNumber = 1;
const newPageNumber = pageNumber;
setIsLoading(true);
const newData = await onChange(searchValue, newPageNumber);
setIsLoading(false);
if (newData.length === 0 || newData[0].length === 0) return;
setPageNumber(newPageNumber);
setPreviousDataTotal(0);
setData([...newData]);
}}
>
......@@ -315,11 +323,15 @@ export default function Table({
data-test-id="prev-button"
id="prev-button"
cursor="pointer"
onClick={couldGoBack ? () => changePage(PageAction.Prev) : () => {}}
onClick={
couldGoBack && searchValue === ''
? () => changePage(PageAction.Prev)
: () => {}
}
src="/assets/icons/right-paging.svg"
origin="50% 50%"
height="16px"
opacity={couldGoBack ? 1 : 0.5}
opacity={couldGoBack && searchValue === '' ? 1 : 0.5}
transform="rotateZ(180deg)"
/>
<Gap gap={12} axis={Gap.Axis.Horizontal} />
......@@ -332,10 +344,14 @@ export default function Table({
data-test-id="next-button"
id="next-button"
cursor="pointer"
onClick={couldGoNext ? () => changePage(PageAction.Next) : () => {}}
onClick={
couldGoNext && searchValue === ''
? () => changePage(PageAction.Next)
: () => {}
}
src="/assets/icons/right-paging.svg"
height="16px"
opacity={couldGoNext ? 1 : 0.5}
opacity={couldGoNext && searchValue === '' ? 1 : 0.5}
/>
</Box>
</Box>
......
src/scenes/ActivityLog/components/ActivityList/index.tsx
View file @ 4f4f3ff3
......@@ -201,7 +201,7 @@ export default function ActivityList() {
<Box width="100%" mainAxis="flex-end">
<Text color={colors.mediumGray}>
{((page - 1) * 10 + logList.length).toString() + ' dari ' + totalLog}
{((page - 1) * 20 + logList.length).toString() + ' dari ' + totalLog}
</Text>
<Gap gap={12} axis={Gap.Axis.Horizontal} />
<Icon
......
src/scenes/ActivityLog/components/ActivityTabel/index.test.tsx
View file @ 4f4f3ff3
......@@ -7,314 +7,318 @@ import { AppContext } from 'contexts';
import { mount } from 'enzyme';
const dummyLog = {
status: 200,
data: {
username: "Test",
is_admin: false,
previous: true,
next: true,
count: 1,
results: [
{
action_type: "Delete",
model_name: "Account",
object_id: "12345",
recorded_at: "2020-05-31T23:03:35.854615+07:00",
},
]
}
}
status: 200,
data: {
username: 'Test',
is_admin: false,
previous: true,
next: true,
count: 1,
results: [
{
action_type: 'Delete',
model_name: 'Account',
object_id: '12345',
recorded_at: '2020-05-31T23:03:35.854615+07:00',
},
],
},
};
jest.mock('axios');
const mockedAxios = axios as jest.Mocked<typeof axios>;
const testProps = {
services: {
main: useMainService('dummyToken'),
},
services: {
main: useMainService('dummyToken'),
},
};
it('ActivityTabel renders correctly', () => {
const instance = renderer.create(
<ActivityTabel />
);
const instance = renderer.create(<ActivityTabel />);
expect(instance).toBeTruthy();
expect(instance).toBeTruthy();
});
describe('load logs and generate log messages correctly', () => {
it('Monitoring case', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
previous: null,
next: null,
count: 1,
results: [
{
action_type: "Create",
model_name: "Monitoring Case",
object_id: "1234",
recorded_at: "2020-05-31T23:03:35.854615+07:00",
},
],
investigation_case: {
case_subject: {
name: "Test"
}
}
}
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
expect(mockedAxios.request).toBeCalled();
it('Monitoring case', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
previous: null,
next: null,
count: 1,
results: [
{
action_type: 'Create',
model_name: 'Monitoring Case',
object_id: '1234',
recorded_at: '2020-05-31T23:03:35.854615+07:00',
},
],
investigation_case: {
case_subject: {
name: 'Test',
},
},
},
});
it('Investigation case', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
previous: null,
next: null,
count: 1,
results: [
{
action_type: "Create",
model_name: "Investigation Case",
object_id: "1234",
recorded_at: "2020-05-31T23:03:35.854615+07:00",
},
],
case_subject: {
name: "Test"
}
}
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
expect(mockedAxios.request).toBeCalled();
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
it('Case subject', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
previous: null,
next: null,
count: 1,
results: [
{
action_type: "Create",
model_name: "Case Subject",
object_id: "1234",
recorded_at: "2020-05-31T23:03:35.854615+07:00",
},
],
}
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
expect(mockedAxios.request).toBeCalled();
expect(mockedAxios.request).toBeCalled();
});
it('Investigation case', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
previous: null,
next: null,
count: 1,
results: [
{
action_type: 'Create',
model_name: 'Investigation Case',
object_id: '1234',
recorded_at: '2020-05-31T23:03:35.854615+07:00',
},
],
case_subject: {
name: 'Test',
},
},
});
it('Create account', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
username: "Test",
is_admin: false,
previous: null,
next: null,
count: 1,
results: [
{
action_type: "Create",
model_name: "Account",
object_id: "1234",
recorded_at: "2020-05-31T23:03:35.854615+07:00",
},
]
}
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
expect(mockedAxios.request).toBeCalled();
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
it('Create account, but account deleted', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
previous: null,
next: null,
count: 1,
results: [
{
action_type: "Create",
model_name: "Account",
object_id: "1234",
recorded_at: "2020-05-31T23:03:35.854615+07:00",
},
]
}
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
expect(mockedAxios.request).toBeCalled();
expect(mockedAxios.request).toBeCalled();
});
it('Case subject', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
previous: null,
next: null,
count: 1,
results: [
{
action_type: 'Create',
model_name: 'Case Subject',
object_id: '1234',
recorded_at: '2020-05-31T23:03:35.854615+07:00',
},
],
},
});
it('Edit account', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
username: "Test",
is_admin: false,
previous: null,
next: null,
count: 1,
results: [
{
action_type: "Edit",
model_name: "Account",
object_id: "1234",
recorded_at: "2020-05-31T23:03:35.854615+07:00",
},
]
}
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
expect(mockedAxios.request).toBeCalled();
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
it('Edit account, but account deleted', () => {
mockedAxios.request.mockResolvedValue({
status: 404,
data: {
previous: null,
next: null,
count: 1,
results: [
{
action_type: "Edit",
model_name: "Account",
object_id: "1234",
recorded_at: "2020-05-31T23:03:35.854615+07:00",
},
]
}
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
expect(mockedAxios.request).toBeCalled();
});
expect(mockedAxios.request).toBeCalled();
});
it('Delete account', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
username: "Test",
is_admin: false,
previous: null,
next: null,
count: 1,
results: [
{
action_type: "Delete",
model_name: "Account",
object_id: "1234",
recorded_at: "2020-05-31T23:03:35.854615+07:00",
},
]
}
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
expect(mockedAxios.request).toBeCalled();
it('Create account', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
username: 'Test',
is_admin: false,
previous: null,
next: null,
count: 1,
results: [
{
action_type: 'Create',
model_name: 'Account',
object_id: '1234',
recorded_at: '2020-05-31T23:03:35.854615+07:00',
},
],
},
});
});
it('fetch new logs and change page number when press next or previous button', () => {
mockedAxios.request.mockResolvedValue(dummyLog);
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
expect(mockedAxios.request).toBeCalled();
});
it('Create account, but account deleted', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
previous: null,
next: null,
count: 1,
results: [
{
action_type: 'Create',
model_name: 'Account',
object_id: '1234',
recorded_at: '2020-05-31T23:03:35.854615+07:00',
},
],
},
});
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
expect(mockedAxios.request).toBeCalled();
});
it('Edit account', () => {
mockedAxios.request.mockResolvedValue({
status: 200,
data: {
username: 'Test',
is_admin: false,
previous: null,
next: null,
count: 1,
results: [
{
action_type: 'Edit',
model_name: 'Account',
object_id: '1234',
recorded_at: '2020-05-31T23:03:35.854615+07:00',
},
],
},
});
let nextButton = instance.find('[data-test-id="next-button"]');
let prevButton = instance.find('[data-test-id="prev-button"]');
const instance = mount(
<AppContext.Provider value={testProps}>
<ActivityTabel />
</AppContext.Provider>
);
let pageNumber = instance.find('Text').findWhere(elem => elem.prop('id') === 'page-number');
expect(pageNumber.text()).toBe('1');
nextButton.at(0).simulate('click');
expect(mockedAxios.request).toBeCalled();
});
it('Edit account, but account deleted', () => {
mockedAxios.request.mockResolvedValue({
status: 404,
data: {
previous: null,
next: null,
count: 1,
results: [
{