Formulario Form.js - xRAFPx/LEI GitHub Wiki

O componente FormPage é o responsável pela página do formulário. Utiliza o componente Title para a renderização do header e de vários ficheiros json com a estrutura Key-Value, característica de um ficheiro REFSET.

Nas linhas 15 a 44 é possível se observar o construtor desta classe, onde são inicializados os estados das variáveis necessárias para o funcionamento do formulário e é feito o bind ás funções que as utilizam.

  • reqType: estado inicializado com o primeiro valor do ficheiro REFSET correspondente ao tipo de requisito.
  • reqNature: estado inicializado com o primeiro valor do ficheiro REFSET correspondente à natureza do requisito.
  • reqService: estado inicializado com o primeiro valor do ficheiro REFSET correspondente ao serviço do requisito.
  • requester: estado inicializado com o valor 'Administrador de Sistemas (288)', mas que terá de ser alterado para o valor de uma chamada GET da função e ID do utilizador. Valor fixo e sem possibilidade de alteração pelo utilizador no momento do preenchimento do formulário.
  • requesterEmail: estado inicializado com o valor '[email protected]', mas que terá de ser alterado para o valor de uma chamada GET do email do utilizador. Valor fixo e sem possibilidade de alteração pelo utilizador no momento do preenchimento do formulário. Valor fixo e sem possibilidade de alteração pelo utilizador no momento do preenchimento do formulário.
  • requesterNum: estado inicializado com o valor '123456789', mas que terá de ser alterado para o valor de uma chamada GET do contacto do utilizador.
  • reqDescription: estado inicializado com o valor '' e que corresponde a uma descrição do pedido de intervenção.
  • reqError: estado inicializado com o valor '' e que corresponde ao assunto do pedido de intervenção.
  • reqScreenshot: estado inicializado com o valor "//:0" e que corresponde ao valor src da imagem do screenshot.
  • showScreenshot: estado inicializado com o valor false e que corresponde a mostrar, ou não, a secção do screenshot. No caso true, a secção é mostrada e o screenshot também. No caso de tomar o valor false, a secção fica escondida. O uso desta variável é possível observar nas linhas 233 a 243.
  • reqPriority: estado inicializado com o segundo valor do ficheiro REFSET correspondente à prioridade do requisito. É o segundo valor do ficheiro porque assume o valor normal.
  • reqFiles: estado inicializado com o valor [] e que corresponde ao array com os dados de cada um dos anexos.

Quando há a alteração dos valores iniciais de alguns dos estados é accionada a respetiva função chamada no processo onChange para alteração dos valores do estado.

  • handleRequestTypeChange(): setState do estado reqType.
  • handleRequestNatChange(): setState do estado reqNature.
  • handleRequestServChange(): setState do estado reqService.
  • handleRequestErrorChange(): setState do estado reqError.
  • handleRequestDescChange(): setState do estado reqDescription.
  • handlePriorityChange(): setState do estado reqPriority.
  • handleClick(): setState do estado reqFiles.

A função handleClick(), chamada quando existe o clique do utilizador no botão para adicionar anexos, utiliza a função readUploadedFileAsText(inputFile) para obter, para cada um dos ficheiros selecionados, o binário bruto do ficheiro, utilizando o método FileReader.readAsBinaryString(). Esta leitura dos dados permite que qualquer ficheiro selecionado tenha a sua leitura feita de forma total e em que todas as suas características fiquem conservadas.

O método componentDidMount() é executado após a saída do componente ter sido renderizada no DOM, o que, por esse motivo, foi o local ideal para se fazer um setState dos estados reqScreenshot e showScreenshot a partir do valor enviado por histórico da página inicial.

As funções loadPicture() e closePicture() são responsáveis por permitir ao utilizador visualizar, a partir de um zoom, a imagem do screenshot. Isto permite ao utilizador uma melhor e mais focalizada descrição do erro encontrado, sem que este tenha que estar sempre a voltar atrás para estar analisar o erro.

Após o clique no botão Submeter, é acionada a função handleSubmit(). Quando o screenshot foi tirado é definida a estrutura do mesmo que será enviado para o servidor, com os dados de filename: "Screenshot.png" e a path toma o valor do estado reqScreenshot. É depois feito um pedido POST com todos os dados do formulário, para que seja possível construir a estrutura do email. Consoante o valor do resultado do pedido, é enviado um alerta ao utilizador indicando o sucesso ou a falha no envio do email com os dados do seu pedido de intervenção.

Após o clique no botão Cancelar, é acionada a função handleCancel(). Apenas é responsável por voltar para a janela anterior, a partir do histórico.