¿Cómo mostrar datos debajo del avatar del usuario?

Para almacenar los datos personalizados en Discourse, fui a Admin > Personalizar > Campos de usuario y creé un campo personalizado. Los datos que necesito son un percentil que representa el progreso y elegí “texto” como tipo de campo. El nombre del campo solo se muestra en la tarjeta y el perfil del usuario y, lamentablemente, no se utiliza para referenciar los datos del campo programáticamente.

El campo que almacena el progreso fue el tercer campo personalizado que creé, por lo que “3” se convierte en un número muy importante.

Usando la API, escribí un script de curl (con la ayuda de https://meta.discourse.org/t/api-cannot-update-user/63876/4) para rellenar el campo con datos de prueba. Como el campo que quería rellenar era el tercer campo que creé, mi línea de datos en el script de curl es:

--data '{ "user_fields": { "3":"87" } }'

Mostrar los datos requirió ir a Admin > Configuración > Usuarios, desplazarse hasta la opción “campos personalizados de usuario públicos” y poner el campo en la lista blanca. Dado que el campo fue el tercero creado, tuve que poner en la lista blanca “user_field_3” y no el nombre real que le di al campo.

En este punto, escribí un plugin básico con lo siguiente:

import { withPluginApi } from 'discourse/lib/plugin-api';
export default {
  name: 'progress-indicator',
  initialize() {
    withPluginApi("0.8.23", api => {       
      api.decorateWidget('post-avatar:after', helper => {
        let progress = helper.attrs.userCustomFields['user_field_3'];
        let retString = helper.h("div.progress-wrapper",
          {style: 'border: 1px solid blue; width:100%;'}, 
          helper.h('div.progress-bar',{style: 'width:'+progress+'%; background-color: green; height: 10px;'})
        );
        return retString;
      });
    });
  }
};

La salida final

7 Me gusta