cards section added

src/app/_modules/layout/footer/footer.component.scss

@@ -1,7 +1,7 @@
 .footer {
-  
   width: 100%;
-  padding: 40px 100px; 
+  padding: 40px 100px;
+  margin-top: 48px;
   background-color: var(--prime-act);
   color: white;
   display: flex;
@@ -16,7 +16,7 @@
     }
     display: flex;
     flex-wrap: wrap;
-    grid-gap: 20px;    
+    grid-gap: 20px;
     &>div{
       padding-bottom: 40px;
     }

src/app/_modules/pages/page/page.component.ts

@@ -67,7 +67,7 @@ export class PageComponent {
       'children',
       'sections.type',
       'sections.groups.fields.value',
-      'sections.objectables.groups.fields.value',
+      'sections.objects.groups.fields.value',
       'sidebars.groups.fields.value',
       'sidebars.type',
       'permissions'

src/app/_modules/pages/sections/page-sections.module.ts

@@ -27,8 +27,7 @@ import {PageMenuComponent} from "@app/_modules/pages/sections/menu/page-menu.com
 import {ImageGroupSectionComponent} from "@app/_modules/pages/sections/types/basic/image-group/image-group-section.component";
 import {MemberSectionItemComponent} from "@app/_modules/pages/sections/types/basic/member/item/member-section-item.component";
 import {MemberSectionListComponent} from "@app/_modules/pages/sections/types/basic/member/list/member-section-list.component";
-import {CardsSectionComponent} from "@app/_modules/pages/sections/types/basic/cards/cards-section.component";
-
+import {CardsSectionModule} from "@app/_modules/pages/sections/types/basic/cards/cards-section.module";
 
 @NgModule({
   imports: [
@@ -37,32 +36,32 @@ import {CardsSectionComponent} from "@app/_modules/pages/sections/types/basic/ca
     ReactiveFormsModule,
     ObjectsModule,
     SwiperModule,
-    WidjetModule
+    WidjetModule,
+    CardsSectionModule
+  ],
+  declarations: [
+    PageMenuComponent,
+    PageSectionsComponent,
+    PageSectionComponent,
+    HeaderSectionComponent,
+    TextSectionComponent,
+    AddSectionComponent,
+    ImagesSectionComponent,
+    DocumentsSectionComponent,
+    ListSectionComponent,
+    HtmlSectionComponent,
+    VideoSectionComponent,
+    ButtonSectionComponent,
+    IframeSectionComponent,
+    FeedbackSectionComponent,
+    ContactSectionComponent,
+    MapsSectionComponent,
+    MemberSectionComponent,
+    ImageGroupSectionComponent,
+    DocumentSectionComponent,
+    MemberSectionItemComponent,
+    MemberSectionListComponent
   ],
-    declarations: [
-        PageMenuComponent,
-        PageSectionsComponent,
-        PageSectionComponent,
-        HeaderSectionComponent,
-        TextSectionComponent,
-        AddSectionComponent,
-        ImagesSectionComponent,
-        DocumentsSectionComponent,
-        ListSectionComponent,
-        HtmlSectionComponent,
-        VideoSectionComponent,
-        ButtonSectionComponent,
-        IframeSectionComponent,
-        FeedbackSectionComponent,
-        ContactSectionComponent,
-        MapsSectionComponent,
-        MemberSectionComponent,
-        ImageGroupSectionComponent,
-        DocumentSectionComponent,
-        MemberSectionItemComponent,
-        MemberSectionListComponent,
-        CardsSectionComponent,
-    ],
   exports: [
     PageSectionsComponent,
     ImagesSectionComponent

src/app/_modules/pages/sections/types/basic/cards/cards-section.component.html

@@ -1 +1,4 @@
-<p>cards section {{type?.name}}</p>
+<div class="add">
+  <button type="button" class="btn" (click)="add()">Добавить карточку</button>
+</div>
+<cards-section-items [cards]="cards" [type]="type"></cards-section-items>

src/app/_modules/pages/sections/types/basic/cards/cards-section.component.scss

@@ -0,0 +1,3 @@
+.add {
+  margin-bottom: 24px;
+}

src/app/_modules/pages/sections/types/basic/cards/cards-section.component.ts

@@ -1,5 +1,5 @@
 import {Component, Input} from '@angular/core';
-import {ObjectsService} from "@app/_services";
+import {FormsService, ObjectsService} from "@app/_services";
 
 @Component({
   selector: 'cards-section',
@@ -9,24 +9,24 @@ import {ObjectsService} from "@app/_services";
 export class CardsSectionComponent {
   @Input() section: any;
 
-  constructor(private objectsService: ObjectsService) {
+  constructor(private objectsService: ObjectsService, private formsService: FormsService) {
   }
 
-
-
   get type() {
     return this.objectsService.getValue(this.section, 'cards-section-type');
   }
-  /*
-  get title() {
-    return this.objectsService.getValue(this.section, 'button-title');
+  get cards() {
+    return this.section?.objects?.data;
   }
-  get targetSelf() {
-    return this.objectsService.getValue(this.section, 'target-self');
-  }
-  */
 
   ngOnInit() {
   }
+
+
+  add() {
+    let attach = {modelType: 'object', group: 'sections', modelId: this.section.id};
+    this.formsService.createObject(this.type.name, {extraProps: {attach: attach}});
+  }
+
 }
 

src/app/_modules/pages/sections/types/basic/cards/cards-section.module.ts

@@ -0,0 +1,26 @@
+import {NgModule} from '@angular/core';
+import {CommonModule} from '@angular/common';
+import {CardsSectionComponent} from "@app/_modules/pages/sections/types/basic/cards/cards-section.component";
+import {CardsSectionItemsComponent} from "@app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component";
+import {CardsSectionItemComponent} from "@app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component";
+import {CardsItemPersonsComponent} from "@app/_modules/pages/sections/types/basic/cards/items/item/types/persons/cards-item-persons.component";
+import {CardsItemPartnersComponent} from "@app/_modules/pages/sections/types/basic/cards/items/item/types/partners/cards-item-partners.component";
+
+
+@NgModule({
+  imports: [
+    CommonModule
+  ],
+  declarations: [
+    CardsSectionComponent,
+    CardsSectionItemsComponent,
+    CardsSectionItemComponent,
+    CardsItemPersonsComponent,
+    CardsItemPartnersComponent
+  ],
+  exports: [
+    CardsSectionComponent
+  ]
+})
+export class CardsSectionModule {
+}

src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.html

@@ -0,0 +1,3 @@
+<div class="items {{type?.name}}">
+  <cards-section-item [card]="card" [type]="type" *ngFor="let card of cards"></cards-section-item>
+</div>

src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.scss

@@ -0,0 +1,11 @@
+.items {
+  display: flex;
+  flex-direction: row;
+  align-items: stretch;
+  gap: 24px;
+  flex-wrap: wrap;
+
+  cards-section-item {
+    width: 25%;
+  }
+}

src/app/_modules/pages/sections/types/basic/cards/items/cards-section-items.component.ts

@@ -0,0 +1,20 @@
+import {Component, Input} from '@angular/core';
+import {ObjectsService} from "@app/_services";
+
+@Component({
+  selector: 'cards-section-items',
+  templateUrl: 'cards-section-items.component.html',
+  styleUrls: ['cards-section-items.component.scss']
+})
+export class CardsSectionItemsComponent {
+  @Input() cards = <any>[];
+  @Input() type: any;
+
+  constructor() {
+  }
+
+
+  ngOnInit() {
+  }
+}
+

src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.html

@@ -0,0 +1,5 @@
+<div class="card" [ngSwitch]="type?.name">
+  <cards-item-persons *ngSwitchCase="'cards-section-persons'" [card]="card"></cards-item-persons>
+  <cards-item-partners *ngSwitchCase="'cards-section-partners'" [card]="card"></cards-item-partners>
+  <p *ngSwitchDefault>{{type?.name}} is undefined</p>
+</div>

src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.scss

@@ -0,0 +1,5 @@
+.card {
+  height: 100%;
+  padding: 12px;
+  border: #dedede solid 1px;
+}

src/app/_modules/pages/sections/types/basic/cards/items/item/cards-section-item.component.ts

@@ -0,0 +1,24 @@
+import {Component, Input} from '@angular/core';
+import {FormsService, ObjectsService} from "@app/_services";
+
+@Component({
+  selector: 'cards-section-item',
+  templateUrl: 'cards-section-item.component.html',
+  styleUrls: ['cards-section-item.component.scss']
+})
+export class CardsSectionItemComponent {
+  @Input() card: any;
+  @Input() type: any;
+
+  constructor(private objectsService: ObjectsService, private formsService: FormsService) {
+  }
+
+
+  ngOnInit() {
+  }
+
+  edit() {
+    this.formsService.editObject(this.card.id);
+  }
+}
+

src/app/_modules/pages/sections/types/basic/cards/items/item/types/partners/cards-item-partners.component.html

@@ -0,0 +1,3 @@
+<div class="image">
+  <a [href]="link" target="_blank"><img [src]="image?.links?.thumb" /></a>
+</div>

src/app/_modules/pages/sections/types/basic/cards/items/item/types/partners/cards-item-partners.component.scss

@@ -0,0 +1,5 @@
+.image {
+  img {
+    width: 100%;
+  }
+}

src/app/_modules/pages/sections/types/basic/cards/items/item/types/partners/cards-item-partners.component.ts

@@ -0,0 +1,26 @@
+import {Component, Input} from '@angular/core';
+import {ObjectsService} from "@app/_services";
+
+@Component({
+  selector: 'cards-item-partners',
+  templateUrl: 'cards-item-partners.component.html',
+  styleUrls: ['cards-item-partners.component.scss']
+})
+export class CardsItemPartnersComponent {
+  @Input() card: any;
+
+  constructor(private objectsService: ObjectsService) {
+  }
+
+  get image() {
+    return this.objectsService.getValue(this.card, 'image-required');
+  }
+  get link() {
+    return this.objectsService.getValue(this.card, 'link-required');
+  }
+
+
+  ngOnInit() {
+  }
+}
+

src/app/_modules/pages/sections/types/basic/cards/items/item/types/persons/cards-item-persons.component.html

@@ -0,0 +1,8 @@
+<div class="image">
+  <img [src]="image?.links?.thumb" />
+</div>
+<div class="title">{{name}}</div>
+<div class="subtitle">{{position}}</div>
+<div class="phone">{{phone}}</div>
+<div class="email">{{email}}</div>
+

src/app/_modules/pages/sections/types/basic/cards/items/item/types/persons/cards-item-persons.component.scss

@@ -0,0 +1,5 @@
+.image {
+  img {
+    width: 100%;
+  }
+}

src/app/_modules/pages/sections/types/basic/cards/items/item/types/persons/cards-item-persons.component.ts

@@ -0,0 +1,34 @@
+import {Component, Input} from '@angular/core';
+import {ObjectsService} from "@app/_services";
+
+@Component({
+  selector: 'cards-item-persons',
+  templateUrl: 'cards-item-persons.component.html',
+  styleUrls: ['cards-item-persons.component.scss']
+})
+export class CardsItemPersonsComponent {
+  @Input() card: any;
+
+  constructor(private objectsService: ObjectsService) {
+  }
+
+  get image() {
+    return this.objectsService.getValue(this.card, 'image');
+  }
+  get name() {
+    return this.objectsService.getValue(this.card, 'person-name');
+  }
+  get position() {
+    return this.objectsService.getValue(this.card, 'person-position');
+  }
+  get phone() {
+    return this.objectsService.getValue(this.card, 'contact-phone');
+  }
+  get email() {
+    return this.objectsService.getValue(this.card, 'contact-email');
+  }
+
+  ngOnInit() {
+  }
+}
+