add: pages structure

npm/ng-packs/guides/CMS_KIT_ANGULAR_STRUCTURE.md

@@ -1175,31 +1175,31 @@ export enum eCmsKitAdminRouteNames {
 
 ### Phase 1: Foundation
 
-- [ ] Create package structure (admin, public, proxy)
+- [x] Create package structure (admin, public, proxy)
-- [ ] Set up TypeScript configurations
+- [x] Set up TypeScript configurations
-- [ ] Set up ng-package.json files
+- [x] Set up ng-package.json files
-- [ ] Create base models and enums
+- [x] Create base models and enums
-- [ ] Set up service base classes
+- [x] Set up service base classes
 
 ### Phase 2: Admin - Comments Feature
 
-- [ ] Create CommentListComponent
+- [x] Create CommentListComponent
-- [ ] Create CommentApproveComponent
+- [x] Create CommentApproveComponent
-- [ ] Create CommentDetailsComponent
+- [x] Create CommentDetailsComponent
-- [ ] Create default extension points
+- [x] Create default extension points
-- [ ] Add routes and providers
+- [x] Add routes and providers
 
 ### Phase 3: Admin - Tags Feature
 
-- [ ] Create Tag components
+- [x] Create Tag components
-- [ ] Create default extension points
+- [x] Create default extension points
-- [ ] Add routes and providers
+- [x] Add routes and providers
 
 ### Phase 4: Admin - Pages Feature
 
-- [ ] Create Page components
+- [x] Create Page components
-- [ ] Create default extension points
+- [x] Create default extension points
-- [ ] Add routes and providers
+- [x] Add routes and providers
 
 ### Phase 5: Admin - Blogs Feature
 

npm/ng-packs/packages/cms-kit/admin/src/cms-kit-admin.routes.ts

@@ -12,6 +12,8 @@ import {
   CommentApproveComponent,
   CommentDetailsComponent,
   TagListComponent,
+  PageListComponent,
+  PageFormComponent,
 } from './components';
 import {
   CMS_KIT_ADMIN_ENTITY_ACTION_CONTRIBUTORS,
@@ -91,6 +93,51 @@ export function createRoutes(config: CmsKitAdminConfigOptions = {}): Routes {
           },
           title: 'CmsKit::Tags',
         },
+        {
+          path: 'pages',
+          component: ReplaceableRouteContainerComponent,
+          resolve: {
+            extensions: cmsKitAdminExtensionsResolver,
+          },
+          data: {
+            requiredPolicy: 'CmsKit.Pages',
+            replaceableComponent: {
+              key: eCmsKitAdminComponents.PageList,
+              defaultComponent: PageListComponent,
+            },
+          },
+          title: 'CmsKit::Pages',
+        },
+        {
+          path: 'pages/create',
+          component: ReplaceableRouteContainerComponent,
+          resolve: {
+            extensions: cmsKitAdminExtensionsResolver,
+          },
+          data: {
+            requiredPolicy: 'CmsKit.Pages.Create',
+            replaceableComponent: {
+              key: eCmsKitAdminComponents.PageCreate,
+              defaultComponent: PageFormComponent,
+            },
+          },
+          title: 'CmsKit::Pages',
+        },
+        {
+          path: 'pages/update/:id',
+          component: ReplaceableRouteContainerComponent,
+          resolve: {
+            extensions: cmsKitAdminExtensionsResolver,
+          },
+          data: {
+            requiredPolicy: 'CmsKit.Pages.Update',
+            replaceableComponent: {
+              key: eCmsKitAdminComponents.PageEdit,
+              defaultComponent: PageFormComponent,
+            },
+          },
+          title: 'CmsKit::Pages',
+        },
       ],
     },
   ];

npm/ng-packs/packages/cms-kit/admin/src/components/comments/comment-list/comment-list.component.ts

@@ -18,7 +18,6 @@ import { CMS_KIT_COMMENTS_REQUIRE_APPROVEMENT } from '../constants';
 
 @Component({
   selector: 'abp-comment-list',
-  standalone: true,
   templateUrl: './comment-list.component.html',
   providers: [
     ListService,

npm/ng-packs/packages/cms-kit/admin/src/components/index.ts

@@ -1,6 +1,6 @@
 export * from './comments';
 export * from './tags';
-// export * from './pages';
+export * from './pages';
 // export * from './blogs';
 // export * from './blog-posts';
 // export * from './menus';

npm/ng-packs/packages/cms-kit/admin/src/components/pages/index.ts

@@ -0,0 +1,2 @@
+export * from './page-list/page-list.component';
+export * from './page-form/page-form.component';

npm/ng-packs/packages/cms-kit/admin/src/components/pages/page-form/page-form.component.html

@@ -0,0 +1,57 @@
+<abp-page [title]="'CmsKit::Pages' | abpLocalization">
+  <div class="card">
+    <div class="card-body">
+      @if (form && (!isEditMode || page)) {
+        <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
+          <!-- Basic fields outside tabs -->
+          <abp-extensible-form [selectedRecord]="page || {}" />
+
+          <!-- Tabs for Content, Script, and Style -->
+          <ul ngbNav #nav="ngbNav" class="nav-tabs mt-3">
+            <li ngbNavItem>
+              <a ngbNavLink>{{ 'CmsKit::Content' | abpLocalization }}</a>
+              <ng-template ngbNavContent>
+                <div class="mt-3">
+                  <abp-toastui-editor formControlName="content" />
+                </div>
+              </ng-template>
+            </li>
+
+            <li ngbNavItem>
+              <a ngbNavLink>{{ 'CmsKit::Script' | abpLocalization }}</a>
+              <ng-template ngbNavContent>
+                <div class="mt-3">
+                  <abp-codemirror-editor formControlName="script" />
+                </div>
+              </ng-template>
+            </li>
+
+            <li ngbNavItem>
+              <a ngbNavLink>{{ 'CmsKit::Style' | abpLocalization }}</a>
+              <ng-template ngbNavContent>
+                <div class="mt-3">
+                  <abp-codemirror-editor formControlName="style" />
+                </div>
+              </ng-template>
+            </li>
+          </ul>
+          <div class="mt-2 fade-in-top" [ngbNavOutlet]="nav"></div>
+        </form>
+      } @else {
+        <div class="text-center">
+          <i class="fa fa-pulse fa-spinner" aria-hidden="true"></i>
+        </div>
+      }
+    </div>
+    <div class="card-footer">
+      <div class="d-flex justify-content-start gap-2">
+        <button class="btn btn-secondary" (click)="saveAsDraft()" [disabled]="form?.invalid">
+          {{ 'CmsKit::SaveAsDraft' | abpLocalization }}
+        </button>
+        <abp-button (click)="publish()" [disabled]="form?.invalid">
+          {{ 'CmsKit::Publish' | abpLocalization }}
+        </abp-button>
+      </div>
+    </div>
+  </div>
+</abp-page>

npm/ng-packs/packages/cms-kit/admin/src/components/pages/page-form/page-form.component.ts

@@ -0,0 +1,166 @@
+import { Component, OnInit, inject, Injector, DestroyRef } from '@angular/core';
+import { takeUntilDestroyed } from '@angular/core/rxjs-interop';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormGroup, FormControl } from '@angular/forms';
+import { ActivatedRoute } from '@angular/router';
+import { NgbNavModule } from '@ng-bootstrap/ng-bootstrap';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { LocalizationPipe } from '@abp/ng.core';
+import {
+  ExtensibleFormComponent,
+  FormPropData,
+  generateFormFromProps,
+  EXTENSIONS_IDENTIFIER,
+} from '@abp/ng.components/extensible';
+import { PageComponent } from '@abp/ng.components/page';
+import { ButtonComponent } from '@abp/ng.theme.shared';
+import { ToastuiEditorComponent, CodeMirrorEditorComponent } from '@abp/ng.cms-kit';
+import { PageAdminService, PageDto } from '@abp/ng.cms-kit/proxy';
+import { eCmsKitAdminComponents } from '../../../enums';
+import { PageFormService } from '../../../services';
+
+@Component({
+  selector: 'abp-page-form',
+  templateUrl: './page-form.component.html',
+  providers: [
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useFactory: (route: ActivatedRoute) => {
+        const id = route.snapshot.params['id'];
+        if (id) {
+          return eCmsKitAdminComponents.PageEdit;
+        }
+        return eCmsKitAdminComponents.PageCreate;
+      },
+      deps: [ActivatedRoute],
+    },
+  ],
+  imports: [
+    ButtonComponent,
+    CodeMirrorEditorComponent,
+    ExtensibleFormComponent,
+    PageComponent,
+    ToastuiEditorComponent,
+    LocalizationPipe,
+    ReactiveFormsModule,
+    CommonModule,
+    NgxValidateCoreModule,
+    NgbNavModule,
+  ],
+})
+export class PageFormComponent implements OnInit {
+  private pageService = inject(PageAdminService);
+  private injector = inject(Injector);
+  private pageFormService = inject(PageFormService);
+  private route = inject(ActivatedRoute);
+  private destroyRef = inject(DestroyRef);
+
+  form: FormGroup;
+  page: PageDto | null = null;
+  pageId: string | null = null;
+  isEditMode = false;
+
+  ngOnInit() {
+    const id = this.route.snapshot.params['id'];
+    if (id) {
+      this.isEditMode = true;
+      this.pageId = id;
+      this.loadPage(id);
+    } else {
+      this.isEditMode = false;
+      this.buildForm();
+    }
+  }
+
+  private loadPage(id: string) {
+    this.pageService.get(id).subscribe(page => {
+      this.page = page;
+      this.buildForm();
+    });
+  }
+
+  private buildForm() {
+    const data = new FormPropData(this.injector, this.page || {});
+    const baseForm = generateFormFromProps(data);
+    this.form = new FormGroup({
+      ...baseForm.controls,
+      content: new FormControl(this.page?.content || ''),
+      script: new FormControl(this.page?.script || ''),
+      style: new FormControl(this.page?.style || ''),
+    });
+    this.prepareSlug();
+  }
+
+  private executeSaveOperation(operation: 'save' | 'draft' | 'publish') {
+    if (this.isEditMode) {
+      if (!this.page || !this.pageId) {
+        return;
+      }
+
+      switch (operation) {
+        case 'save':
+          this.pageFormService.update(this.pageId, this.form, this.page).subscribe();
+          break;
+        case 'draft':
+          this.pageFormService.updateAsDraft(this.pageId, this.form, this.page).subscribe();
+          break;
+        case 'publish':
+          this.pageFormService.updateAndPublish(this.pageId, this.form, this.page).subscribe();
+          break;
+      }
+      return;
+    }
+
+    switch (operation) {
+      case 'save':
+        this.pageFormService.create(this.form).subscribe();
+        break;
+      case 'draft':
+        this.pageFormService.createAsDraft(this.form).subscribe();
+        break;
+      case 'publish':
+        this.pageFormService.publish(this.form).subscribe();
+        break;
+    }
+  }
+
+  private dasharize(text: string): string {
+    return text
+      .trim()
+      .replace(/([a-z])([A-Z])/g, '$1-$2')
+      .replace(/([A-Z]+)([A-Z][a-z])/g, '$1-$2')
+      .replace(/[\s_]+/g, '-')
+      .replace(/[^\w\s-]/g, '')
+      .replace(/-+/g, '-')
+      .replace(/^-+|-+$/g, '')
+      .toLowerCase();
+  }
+
+  save() {
+    this.executeSaveOperation('save');
+  }
+
+  saveAsDraft() {
+    this.executeSaveOperation('draft');
+  }
+
+  publish() {
+    this.executeSaveOperation('publish');
+  }
+
+  prepareSlug() {
+    const titleControl = this.form.get('title');
+    const slugControl = this.form.get('slug');
+    if (titleControl && slugControl) {
+      titleControl.valueChanges.pipe(takeUntilDestroyed(this.destroyRef)).subscribe(title => {
+        if (title && typeof title === 'string') {
+          const dasharized = this.dasharize(title);
+          const currentSlug = slugControl.value || '';
+          if (dasharized !== currentSlug) {
+            slugControl.setValue(dasharized, { emitEvent: false });
+          }
+        }
+      });
+    }
+  }
+}

npm/ng-packs/packages/cms-kit/admin/src/components/pages/page-list/page-list.component.html

@@ -0,0 +1,26 @@
+<abp-page [title]="'CmsKit::Pages' | abpLocalization" [toolbar]="data.items">
+  <div class="card mb-4">
+    <div class="card-body">
+      <div class="row">
+        <div class="col-12">
+          <div class="input-group">
+            <input
+              type="search"
+              class="form-control"
+              [placeholder]="'AbpUi::PagerSearch' | abpLocalization"
+              [(ngModel)]="filter"
+              (keyup.enter)="onSearch()"
+            />
+            <button class="btn btn-primary" type="button" (click)="onSearch()">
+              <i class="fa fa-search" aria-hidden="true"></i>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="card">
+    <abp-extensible-table [data]="data.items" [recordsTotal]="data.totalCount" [list]="list" />
+  </div>
+</abp-page>

npm/ng-packs/packages/cms-kit/admin/src/components/pages/page-list/page-list.component.ts

@@ -0,0 +1,56 @@
+import { Component, OnInit, inject } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ListService, PagedResultDto, LocalizationPipe } from '@abp/ng.core';
+import { ExtensibleTableComponent, EXTENSIONS_IDENTIFIER } from '@abp/ng.components/extensible';
+import { PageComponent } from '@abp/ng.components/page';
+import { PageAdminService, GetPagesInputDto, PageDto } from '@abp/ng.cms-kit/proxy';
+import { eCmsKitAdminComponents } from '../../../enums';
+
+@Component({
+  selector: 'abp-page-list',
+  templateUrl: './page-list.component.html',
+  providers: [
+    ListService,
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: eCmsKitAdminComponents.PageList,
+    },
+  ],
+  imports: [ExtensibleTableComponent, PageComponent, LocalizationPipe, FormsModule, CommonModule],
+})
+export class PageListComponent implements OnInit {
+  data: PagedResultDto<PageDto> = { items: [], totalCount: 0 };
+
+  public readonly list = inject(ListService<GetPagesInputDto>);
+  private pageService = inject(PageAdminService);
+
+  filter = '';
+
+  ngOnInit() {
+    this.hookToQuery();
+  }
+
+  onSearch() {
+    this.list.filter = this.filter;
+    this.list.get();
+  }
+
+  private hookToQuery() {
+    this.list
+      .hookToQuery(query => {
+        let filters: Partial<GetPagesInputDto> = {};
+        if (this.list.filter) {
+          filters.filter = this.list.filter;
+        }
+        const input: GetPagesInputDto = {
+          ...query,
+          ...filters,
+        };
+        return this.pageService.getList(input);
+      })
+      .subscribe(res => {
+        this.data = res;
+      });
+  }
+}

npm/ng-packs/packages/cms-kit/admin/src/defaults/index.ts

@@ -1,2 +1,3 @@
 export * from './comments';
 export * from './tags';
+export * from './pages';

npm/ng-packs/packages/cms-kit/admin/src/defaults/pages/default-page-create-form-props.ts

@@ -0,0 +1,52 @@
+import { Validators } from '@angular/forms';
+import { of } from 'rxjs';
+import { CreatePageInputDto, UpdatePageInputDto } from '@abp/ng.cms-kit/proxy';
+import { FormProp, ePropType } from '@abp/ng.components/extensible';
+import { pageStatusOptions } from '@abp/ng.cms-kit/proxy';
+import { LAYOUT_CONSTANTS } from './layout-constants';
+
+export const DEFAULT_PAGE_CREATE_FORM_PROPS = FormProp.createMany<CreatePageInputDto>([
+  {
+    type: ePropType.String,
+    name: 'title',
+    displayName: 'CmsKit::Title',
+    id: 'title',
+    validators: () => [Validators.required],
+  },
+  {
+    type: ePropType.String,
+    name: 'slug',
+    displayName: 'CmsKit::Slug',
+    id: 'slug',
+    validators: () => [Validators.required],
+    tooltip: {
+      text: 'CmsKit::PageSlugInformation',
+      localizationParams: [''],
+    },
+  },
+  {
+    type: ePropType.Enum,
+    name: 'layoutName',
+    displayName: 'CmsKit::SelectLayout',
+    id: 'layoutName',
+    options: () =>
+      of(
+        Object.values(LAYOUT_CONSTANTS).map(layout => ({
+          key: layout,
+          value: layout.toUpperCase(),
+        })),
+      ),
+    validators: () => [Validators.required],
+  },
+  {
+    type: ePropType.Enum,
+    name: 'status',
+    displayName: 'CmsKit::Status',
+    id: 'status',
+    options: () => of(pageStatusOptions),
+    validators: () => [Validators.required],
+  },
+]);
+
+export const DEFAULT_PAGE_EDIT_FORM_PROPS: FormProp<UpdatePageInputDto>[] =
+  DEFAULT_PAGE_CREATE_FORM_PROPS;

npm/ng-packs/packages/cms-kit/admin/src/defaults/pages/default-page-entity-actions.ts

@@ -0,0 +1,56 @@
+import { Router } from '@angular/router';
+import { ListService } from '@abp/ng.core';
+import { EntityAction } from '@abp/ng.components/extensible';
+import { ConfirmationService, Confirmation, ToasterService } from '@abp/ng.theme.shared';
+import { PageAdminService, PageDto } from '@abp/ng.cms-kit/proxy';
+
+export const DEFAULT_PAGE_ENTITY_ACTIONS = EntityAction.createMany<PageDto>([
+  {
+    text: 'AbpUi::Edit',
+    action: data => {
+      const router = data.getInjected(Router);
+      router.navigate(['/cms/pages/update', data.record.id]);
+    },
+    permission: 'CmsKit.Pages.Update',
+  },
+  {
+    text: 'AbpUi::Delete',
+    action: data => {
+      const pageService = data.getInjected(PageAdminService);
+      const confirmationService = data.getInjected(ConfirmationService);
+      const list = data.getInjected(ListService);
+
+      confirmationService
+        .warn('CmsKit::PageDeletionConfirmationMessage', 'AbpUi::AreYouSure', {
+          yesText: 'AbpUi::Yes',
+          cancelText: 'AbpUi::Cancel',
+        })
+        .subscribe((status: Confirmation.Status) => {
+          if (status === Confirmation.Status.confirm) {
+            pageService.delete(data.record.id!).subscribe(() => {
+              list.get();
+            });
+          }
+        });
+    },
+    permission: 'CmsKit.Pages.Delete',
+  },
+  {
+    text: 'CmsKit::SetAsHomePage',
+    action: data => {
+      const pageService = data.getInjected(PageAdminService);
+      const list = data.getInjected(ListService);
+      const toasterService = data.getInjected(ToasterService);
+
+      pageService.setAsHomePage(data.record.id!).subscribe(() => {
+        list.get();
+        if (data.record.isHomePage) {
+          toasterService.warn('CmsKit::RemovedSettingAsHomePage');
+        } else {
+          toasterService.success('CmsKit::CompletedSettingAsHomePage');
+        }
+      });
+    },
+    permission: 'CmsKit.Pages.SetAsHomePage',
+  },
+]);

npm/ng-packs/packages/cms-kit/admin/src/defaults/pages/default-page-entity-props.ts

@@ -0,0 +1,62 @@
+import { of } from 'rxjs';
+import { PageDto, PageStatus } from '@abp/ng.cms-kit/proxy';
+import { EntityProp, ePropType } from '@abp/ng.components/extensible';
+import { LocalizationService } from '@abp/ng.core';
+
+export const DEFAULT_PAGE_ENTITY_PROPS = EntityProp.createMany<PageDto>([
+  {
+    type: ePropType.String,
+    name: 'title',
+    displayName: 'CmsKit::Title',
+    sortable: true,
+    columnWidth: 200,
+  },
+  {
+    type: ePropType.String,
+    name: 'slug',
+    displayName: 'CmsKit::Slug',
+    sortable: true,
+    columnWidth: 200,
+  },
+  {
+    type: ePropType.String,
+    name: 'status',
+    displayName: 'CmsKit::Status',
+    sortable: true,
+    columnWidth: 120,
+    valueResolver: data => {
+      const localization = data.getInjected(LocalizationService);
+      let result = '';
+      switch (data.record.status) {
+        case PageStatus.Draft:
+          result = localization.instant('CmsKit::Enum:PageStatus:0');
+          break;
+        case PageStatus.Publish:
+          result = localization.instant('CmsKit::Enum:PageStatus:1');
+          break;
+      }
+      return of(result);
+    },
+  },
+  {
+    type: ePropType.Boolean,
+    name: 'isHomePage',
+    displayName: 'CmsKit::IsHomePage',
+    sortable: true,
+    columnWidth: 120,
+  },
+  {
+    type: ePropType.Date,
+    name: 'creationTime',
+    displayName: 'AbpIdentity::CreationTime',
+    sortable: true,
+    columnWidth: 200,
+  },
+  {
+    type: ePropType.Date,
+    name: 'lastModificationTime',
+    displayName: 'AbpIdentity::LastModificationTime',
+    sortable: true,
+    columnWidth: 200,
+  },
+]);

npm/ng-packs/packages/cms-kit/admin/src/defaults/pages/default-page-toolbar-actions.ts

@@ -0,0 +1,15 @@
+import { Router } from '@angular/router';
+import { PageDto } from '@abp/ng.cms-kit/proxy';
+import { ToolbarAction } from '@abp/ng.components/extensible';
+
+export const DEFAULT_PAGE_TOOLBAR_ACTIONS = ToolbarAction.createMany<PageDto[]>([
+  {
+    text: 'CmsKit::NewPage',
+    action: data => {
+      const router = data.getInjected(Router);
+      router.navigate(['/cms/pages/create']);
+    },
+    permission: 'CmsKit.Pages.Create',
+    icon: 'fa fa-plus',
+  },
+]);

npm/ng-packs/packages/cms-kit/admin/src/defaults/pages/index.ts

@@ -0,0 +1,5 @@
+export * from './default-page-entity-actions';
+export * from './default-page-entity-props';
+export * from './default-page-toolbar-actions';
+export * from './default-page-create-form-props';
+export * from './layout-constants';

npm/ng-packs/packages/cms-kit/admin/src/defaults/pages/layout-constants.ts

@@ -0,0 +1,8 @@
+import { eLayoutType } from '@abp/ng.core';
+
+export const LAYOUT_CONSTANTS = {
+  Account: eLayoutType.account,
+  Public: 'public',
+  Empty: eLayoutType.empty,
+  Application: eLayoutType.application,
+} as const;

npm/ng-packs/packages/cms-kit/admin/src/models/config-options.ts

@@ -3,14 +3,17 @@ import {
   EntityActionContributorCallback,
   EntityPropContributorCallback,
   ToolbarActionContributorCallback,
+  CreateFormPropContributorCallback,
+  EditFormPropContributorCallback,
 } from '@abp/ng.components/extensible';
-import { CommentWithAuthorDto, TagDto } from '@abp/ng.cms-kit/proxy';
+import { CommentWithAuthorDto, TagDto, PageDto } from '@abp/ng.cms-kit/proxy';
 
 export type CmsKitAdminEntityActionContributors = Partial<{
   [eCmsKitAdminComponents.CommentList]: EntityActionContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentApprove]: EntityActionContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentDetails]: EntityActionContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.TagList]: EntityActionContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.PageList]: EntityActionContributorCallback<PageDto>[];
 }>;
 
 export type CmsKitAdminEntityPropContributors = Partial<{
@@ -18,15 +21,25 @@ export type CmsKitAdminEntityPropContributors = Partial<{
   [eCmsKitAdminComponents.CommentApprove]: EntityPropContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentDetails]: EntityPropContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.TagList]: EntityPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.PageList]: EntityPropContributorCallback<PageDto>[];
 }>;
 
 export type CmsKitAdminToolbarActionContributors = Partial<{
   [eCmsKitAdminComponents.TagList]: ToolbarActionContributorCallback<TagDto[]>[];
+  [eCmsKitAdminComponents.PageList]: ToolbarActionContributorCallback<PageDto[]>[];
 }>;
 
-export type CmsKitAdminCreateFormPropContributors = Partial<{}>;
+export type CmsKitAdminCreateFormPropContributors = Partial<{
+  [eCmsKitAdminComponents.TagList]: CreateFormPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.PageList]: CreateFormPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.PageCreate]: CreateFormPropContributorCallback<PageDto>[];
+}>;
 
-export type CmsKitAdminEditFormPropContributors = Partial<{}>;
+export type CmsKitAdminEditFormPropContributors = Partial<{
+  [eCmsKitAdminComponents.TagList]: EditFormPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.PageList]: EditFormPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.PageEdit]: EditFormPropContributorCallback<PageDto>[];
+}>;
 
 export interface CmsKitAdminConfigOptions {
   entityActionContributors?: CmsKitAdminEntityActionContributors;

npm/ng-packs/packages/cms-kit/admin/src/resolvers/extensions.resolver.ts

@@ -40,6 +40,9 @@ export const cmsKitAdminExtensionsResolver: ResolveFn<any> = () => {
       [eCmsKitAdminComponents.CommentApprove]: entities.Comment,
       [eCmsKitAdminComponents.CommentDetails]: entities.Comment,
       [eCmsKitAdminComponents.TagList]: entities.Tag,
+      [eCmsKitAdminComponents.PageList]: entities.Page,
+      [eCmsKitAdminComponents.PageCreate]: entities.Page,
+      [eCmsKitAdminComponents.PageEdit]: entities.Page,
     })),
     mapEntitiesToContributors(injector, 'CmsKit'),
     tap(objectExtensionContributors => {

npm/ng-packs/packages/cms-kit/admin/src/services/index.ts

@@ -1,7 +1,7 @@
 // Services will be exported here
 // export * from './comments';
 // export * from './tags';
-// export * from './pages';
+export * from './page-form.service';
 // export * from './blogs';
 // export * from './blog-posts';
 // export * from './menus';

npm/ng-packs/packages/cms-kit/admin/src/services/page-form.service.ts

@@ -0,0 +1,119 @@
+import { Injectable, inject } from '@angular/core';
+import { Router } from '@angular/router';
+import { FormGroup } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { tap } from 'rxjs/operators';
+import { ToasterService } from '@abp/ng.theme.shared';
+import {
+  PageAdminService,
+  CreatePageInputDto,
+  UpdatePageInputDto,
+  PageDto,
+  PageStatus,
+} from '@abp/ng.cms-kit/proxy';
+
+@Injectable({
+  providedIn: 'root',
+})
+export class PageFormService {
+  private pageService = inject(PageAdminService);
+  private toasterService = inject(ToasterService);
+  private router = inject(Router);
+
+  create(form: FormGroup): Observable<PageDto> {
+    if (!form.valid) {
+      throw new Error('Form is invalid');
+    }
+
+    return this.pageService.create(form.value as CreatePageInputDto).pipe(
+      tap(() => {
+        this.toasterService.success('AbpUi::SavedSuccessfully');
+        this.router.navigate(['/cms/pages']);
+      }),
+    );
+  }
+
+  createAsDraft(form: FormGroup): Observable<PageDto> {
+    if (!form.valid) {
+      throw new Error('Form is invalid');
+    }
+
+    const formValue = { ...form.value, status: PageStatus.Draft } as CreatePageInputDto;
+    return this.pageService.create(formValue).pipe(
+      tap(() => {
+        this.toasterService.success('AbpUi::SavedSuccessfully');
+        this.router.navigate(['/cms/pages']);
+      }),
+    );
+  }
+
+  publish(form: FormGroup): Observable<PageDto> {
+    if (!form.valid) {
+      throw new Error('Form is invalid');
+    }
+
+    const formValue = { ...form.value, status: PageStatus.Publish } as CreatePageInputDto;
+    return this.pageService.create(formValue).pipe(
+      tap(() => {
+        this.toasterService.success('AbpUi::SavedSuccessfully');
+        this.router.navigate(['/cms/pages']);
+      }),
+    );
+  }
+
+  update(pageId: string, form: FormGroup, page: PageDto): Observable<PageDto> {
+    if (!form.valid || !page) {
+      throw new Error('Form is invalid or page is missing');
+    }
+
+    const formValue = {
+      ...page,
+      ...form.value,
+    } as UpdatePageInputDto;
+
+    return this.pageService.update(pageId, formValue).pipe(
+      tap(() => {
+        this.toasterService.success('AbpUi::SavedSuccessfully');
+        this.router.navigate(['/cms/pages']);
+      }),
+    );
+  }
+
+  updateAsDraft(pageId: string, form: FormGroup, page: PageDto): Observable<PageDto> {
+    if (!form.valid || !page) {
+      throw new Error('Form is invalid or page is missing');
+    }
+
+    const formValue = {
+      ...page,
+      ...form.value,
+      status: PageStatus.Draft,
+    } as UpdatePageInputDto;
+
+    return this.pageService.update(pageId, formValue).pipe(
+      tap(() => {
+        this.toasterService.success('AbpUi::SavedSuccessfully');
+        this.router.navigate(['/cms/pages']);
+      }),
+    );
+  }
+
+  updateAndPublish(pageId: string, form: FormGroup, page: PageDto): Observable<PageDto> {
+    if (!form.valid || !page) {
+      throw new Error('Form is invalid or page is missing');
+    }
+
+    const formValue = {
+      ...page,
+      ...form.value,
+      status: PageStatus.Publish,
+    } as UpdatePageInputDto;
+
+    return this.pageService.update(pageId, formValue).pipe(
+      tap(() => {
+        this.toasterService.success('AbpUi::SavedSuccessfully');
+        this.router.navigate(['/cms/pages']);
+      }),
+    );
+  }
+}

npm/ng-packs/packages/cms-kit/admin/src/tokens/extensions.token.ts

@@ -1,4 +1,4 @@
-import { CommentWithAuthorDto, TagDto } from '@abp/ng.cms-kit/proxy';
+import { CommentWithAuthorDto, TagDto, PageDto } from '@abp/ng.cms-kit/proxy';
 import {
   EntityActionContributorCallback,
   EntityPropContributorCallback,
@@ -16,6 +16,13 @@ import {
   DEFAULT_TAG_CREATE_FORM_PROPS,
   DEFAULT_TAG_EDIT_FORM_PROPS,
 } from '../defaults/tags';
+import {
+  DEFAULT_PAGE_ENTITY_ACTIONS,
+  DEFAULT_PAGE_ENTITY_PROPS,
+  DEFAULT_PAGE_TOOLBAR_ACTIONS,
+  DEFAULT_PAGE_CREATE_FORM_PROPS,
+  DEFAULT_PAGE_EDIT_FORM_PROPS,
+} from '../defaults/pages';
 import { eCmsKitAdminComponents } from '../enums';
 
 export const DEFAULT_CMS_KIT_ADMIN_ENTITY_ACTIONS = {
@@ -23,6 +30,7 @@ export const DEFAULT_CMS_KIT_ADMIN_ENTITY_ACTIONS = {
   [eCmsKitAdminComponents.CommentApprove]: DEFAULT_COMMENT_ENTITY_ACTIONS,
   [eCmsKitAdminComponents.CommentDetails]: DEFAULT_COMMENT_ENTITY_ACTIONS,
   [eCmsKitAdminComponents.TagList]: DEFAULT_TAG_ENTITY_ACTIONS,
+  [eCmsKitAdminComponents.PageList]: DEFAULT_PAGE_ENTITY_ACTIONS,
 };
 
 export const DEFAULT_CMS_KIT_ADMIN_ENTITY_PROPS = {
@@ -30,18 +38,24 @@ export const DEFAULT_CMS_KIT_ADMIN_ENTITY_PROPS = {
   [eCmsKitAdminComponents.CommentApprove]: DEFAULT_COMMENT_ENTITY_PROPS,
   [eCmsKitAdminComponents.CommentDetails]: DEFAULT_COMMENT_ENTITY_PROPS,
   [eCmsKitAdminComponents.TagList]: DEFAULT_TAG_ENTITY_PROPS,
+  [eCmsKitAdminComponents.PageList]: DEFAULT_PAGE_ENTITY_PROPS,
 };
 
 export const DEFAULT_CMS_KIT_ADMIN_TOOLBAR_ACTIONS = {
   [eCmsKitAdminComponents.TagList]: DEFAULT_TAG_TOOLBAR_ACTIONS,
+  [eCmsKitAdminComponents.PageList]: DEFAULT_PAGE_TOOLBAR_ACTIONS,
 };
 
 export const DEFAULT_CMS_KIT_ADMIN_CREATE_FORM_PROPS = {
   [eCmsKitAdminComponents.TagList]: DEFAULT_TAG_CREATE_FORM_PROPS,
+  [eCmsKitAdminComponents.PageList]: DEFAULT_PAGE_CREATE_FORM_PROPS,
+  [eCmsKitAdminComponents.PageCreate]: DEFAULT_PAGE_CREATE_FORM_PROPS,
 };
 
 export const DEFAULT_CMS_KIT_ADMIN_EDIT_FORM_PROPS = {
   [eCmsKitAdminComponents.TagList]: DEFAULT_TAG_EDIT_FORM_PROPS,
+  [eCmsKitAdminComponents.PageList]: DEFAULT_PAGE_EDIT_FORM_PROPS,
+  [eCmsKitAdminComponents.PageEdit]: DEFAULT_PAGE_EDIT_FORM_PROPS,
 };
 
 export const CMS_KIT_ADMIN_ENTITY_ACTION_CONTRIBUTORS =
@@ -66,6 +80,7 @@ type EntityActionContributors = Partial<{
   [eCmsKitAdminComponents.CommentApprove]: EntityActionContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentDetails]: EntityActionContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.TagList]: EntityActionContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.PageList]: EntityActionContributorCallback<PageDto>[];
 }>;
 
 type EntityPropContributors = Partial<{
@@ -73,16 +88,20 @@ type EntityPropContributors = Partial<{
   [eCmsKitAdminComponents.CommentApprove]: EntityPropContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentDetails]: EntityPropContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.TagList]: EntityPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.PageList]: EntityPropContributorCallback<PageDto>[];
 }>;
 
 type ToolbarActionContributors = Partial<{
   [eCmsKitAdminComponents.TagList]: ToolbarActionContributorCallback<TagDto[]>[];
+  [eCmsKitAdminComponents.PageList]: ToolbarActionContributorCallback<PageDto[]>[];
 }>;
 
 type CreateFormPropContributors = Partial<{
   [eCmsKitAdminComponents.TagList]: CreateFormPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.PageList]: CreateFormPropContributorCallback<PageDto>[];
 }>;
 
 type EditFormPropContributors = Partial<{
   [eCmsKitAdminComponents.TagList]: EditFormPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.PageList]: EditFormPropContributorCallback<PageDto>[];
 }>;