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

upd: diskusi umum

Browse Source 
Deskripsi:
- list diskusi umum
- filter diskusi
- pencarian diskusi
- detail diskusi
- kirim komentar pada diskusi umum

No Issues
This commit is contained in:
amel
2025-05-05 17:31:39 +08:00
parent 9756a05d2a
commit 1644bec261
7 changed files with 282 additions and 262 deletions
Download Patch File Download Diff File Expand all files Collapse all files

197
app/(application)/discussion/[id].tsx
View File

@@ -1,16 +1,82 @@
import BorderBottomItem from "@/components/borderBottomItem";
import ButtonBackHeader from "@/components/buttonBackHeader";
import HeaderRightDiscussionGeneralDetail from "@/components/discussion_general/headerDiscussionDetail";
import ImageUser from "@/components/imageNew";
import { InputForm } from "@/components/inputForm";
import LabelStatus from "@/components/labelStatus";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { apiGetDiscussionGeneralOne, apiSendDiscussionGeneralCommentar } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { Ionicons, MaterialIcons } from "@expo/vector-icons";
import { router, Stack, useLocalSearchParams } from "expo-router";
import { Image, ScrollView, Text, View } from "react-native";
import { useEffect, useState } from "react";
import { Pressable, ScrollView, Text, View } from "react-native";
import { useSelector } from "react-redux";
type Props = {
id: string
isActive: boolean
title: string
desc: string
status: number
createdAt: string
}
type PropsKomentar = {
id: string
comment: string
createdAt: string
idUser: string
img: string
username: string
}
export default function DetailDiscussionGeneral() {
const { id } = useLocalSearchParams()
const { token, decryptToken } = useAuthSession()
const entityUser = useSelector((state: any) => state.user)
const { id } = useLocalSearchParams<{ id: string }>();
const [data, setData] = useState<Props>()
const [dataKomentar, setDataKomentar] = useState<PropsKomentar[]>([])
const [memberDiscussion, setMemberDiscussion] = useState(false)
const [komentar, setKomentar] = useState('')
async function handleLoad(cat: 'detail' | 'komentar' | 'cek-anggota') {
try {
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDiscussionGeneralOne({ id: id, user: hasil, cat })
if (cat == 'detail') {
setData(response.data)
} else if (cat == 'komentar') {
setDataKomentar(response.data)
} else if (cat == 'cek-anggota') {
setMemberDiscussion(response.data)
}
} catch (error) {
console.error(error)
}
}
useEffect(() => {
handleLoad('detail')
handleLoad('komentar')
}, []);
async function handleKomentar() {
try {
if (komentar != '') {
const hasil = await decryptToken(String(token?.current))
const response = await apiSendDiscussionGeneralCommentar({ id: id, data: { desc: komentar, user: hasil } })
if (response.success) {
setKomentar('')
handleLoad('komentar')
}
}
} catch (error) {
console.error(error)
}
}
return (
<>
@@ -19,7 +85,7 @@ export default function DetailDiscussionGeneral() {
headerLeft: () => <ButtonBackHeader onPress={() => { router.back() }} />,
headerTitle: 'Diskusi',
headerTitleAlign: 'center',
headerRight: () => <HeaderRightDiscussionGeneralDetail id={id} />,
headerRight: () => <HeaderRightDiscussionGeneralDetail id={id} active={data?.isActive !== undefined ? data.isActive : false} status={data?.status !== undefined ? data.status : 0} />,
}}
/>
<View style={{ flex: 1 }}>
@@ -32,117 +98,58 @@ export default function DetailDiscussionGeneral() {
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
title={data?.title}
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
!data?.isActive ?
<LabelStatus category='warning' text='ARSIP' size="small" />
:
<LabelStatus category={data.status == 1 ? 'success' : 'error'} text={data.status == 1 ? 'BUKA' : 'TUTUP'} size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
rightTopInfo={data?.createdAt}
desc={data?.desc}
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>15 Komentar</Text>
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>{dataKomentar.length} Komentar</Text>
</View>
}
/>
<View style={[Styles.p15]}>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="sangat berdampak dari berbagai sisi"
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
<BorderBottomItem
borderType="bottom"
icon={
<Image
source={require("../../../assets/images/user.jpeg")}
style={[Styles.userProfileExtraSmall]}
/>
}
title="Amalia Dwi"
rightTopInfo="3 Jan 2025"
desc="semua menjadi terbatas.."
/>
{
dataKomentar.map((item, i) => {
return (
<BorderBottomItem
key={i}
borderType="bottom"
icon={
<ImageUser src={`https://wibu-storage.wibudev.com/api/files/${item.img}`} size="xs" />
}
title={item.username}
rightTopInfo={item.createdAt}
desc={item.comment}
/>
)
})
}
</View>
</View>
</ScrollView>
<View style={[Styles.ph15, Styles.pv10, { position: 'absolute', bottom: 10, backgroundColor: '#f4f4f4' }]}>
<InputForm
disable={(data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin")))}
type="default"
round
placeholder="Kirim Komentar"
bg="white"
onChange={setKomentar}
value={komentar}
itemRight={
<MaterialIcons name="send" size={25} color={'#384288'} />
<Pressable onPress={() => {
(komentar != '' && data?.status === 1 && data?.isActive && (memberDiscussion || (entityUser.role != "user" && entityUser.role != "coadmin")))
&& handleKomentar()
}}>
<MaterialIcons name="send" size={25} style={(komentar == '' || data?.status === 2 || !data?.isActive || (!memberDiscussion && (entityUser.role == "user" || entityUser.role == "coadmin"))) ? Styles.cGray : Styles.cDefault} />
</Pressable>
}
/>
</View>

196
app/(application)/discussion/index.tsx
View File

@@ -4,12 +4,46 @@ import InputSearch from "@/components/inputSearch";
import LabelStatus from "@/components/labelStatus";
import { ColorsStatus } from "@/constants/ColorsStatus";
import Styles from "@/constants/Styles";
import { AntDesign, Feather, Ionicons, MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons";
import { apiGetDiscussionGeneral } from "@/lib/api";
import { useAuthSession } from "@/providers/AuthProvider";
import { AntDesign, Feather, Ionicons, MaterialIcons } from "@expo/vector-icons";
import { router, useLocalSearchParams } from "expo-router";
import { useEffect, useState } from "react";
import { SafeAreaView, ScrollView, Text, View } from "react-native";
import { useSelector } from "react-redux";
type Props = {
id: string
title: string
desc: string
status: number
total_komentar: number
createdAt: string
}
export default function Discussion() {
const { active } = useLocalSearchParams<{ active?: string }>()
const entityUser = useSelector((state: any) => state.user)
const { token, decryptToken } = useAuthSession()
const { active, group } = useLocalSearchParams<{ active?: string, group?: string }>()
const [search, setSearch] = useState('')
const [nameGroup, setNameGroup] = useState('')
const [data, setData] = useState<Props[]>([])
async function handleLoad() {
try {
const hasil = await decryptToken(String(token?.current))
const response = await apiGetDiscussionGeneral({ user: hasil, active: String(active), search: search, group: String(group) })
setData(response.data)
setNameGroup(response.filter.name)
} catch (error) {
console.error(error)
}
}
useEffect(() => {
handleLoad()
}, [active, search, group])
return (
<SafeAreaView>
@@ -19,133 +53,59 @@ export default function Discussion() {
<ButtonTab
active={active == "false" ? "false" : "true"}
value="true"
onPress={() => { router.push('/discussion?active=true') }}
onPress={() => { router.push(`/discussion?active=true&group=${group}&search=${search}`) }}
label="Aktif"
icon={<Feather name="check-circle" color={active == "false" ? 'black' : 'white'} size={20} />}
n={2} />
<ButtonTab
active={active == "false" ? "false" : "true"}
value="false"
onPress={() => { router.push('/discussion?active=false') }}
onPress={() => { router.push(`/discussion?active=false&group=${group}&search=${search}`) }}
label="Arsip"
icon={<AntDesign name="closecircleo" color={active == "true" ? 'black' : 'white'} size={20} />}
n={2} />
</View>
<InputSearch />
<View style={[Styles.mv05]}>
<Text>Filter : Dinas</Text>
</View>
<InputSearch onChange={setSearch} />
{
(entityUser.role == "supadmin" || entityUser.role == "developer") &&
<View style={[Styles.mv05]}>
<Text>Filter : {nameGroup}</Text>
</View>
}
<View>
<BorderBottomItem
onPress={() => { router.push('/discussion/1') }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo='15 Komentar'
/>
<BorderBottomItem
onPress={() => { router.push('/discussion/1') }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo='15 Komentar'
/>
<BorderBottomItem
onPress={() => { router.push('/discussion/1') }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo='15 Komentar'
/>
<BorderBottomItem
onPress={() => { router.push('/discussion/1') }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo='15 Komentar'
/>
<BorderBottomItem
onPress={() => { router.push('/discussion/1') }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title="Danantara"
subtitle={
<LabelStatus category='success' text='BUKA' size="small" />
}
rightTopInfo="3 Jan 2025"
desc="Bagaimana dampak yg dirasakan akibat efisiensi?"
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo='15 Komentar'
/>
{
data.length > 0
?
data.map((item: any, i: number) => {
return (
<BorderBottomItem
key={i}
onPress={() => { router.push(`/discussion/${item.id}`) }}
borderType="bottom"
icon={
<View style={[Styles.iconContent, ColorsStatus.lightGreen]}>
<MaterialIcons name="chat" size={25} color={'#384288'} />
</View>
}
title={item.title}
subtitle={
active != "false" && <LabelStatus category={item.status === 1 ? "success" : "error"} text={item.status === 1 ? "BUKA" : "TUTUP"} size="small" />
}
rightTopInfo={item.createdAt}
desc={item.desc}
leftBottomInfo={
<View style={[Styles.rowItemsCenter]}>
<Ionicons name="chatbox-ellipses-outline" size={18} color="grey" style={Styles.mr05} />
<Text style={[Styles.textInformation, Styles.cGray, Styles.mb05]}>Diskusikan</Text>
</View>
}
rightBottomInfo={`${item.total_komentar} Komentar`}
/>
)
})
:
<Text style={[Styles.textDefault, Styles.cGray, { textAlign: 'center' }]}>Tidak ada data</Text>
}
</View>
</View>
</ScrollView>

2
components/borderBottomItem.tsx
View File

@@ -6,7 +6,7 @@ import { Feather } from "@expo/vector-icons";
import { ColorsStatus } from "@/constants/ColorsStatus";
type Props = {
title: string
title?: string
subtitle?: string | React.ReactNode
icon: React.ReactNode
desc?: string

123
components/discussion_general/headerDiscussionDetail.tsx
View File

@@ -1,19 +1,23 @@
import { useState } from "react"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import { ToastAndroid, View } from "react-native"
import Styles from "@/constants/Styles"
import MenuItemRow from "../menuItemRow"
import { MaterialCommunityIcons, MaterialIcons } from "@expo/vector-icons"
import { router } from "expo-router"
import { useState } from "react"
import { ToastAndroid, View } from "react-native"
import { useSelector } from "react-redux"
import AlertKonfirmasi from "../alertKonfirmasi"
import ButtonMenuHeader from "../buttonMenuHeader"
import DrawerBottom from "../drawerBottom"
import MenuItemRow from "../menuItemRow"
type Props = {
id: string | string[]
active: boolean
status: number
}
export default function HeaderRightDiscussionGeneralDetail({ id }: Props) {
export default function HeaderRightDiscussionGeneralDetail({ id, active, status }: Props) {
const [isVisible, setVisible] = useState(false)
const entityUser = useSelector((state: any) => state.user)
return (
<>
@@ -28,45 +32,76 @@ export default function HeaderRightDiscussionGeneralDetail({ id }: Props) {
router.push(`/discussion/member/${id}`)
}}
/>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
title="Edit"
onPress={() => {
setVisible(false)
router.push(`/discussion/edit/${id}`)
}}
/>
<MenuItemRow
icon={<MaterialIcons name="close" color="black" size={25} />}
title="Tutup Diskusi"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin menutup diskusi?',
onPress: () => {
setVisible(false)
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
}
})
}}
/>
</View>
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />}
title="Arsipkan"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin mengarsipkan diskusi?',
onPress: () => {
setVisible(false)
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
}
})
}}
/>
{
entityUser.role != "user" && entityUser.role != "coadmin" &&
<>
{
active ?
(
<>
<MenuItemRow
icon={<MaterialCommunityIcons name="pencil-outline" color="black" size={25} />}
title="Edit"
onPress={() => {
setVisible(false)
router.push(`/discussion/edit/${id}`)
}}
/>
<MenuItemRow
icon={<MaterialIcons name="close" color="black" size={25} />}
title={status == 1 ? 'Tutup Diskusi' : 'Buka Diskusi'}
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: status == 1 ? 'Apakah anda yakin ingin menutup diskusi?' : 'Apakah anda yakin ingin membuka diskusi?',
onPress: () => {
setVisible(false)
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
}
})
}}
/>
</>
)
:
<MenuItemRow
icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />}
title="Aktifkan Diskusi"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin mengaktifkan diskusi ini?',
onPress: () => {
setVisible(false)
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
}
})
}}
/>
}
</>
}
</View>
{
entityUser.role != "user" && entityUser.role != "coadmin" && active &&
<View style={[Styles.rowItemsCenter, Styles.mt15]}>
<MenuItemRow
icon={<MaterialCommunityIcons name="archive-outline" color="black" size={25} />}
title="Arsipkan"
onPress={() => {
AlertKonfirmasi({
title: 'Konfirmasi',
desc: 'Apakah anda yakin ingin mengarsipkan diskusi?',
onPress: () => {
setVisible(false)
ToastAndroid.show('Berhasil mengubah data', ToastAndroid.SHORT)
}
})
}}
/>
</View>
}
</DrawerBottom>
</>
)

7
components/imageNew.tsx
View File

@@ -3,15 +3,16 @@ import { useState } from "react";
import { Image } from "react-native";
type Props = {
src: string
src: string,
size?: 'sm' | 'xs'
}
export default function ImageUser({ src }: Props) {
export default function ImageUser({ src, size }: Props) {
const [error, setError] = useState(false)
return (
<Image
source={error ? require('../assets/images/user.jpg') : { uri: src }}
style={[Styles.userProfileSmall]}
style={[size == 'xs' ? Styles.userProfileExtraSmall : Styles.userProfileSmall]}
onError={() =>
setError(true)
}

4
components/inputForm.tsx
View File

@@ -16,10 +16,11 @@ type Props = {
width?: number
bg?: 'white' | 'transparent'
value?: string
disable?: boolean
};
export function InputForm({ label, value, placeholder, onChange, info, error, errorText, required, itemLeft, itemRight, type, round, width, bg }: Props) {
export function InputForm({ label, value, placeholder, onChange, info, disable, error, errorText, required, itemLeft, itemRight, type, round, width, bg }: Props) {
const lebar = Dimensions.get("window").width;
if (itemLeft != undefined || itemRight != undefined) {
@@ -36,6 +37,7 @@ export function InputForm({ label, value, placeholder, onChange, info, error, er
<View style={[Styles.inputRoundForm, itemRight != undefined ? Styles.inputRoundFormRight : Styles.inputRoundFormLeft, round && Styles.round30, { backgroundColor: bg && bg == 'white' ? 'white' : 'transparent' }, Styles.pv10]}>
{itemRight != undefined ? itemRight : itemLeft}
<TextInput
editable={!disable}
value={value}
placeholder={placeholder}
keyboardType={type}

15
lib/api.ts
View File

@@ -146,3 +146,18 @@ export const apiEditUser = async (data: FormData, id: string) => {
})
return response.data;
};
export const apiGetDiscussionGeneral = async ({ user, active, search, group }: { user: string, active: string, search: string, group?: string }) => {
const response = await api.get(`mobile/discussion-general?user=${user}&active=${active}&group=${group}&search=${search}`);
return response.data;
};
export const apiGetDiscussionGeneralOne = async ({ id, user, cat }: { id: string, user: string, cat: string }) => {
const response = await api.get(`mobile/discussion-general/${id}?user=${user}&cat=${cat}`);
return response.data;
};
export const apiSendDiscussionGeneralCommentar = async ({ id, data }: { id: string, data: { desc: string, user: string } }) => {
const response = await api.post(`/mobile/discussion-general/${id}/comment`, data)
return response.data;
};