Discourse toolkit to render forms

[merefield (Robert)]

Sim, isso pode funcionar. Vou tentar.

Acho que estava procurando uma opção “nativa do framework”, mas essa é definitivamente uma alternativa totalmente razoável. Obrigado.

[merefield (Robert)]

@system

Imagem

Renderiza um componente \u003cUppyImageUploader /\u003e.

Tratamento de Upload

Por padrão, o componente definirá um objeto de upload. É comum querer apenas a URL e o ID do upload. Para conseguir isso, você pode usar a propriedade @onSet no campo:

@action
handleUpload(upload, { set }) {
  set("upload_id", upload.id);
  set("upload_url", getURL(upload.url));
}

\u003cForm as |form|\u003e
  \u003cform.Field
    @name="upload"
    @title="Upload"
    @onSet={{this.handleUpload}}
    as |field|
  \u003e
    \u003cfield.Image /\u003e
  \u003c/form.Field\u003e
\u003c/Form\u003e

Este exemplo está me dando este erro:

validateConfig - uppy-upload.js:80:12

Error: Missing required UppyUpload config: type

Uncaught (in promise) Error: Missing required UppyUpload config: type
    validateConfig uppy-upload.js:80
    UppyUpload uppy-upload.js:113
    js uppy-image-uploader.gjs:32
    UppyImageUploader uppy-image-uploader.gjs:23
    createComponent base-component-manager.js:26
    Ember 2
    source chunk.e6b222d1aa255cdf70e5.d41d8cd9.js:98442
    Ember 12
    source chunk.e6b222d1aa255cdf70e5.d41d8cd9.js:100412
    source chunk.e6b222d1aa255cdf70e5.d41d8cd9.js:102123
    Ember 34
    show modal.js:73

Suspeito que \u003cfield.Image /\u003e exige um argumento @type

[merefield (Robert)]

As coisas com o upload de imagens ficam ainda mais curiosas.

Às vezes, ao abrir uma caixa de diálogo de arquivo para fazer upload de uma imagem usando um controle de formulário, recebo este erro:

selectedText - utilities.js:137:25
TypeError: ancestor is null

 const postMenuArea = ancestor.querySelector(".post-menu-area");

    <form.Field
      @name="upload_url_1"
      @title="Upload"
      @onSet={{this.handleUpload}}
      as |field|
    >
      <field.Image @type="branding" />
    </form.Field>

Isso é especialmente curioso porque meu Formulário está em um Modal, que não tem nada a ver com Posts.

Tudo acaba funcionando, é apenas um pouco feio no console do navegador.

Abraços!

[pfaffman (Jay Pfaffman)]

@awesomerobot

Acho que a importação do Formulário estava errada, então atualizei o OP

Mas você não atualizou o OP ou ele foi revertido. E eu perdi mais tempo do que gostaria de admitir descobrindo isso.

@system

Aqui está o exemplo mais básico de um formulário:

import Component from "@glimmer/component";
import { action } from "@ember/object";
import Form from "discourse/form";

Esses guias estão no github? Certo? Se sim, eles poderiam linkar para o github?

[awesomerobot (Kris)]

Ah sim, eu não percebi que esse tópico foi gerado a partir do nosso repositório de documentação, então foi revertido e eu nunca acompanhei… uma correção adequada está chegando agora

[pfaffman (Jay Pfaffman)]

Obrigado!

Outra correção seria criar um componente de tema na origem para que você não possa ser enganado a fazer a alteração no lugar errado novamente, e assim eu poderia enviar um PR.

[david (David Taylor)]

@pfaffman

não pode ser enganado para fazer a alteração no lugar errado novamente

Nós ocultamos o botão de edição em tópicos Documentation > Developer Guides, mas acho que as pessoas o contornam usando atalhos de teclado ou edição rápida. Mais coisas para ocultar/desabilitar!

@pfaffman

Eu poderia enviar um PR.

Temos isso na parte inferior de cada documento, com um link para o arquivo de origem. Portanto, essa é provavelmente a melhor coisa a usar se você quiser fazer um PR:

@system

Este documento é controlado por versão - sugira alterações no github.

[pfaffman (Jay Pfaffman)]

@david

mas acho que as pessoas contornam isso usando atalhos de teclado ou edição rápida.

Ah. Faz sentido. Além disso, muitas vezes as regras não se aplicam aos administradores.

@david

Temos isso na parte inferior de cada documento

Espere. O quê?

@system

Este documento tem controle de versão - sugira alterações no github.

Ah. Ops. Está em letras minúsculas, mas agora que vejo, lembro-me de ter visto isso antes.

Fiz mais progresso desta vez. Estou fazendo um monte de coisas bastante personalizadas (como preciso acionar um texto que é exibido ao entrar em um campo) que podem me impedir de usá-lo.

Alguma ideia de como posso acionar uma função ao entrar em um campo? (Caso de uso, quando você entra no campo da chave de API do Digital Ocean, tenho um texto que descreve como obter a chave de API).

EDIT: Sim. Caro https://ask.discourse.com/ foi capaz de me dizer! É dolorosamente óbvio quando você sabe.

import { on } from "@ember/modifier";
...
  @action
  hostnameClicked(event) {
    this.setHelpText(i18n("pfaffmanager.help.hostname"));
  }
...

            <field.Input @type="text" {{on "click" this.hostnameClicked}} />