Fakultas Ilmu Komputer UI

Commit ebb65e14 authored by Kefas Satrio Bangkit Solidedantyo's avatar Kefas Satrio Bangkit Solidedantyo
Browse files

Merge branch 'client-list-search' into 'staging'

client list search

See merge request !59
parents bb5ab84a 62e81662
Pipeline #79267 failed with stages
in 45 minutes and 51 seconds
import React, { FC } from 'react'; import React, { FC, useState } from 'react';
import { SearchBar } from 'react-native-elements';
import { ScrollView } from 'react-native-gesture-handler'; import { ScrollView } from 'react-native-gesture-handler';
import { BigButton, Loader } from 'components/core'; import { BigButton, Loader } from 'components/core';
import { useNavigation } from '@react-navigation/core'; import { useNavigation } from '@react-navigation/core';
...@@ -18,34 +19,52 @@ const ClientListAdmin: FC = () => { ...@@ -18,34 +19,52 @@ const ClientListAdmin: FC = () => {
const navigation = useNavigation(); const navigation = useNavigation();
const { isLoading, data: clients = [] } = useApi(retrieveClientListApi); const { isLoading, data: clients = [] } = useApi(retrieveClientListApi);
const { download } = useDownloadFiles(getAbsoluteUrl('exportcsv')); const { download } = useDownloadFiles(getAbsoluteUrl('exportcsv'));
const [searchedText, setSearchedText] = useState('');
const updateSearch = (search: string) => {
setSearchedText(search);
};
if (isLoading) { if (isLoading) {
return <Loader />; return <Loader />;
} }
return ( return (
<View style={layoutStyles}> <View style={[layoutStyles, styles.listContainer]}>
<SearchBar
inputStyle={styles.backgroundWhite}
inputContainerStyle={styles.backgroundWhite}
rightIconContainerStyle={styles.backgroundWhite}
leftIconContainerStyle={styles.backgroundWhite}
containerStyle={styles.searchContainer}
onChangeText={updateSearch}
placeholder="Cari nama klien..."
value={searchedText}
/>
<ScrollView style={styles.container}> <ScrollView style={styles.container}>
{clients.map((client, idx) => ( {clients
<ClientCardNutritionist .filter((c) =>
key={idx} c.user.name.toLowerCase().includes(searchedText.toLowerCase()),
clientName={client.user.name} )
onPressClientProfile={() => { .map((client, idx) => (
navigation.navigate(ROUTES.clientProfileAdmin, { <ClientCardNutritionist
id: client.diet_questionnaire_id, key={idx}
role: UserRole.ADMIN, clientName={client.user.name}
}); onPressClientProfile={() => {
}} navigation.navigate(ROUTES.clientProfileAdmin, {
onPressClientDietReport={() => { id: client.diet_questionnaire_id,
navigation.navigate(ROUTES.clientDietReportAdmin, {}); role: UserRole.ADMIN,
}} });
onPressClientChat={() => { }}
navigation.navigate(ROUTES.clientChatAdmin, {}); onPressClientDietReport={() => {
}} navigation.navigate(ROUTES.clientDietReportAdmin, {});
/> }}
))} onPressClientChat={() => {
navigation.navigate(ROUTES.clientChatAdmin, {});
}}
/>
))}
</ScrollView> </ScrollView>
<Section> <Section>
<BigButton title="Download CSV" onPress={download} /> <BigButton title="Download CSV" onPress={download} />
</Section> </Section>
...@@ -55,6 +74,19 @@ const ClientListAdmin: FC = () => { ...@@ -55,6 +74,19 @@ const ClientListAdmin: FC = () => {
const styles = StyleSheet.create({ const styles = StyleSheet.create({
container: { height: Dimensions.get('window').height * 0.83 }, container: { height: Dimensions.get('window').height * 0.83 },
listContainer: {
position: 'relative',
flex: 1,
},
searchContainer: {
backgroundColor: 'white',
borderWidth: 1,
borderRadius: 5,
marginBottom: 20,
justifyContent: 'center',
height: 58,
},
backgroundWhite: { backgroundColor: 'white' },
}); });
export default ClientListAdmin; export default ClientListAdmin;
import React, { FC } from 'react'; import React, { FC, useState } from 'react';
import { ScrollView } from 'react-native'; import { SearchBar } from 'react-native-elements';
import { ScrollView, View, StyleSheet, Dimensions } from 'react-native';
import { layoutStyles } from 'styles'; import { layoutStyles } from 'styles';
import { ClientCardNutritionist } from './components'; import { ClientCardNutritionist } from './components';
import { useNavigation } from '@react-navigation/native'; import { useNavigation } from '@react-navigation/native';
...@@ -12,6 +13,11 @@ import { UserRole } from 'services/auth/models'; ...@@ -12,6 +13,11 @@ import { UserRole } from 'services/auth/models';
const ClientListNutritionist: FC = () => { const ClientListNutritionist: FC = () => {
const navigation = useNavigation(); const navigation = useNavigation();
const { isLoading, data: clients = [] } = useApi(retrieveClientListApi); const { isLoading, data: clients = [] } = useApi(retrieveClientListApi);
const [searchedText, setSearchedText] = useState('');
const updateSearch = (search: string) => {
setSearchedText(search);
};
if (isLoading) { if (isLoading) {
return <Loader />; return <Loader />;
...@@ -20,27 +26,60 @@ const ClientListNutritionist: FC = () => { ...@@ -20,27 +26,60 @@ const ClientListNutritionist: FC = () => {
return <EmptyDataPage text="Belum ada klien" />; return <EmptyDataPage text="Belum ada klien" />;
} }
return ( return (
<ScrollView contentContainerStyle={layoutStyles}> <View style={[layoutStyles, styles.listContainer]}>
{clients.map((client, idx) => ( <SearchBar
<ClientCardNutritionist inputStyle={styles.backgroundWhite}
key={idx} inputContainerStyle={styles.backgroundWhite}
clientName={client.user.name} rightIconContainerStyle={styles.backgroundWhite}
onPressClientProfile={() => { leftIconContainerStyle={styles.backgroundWhite}
navigation.navigate(ROUTES.clientProfileNutritionist, { containerStyle={styles.searchContainer}
id: client.diet_questionnaire_id, onChangeText={updateSearch}
role: UserRole.NUTRITIONIST, placeholder="Cari nama klien..."
}); value={searchedText}
}} />
onPressClientDietReport={() => { <ScrollView style={styles.container}>
navigation.navigate(ROUTES.clientDietReportNutritionist, {}); {clients
}} .filter((c) =>
onPressClientChat={() => { c.user.name.toLowerCase().includes(searchedText.toLowerCase()),
navigation.navigate(ROUTES.clientChatNutritionist, {}); )
}} .map((client, idx) => (
/> <ClientCardNutritionist
))} key={idx}
</ScrollView> clientName={client.user.name}
onPressClientProfile={() => {
navigation.navigate(ROUTES.clientProfileNutritionist, {
id: client.diet_questionnaire_id,
role: UserRole.NUTRITIONIST,
});
}}
onPressClientDietReport={() => {
navigation.navigate(ROUTES.clientDietReportNutritionist, {});
}}
onPressClientChat={() => {
navigation.navigate(ROUTES.clientChatNutritionist, {});
}}
/>
))}
</ScrollView>
</View>
); );
}; };
const styles = StyleSheet.create({
container: { height: Dimensions.get('window').height * 0.83 },
listContainer: {
position: 'relative',
flex: 1,
},
searchContainer: {
backgroundColor: 'white',
borderWidth: 1,
borderRadius: 5,
marginBottom: 20,
justifyContent: 'center',
height: 58,
},
backgroundWhite: { backgroundColor: 'white' },
});
export default ClientListNutritionist; export default ClientListNutritionist;
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