index.js
3.39 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
import React, { Component } from 'react'
import { View, FlatList } from 'react-native'
import { Button, ListItem, SearchBar } from 'react-native-elements'
import { StackActions } from 'react-navigation'
import { connect } from 'react-redux'
import {
verDetalleSolicitud,
cambiarPaginaSolicitud,
cambiarBusquedaSolicitud
} from '../../redux/actions/solicitudes'
import Pagination from '../../components/Pagination'
import DefaultIndicator from '../../components/DefaultIndicator'
import css from './style'
// AIP Movil
const navegarSolicitud = (self, solicitud) => {
self.props.verDetalleSolicitud(solicitud)
const pushAction = StackActions.push({
routeName: 'DetalleSolicitud',
params: solicitud
})
self.props.navigation.dispatch(pushAction)
}
const renderItem = function (self) {
return ({ item }) => (
<ListItem
key={item.id}
title={item.titulo}
subtitle={`# ${item.id}`}
badge={item.formato ? { value: item.formato.nombre } : null}
titleStyle={{ fontWeight: 'bold' }}
subtitleStyle={{ fontWeight: 'normal' }}
onPress={() => navegarSolicitud(self, item)}
/>
)
}
class BuscarSolicitudes extends Component {
static navigationOptions = ({ navigation }) => ({
title: 'Buscar Solicitudes',
headerStyle: css.headerStyle,
headerTitleStyle: css.headerTitleStyle,
headerLeft:
<Button
icon={{ name: 'menu', size: 27, color: 'white' }}
buttonStyle={{ backgroundColor: 'transparent' }}
onPress={() => navigation.toggleDrawer()}
/>
});
componentWillMount() {
this.props.cambiarPaginaSolicitud({ page: 1, by_text: null, by_usuario: null }, 0)
}
render() {
const self = this
const { busqueda } = this.props
const spinner = <DefaultIndicator />
const pagination = (show) => {
if (show) {
return (
<Pagination
next={() => self.props.cambiarPaginaSolicitud({ page: busqueda.page + 1 }, 0)}
previous={() => self.props.cambiarPaginaSolicitud({ page: busqueda.page - 1 }, 0)}
page={busqueda.page}
totalPages={this.props.pages.totalPages}
totalCount={this.props.pages.totalCount}
/>)
}
}
const section = (
<FlatList
data={this.props.solicitudes}
renderItem={renderItem(this)}
keyExtractor={(item, index) => index.toString()}
ListFooterComponent={() => pagination(!self.props.loading)}
/>)
return (
<View style={[css.pane, css.container]}>
<SearchBar
lightTheme
onChangeText={(text) => self.props.cambiarBusquedaSolicitud({ by_titulo: text }, 300)}
icon={{ type: 'font-awesome', name: 'search' }}
placeholder='Buscar Solicitudes'
/>
{this.props.loading ? spinner : section}
</View>
)
}
}
const mapStateToProps = (state) => ({
token: state.autenticacion.token,
loading: state.solicitudes.loading,
busqueda: state.solicitudes.busqueda,
pages: state.solicitudes.pages,
solicitudes: state.solicitudes.data,
})
const mapDispatchToProps = (dispatch) => ({
verDetalleSolicitud: (solicitud) => dispatch(verDetalleSolicitud(solicitud)),
cambiarBusquedaSolicitud: (busqueda) => dispatch(cambiarBusquedaSolicitud(busqueda)),
cambiarPaginaSolicitud: (busqueda) => dispatch(cambiarPaginaSolicitud(busqueda))
})
export default connect(mapStateToProps, mapDispatchToProps)(BuscarSolicitudes)