DEV: Convert `feature-topic-on-profile` modal to component-based API (#23275)
# Before <img width="738" alt="Screenshot 2023-08-25 at 2 04 31 PM" src="https://github.com/discourse/discourse/assets/50783505/c0778da2-d062-48d9-93e8-4b481190fadc"> # After <img width="750" alt="Screenshot 2023-08-25 at 2 04 34 PM" src="https://github.com/discourse/discourse/assets/50783505/07aa2bec-e282-424e-b87d-48f5104eb534">
This commit is contained in:
Isaac Janzen
GitHub
parent
1209efb63c
commit
aaf0b0f1cc
|
|
@ -0,0 +1,26 @@
|
|||
<DModal
|
||||
@closeModal={{@closeModal}}
|
||||
class="feature-topic-on-profile choose-topic-modal"
|
||||
id="choosing-topic"
|
||||
@title={{i18n "user.feature_topic_on_profile.title"}}
|
||||
>
|
||||
<:body>
|
||||
<ChooseTopic
|
||||
@currentTopicId={{@model.user.featured_topic.id}}
|
||||
@selectedTopicId={{this.newFeaturedTopicId}}
|
||||
@additionalFilters="status:public"
|
||||
@label="user.feature_topic_on_profile.search_label"
|
||||
@topicChangedCallback={{this.newTopicSelected}}
|
||||
@loadOnInit={{true}}
|
||||
/>
|
||||
</:body>
|
||||
<:footer>
|
||||
<DButton
|
||||
@action={{this.save}}
|
||||
class="btn-primary save-featured-topic-on-profile"
|
||||
@disabled={{this.noTopicSelected}}
|
||||
@label="user.feature_topic_on_profile.save"
|
||||
/>
|
||||
<DButton @action={{@closeModal}} @label="cancel" class="btn-flat" />
|
||||
</:footer>
|
||||
</DModal>
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
import Component from "@glimmer/component";
|
||||
import { tracked } from "@glimmer/tracking";
|
||||
import { action } from "@ember/object";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||
|
||||
export default class FeatureTopicOnProfile extends Component {
|
||||
@tracked newFeaturedTopic = null;
|
||||
@tracked saving = false;
|
||||
|
||||
get noTopicSelected() {
|
||||
return !this.newFeaturedTopic;
|
||||
}
|
||||
|
||||
@action
|
||||
async save() {
|
||||
try {
|
||||
this.saving = true;
|
||||
await ajax(`/u/${this.args.model.user.username}/feature-topic`, {
|
||||
type: "PUT",
|
||||
data: { topic_id: this.newFeaturedTopic.id },
|
||||
});
|
||||
|
||||
this.args.model.setFeaturedTopic(this.newFeaturedTopic);
|
||||
this.args.closeModal();
|
||||
} catch (error) {
|
||||
popupAjaxError(error);
|
||||
} finally {
|
||||
this.saving = false;
|
||||
}
|
||||
}
|
||||
|
||||
@action
|
||||
newTopicSelected(topic) {
|
||||
this.newFeaturedTopic = topic;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,37 +0,0 @@
|
|||
import Controller from "@ember/controller";
|
||||
import ModalFunctionality from "discourse/mixins/modal-functionality";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import { none } from "@ember/object/computed";
|
||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||
|
||||
export default Controller.extend(ModalFunctionality, {
|
||||
newFeaturedTopic: null,
|
||||
saving: false,
|
||||
noTopicSelected: none("newFeaturedTopic"),
|
||||
|
||||
onClose() {
|
||||
this.set("newFeaturedTopic", null);
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.set("modal.modalClass", "choose-topic-modal");
|
||||
},
|
||||
|
||||
actions: {
|
||||
save() {
|
||||
return ajax(`/u/${this.model.username}/feature-topic`, {
|
||||
type: "PUT",
|
||||
data: { topic_id: this.newFeaturedTopic.id },
|
||||
})
|
||||
.then(() => {
|
||||
this.model.set("featured_topic", this.newFeaturedTopic);
|
||||
this.send("closeModal");
|
||||
})
|
||||
.catch(popupAjaxError);
|
||||
},
|
||||
|
||||
newTopicSelected(topic) {
|
||||
this.set("newFeaturedTopic", topic);
|
||||
},
|
||||
},
|
||||
});
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import Controller from "@ember/controller";
|
||||
import EmberObject from "@ember/object";
|
||||
import EmberObject, { action } from "@ember/object";
|
||||
import I18n from "I18n";
|
||||
import { ajax } from "discourse/lib/ajax";
|
||||
import { cookAsync } from "discourse/lib/text";
|
||||
|
|
@ -7,11 +7,12 @@ import discourseComputed from "discourse-common/utils/decorators";
|
|||
import { isEmpty } from "@ember/utils";
|
||||
import { popupAjaxError } from "discourse/lib/ajax-error";
|
||||
import { readOnly } from "@ember/object/computed";
|
||||
import showModal from "discourse/lib/show-modal";
|
||||
import { inject as service } from "@ember/service";
|
||||
import FeatureTopicOnProfileModal from "discourse/components/modal/feature-topic-on-profile";
|
||||
|
||||
export default Controller.extend({
|
||||
dialog: service(),
|
||||
modal: service(),
|
||||
subpageTitle: I18n.t("user.preferences_nav.profile"),
|
||||
init() {
|
||||
this._super(...arguments);
|
||||
|
|
@ -69,17 +70,18 @@ export default Controller.extend({
|
|||
"model.can_upload_user_card_background"
|
||||
),
|
||||
|
||||
actions: {
|
||||
showFeaturedTopicModal() {
|
||||
const modal = showModal("feature-topic-on-profile", {
|
||||
model: this.model,
|
||||
title: "user.feature_topic_on_profile.title",
|
||||
});
|
||||
modal.set("onClose", () => {
|
||||
document.querySelector(".feature-topic-on-profile-btn")?.focus();
|
||||
});
|
||||
},
|
||||
@action
|
||||
async showFeaturedTopicModal() {
|
||||
await this.modal.show(FeatureTopicOnProfileModal, {
|
||||
model: {
|
||||
user: this.model,
|
||||
setFeaturedTopic: (v) => this.set("model.featured_topic", v),
|
||||
},
|
||||
});
|
||||
document.querySelector(".feature-topic-on-profile-btn")?.focus();
|
||||
},
|
||||
|
||||
actions: {
|
||||
clearFeaturedTopicFromProfile() {
|
||||
this.dialog.yesNoConfirm({
|
||||
message: I18n.t("user.feature_topic_on_profile.clear.warning"),
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ const KNOWN_LEGACY_MODALS = [
|
|||
"create-account",
|
||||
"create-invite-bulk",
|
||||
"create-invite",
|
||||
"feature-topic-on-profile",
|
||||
"feature-topic",
|
||||
"flag",
|
||||
"grant-badge",
|
||||
|
|
|
|||
|
|
@ -1,24 +0,0 @@
|
|||
<DModalBody @class="feature-topic-on-profile" @id="choosing-topic">
|
||||
<ChooseTopic
|
||||
@currentTopicId={{this.model.featured_topic.id}}
|
||||
@selectedTopicId={{this.newFeaturedTopicId}}
|
||||
@additionalFilters="status:public"
|
||||
@label="user.feature_topic_on_profile.search_label"
|
||||
@topicChangedCallback={{action "newTopicSelected"}}
|
||||
@loadOnInit={{true}}
|
||||
/>
|
||||
</DModalBody>
|
||||
|
||||
<div class="modal-footer">
|
||||
<DButton
|
||||
@action={{action "save"}}
|
||||
@class="btn-primary save-featured-topic-on-profile"
|
||||
@disabled={{this.noTopicSelected}}
|
||||
@label="user.feature_topic_on_profile.save"
|
||||
/>
|
||||
<DButton
|
||||
@action={{route-action "closeModal"}}
|
||||
@label="cancel"
|
||||
@class="btn-flat"
|
||||
/>
|
||||
</div>
|
||||
Loading…
Reference in New Issue