feat: Refactor super-admin screens to OS_Wrapper pattern
- Create screens/Admin/Super-Admin/ScreenSuperAdmin.tsx * Migrate from ViewWrapper to OS_Wrapper * Add usePagination hook for pagination & skeleton loading * Add AdminBasicBox for card layout (same as user-access) * Add pull-to-refresh & infinite scroll support - Create screens/Admin/Super-Admin/ScreenSuperAdminDetail.tsx * Migrate from ViewWrapper to OS_Wrapper * Add useAuth hook for user validation * Add pull-to-refresh support - Simplify route files: * app/(application)/admin/super-admin/index.tsx → 4 lines * app/(application)/admin/super-admin/[id]/index.tsx → 4 lines Co-authored-by: Qwen-Coder <qwen-coder@alibabacloud.com>
This commit is contained in:
@@ -1,129 +1,5 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import {
|
||||
BoxButtonOnFooter,
|
||||
ButtonCustom,
|
||||
LoaderCustom,
|
||||
StackCustom,
|
||||
TextCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
|
||||
import GridTwoView from "@/components/_ShareComponent/GridTwoView";
|
||||
import {
|
||||
apiAdminUserAccessGetById,
|
||||
apiAdminUserAccessUpdateStatus,
|
||||
} from "@/service/api-admin/api-admin-user-access";
|
||||
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
|
||||
import { useCallback, useState } from "react";
|
||||
import Toast from "react-native-toast-message";
|
||||
import { Admin_ScreenSuperAdminDetail } from "@/screens/Admin/Super-Admin/ScreenSuperAdminDetail";
|
||||
|
||||
export default function SuperAdminDetail() {
|
||||
const { id } = useLocalSearchParams();
|
||||
const [data, setData] = useState<any | null>(null);
|
||||
const [loadData, setLoadData] = useState(false);
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
onLoadData();
|
||||
}, [id]),
|
||||
);
|
||||
|
||||
const onLoadData = async () => {
|
||||
try {
|
||||
setLoadData(true);
|
||||
const response = await apiAdminUserAccessGetById({ id: id as string });
|
||||
|
||||
setData(response.data);
|
||||
} catch (error) {
|
||||
console.log("[ERROR LOAD DATA]", error);
|
||||
} finally {
|
||||
setLoadData(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlerSubmit = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await apiAdminUserAccessUpdateStatus({
|
||||
id: id as string,
|
||||
role: data?.masterUserRoleId === "2" ? "user" : "admin",
|
||||
category: "role",
|
||||
});
|
||||
|
||||
if (!response.success) {
|
||||
Toast.show({
|
||||
type: "error",
|
||||
text1: "Update role gagal",
|
||||
});
|
||||
return;
|
||||
}
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: "Update role berhasil ",
|
||||
});
|
||||
router.back();
|
||||
} catch (error) {
|
||||
console.log("[ERROR UPDATE STATUS]", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ViewWrapper
|
||||
headerComponent={<AdminBackButtonAntTitle title={`Detail User`} />}
|
||||
footerComponent={
|
||||
data && (
|
||||
<BoxButtonOnFooter>
|
||||
<ButtonCustom
|
||||
isLoading={isLoading}
|
||||
backgroundColor={
|
||||
data?.masterUserRoleId === "2" ? "red" : "green"
|
||||
}
|
||||
textColor={"white"}
|
||||
onPress={handlerSubmit}
|
||||
>
|
||||
{data?.masterUserRoleId === "2"
|
||||
? "Hapus akses admin"
|
||||
: "Tambah sebagai admin"}
|
||||
</ButtonCustom>
|
||||
</BoxButtonOnFooter>
|
||||
)
|
||||
}
|
||||
>
|
||||
{loadData ? (
|
||||
<LoaderCustom />
|
||||
) : (
|
||||
<StackCustom>
|
||||
{listData(data && data)?.map((item: any, index: number) => (
|
||||
<GridTwoView
|
||||
key={index}
|
||||
spanLeft={4}
|
||||
spanRight={8}
|
||||
leftItem={<TextCustom bold>{item?.label}</TextCustom>}
|
||||
rightItem={<TextCustom>{item?.value}</TextCustom>}
|
||||
/>
|
||||
))}
|
||||
</StackCustom>
|
||||
)}
|
||||
</ViewWrapper>
|
||||
</>
|
||||
);
|
||||
export default function AdminSuperAdminDetail() {
|
||||
return <Admin_ScreenSuperAdminDetail />;
|
||||
}
|
||||
|
||||
const listData = (data: any) => [
|
||||
{
|
||||
label: "Username",
|
||||
value: (data && data?.username) || "-",
|
||||
},
|
||||
{
|
||||
label: "Role",
|
||||
value: data && data?.masterUserRoleId === "2" ? "Admin" : "User",
|
||||
},
|
||||
{
|
||||
label: "Nomor",
|
||||
value: (data && `+${data?.nomor}`) || "-",
|
||||
},
|
||||
];
|
||||
|
||||
@@ -1,148 +1,5 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import {
|
||||
BadgeCustom,
|
||||
CenterCustom,
|
||||
Divider,
|
||||
SearchInput,
|
||||
StackCustom,
|
||||
TextCustom,
|
||||
ViewWrapper,
|
||||
} from "@/components";
|
||||
import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
|
||||
import { GridViewCustomSpan } from "@/components/_ShareComponent/GridViewCustomSpan";
|
||||
import { AccentColor, MainColor } from "@/constants/color-palet";
|
||||
import { ICON_SIZE_XLARGE } from "@/constants/constans-value";
|
||||
import { apiAdminUserAccessGetAll } from "@/service/api-admin/api-admin-user-access";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { Admin_ScreenSuperAdmin } from "@/screens/Admin/Super-Admin/ScreenSuperAdmin";
|
||||
|
||||
import { router, useFocusEffect } from "expo-router";
|
||||
import _ from "lodash";
|
||||
import { useCallback, useState } from "react";
|
||||
|
||||
export default function SuperAdmin_ListUser() {
|
||||
const [listData, setListData] = useState<any[] | null>(null);
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
onLoadData();
|
||||
}, [search])
|
||||
);
|
||||
|
||||
const onLoadData = async () => {
|
||||
try {
|
||||
const response = await apiAdminUserAccessGetAll({
|
||||
search: search,
|
||||
category: "all-role",
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
setListData(response.data);
|
||||
}
|
||||
} catch (error) {
|
||||
console.log("[ERROR LOAD DATA]", error);
|
||||
}
|
||||
};
|
||||
|
||||
const rightComponent = () => {
|
||||
return (
|
||||
<>
|
||||
<SearchInput
|
||||
containerStyle={{ width: "100%", marginBottom: 0 }}
|
||||
placeholder="Cari Username"
|
||||
onChangeText={(text) => setSearch(text)}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<ViewWrapper
|
||||
headerComponent={
|
||||
<AdminComp_BoxTitle
|
||||
title={"Super Admin"}
|
||||
rightComponent={rightComponent()}
|
||||
/>
|
||||
}
|
||||
>
|
||||
<GridViewCustomSpan
|
||||
span1={2}
|
||||
span2={5}
|
||||
span3={5}
|
||||
component1={
|
||||
<TextCustom align="center" bold>
|
||||
Aksi
|
||||
</TextCustom>
|
||||
}
|
||||
component2={
|
||||
<TextCustom bold>
|
||||
Username
|
||||
</TextCustom>
|
||||
}
|
||||
component3={
|
||||
<TextCustom align="center" bold>
|
||||
Role
|
||||
</TextCustom>
|
||||
}
|
||||
/>
|
||||
|
||||
<Divider />
|
||||
|
||||
<StackCustom>
|
||||
{_.isEmpty(listData) ? (
|
||||
<TextCustom align="center" color="gray" size={"small"}>
|
||||
Tidak ada data
|
||||
</TextCustom>
|
||||
) : (
|
||||
listData?.map((item: any, index: number) => (
|
||||
<GridViewCustomSpan
|
||||
key={index}
|
||||
span1={2}
|
||||
span2={5}
|
||||
span3={5}
|
||||
component1={
|
||||
<CenterCustom>
|
||||
<Ionicons
|
||||
onPress={() =>
|
||||
router.push(`/admin/super-admin/${item?.id}`)
|
||||
}
|
||||
name="open"
|
||||
size={ICON_SIZE_XLARGE}
|
||||
color={MainColor.yellow}
|
||||
/>
|
||||
</CenterCustom>
|
||||
|
||||
// <ButtonCustom
|
||||
// onPress={() =>
|
||||
// router.push(`/admin/super-admin/${item?.id}`)
|
||||
// }
|
||||
// >
|
||||
// Detail
|
||||
// </ButtonCustom>
|
||||
}
|
||||
component2={
|
||||
<TextCustom bold truncate>
|
||||
{item?.username || "-"}
|
||||
</TextCustom>
|
||||
}
|
||||
component3={
|
||||
<CenterCustom>
|
||||
{item?.masterUserRoleId === "2" ? (
|
||||
<BadgeCustom color={AccentColor.blue}>Admin</BadgeCustom>
|
||||
) : (
|
||||
<BadgeCustom color={AccentColor.softblue}>
|
||||
User
|
||||
</BadgeCustom>
|
||||
)}
|
||||
</CenterCustom>
|
||||
}
|
||||
style3={{ alignItems: "center", justifyContent: "center" }}
|
||||
/>
|
||||
))
|
||||
)}
|
||||
</StackCustom>
|
||||
</ViewWrapper>
|
||||
</>
|
||||
);
|
||||
export default function AdminSuperAdmin() {
|
||||
return <Admin_ScreenSuperAdmin />;
|
||||
}
|
||||
|
||||
122
screens/Admin/Super-Admin/ScreenSuperAdmin.tsx
Normal file
122
screens/Admin/Super-Admin/ScreenSuperAdmin.tsx
Normal file
@@ -0,0 +1,122 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import {
|
||||
BadgeCustom,
|
||||
CenterCustom,
|
||||
Grid,
|
||||
OS_Wrapper,
|
||||
SearchInput,
|
||||
StackCustom,
|
||||
TextCustom,
|
||||
} from "@/components";
|
||||
import AdminBasicBox from "@/components/_ShareComponent/Admin/AdminBasicBox";
|
||||
import AdminComp_BoxTitle from "@/components/_ShareComponent/Admin/BoxTitlePage";
|
||||
import { AccentColor, MainColor } from "@/constants/color-palet";
|
||||
import { PAGINATION_DEFAULT_TAKE } from "@/constants/constans-value";
|
||||
import { createPaginationComponents } from "@/helpers/paginationHelpers";
|
||||
import { usePagination } from "@/hooks/use-pagination";
|
||||
import { apiAdminUserAccessGetAll } from "@/service/api-admin/api-admin-user-access";
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { router, useFocusEffect } from "expo-router";
|
||||
import { useCallback, useState } from "react";
|
||||
import { RefreshControl } from "react-native";
|
||||
|
||||
export function Admin_ScreenSuperAdmin() {
|
||||
const [search, setSearch] = useState("");
|
||||
|
||||
const pagination = usePagination({
|
||||
fetchFunction: async (page, searchQuery) => {
|
||||
return await apiAdminUserAccessGetAll({
|
||||
search: searchQuery || "",
|
||||
category: "all-role",
|
||||
page: String(page),
|
||||
});
|
||||
},
|
||||
pageSize: PAGINATION_DEFAULT_TAKE,
|
||||
searchQuery: search,
|
||||
dependencies: [],
|
||||
onError: (error) => {
|
||||
console.log("Error fetching super admin data", error);
|
||||
},
|
||||
});
|
||||
|
||||
const { ListEmptyComponent, ListFooterComponent } =
|
||||
createPaginationComponents({
|
||||
loading: pagination.loading,
|
||||
refreshing: pagination.refreshing,
|
||||
listData: pagination.listData,
|
||||
searchQuery: search,
|
||||
emptyMessage: "Tidak ada data pengguna",
|
||||
emptySearchMessage: "Tidak ada hasil pencarian",
|
||||
skeletonCount: PAGINATION_DEFAULT_TAKE,
|
||||
skeletonHeight: 100,
|
||||
isInitialLoad: pagination.isInitialLoad,
|
||||
});
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
pagination.onRefresh();
|
||||
}, []),
|
||||
);
|
||||
|
||||
const rightComponent = () => {
|
||||
return (
|
||||
<SearchInput
|
||||
containerStyle={{ width: "100%", marginBottom: 0 }}
|
||||
placeholder="Cari Username"
|
||||
onChangeText={(text) => setSearch(text)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
const renderItem = ({ item, index }: { item: any; index: number }) => (
|
||||
<AdminBasicBox
|
||||
key={index}
|
||||
onPress={() => router.push(`/admin/super-admin/${item?.id}`)}
|
||||
style={{ marginHorizontal: 10, marginVertical: 5 }}
|
||||
>
|
||||
<Grid>
|
||||
<Grid.Col span={8}>
|
||||
<StackCustom gap={"xs"}>
|
||||
<TextCustom bold truncate>
|
||||
{item?.username || "-"}
|
||||
</TextCustom>
|
||||
</StackCustom>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={4} style={{ alignItems: "flex-end" }}>
|
||||
<CenterCustom>
|
||||
{item?.masterUserRoleId === "2" ? (
|
||||
<BadgeCustom color={AccentColor.blue}>Admin</BadgeCustom>
|
||||
) : (
|
||||
<BadgeCustom color={AccentColor.softblue}>User</BadgeCustom>
|
||||
)}
|
||||
</CenterCustom>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
</AdminBasicBox>
|
||||
);
|
||||
|
||||
return (
|
||||
<OS_Wrapper
|
||||
headerComponent={
|
||||
<AdminComp_BoxTitle
|
||||
title="Super Admin"
|
||||
rightComponent={rightComponent()}
|
||||
/>
|
||||
}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={pagination.refreshing}
|
||||
onRefresh={pagination.onRefresh}
|
||||
tintColor={MainColor.yellow}
|
||||
colors={[MainColor.yellow]}
|
||||
/>
|
||||
}
|
||||
renderItem={renderItem}
|
||||
listData={pagination.listData}
|
||||
onEndReached={pagination.loadMore}
|
||||
ListEmptyComponent={ListEmptyComponent}
|
||||
ListFooterComponent={ListFooterComponent}
|
||||
hideFooter
|
||||
/>
|
||||
);
|
||||
}
|
||||
148
screens/Admin/Super-Admin/ScreenSuperAdminDetail.tsx
Normal file
148
screens/Admin/Super-Admin/ScreenSuperAdminDetail.tsx
Normal file
@@ -0,0 +1,148 @@
|
||||
/* eslint-disable react-hooks/exhaustive-deps */
|
||||
import {
|
||||
BoxButtonOnFooter,
|
||||
ButtonCustom,
|
||||
LoaderCustom,
|
||||
OS_Wrapper,
|
||||
StackCustom,
|
||||
TextCustom,
|
||||
} from "@/components";
|
||||
import AdminBackButtonAntTitle from "@/components/_ShareComponent/Admin/BackButtonAntTitle";
|
||||
import GridTwoView from "@/components/_ShareComponent/GridTwoView";
|
||||
import { useAuth } from "@/hooks/use-auth";
|
||||
import {
|
||||
apiAdminUserAccessGetById,
|
||||
apiAdminUserAccessUpdateStatus,
|
||||
} from "@/service/api-admin/api-admin-user-access";
|
||||
import { router, useFocusEffect, useLocalSearchParams } from "expo-router";
|
||||
import { useCallback, useState } from "react";
|
||||
import { RefreshControl } from "react-native";
|
||||
import Toast from "react-native-toast-message";
|
||||
|
||||
export function Admin_ScreenSuperAdminDetail() {
|
||||
const { user } = useAuth();
|
||||
const { id } = useLocalSearchParams();
|
||||
const [data, setData] = useState<any | null>(null);
|
||||
const [loadData, setLoadData] = useState(false);
|
||||
const [isLoading, setLoading] = useState(false);
|
||||
|
||||
useFocusEffect(
|
||||
useCallback(() => {
|
||||
onLoadData();
|
||||
}, [id]),
|
||||
);
|
||||
|
||||
const onLoadData = async () => {
|
||||
try {
|
||||
setLoadData(true);
|
||||
const response = await apiAdminUserAccessGetById({ id: id as string });
|
||||
|
||||
setData(response.data);
|
||||
} catch (error) {
|
||||
console.log("[ERROR LOAD DATA]", error);
|
||||
} finally {
|
||||
setLoadData(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handlerSubmit = async () => {
|
||||
if (!user?.id) {
|
||||
Toast.show({
|
||||
type: "error",
|
||||
text1: "User tidak ditemukan",
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await apiAdminUserAccessUpdateStatus({
|
||||
id: id as string,
|
||||
role: data?.masterUserRoleId === "2" ? "user" : "admin",
|
||||
category: "role",
|
||||
});
|
||||
|
||||
if (!response.success) {
|
||||
Toast.show({
|
||||
type: "error",
|
||||
text1: "Update role gagal",
|
||||
});
|
||||
return;
|
||||
}
|
||||
Toast.show({
|
||||
type: "success",
|
||||
text1: "Update role berhasil",
|
||||
});
|
||||
router.back();
|
||||
} catch (error) {
|
||||
console.log("[ERROR UPDATE STATUS]", error);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<OS_Wrapper
|
||||
headerComponent={<AdminBackButtonAntTitle title={`Detail User`} />}
|
||||
footerComponent={
|
||||
data && (
|
||||
<BoxButtonOnFooter>
|
||||
<ButtonCustom
|
||||
isLoading={isLoading}
|
||||
backgroundColor={
|
||||
data?.masterUserRoleId === "2" ? "red" : "green"
|
||||
}
|
||||
textColor={"white"}
|
||||
onPress={handlerSubmit}
|
||||
>
|
||||
{data?.masterUserRoleId === "2"
|
||||
? "Hapus akses admin"
|
||||
: "Tambah sebagai admin"}
|
||||
</ButtonCustom>
|
||||
</BoxButtonOnFooter>
|
||||
)
|
||||
}
|
||||
refreshControl={
|
||||
<RefreshControl
|
||||
refreshing={loadData}
|
||||
onRefresh={onLoadData}
|
||||
tintColor="#E1B525"
|
||||
colors={["#E1B525"]}
|
||||
/>
|
||||
}
|
||||
>
|
||||
{loadData ? (
|
||||
<LoaderCustom />
|
||||
) : (
|
||||
<StackCustom>
|
||||
{listData(data && data)?.map((item: any, index: number) => (
|
||||
<GridTwoView
|
||||
key={index}
|
||||
spanLeft={4}
|
||||
spanRight={8}
|
||||
leftItem={<TextCustom bold>{item?.label}</TextCustom>}
|
||||
rightItem={<TextCustom>{item?.value}</TextCustom>}
|
||||
/>
|
||||
))}
|
||||
</StackCustom>
|
||||
)}
|
||||
</OS_Wrapper>
|
||||
</>
|
||||
);
|
||||
}
|
||||
|
||||
const listData = (data: any) => [
|
||||
{
|
||||
label: "Username",
|
||||
value: (data && data?.username) || "-",
|
||||
},
|
||||
{
|
||||
label: "Role",
|
||||
value: data && data?.masterUserRoleId === "2" ? "Admin" : "User",
|
||||
},
|
||||
{
|
||||
label: "Nomor",
|
||||
value: (data && `+${data?.nomor}`) || "-",
|
||||
},
|
||||
];
|
||||
Reference in New Issue
Block a user