wibu/mobile-darmasaba
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

upd: project

Browse Source 
Deskripsi:
- ui detail project
- ui create project
- ui edit tambah tugas
- ui edit tambah file
- ui edit judul project
- ui cancel project

No Issues
This commit is contained in:
amel
2025-03-06 15:13:43 +08:00
parent 8806f33a8d
commit c07be165ec
15 changed files with 371 additions and 17 deletions
Download Patch File Download Diff File Expand all files Collapse all files

59
app/(application)/project/[id]/add-file.tsx Normal file
View File

@@ -0,0 +1,59 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi"
import BorderBottomItem from "@/components/borderBottomItem"
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import ButtonSelect from "@/components/buttonSelect"
import Styles from "@/constants/Styles"
import { MaterialCommunityIcons } from "@expo/vector-icons"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
export default function ProjectAddFile() {
const { id } = useLocalSearchParams()
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Tambah File',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<ButtonSelect value="Upload File" />
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
<View style={[Styles.wrapPaper]}>
<BorderBottomItem
borderType="all"
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
title="image_pertama.jpg"
titleWeight="normal"
/>
<BorderBottomItem
borderType="all"
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
title="file_kedua.pdf"
titleWeight="normal"
/>
</View>
</View>
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menambahkan data?',
onPress: () => {
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
router.push('/project/4324')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

74
app/(application)/project/[id]/add-task.tsx Normal file
View File

@@ -0,0 +1,74 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi"
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import { InputForm } from "@/components/inputForm"
import Styles from "@/constants/Styles"
import dayjs from "dayjs"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { useState } from "react"
import { SafeAreaView, ScrollView, Text, ToastAndroid, View } from "react-native"
import DateTimePicker, { DateType, getDefaultStyles } from 'react-native-ui-datepicker';
export default function ProjectAddTask() {
const { id } = useLocalSearchParams()
const [range, setRange] = useState<{ startDate: DateType; endDate: DateType; }>({ startDate: undefined, endDate: undefined });
const defaultStyles = getDefaultStyles()
const from = range.startDate
? dayjs(range.startDate).format('MMM DD, YYYY')
: '';
const to = range.endDate ? dayjs(range.endDate).format('MMM DD, YYYY') : '';
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Tambah Tugas',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<View style={[Styles.wrapPaper, Styles.p10]}>
<DateTimePicker
mode="range"
startDate={range.startDate}
endDate={range.endDate}
onChange={(param) => setRange(param)}
styles={defaultStyles}
/>
</View>
<View style={[Styles.rowSpaceBetween, Styles.mv10]}>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Tanggal Mulai <Text style={Styles.cError}>*</Text></Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<Text style={{ textAlign: 'center' }}>{from}</Text>
</View>
</View>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Tanggal Berakhir <Text style={Styles.cError}>*</Text></Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<Text style={{ textAlign: 'center' }}>{to}</Text>
</View>
</View>
</View>
<InputForm label="Judul Tugas" type="default" placeholder="Judul Tugas" required bg="white" />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menambahkan data?',
onPress: () => {
ToastAndroid.show('Berhasil menambahkan data', ToastAndroid.SHORT)
router.push('/project/4324')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

39
app/(application)/project/[id]/cancel.tsx Normal file
View File

@@ -0,0 +1,39 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi"
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import { InputForm } from "@/components/inputForm"
import Styles from "@/constants/Styles"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
export default function ProjectCancel() {
const { id } = useLocalSearchParams()
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Pembatalan Kegiatan',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<InputForm label="Alasan Pembatalan" type="default" placeholder="Alasan Pembatalan" required bg="white" />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin membatalkan kegiatan? Pembatalan bersifat permanen',
onPress: () => {
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
router.push('/project/4324')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

39
app/(application)/project/[id]/edit.tsx Normal file
View File

@@ -0,0 +1,39 @@
import AlertKonfirmasi from "@/components/alertKonfirmasi"
import ButtonBackHeader from "@/components/buttonBackHeader"
import { ButtonForm } from "@/components/buttonForm"
import { InputForm } from "@/components/inputForm"
import Styles from "@/constants/Styles"
import { router, Stack, useLocalSearchParams } from "expo-router"
import { SafeAreaView, ScrollView, ToastAndroid, View } from "react-native"
export default function EditProject() {
const { id } = useLocalSearchParams()
return (
<SafeAreaView>
<Stack.Screen
options={{
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Edit Judul Kegiatan',
headerTitleAlign: 'center',
}}
/>
<ScrollView>
<View style={[Styles.p15, Styles.mb100]}>
<InputForm label="Judul Kegiatan" type="default" placeholder="Judul Kegiatan" required bg="white" />
<ButtonForm
text="SIMPAN"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin mengubah data?',
onPress: () => {
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
router.push('/project/4324')
}
})
}} />
</View>
</ScrollView>
</SafeAreaView>
)
}

6
app/(application)/project/[id]/index.tsx
View File

@@ -1,5 +1,7 @@
import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderRightProjectDetail from "@/components/project/headerProjectDetail";
import SectionFile from "@/components/sectionFile";
import SectionMember from "@/components/sectionMember";
import SectionProgress from "@/components/sectionProgress";
import SectionTanggalTugas from "@/components/sectionTanggalTugas";
import Styles from "@/constants/Styles";
@@ -19,9 +21,11 @@ export default function DetailProject() {
}}
/>
<ScrollView>
<View style={[Styles.p15]}>
<View style={[Styles.p15, Styles.mb100]}>
<SectionProgress text="Kemajuan Kegiatan 50%" />
<SectionTanggalTugas />
<SectionFile/>
<SectionMember/>
</View>
</ScrollView>
</SafeAreaView>

BIN
bun.lockb
View File

Binary file not shown.

7
components/borderBottomItem.tsx
View File

@@ -14,16 +14,17 @@ type Props = {
borderType: 'all' | 'bottom' | 'none'
leftBottomInfo?: React.ReactNode | string
rightBottomInfo?: React.ReactNode | string
titleWeight?: 'normal' | 'bold'
}
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo }: Props) {
export default function BorderBottomItem({ title, subtitle, icon, desc, onPress, rightTopInfo, borderType, leftBottomInfo, rightBottomInfo, titleWeight }: Props) {
return (
<Pressable style={[borderType == 'bottom' ? Styles.wrapItemBorderBottom : borderType == 'all' ? Styles.wrapItemBorderAll : Styles.wrapItemBorderNone]} onPressOut={onPress}>
<View style={[Styles.rowItemsCenter]}>
{icon}
<View style={[Styles.rowSpaceBetween, { width: '85%' }]}>
<View style={[Styles.ml10]}>
<Text style={[Styles.textDefaultSemiBold]}>{title}</Text>
<Text style={[titleWeight == 'normal' ? Styles.textDefault : Styles.textDefaultSemiBold]}>{title}</Text>
{
subtitle &&
typeof subtitle == "string"
@@ -41,7 +42,7 @@ export default function BorderBottomItem({ title, subtitle, icon, desc, onPress,
</View>
{desc && <Text style={[Styles.textDefault, Styles.mt05, { textAlign: 'justify' }]}>{desc}</Text>}
{
(leftBottomInfo || rightBottomInfo )&&
(leftBottomInfo || rightBottomInfo) &&
(
<View style={[Styles.rowSpaceBetween, Styles.mt10]}>
{

7
components/inputForm.tsx
View File

@@ -14,10 +14,11 @@ type Props = {
type: 'default' | 'visible-password' | 'numeric'
round?: boolean
width?: number
bg?: 'white' | 'transparent'
};
export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round, width }: Props) {
export function InputForm({ label, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round, width, bg }: Props) {
const lebar = Dimensions.get("window").width;
if (itemLeft != undefined || itemRight != undefined) {
@@ -37,7 +38,7 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
placeholder={placeholder}
keyboardType={type}
onChangeText={onChange}
style={{ width: width && lebar * width / 100 }}
style={{ width: width && lebar * width / 100, backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }}
/>
</View>
{error && (<Text style={[Styles.textInformation, Styles.cError]}>{errorText}</Text>)}
@@ -61,7 +62,7 @@ export function InputForm({ label, placeholder, onChange, info, error, errorText
<TextInput
placeholder={placeholder}
keyboardType={type}
style={[Styles.inputRoundForm, error && { borderColor: "red" }, round && Styles.round30]}
style={[Styles.inputRoundForm, error && { borderColor: "red" }, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }]}
onChangeText={onChange}
/>
{error && (<Text style={[Styles.textInformation, Styles.cError]}>{errorText}</Text>)}

53
components/itemSectionTanggalTugas.tsx Normal file
View File

@@ -0,0 +1,53 @@
import Styles from "@/constants/Styles";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Text, View } from "react-native";
type Props = {
done: boolean
title: string
dateStart: string
dateEnd: string
}
export default function ItemSectionTanggalTugas({ done, title, dateStart, dateEnd }: Props) {
return (
<View style={[Styles.mb15, { borderBottomColor: '#d6d8f6', borderBottomWidth: 1 }]}>
<View style={[Styles.rowItemsCenter]}>
{
done ?
<>
<MaterialCommunityIcons name="checkbox-marked-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
<Text style={[Styles.cGray]}>Selesai</Text>
</>
:
<>
<MaterialCommunityIcons name="checkbox-blank-circle-outline" size={22} color="gray" style={[Styles.mr10]} />
<Text style={[Styles.cGray]}>Belum Selesai</Text>
</>
}
</View>
<View style={[Styles.wrapPaper, Styles.mv10, Styles.p10]}>
<View style={[Styles.rowItemsCenter]}>
<MaterialCommunityIcons name="file-table-outline" size={25} color="black" style={[Styles.mr10]} />
<Text style={[Styles.textDefault]}>{title}</Text>
</View>
</View>
<View style={[Styles.rowSpaceBetween, Styles.mb15]}>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Tanggal Mulai</Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<Text style={{ textAlign: 'center' }}>{dateStart}</Text>
</View>
</View>
<View style={[{ width: '48%' }]}>
<Text style={[Styles.mb05]}>Tanggal Berakhir</Text>
<View style={[Styles.wrapPaper, Styles.p10]}>
<Text style={{ textAlign: 'center' }}>{dateEnd}</Text>
</View>
</View>
</View>
</View>
)
}

16
components/project/headerProjectDetail.tsx
View File

@@ -5,6 +5,7 @@ import { View } from "react-native"
import Styles from "@/constants/Styles"
import MenuItemRow from "../menuItemRow"
import { AntDesign, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router"
type Props = {
id: string | string[]
@@ -22,14 +23,16 @@ export default function HeaderRightProjectDetail({ id }: Props) {
icon={<AntDesign name="pluscircle" color="black" size={25} />}
title="Tambah Tugas"
onPress={() => {
setVisible(false)
router.push(`/project/${id}/add-task`)
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="file-plus" color="black" size={25} />}
title="Tambah File"
onPress={() => {
setVisible(false)
router.push(`/project/${id}/add-file`)
}}
/>
@@ -37,8 +40,8 @@ export default function HeaderRightProjectDetail({ id }: Props) {
icon={<MaterialIcons name="groups" color="black" size={25} />}
title="Tambah Anggota"
onPress={() => {
setVisible(false)
// router.push(`/discussion/member/${id}`)
// setVisible(false)
}}
/>
@@ -49,14 +52,15 @@ export default function HeaderRightProjectDetail({ id }: Props) {
title="Edit"
onPress={() => {
setVisible(false)
// router.push(`/discussion/edit/${id}`)
router.push(`/project/${id}/edit`)
}}
/>
<MenuItemRow
icon={<MaterialIcons name="close" color="black" size={25} />}
title="Batal"
onPress={() => {
setVisible(false)
router.push(`/project/${id}/cancel`)
}}
/>
</View>

26
components/sectionFile.tsx Normal file
View File

@@ -0,0 +1,26 @@
import Styles from "@/constants/Styles";
import { MaterialCommunityIcons } from "@expo/vector-icons";
import { Text, View } from "react-native";
import BorderBottomItem from "./borderBottomItem";
export default function SectionFile() {
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>File</Text>
<View style={[Styles.wrapPaper]}>
<BorderBottomItem
borderType="all"
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
title="image_pertama.jpg"
titleWeight="normal"
/>
<BorderBottomItem
borderType="all"
icon={<MaterialCommunityIcons name="file-outline" size={25} color="black" />}
title="file_kedua.pdf"
titleWeight="normal"
/>
</View>
</View>
)
}

45
components/sectionMember.tsx Normal file
View File

@@ -0,0 +1,45 @@
import Styles from "@/constants/Styles";
import { Image, Text, View } from "react-native";
import BorderBottomItem from "./borderBottomItem";
export default function SectionMember() {
return (
<View style={[Styles.mb15]}>
<View style={[Styles.rowSpaceBetween, Styles.mv05]}>
<Text style={[Styles.textDefaultSemiBold]}>Anggota</Text>
<Text style={[Styles.textDefault]}>Total 5 Anggota</Text>
</View>
<View style={[Styles.wrapPaper]}>
<BorderBottomItem
borderType="bottom"
icon={<Image source={require("../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
title="Amalia Dwi"
subtitle="Dinas - Bendahara"
rightTopInfo="Anggota"
/>
<BorderBottomItem
borderType="bottom"
icon={<Image source={require("../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
title="Amalia Dwi"
subtitle="Dinas - Bendahara"
rightTopInfo="Anggota"
/>
<BorderBottomItem
borderType="bottom"
icon={<Image source={require("../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
title="Amalia Dwi"
subtitle="Dinas - Bendahara"
rightTopInfo="Anggota"
/>
<BorderBottomItem
borderType="bottom"
icon={<Image source={require("../assets/images/user.jpeg")} style={[Styles.userProfileSmall]} />}
title="Amalia Dwi"
subtitle="Dinas - Bendahara"
rightTopInfo="Anggota"
/>
</View>
</View>
)
}

8
components/sectionTanggalTugas.tsx
View File

@@ -1,12 +1,14 @@
import Styles from "@/constants/Styles";
import { Text, View } from "react-native";
import ItemSectionTanggalTugas from "./itemSectionTanggalTugas";
export default function SectionTanggalTugas() {
return (
<View style={[Styles.mb15]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv10]}>Tanggal Dan Tugas</Text>
<View style={[Styles.mb15, Styles.mt10]}>
<Text style={[Styles.textDefaultSemiBold, Styles.mv05]}>Tanggal & Tugas</Text>
<View style={[Styles.wrapPaper]}>
<ItemSectionTanggalTugas done={false} title="Pertama" dateStart="12-03-2023" dateEnd="15-03-2023" />
<ItemSectionTanggalTugas done={true} title="Kedua" dateStart="15-03-2023" dateEnd="20-03-2023" />
</View>
</View>
)

7
constants/Styles.ts
View File

@@ -120,6 +120,9 @@ const Styles = StyleSheet.create({
p15: {
padding: 15
},
p10: {
padding: 10
},
round30: {
borderRadius: 30
},
@@ -172,7 +175,7 @@ const Styles = StyleSheet.create({
},
inputRoundForm: {
borderRadius: 10,
borderColor: 'gray',
borderColor: '#d6d8f6',
borderWidth: 1,
paddingVertical: 10,
paddingHorizontal: 15,
@@ -259,6 +262,8 @@ const Styles = StyleSheet.create({
padding: 15,
backgroundColor: 'white',
borderRadius: 10,
borderWidth: 1,
borderColor: '#d6d8f6',
},
contentItemCenter: {
justifyContent: 'center',

2
package.json
View File

@@ -18,6 +18,7 @@
"@expo/vector-icons": "^14.0.2",
"@react-navigation/bottom-tabs": "^7.2.0",
"@react-navigation/native": "^7.0.14",
"dayjs": "^1.11.13",
"expo": "~52.0.37",
"expo-blur": "~14.0.3",
"expo-constants": "~17.0.7",
@@ -45,6 +46,7 @@
"react-native-safe-area-context": "4.12.0",
"react-native-screens": "~4.4.0",
"react-native-svg": "15.8.0",
"react-native-ui-datepicker": "^3.0.5",
"react-native-web": "~0.19.13",
"react-native-webview": "13.12.5"
},