Discourse toolkit to render forms

[merefield (Robert)]

Oui, cela pourrait fonctionner. Je vais essayer cela.

Je suppose que je cherchais une option « native au cadre » mais c’est définitivement une alternative tout à fait raisonnable. Merci.

[merefield (Robert)]

@system

Image

Renders a <UppyImageUploader /> component.

Upload Handling

By default, the component will set an upload object. It’s common to only want the URL and the ID of the upload. To achieve this, you can use the @onSet property on the field:

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

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

Cet exemple me donne cette erreur :

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

Je soupçonne que <field.Image /> nécessite un argument @type

[merefield (Robert)]

Les choses deviennent encore plus curieuses avec le téléchargement d’images.

Parfois, lorsque j’ouvre une boîte de dialogue de fichier pour télécharger une image à l’aide d’un contrôle de formulaire, j’obtiens cette erreur :

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>

C’est d’autant plus curieux que mon formulaire se trouve dans une modale qui n’a rien à voir avec les publications.

Tout finit par fonctionner, c’est juste un peu laid dans la console du navigateur.

Santé !

[pfaffman (Jay Pfaffman)]

@awesomerobot

Je pense que l’importation du formulaire était incorrecte, j’ai donc mis à jour l’OP

Mais vous n’avez pas mis à jour l’OP ou il a été annulé. Et j’ai perdu plus de temps que je ne veux l’admettre à le découvrir.

@system

Voici l’exemple le plus basique d’un formulaire :

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

Ces guides sont sur GitHub ? N’est-ce pas ? Si c’est le cas, pourraient-ils être liés à GitHub ?

[awesomerobot (Kris)]

Ah oui, je ne réalisais pas que ce sujet était généré à partir de notre dépôt de documentation, donc il a été restauré et je n’ai jamais donné suite… une correction appropriée arrive maintenant

[pfaffman (Jay Pfaffman)]

Merci !

Et une autre correction serait de créer un composant de thème pour la source afin que vous ne soyez pas trompé en apportant la modification au mauvais endroit à nouveau, et je pourrais soumettre une PR.

[david (David Taylor)]

@pfaffman

ne peut plus être trompé pour faire le changement au mauvais endroit

Nous cachons le bouton de modification sur les sujets Documentation > Developer Guides, mais je pense que les gens le contournent en utilisant les raccourcis clavier ou l’édition rapide. Encore des choses à cacher/désactiver !

@pfaffman

Je pourrais soumettre une PR.

Nous avons ceci au bas de chaque document, avec un lien vers le fichier source. C’est donc probablement la meilleure chose à utiliser si vous voulez faire une PR :

@system

Ce document est contrôlé par version - suggérez des changements sur github.

[pfaffman (Jay Pfaffman)]

@david

mais je pense que les gens s’en sortent en utilisant les raccourcis clavier ou l’édition rapide.

Ah. Logique. De plus, les règles ne s’appliquent souvent pas aux administrateurs.

@david

Nous avons ceci en bas de chaque document

Attendez. Quoi ?

@system

Ce document est sous contrôle de version - suggérez des modifications sur github.

Oh. Oups. C’est écrit en tout petit, mais maintenant que je le vois, je me souviens l’avoir déjà vu.

J’ai fait quelques progrès supplémentaires cette fois-ci. Je fais beaucoup de choses assez personnalisées (comme devoir déclencher du texte qui s’affiche lors de la saisie dans un champ) qui pourraient m’empêcher de l’utiliser.

Une idée de comment déclencher une fonction lors de la saisie dans un champ ? (Cas d’utilisation, lorsque vous saisissez le champ de clé API Digital Ocean, j’affiche un texte décrivant comment obtenir la clé API).

EDIT : Oui, https://ask.discourse.com/ a pu me le dire ! C’est d’une évidence criante une fois qu’on le sait.

import { on } from "@ember/modifier";
...
  @action
  hostnameClicked(event) {
    this.setHelpText(i18n("pfaffmanager.help.hostname"));
  }
...
            <field.Input @type="text" {{on "click" this.hostnameClicked}} />