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

Feature/shop categories #760

Merged
merged 107 commits into from
Jul 6, 2022
Merged

Feature/shop categories #760

merged 107 commits into from
Jul 6, 2022

Conversation

henriquecbuss
Copy link
Member

@henriquecbuss henriquecbuss commented Jun 9, 2022

What issue does this PR close

Closes #754

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

  • Create a new page to manage shop categories (/community/settings/shop/categories)
  • Create a link to that new page in the settings page
  • Display categories as a list of collapsable trees
  • Allow creation of new categories (including nested ones)
  • Add way to view all of the category details
  • Allow updating existing categories (including nested ones)
  • Allow deleting existing categories
  • Update the community model after creating/updating/deleting categories so that the change shows up without having to refresh
  • Add ability to drag and drop categories to reorder them (including changing parents)
  • Add up/down buttons to reorder categories (including changing parents)

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

  1. Log into a community you're the admin of
  2. Go to the settings page (cog icon on the top right)
  3. Check that there is a new card related to shop categories and click into it
  4. Check the empty state
  5. Create new categories, nesting them inside each other
  6. Try to reorder them by dragging and by using the up/down buttons (inside the ... button on each category)
  7. Try to edit their main information and their sharing/metadata information (you can edit the main information by clicking on the name of the category, or in the ... button)
  8. Try deleting categories and make sure all of their children are deleted with them (you should see a warning before deleting categories)
  9. Since we didn't have a design from the design team for this, check how it looks!

@netlify
Copy link

netlify bot commented Jun 9, 2022

Deploy Preview for cambiatus-elm-book ready!

Name Link
🔨 Latest commit d4e55f8
🔍 Latest deploy log https://app.netlify.com/sites/cambiatus-elm-book/deploys/62c5e4ebb4f6d400096f59e7
😎 Deploy Preview https://deploy-preview-760--cambiatus-elm-book.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@netlify
Copy link

netlify bot commented Jun 9, 2022

Deploy done!

Name Link
🔨 Latest commit d4e55f8
🔍 Latest deploy log https://app.netlify.com/sites/cambiatus/deploys/62c5e4eb390df70008a42e41
😎 Deploy Preview https://deploy-preview-760--cambiatus.netlify.app/
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

@henriquecbuss
Copy link
Member Author

@lucca65 I have a few implementation questions, can you help me out?

  1. When deleting a category, should we delete all of its children? If so, do we need to send one mutation per child, or does the backend do that for us already? I guess it would be nice to have a confirmation modal for this
  2. Should the category description be plain text or are we going to use markdown?
  3. Are we going to use the imageUri, iconUri and the meta* fields right now? I'm not sure how/where we'll display the image/icon
  4. Amharic slugs might be hard 😅. How do you think we should proceed? The only slug package in Elm doesn't support Amharic (it can't parse it, and considers it an error), but I found a combination of a JS slug package with an amharic transliteration table which converts Amharic characters to latin characters. Since I don't know Amharic, I'm not sure how common it is to represent them in latin form. I tried looking for examples of Amharic websites with slugs, but couldn't find anything. The closest I could find was BBC (the "slugs" aren't related to the article title):

@lucca65
Copy link
Member

lucca65 commented Jun 10, 2022

When deleting a category, should we delete all of its children? If so, do we need to send one mutation per child, or does the backend do that for us already? I guess it would be nice to have a confirmation modal for this

Bro, I'm somewhat out of context, but I'll adjust the backend to cascade the deletion in this case. This way you only worry about sending a single mutation that will automatically delete all children

Should the category description be plain text or are we going to use markdown?

My vote is for markdown

Are we going to use the imageUri, iconUri and the meta* fields right now? I'm not sure how/where we'll display the image/icon

Well I've added those as optional, so we don't really have to fill it. It would be nice to have this from the get go, but we would go astray, without the design team, might be a big step. I can visualize how it would look like on the end, with very similar results to a table with inputs and modals to add information, but I'll leave this one to you, please organize and choose the features the way you see fit

Amharic slugs might be hard 😅

To be honest I haven't even thought about it... I thought it would simply URL encode characters it won't knew how to properly render. the internet standards are not very inclusive I guess...

When rendering the slugs we have to keep in mind that this is not something for us, but for the indexing bots. We only need the ID. I think its a fair tradeoff to loose some visibility to google spiders 👍

@lucca65
Copy link
Member

lucca65 commented Jun 10, 2022

oh, one more thing... I'm adding more tests to the categories/subcategories relationships and it might change the api a little bit... the way I'm creating self references isn't the most used one for relational databases so it might take some tweaking! I'll ping you when its done

@henriquecbuss
Copy link
Member Author

Podemos ajustar os espaçamentos dos modais para 24px das bordas:

@juramos-2020 esse é o espaçamento que usamos em todos os modais... Quer aumentar o espaçamento só nesse modal ou em todos?


@lucca65 o erro para criar categoria é por causa do position, que é obrigatória. Devemos mandar algo como 0, ou o vai ter alguma alteração no backend?

@lucca65
Copy link
Member

lucca65 commented Jul 5, 2022

pode mandar como 0. ao deletar está dando um erro, vou arrumar e criar um caso de teste também

@juramos-2020
Copy link

@juramos-2020 esse é o espaçamento que usamos em todos os modais... Quer aumentar o espaçamento só nesse modal ou em todos?

Henrique, se for fácil mudar em todos (24px apenas para desktop) pode mudar. O nosso DS ta meio desajustado no momento mas vamos trabalhar para padronizar esses componentes🏃‍♂️ . Se for muito trabalhoso mudar em todos podemos ajustar só esse e atualizamos os demais em uma próxima oportunidade.

@henriquecbuss
Copy link
Member Author

Não é trabalhoso, mas eu diria que é melhor deixarmos isso para outro PR, onde podemos testar melhor os outros modais, pra garantir que nada quebre ou fique estranho. Por enquanto, ajustei só nesse modal

@lucca65
Copy link
Member

lucca65 commented Jul 5, 2022

@NeoVier @juramos-2020 arrumei a deleção, agora ao apagar uma categoria pai, também seus filhos e netos são apagados automaticamente. Já fiz o deploy em staging.

@juramos-2020
Copy link

Não é trabalhoso, mas eu diria que é melhor deixarmos isso para outro PR, onde podemos testar melhor os outros modais, pra garantir que nada quebre ou fique estranho. Por enquanto, ajustei só nesse modal

sucesso 💪

@juramos-2020
Copy link

@NeoVier @juramos-2020 arrumei a deleção, agora ao apagar uma categoria pai, também seus filhos e netos são apagados automaticamente. Já fiz o deploy em staging.

Isso quer dizer que devo mudar o link que estou fazendo os testes? Por enquanto estou usando esse do deploy

@henriquecbuss
Copy link
Member Author

Pode continuar usando esse link mesmo Ju

@juramos-2020
Copy link

Oi @lucca65 @NeoVier achei essa referência do Asana bem legal sobre a questão de ordenar para cima e para baixo.
Ver como se comporta a ordenação entre os tópicos e sub tópicos. Conseguimos ver também a hierarquia visual dando um bold para os textos dos tópicos.

Estou compartilhando com o intuito de ajudar nas pesquisas e estudos que vocês estão fazendo ☺️👍

@juramos-2020
Copy link

O upload está dando erro através do celular. Vou tentar fazer o upload mais tarde através do notebook ☺️

@juramos-2020
Copy link

Consegui gerar um link do Google fotos 😅 https://photos.app.goo.gl/e6PZsiRWW6KuaHTm7

@henriquecbuss
Copy link
Member Author

@juramos-2020 deixei esses comentários na issue que vamos tratar o ordenamento: #780 (comment)

@juramos-2020
Copy link

juramos-2020 commented Jul 6, 2022

Olá @NeoVier

  • Check that there is a new card related to shop categories and click into it ✔ (ok funcionando como o esperado)

  • Check the empty state ✔ (ok funcionando como o esperado)

  • Crie novas categorias ✔ (ok funcionando como o esperado)

  • Tente editar suas informações principais e suas informações de compartilhamento/metadados (você pode editar as informações principais clicando no nome da categoria ou no ...botão) ✔ (ok funcionando como o esperado)

  • Tente excluir categorias e certifique-se de que todos os seus filhos sejam excluídos com eles (você deve ver um aviso antes de excluir categorias) ✔ (ok funcionando como o esperado)

Tá demais 🐱‍👤🚀

  • Tente reordená-los arrastando e usando os botões para cima/para baixo (dentro do ...botão de cada categoria) ⚠

Criei 3 categorias e subcategorias

1. Alimentos
1.1 . massas
1.2. orgânicos
1.3. vitaminas
2. Produtos Pets
2.1. Higiene
3. Mover

(obs.: temos como colocar apenas as categorias com o texto em negrito? para termos uma diferenciação entre as categorias e subcategorias?)

No desktop: Tanto com o "arrastar" do mouse como usando os iconês de "mover para cima" e "mover para baixo" eu só consigo mover uma subcategoria se for para dentro de outra subcategoria ou para dentro de outra categoria. Não consigo fazer com que o "orgânicos", por exemplo, fique em cima de "massas".
Também consigo fazer com que o uma categoria fique dentro de outra categoria. E consigo que uma subcategoria ocupe a posição de uma categoria.

Estou na dúvida se esses são os comportamentos esperados pois vocês comentaram "Removi a parte de ordenação, deixando só a funcionalidade de trocar de pais". Eu tinha entendido algo sobre isso mas acho que entendi errado. Então, por favor, você pode me explicar melhor qual seria o comportamento esperado com isso?

No mobile: o comportamento de pressionar com os dedos e mover não está funcionando muito bem, tem momentos que funciona outros não. Vou tentar com outro celular 😉

Tiveram alguns momentos em que eu cliquei naquele menu, que estamos usando com os "3 pontinhos", e por algumas vezes ele abrir em diferentes espaços na tela.
Uma das vezes ele apareceu de forma "cortada", conforme a imagem abaixo, e tiveram vezes em que eu cliquei no nome da categoria e ele abriu no meio da tela.

Então temos algumas situações para observar/corrigir:

1 - Quando as opções do menu aparecem "cortadas",
2 - Seria bom definirmos um local fixo para a abertura desse menu. Acho que faz sentido se for na lateral esqueda da tela, justamente aonde o icone está posicionado, mas temos que ter cuidado para que não tenha esse "corte"
3 - O comportamento de clicar no nome e abrir o menu está correto?
4 - Percebi que na versão desktop temos o icone de edição e não temos ele na versão mobile. Seria isso mesmo?

dots

@henriquecbuss
Copy link
Member Author

henriquecbuss commented Jul 6, 2022

No desktop: Tanto com o "arrastar" do mouse como usando os iconês de "mover para cima" e "mover para baixo" eu só consigo mover uma subcategoria se for para dentro de outra subcategoria ou para dentro de outra categoria. Não consigo fazer com que o "orgânicos", por exemplo, fique em cima de "massas".

Por enquanto, esse é o comportamento esperado. Vamos adicionar a ordenação em #780.

Estou na dúvida se esses são os comportamentos esperados pois vocês comentaram "Removi a parte de ordenação, deixando só a funcionalidade de trocar de pais". Eu tinha entendido algo sobre isso mas acho que entendi errado. Então, por favor, você pode me explicar melhor qual seria o comportamento esperado com isso?

Ordenação é a habilidade de escolher a ordem em que as categorias vão aparecer (por exemplo, massas antes de orgânicos, ou orgânicos antes de massas). Até resolvermos #780, não teremos essa habilidade. A única coisa que podemos fazer é trocar o pai de uma categoria (por exemplo, fazer com que massas seja uma subcategoria de "Produtos Pets"). As categorias serão ordenadas por ordem alfabética dentro de cada contexto (ou seja, as categorias "Alimentos", "Produtos Pets" e "Mover" serão organizadas por ordem alfabética. Dentro de "Alimentos", as categorias massas, orgânicos e vitaminas serão organizadas por ordem alfabética, e assim por diante)


Também consigo fazer com que o uma categoria fique dentro de outra categoria. E consigo que uma subcategoria ocupe a posição de uma categoria.

Não vejo motivos para não deixar transformar sub-categorias em categorias e vice-versa (caso tenha algum motivo em mente, sinta-se à vontade para explicar 😁).

Dito isso, não existe uma diferenciação entre categoria e sub-categoria (é tudo categoria, a única diferença é que algumas tem categorias pais, outras não).


(obs.: temos como colocar apenas as categorias com o texto em negrito? para termos uma diferenciação entre as categorias e subcategorias?)

Vou alterar


o comportamento de pressionar com os dedos e mover não está funcionando muito bem, tem momentos que funciona outros não. Vou tentar com outro celular 😉

Tiveram alguns momentos em que eu cliquei naquele menu, que estamos usando com os "3 pontinhos", e por algumas vezes ele abrir em diferentes espaços na tela.

O comportamento de clicar no nome e abrir o menu está correto?

Acredito que isso seja por causa do comportamento de abrir o menu com o botão direito do mouse. No celular, isso acontece ao manter pressionado. Vou arrumar!

Também vou resolver a questão de ele ficar cortado, fazendo com que ele apareça para o outro lado (ao invés de aparecer à direita do mouse, aparecer à esquerda)


Percebi que na versão desktop temos o icone de edição e não temos ele na versão mobile. Seria isso mesmo?

Para economizar espaço, o ícone de edição entra no menu dos três pontinhos em telas menores, como mencionado nos comentários anteriores.

@henriquecbuss
Copy link
Member Author

@juramos-2020 ajustes feitos ✅

@juramos-2020
Copy link

Ordenação é a habilidade de escolher a ordem em que as categorias vão aparecer (por exemplo, massas antes de orgânicos, ou orgânicos antes de massas). Até resolvermos #780, não teremos essa habilidade. A única coisa que podemos fazer é trocar o pai de uma categoria (por exemplo, fazer com que massas seja uma subcategoria de "Produtos Pets"). As categorias serão ordenadas por ordem alfabética dentro de cada contexto (ou seja, as categorias "Alimentos", "Produtos Pets" e "Mover" serão organizadas por ordem alfabética. Dentro de "Alimentos", as categorias massas, orgânicos e vitaminas serão organizadas por ordem alfabética, e assim por diante)

Sucesso Henrique obrigada pela explicação 😍

Não vejo motivos para não deixar transformar sub-categorias em categorias e vice-versa (caso tenha algum motivo em mente, sinta-se à vontade para explicar 😁).

Sobre isso não é um problema não. Só estava reportando pois estava na dúvida se vcs estavam esperando esse comportamento.

Para economizar espaço, o ícone de edição entra no menu dos três pontinhos em telas menores, como mencionado nos comentários anteriores.

Sucesso então ☺️👍

@henriquecbuss henriquecbuss merged commit 86521e4 into master Jul 6, 2022
@henriquecbuss henriquecbuss deleted the feature/shop-categories branch July 6, 2022 20:10
@henriquecbuss
Copy link
Member Author

Valeu @lucca65 e @juramos-2020 pela paciência, esse PR foi uma bela duma luta 😁

@juramos-2020
Copy link

Você Arrasou demais Henrique 😻😻😻

🎉💯💚🤹🧞

Queria colocar um Gif animado mas não tô conseguindo 😂😂😂😂

@lucca65
Copy link
Member

lucca65 commented Jul 6, 2022

Ufa pessoal! parabéns! foi um baita de um PR memorável! Vamos comemorar pq é merecido!

@juramos-2020
Copy link

Imagina Henrique, nada de paciência senão eu posso dizer o mesmo hahahahaha
obrigada pela paciência também.😂😂😂

Você fez um lindo trabalho 😍

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.

Visualização e edição de categorias na comunidade
3 participants