Skip to content

Commit

Permalink
Finalizando editar card e editar categoria
Browse files Browse the repository at this point in the history
  • Loading branch information
@AuroraDark
AuroraDark committed Jun 2, 2022
1 parent ce194c1 commit b7f19a5
Show file tree
Hide file tree
Showing 30 changed files with 1,373 additions and 157 deletions.
9 changes: 9 additions & 0 deletions App.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,10 @@ import {
import Home from "./components/Home/Home";
import HomeCategoria from "./components/HomeCategoria/HomeCategoria";
import AddCard from "./components/AddCard/AddCard";
import EditCard from "./components/EditCard/EditCard";
import ConfirmDelete from "./components/ConfirmDelete/ConfirmDelete";
import AddCategoria from "./components/AddCategoria/AddCategoria";
import EditCategoria from "./components/EditCategoria/EditCategoria";
import { SafeAreaView } from "react-native-safe-area-context";
import * as NavigationBar from "expo-navigation-bar";
import PlayCards from "./components/PlayCards/PlayCards";
Expand Down Expand Up @@ -41,6 +43,13 @@ export default function App() {

<Route path="/add-categoria" element={<AddCategoria />} />

<Route
path="/edit-card/:cor/:id/:categoriaId"
element={<EditCard />}
/>

<Route path="/edit-categoria/:id" element={<EditCategoria />} />

<Route
path="/confirm-delete/:who/:categoriaId/:id"
element={<ConfirmDelete />}
Expand Down
112 changes: 94 additions & 18 deletions components/AddCard/AddCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,8 @@ import { vw, vh, vmin, vmax } from "react-native-expo-viewport-units";
import CardsDB from '../../services/sqlite/Card';
import DetalhesDB from '../../services/sqlite/Detalhes';
import CategoriaDB from '../../services/sqlite/Categoria';
import TrashIcon from '../../assets/icons/trash-solid.svg'
import EditIcon from '../../assets/icons/pen-solid.svg'

function withParams(Component) {
return props => <Component {...props} params={useParams()} />;
Expand All @@ -23,6 +25,7 @@ class AddCard extends React.Component {
respostaDetalhe: '',
detalheVisibility: false,
adicionarVisibility: true,
editMode: false,
idDetalhe: 0,
detalhes: [],
detalheSelected: -1,
Expand All @@ -44,15 +47,14 @@ class AddCard extends React.Component {

render (){

const { titulo, resposta, tituloDetalhe, respostaDetalhe, detalheVisibility, adicionarVisibility,idDetalhe, detalhes, detalheSelected, categoria, categoriaId } = this.state
const { titulo, resposta, tituloDetalhe, respostaDetalhe, detalheVisibility, adicionarVisibility, editMode, idDetalhe, detalhes, detalheSelected, categoria, categoriaId } = this.state

const geraFlatList = () => {
console.log(detalhes.length)
if(detalhes.length != 0) {
console.log(detalhes[idDetalhe-1])
return(
<View>
<Text style={styles.cardTitulo}>Detalhes</Text>
<FlatList
data={detalhes}
renderItem={renderDetalhe}
Expand All @@ -73,20 +75,23 @@ class AddCard extends React.Component {
placeholder="Título do detalhe..."
placeholderTextColor="#f2f2f2"
multiline={true}
onChangeText={novoTitulo => this.setState({tituloDetalhe: novoTitulo})}
onChangeText={novoTitulo => {this.setState({tituloDetalhe: novoTitulo})}}
/>
<TouchableOpacity style={styles.close_detalhe} onPress={() => escondeDetalhe()}>
<Text style={[styles.btn_card_text_x]}>x</Text>
</TouchableOpacity>
</View>
<TextInput style={styles.cardResposta}
<TextInput style={[styles.cardResposta, {marginBottom: 65}]}
placeholder="Resposta..."
placeholderTextColor="#f2f2f2"
textAlignVertical="top"
multiline={true}
numberOfLines={3}
onChangeText={novaResposta => this.setState({respostaDetalhe: novaResposta})}
onChangeText={novaResposta => {this.setState({respostaDetalhe: novaResposta})}}
/>
<TouchableOpacity style={styles.salvar_button} onPress={() =>{salvarDetalhe()}}>
<Text style={[styles.btn_card_text_salvar]}>Salvar</Text>
</TouchableOpacity>
</View>
)
}
Expand Down Expand Up @@ -125,6 +130,14 @@ class AddCard extends React.Component {
this.setState({respostaDetalhe: ''})
}

const changeEditMode = () =>{
if (editMode){
this.setState({editMode: false, tituloDetalhe: '', respostaDetalhe: ''})
}else{
this.setState({editMode: true})
}
}

const salvarDetalhe = () => {
var novo_detalhe = {
id: idDetalhe,
Expand All @@ -140,11 +153,26 @@ class AddCard extends React.Component {
}

const deletarDetalhe = () => {
var indexDetalhe = detalhes.findIndex(detalhe => detalhe.id == detalheSelected);
let indexDetalhe = detalhes.findIndex(detalhe => detalhe.id == detalheSelected);
this.setState({detalhes: detalhes.filter((_, i) => i !== indexDetalhe)})
this.setState({detalheSelected: -1})
}

const editarDetalhe = () => {
var novo_detalhe = {
id: detalheSelected,
titulo: tituloDetalhe,
resposta: respostaDetalhe
}
var indexDetalhe = detalhes.findIndex(detalhe => detalhe.id == detalheSelected);
var detalhesUpdated = detalhes
detalhesUpdated[indexDetalhe] = novo_detalhe

this.setState({detalhes: detalhesUpdated})
this.setState({tituloDetalhe: ''})
this.setState({respostaDetalhe: ''})
}

const showMenuDetalhe = () => {
if (detalheSelected != -1){
return (
Expand All @@ -170,12 +198,61 @@ class AddCard extends React.Component {
this.setState({detalheSelected: item.id})
}
}
return (
<TouchableOpacity style = {isSelected ? [styles.categoryItem, {backgroundColor:"#1a1a1a50", padding: 10, borderColor: "#f2f2f2", borderWidth: 1}] : styles.categoryItem} onPress={() => selecionaDetalhe()}>
<Text style={isSelected ? [styles.cardTituloDetalhe , {width:vw(70) - 20}]: styles.cardTituloDetalhe}>{item.titulo}</Text>
<Text style = {isSelected ? [styles.cardResposta, {marginBottom: 10, width:vw(70) - 20}] : [styles.cardResposta, {marginBottom: 10}]}>{item.resposta}</Text>
</TouchableOpacity>
);

if(isSelected && !this.state.editMode){
return (
<View style={styles.categoryItem}>
<TouchableOpacity style = {[styles.categoryItem, {marginBottom: 60, backgroundColor:"#1a1a1a50", padding: 10, borderColor: "#f2f2f2", borderWidth: 1}]} onLongPress={() => selecionaDetalhe()}>
<Text style={[styles.cardTituloDetalhe , {width:vw(70) - 20}]}>{item.titulo}</Text>
<Text style = {[styles.cardResposta, {width:vw(70) - 20}]}>{item.resposta}</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.edit_button}>
<EditIcon width={20} height={20} fill={'#f2f2f2'} onPress={() =>{this.setState({editMode: true, tituloDetalhe: item.titulo, respostaDetalhe: item.resposta})}}/>
</TouchableOpacity>
<TouchableOpacity style={styles.trash_button} onPress={() => {deletarDetalhe()}}>
<TrashIcon width={20} height={20} fill={'#f2f2f2'} />
</TouchableOpacity>
</View>

);
}else if(isSelected && this.state.editMode){
return(
<View style={styles.detalhe} >
<View style={styles.header_detalhe}>
<TextInput style={[styles.cardTituloDetalhe, {width: vw(50)}]}
placeholder="Título do detalhe..."
placeholderTextColor="#f2f2f2"
multiline={true}
value={tituloDetalhe}
onChangeText={novoTitulo => this.setState({tituloDetalhe: novoTitulo})}
/>
<TouchableOpacity style={styles.close_detalhe} onPress={() =>{this.setState({editMode: false, tituloDetalhe: '', respostaDetalhe: ''})}}>
<Text style={[styles.btn_card_text_x]}>x</Text>
</TouchableOpacity>
</View>
<TextInput style={[styles.cardResposta, {marginBottom:65}]}
placeholder="Resposta..."
placeholderTextColor="#f2f2f2"
textAlignVertical="top"
multiline={true}
numberOfLines={3}
value={respostaDetalhe}
onChangeText={novaResposta => this.setState({respostaDetalhe: novaResposta})}
/>
<TouchableOpacity style={styles.salvar_button} onPress={() =>{editarDetalhe();this.setState({editMode: false})}}>
<Text style={[styles.btn_card_text_salvar]}>Salvar</Text>
</TouchableOpacity>
</View>
)
}else{
return (
<TouchableOpacity style = {styles.categoryItem} onLongPress={() => selecionaDetalhe()}>
<Text style={styles.cardTituloDetalhe}>{item.titulo}</Text>
<Text style = {[styles.cardResposta, {marginBottom: 10}]}>{item.resposta}</Text>
</TouchableOpacity>
);
}

}

if (categoria.id != undefined) {
Expand Down Expand Up @@ -211,15 +288,14 @@ class AddCard extends React.Component {
numberOfLines={3}
onChangeText={novaResposta => this.setState({resposta:novaResposta})}
/>

{geraFlatList()}
{(detalhes.length != 0) ? <Text style={styles.cardTitulo}>Detalhes</Text> : null}

{setaDetalhes()}

</ScrollView>
{geraFlatList()}

{exibeSalvarDetalhe()}
</ScrollView>

{setaButtonAdicionar()}
{showMenuDetalhe()}
</LinearGradient>
</View>
<View style={styles.menu_footer}>
Expand Down
35 changes: 35 additions & 0 deletions components/AddCard/AddCard.styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,6 +73,14 @@ export const styles = StyleSheet.create({
textAlign: "center",
},

btn_card_text_salvar: {
color: "#f2f2f2",
fontFamily: "Epilogue_500Medium",
fontSize: 18,
paddingHorizontal: 10,
textAlign: "center",
},

btn_right: {
position: "absolute",
right: 20,
Expand All @@ -92,6 +100,33 @@ export const styles = StyleSheet.create({
borderRadius: 50,
},

trash_button: {
position: "absolute",
backgroundColor: "#c0392b",
padding: 10,
borderRadius: 50,
bottom: 10,
right: 10,
},

edit_button: {
position: "absolute",
backgroundColor: "#16a085",
padding: 10,
borderRadius: 50,
bottom: 10,
right: 60,
},

salvar_button: {
position: "absolute",
backgroundColor: "#16a085",
padding: 10,
borderRadius: 50,
bottom: 10,
right: 0,
},

header: {
width: "100%",
},
Expand Down
9 changes: 7 additions & 2 deletions components/AddCategoria/AddCategoria.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,14 @@ const AddCategoria = () => {
const [nome, setNome] = useState('')
const [colorSelected, setColorSelected] = useState("237A57-093028")
const colors = [
{hexa:"C6426E-512DA8"},
{hexa:"005C97-363795"},
{hexa:"ff8c00-C02425"},
{hexa:"237A57-093028"},
{hexa:"C6426E-642B73"},
{hexa:"569FF7-0052D4"},
{hexa:"267871-136a8a"},
{hexa:"8093a2-304352"},
{hexa:"BE5869-403A3E"},
{hexa:"e35d5b-e53935"},
]

const renderColor = ({item}) => {
Expand Down
19 changes: 15 additions & 4 deletions components/Card/Card.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ import LampIconOff from '../../assets/icons/lamp-off.svg';
import StarIcon from '../../assets/icons/star.svg';
import TurnCardIcon from '../../assets/icons/repeat-solid.svg'
import TrashIcon from '../../assets/icons/trash-solid.svg'
import EditIcon from '../../assets/icons/pen-solid.svg'
import CardsDB from '../../services/sqlite/Card'
import DetalhesDB from '../../services/sqlite/Detalhes'
import { Link } from 'react-router-native';
Expand Down Expand Up @@ -57,6 +58,9 @@ class Card extends React.Component {
>

{this.state.isTurned ? verso(this.state): frente(this.state)}
<Link to={`/edit-card/${this.state.cor}/${this.state.id}/${this.state.categoriaId}`} style={verso_styles.edit_button}>
<EditIcon width={20} height={20} fill={'#f2f2f2'} />
</Link>
<Link to={`/confirm-delete/Card/${this.state.categoriaId}/${this.state.id}`} style={verso_styles.trash_button}>
<TrashIcon width={20} height={20} fill={'#f2f2f2'} />
</Link>
Expand All @@ -82,17 +86,24 @@ class Card extends React.Component {
}

function verso(card){
const TitleCard = () => {
return(
<View style={{flex:1, width: "100%"}}>
<Text style={verso_styles.cardTitulo}>{card.titulo}</Text>
<Text style={verso_styles.cardResposta}>{card.resposta}</Text>
{(card.detalhes.length > 0) ? <Text style={[verso_styles.cardTitulo, {marginBottom: 10, marginTop: 15}]}>Tópicos</Text> : null}
</View>
)
}
return(
// Constrói a visualização do card
<View style={verso_styles.scrollView}>
<Text style={verso_styles.cardTitulo}>{card.titulo}</Text>
<Text style={verso_styles.cardResposta}>{card.resposta}</Text>
{(card.detalhes.length > 0) ? <Text style={[verso_styles.cardTitulo, {marginBottom: 10, marginTop: 15}]}>Tópicos</Text> : null}
<FlatList
data={card.detalhes}
renderItem={renderDetalhe}
keyExtractor={item => item.id}
contentContainerStyle={styles.cardList}>
contentContainerStyle={styles.cardList}
ListHeaderComponent={TitleCard}>
</FlatList>
</View>
);
Expand Down
12 changes: 11 additions & 1 deletion components/Card/Verso.styles.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,21 @@ export const verso_styles = StyleSheet.create({
bottom: 23,
},

trash_button: {
edit_button: {
position: "absolute",
left: 23,
//top: 0,
bottom: 23,
backgroundColor: "#16a085",
padding: 15,
borderRadius: 50,
},

trash_button: {
position: "absolute",
left: 90,
//top: 0,
bottom: 23,
backgroundColor: "#c0392b",
padding: 15,
borderRadius: 50,
Expand Down
12 changes: 6 additions & 6 deletions components/CardList/CardList.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,23 +13,23 @@ class CardList extends React.Component {
cards: null,
categoriaId: this.props.categoriaId,
cor: this.props.cor,
search: this.props.search
}

componentDidMount() {
this.getCards(this.state.categoriaId);
this.getCards(this.props.categoriaId, this.props.search);
}

componentDidUpdate(prevProps) {
if(this.props.categoriaId != prevProps.categoriaId){
this.getCards(this.state.categoriaId);
if(this.props.categoriaId != prevProps.categoriaId || this.props.search != prevProps.search){
this.getCards(this.state.categoriaId, this.props.search);
}

}


getCards = (categoriaId) => {
console.log(categoriaId)
CardsDB.allCardsCategory(categoriaId).then(res => {
getCards = (categoriaId, search) => {
CardsDB.allCardsCategory(categoriaId, search).then(res => {
this.setState({
cards: res,
});
Expand Down
2 changes: 1 addition & 1 deletion components/Categoria/Categoria.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@ const Categoria = (props) => {
if (editMode){
return(
<View style={styles.edit_buttons}>
<Link to={`/`} style={styles.edit_button}>
<Link to={`/edit-categoria/${props.id}`} style={styles.edit_button}>
<EditIcon width={20} height={20} fill={'#f2f2f2'} />
</Link>
<Link to={`/confirm-delete/Categoria/${props.id}/${props.id}`} style={styles.trash_button}>
Expand Down
Loading

0 comments on commit b7f19a5

Please sign in to comment.