add: blogs structure for the admin side

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

@@ -14,6 +14,7 @@ import {
   TagListComponent,
   PageListComponent,
   PageFormComponent,
+  BlogListComponent,
 } from './components';
 import {
   CMS_KIT_ADMIN_ENTITY_ACTION_CONTRIBUTORS,
@@ -87,7 +88,7 @@ export function createRoutes(config: CmsKitAdminConfigOptions = {}): Routes {
           data: {
             requiredPolicy: 'CmsKit.Tags',
             replaceableComponent: {
-              key: eCmsKitAdminComponents.TagList,
+              key: eCmsKitAdminComponents.Tags,
               defaultComponent: TagListComponent,
             },
           },
@@ -102,7 +103,7 @@ export function createRoutes(config: CmsKitAdminConfigOptions = {}): Routes {
           data: {
             requiredPolicy: 'CmsKit.Pages',
             replaceableComponent: {
-              key: eCmsKitAdminComponents.PageList,
+              key: eCmsKitAdminComponents.Pages,
               defaultComponent: PageListComponent,
             },
           },
@@ -117,7 +118,7 @@ export function createRoutes(config: CmsKitAdminConfigOptions = {}): Routes {
           data: {
             requiredPolicy: 'CmsKit.Pages.Create',
             replaceableComponent: {
-              key: eCmsKitAdminComponents.PageCreate,
+              key: eCmsKitAdminComponents.PageForm,
               defaultComponent: PageFormComponent,
             },
           },
@@ -132,12 +133,27 @@ export function createRoutes(config: CmsKitAdminConfigOptions = {}): Routes {
           data: {
             requiredPolicy: 'CmsKit.Pages.Update',
             replaceableComponent: {
-              key: eCmsKitAdminComponents.PageEdit,
+              key: eCmsKitAdminComponents.PageForm,
               defaultComponent: PageFormComponent,
             },
           },
           title: 'CmsKit::Pages',
         },
+        {
+          path: 'blogs',
+          component: ReplaceableRouteContainerComponent,
+          resolve: {
+            extensions: cmsKitAdminExtensionsResolver,
+          },
+          data: {
+            requiredPolicy: 'CmsKit.Blogs',
+            replaceableComponent: {
+              key: eCmsKitAdminComponents.Blogs,
+              defaultComponent: BlogListComponent,
+            },
+          },
+          title: 'CmsKit::Blogs',
+        },
       ],
     },
   ];

npm/ng-packs/packages/cms-kit/admin/src/components/blogs/blog-features-modal/blog-features-modal.component.html

@@ -0,0 +1,64 @@
+<abp-modal [visible]="true" (visibleChange)="onVisibleChange($event)">
+  <ng-template #abpHeader>
+    <h3>{{ 'CmsKit::Features' | abpLocalization }}</h3>
+  </ng-template>
+
+  <ng-template #abpBody>
+    @if (form) {
+      <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
+        <div formArrayName="features">
+          @for (featureControl of featuresFormArray.controls; track $index; let i = $index) {
+            <div class="mb-3" [formGroupName]="i">
+              @if (featureControl.get('isAvailable')?.value) {
+                <div class="form-check">
+                  <input
+                    type="checkbox"
+                    class="form-check-input"
+                    id="feature-{{ i }}"
+                    formControlName="isEnabled"
+                  />
+                  <label class="form-check-label" for="feature-{{ i }}">
+                    {{ 'CmsKit::' + features[i]?.featureName | abpLocalization }}
+                  </label>
+                </div>
+              } @else {
+                <div
+                  data-toggle="tooltip"
+                  [title]="'CmsKit::BlogFeatureNotAvailable' | abpLocalization"
+                >
+                  <div class="form-check">
+                    <input
+                      type="checkbox"
+                      class="form-check-input"
+                      id="feature-{{ i }}"
+                      formControlName="isEnabled"
+                      disabled
+                    />
+                    <label class="form-check-label" for="feature-{{ i }}">
+                      {{ 'CmsKit::' + features[i]?.featureName | abpLocalization }}
+                    </label>
+                  </div>
+                </div>
+              }
+              <input type="hidden" formControlName="featureName" />
+              <input type="hidden" formControlName="isAvailable" />
+            </div>
+          }
+        </div>
+      </form>
+    } @else {
+      <div class="text-center">
+        <i class="fa fa-pulse fa-spinner" aria-hidden="true"></i>
+      </div>
+    }
+  </ng-template>
+
+  <ng-template #abpFooter>
+    <button type="button" class="btn btn-outline-primary" abpClose>
+      {{ 'AbpUi::Cancel' | abpLocalization }}
+    </button>
+    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">
+      {{ 'AbpUi::Save' | abpLocalization }}
+    </abp-button>
+  </ng-template>
+</abp-modal>

npm/ng-packs/packages/cms-kit/admin/src/components/blogs/blog-features-modal/blog-features-modal.component.ts

@@ -0,0 +1,134 @@
+import { Component, OnInit, inject, input, output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormArray, FormBuilder, FormGroup } from '@angular/forms';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { LocalizationPipe } from '@abp/ng.core';
+import { forkJoin } from 'rxjs';
+import {
+  ModalComponent,
+  ModalCloseDirective,
+  ButtonComponent,
+  ToasterService,
+} from '@abp/ng.theme.shared';
+import {
+  BlogFeatureAdminService,
+  BlogFeatureDto,
+  BlogFeatureInputDto,
+} from '@abp/ng.cms-kit/proxy';
+
+export interface BlogFeaturesModalVisibleChange {
+  visible: boolean;
+  refresh: boolean;
+}
+
+@Component({
+  selector: 'abp-blog-features-modal',
+  templateUrl: './blog-features-modal.component.html',
+  imports: [
+    LocalizationPipe,
+    ReactiveFormsModule,
+    CommonModule,
+    NgxValidateCoreModule,
+    ModalComponent,
+    ModalCloseDirective,
+    ButtonComponent,
+  ],
+})
+export class BlogFeaturesModalComponent implements OnInit {
+  private blogFeatureService = inject(BlogFeatureAdminService);
+  private fb = inject(FormBuilder);
+  private toasterService = inject(ToasterService);
+
+  blogId = input<string>();
+  visibleChange = output<BlogFeaturesModalVisibleChange>();
+
+  form: FormGroup;
+  features: BlogFeatureDto[] = [];
+  private initialFeatureStates: Map<string, boolean> = new Map();
+
+  ngOnInit() {
+    if (this.blogId()) {
+      this.loadFeatures();
+    }
+  }
+
+  private loadFeatures() {
+    this.blogFeatureService.getList(this.blogId()!).subscribe(features => {
+      this.features = features.sort((a, b) =>
+        (a.featureName || '').localeCompare(b.featureName || ''),
+      );
+      // Store initial states
+      this.initialFeatureStates = new Map(
+        this.features.map(f => [f.featureName || '', f.isEnabled || false]),
+      );
+      this.buildForm();
+    });
+  }
+
+  private buildForm() {
+    const featureControls = this.features.map(feature =>
+      this.fb.group({
+        featureName: [feature.featureName],
+        isEnabled: [feature.isEnabled],
+        isAvailable: [(feature as any).isAvailable ?? true],
+      }),
+    );
+
+    this.form = this.fb.group({
+      features: this.fb.array(featureControls),
+    });
+  }
+
+  get featuresFormArray(): FormArray {
+    return this.form.get('features') as FormArray;
+  }
+
+  onVisibleChange(visible: boolean, refresh = false) {
+    this.visibleChange.emit({ visible, refresh });
+  }
+
+  save() {
+    if (!this.form.valid || !this.blogId()) {
+      return;
+    }
+
+    const featuresArray = this.form.get('features') as FormArray;
+
+    // Only save features that have changed
+    const changedFeatures: BlogFeatureInputDto[] = featuresArray.controls
+      .map(control => {
+        const featureName = control.get('featureName')?.value;
+        const isEnabled = control.get('isEnabled')?.value;
+        const initialIsEnabled = this.initialFeatureStates.get(featureName);
+
+        // Only include if the value has changed
+        if (featureName && initialIsEnabled !== isEnabled) {
+          return {
+            featureName,
+            isEnabled,
+          };
+        }
+        return null;
+      })
+      .filter((input): input is BlogFeatureInputDto => input !== null);
+
+    // If no features changed, just close the modal
+    if (changedFeatures.length === 0) {
+      this.onVisibleChange(false, false);
+      return;
+    }
+
+    // Save only changed features
+    const saveObservables = changedFeatures.map(input =>
+      this.blogFeatureService.set(this.blogId()!, input),
+    );
+
+    // Use forkJoin to save all changed features at once
+    forkJoin(saveObservables).subscribe({
+      next: () => {
+        this.onVisibleChange(false, true);
+        this.toasterService.success('AbpUi::SavedSuccessfully');
+      },
+    });
+  }
+}

npm/ng-packs/packages/cms-kit/admin/src/components/blogs/blog-list/blog-list.component.html

@@ -0,0 +1,16 @@
+<abp-page [title]="'CmsKit::Blogs' | abpLocalization" [toolbar]="data.items">
+  <div class="card">
+    <abp-extensible-table [data]="data.items" [recordsTotal]="data.totalCount" [list]="list" />
+  </div>
+
+  @if (isModalVisible) {
+    <abp-blog-modal [selected]="selected" (visibleChange)="onVisibleModalChange($event)" />
+  }
+
+  @if (isFeaturesModalVisible) {
+    <abp-blog-features-modal
+      [blogId]="selectedBlogId"
+      (visibleChange)="onFeaturesModalChange($event)"
+    />
+  }
+</abp-page>

npm/ng-packs/packages/cms-kit/admin/src/components/blogs/blog-list/blog-list.component.ts

@@ -0,0 +1,112 @@
+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 { BlogAdminService, BlogGetListInput, BlogDto } from '@abp/ng.cms-kit/proxy';
+import { eCmsKitAdminComponents } from '../../../enums';
+import { BlogModalComponent, BlogModalVisibleChange } from '../blog-modal/blog-modal.component';
+import {
+  BlogFeaturesModalComponent,
+  BlogFeaturesModalVisibleChange,
+} from '../blog-features-modal/blog-features-modal.component';
+
+@Component({
+  selector: 'abp-blog-list',
+  templateUrl: './blog-list.component.html',
+  providers: [
+    ListService,
+    {
+      provide: EXTENSIONS_IDENTIFIER,
+      useValue: eCmsKitAdminComponents.Blogs,
+    },
+  ],
+  imports: [
+    ExtensibleTableComponent,
+    PageComponent,
+    LocalizationPipe,
+    FormsModule,
+    CommonModule,
+    BlogModalComponent,
+    BlogFeaturesModalComponent,
+  ],
+})
+export class BlogListComponent implements OnInit {
+  data: PagedResultDto<BlogDto> = { items: [], totalCount: 0 };
+
+  public readonly list = inject(ListService<BlogGetListInput>);
+  private blogService = inject(BlogAdminService);
+
+  filter = '';
+  isModalVisible = false;
+  selected?: BlogDto;
+  isFeaturesModalVisible = false;
+  selectedBlogId?: string;
+
+  ngOnInit() {
+    this.hookToQuery();
+  }
+
+  onSearch() {
+    this.list.filter = this.filter;
+    this.list.get();
+  }
+
+  add() {
+    this.selected = {} as BlogDto;
+    this.isModalVisible = true;
+  }
+
+  edit(id: string) {
+    this.blogService.get(id).subscribe(blog => {
+      this.selected = blog;
+      this.isModalVisible = true;
+    });
+  }
+
+  openFeatures(id: string) {
+    this.selectedBlogId = id;
+    this.isFeaturesModalVisible = true;
+  }
+
+  private hookToQuery() {
+    this.list
+      .hookToQuery(query => {
+        let filters: Partial<BlogGetListInput> = {};
+        if (this.list.filter) {
+          filters.filter = this.list.filter;
+        }
+        const input: BlogGetListInput = {
+          ...query,
+          ...filters,
+        };
+        return this.blogService.getList(input);
+      })
+      .subscribe(res => {
+        this.data = res;
+      });
+  }
+
+  onVisibleModalChange(visibilityChange: BlogModalVisibleChange) {
+    if (visibilityChange.visible) {
+      return;
+    }
+    if (visibilityChange.refresh) {
+      this.list.get();
+    }
+    this.selected = null;
+    this.isModalVisible = false;
+  }
+
+  onFeaturesModalChange(visibilityChange: BlogFeaturesModalVisibleChange) {
+    if (visibilityChange.visible) {
+      return;
+    }
+    if (visibilityChange.refresh) {
+      this.list.get();
+    }
+    this.selectedBlogId = null;
+    this.isFeaturesModalVisible = false;
+  }
+}

npm/ng-packs/packages/cms-kit/admin/src/components/blogs/blog-modal/blog-modal.component.html

@@ -0,0 +1,28 @@
+<abp-modal [visible]="true" (visibleChange)="onVisibleChange($event)">
+  <ng-template #abpHeader>
+    <h3>
+      {{ (selected()?.id ? 'AbpUi::Edit' : 'AbpUi::New') | abpLocalization }}
+    </h3>
+  </ng-template>
+
+  <ng-template #abpBody>
+    @if (form) {
+      <form [formGroup]="form" (ngSubmit)="save()" validateOnSubmit>
+        <abp-extensible-form [selectedRecord]="selected()" />
+      </form>
+    } @else {
+      <div class="text-center">
+        <i class="fa fa-pulse fa-spinner" aria-hidden="true"></i>
+      </div>
+    }
+  </ng-template>
+
+  <ng-template #abpFooter>
+    <button type="button" class="btn btn-outline-primary" abpClose>
+      {{ 'AbpUi::Cancel' | abpLocalization }}
+    </button>
+    <abp-button iconClass="fa fa-check" [disabled]="form?.invalid" (click)="save()">
+      {{ 'AbpUi::Save' | abpLocalization }}
+    </abp-button>
+  </ng-template>
+</abp-modal>

npm/ng-packs/packages/cms-kit/admin/src/components/blogs/blog-modal/blog-modal.component.ts

@@ -0,0 +1,86 @@
+import { Component, OnInit, inject, Injector, input, output, DestroyRef } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormGroup } from '@angular/forms';
+import { NgxValidateCoreModule } from '@ngx-validate/core';
+import { LocalizationPipe } from '@abp/ng.core';
+import {
+  ExtensibleFormComponent,
+  FormPropData,
+  generateFormFromProps,
+} from '@abp/ng.components/extensible';
+import {
+  ModalComponent,
+  ModalCloseDirective,
+  ButtonComponent,
+  ToasterService,
+} from '@abp/ng.theme.shared';
+import { BlogAdminService, BlogDto, CreateBlogDto, UpdateBlogDto } from '@abp/ng.cms-kit/proxy';
+import { prepareSlugFromControl } from '@abp/ng.cms-kit';
+
+export interface BlogModalVisibleChange {
+  visible: boolean;
+  refresh: boolean;
+}
+
+@Component({
+  selector: 'abp-blog-modal',
+  templateUrl: './blog-modal.component.html',
+  imports: [
+    ExtensibleFormComponent,
+    LocalizationPipe,
+    ReactiveFormsModule,
+    CommonModule,
+    NgxValidateCoreModule,
+    ModalComponent,
+    ModalCloseDirective,
+    ButtonComponent,
+  ],
+})
+export class BlogModalComponent implements OnInit {
+  private blogService = inject(BlogAdminService);
+  private injector = inject(Injector);
+  private toasterService = inject(ToasterService);
+  private destroyRef = inject(DestroyRef);
+
+  selected = input<BlogDto>();
+  visibleChange = output<BlogModalVisibleChange>();
+
+  form: FormGroup;
+
+  ngOnInit() {
+    this.buildForm();
+  }
+
+  private buildForm() {
+    const data = new FormPropData(this.injector, this.selected());
+    this.form = generateFormFromProps(data);
+    prepareSlugFromControl(this.form, 'name', 'slug', this.destroyRef);
+  }
+
+  onVisibleChange(visible: boolean, refresh = false) {
+    this.visibleChange.emit({ visible, refresh });
+  }
+
+  save() {
+    if (!this.form.valid) {
+      return;
+    }
+
+    let observable$ = this.blogService.create(this.form.value as CreateBlogDto);
+
+    const selectedBlog = this.selected();
+    const { id } = selectedBlog || {};
+
+    if (id) {
+      observable$ = this.blogService.update(id, {
+        ...selectedBlog,
+        ...this.form.value,
+      } as UpdateBlogDto);
+    }
+
+    observable$.subscribe(() => {
+      this.onVisibleChange(false, true);
+      this.toasterService.success('AbpUi::SavedSuccessfully');
+    });
+  }
+}

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

@@ -0,0 +1,3 @@
+export * from './blog-list/blog-list.component';
+export * from './blog-modal/blog-modal.component';
+export * from './blog-features-modal/blog-features-modal.component';

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

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

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

@@ -1,5 +1,4 @@
 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';
@@ -14,7 +13,11 @@ import {
 } 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 {
+  ToastuiEditorComponent,
+  CodeMirrorEditorComponent,
+  prepareSlugFromControl,
+} from '@abp/ng.cms-kit';
 import { PageAdminService, PageDto } from '@abp/ng.cms-kit/proxy';
 import { eCmsKitAdminComponents } from '../../../enums';
 import { PageFormService } from '../../../services';
@@ -25,14 +28,7 @@ import { PageFormService } from '../../../services';
   providers: [
     {
       provide: EXTENSIONS_IDENTIFIER,
-      useFactory: (route: ActivatedRoute) => {
+      useValue: eCmsKitAdminComponents.PageForm,
-        const id = route.snapshot.params['id'];
-        if (id) {
-          return eCmsKitAdminComponents.PageEdit;
-        }
-        return eCmsKitAdminComponents.PageCreate;
-      },
-      deps: [ActivatedRoute],
     },
   ],
   imports: [
@@ -88,7 +84,7 @@ export class PageFormComponent implements OnInit {
       script: new FormControl(this.page?.script || ''),
       style: new FormControl(this.page?.style || ''),
     });
-    this.prepareSlug();
+    prepareSlugFromControl(this.form, 'title', 'slug', this.destroyRef);
   }
 
   private executeSaveOperation(operation: 'save' | 'draft' | 'publish') {
@@ -124,18 +120,6 @@ export class PageFormComponent implements OnInit {
     }
   }
 
-  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');
   }
@@ -147,20 +131,4 @@ export class PageFormComponent implements OnInit {
   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.ts

@@ -14,7 +14,7 @@ import { eCmsKitAdminComponents } from '../../../enums';
     ListService,
     {
       provide: EXTENSIONS_IDENTIFIER,
-      useValue: eCmsKitAdminComponents.PageList,
+      useValue: eCmsKitAdminComponents.Pages,
     },
   ],
   imports: [ExtensibleTableComponent, PageComponent, LocalizationPipe, FormsModule, CommonModule],

npm/ng-packs/packages/cms-kit/admin/src/components/tags/tag-list/tag-list.component.ts

@@ -15,7 +15,7 @@ import { TagModalComponent, TagModalVisibleChange } from '../tag-modal/tag-modal
     ListService,
     {
       provide: EXTENSIONS_IDENTIFIER,
-      useValue: eCmsKitAdminComponents.TagList,
+      useValue: eCmsKitAdminComponents.Tags,
     },
   ],
   imports: [

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

@@ -0,0 +1,22 @@
+import { CreateBlogDto } from '@abp/ng.cms-kit/proxy';
+import { FormProp, ePropType } from '@abp/ng.components/extensible';
+import { Validators } from '@angular/forms';
+
+export const DEFAULT_BLOG_CREATE_FORM_PROPS = FormProp.createMany<CreateBlogDto>([
+  {
+    type: ePropType.String,
+    name: 'name',
+    displayName: 'CmsKit::Name',
+    id: 'name',
+    validators: () => [Validators.required],
+  },
+  {
+    type: ePropType.String,
+    name: 'slug',
+    displayName: 'CmsKit::Slug',
+    id: 'slug',
+    validators: () => [Validators.required],
+  },
+]);
+
+export const DEFAULT_BLOG_EDIT_FORM_PROPS = DEFAULT_BLOG_CREATE_FORM_PROPS;

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

@@ -0,0 +1,48 @@
+import { BlogDto } from '@abp/ng.cms-kit/proxy';
+import { EntityAction } from '@abp/ng.components/extensible';
+import { BlogAdminService } from '@abp/ng.cms-kit/proxy';
+import { ConfirmationService, Confirmation } from '@abp/ng.theme.shared';
+import { ListService } from '@abp/ng.core';
+import { BlogListComponent } from '../../components/blogs/blog-list/blog-list.component';
+
+export const DEFAULT_BLOG_ENTITY_ACTIONS = EntityAction.createMany<BlogDto>([
+  {
+    text: 'CmsKit::Features',
+    action: data => {
+      const component = data.getInjected(BlogListComponent);
+      component.openFeatures(data.record.id!);
+    },
+    permission: 'CmsKit.Blogs.Features',
+  },
+  {
+    text: 'AbpUi::Edit',
+    action: data => {
+      const component = data.getInjected(BlogListComponent);
+      component.edit(data.record.id!);
+    },
+    permission: 'CmsKit.Blogs.Update',
+  },
+  {
+    text: 'AbpUi::Delete',
+    action: data => {
+      const blogService = data.getInjected(BlogAdminService);
+      const confirmationService = data.getInjected(ConfirmationService);
+      const list = data.getInjected(ListService);
+
+      confirmationService
+        .warn('CmsKit::BlogDeletionConfirmationMessage', 'AbpUi::AreYouSure', {
+          yesText: 'AbpUi::Yes',
+          cancelText: 'AbpUi::Cancel',
+          messageLocalizationParams: [data.record.name || ''],
+        })
+        .subscribe((status: Confirmation.Status) => {
+          if (status === Confirmation.Status.confirm) {
+            blogService.delete(data.record.id!).subscribe(() => {
+              list.get();
+            });
+          }
+        });
+    },
+    permission: 'CmsKit.Blogs.Delete',
+  },
+]);

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

@@ -0,0 +1,26 @@
+import { BlogDto } from '@abp/ng.cms-kit/proxy';
+import { EntityProp, ePropType } from '@abp/ng.components/extensible';
+
+export const DEFAULT_BLOG_ENTITY_PROPS = EntityProp.createMany<BlogDto>([
+  {
+    type: ePropType.String,
+    name: 'name',
+    displayName: 'CmsKit::Name',
+    sortable: true,
+    columnWidth: 250,
+  },
+  {
+    type: ePropType.String,
+    name: 'slug',
+    displayName: 'CmsKit::Slug',
+    sortable: true,
+    columnWidth: 250,
+  },
+  {
+    type: ePropType.Number,
+    name: 'blogPostCount',
+    displayName: 'CmsKit::BlogPostCount',
+    sortable: true,
+    columnWidth: 150,
+  },
+]);

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

@@ -0,0 +1,15 @@
+import { BlogDto } from '@abp/ng.cms-kit/proxy';
+import { ToolbarAction } from '@abp/ng.components/extensible';
+import { BlogListComponent } from '../../components/blogs/blog-list/blog-list.component';
+
+export const DEFAULT_BLOG_TOOLBAR_ACTIONS = ToolbarAction.createMany<BlogDto[]>([
+  {
+    text: 'CmsKit::NewBlog',
+    action: data => {
+      const component = data.getInjected(BlogListComponent);
+      component.add();
+    },
+    permission: 'CmsKit.Blogs.Create',
+    icon: 'fa fa-plus',
+  },
+]);

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

@@ -0,0 +1,4 @@
+export * from './default-blog-entity-actions';
+export * from './default-blog-entity-props';
+export * from './default-blog-toolbar-actions';
+export * from './default-blog-create-form-props';

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

@@ -21,7 +21,6 @@ export const DEFAULT_PAGE_CREATE_FORM_PROPS = FormProp.createMany<CreatePageInpu
     validators: () => [Validators.required],
     tooltip: {
       text: 'CmsKit::PageSlugInformation',
-      localizationParams: [''],
     },
   },
   {

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

@@ -3,26 +3,16 @@ export enum eCmsKitAdminComponents {
   CommentApprove = 'CmsKit.Admin.CommentApprove',
   CommentDetails = 'CmsKit.Admin.CommentDetails',
 
-  TagList = 'CmsKit.Admin.TagList',
+  Tags = 'CmsKit.Admin.Tags',
-  TagCreate = 'CmsKit.Admin.TagCreate',
-  TagEdit = 'CmsKit.Admin.TagEdit',
 
-  PageList = 'CmsKit.Admin.PageList',
+  Pages = 'CmsKit.Admin.Pages',
-  PageCreate = 'CmsKit.Admin.PageCreate',
+  PageForm = 'CmsKit.Admin.PageForm',
-  PageEdit = 'CmsKit.Admin.PageEdit',
 
-  BlogList = 'CmsKit.Admin.BlogList',
+  Blogs = 'CmsKit.Admin.Blogs',
-  BlogCreate = 'CmsKit.Admin.BlogCreate',
-  BlogEdit = 'CmsKit.Admin.BlogEdit',
-  BlogFeatures = 'CmsKit.Admin.BlogFeatures',
 
-  BlogPostList = 'CmsKit.Admin.BlogPostList',
+  BlogPosts = 'CmsKit.Admin.BlogPosts',
-  BlogPostCreate = 'CmsKit.Admin.BlogPostCreate',
-  BlogPostEdit = 'CmsKit.Admin.BlogPostEdit',
 
-  MenuItemList = 'CmsKit.Admin.MenuItemList',
+  Menus = 'CmsKit.Admin.Menus',
-  MenuItemCreate = 'CmsKit.Admin.MenuItemCreate',
-  MenuItemEdit = 'CmsKit.Admin.MenuItemEdit',
 
-  GlobalResourceList = 'CmsKit.Admin.GlobalResourceList',
+  GlobalResources = 'CmsKit.Admin.GlobalResources',
 }

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

@@ -6,39 +6,53 @@ import {
   CreateFormPropContributorCallback,
   EditFormPropContributorCallback,
 } from '@abp/ng.components/extensible';
-import { CommentWithAuthorDto, TagDto, PageDto } from '@abp/ng.cms-kit/proxy';
+import {
+  CommentWithAuthorDto,
+  TagDto,
+  PageDto,
+  BlogDto,
+  CreatePageInputDto,
+  UpdatePageInputDto,
+  CreateBlogDto,
+  UpdateBlogDto,
+  TagCreateDto,
+  TagUpdateDto,
+} 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.Tags]: EntityActionContributorCallback<TagDto>[];
-  [eCmsKitAdminComponents.PageList]: EntityActionContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.Pages]: EntityActionContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.Blogs]: EntityActionContributorCallback<BlogDto>[];
 }>;
 
 export type CmsKitAdminEntityPropContributors = Partial<{
   [eCmsKitAdminComponents.CommentList]: EntityPropContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentApprove]: EntityPropContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentDetails]: EntityPropContributorCallback<CommentWithAuthorDto>[];
-  [eCmsKitAdminComponents.TagList]: EntityPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.Tags]: EntityPropContributorCallback<TagDto>[];
-  [eCmsKitAdminComponents.PageList]: EntityPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.Pages]: EntityPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.Blogs]: EntityPropContributorCallback<BlogDto>[];
 }>;
 
 export type CmsKitAdminToolbarActionContributors = Partial<{
-  [eCmsKitAdminComponents.TagList]: ToolbarActionContributorCallback<TagDto[]>[];
+  [eCmsKitAdminComponents.Tags]: ToolbarActionContributorCallback<TagDto[]>[];
-  [eCmsKitAdminComponents.PageList]: ToolbarActionContributorCallback<PageDto[]>[];
+  [eCmsKitAdminComponents.Pages]: ToolbarActionContributorCallback<PageDto[]>[];
+  [eCmsKitAdminComponents.Blogs]: ToolbarActionContributorCallback<BlogDto[]>[];
 }>;
 
 export type CmsKitAdminCreateFormPropContributors = Partial<{
-  [eCmsKitAdminComponents.TagList]: CreateFormPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.Tags]: CreateFormPropContributorCallback<TagCreateDto>[];
-  [eCmsKitAdminComponents.PageList]: CreateFormPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.PageForm]: CreateFormPropContributorCallback<CreatePageInputDto>[];
-  [eCmsKitAdminComponents.PageCreate]: CreateFormPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.Blogs]: CreateFormPropContributorCallback<CreateBlogDto>[];
 }>;
 
 export type CmsKitAdminEditFormPropContributors = Partial<{
-  [eCmsKitAdminComponents.TagList]: EditFormPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.Tags]: EditFormPropContributorCallback<TagUpdateDto>[];
-  [eCmsKitAdminComponents.PageList]: EditFormPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.PageForm]: EditFormPropContributorCallback<UpdatePageInputDto>[];
-  [eCmsKitAdminComponents.PageEdit]: EditFormPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.Blogs]: EditFormPropContributorCallback<UpdateBlogDto>[];
 }>;
 
 export interface CmsKitAdminConfigOptions {

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

@@ -39,10 +39,10 @@ export const cmsKitAdminExtensionsResolver: ResolveFn<any> = () => {
       [eCmsKitAdminComponents.CommentList]: entities.Comment,
       [eCmsKitAdminComponents.CommentApprove]: entities.Comment,
       [eCmsKitAdminComponents.CommentDetails]: entities.Comment,
-      [eCmsKitAdminComponents.TagList]: entities.Tag,
+      [eCmsKitAdminComponents.Tags]: entities.Tag,
-      [eCmsKitAdminComponents.PageList]: entities.Page,
+      [eCmsKitAdminComponents.Pages]: entities.Page,
-      [eCmsKitAdminComponents.PageCreate]: entities.Page,
+      [eCmsKitAdminComponents.PageForm]: entities.Page,
-      [eCmsKitAdminComponents.PageEdit]: entities.Page,
+      [eCmsKitAdminComponents.Blogs]: entities.Blog,
     })),
     mapEntitiesToContributors(injector, 'CmsKit'),
     tap(objectExtensionContributors => {

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

@@ -1,4 +1,15 @@
-import { CommentWithAuthorDto, TagDto, PageDto } from '@abp/ng.cms-kit/proxy';
+import {
+  CommentWithAuthorDto,
+  TagDto,
+  PageDto,
+  BlogDto,
+  TagCreateDto,
+  TagUpdateDto,
+  CreateBlogDto,
+  CreatePageInputDto,
+  UpdateBlogDto,
+  UpdatePageInputDto,
+} from '@abp/ng.cms-kit/proxy';
 import {
   EntityActionContributorCallback,
   EntityPropContributorCallback,
@@ -23,39 +34,51 @@ import {
   DEFAULT_PAGE_CREATE_FORM_PROPS,
   DEFAULT_PAGE_EDIT_FORM_PROPS,
 } from '../defaults/pages';
+import {
+  DEFAULT_BLOG_ENTITY_ACTIONS,
+  DEFAULT_BLOG_ENTITY_PROPS,
+  DEFAULT_BLOG_TOOLBAR_ACTIONS,
+  DEFAULT_BLOG_CREATE_FORM_PROPS,
+  DEFAULT_BLOG_EDIT_FORM_PROPS,
+} from '../defaults/blogs';
 import { eCmsKitAdminComponents } from '../enums';
 
 export const DEFAULT_CMS_KIT_ADMIN_ENTITY_ACTIONS = {
   [eCmsKitAdminComponents.CommentList]: DEFAULT_COMMENT_ENTITY_ACTIONS,
   [eCmsKitAdminComponents.CommentApprove]: DEFAULT_COMMENT_ENTITY_ACTIONS,
   [eCmsKitAdminComponents.CommentDetails]: DEFAULT_COMMENT_ENTITY_ACTIONS,
-  [eCmsKitAdminComponents.TagList]: DEFAULT_TAG_ENTITY_ACTIONS,
+  [eCmsKitAdminComponents.Tags]: DEFAULT_TAG_ENTITY_ACTIONS,
-  [eCmsKitAdminComponents.PageList]: DEFAULT_PAGE_ENTITY_ACTIONS,
+  [eCmsKitAdminComponents.Pages]: DEFAULT_PAGE_ENTITY_ACTIONS,
+  [eCmsKitAdminComponents.Blogs]: DEFAULT_BLOG_ENTITY_ACTIONS,
 };
 
 export const DEFAULT_CMS_KIT_ADMIN_ENTITY_PROPS = {
   [eCmsKitAdminComponents.CommentList]: DEFAULT_COMMENT_ENTITY_PROPS,
   [eCmsKitAdminComponents.CommentApprove]: DEFAULT_COMMENT_ENTITY_PROPS,
   [eCmsKitAdminComponents.CommentDetails]: DEFAULT_COMMENT_ENTITY_PROPS,
-  [eCmsKitAdminComponents.TagList]: DEFAULT_TAG_ENTITY_PROPS,
+  [eCmsKitAdminComponents.Tags]: DEFAULT_TAG_ENTITY_PROPS,
-  [eCmsKitAdminComponents.PageList]: DEFAULT_PAGE_ENTITY_PROPS,
+  [eCmsKitAdminComponents.Pages]: DEFAULT_PAGE_ENTITY_PROPS,
+  [eCmsKitAdminComponents.Blogs]: DEFAULT_BLOG_ENTITY_PROPS,
 };
 
 export const DEFAULT_CMS_KIT_ADMIN_TOOLBAR_ACTIONS = {
-  [eCmsKitAdminComponents.TagList]: DEFAULT_TAG_TOOLBAR_ACTIONS,
+  [eCmsKitAdminComponents.Tags]: DEFAULT_TAG_TOOLBAR_ACTIONS,
-  [eCmsKitAdminComponents.PageList]: DEFAULT_PAGE_TOOLBAR_ACTIONS,
+  [eCmsKitAdminComponents.Pages]: DEFAULT_PAGE_TOOLBAR_ACTIONS,
+  [eCmsKitAdminComponents.Blogs]: DEFAULT_BLOG_TOOLBAR_ACTIONS,
 };
 
 export const DEFAULT_CMS_KIT_ADMIN_CREATE_FORM_PROPS = {
-  [eCmsKitAdminComponents.TagList]: DEFAULT_TAG_CREATE_FORM_PROPS,
+  [eCmsKitAdminComponents.Tags]: DEFAULT_TAG_CREATE_FORM_PROPS,
-  [eCmsKitAdminComponents.PageList]: DEFAULT_PAGE_CREATE_FORM_PROPS,
+  [eCmsKitAdminComponents.Pages]: DEFAULT_PAGE_CREATE_FORM_PROPS,
-  [eCmsKitAdminComponents.PageCreate]: DEFAULT_PAGE_CREATE_FORM_PROPS,
+  [eCmsKitAdminComponents.Blogs]: DEFAULT_BLOG_CREATE_FORM_PROPS,
+  [eCmsKitAdminComponents.PageForm]: DEFAULT_PAGE_CREATE_FORM_PROPS,
 };
 
 export const DEFAULT_CMS_KIT_ADMIN_EDIT_FORM_PROPS = {
-  [eCmsKitAdminComponents.TagList]: DEFAULT_TAG_EDIT_FORM_PROPS,
+  [eCmsKitAdminComponents.Tags]: DEFAULT_TAG_EDIT_FORM_PROPS,
-  [eCmsKitAdminComponents.PageList]: DEFAULT_PAGE_EDIT_FORM_PROPS,
+  [eCmsKitAdminComponents.Pages]: DEFAULT_PAGE_EDIT_FORM_PROPS,
-  [eCmsKitAdminComponents.PageEdit]: DEFAULT_PAGE_EDIT_FORM_PROPS,
+  [eCmsKitAdminComponents.Blogs]: DEFAULT_BLOG_EDIT_FORM_PROPS,
+  [eCmsKitAdminComponents.PageForm]: DEFAULT_PAGE_EDIT_FORM_PROPS,
 };
 
 export const CMS_KIT_ADMIN_ENTITY_ACTION_CONTRIBUTORS =
@@ -79,29 +102,34 @@ type EntityActionContributors = Partial<{
   [eCmsKitAdminComponents.CommentList]: EntityActionContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentApprove]: EntityActionContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentDetails]: EntityActionContributorCallback<CommentWithAuthorDto>[];
-  [eCmsKitAdminComponents.TagList]: EntityActionContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.Tags]: EntityActionContributorCallback<TagDto>[];
-  [eCmsKitAdminComponents.PageList]: EntityActionContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.Pages]: EntityActionContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.Blogs]: EntityActionContributorCallback<BlogDto>[];
 }>;
 
 type EntityPropContributors = Partial<{
   [eCmsKitAdminComponents.CommentList]: EntityPropContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentApprove]: EntityPropContributorCallback<CommentWithAuthorDto>[];
   [eCmsKitAdminComponents.CommentDetails]: EntityPropContributorCallback<CommentWithAuthorDto>[];
-  [eCmsKitAdminComponents.TagList]: EntityPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.Tags]: EntityPropContributorCallback<TagDto>[];
-  [eCmsKitAdminComponents.PageList]: EntityPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.Pages]: EntityPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.Blogs]: EntityPropContributorCallback<BlogDto>[];
 }>;
 
 type ToolbarActionContributors = Partial<{
-  [eCmsKitAdminComponents.TagList]: ToolbarActionContributorCallback<TagDto[]>[];
+  [eCmsKitAdminComponents.Tags]: ToolbarActionContributorCallback<TagDto[]>[];
-  [eCmsKitAdminComponents.PageList]: ToolbarActionContributorCallback<PageDto[]>[];
+  [eCmsKitAdminComponents.Pages]: ToolbarActionContributorCallback<PageDto[]>[];
+  [eCmsKitAdminComponents.Blogs]: ToolbarActionContributorCallback<BlogDto[]>[];
 }>;
 
 type CreateFormPropContributors = Partial<{
-  [eCmsKitAdminComponents.TagList]: CreateFormPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.Tags]: CreateFormPropContributorCallback<TagCreateDto>[];
-  [eCmsKitAdminComponents.PageList]: CreateFormPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.PageForm]: CreateFormPropContributorCallback<CreatePageInputDto>[];
+  [eCmsKitAdminComponents.Blogs]: CreateFormPropContributorCallback<CreateBlogDto>[];
 }>;
 
 type EditFormPropContributors = Partial<{
-  [eCmsKitAdminComponents.TagList]: EditFormPropContributorCallback<TagDto>[];
+  [eCmsKitAdminComponents.Tags]: EditFormPropContributorCallback<TagUpdateDto>[];
-  [eCmsKitAdminComponents.PageList]: EditFormPropContributorCallback<PageDto>[];
+  [eCmsKitAdminComponents.PageForm]: EditFormPropContributorCallback<UpdatePageInputDto>[];
+  [eCmsKitAdminComponents.Blogs]: EditFormPropContributorCallback<UpdateBlogDto>[];
 }>;