사용자 계정 페이지에 사용자 정의 필드 표시

개발
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>Custom User fields for {{ model.username}}</h3>
This is 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

아직 직접 써보진 못했지만, 아마도 그렇게 될 거라고 생각해요. 아직 배워야 할 것이 너무 많거든요. 이렇게 넉넉하게 도와주셔서 정말 감사합니다! 감사하다는 말씀을 충분히 드리기 어렵지만, 나중에 직접 사용해볼 때 다시 한번 감사 인사를 드릴게요.