refactor: melhorias de interface

Author: guiseek

.env-example

@@ -0,0 +1,9 @@
+PORT=3000
+
+DB_HOST=localhost
+DB_PORT=27017
+DB_NAME=devparana
+DB_USER=
+DB_PASS=
+
+JWT_SECRET=

README.md

@@ -1,77 +1,73 @@
-# Devmx
-
-<a alt="Nx logo" href="https://nx.dev" target="_blank" rel="noreferrer"><img src="https://raw.githubusercontent.com/nrwl/nx/master/images/nx-logo.png" width="45"></a>
-
-✨ Your new, shiny [Nx workspace](https://nx.dev) is almost ready ✨.
-
-[Learn more about this workspace setup and its capabilities](https://nx.dev/getting-started/intro#learn-nx?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects) or run `npx nx graph` to visually explore what was created. Now, let's get you up to speed!
+```
+     _                           
+  __| | _____   ___ __ ___ __  __
+ / _` |/ _ \ \ / / '_ ` _ \\ \/ /
+| (_| |  __/\ V /| | | | | |>  < 
+ \__,_|\___| \_/ |_| |_| |_/_/\_\
+```
+# dev member experience
 
-## Finish your CI setup
 
-[Click here to finish setting up your workspace!](https://cloud.nx.app/connect/MMUTh7bF3w)
+## Para executar em dev
 
+### Requisitos
+1. [pnpm](https://pnpm.io/installation) instalado
+1. [docker](https://docs.docker.com/engine/install) instalado
 
-## Run tasks
+### Configurações
 
-To run tasks with Nx use:
+Clone o projeto
 
 ```sh
-npx nx <target> <project-name>
+git clone https://github.com/DeveloperParana/devmx
 ```
 
-For example:
+Configure a senha do banco e segredo jwt como quiser para uso local
 
 ```sh
-npx nx build myproject
+mv .env-example .env
 ```
 
-These targets are either [inferred automatically](https://nx.dev/concepts/inferred-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) or defined in the `project.json` or `package.json` files.
-
-[More about running tasks in the docs &raquo;](https://nx.dev/features/run-tasks?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-
-## Add new projects
+Preencha os valores para `DB_USER`, `DB_PASS`, `JWT_SECRET` e salve antes de executar o docker.
 
-While you could add new projects to your workspace manually, you might want to leverage [Nx plugins](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) and their [code generation](https://nx.dev/features/generate-code?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) feature.
-
-To install a new plugin you can use the `nx add` command. Here's an example of adding the React plugin:
 ```sh
-npx nx add @nx/react
+docker compose up -d
 ```
 
-Use the plugin's generator to create new projects. For example, to create a new React app or library:
+Instale as dependências
 
 ```sh
-# Genenerate an app
-npx nx g @nx/react:app demo
-
-# Generate a library
-npx nx g @nx/react:lib some-lib
+pnpm install
 ```
 
-You can use `npx nx list` to get a list of installed plugins. Then, run `npx nx list <plugin-name>` to learn about more specific capabilities of a particular plugin. Alternatively, [install Nx Console](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) to browse plugins and generators in your IDE.
-
-[Learn more about Nx plugins &raquo;](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects) | [Browse the plugin registry &raquo;](https://nx.dev/plugin-registry?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+Execute o back-end e front-end
 
+```sh
+pnpm dev
+```
 
-[Learn more about Nx on CI](https://nx.dev/ci/intro/ci-with-nx#ready-get-started-with-your-provider?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+## Para commits
 
-## Install Nx Console
+```sh
+pnpm cmt
+```
 
-Nx Console is an editor extension that enriches your developer experience. It lets you run tasks, generate code, and improves code autocompletion in your IDE. It is available for VSCode and IntelliJ.
+Responda as perguntas para fazer o commit.
 
-[Install Nx Console &raquo;](https://nx.dev/getting-started/editor-setup?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
 
-## Useful links
+## Responsabilidades e relacionamentos
 
-Learn more:
+Trata-se de responsabilidade e relacionamentos, ou seja, qual a responsabilidade de cada camada e quais camadas podem depender diretamente uma das outras. Na tabela a seguir vemos que camadas do tipo `util` podem depender apenas de camadas que também sejam do tipo `util`, camadas do tipo `domain` podem depender apenas de camadas do tipo `util` e `api`, camadas do tipo `data-source` podem depender apenas dos tipos `util`, `domain` e `api`, e assim por diante...
 
-- [Learn more about this workspace setup](https://nx.dev/getting-started/intro#learn-nx?utm_source=nx_project&amp;utm_medium=readme&amp;utm_campaign=nx_projects)
-- [Learn about Nx on CI](https://nx.dev/ci/intro/ci-with-nx?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-- [Releasing Packages with Nx release](https://nx.dev/features/manage-releases?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
-- [What are Nx plugins?](https://nx.dev/concepts/nx-plugins?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+Caso tenha interesse em aprofundar neste assunto e descobrir os motivos, recomendo que leia um conteúdo que escrevi ano passado, você pode fazer download através do link a seguir. [Arquitetura em camadas, uma abordagem sobre responsabilidades e relacionamentos](https://conteudode.dev/pdf/nx)
 
-And join the Nx community:
-- [Discord](https://go.nx.dev/community)
-- [Follow us on X](https://twitter.com/nxdevtools) or [LinkedIn](https://www.linkedin.com/company/nrwl)
-- [Our Youtube channel](https://www.youtube.com/@nxdevtools)
-- [Our blog](https://nx.dev/blog?utm_source=nx_project&utm_medium=readme&utm_campaign=nx_projects)
+|               | util | domain | data-source | data-access | resource | feature | app | api |
+| ------------: | :--: | :----: | :---------: | :---------: | :------: | :-----: | :-: | :-: |
+|        `util` |  ✓   |   ✓    |      ✓      |      ✓      |    ✓     |    ✓    |  ✓  |  ✓  |
+|      `domain` |  𝗫   |   𝗫    |      ✓      |      ✓      |    𝗫     |    𝗫    |  𝗫  |  ✓  |
+| `data-source` |  𝗫   |   𝗫    |      𝗫      |      𝗫      |    ✓     |    𝗫    |  ✓  |  ✓  |
+| `data-access` |  𝗫   |   𝗫    |      𝗫      |      𝗫      |    𝗫     |    ✓    |  ✓  |  ✓  |
+|    `resource` |  𝗫   |   𝗫    |      𝗫      |      𝗫      |    ✓     |    𝗫    |  ✓  |  ✓  |
+|     `feature` |  𝗫   |   𝗫    |      𝗫      |      𝗫      |    𝗫     |    ✓    |  ✓  |  ✓  |
+|         `app` |  𝗫   |   𝗫    |      𝗫      |      𝗫      |    𝗫     |    𝗫    |  𝗫  |  𝗫  |
+|         `api` |  𝗫   |   ✓    |      ✓      |      ✓      |    ✓     |    ✓    |  ✓  |  ✓  |

apps/devmx/proxy.conf.json

@@ -2,5 +2,9 @@
   "/api": {
     "target": "http://localhost:3000",
     "secure": false
+  },
+  "/photos": {
+    "target": "http://localhost:3000",
+    "secure": false
   }
 }

apps/devmx/public/figures/password.svg

@@ -1,6 +1,6 @@
 import { provideAnimationsAsync } from '@angular/platform-browser/animations/async';
 import { provideEnv, provideHttpClientImpl } from '@devmx/shared-data-access';
-import { provideRouter, withViewTransitions } from '@angular/router';
+import { provideRouter, withRouterConfig, withViewTransitions } from '@angular/router';
 import { registerLocaleData } from '@angular/common';
 import { authInterceptor } from './interceptors';
 import ptBr from '@angular/common/locales/extra/br';
@@ -26,7 +26,9 @@ registerLocaleData(pt, 'pt-BR', ptBr);
 export const appConfig: ApplicationConfig = {
   providers: [
     provideZoneChangeDetection({ eventCoalescing: true }),
-    provideRouter(appRoutes, withViewTransitions()),
+    provideRouter(appRoutes, withViewTransitions(), withRouterConfig({
+      urlUpdateStrategy: 'eager'
+    })),
     provideAnimationsAsync(),
     {
       provide: LOCALE_ID,

apps/devmx/src/app/app.config.ts

@@ -2,4 +2,7 @@ export const env = {
   api: {
     url: '/api',
   },
+  photos: {
+    url: '/photos'
+  }
 };

apps/devmx/src/envs/env.ts

@@ -2,6 +2,10 @@
 @use '@angular/material' as mat;
 // Plus imports for other components in your app.
 
+body {
+  --mdc-filled-button-container-color: #39b44d;
+}
+
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
@@ -12,8 +16,8 @@ $light: mat.define-theme(
   (
     color: (
       theme-type: light,
-      primary: mat.$azure-palette,
-      tertiary: mat.$blue-palette,
+      primary: mat.$green-palette,
+      tertiary: mat.$spring-green-palette,
     ),
     density: (
       scale: 0,

apps/devmx/src/scss/_theme.scss

@@ -14,3 +14,30 @@ kbd {
   vertical-align: middle;
   user-select: none; /* Evita que o texto seja selecionado */
 }
+
+.flex {
+  display: flex;
+
+  &.column {
+    flex-direction: column;
+  }
+
+  &.justify-between {
+    justify-content: space-between;
+  }
+}
+
+.gap {
+  &-1 {
+    gap: 1em;
+  }
+  &-2 {
+    gap: 2em;
+  }
+  &-3 {
+    gap: 3em;
+  }
+  &-4 {
+    gap: 4em;
+  }
+}

apps/devmx/src/scss/_utils.scss

@@ -1,7 +1,9 @@
+@use '@angular/cdk/overlay-prebuilt.css';
 @use '@angular/material' as mat;
 @use './scss/theme' as theme;
 @use './scss/utils';
 
+
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
@@ -25,3 +27,14 @@ body {
   margin: 0;
   font-family: Roboto, 'Helvetica Neue', sans-serif;
 }
+
+a:link,
+a:visited,
+a:active {
+  color: rgb(7, 80, 224);
+  text-decoration: none;
+
+  &:hover {
+    text-decoration: underline;
+  }
+}

apps/devmx/src/styles.scss

@@ -0,0 +1,64 @@
+// prettier-ignore
+/** @type {import('cz-git').UserConfig['prompt']} */
+module.exports = {
+  alias: { fd: 'docs: fix typos' },
+  messages: {
+    type: 'Selecione o tipo de alteração que você está comitando:',
+    scope: 'Informe o ESCOPO desta alteração (opcional):',
+    customScope: 'Escreva o ESCOPO desta alteração:',
+    subject: 'Escreva uma descrição CURTA e IMPERATIVA da mudança:\n',
+    body: 'Forneça uma descrição MAIS LONGA da mudança (opcional). Use "|" para quebrar uma nova linha:\n',
+    breaking: 'Liste quaisquer BREAKING CHANGES (opcional). Use "|" para quebrar nova linha:\n',
+    footerPrefixesSelect: 'Select the ISSUES type of change List by this change (optional):',
+    customFooterPrefix: 'Input ISSUES prefix:',
+    footer: 'List any ISSUES by this change. E.g.: #31, #34:\n',
+    generatingByAI: 'Generating your AI commit subject...',
+    generatedSelectByAI: 'Select suitable subject by AI generated:',
+    confirmCommit: 'Are you sure you want to proceed with the commit above?'
+  },
+  types: [
+    { value: 'feat', name: 'feat:     Nova funcionalidade', emoji: ':sparkles:' },
+    { value: 'fix', name: 'fix:      Correção de bug', emoji: ':bug:' },
+    { value: 'docs', name: 'docs:     Apenas mudanças em documentação', emoji: ':memo:' },
+    { value: 'style', name: 'style:    Mudança no código que não afeta seu funcionamento', emoji: ':lipstick:' },
+    { value: 'refactor', name: 'refactor: Alteração de código que não corrige bug nem adiciona recurso', emoji: ':recycle:' },
+    { value: 'perf', name: 'perf:     Mudança no código que melhora o desempenho', emoji: ':zap:' },
+    { value: 'test', name: 'test:     Adiciona testes ou corrige testes existentes', emoji: ':white_check_mark:' },
+    { value: 'build', name: 'build:    Alteração que afeta o build ou dependências externas', emoji: ':package:' },
+    { value: 'ci', name: 'ci:       Alteração em arquivos de configuração e scripts de CI', emoji: ':ferris_wheel:' },
+    { value: 'chore', name: 'chore:    Alteração fora dos diretórios src/**/*', emoji: ':hammer:' },
+    { value: 'revert', name: 'revert:   Reverte um commit anterior', emoji: ':rewind:' }
+  ],
+  useEmoji: false,
+  emojiAlign: 'center',
+  useAI: false,
+  aiNumber: 1,
+  themeColorCode: '',
+  scopes: [],
+  allowCustomScopes: true,
+  allowEmptyScopes: true,
+  customScopesAlign: 'bottom',
+  customScopesAlias: 'custom',
+  emptyScopesAlias: 'empty',
+  upperCaseSubject: false,
+  markBreakingChangeMode: false,
+  allowBreakingChanges: ['feat', 'fix'],
+  breaklineNumber: 100,
+  breaklineChar: '|',
+  skipQuestions: [],
+  issuePrefixes: [{ value: 'closed', name: 'closed:   ISSUES has been processed' }],
+  customIssuePrefixAlign: 'top',
+  emptyIssuePrefixAlias: 'skip',
+  customIssuePrefixAlias: 'custom',
+  allowCustomIssuePrefix: false,
+  allowEmptyIssuePrefix: false,
+  confirmColorize: true,
+  maxHeaderLength: Infinity,
+  maxSubjectLength: Infinity,
+  minSubjectLength: 0,
+  scopeOverrides: undefined,
+  defaultBody: '',
+  defaultIssues: '',
+  defaultScope: '',
+  defaultSubject: ''
+}

config/cz.config.js

@@ -3,7 +3,8 @@
   "version": "0.0.0",
   "license": "MIT",
   "scripts": {
-    "dev": "nx run-many -t serve --projects=server,devmx"
+    "dev": "nx run-many -t serve --projects=server,devmx",
+    "cmt": "czg"
   },
   "private": true,
   "devDependencies": {
@@ -42,6 +43,7 @@
     "@typescript-eslint/eslint-plugin": "^7.16.0",
     "@typescript-eslint/parser": "^7.16.0",
     "@typescript-eslint/utils": "^7.16.0",
+    "czg": "^1.9.4",
     "eslint": "~8.57.0",
     "eslint-config-prettier": "^9.0.0",
     "jest": "^29.7.0",
@@ -87,5 +89,11 @@
     "rxjs": "^7.8.0",
     "tslib": "^2.3.0",
     "zone.js": "~0.14.3"
+  },
+  "config": {
+    "commitizen": {
+      "path": "node_modules/cz-git",
+      "czConfig": "./config/cz.config.js"
+    }
   }
 }

package.json

@@ -81,7 +81,7 @@ export class AccountFacade extends State<AccountState> {
   uploadPhoto(photo: Blob) {
     const request$ = this.uploadPhotoUseCase.execute(photo);
 
-    request$.pipe(take(1)).subscribe((account) => this.setState({ account }));
+    request$.pipe(take(1)).subscribe(({ id }) => this.loadOne(id));
   }
 
   remove(id: string) {