Fakultas Ilmu Komputer UI

Commit 5d70c22e authored by Bagus Prabowo's avatar Bagus Prabowo
Browse files

Merge branch 'create-ecosystem-screen' into 'PBI-13-Create_Ecosystem_Page'

Create Ecosystem Screen

See merge request !89
parents 6d49cb4c b168d869
Pipeline #86216 passed with stage
in 10 minutes and 45 seconds
import React from "react";
import { View, Text, StyleSheet } from "react-native";
import PlainForm from "../Forms/PlainForm";
import Spacer from "../Spacer/Spacer";
import DropdownForm from "../Forms/DropdownForm";
import Colors from "../../constants/Colors";
type props = {
ecosystemName: string;
setEcosystemName: React.Dispatch<React.SetStateAction<string>>;
ecosystemDetails: string;
setEcosystemDetails: React.Dispatch<React.SetStateAction<string>>;
ecosystemCategory: string;
setEcosystemCategory: React.Dispatch<React.SetStateAction<string>>;
items: any[];
setItems: React.Dispatch<React.SetStateAction<any[]>>;
};
const TopForms = ({
ecosystemName,
setEcosystemName,
ecosystemDetails,
setEcosystemDetails,
ecosystemCategory,
setEcosystemCategory,
items,
setItems,
}: props) => {
return (
<View style={styles.componentWrapper}>
<View style={styles.componentWrapper}>
<Text style={styles.title}>Buat Ekosistem Bisnis</Text>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<Text style={styles.subtitle}>
Silahkan masukkan data berikut untuk membuat ekosistem bisnis
</Text>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<PlainForm
formTitle="Nama Ekosistem Bisnis"
placeholder="Masukkan Nama Ekosistem Bisnis"
text={ecosystemName}
setText={setEcosystemName}
errorMessage="Silahkan masukkan nama ekosistem"
/>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<PlainForm
formTitle="Deskripsi Ekosistem Bisnis"
placeholder="Masukkan Deskripsi Ekosistem Bisnis"
text={ecosystemDetails}
setText={setEcosystemDetails}
errorMessage="Silahkan masukkan deskripsi ekosistem bisnis"
/>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<View style={styles.componentWrapper}>
<Text style={styles.componentTitle}>Kategori Ekosistem Bisnis</Text>
</View>
<Spacer variant="m" />
<DropdownForm
value={ecosystemCategory}
setValue={setEcosystemCategory}
items={items}
setItems={setItems}
formPlaceholder="Pilih Kategori Ekosistem Binis"
searchPlaceholder="Cari Kategori Bisnis"
/>
</View>
<Spacer variant="xl" />
<View style={styles.componentWrapper}>
<Text style={styles.componentTitleBold}>Anggota Supplier</Text>
</View>
<Spacer variant="m" />
</View>
);
};
const styles = StyleSheet.create({
container: {
backgroundColor: Colors.background,
padding: 24,
},
componentWrapper: {
width: "100%",
},
title: {
fontSize: 32,
fontWeight: "500",
color: Colors.text.title,
},
subtitle: {
fontSize: 20,
fontWeight: "300",
color: Colors.text.subtitle,
},
listText: {
fontSize: 14,
fontWeight: "300",
color: Colors.text.link,
},
warningText: {
fontSize: 14,
fontWeight: "bold",
color: Colors.button.warning.bg,
},
membersCount: {
fontSize: 14,
fontWeight: "300",
color: Colors.text.body,
},
componentTitle: {
fontSize: 14,
width: "100%",
color: Colors.text.subtitle,
fontWeight: "300",
},
componentTitleBold: {
fontSize: 14,
width: "100%",
color: Colors.text.subtitle,
fontWeight: "bold",
},
});
export default TopForms;
import React from "react";
import { StyleSheet, Text, View } from "react-native";
import { Alert, StyleSheet, Text, View } from "react-native";
import { AlphabetList } from "react-native-section-alphabet-list";
import PlainButton from "../button/PlainButton";
import Colors from "../../constants/Colors";
import { IData, ISectionData } from "../../types/alphabetGroupList";
import { useNavigation } from "@react-navigation/core";
import { ecosystemItem } from "../../types/ListItems";
type props = {
data: IData[];
fromScreen?: string;
forGroup?: string;
ecosystemCategories?: ecosystemItem;
};
const AlphabetGroupList = ({ data }: props) => {
const AlphabetGroupList = ({
data,
fromScreen,
forGroup,
ecosystemCategories,
}: props) => {
const nav = useNavigation();
return (
<View style={styles.container}>
<AlphabetList
......@@ -17,7 +29,28 @@ const AlphabetGroupList = ({ data }: props) => {
indexLetterStyle={styles.indexLetter}
renderCustomItem={(item: IData) => (
<View style={styles.listItemContainer}>
<PlainButton text={item.value} onPress={() => {}} />
<PlainButton
text={item.value}
onPress={() => {
if (fromScreen === "CreateEcosystem") {
if (ecosystemCategories[item.key] != null) {
Alert.alert(
"Kategori Sudah Ditambahkan",
"Silahkan pilih kategori lain"
);
} else {
nav.navigate("CreateEcosystem", {
screen: "CreateEcosystemScreen",
params: {
id: item.key,
name: item.value,
forGroup: forGroup,
},
});
}
}
}}
/>
</View>
)}
renderCustomSectionHeader={(section: ISectionData) => (
......
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import React from "react";
import CreateEcosystemScreen from "../screens/CreateEcosystemScreen";
import { BusinessCategoryScreen } from "../screens/ecosystem";
import { CreateEcosystemStackParamList } from "../types/navigation/CreateEcosystemStack";
const CreateEcosystemStack =
createNativeStackNavigator<CreateEcosystemStackParamList>();
const CreateEcosystemStackNavigator = () => {
return (
<CreateEcosystemStack.Navigator initialRouteName="CreateEcosystemScreen">
<CreateEcosystemStack.Screen
name="CreateEcosystemScreen"
component={CreateEcosystemScreen}
options={{ headerShown: false }}
/>
<CreateEcosystemStack.Screen
name="BusinessCategory"
component={BusinessCategoryScreen}
options={{ title: "Ekosistem Saya" }}
/>
</CreateEcosystemStack.Navigator>
);
};
export default CreateEcosystemStackNavigator;
......@@ -4,7 +4,7 @@ import BusinessEcosystemScreen from "../screens/ecosystem/BusinessEcosystemScree
import { EcosystemStackParamList } from "../types/navigation/EcosystemStack";
import {
BusinessCategoryScreen,
BusinessListScreen,
UserListScreen,
EcosystemDetailScreen,
EcosystemListScreen,
EcosystemMapScreen,
......@@ -52,8 +52,8 @@ const EcosystemStackNavigator = () => {
options={{ title: "Peta Ekosistem" }}
/>
<EcosystemStack.Screen
name="BusinessList"
component={BusinessListScreen}
name="UserList"
component={UserListScreen}
initialParams={{ headerTitle: "" }}
options={({ route }) => ({ title: route.params.headerTitle })}
/>
......
import React, { useEffect, useState } from "react";
import { createNativeStackNavigator } from "@react-navigation/native-stack";
import BottomTabNavigator from "./BottomTabNavigator";
import CreateEcosystemStackNavigator from "./CreateEcosystemStackNavigator";
import { RootStackParamList } from "../types/navigation";
import AuthStackNavigator from "./AuthStackNavigator";
import SuccessChangePasswordScreen from "../screens/SuccessChangePasswordScreen";
......@@ -56,18 +57,25 @@ const RootNavigator = () => {
<RootStack.Navigator>
{user.id === "" && (
<RootStack.Screen
name="Auth"
component={AuthStackNavigator}
name="CreateEcosystem"
component={CreateEcosystemStackNavigator}
options={{ headerShown: false }}
/>
)}
{user.id !== "" && (
{user.id === "" && (
<RootStack.Screen
name="MainTab"
component={BottomTabNavigator}
options={{ headerShown: false }}
/>
)}
{user.id === "" && (
<RootStack.Screen
name="Auth"
component={AuthStackNavigator}
options={{ headerShown: false }}
/>
)}
<RootStack.Screen
name="SuccessChangePassword"
component={SuccessChangePasswordScreen}
......
This diff is collapsed.
......@@ -6,8 +6,12 @@ import AlphabetGroupList from "../../components/GroupList/AlphabetGroupList";
import { useState, useEffect } from "react";
import { getCategoriesAsIData } from "../../helpers/alphabetConverter";
import { IData } from "react-native-section-alphabet-list";
import { CreateEcosystemStackScreenProps } from "../../types/navigation";
const BusinessCategoryScreen = () => {
const BusinessCategoryScreen = ({
route,
}: CreateEcosystemStackScreenProps<"BusinessCategory">) => {
const { fromScreen, forGroup, ecosystemCategories } = route.params;
const [data, setData] = useState<IData[]>([]);
useEffect(() => {
getCategoriesAsIData().then((res) => setData(res));
......@@ -15,7 +19,12 @@ const BusinessCategoryScreen = () => {
return (
<View style={styles.container}>
<AlphabetGroupList data={data} />
<AlphabetGroupList
data={data}
fromScreen={fromScreen}
forGroup={forGroup}
ecosystemCategories={ecosystemCategories}
/>
</View>
);
};
......
......@@ -24,7 +24,9 @@ const BusinessEcosystemScreen = () => {
colors="primary"
text="Buat Ekosistem Bisnis"
onPress={() => {
nav.navigate("CreateBusinessEcosystem");
nav.navigate("CreateEcosystem", {
screen: "CreateEcosystem",
});
}}
/>
<Spacer variant="xl" />
......
......@@ -3,7 +3,7 @@ import { StyleSheet } from "react-native";
import { Text, View } from "../../components/Themed";
import Colors from "../../constants/Colors";
const BusinessListScreen = () => {
const UserListScreen = () => {
return (
<View style={styles.container}>
<View>
......@@ -22,4 +22,4 @@ const styles = StyleSheet.create({
},
});
export default BusinessListScreen;
export default UserListScreen;
import BusinessCategoryScreen from "./BusinessCategoryScreen";
import BusinessListScreen from "./BusinessListScreen";
import UserListScreen from "./UserListScreen";
import EcosystemDetailScreen from "./EcosystemDetailScreen";
import EcosystemListScreen from "./EcosystemListScreen";
import EcosystemMapScreen from "./EcosystemMapScreen";
......@@ -7,7 +7,7 @@ import RecommendedEcosystemScreen from "./RecommendedEcosystemScreen";
export {
BusinessCategoryScreen,
BusinessListScreen,
UserListScreen,
EcosystemDetailScreen,
EcosystemListScreen,
EcosystemMapScreen,
......
export type ecosystemItem = {
[idCategory: string]: {
name: string;
members: {
[idMember: string]: string;
};
};
};
/**
* Learn more about using TypeScript with React Navigation:
* https://reactnavigation.org/docs/typescript/
*/
import { NativeStackScreenProps } from "@react-navigation/native-stack";
import { ecosystemItem } from "../ListItems";
export type CreateEcosystemStackParamList = {
BusinessCategory: {
fromScreen?: string;
forGroup?: string;
ecosystemCategories?: ecosystemItem;
};
CreateEcosystemScreen: { id?: string; name?: string; forGroup?: string };
};
export type CreateEcosystemStackScreenProps<
Screen extends keyof CreateEcosystemStackParamList
> = NativeStackScreenProps<CreateEcosystemStackParamList, Screen>;
......@@ -10,7 +10,7 @@ export type EcosystemStackParamList = {
BusinessCategory: undefined;
EcosystemList: { headerTitle: string };
EcosystemMap: undefined;
BusinessList: { headerTitle: string };
UserList: { headerTitle: string };
EcosystemDetails: { headerTitle: string };
Recommended: { headerTitle: string; toFetch: string };
};
......
......@@ -9,6 +9,7 @@ import {
AuthStackParamList,
EcosystemStackParamList,
ProfileStackParamList,
CreateEcosystemStackParamList,
} from ".";
import { RootTabParamList } from "./RootTab";
......@@ -20,7 +21,7 @@ export type RootStackParamList = {
Modal: undefined;
NotFound: undefined;
SuccessChangePassword: undefined;
CreateBusinessEcosystem: undefined;
CreateEcosystem: NavigatorScreenParams<CreateEcosystemStackParamList>;
};
export type RootStackScreenProps<Screen extends keyof RootStackParamList> =
......
......@@ -11,3 +11,4 @@ export * from "./RootTab";
export * from "./AuthStack";
export * from "./ProfileStack";
export * from "./EcosystemStack";
export * from "./CreateEcosystemStack";
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