almir-soulcode/helpr-front-jfs5

helpr-front-jfs5's Issues

|FRONT-END| Crie um campo, no formulário de funcionários, para upload de foto

Para criar um novo funcionário é desejado submeter uma foto de perfil. Crie um campo de upload da imagem de perfil desse funcionário. Para isso crie um novo projeto firebase e utilize o firebase storage. Ao submeter a nova imagem no campo, o algoritmo deve obter a url gerada e atribuir essa url a propriedade "foto" do novo funcionário. Para efeito de carregamento do upload, crie também um barra de progresso de carregamento indeterminado.

Recursos: https://material.angular.io/components/progress-bar/overview#progress-bar-indeterminate

|FRONT-END| Crie o serviço de cliente e o método para buscar todos os dados

Para mostrar, na relação de clientes, os dados armazenados no banco de dados, crie o serviço de cliente e o método para consultar as informações.

|FRONT-END| Crie uma página com formulário para editar um chamado

Crie uma nova coluna na relação de funcionários, com botão de editar. O botão de editar deve redirecionar o usuário para uma página com formulário para editar o chamado, onde os campos devem ser preenchidos automaticamente com as informações desse chamado. Implemente no serviço de chamado o método para editar. Ao efetuar a operação, o usuário deve ser direcionado, automaticamente de volta, para a relação.

|FRONT-END| Crie o serviço para chamado e o método para buscar todos os dados

Para mostrar, na relação de chamados, os dados armazenados no banco, crie o serviço de chamado e o método para consultar as informações.

|FRONT-END| Possibilite ao usuário, a operação de exclusão do cargo

Através do botão de excluir, presente na relação de cargos possibilite ao usuário a operação de exclusão de um registro. Para isso implemente no componente e no serviço de cargo o método para excluir, delete. Implemente o tratamento de erro com catchError.

|FRONT-END| Possibilite ao usuário, a operação de exclusão do funcionário

Através do botão de excluir, presente na relação de funcionários possibilite ao usuário a operação de exclusão de um registro. Para isso implemente no componente e no serviço de funcionário o método para excluir, delete. Implemente o tratamento de erro com catchError.

|FRONT-END| Crie uma página para visualizar a relação de clientes futuros

A relação de clientes futuros deve ser criada em forma de tabela. A tabela deve inicializar os dados, automaticamente. Utilize o mecanismo de carregamento lento (Lazy Loading).

|FRONT-END| Possibilite ao usuário, a operação de exclusão de clientes futuros

Crie uma nova coluna na relação de clientes futuros, com botão de excluir. Implemente no serviço de clientes futuros o método para excluir um registro.

|FRONT-END| No menu de navegação, na parte superior, mostre a foto de perfil do funcionário autenticado

Os funcionários possuem a propriedade foto, que é o endereço da imagem de perfil desse funcionário. No menu de navegação, mostre essa imagem, em forma de circulo, e o nome do funcionário que está autenticado.

|FRONT-END| Na relação de clientes implemente uma janela de dialogo para mostrar detalhes do cliente

Na relação de clientes, crie uma nova coluna para com botão para "visualizar mais detalhes" do cliente. Para isso, crie novo botão (utilize o ícone more_horiz) que abra uma caixa de dialogo com todas as informações do cliente.

Recursos: https://material.angular.io/components/dialog/examples#dialog-elements

|FRONT-END| Crie uma página que possibilite o cadastro de um novo funcionário

Na página de relação de funcionários, possibilite que o usuário crie um novo funcionário, redirecionando para um formulário para efetuar esse cadastro. Faça isso por meio do botão new, presente na relação. Crie portanto uma nova página para preencher e cadastrar os dados de um novo funcionário, para isso crie o componente, NewFuncionarioComponent e o método create. Implemente no serviço o método para criar um novo chamado, create. Implemente o tratamento de erro com catchError. Ao efetuar a operação o usuário deve ser direcionado de volta, automaticamente, para a relação.

|FRONT-END| Para bloquear acesso as rotas restritas, crie guard de autenticação

Baseado no token em armazenamento local, valide a autenticação do usuário antes do acesso a rotas restritas.

|FRONT-END| Crie o serviço de funcionário e o método para buscar todos os dados

Para mostrar, na relação de funcionários, os dados armazenados no banco de dados, crie o serviço para funcionário FuncionarioService e o método para consultar as informações findAll. Implemente o tratamento de erro com catchError. Para iniciar os dados automaticamente na relação de funcionários, no componente correspondente crie o método initializeTable.

|FRONT-END| Implemente na página de relação de chamados um Spinner de carregamento

Na página com relação de chamados, a tabela possui um delay no carregamento dos dados de chamados. Com Angular Material, implemente um componente visual para efeito de carregamento dos dados para possibilitar uma melhor experiência ao usuário. Para isso utilize o Progress Spinner que deve aparecer em detrimento da condição de carregamento dos dados.
Recursos: https://material.angular.io/components/progress-spinner/examples#progress-spinner-overview

|FRONT-END| Crie o serviço para cargo e o método para buscar todos os dados

Para mostrar, na relação de cargos, os dados armazenados no banco de dados, crie o serviço para cargo CargoService e o método para consultar as informações findAll. Implemente o tratamento de erro com catchError. Para iniciar os dados automaticamente na relação de cargos, no componente correspondente crie o método initializeTable.

|FRONT-END| Crie página home, com cabeçalho, de acordo com as especificações visuais

O cabeçalho deve conter um botão de menu para abrir o sidenav com opções de navegação e logout. As opções devem possuir "iconização". Utilize o mecanismo de carregamento lento (Lazy Loading).

|FRONT-END| Crie uma página para FAQ

É desejado um página que liste as perguntas mais frequentes sobre a plataforma. Utilize Accordion, para montar o layout das perguntas.

Recursos: https://getbootstrap.com/docs/5.2/components/accordion/

|FRONT-END| Utilizando os recursos do Angular Material, implemente dark mode

No cabeçalho da aplicação, crie um toggle para alternar entres os temas light e dark.
Recursos: https://material.angular.io/guide/theming#applying-a-theme-to-_components_
Exemplo: mozilla

|FRONT-END| Crie uma página para visualizar a relação de clientes

A relação de clientes deve ser criada em forma de tabela. A tabela deve inicializar os dados, automaticamente. Crie também o modelo Cliente para agrupar os dados. O modelo deve respeitar o formato que foi definido pela API. Utilize o mecanismo de carregamento lento (Lazy Loading).

|FRONT-END| Em área pública/login, crie um sistema de Stepper para atração de futuros clientes

Em área pública/login, implemente um botão, publicitário, para atração de novos clientes. Abrindo uma caixa de diálogo, dentro dela, crie um sistema de Stepper para guiar o usuário nos passos do formulário. Para salvar os dados, crie o modelo FuturoCliente, para agrupar os dados. Crie também o serviço de futuro cliente, FuturoClienteService e o método ´create´. Implemente o tratamento de erro com catchError.

Recursos:
https://tinesoft.github.io/ngx-wow/home
https://material.angular.io/components/stepper/overview#stepper-overview

|FRONT-END| Crie guard de administrador para restrigir o acesso a rotas administrativas

Os usuários que podem autenticar tem diferentes perfis. O administrador tem acesso a todas as páginas e pode criar novos registros. Mas as rotas para relação de cargos e funcionários, bem como suas rotas filhas, são de acesso exclusivo do administrador. Crie guard que por meio do perfil encodado no corpo do token do usuário logado, restrinja o acesso a essas rotas para os demais perfis.

|FRONT-END| Na relação de funcionários implemente uma janela de dialogo para mostrar detalhes do funcionário

Na relação de funcionários, crie uma nova coluna para com botão para "visualizar mais detalhes" do funcionário. Para isso, crie novo botão (utilize o ícone more_horiz) que abra uma caixa de dialogo com todas as informações do funcionário.

Recursos: https://material.angular.io/components/dialog/examples#dialog-elements

|FRONT-END| Crie guard de funcionário para restringir o acesso a rotas não autorizadas

Os usuários que podem autenticar tem diferentes perfis. O funcionário tem acesso a relação de clientes e de chamados e tais rotas são de acesso exclusivo do funcionário/administrador. Crie guard que por meio do perfil encodado no corpo do token do usuário logado, restrinja o acesso a essas rotas para os demais perfis.

|FRONT-END| Crie estrutura inicial do projeto em Angular

Utilizando Angular CLI, crie a estrutura inicial do projeto. Para a estrutura inicial, inclua o Angular Material.

|FRONT-END| Na relação de chamados implemente uma janela de dialogo para mostrar detalhes do chamado

Na relação de chamados, crie uma nova coluna para com botão para "visualizar mais detalhes" do chamado. Para isso, crie novo botão (utilize o ícone more_horiz) que abra uma caixa de dialogo com todas as informações do chamado.

Recursos: https://material.angular.io/components/dialog/examples#dialog-elements

|FRONT-END| Possibilite ao usuário, a operação de exclusão do cliente

Crie uma nova coluna na relação de clientes, com botão de excluir. Implemente no serviço de cliente o método para excluir um cliente.

|FRONT-END| Crie uma página que possibilite o cadastro de um novo cargo

Na página de relação de cargos, possibilite que o usuário crie um novo cargo, redirecionando para um formulário para efetuar esse cadastro. Faça isso por meio do botão new, presente na relação. Crie portanto uma nova página para preencher e cadastrar os dados de um novo cargo, para isso crie o componente, NewCargoComponent e o método create. Implemente no serviço o método para criar um novo chamado, create. Implemente o tratamento de erro com catchError. Ao efetuar a operação o usuário deve ser direcionado de volta, automaticamente, para a relação.

|FRONT-END| Crie serviço de autenticação com método inicial de login que retorne o token de autorização

Possibilite que o usuário autentique na sua aplicação. O token de autorização deve ser armazenado localmente para utilizações futuras. Ao autenticar o usuário deve ser redirecionado, automaticamente, para a página home. Crie o modelo Credencials e Token para agrupar os dados de login e autorização, respectivamente. Para o acesso aos endpoint da API, crie também um arquivo de configuração que contenha a rota base da API.

|FRONT-END| Crie mecanismo de geração de relatórios de chamados em PDF

Na relação de chamados, através de um botão intuitivo, implemente um algoritmo de geração de relatório de chamados. Para isso crie um novo método no serviço de chamados, que integre com o mecanismo de geração de relatório em PDF da API.

|FRONT-END| Crie a página de login baseado nas especificações visuais

A página de login deve conter campos para a entrada das credenciais do usuário. Utilize o mecanismo de carregamento lento (Lazy Loading). Para se utilizar dos recursos do Angular Material, crie também o module compartilhado para concentrar esses recursos.

|FRONT-END| Crie uma página que possibilite o cadastro de um novo cliente

Na página de relação de clientes, possibilite que o usuário crie um novo cliente, redirecionando para um formulário para efetuar esse cadastro. Implemente no serviço de cliente o método para criar um novo cliente. Ao efetuar a operação o usuário deve ser direcionado de volta, automaticamente, para a relação.

|FRONT-END| Crie uma página que possibilite o cadastro de um novo chamado

Na página de relação de chamados, possibilite que o usuário crie um novo chamado, redirecionando para um formulário para efetuar esse cadastro. Faça isso por meio de botão new, presente na relação. Crie portanto uma nova página para preencher os dados de um novo chamado. Implemente no serviço o método para criar um novo chamado. Ao efetuar a operação o usuário deve ser direcionado de volta, automaticamente, para a relação.

|FRONT-END| Crie um dialog, dinâmico, de publicidade na área de login

É pedido dentro da área publica (login) uma caixa de diálogo para publicidade da plataforma. Ao acessar a área pública, deve-se abrir, automaticamente, um dialog com banner de publicidade. Para trazer ao usuário uma experiência dinâmica e rotativa, é desejado que o banner seja escolhido aletoriamente.

|FRONT-END| Na sidenav, mostre o perfil do usuário

Por meio do e-mail do usuário logado capture e mostre a informações do perfil dos usuário. É desejado que o usuário possa visualizar sua foto de perfil e seu nome na sidenav da aplicação. Tenha como base o modelo em anexo.

|FRONT-END| Implemente na página de relação de cargos um Spinner de carregamento

Na página com relação de cargos, a tabela possui um delay no carregamento dos dados de cargos. Com Angular Material, implemente um componente visual para efeito de carregamento dos dados para possibilitar uma melhor experiência ao usuário. Para isso utilize o Progress Spinner que deve aparecer em detrimento da condição de carregamento dos dados.
Recursos: https://material.angular.io/components/progress-spinner/examples#progress-spinner-overview

|FRONT-END| Crie página para visualizar as informações de perfil do cliente logado

A sidenav deve ter uma opção Meu perfil, com ícone, onde o cliente pode acessar uma página contendo suas informações. Crie a página meu perfil contendo todas as informações do cliente. Os dados devem ser mostrado em campos não editáveis. Tenha como base o modelo em anexo.

|FRONT-END| Implemete tooltips no botões e imagens clicáveis

Para garantir uma melhor experiência ao usuário, implemente tooltips em todos os botões e imagens clicáveis da aplicação.

Recursos: https://material.angular.io/components/tooltip/overview

|FRONT-END| Na relação de cargos implemente uma janela de dialogo para mostrar detalhes do cargo

Na relação de cargos, crie uma nova coluna para com botão para "visualizar mais detalhes" do cargo. Para isso, crie novo botão (utilize o ícone more_horiz) que abra uma caixa de dialogo com todas as informações do cargo.

Recursos: https://material.angular.io/components/dialog/examples#dialog-elements

|FRONT-END| Crie uma página com formulário para editar um cliente

Crie uma nova coluna na relação de clientes, com botão de editar. O botão de editar deve redirecionar o usuário para uma página com formulário para editar o cliente, onde os campos devem ser preenchidos automaticamente com as informações desse cliente. Implemente no serviço de cliente o método para editar. Ao efetuar a operação, o usuário deve ser direcionado de volta, automaticamente, para a relação.

|FRONT-END| Crie uma página com formulário para editar um funcionário

Através do botão de editar, presente na relação de funcionários, possibilite ao usuário a operação de edição. O botão de editar deve redirecionar o usuário para uma página com formulário para editar o funcionário, onde os campos devem ser preenchidos automaticamente com as informações desse funcionário. Implemente no componente e no serviço de funcionário o método para editar, update. Implemente o tratamento de erro com catchError. Ao efetuar a operação, o usuário deve ser direcionado, automaticamente de volta, para a relação.

|FRONT-END| Crie uma página para visualizar a relação de funcionários

A relação de funcionários deve ser criada em forma de tabela. A tabela deve inicializar os dados, automaticamente. Crie também o modelo de Funcionario para agrupar os dados. O modelo deve respeitar o formato que foi definido pela API. Utilize o mecanismo de carregamento lento (Lazy Loading). Crie também um novo item na lista de navegação da navbar, para referenciar a relação de funcionários (utilize o ícone support_agent). A página deve preservar a identidade visual estabelecida, como mostrar em anexo na relação de clientes.

|FRONT-END| Implemente "Lembrar me" (checked) da senha e e-mail na tela de login

O recurso de "Lembrar-me" deve guardar as informações de e-mail e senha digitadas e ser preenchidas automaticamente nos campos em uma nova autenticação futura. Para isso, utilize cookies.

|FRONT-END| Crie uma página com formulário para editar um cargo

Através do botão de editar, presente na relação de cargos, possibilite ao usuário a operação de edição. O botão de editar deve redirecionar o usuário para uma página com formulário para editar o cargo, onde os campos devem ser preenchidos automaticamente com as informações desse cargo. Implemente no componente e no serviço de cargo o método para editar, update. Implemente o tratamento de erro com catchError. Ao efetuar a operação, o usuário deve ser direcionado, automaticamente de volta, para a relação.

|FRONT-END| Implemente um Carrossel de imagens na página home

Para tornar a recepção do usuário mais agradável, implemente um carrossel de imagens na página home. Utilize os banners que estão no material de imagens.
Recursos: https://getbootstrap.com/docs/5.2/components/carousel/

|FRONT-END| Crie uma página para visualizar a relação de cargos

A relação de cargos deve ser criada em forma de tabela. A tabela deve inicializar os dados, automaticamente. Crie também o modelo de Cargo para agrupar os dados. O modelo deve respeitar o formato que foi definido pela API. Utilize o mecanismo de carregamento lento (Lazy Loading). Crie também um novo item na lista de navegação da navbar, para referenciar a relação de cargos (utilize o ícone badge). A página deve preservar a identidade visual estabelecida, como mostrar em anexo na relação de clientes.

|FRONT-END| Crie uma página para visualizar a relação de chamados

A relação de chamados deve ser criada em forma de tabela. A tabela deve inicializar os dados, automaticamente. Crie também o modelo Chamado para agrupar os dados. O modelo deve respeitar o formato que foi definido pela API. Utilize o mecanismo de carregamento lento (Lazy Loading).

|FRONT-END| Na relação de chamados, implemente iconização na coluna de status

Para melhorar a experiência do usuário, é desejado ícones para representar o status do chamado. Para isso crie uma nova pipe que, a partir do status correspondente, mostre ícones intuitivos.

|FRONT-END| Implemente na página de relação de clientes um Spinner de carregamento

Na página com relação de clientes, a tabela possui um delay no carregamento dos dados de clientes. Com Angular Material, implemente um componente visual para efeito de carregamento dos dados para possibilitar uma melhor experiência ao usuário. Para isso utilize o Progress Spinner que deve aparecer em detrimento da condição de carregamento dos dados.
Recursos: https://material.angular.io/components/progress-spinner/examples#progress-spinner-overview

|FRONT-END| Crie um interceptor para repassar o token de autorização no header de requisição HTTP

A API possui mecanismo de autorização que deve receber o token na requisições HTTP para validar o acesso. Crie interceptador para incluir o token de autorização no cabeçalho das requisições.

|FRONT-END| Implemente na página de relação de funcionários um Spinner de carregamento

Na página com relação de funcionários, a tabela possui um delay no carregamento dos dados de funcionários. Com Angular Material, implemente um componente visual para efeito de carregamento dos dados para possibilitar uma melhor experiência ao usuário. Para isso utilize o Progress Spinner que deve aparecer em detrimento da condição de carregamento dos dados.
Recursos: https://material.angular.io/components/progress-spinner/examples#progress-spinner-overview