discourse/app/assets/javascripts/admin/addon/components/admin-config-areas/about.gjs
Martin Brennan 8632ea5a63
UX: Apply admin UI guidelines to custom flags (#28433)
This commit changes the custom flags admin config area
to use the AdminPageHeader component and conforms
to the new admin UI guidelines. Also makes some slight
modifications to the reusable components to handle using
a @route for an action button.
2024-08-21 10:42:00 +10:00

89 lines
3.3 KiB
Plaintext

import Component from "@glimmer/component";
import { tracked } from "@glimmer/tracking";
import { action } from "@ember/object";
import i18n from "discourse-common/helpers/i18n";
import AdminConfigAreaCard from "admin/components/admin-config-area-card";
import AdminConfigAreasAboutContactInformation from "admin/components/admin-config-area-cards/about/contact-information";
import AdminConfigAreasAboutGeneralSettings from "admin/components/admin-config-area-cards/about/general-settings";
import AdminConfigAreasAboutYourOrganization from "admin/components/admin-config-area-cards/about/your-organization";
export default class AdminConfigAreasAbout extends Component {
@tracked saving = false;
get generalSettings() {
return {
title: this.#lookupSettingFromData("title"),
siteDescription: this.#lookupSettingFromData("site_description"),
extendedSiteDescription: this.#lookupSettingFromData(
"extended_site_description"
),
aboutBannerImage: this.#lookupSettingFromData("about_banner_image"),
};
}
get contactInformation() {
return {
communityOwner: this.#lookupSettingFromData("community_owner"),
contactEmail: this.#lookupSettingFromData("contact_email"),
contactURL: this.#lookupSettingFromData("contact_url"),
contactUsername: this.#lookupSettingFromData("site_contact_username"),
contactGroupName: this.#lookupSettingFromData("site_contact_group_name"),
};
}
get yourOrganization() {
return {
companyName: this.#lookupSettingFromData("company_name"),
governingLaw: this.#lookupSettingFromData("governing_law"),
cityForDisputes: this.#lookupSettingFromData("city_for_disputes"),
};
}
@action
setSavingStatus(status) {
this.saving = status;
}
#lookupSettingFromData(name) {
return this.args.data.findBy("setting", name);
}
<template>
<div class="admin-config-area">
<h2>{{i18n "admin.config_areas.about.header"}}</h2>
<div class="admin-config-area__primary-content">
<AdminConfigAreaCard
@heading="admin.config_areas.about.general_settings"
class="admin-config-area-about__general-settings-section"
>
<AdminConfigAreasAboutGeneralSettings
@generalSettings={{this.generalSettings}}
@setGlobalSavingStatus={{this.setSavingStatus}}
@globalSavingStatus={{this.saving}}
/>
</AdminConfigAreaCard>
<AdminConfigAreaCard
@heading="admin.config_areas.about.contact_information"
class="admin-config-area-about__contact-information-section"
>
<AdminConfigAreasAboutContactInformation
@contactInformation={{this.contactInformation}}
@setGlobalSavingStatus={{this.setSavingStatus}}
@globalSavingStatus={{this.saving}}
/>
</AdminConfigAreaCard>
<AdminConfigAreaCard
@heading="admin.config_areas.about.your_organization"
class="admin-config-area-about__your-organization-section"
>
<AdminConfigAreasAboutYourOrganization
@yourOrganization={{this.yourOrganization}}
@setGlobalSavingStatus={{this.setSavingStatus}}
@globalSavingStatus={{this.saving}}
/>
</AdminConfigAreaCard>
</div>
</div>
</template>
}