first commit

resources/client/admin/channels/edit-channel-page.tsx

@@ -0,0 +1,115 @@
+import {EditChannelPageLayout} from '@common/admin/channels/channel-editor/edit-channel-page-layout';
+import React, {Fragment} from 'react';
+import {Accordion, AccordionItem} from '@common/ui/accordion/accordion';
+import {Trans} from '@common/i18n/trans';
+import {DescriptionIcon} from '@common/icons/material/Description';
+import {ChannelNameField} from '@common/admin/channels/channel-editor/controls/channel-name-field';
+import {FormSwitch} from '@common/ui/forms/toggle/switch';
+import {FormTextField} from '@common/ui/forms/input-field/text-field/text-field';
+import {InfoDialogTrigger} from '@common/ui/overlays/dialog/info-dialog-trigger/info-dialog-trigger';
+import {SettingsIcon} from '@common/icons/material/Settings';
+import {ContentTypeField} from '@common/admin/channels/channel-editor/controls/content-type-field';
+import {channelContentConfig} from '@app/admin/channels/channel-content-config';
+import {ChannelAutoUpdateField} from '@app/admin/channels/channel-auto-update-field';
+import {ContentModelField} from '@common/admin/channels/channel-editor/controls/content-model-field';
+import {ChannelRestrictionField} from '@app/admin/channels/channel-restriction-field';
+import {ContentOrderField} from '@common/admin/channels/channel-editor/controls/content-order-field';
+import {DashboardIcon} from '@common/icons/material/Dashboard';
+import {ContentLayoutFields} from '@common/admin/channels/channel-editor/controls/content-layout-fields';
+import {ChannelPaginationTypeField} from '@common/admin/channels/channel-editor/controls/channel-pagination-type-field';
+import {PublicIcon} from '@common/icons/material/Public';
+import {ChannelSeoFields} from '@app/admin/channels/channel-seo-fields';
+import {ChannelContentEditor} from '@common/admin/channels/channel-editor/channel-content-editor';
+import {
+  ChannelContentSearchField,
+  ChannelContentSearchFieldProps,
+} from '@common/admin/channels/channel-editor/channel-content-search-field';
+import {ChannelContentItemImage} from '@app/admin/channels/channel-content-item-image';
+
+export function EditChannelPage() {
+  return (
+    <EditChannelPageLayout>
+      <Fragment>
+        <Accordion variant="outline">
+          <AccordionItem
+            label={<Trans message="Title & description" />}
+            startIcon={<DescriptionIcon />}
+          >
+            <ChannelNameField />
+            <FormSwitch
+              className="mt-24"
+              name="config.hideTitle"
+              description={
+                <Trans message="Whether title should be shown when displaying this channel on the site." />
+              }
+            >
+              <Trans message="Hide title" />
+            </FormSwitch>
+            <FormTextField
+              name="description"
+              label={<Trans message="Description" />}
+              inputElementType="textarea"
+              rows={1}
+              className="mt-24"
+            />
+            <FormTextField
+              name="config.adminDescription"
+              label={
+                <Fragment>
+                  <Trans message="Internal description" />
+                  <InfoDialogTrigger
+                    body={
+                      <Trans message="This describes the purpose of the channel and is only visible in admin area." />
+                    }
+                  />
+                </Fragment>
+              }
+              inputElementType="textarea"
+              rows={1}
+              className="mt-24"
+            />
+          </AccordionItem>
+          <AccordionItem
+            label={<Trans message="Content settings" />}
+            startIcon={<SettingsIcon />}
+          >
+            <ContentTypeField config={channelContentConfig} className="mb-24" />
+            <ChannelAutoUpdateField className="mb-24" />
+            <ContentModelField
+              config={channelContentConfig}
+              className="mb-24"
+            />
+            <ChannelRestrictionField className="mb-24" />
+            <ContentOrderField config={channelContentConfig} />
+          </AccordionItem>
+          <AccordionItem
+            label={<Trans message="Layout" />}
+            startIcon={<DashboardIcon />}
+          >
+            <ContentLayoutFields
+              config={channelContentConfig}
+              className="mb-24"
+            />
+            <ChannelPaginationTypeField config={channelContentConfig} />
+          </AccordionItem>
+          <AccordionItem
+            label={<Trans message="SEO" />}
+            startIcon={<PublicIcon />}
+          >
+            <ChannelSeoFields />
+          </AccordionItem>
+        </Accordion>
+        <ChannelContentEditor searchField={<SearchField />} />
+      </Fragment>
+    </EditChannelPageLayout>
+  );
+}
+
+function SearchField(props: ChannelContentSearchFieldProps) {
+  return (
+    <ChannelContentSearchField
+      {...props}
+      imgRenderer={item => <ChannelContentItemImage item={item} />}
+    />
+  );
+}