Merge remote-tracking branch 'upstream/main'

This commit is contained in:
Sven Brodny
2024-04-18 23:41:36 +02:00
39 changed files with 6708 additions and 2582 deletions

View File

@@ -100,6 +100,15 @@
"challenge"
]
},
{
"login": "alcaidio",
"name": "Timothy Alcaide",
"avatar_url": "https://avatars.githubusercontent.com/u/17033036?v=4",
"profile": "https://twitter.com/alcaidio",
"contributions": [
"challenge"
]
},
{
"login": "alan-bio",
"name": "Alan Dragicevich",

14
.github/github-action/action.yml vendored Normal file
View File

@@ -0,0 +1,14 @@
name: 'Hello World'
description: 'Greet someone and record the time'
inputs:
github_token:
description: A GitHub token.
required: false
default: ${{ github.token }}
repo:
description: The owner and repository name.
required: false
default: ${{ github.repository }}
runs:
using: 'node20'
main: 'index.js'

16
.github/github-action/contributors.js vendored Normal file
View File

@@ -0,0 +1,16 @@
const contributors = [
'tomalaforge',
'alcaidio',
'svenson95',
'jdegand',
'DeveshChau',
'stillst',
'wandri',
'webbomj',
'kabrunko-dev',
'Sanjar1304'
];
module.exports = {
contributors
};

40
.github/github-action/index.js vendored Normal file
View File

@@ -0,0 +1,40 @@
const github = require('@actions/github');
const core = require('@actions/core');
const { contributors } = require('./contributors');
async function run() {
try {
const title = github.context.payload.pull_request.title;
const labels = ['answer'];
const match = title.match(/Answer:\s*(\d+)/);
if (match) {
labels.push(String(parseInt(match[1], 10)));
}
const actor = github.context.actor;
if(contributors.includes(actor)) {
labels.push('to be reviewed');
}
const githubToken = core.getInput('github_token');
const [owner, repo] = core.getInput('repo').split('/');
const number = github.context.issue.number;
const octokit = github.getOctokit(githubToken);
await octokit.rest.issues.addLabels({
labels,
owner,
repo,
issue_number: number
});
} catch (e) {
if (e instanceof Error) {
core.error(e);
core.setFailed(e.message);
}
}
}
run();

View File

@@ -2,28 +2,20 @@ name: Add Labels
on:
pull_request:
types: [ opened ]
types: [ opened, edited, synchronize ]
jobs:
add_supporters:
runs-on: ubuntu-latest
if: ${{ startsWith(github.event.pull_request.title, 'Answer') }}
steps:
- name: checkout
uses: actions/checkout@v2
- name: add labels
uses: actions-ecosystem/action-add-labels@v1
if: ${{ contains( fromJson('[ "tomalaforge", "alcaidio" , "svenson95", "jdegand", "DeveshChau", "stillst", "wandri", "webbomj", "kabrunko-dev", "Sanjar1304"]'), github.actor ) && startsWith(github.event.pull_request.title, 'Answer') }}
with:
labels: supporter
add_answers:
runs-on: ubuntu-latest
steps:
- name: checkout
uses: actions/checkout@v2
- name: Install dependencies
run: npm i @actions/core @actions/github
- name: add labels
uses: actions-ecosystem/action-add-labels@v1
if: ${{ startsWith(github.event.pull_request.title, 'Answer') }}
- name: Add labels
uses: ./.github/github-action/
with:
labels: answer
github_token: ${{ secrets.GITHUB_TOKEN }}

View File

@@ -40,24 +40,27 @@ Check [all 48 challenges](https://angular-challenges.vercel.app/)
<td align="center" valign="top" width="14.28%"><a href="https://github.com/DeveshChau"><img src="https://avatars.githubusercontent.com/u/9509673?v=4?s=100" width="100px;" alt="Devesh Chaudhari"/><br /><sub><b>Devesh Chaudhari</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=DeveshChau" title="Code">💻</a> <a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3ADeveshChau" title="Bug reports">🐛</a> <a href="#challenge-DeveshChau" title="Create a challenge">🧩</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/stillst"><img src="https://avatars.githubusercontent.com/u/1463098?v=4?s=100" width="100px;" alt="stillst"/><br /><sub><b>stillst</b></sub></a><br /><a href="#challenge-stillst" title="Create a challenge">🧩</a> <a href="#translation-ru-stillst" title="Translate in Russian">🇷🇺</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://wandrille-guesdon.com/"><img src="https://avatars.githubusercontent.com/u/15016833?v=4?s=100" width="100px;" alt="Wandrille"/><br /><sub><b>Wandrille</b></sub></a><br /><a href="#challenge-wandri" title="Create a challenge">🧩</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/alan-bio"><img src="https://avatars.githubusercontent.com/u/31838230?v=4?s=100" width="100px;" alt="Alan Dragicevich"/><br /><sub><b>Alan Dragicevich</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=alan-bio" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://twitter.com/alcaidio"><img src="https://avatars.githubusercontent.com/u/17033036?v=4?s=100" width="100px;" alt="Timothy Alcaide"/><br /><sub><b>Timothy Alcaide</b></sub></a><br /><a href="#challenge-alcaidio" title="Create a challenge">🧩</a></td>
</tr>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/alan-bio"><img src="https://avatars.githubusercontent.com/u/31838230?v=4?s=100" width="100px;" alt="Alan Dragicevich"/><br /><sub><b>Alan Dragicevich</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=alan-bio" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/edimitchel"><img src="https://avatars.githubusercontent.com/u/2922851?v=4?s=100" width="100px;" alt="Michel EDIGHOFFER"/><br /><sub><b>Michel EDIGHOFFER</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=edimitchel" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/gsgonzalez88"><img src="https://avatars.githubusercontent.com/u/39884678?v=4?s=100" width="100px;" alt="Gerardo Sebastian Gonzalez"/><br /><sub><b>Gerardo Sebastian Gonzalez</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=gsgonzalez88" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/marryday"><img src="https://avatars.githubusercontent.com/u/57489315?v=4?s=100" width="100px;" alt="Evseev Yuriy"/><br /><sub><b>Evseev Yuriy</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3Amarryday" title="Bug reports">🐛</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/tomer953"><img src="https://avatars.githubusercontent.com/u/1807493?v=4?s=100" width="100px;" alt="Tomer953"/><br /><sub><b>Tomer953</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/issues?q=author%3Atomer953" title="Bug reports">🐛</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomer953" title="Documentation">📖</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=tomer953" title="Code">💻</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/dmmishchenko"><img src="https://avatars.githubusercontent.com/u/51910160?v=4?s=100" width="100px;" alt="Dmitriy Mishchenko"/><br /><sub><b>Dmitriy Mishchenko</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=dmmishchenko" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="http://www.sagardev.com.np"><img src="https://avatars.githubusercontent.com/u/30800393?v=4?s=100" width="100px;" alt="Sagar Devkota"/><br /><sub><b>Sagar Devkota</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=Sagardevkota" title="Documentation">📖</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=Sagardevkota" title="Code">💻</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://nelsonguti.dev/"><img src="https://avatars.githubusercontent.com/u/62297014?v=4?s=100" width="100px;" alt="Nelson Gutierrez"/><br /><sub><b>Nelson Gutierrez</b></sub></a><br /><a href="#translation-es-nelsongutidev" title="Translate in Spanish">🇪🇸</a></td>
</tr>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://nelsonguti.dev/"><img src="https://avatars.githubusercontent.com/u/62297014?v=4?s=100" width="100px;" alt="Nelson Gutierrez"/><br /><sub><b>Nelson Gutierrez</b></sub></a><br /><a href="#translation-es-nelsongutidev" title="Translate in Spanish">🇪🇸</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/ho-ssain"><img src="https://avatars.githubusercontent.com/u/61125174?v=4?s=100" width="100px;" alt="Hossain K. M."/><br /><sub><b>Hossain K. M.</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=ho-ssain" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/kabrunko-dev/"><img src="https://avatars.githubusercontent.com/u/142346548?v=4?s=100" width="100px;" alt="Diogo Nishikawa"/><br /><sub><b>Diogo Nishikawa</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Code">💻</a> <a href="#translation-pt-kabrunko-dev" title="Translate in Portuguese">🇵🇹</a> <a href="https://github.com/tomalaforge/angular-challenges/commits?author=kabrunko-dev" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="http://www.streamoverlaypro.com"><img src="https://avatars.githubusercontent.com/u/1978642?v=4?s=100" width="100px;" alt="Erick Rodriguez"/><br /><sub><b>Erick Rodriguez</b></sub></a><br /><a href="#translation-es-ErickRodrCodes" title="Translate in Spanish">🇪🇸</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://eduardoroth.dev"><img src="https://avatars.githubusercontent.com/u/5419161?v=4?s=100" width="100px;" alt="Eduardo Roth"/><br /><sub><b>Eduardo Roth</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=eduardoRoth" title="Documentation">📖</a> <a href="#translation-es-eduardoRoth" title="Translate in Spanish">🇪🇸</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/1fbr"><img src="https://avatars.githubusercontent.com/u/63980689?v=4?s=100" width="100px;" alt="Fernando Bello"/><br /><sub><b>Fernando Bello</b></sub></a><br /><a href="https://github.com/tomalaforge/angular-challenges/commits?author=1fbr" title="Documentation">📖</a></td>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/webbomj"><img src="https://avatars.githubusercontent.com/u/86595717?v=4?s=100" width="100px;" alt="Лапин Андрей (Lapin Andrey)"/><br /><sub><b>Лапин Андрей (Lapin Andrey)</b></sub></a><br /><a href="#translation-ru-webbomj" title="Translate in Russian">🇷🇺</a></td>
</tr>
<tr>
<td align="center" valign="top" width="14.28%"><a href="https://github.com/Dinozavvvr"><img src="https://avatars.githubusercontent.com/u/45518871?v=4?s=100" width="100px;" alt="Dinar Shagaliev"/><br /><sub><b>Dinar Shagaliev</b></sub></a><br /><a href="#translation-ru-Dinozavvvr" title="Translate in Russian">🇷🇺</a></td>
</tr>
</tbody>
@@ -81,6 +84,6 @@ Contributions of any kind are welcome.
If I have forgotten to add you as a contributor, please reach out to me. 🙏
## Licensev
## License
MIT

View File

@@ -5,7 +5,7 @@
### Run Application
```bash
npx nx serve form-dialog-alert
npx nx serve avoid-losing-form-data
```
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/forms/48-form-dialog-alert/).
Challenge documentation is [here](https://angular-challenges.vercel.app/challenges/forms/48-avoid-losing-form-data/).

View File

@@ -1,26 +1,26 @@
{
"name": "form-dialog-alert",
"name": "avoid-losing-form-data",
"$schema": "../../../node_modules/nx/schemas/project-schema.json",
"projectType": "application",
"prefix": "app",
"sourceRoot": "apps/forms/form-dialog-alert/src",
"sourceRoot": "apps/forms/avoid-losing-form-data/src",
"tags": [],
"targets": {
"build": {
"executor": "@angular-devkit/build-angular:application",
"outputs": ["{options.outputPath}"],
"options": {
"outputPath": "dist/apps/forms/form-dialog-alert",
"index": "apps/forms/form-dialog-alert/src/index.html",
"browser": "apps/forms/form-dialog-alert/src/main.ts",
"outputPath": "dist/apps/forms/avoid-losing-form-data",
"index": "apps/forms/avoid-losing-form-data/src/index.html",
"browser": "apps/forms/avoid-losing-form-data/src/main.ts",
"polyfills": ["zone.js"],
"tsConfig": "apps/forms/form-dialog-alert/tsconfig.app.json",
"tsConfig": "apps/forms/avoid-losing-form-data/tsconfig.app.json",
"inlineStyleLanguage": "scss",
"assets": [
"apps/forms/form-dialog-alert/src/favicon.ico",
"apps/forms/form-dialog-alert/src/assets"
"apps/forms/avoid-losing-form-data/src/favicon.ico",
"apps/forms/avoid-losing-form-data/src/assets"
],
"styles": ["apps/forms/form-dialog-alert/src/styles.scss"],
"styles": ["apps/forms/avoid-losing-form-data/src/styles.scss"],
"scripts": []
},
"configurations": {
@@ -51,10 +51,10 @@
"executor": "@angular-devkit/build-angular:dev-server",
"configurations": {
"production": {
"buildTarget": "form-dialog-alert:build:production"
"buildTarget": "avoid-losing-form-data:build:production"
},
"development": {
"buildTarget": "form-dialog-alert:build:development"
"buildTarget": "avoid-losing-form-data:build:development"
}
},
"defaultConfiguration": "development"
@@ -62,7 +62,7 @@
"extract-i18n": {
"executor": "@angular-devkit/build-angular:extract-i18n",
"options": {
"buildTarget": "form-dialog-alert:build"
"buildTarget": "avoid-losing-form-data:build"
}
},
"lint": {

View File

Before

Width:  |  Height:  |  Size: 15 KiB

After

Width:  |  Height:  |  Size: 15 KiB

View File

@@ -2,7 +2,7 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>form-dialog-alert</title>
<title>avoid-losing-form-data</title>
<base href="/" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link rel="icon" type="image/x-icon" href="favicon.ico" />

View File

@@ -1,10 +1,11 @@
---
title: 🔴 Master Dependancy Injection
description: Challenge 16 is about masjering how dependancy injection works
description: Challenge 16 is about mastering how dependancy injection works
author: thomas-laforge
contributors:
- tomalaforge
- tomer953
- kabrunko-dev
challengeNumber: 16
command: angular-di
sidebar:
@@ -23,7 +24,7 @@ One way to achieve this is by adding a second argument to the pipe, but this is
- Your task is to display the correct currency for each row.
## Constraints:
## Constraints
- You cannot modify the pipe.
- You cannot wrap the row inside a component, as this will break the layout.

View File

@@ -1,41 +0,0 @@
---
title: 🟠 Avoid losing form data
description: Challenge 48 is about Bob 🧙‍♂️ the product owner, he wants to develop a new feature in response to customer complaints about losing form input information.
author: timothy-alcaide
contributors:
- alcaidio
challengeNumber: 48
command: form-dialog-alert
sidebar:
order: 121
badge: New
---
## Context
As a member of the development team, you need to address a specific request from the product owner, 🧙‍♂️ Bob. He wants to develop a new feature in response to customer complaints about losing form input information.
## User Story
Here's the feature expressed as a user story (functional expectation) :
"As a user, I would like to have an alert dialog box that appears when I attempt to navigate away from the /form page after I have started entering information into the form."
## Acceptance Criteria
1. On the /form page:
- If the input text has been pre-filled, then an alert dialog box opens.
- Otherwise, the user navigates normally.
2. The content of `dialog.component.ts` must be use for your dialog box content.
3. The appearance and behavior of the alert dialog box must comply with W3C conventions, see [alert dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/alertdialog/).
4. Maximize the use of the new concepts and syntax in the latest version of Angular.
<details>
<summary>Tips 🤫 (if you really need it and after careful consideration)</summary>
<ul>
<li>Use the Material CDK Dialog or Overlay - https://material.angular.io/cdk/ (dont forget to add @import '@angular/cdk/overlay-prebuilt.css' in style.sccss)</li>
<li>Use the CanDeactivate guard - https://angular.io/api/router/CanDeactivate (use new functionnal approach).</li>
</ul>
</details>

View File

@@ -22,7 +22,7 @@ Una forma de lograr esto es agregando un segundo argumento al pipe, pero esto no
- Tu tarea es mostrar la moneda correcta para cada fila.
## Restricciones:
## Restricciones
- No puedes modificar el pipe.
- No puedes envolver la fila dentro de un componente, ya que esto rompería el diseño.

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Ir al Desafío más reciente
link: /es/challenges/forms/48-dialog-alert-form/
link: /es/challenges/forms/48-avoid-losing-form-data/
icon: rocket
- text: Dar una estrella
link: https://github.com/tomalaforge/angular-challenges

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Aller au dernier Challenge
link: /fr/challenges/forms/48-dialog-alert-form/
link: /fr/challenges/forms/48-avoid-losing-form-data/
icon: rocket
- text: Donne une étoile
link: https://github.com/tomalaforge/angular-challenges

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Go to the latest Challenge
link: /challenges/forms/48-dialog-alert-form/
link: /challenges/forms/48-avoid-losing-form-data/
icon: rocket
- text: Give a star
link: https://github.com/tomalaforge/angular-challenges

View File

@@ -0,0 +1,28 @@
---
title: 🔴 Dominando Injeção de Dependência
description: Desafio 16 é sobre dominar como injeção de dependência funciona
author: thomas-laforge
contributors:
- kabrunko-dev
challengeNumber: 16
command: angular-di
sidebar:
order: 203
---
## Informação
Para completar este desafio com sucesso, precisaremos ter um bom entendimento de como Injeção de Dependência funciona dentro do Angular.
O objetivo é providenciar o `CurrencyService` no nível de linha, para que cada linha ilustre a moeda correta. Atualmente, `CurrencyService` é providenciado apenas em nível de tabela, o que resulta em um erro que mostrar a mesma moeda para cada linha, apesar de cada produto ter uma moeda diferente.
Uma maneira de alcançar isso é adicionando um segundo argumento para o pipe, mas isso não é permitido para este desafio.
## Declaração
- Sua tarefa é mostrar a moeda correta para cada linha.
## Restrições
- Você não pode modificar o pipe.
- Você não pode envolver a linha dentro de um componente, uma vez que isso quebrará o layout.

View File

@@ -0,0 +1,56 @@
---
title: 🟢 Animações Simples
description: Desafio 46 é sobre aprender a API de animação integrada do Angular
author: sven-brodny
contributors:
- svenson95
challengeNumber: 46
command: angular-simple-animations
sidebar:
order: 17
---
## Informação
Este é o primeiro de dois desafios de animação, o objetivo desta série é dominar animações no Angular.
Animações bem desenhadas pode fazer sua aplicação mais divertida e direta para usar, mas elas não são apenas comésticas. Animações pode melhorar sua aplicação e a experiência do usuário de várias maneiras:
- Sem animações, transições de página web podem parecer abruptas e desagradáveis.
- Movimento aumenta bastante a experiência do usuário, uma vez que animações dão a usuários a change de detectar as respostas da aplicação para suas ações.
- Boas animações intuitivamente chama a atenção do usuário para onde é necessário.
Eu recomendaria você ler a [documentação oficial](https://angular.io/guide/animations) Você aprenderá tudo o que é necessário para completar o desafio com sucesso.
Caso contrário, olhe este [exemplo funcional](https://svenson95.github.io/ng-xmp-animations/) e o [repositório git](https://github.com/svenson95/ng-xmp-animations) para se inspirar.
## Declaração
O objetivo deste desafio é adicionar animações, elas devem executar quando o usuário acessa a página ou a recarrega.
## Restrições
- Não use nenhum CSS e use a API integrada do Angular `@angular/animations`.
- Não dispare as animações com um botão como nos exemplos, mas quando o usuário entrar ou recarregar a página.
### Nível 1
Adicionar uma animação de movimento e fading para os parágrados no lado esquerdo.
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/a43c3995-16ef-4d1f-bcfc-602b4ce80937">
</video>
### Nível 2
Adicionar uma animação cambaleante para a lista no lado direito.
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
</video>
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
</video>
</video>
<video controls src="https://github.com/tomalaforge/angular-challenges/assets/46655156/1a01af1b-44fc-4616-8793-681219f9d8bc">
</video>
</video>
</video>
</video>

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Ir para o desafio mais recente
link: /pt/challenges/forms/48-dialog-alert-form/
link: /pt/challenges/forms/48-avoid-losing-form-data/
icon: rocket
- text: Dar uma estrela
link: https://github.com/tomalaforge/angular-challenges

View File

@@ -13,7 +13,7 @@ hero:
icon: right-arrow
variant: primary
- text: Перейти к последней задаче
link: /ru/challenges/forms/48-dialog-alert-form/
link: /ru/challenges/forms/48-avoid-losing-form-data/
icon: rocket
- text: Добавить звезду
link: https://github.com/tomalaforge/angular-challenges

9002
package-lock.json generated

File diff suppressed because it is too large Load Diff

View File

@@ -12,6 +12,8 @@
},
"private": true,
"dependencies": {
"@actions/core": "^1.10.1",
"@actions/github": "^6.0.0",
"@angular/animations": "17.3.1",
"@angular/cdk": "17.3.1",
"@angular/common": "17.3.1",

View File

@@ -5,8 +5,8 @@
## Warning:
- If you want feedback or review, you must support the project on GitHub:
- $5 per review
- $25 for lifetime reviews
- [$5 per review](https://github.com/sponsors/tomalaforge)
- [$25 for lifetime reviews](https://github.com/sponsors/tomalaforge)
- Create one of more challenges
- Have many valuable contributions to the project