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 { BigButton, Loader } from 'components/core';
import { useNavigation } from '@react-navigation/core';
......@@ -18,15 +19,34 @@ const ClientListAdmin: FC = () => {
const navigation = useNavigation();
const { isLoading, data: clients = [] } = useApi(retrieveClientListApi);
const { download } = useDownloadFiles(getAbsoluteUrl('exportcsv'));
const [searchedText, setSearchedText] = useState('');
const updateSearch = (search: string) => {
setSearchedText(search);
};
if (isLoading) {
return <Loader />;
}
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}>
{clients.map((client, idx) => (
{clients
.filter((c) =>
c.user.name.toLowerCase().includes(searchedText.toLowerCase()),
)
.map((client, idx) => (
<ClientCardNutritionist
key={idx}
clientName={client.user.name}
......@@ -45,7 +65,6 @@ const ClientListAdmin: FC = () => {
/>
))}
</ScrollView>
<Section>
<BigButton title="Download CSV" onPress={download} />
</Section>
......@@ -55,6 +74,19 @@ const ClientListAdmin: FC = () => {
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 ClientListAdmin;
import React, { FC } from 'react';
import { ScrollView } from 'react-native';
import React, { FC, useState } from 'react';
import { SearchBar } from 'react-native-elements';
import { ScrollView, View, StyleSheet, Dimensions } from 'react-native';
import { layoutStyles } from 'styles';
import { ClientCardNutritionist } from './components';
import { useNavigation } from '@react-navigation/native';
......@@ -12,6 +13,11 @@ import { UserRole } from 'services/auth/models';
const ClientListNutritionist: FC = () => {
const navigation = useNavigation();
const { isLoading, data: clients = [] } = useApi(retrieveClientListApi);
const [searchedText, setSearchedText] = useState('');
const updateSearch = (search: string) => {
setSearchedText(search);
};
if (isLoading) {
return <Loader />;
......@@ -20,8 +26,23 @@ const ClientListNutritionist: FC = () => {
return <EmptyDataPage text="Belum ada klien" />;
}
return (
<ScrollView contentContainerStyle={layoutStyles}>
{clients.map((client, idx) => (
<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}>
{clients
.filter((c) =>
c.user.name.toLowerCase().includes(searchedText.toLowerCase()),
)
.map((client, idx) => (
<ClientCardNutritionist
key={idx}
clientName={client.user.name}
......@@ -40,7 +61,25 @@ const ClientListNutritionist: FC = () => {
/>
))}
</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;
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