Come visualizzare i dati sotto l'avatar dell'utente?

Per memorizzare i dati personalizzati su Discourse, sono andato su Amministratore > Personalizza > Campi utente e ho creato un campo personalizzato. I dati di cui avevo bisogno erano una percentuale che rappresentava il progresso, quindi ho scelto “testo” come tipo di campo. Il nome del campo viene visualizzato solo sulla scheda e nel profilo dell’utente e, purtroppo, non viene utilizzato per fare riferimento programmaticamente ai dati del campo.

Il campo che memorizza il progresso era il terzo campo personalizzato che avevo creato, quindi “3” diventa un numero molto importante.

Utilizzando l’API, ho scritto uno script curl (con l’aiuto di https://meta.discourse.org/t/api-cannot-update-user/63876/4) per popolare il campo con dati di prova. Poiché il campo che volevo popolare era il terzo che avevo creato, la riga dei dati nel mio script curl è:

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

Per visualizzare i dati, è stato necessario andare su Amministratore > Impostazioni > Utenti, scorrere fino all’opzione “campi utente personalizzati pubblici” e inserire il campo nella whitelist. Poiché il campo era il terzo creato, ho dovuto inserire nella whitelist “user_field_3” e non il nome effettivo che avevo dato al campo.

A questo punto, ho scritto un plugin di base con il seguente codice:

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;
      });
    });
  }
};

L’output finale

7 Mi Piace