From 3eae97add70129f79996e6366cc30967230d00e2 Mon Sep 17 00:00:00 2001 From: AuroraDark Date: Thu, 21 Apr 2022 00:21:38 -0300 Subject: [PATCH] exibindo mensagem "Criar card" --- App.js | 3 + components/AddCategoria/AddCategoria.jsx | 239 ++++-------------- .../AddCategoria/AddCategoria.styles.js | 101 ++++++-- components/BtnAdd/BtnAddCategoria.jsx | 2 +- components/CardList/CardList.jsx | 26 +- components/CardList/CardList.styles.js | 22 +- services/sqlite/Card.js | 2 +- 7 files changed, 166 insertions(+), 229 deletions(-) diff --git a/App.js b/App.js index 9c49dc7..8f4fa12 100644 --- a/App.js +++ b/App.js @@ -12,6 +12,7 @@ import Home from "./components/Home/Home"; import HomeCategoria from "./components/HomeCategoria/HomeCategoria"; import AddCard from "./components/AddCard/AddCard"; import ConfirmDelete from "./components/ConfirmDelete/ConfirmDelete"; +import AddCategoria from "./components/AddCategoria/AddCategoria"; export default function App() { let [fontsLoaded] = useFonts({ @@ -35,6 +36,8 @@ export default function App() { element={} /> + } /> + } diff --git a/components/AddCategoria/AddCategoria.jsx b/components/AddCategoria/AddCategoria.jsx index 064587d..4d4074b 100644 --- a/components/AddCategoria/AddCategoria.jsx +++ b/components/AddCategoria/AddCategoria.jsx @@ -6,155 +6,35 @@ import { LinearGradient } from 'expo-linear-gradient'; import CategoriasIcon from '../../assets/icons/categorias.svg' import { Link } from 'react-router-native'; import { vw, vh, vmin, vmax } from "react-native-expo-viewport-units"; -import CardsDB from '../../services/sqlite/Card' +import CategoriasDB from '../../services/sqlite/Categoria' import DetalhesDB from '../../services/sqlite/Detalhes' const AddCategoria = () => { - // Recebe os parametros vindos do router - const { categoriaId, cor, nome } = useParams() // Cria os states para atualizar enquanto o usuário modifica - const [titulo, setTitulo] = useState('') - const [resposta, setResposta] = useState('') - const [tituloDetalhe, setTituloDetalhe] = useState('') - const [respostaDetalhe, setRespostaDetalhe] = useState('') - const [detalheVisibility, setDetalheVisibility] = useState(false) - const [adicionarVisibility, setAdicionarVisibility] = useState(true) - const [idDetalhe, setIdDetalhe] = useState(0) - const [detalhes, setDetalhes] = useState([]) - const [detalheSelected, setDetalheSelected] = useState(-1) - - // Pega as cores para formar o fundo gradiente - const gradientColors = getColors(cor) - - const geraFlatList = () => { - console.log(detalhes.length) - if(detalhes.length != 0) { - console.log(detalhes[idDetalhe-1]) - return( - - Detalhes - item.id} - contentContainerStyle={styles.cardList}> - - - ); - } - } - - function setaDetalhes(){ - if (detalheVisibility){ - return( - - - setTituloDetalhe(novoTitulo)} - /> - escondeDetalhe()}> - x - - - setRespostaDetalhe(novaResposta)} - /> - - ) - } - } - - function setaButtonAdicionar(){ - if(adicionarVisibility && detalheSelected == -1 && !detalheVisibility){ - return( - exibeDetalhe()}> - Adicionar Detalhe - - ) - } - } - - function exibeSalvarDetalhe(){ - if (detalheVisibility){ - return ( - salvarDetalhe()}> - Salvar Detalhe - - ); - } - - } - - function exibeDetalhe(){ - setAdicionarVisibility(false) - setDetalheVisibility(true) - } - - function escondeDetalhe(){ - setAdicionarVisibility(true) - setDetalheVisibility(false) - setTituloDetalhe('') - setRespostaDetalhe('') - } - - function salvarDetalhe() { - var novo_detalhe = { - id: idDetalhe, - titulo: tituloDetalhe, - resposta: respostaDetalhe - } - setDetalhes(detalhes.concat([novo_detalhe])) - setIdDetalhe(novo_detalhe.id + 1) - setTituloDetalhe('') - setRespostaDetalhe('') - setAdicionarVisibility(true) - setDetalheVisibility(false) - } - - function deletarDetalhe(){ - var indexDetalhe = detalhes.findIndex(detalhe => detalhe.id == detalheSelected); - setDetalhes(detalhes.filter((_, i) => i !== indexDetalhe)); - setDetalheSelected(-1) - } - - function showMenuDetalhe(){ - if (detalheSelected != -1){ - return ( - deletarDetalhe()}> - Deletar - - ); - } - } - - const renderDetalhe = ({item}) => { - id = item.id + const [nome, setNome] = useState('') + const [colorSelected, setColorSelected] = useState("237A57-093028") + const colors = [ + {hexa:"237A57-093028"}, + {hexa:"C6426E-642B73"}, + {hexa:"569FF7-0052D4"}, + ] + + const renderColor = ({item}) => { + id = item.hexa var isSelected = false - if (detalheSelected == item.id){ + if (colorSelected == item.hexa){ isSelected = true } - function selecionaDetalhe(){ - if (detalheSelected == item.id){ - setDetalheSelected(-1) - }else{ - setDetalheSelected(item.id) - } - } return ( - selecionaDetalhe()}> - {item.titulo} - {item.resposta} + setColorSelected(item.hexa)}> + ); } @@ -162,52 +42,42 @@ const AddCategoria = () => { return ( // Constrói a visualização do card + - - Novo Card - - - {nome} - - - - - - - Novo Deck + Um deck é um conjunto de cartas com um tema em comum. + Dê um nome ao seu deck e escolha a cor das cartas. + setTitulo(novoTitulo)} + onChangeText={novoNome => setNome(novoNome)} /> - setResposta(novaResposta)} - /> - - {geraFlatList()} - {setaDetalhes()} - - - - {exibeSalvarDetalhe()} - {setaButtonAdicionar()} - {showMenuDetalhe()} - + + + Cor + item.hexa} + contentContainerStyle={styles.colorsList}> + + + + Card + + + - insertCard(titulo, resposta, categoriaId, detalhes)}> + insertCategoria(nome, colorSelected)}> Salvar - + Cancelar @@ -223,23 +93,20 @@ function getColors(colorStr){ } -function insertCard(titulo, resposta, categoriaId, detalhes){ +function insertCategoria(nome, cor){ // Adiciona Card - var novoCard = { - titulo: titulo, - resposta: resposta, - categoriaId: categoriaId + var novaCategoria = { + cor: cor, + nome: nome } //create - CardsDB.createCard(novoCard) + CategoriasDB.createCategoria(novaCategoria) .then( id => { - console.log('Card created with id: '+ id) - insertDetalhes(detalhes, id) + console.log('Categoria created with id: '+ id) }) .catch( err => console.log(err) ) - } export default AddCategoria \ No newline at end of file diff --git a/components/AddCategoria/AddCategoria.styles.js b/components/AddCategoria/AddCategoria.styles.js index 3f8e31f..e3dd86d 100644 --- a/components/AddCategoria/AddCategoria.styles.js +++ b/components/AddCategoria/AddCategoria.styles.js @@ -2,14 +2,81 @@ import { StyleSheet } from "react-native"; import { vw, vh, vmin, vmax } from "react-native-expo-viewport-units"; export const styles = StyleSheet.create({ - container: { + background: { flex: 1, backgroundColor: "#1a1a1a", width: "100%", height: "100%", + }, + + subtitulo: { + color: "#888", + textAlign: "left", + fontFamily: "Epilogue_500Medium", + marginBottom: 0, + fontSize: 20, + marginLeft: 20, + marginRight: 20, + }, + + color_card: { + display: "flex", + flexDirection: "row", + justifyContent: "space-between", + }, + + cardText: { + marginTop: vh(8), + color: "#f2f2f2", + textAlign: "center", + fontFamily: "Epilogue_500Medium", + fontSize: 30, + }, + + card_example: { + width: vw(59), + height: vh(50), + marginRight: 20, + borderRadius: 30, + }, + + colorItem: { + marginTop: 10, + borderRadius: 10, + width: 60, + height: 60, + }, + + color: { + flex: 1, + borderRadius: 8, + padding: 20, + margin: 0, + display: "flex", + flexDirection: "column", alignItems: "center", }, + colorsList: { + alignItems: "center", + }, + + colorText: { + color: "#f2f2f2", + fontFamily: "Epilogue_500Medium", + fontSize: 20, + textAlign: "center", + }, + + color_container: { + borderRadius: 8, + marginLeft: 20, + padding: 15, + width: vw(25), + height: vh(50), + backgroundColor: "#2a2a2a", + }, + header_detalhe: { marginTop: 20, display: "flex", @@ -48,6 +115,9 @@ export const styles = StyleSheet.create({ menu_footer: { height: vh(10), width: "100%", + position: "absolute", + backgroundColor: "#1a1a1a", + bottom: 0, }, btn_text: { @@ -119,39 +189,20 @@ export const styles = StyleSheet.create({ fontSize: 23, }, - categoryItem: { - marginTop: 10, - borderRadius: 10, - width: "100%", - }, - - cardBody: { - flex: 1, - width: vw(90), - height: vh(70), - borderRadius: 40, - padding: 20, - marginLeft: vw(3), - marginRight: vw(3), - display: "flex", - flexDirection: "column", - alignItems: "center", - }, - scrollView: { marginTop: "5%", marginBottom: 70, }, - cardTitulo: { - marginTop: 10, - width: vw(70), + cardNome: { + margin: 20, color: "#f2f2f2", textAlign: "left", - fontFamily: "Epilogue_700Bold", + fontFamily: "Epilogue_500Medium", fontSize: 25, - //backgroundColor: "#1a1a1a80", + backgroundColor: "#2a2a2a", borderRadius: 8, + padding: 10, //borderWidth: 1, //borderColor: "#f2f2f2", }, diff --git a/components/BtnAdd/BtnAddCategoria.jsx b/components/BtnAdd/BtnAddCategoria.jsx index 4a4be27..e0c00ed 100644 --- a/components/BtnAdd/BtnAddCategoria.jsx +++ b/components/BtnAdd/BtnAddCategoria.jsx @@ -6,7 +6,7 @@ import { Link } from 'react-router-native'; const BtnAddCategoria = (props) => { return ( - + + ); diff --git a/components/CardList/CardList.jsx b/components/CardList/CardList.jsx index 35828c0..f59ff65 100644 --- a/components/CardList/CardList.jsx +++ b/components/CardList/CardList.jsx @@ -10,6 +10,7 @@ import CardsDB from '../../services/sqlite/Card' class CardList extends React.Component { state = { + cards: [], categoriaId: this.props.categoriaId, categoriaNome: this.props.categoriaNome, cor: this.props.cor, @@ -32,16 +33,23 @@ class CardList extends React.Component { ); } + if (Object.keys(this.state.cards).length <= 0){ + return( + Crie um novo card. + ); + } + return ( - item.id} - contentContainerStyle={styles.cardList}> - - ); + item.id} + contentContainerStyle={styles.cardList}> + + + ); } } diff --git a/components/CardList/CardList.styles.js b/components/CardList/CardList.styles.js index dab9383..29c39ec 100644 --- a/components/CardList/CardList.styles.js +++ b/components/CardList/CardList.styles.js @@ -1,9 +1,17 @@ -import { StyleSheet } from 'react-native'; -import { vw, vh, vmin, vmax } from 'react-native-expo-viewport-units'; +import { StyleSheet } from "react-native"; +import { vw, vh, vmin, vmax } from "react-native-expo-viewport-units"; export const styles = StyleSheet.create({ - cardList: { - paddingLeft: 20 - vw(3), - paddingRight: 20 - vw(3), - } -}); \ No newline at end of file + cardList: { + paddingLeft: 20 - vw(3), + paddingRight: 20 - vw(3), + }, + + semCategoriasMensagem: { + marginTop: 10, + color: "#f2f2f2", + textAlign: "center", + fontFamily: "Epilogue_500Medium", + fontSize: 20, + }, +}); diff --git a/services/sqlite/Card.js b/services/sqlite/Card.js index bf82301..6676b3f 100644 --- a/services/sqlite/Card.js +++ b/services/sqlite/Card.js @@ -140,7 +140,7 @@ const allCardsCategory = (categoriaId) => { //----------------------- (_, { rows }) => { if (rows.length > 0) resolve(rows._array); - else reject("Obj not found: categoriaId=" + categoriaId); // nenhum registro encontrado + else resolve([]); // nenhum registro encontrado }, (_, error) => reject(error) // erro interno em tx.executeSql );