ユーザーアカウントページにユーザーのカスタムフィールドを表示する

開発
1

アカウントページにユーザーカスタムフィールドを追加したいという要望があります（理由によりプロフィールページは好まれないようです）。

これはテーマコンポーネントで実現できるはずです。

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/preferences/account.hbs#L207

https://github.com/discourse/discourse/blob/master/app/assets/javascripts/discourse/templates/preferences/profile.hbs#L24-L28

common/head_tag.html:

<script type="text/x-handlebars" data-template-name="/connectors/user-preferences-account/lc-ucf">
<div style="height: 25px; width: 25px;background: blue"></div>
<h3>{{ model.username}} のカスタムユーザーフィールド</h3>
これは uf: {{model.user_fields}} です。
{{log "THIS" model.user_fields}}
{{#each model.user_fields |uf|}}
{{log "THISTHISTHIS" this}}
  <div class="control-group">
    {{user-field field=uf.field value=value}}
  </div>
{{/each}}
<div class='clearfix'></div>
</script>

しかし、ユーザーカスタムフィールドにアクセスできないようです。

青いボックスは表示されます。
model.username にはアクセスできることも確認できました。

コンソールログには以下が表示されます:

THIS {3: "STEM Professional (industry)"}

image
image369×150 4.08 KB

どうやら馬鹿げたことをしているのだと思いますが、優れたテーマ開発者ガイドを何度も読んだ後でも、手がかりがつかめません。

2

さて、私が解決しようとしている問題について投稿するいつものことをまたやっています。

今度は、プラグイン内で同じ問題を解決しようとしています。myplugin/assets/javascripts/discourse/connectors/preferences/account/user-custom-controls/my-stuff.hbs というファイルを作成し、それによってページにいくつかの要素を追加しました（前回と同じように！）。しかし、（1）データを取得する方法と、（2）フォームが保存されたときにフィールドを更新するように Ember（？）に伝える方法がわかりません。

もしかすると、account.js.es6 をオーバーライドするか、そこに追加して、user_fields を this.saveAttrNames に含める必要があるのかもしれません。そうすれば、更新された場合にそれらを保存する方法がわかり、また userFields へデータを取得することもできるでしょう。

いくつかのプラグインを調査してみましたが、いまだにうまくいきません。

3

はい、動作するようにしましたが、少し厄介です。

以下のコードでコネクタークラスを作成してください。

import { set } from "@ember/object";
import EmberObject from "@ember/object";

export default {
@discourseComputed("model.user_fields.@each.value")
  publicUserFields() {
    const siteUserFields = this.site.get("user_fields");
    if (!isEmpty(siteUserFields)) {
      const userFields = this.get("model.user_fields");
      return siteUserFields
        .filterBy("show_on_user_card", true)
        .sortBy("position")
        .map(field => {
          set(field, "dasherized_name", field.get("name").dasherize());
          const value = userFields ? userFields[field.get("id")] : null;
          return isEmpty(value) ? null : EmberObject.create({ value, field });
        })
        .compact();
    }
  },
}

コネクターテンプレートでは、

{{#if publicUserFields}}
        <div class="card-row fifth-row">
          <div class="public-user-fields">
            {{#each publicUserFields as |uf|}}
              {{#if uf.value}}
                <div class="public-user-field {{uf.field.dasherized_name}}">
                  <span class="user-field-name">{{uf.field.name}}:</span>
                  <span class="user-field-value">{{uf.value}}</span>
                </div>
              {{/if}}
            {{/each}}
          </div>
        </div>
{{/if}}
4

@pfaffman 動作しましたか？

5

まだ試す機会がありませんでしたが、きっと役立つと思います。まだ学ぶべきことがたくさんあります。こんなにも親切にしてくださり、本当にありがとうございます。感謝の気持ちでいっぱいです。試してみたら、改めてお礼を申し上げます。