DEV: Wiring for the admin about config page (discourse#27492)

This commit continues work laid out by discourse@ffec816 for the admin config page for the /about page. The last commit set up the user interface, and this one sets up all the wiring needed to make the input fields and save buttons actually work.

Internal topic: t/128544.

app/assets/javascripts/admin/addon/components/admin-config-area-card.gjs

@@ -6,7 +6,7 @@ export default class AdminConfigAreaCard extends Component {
   @tracked collapsed = false;
 
   <template>
-    <section class="admin-config-area-card">
+    <section class="admin-config-area-card" ...attributes>
       <h3 class="admin-config-area-card__title">{{i18n @heading}}</h3>
       <div class="admin-config-area-card__content">
         {{yield}}

app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/contact-information.gjs

@@ -1,20 +1,78 @@
 import Component from "@glimmer/component";
+import { tracked } from "@glimmer/tracking";
+import { fn, hash } from "@ember/helper";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
+import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
+import withEventValue from "discourse/helpers/with-event-value";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 import i18n from "discourse-common/helpers/i18n";
+import I18n from "discourse-i18n";
 import GroupChooser from "select-kit/components/group-chooser";
 import UserChooser from "select-kit/components/user-chooser";
 
 export default class AdminConfigAreasAboutContactInformation extends Component {
+  @service site;
+  @service toasts;
+
+  @tracked
+  contactUsername = this.args.contactInformation.contactUsername.value || null;
+  @tracked
+  contactGroupId = this.site.groups.find(
+    (group) => group.name === this.contactGroupName
+  )?.id;
+
+  communityOwner = this.args.contactInformation.communityOwner.value;
+  contactEmail = this.args.contactInformation.contactEmail.value;
+  contactURL = this.args.contactInformation.contactURL.value;
+  contactGroupName = this.args.contactInformation.contactGroupName.value;
+
+  @action
+  onContactUsernameChange(usernames) {
+    this.contactUsername = usernames[0];
+  }
+
+  @action
+  onContactGroupIdChange(ids, groups) {
+    this.contactGroupId = ids[0];
+    this.contactGroupName = groups[0]?.name;
+  }
+
   @action
-  save() {
-    this.args.saveCallback();
-    // eslint-disable-next-line no-console
-    console.log("contact information");
+  async save() {
+    try {
+      this.args.setGlobalSavingStatus(true);
+      await ajax("/admin/config/about.json", {
+        type: "PUT",
+        data: {
+          contact_information: {
+            community_owner: this.communityOwner,
+            contact_email: this.contactEmail,
+            contact_url: this.contactURL,
+            contact_username: this.contactUsername,
+            contact_group_name: this.contactGroupName,
+          },
+        },
+      });
+      this.toasts.success({
+        duration: 3000,
+        data: {
+          message: I18n.t(
+            "admin.config_areas.about.toasts.contact_information_saved"
+          ),
+        },
+      });
+    } catch (err) {
+      popupAjaxError(err);
+    } finally {
+      this.args.setGlobalSavingStatus(false);
+    }
   }
 
   <template>
-    <div class="control-group">
+    <div class="control-group community-owner-input">
       <label>
         <span>{{i18n "admin.config_areas.about.community_owner"}}</span>
         <span class="admin-config-area-card__label-optional">{{i18n
@@ -24,9 +82,13 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
       <p class="admin-config-area-card__additional-help">
         {{i18n "admin.config_areas.about.community_owner_help"}}
       </p>
-      <input type="text" />
+      <input
+        {{on "input" (withEventValue (fn (mut this.communityOwner)))}}
+        type="text"
+        value={{this.communityOwner}}
+      />
     </div>
-    <div class="control-group">
+    <div class="control-group contact-email-input">
       <label>
         <span>{{i18n "admin.config_areas.about.contact_email"}}</span>
         <span class="admin-config-area-card__label-optional">{{i18n
@@ -36,9 +98,13 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
       <p class="admin-config-area-card__additional-help">
         {{i18n "admin.config_areas.about.contact_email_help"}}
       </p>
-      <input type="text" />
+      <input
+        {{on "input" (withEventValue (fn (mut this.contactEmail)))}}
+        type="text"
+        value={{this.contactEmail}}
+      />
     </div>
-    <div class="control-group">
+    <div class="control-group contact-url-input">
       <label>
         <span>{{i18n "admin.config_areas.about.contact_url"}}</span>
         <span class="admin-config-area-card__label-optional">{{i18n
@@ -48,9 +114,13 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
       <p class="admin-config-area-card__additional-help">
         {{i18n "admin.config_areas.about.contact_url_help"}}
       </p>
-      <input type="text" />
+      <input
+        {{on "input" (withEventValue (fn (mut this.contactURL)))}}
+        type="text"
+        value={{this.contactURL}}
+      />
     </div>
-    <div class="control-group">
+    <div class="control-group site-contact-username-input">
       <label>
         <span>{{i18n "admin.config_areas.about.site_contact_name"}}</span>
         <span class="admin-config-area-card__label-optional">{{i18n
@@ -60,9 +130,13 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
       <p class="admin-config-area-card__additional-help">
         {{i18n "admin.config_areas.about.site_contact_name_help"}}
       </p>
-      <UserChooser />
+      <UserChooser
+        @value={{this.contactUsername}}
+        @onChange={{this.onContactUsernameChange}}
+        @options={{hash maximum=1}}
+      />
     </div>
-    <div class="control-group">
+    <div class="control-group site-contact-group-input">
       <label>
         <span>{{i18n "admin.config_areas.about.site_contact_group"}}</span>
         <span class="admin-config-area-card__label-optional">{{i18n
@@ -72,12 +146,18 @@ export default class AdminConfigAreasAboutContactInformation extends Component {
       <p class="admin-config-area-card__additional-help">
         {{i18n "admin.config_areas.about.site_contact_group_help"}}
       </p>
-      <GroupChooser />
+      <GroupChooser
+        @content={{this.site.groups}}
+        @value={{this.contactGroupId}}
+        @onChange={{this.onContactGroupIdChange}}
+        @options={{hash maximum=1}}
+      />
     </div>
     <DButton
       @label="admin.config_areas.about.update"
       @action={{this.save}}
-      class="btn-primary"
+      @disabled={{@globalSavingStatus}}
+      class="btn-primary admin-config-area-card__btn-save"
     />
   </template>
 }

app/assets/javascripts/admin/addon/components/admin-config-area-cards/about/general-settings.gjs

@@ -1,37 +1,82 @@
 import Component from "@glimmer/component";
+import { fn } from "@ember/helper";
+import { on } from "@ember/modifier";
 import { action } from "@ember/object";
+import { service } from "@ember/service";
 import DButton from "discourse/components/d-button";
 import DEditor from "discourse/components/d-editor";
 import UppyImageUploader from "discourse/components/uppy-image-uploader";
+import withEventValue from "discourse/helpers/with-event-value";
+import { ajax } from "discourse/lib/ajax";
+import { popupAjaxError } from "discourse/lib/ajax-error";
 import i18n from "discourse-common/helpers/i18n";
+import I18n from "discourse-i18n";
 
 export default class AdminConfigAreasAboutGeneralSettings extends Component {
+  @service toasts;
+
+  name = this.args.generalSettings.title.value;
+  summary = this.args.generalSettings.siteDescription.value;
+  extendedDescription = this.args.generalSettings.extendedSiteDescription.value;
+  aboutBannerImage = this.args.generalSettings.aboutBannerImage.value;
+
   @action
-  save() {
-    this.args.saveCallback();
-    // eslint-disable-next-line no-console
-    console.log("general settings");
+  async save() {
+    try {
+      this.args.setGlobalSavingStatus(true);
+      await ajax("/admin/config/about.json", {
+        type: "PUT",
+        data: {
+          general_settings: {
+            name: this.name,
+            summary: this.summary,
+            extended_description: this.extendedDescription,
+            about_banner_image: this.aboutBannerImage,
+          },
+        },
+      });
+      this.toasts.success({
+        duration: 3000,
+        data: {
+          message: I18n.t(
+            "admin.config_areas.about.toasts.general_settings_saved"
+          ),
+        },
+      });
+    } catch (err) {
+      popupAjaxError(err);
+    } finally {
+      this.args.setGlobalSavingStatus(false);
+    }
   }
 
   <template>
-    <div class="control-group">
+    <div class="control-group community-name-input">
       <label>{{i18n "admin.config_areas.about.community_name"}}</label>
-      <input type="text" />
+      <input
+        {{on "input" (withEventValue (fn (mut this.name)))}}
+        type="text"
+        value={{this.name}}
+      />
     </div>
-    <div class="control-group">
+    <div class="control-group community-summary-input">
       <label>{{i18n "admin.config_areas.about.community_summary"}}</label>
-      <input type="text" />
+      <input
+        {{on "input" (withEventValue (fn (mut this.summary)))}}
+        type="text"
+        value={{this.summary}}
+      />
     </div>
-    <div class="control-group">
+    <div class="control-group community-description-input">
       <label>
         <span>{{i18n "admin.config_areas.about.community_description"}}</span>
         <span class="admin-config-area-card__label-optional">{{i18n
             "admin.config_areas.about.optional"
           }}</span>
       </label>
-      <DEditor />
+      <DEditor @value={{this.extendedDescription}} />
     </div>
-    <div class="control-group">
+    <div class="control-group banner-image-uploader">
       <label>
         <span>{{i18n "admin.config_areas.about.banner_image"}}</span>
         <span class="admin-config-area-card__label-optional">{{i18n
@@ -41,12 +86,16 @@ export default class AdminConfigAreasAboutGeneralSettings extends Component {
       <p class="admin-config-area-card__additional-help">
         {{i18n "admin.config_areas.about.banner_image_help"}}
       </p>
-      <UppyImageUploader />
+      <UppyImageUploader
+        @type="site_setting"
+        @imageUrl={{this.aboutBannerImage}}
+      />
     </div>
     <DButton
       @label="admin.config_areas.about.update"
       @action={{this.save}}
-      class="btn-primary"
+      @disabled={{@globalSavingStatus}}
+      class="btn-primary admin-config-area-card__btn-save"
     />
   </template>
 }