Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Enhancement/forms #658

Merged
merged 246 commits into from
Jan 26, 2022
Merged

Enhancement/forms #658

merged 246 commits into from
Jan 26, 2022

Conversation

henriquecbuss
Copy link
Member

@henriquecbuss henriquecbuss commented Nov 6, 2021

What issue does this PR close

Closes #585, closes #567

Changes Proposed ( a list of new changes introduced by this PR)

  • Add a new Form module, responsible for all forms in our app. It's pretty complex, but it's pretty well documented, and there's also more documentation on hecrj/composable-form, which was a great inspiration for this module, so if you want to understand how it all works and how to use it, check those out!
  • Add new Form.* modules, such as Form.Text. These are responsible for each kind of field we can have in our app. They're pretty much the same as the previous View.Form.* modules, but refactored to work with the new Form module
  • Add UR.addChild and UR.fromChild helpers. With these, we can have components that use UpdateResult in their update function, and have a better API for getting results from these components (Form is one example that already uses UpdateResult on it's update function).
  • Replace existing forms with the new api
  • Remove the old View.Form.* modules. These shouldn't be needed anymore with the new form field modules.
  • Add documentation about the new Form API and the new Fields on elm-book

How to test ( a list of instructions on how to test this PR)

Since this changes every single form in our app, it's a good idea to run through the app and give it a complete test anywhere there is a form, checking if everything works. Here are some things that are trickier and might require some more attention:

  • Masks on text fields
  • Different input types that show different keyboards on mobile (e.g. phone number inputs show a phone number keyboard, numeric inputs show a numerical keyboard, etc.)
  • The rich text editor
  • The file uploader
  • The user selector
  • The date selector
  • The dropdown selector

Also, now we have something called elm-book! It's a visual guide to all our components (only form components are included for now), and you can access it at https://cambiatus-elm-book.netlify.app/, or on the same area where you can find our regular netlify preview of the app (scroll all the way down this page, near where you can type a comment). Make sure the language used and all of the examples are coherent. You can use those examples to more easily test our form components!

Comment on lines 62 to 68
GotUserFormMsg subMsg ->
Form.update subMsg model.userFormModel
|> UR.fromChild
(\userFormModel -> { model | userFormModel = userFormModel })
GotUserFormMsg
SubmittedUser
model
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@lucca65 this is what I was talking about having a component using UpdateResult. In this case, whenever a valid User is submitted, the SubmittedUser message is fired, and then the parent (this page) can do whatever it wants with the user

@henriquecbuss henriquecbuss mentioned this pull request Nov 10, 2021
@juramos-2020
Copy link

Shop Buy (versão mobile)

  • o botão "comprar" está colado no texto "quantas unidades você quer"
  • o campo de valor está desabilitado e não é possível completar a compra.

Não entendi qual seria esse fluxo:
-Add contact dashboard ?

@henriquecbuss
Copy link
Member Author

  • o botão "MARCAR COMO COMPLETO" deve seguir o mesmo tamanho do botão "SALVAR"

Resolvido ✅

  • o modal do PIN (que aparece ao tentar salvar uma edição do objetivo) está desalinhado, está fora da área de visualização mobile com scroll para a lateral.

Não consegui replicar, para mim aparece normal:
image

os elementos de dentro do card encontram mais alinhados para as esquerda da tela e com pouco espaçamento entre eles

Como esse não é o foco desse PR, apenas ajustei alguns detalhes mais simples, mas sugiro revisitarmos essa tela em outro PR

  • os toogles estavam apresentando um comportamento estranho: ao habilitar uma função a outra desabilitava, as vezes eu conseguia habilitar uma função e depois não conseguia mais desabilitar.

Não consegui replicar, os toggles funcionam normalmente

  • Não consegui ativar o KYC.

Isso é intencional - a comunidade deve falar conosco para habilitar essa funcionalidade (idem para Sponsorship)

  • a palavra "habilitado" do recurso "Patrocinio" não muda de cor quando o toolge é habilitado

Isso acontece porque o toggle está desabilitado (não aceita input) - o mesmo acontece com o KYC, pois esses dois itens devem ser ativados/desativados por nós, manualmente. Talvez possamos mudar o estilo do toggle quando ele está desabilitado, o que acha?

  • os dois primeiros toogles funcionam com uma certa lentidão se formos comparar com o comportamento do último toogle.

Resolvido ✅

  • não consigo editar o título e nem o campo da mensagem

Quando estávamos criando o sponsorship, concordamos em deixar assim por enquanto, e se os admins quiserem mudar as configurações, eles devem falar conosco

  • os toogles não estão funcionando

Mesma coisa de cima ☝️

  • Quando eu acesso um comunicado para editá-lo e altero a data dele, essa nova data não atualiza no card. Eu salvo a alteração porém a data de agendamento continua sendo a anterior.

Resolvido ✅

  • Na versão mobile os componentes de data e horário estão desalinhados. Talvez o campo do horário possa ficar um pouco menor para aumentar o campo da data.

Resolvido ✅ coloquei os campos um em cima o outro em telas menores

  • Ao clicar em "ver mais" é só para o Admin ver como ficou a mensagem dele, não precisa carregar as mensagens anteriores.

Na minha opinião, o fluxo de mostrar na tela de notícias é melhor:

  • O admin vê como os outros usuários veem

  • Mostrar rich text no espaço limitado do card pode não ser uma boa ideia (pode ser que a notícia tenha um texto com H1, então o texto ficaria muito grande para um espaço muito pequeno - problema maior ainda quando permitirmos imagens no rich text); Acredito que mostrar o texto puro (sem formatações como negrito, itálico, H1, H2, links, imagens, etc.) pode fazer com que o admin ache que a formatação não foi salva.

  • Ao criar um novo comunicado, clicar em "ver mais" e depois clicar na seta de voltar (<) o toogle de "destacar comunicado" é desabilitado automaticamente.

Resolvido ✅

  • No dashboard -> na notificação (barra roxa) de novo comunicado: pode deixar um espaçamento de 16px nas bordas laterais, para que o icone do comunicado e o X fiquem mais proximos das bordas laterais.

Resolvido ✅

  • Ao abrir um card de uma ação que foi reivindicada, o texto inicial "Esta reivindicação foi cancelada" está muito grande

Resolvido ✅


Não entendi qual seria esse fluxo:
Add contact dashboard ?

Esse é o modal de adicionar contato que aparece quando o usuário não tem nenhum contato cadastrado. Na época que implementamos esse modal, decidimos que ele só deveria aparecer por um tempo limitado (até 01/01/2022), então ele não aparece mais. @lucca65 @juramos-2020 acham que devemos mostrar ele ainda ou podemos remover do código?

@henriquecbuss
Copy link
Member Author

o botão "comprar" está colado no texto "quantas unidades você quer"

Resolvido ✅ Coloquei um pouco mais de espaço, mas já vamos revisitar essa tela no shop facelift (#657)

o campo de valor está desabilitado e não é possível completar a compra.

Esse é o comportamento da tela: o usuário seleciona quantas unidades deseja comprar, e o campo de valor é automaticamente atualizado para mostrar o quanto vai custar a quantidade desejada. Novamente, podemos revisitar melhor esse fluxo no shop facelift

image

@lucca65
Copy link
Member

lucca65 commented Jan 26, 2022

Como esse não é o foco desse PR, apenas ajustei alguns detalhes mais simples, mas sugiro revisitarmos essa tela em outro PR

Temos a #670 que pode ser um bom lugar para resolver e melhorar essa implementação de ações

@lucca65
Copy link
Member

lucca65 commented Jan 26, 2022

Quando estávamos criando o sponsorship, concordamos em deixar assim por enquanto, e se os admins quiserem mudar as configurações, eles devem falar conosco

concordo. @juramos-2020 oq acha de melhorarmos essa comunicação? colocar um elemento para explicar melhor essas situações?

Pode criar uma issue pra isso @juramos-2020? acho que não vai ser complexo de melhorar e vai dar bons resultados

@lucca65
Copy link
Member

lucca65 commented Jan 26, 2022

Esse é o modal de adicionar contato que aparece quando o usuário não tem nenhum contato cadastrado. Na época que implementamos esse modal, decidimos que ele só deveria aparecer por um tempo limitado (até 01/01/2022), então ele não aparece mais. @lucca65 @juramos-2020 acham que devemos mostrar ele ainda ou podemos remover do código?

É verdade, eu tinha esquecido que tinha data pra ele deixar de aparecer.

acho que é útil e deve voltar a existir, ou deveria no mínimo ser incluído diretamente no cadastro, pois muitos usuários ficam incomunicáveis

Mas também é assunto para outra issue pessoal, acho que por hora podemos colocar o prazo do modal pra essa sexta pra gente testar os inputs e fluxo. assim testamos e tratamos melhor em separado depois.

a próxima versão não sai essa semana então está tranquilo

@juramos-2020
Copy link

Obrigada @NeoVier pelos ajustes ficou show !

Sobre o modal do PIN (que aparece ao tentar salvar uma edição do objetivo) e os toogles, eu não consigo te mostrar visualmente porque a guia anônima não permite gravar e nem printar a tela. Mas pelo menos fica o meu registro aqui de como ocorreu o teste 😉👍👍

Isso acontece porque o toggle está desabilitado (não aceita input) - o mesmo acontece com o KYC, pois esses dois itens devem ser ativados/desativados por nós, manualmente. Talvez possamos mudar o estilo do toggle quando ele está desabilitado, o que acha?

Tranquilo em relação a isso, o que eu quis dizer é que quando habilitamos um toogle a palavra muda de cor.
Ex: ativei o recurso comunicado -> o toogle fica roxo e a palavra do toogle muda de desabilitado para habilitado e a cor muda também, ficando roxa. Durante esse teste, em um momento eu consegui ativar o toogle desse recurso e a palavra habilitado continuou cinza. Foi esse o erro que quis reportar.
Deve ter sido um erro momentâneo, pois testei agora novamente e acho que foi corrigido. O comportamento de não ativar está acontecendo corretamente 😉👍

Na minha opinião, o fluxo de mostrar na tela de notícias é melhor:

sobre isso, eu quis dizer com Ao clicar em "ver mais" é só para o Admin vê como ficou a mensagem dele, não precisa carregar as mensagens anteriores. -> É que quando o admin clica em "ver mais" ele vê apenas o comunicado que ele acabou de criar, ele não precisa ver aquela listagem das mensagens criadas anteriormente. Segue design.

@juramos-2020
Copy link

É verdade, eu tinha esquecido que tinha data pra ele deixar de aparecer.
acho que é útil e deve voltar a existir, ou deveria no mínimo ser incluído diretamente no cadastro, pois muitos usuários ficam incomunicáveis

+1

@juramos-2020
Copy link

Quando estávamos criando o sponsorship, concordamos em deixar assim por enquanto, e se os admins quiserem mudar as configurações, eles devem falar conosco

concordo. @juramos-2020 oq acha de melhorarmos essa comunicação? colocar um elemento para explicar melhor essas situações?

Pensei e colocar o mesmo elemento que tem no KYC, aquele "?" com uma mensagem: Para ativar esse recurso a pessoa que administra a comunidade deve entrar em contato com equipe da Cambiatus para solicitar essa ativação.

O que vocês acham?

@juramos-2020
Copy link

@lucca65 @NeoVier Nova issue criada 😉👍

@henriquecbuss
Copy link
Member Author

@lucca65 @juramos-2020 aumentei a data limite do modal para essa sexta, agora é só acessar o dashboard sem nenhum contato cadastrado que ele aparece.

sobre isso, eu quis dizer com Ao clicar em "ver mais" é só para o Admin vê como ficou a mensagem dele, não precisa carregar as mensagens anteriores. -> É que quando o admin clica em "ver mais" ele vê apenas o comunicado que ele acabou de criar, ele não precisa ver aquela listagem das mensagens criadas anteriormente

Entendi. Resolvido ✅

@juramos-2020
Copy link

aumentei a data limite do modal para essa sexta, agora é só acessar o dashboard sem nenhum contato cadastrado que ele aparece.

Consegui testar nas duas versões, tudo certo 😉👍

@henriquecbuss
Copy link
Member Author

@lucca65 então acho que estamos prontos para mergear! Só preciso de uma aprovação no PR

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Create/use a standard way to deal with forms Fix user selection input styles
3 participants