Discourse toolkit to render forms

[merefield (Robert)]

Sí, eso podría funcionar. Lo intentaré.

Supongo que estaba buscando una opción ‘nativa del marco’, pero esta es definitivamente una alternativa totalmente razonable. Gracias.

[merefield (Robert)]

@system

Imagen

Renderiza un componente <UppyImageUploader />.

Manejo de Carga

Por defecto, el componente establecerá un objeto de carga. Es común querer solo la URL y el ID de la carga. Para lograr esto, puedes usar la propiedad @onSet en el campo:

@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 />
  </field.Image>
</Form>

Este ejemplo me está dando este error:

validateConfig - uppy-upload.js:80:12

Error: Falta la configuración requerida de UppyUpload: type

Uncaught (in promise) Error: Falta la configuración requerida de UppyUpload: 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

Sospecho que <field.Image /> requiere un argumento @type

[merefield (Robert)]

Las cosas con la carga de imágenes se vuelven aún más curiosas.

A veces, al abrir un cuadro de diálogo de archivo para cargar una imagen usando un control de formulario, obtengo este error:

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>

Esto es especialmente curioso porque mi formulario está en una ventana modal que no tiene nada que ver con las publicaciones.

Todo termina funcionando, es solo un poco feo en la consola del navegador.

¡Saludos!

[pfaffman (Jay Pfaffman)]

@awesomerobot

Creo que la importación del formulario fue incorrecta, así que he actualizado el OP

Pero no actualizaste el OP o se revirtió. Y perdí más tiempo del que me gustaría admitir averiguando eso.

@system

Aquí tienes el ejemplo más básico de un formulario:

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

Estas guías están en GitHub, ¿verdad? Si es así, ¿podrían enlazar a GitHub?

[awesomerobot (Kris)]

Ah sí, no me daba cuenta de que este tema se había generado a partir de nuestro repositorio de documentación, así que fue revertido y nunca hice un seguimiento… ahora llega una corrección adecuada

[pfaffman (Jay Pfaffman)]

¡Gracias!

Y otra solución sería crear un componente de tema para la fuente, de manera que no puedas ser engañado para hacer el cambio en el lugar equivocado otra vez y yo podría enviar un PR.

[david (David Taylor)]

@pfaffman

no se puede engañar para que haga el cambio en el lugar equivocado de nuevo

Ocultamos el botón de edición en los temas de Documentation > Developer Guides, pero creo que la gente lo evita usando los atajos de teclado o la edición rápida. ¡Más cosas que ocultar/deshabilitar!

@pfaffman

Podría enviar una PR.

Tenemos esto al final de cada documento, con un enlace al archivo fuente. Así que esa es probablemente la mejor opción si quieres hacer una PR:

@system

Este documento está controlado por versiones - sugiere cambios en github.

[pfaffman (Jay Pfaffman)]

@david

pero creo que la gente lo evita usando los atajos de teclado o la edición rápida.

Ah. Tiene sentido. Además, a menudo las reglas no se aplican a los administradores.

@david

Tenemos esto en la parte inferior de cada documento

Espera. ¿Qué?

@system

Este documento tiene control de versiones. Sugiere cambios en github.

Oh. Ups. Está en letras diminutas, pero ahora que lo veo, recuerdo haberlo visto antes.

He progresado un poco más esta vez. Estoy haciendo un montón de cosas bastante personalizadas (como necesito activar un texto que se muestra al ingresar a un campo) que pueden impedir que pueda usarlo.

¿Alguna idea de cómo puedo activar una función al ingresar a un campo? (Caso de uso: cuando ingresas al campo de la clave API de Digital Ocean, muestro un texto que describe cómo obtener la clave API).

EDITAR: Sí. Querido https://ask.discourse.com/ ¡pudo decírmelo! Es dolorosamente obvio una vez que lo sabes.

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

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