Commit fa5ee77b authored by Cyrille Bollu's avatar Cyrille Bollu
Browse files

Makes it faster to create card by creating them directly from boardDetails


Signed-off-by: default avatarCyrille Bollu <cyrille@bollu.be>
parent 8bc2e052
Pipeline #457197 failed with stage
in 17 seconds
......@@ -2,7 +2,7 @@ import React from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { addStack, deleteCard, deleteStack, moveCard } from '../store/boardSlice';
import { addCard, addStack, deleteCard, deleteStack, moveCard } from '../store/boardSlice';
import { setServer } from '../store/serverSlice';
import { setToken } from '../store/tokenSlice';
import AppMenu from './AppMenu';
......@@ -19,13 +19,17 @@ class BoardDetails extends React.Component {
constructor(props) {
super(props)
this.state = {
addingCard: false,
addingStack: false,
index: 0, // the index of the stack currently shown
newCardName: '',
newStackName: '',
refreshing: false,
cardPressed: -1, // array of cards pressed
}
this.createCard = this.createStack.bind(this)
this.createCard = this.createCard.bind(this)
this.createStack = this.createStack.bind(this)
this.deleteStack = this.deleteStack.bind(this)
this.loadBoard = this.loadBoard.bind(this)
this.moveCard = this.moveCard.bind(this)
this.insets = initialWindowMetrics?.insets ?? {
......@@ -244,14 +248,13 @@ class BoardDetails extends React.Component {
}
</DraxScrollView>
</View>
{!this.state.addingStack &&
{(!this.state.addingStack && !this.state.addingCard) &&
<View style={[this.props.theme.container, {marginBottom: this.insets.bottom}]}>
<Pressable
style={this.props.theme.button}
onPress={() => {this.props.navigation.navigate('NewCard', {
boardId: this.props.route.params.boardId,
stackId: this.state.index,
})}}
onPress={() => {
this.setState({addingCard: true})
}}
>
<Text style={this.props.theme.buttonTitle}>
{i18n.t('createCard')}
......@@ -259,6 +262,27 @@ class BoardDetails extends React.Component {
</Pressable>
</View>
}
{this.state.addingCard &&
<View style={[this.props.theme.container, {marginBottom: this.insets.bottom}]}>
<View style={this.props.theme.inputButton} >
<TextInput style={[this.props.theme.inputText, {flexGrow: 1}]}
value={this.state.newCardName}
autoFocus={true}
maxLength={100}
onBlur={() => {
this.setState({addingCard: false})
this.setState({ newCardName: '' })
}}
onChangeText={newCardName => {
this.setState({ newCardName })
}}
onSubmitEditing={() => this.createCard(this.state.newCardName)}
placeholder={i18n.t('newCardHint')}
returnKeyType='send'
/>
</View>
</View>
}
{this.state.addingStack &&
<View style={[this.props.theme.container, {marginBottom: this.insets.bottom}]}>
<View style={this.props.theme.inputButton} >
......@@ -285,6 +309,44 @@ class BoardDetails extends React.Component {
}
}
createCard(cardName) {
console.log('Creating card', cardName)
const stacks = this.props.boards.value[this.props.route.params.boardId].stacks;
const currentStack = stacks.find(oneStack => oneStack.id === this.state.index);
axios.post(this.props.server.value + `/index.php/apps/deck/api/v1.0/boards/${this.props.route.params.boardId}/stacks/${currentStack.id}/cards`,
{
description: '',
duedate: null,
title: cardName,
},
{
headers: {
'Content-Type': 'application/json',
'Authorization': this.props.token.value
},
})
.then((resp) => {
if (resp.status !== 200) {
console.log('Error', resp)
} else {
console.log('Card created')
// card to stack in store
this.props.addCard({
boardId: this.props.route.params.boardId,
stackId: currentStack.id,
card: resp.data,
})
// Reset newCardName and hide newCardName button
this.setState({addingCard: false})
this.setState({ newCardName: '' })
}
})
.catch((error) => {
console.log(error)
})
}
createStack(stackName) {
console.log('Creating stack', stackName)
axios.post(this.props.server.value + `/index.php/apps/deck/api/v1.0/boards/${this.props.route.params.boardId}/stacks`,
......@@ -462,6 +524,7 @@ const mapStateToProps = state => ({
const mapDispatchToProps = dispatch => (
bindActionCreators( {
addCard,
addStack,
deleteCard,
deleteStack,
......
......@@ -19,33 +19,22 @@ class Card extends React.Component {
super(props)
this.state = {
card: {
description: '',
duedate: null,
title: ''
},
card: {},
editable: false,
showDatePicker: false,
}
this.onCreate = this.onCreate.bind(this);
this.onSave = this.onSave.bind(this);
}
componentDidMount() {
// Setup page header
this.props.navigation.setOptions({
headerTitle: typeof this.props.route.params.cardId === 'undefined' ? 'New card' : 'Card details',
headerRight: () => (<AppMenu navigation={this.props.navigation} setServer={this.props.setServer} setToken={this.props.setToken} />)
}, [this.props.navigation, this.props.setServer, this.props.setToken])
if (typeof this.props.route.params.cardId === 'undefined') {
console.log('Creating new card')
this.setState({
editable: true,
})
return
}
// Getting card details from server
console.log('Getting card details from server')
axios.get(this.props.server.value + `/index.php/apps/deck/api/v1.0/boards/${this.props.route.params.boardId}/stacks/${this.props.route.params.stackId}/cards/${this.props.route.params.cardId}`, {
headers: {
......@@ -201,40 +190,7 @@ class Card extends React.Component {
</ScrollView>
)
}
onCreate() {
axios.post(this.props.server.value + `/index.php/apps/deck/api/v1.0/boards/${this.props.route.params.boardId}/stacks/${this.props.route.params.stackId}/cards`,
this.state.card,
{
headers: {
'Content-Type': 'application/json',
'Authorization': this.props.token.value
},
})
.then((resp) => {
if (resp.status !== 200) {
console.log('Error', resp)
} else {
console.log('Card created')
this.setState((previousSate) => ({
card: {
...previousSate.card,
id: resp.data
}
}))
this.props.addCard({
boardId: this.props.route.params.boardId,
stackId: this.props.route.params.stackId,
card: this.state.card
})
this.props.navigation.goBack()
}
})
.catch((error) => {
console.log(error)
})
}
onSave() {
axios.put(this.props.server.value + `/index.php/apps/deck/api/v1.0/boards/${this.props.route.params.boardId}/stacks/${this.props.route.params.stackId}/cards/${this.props.route.params.cardId}`,
this.state.card,
......
......@@ -15,6 +15,7 @@ export const en = {
moveCard : 'Move card',
noStack : 'This board has no stack. Start working by first creating a stack.',
newBoardHint: 'Type the name of a board to create one',
newCardHint: 'Type here the title of your card',
newStackHint : 'Type here the name of a new list',
rename: 'Rename',
renameStack: 'Rename stack',
......@@ -42,6 +43,7 @@ export const fr = {
moveCard : 'Déplacer la carte',
noStack : 'Ce tableau n\'a pas de liste. Commencez par en créer une.',
newBoardHint: 'Tapez un nom pour créer un tableau',
newCardHint: 'Tapez ici le titre de votre carte pour la créer',
newStackHint : 'Entrez le nom de votre nouvelle liste ici',
rename: 'Renommer',
renameStack: 'Renommer la liste',
......
Markdown is supported
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