section {{type?.name}} is undefined
diff --git a/src/app/_modules/pages/sections/item/page-section.component.ts b/src/app/_modules/pages/sections/item/page-section.component.ts index 0c3622c..500cd89 100644 --- a/src/app/_modules/pages/sections/item/page-section.component.ts +++ b/src/app/_modules/pages/sections/item/page-section.component.ts @@ -1,5 +1,4 @@ import {Component, Input} from '@angular/core'; -import {FormsService, ListsService, ObjectsService} from "@app/_services"; @Component({ selector: 'page-section', @@ -13,7 +12,10 @@ export class PageSectionComponent { @Input() editMode = false; @Input() modelType: string; - constructor(private formsService: FormsService, private objectsService: ObjectsService, private listsService: ListsService) { + constructor() { + } + + ngOnInit() { } @@ -24,40 +26,4 @@ export class PageSectionComponent { get ord() { return this.section?.pivot?.ord; } - - get total() { - return this.page?.sections?.data?.length; - } - - get isFirst() { - return this.index === 0; - } - - get isLast() { - return (this.index + 1) === this.total; - } - - - ngOnInit() { - - } - - - edit() { - this.formsService.editObject(this.section.id); - } - - move(ord) { - this.objectsService.move(this.section.id, {modelType: this.modelType, modelId: this.page.id, ord: ord}).subscribe(res => { - this.listsService.refresh(); - }); - } - - delete() { - //r u sure? - if (confirm('Удалить этот блок?')) this.objectsService.destroy(this.section.id).subscribe(res => { - this.listsService.refresh(); - }); - } - } diff --git a/src/app/_modules/pages/sections/menu/page-menu.component.html b/src/app/_modules/pages/sections/menu/page-menu.component.html new file mode 100644 index 0000000..e25d580 --- /dev/null +++ b/src/app/_modules/pages/sections/menu/page-menu.component.html @@ -0,0 +1,8 @@ + diff --git a/src/app/_modules/pages/sections/menu/page-menu.component.scss b/src/app/_modules/pages/sections/menu/page-menu.component.scss new file mode 100644 index 0000000..e69de29 diff --git a/src/app/_modules/pages/sections/menu/page-menu.component.ts b/src/app/_modules/pages/sections/menu/page-menu.component.ts new file mode 100644 index 0000000..99fc4ec --- /dev/null +++ b/src/app/_modules/pages/sections/menu/page-menu.component.ts @@ -0,0 +1,52 @@ +import {Component, Input} from '@angular/core'; +import {FormsService, ListsService, ObjectsService} from "@app/_services"; + +@Component({ + selector: 'page-menu', + templateUrl: 'page-menu.component.html', + styleUrls: ['page-menu.component.scss'] +}) +export class PageMenuComponent { + @Input() page: any; + @Input() section: any; + @Input() editMode = false; + @Input() index: number; + @Input() modelType: string; + + constructor(private formsService: FormsService, private objectsService: ObjectsService, private listsService: ListsService) { + } + + get ord() { + return this.section?.pivot?.ord; + } + + get total() { + return this.page?.sections?.data?.length || 1; + } + + get isFirst() { + return this.index === 0; + } + + get isLast() { + return (this.index + 1) === this.total; + } + + + edit() { + this.formsService.editObject(this.section.id); + } + + move(ord) { + this.objectsService.move(this.section.id, {modelType: this.modelType, modelId: this.page.id, ord: ord}).subscribe(res => { + this.listsService.refresh(); + }); + } + + delete() { + //r u sure? + if (confirm('Удалить этот блок?')) this.objectsService.destroy(this.section.id).subscribe(res => { + this.listsService.refresh(); + }); + } +} diff --git a/src/app/_modules/pages/sections/page-sections.module.ts b/src/app/_modules/pages/sections/page-sections.module.ts index 9260fce..e71f322 100644 --- a/src/app/_modules/pages/sections/page-sections.module.ts +++ b/src/app/_modules/pages/sections/page-sections.module.ts @@ -23,6 +23,7 @@ import {MapsSectionComponent} from "@app/_modules/pages/sections/types/basic/map import {MemberSectionComponent} from "@app/_modules/pages/sections/types/basic/member/member-section.component"; import {ImageSectionComponent} from "@app/_modules/pages/sections/types/basic/image/image-section.component"; import {DocumentSectionComponent} from "@app/_modules/pages/sections/types/basic/document/document-section.component"; +import {PageMenuComponent} from "@app/_modules/pages/sections/menu/page-menu.component"; @NgModule({ imports: [ @@ -33,6 +34,7 @@ import {DocumentSectionComponent} from "@app/_modules/pages/sections/types/basic SwiperModule, ], declarations: [ + PageMenuComponent, PageSectionsComponent, PageSectionComponent, HeaderSectionComponent, diff --git a/src/app/_modules/pages/sections/types/basic/member/member-section.component.html b/src/app/_modules/pages/sections/types/basic/member/member-section.component.html index 7cc45b6..66028df 100644 --- a/src/app/_modules/pages/sections/types/basic/member/member-section.component.html +++ b/src/app/_modules/pages/sections/types/basic/member/member-section.component.html @@ -1 +1,15 @@ -Member Section +
+
diff --git a/src/app/_modules/pages/sections/types/basic/member/member-section.component.scss b/src/app/_modules/pages/sections/types/basic/member/member-section.component.scss
index e69de29..8b339c8 100644
--- a/src/app/_modules/pages/sections/types/basic/member/member-section.component.scss
+++ b/src/app/_modules/pages/sections/types/basic/member/member-section.component.scss
@@ -0,0 +1,55 @@
+.member {
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ max-width: 900px;
+ .add {
+ padding: 16px 12px;
+ display: flex;
+ justify-content: space-between;
+ width: 100%;
+ border-top: 1px solid #C0C0C0;
+ border-bottom: 1px solid #C0C0C0;
+ .title {
+ color: #6C6C6C;
+ font-size: 20px;
+ font-style: normal;
+ font-weight: 400;
+ line-height: 24px;
+ }
+ .toggle {
+ width: 24px;
+ height: 24px;
+ cursor: pointer;
+ background: url('~src/assets/images/icons/add_cirle_24dp.svg') center no-repeat;
+ }
+ }
+ .list {
+ margin: 32px 0;
+ display: grid;
+ gap: 32px 40px;
+ width: 100%;
+ grid-template-columns: repeat(3, 1fr);
+ .item {
+ object-fit: cover;
+ .menu {
+
+ }
+ .photo {
+ img {
+ width: calc(100%);
+ border-radius: 12px;
+ }
+ }
+ .name {
+
+ }
+ .description {
+
+ }
+ .more {
+
+ }
+ }
+ }
+}
diff --git a/src/app/_modules/pages/sections/types/basic/member/member-section.component.ts b/src/app/_modules/pages/sections/types/basic/member/member-section.component.ts
index 4cdd7a1..dea0d7c 100644
--- a/src/app/_modules/pages/sections/types/basic/member/member-section.component.ts
+++ b/src/app/_modules/pages/sections/types/basic/member/member-section.component.ts
@@ -1,4 +1,5 @@
import {Component, Input} from '@angular/core';
+import {FormsService} from "@app/_services";
@Component({
selector: 'member-section',
@@ -7,12 +8,24 @@ import {Component, Input} from '@angular/core';
})
export class MemberSectionComponent {
@Input() section: any;
+ @Input() editMode = false;
- constructor(
- ) {
+ constructor(private formsService: FormsService,) {
}
ngOnInit() {
- console.log(this.section);
+ console.log();
+ }
+
+ get title() {
+ return this.section?.groups?.data[0]?.fields?.data[0]?.value?.data[0];
+ }
+
+ add() {
+ this.formsService.createObject('page-section-list-member');
+ }
+
+ getLink(slug: string) {
+ return '' + slug;
}
}
diff --git a/src/app/_modules/pages/tree/item/pages-tree-item.component.html b/src/app/_modules/pages/tree/item/pages-tree-item.component.html
new file mode 100644
index 0000000..aa35fa0
--- /dev/null
+++ b/src/app/_modules/pages/tree/item/pages-tree-item.component.html
@@ -0,0 +1,28 @@
+
+
+
+
+
+
+
+
+
diff --git a/src/app/_modules/pages/tree/item/pages-tree-item.component.scss b/src/app/_modules/pages/tree/item/pages-tree-item.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/_modules/pages/tree/item/pages-tree-item.component.ts b/src/app/_modules/pages/tree/item/pages-tree-item.component.ts
new file mode 100644
index 0000000..ce9e81f
--- /dev/null
+++ b/src/app/_modules/pages/tree/item/pages-tree-item.component.ts
@@ -0,0 +1,76 @@
+import {Component, Input} from '@angular/core';
+import {Router} from "@angular/router";
+import {PagesService} from "@app/_services/pages.service";
+import {FormsService, ListsService} from "@app/_services";
+import {Subscription} from "rxjs";
+
+@Component({
+ selector: 'pages-tree-item',
+ templateUrl: 'pages-tree-item.component.html',
+ styleUrls: ['../pages-tree.component.scss', 'pages-tree-item.component.scss']
+})
+export class PagesTreeItemComponent {
+ @Input() page: any;
+ @Input() parent: any;
+ public active = false;
+ public touched = false;
+ public subscription: Subscription;
+
+ constructor(private router: Router, private pagesService: PagesService, private formsService: FormsService, private listsService: ListsService) {
+ }
+
+ get listId() {
+ return this.page.id;
+ }
+ get parentListId() {
+ return this.parent?.id || 'pages-tree-root';
+ }
+
+ get logo() {
+ return this.page?.logo?.data.links?.full;
+ }
+ get noLogoLetters() {
+ return this.page.name.replace(' ', '').slice(0, 2);
+ }
+ get children() {
+ return this.page.children?.data;
+ }
+
+
+ ngOnInit() {
+ this.subscription = this.listsService.controls(this.listId).subscribe(res => {
+ if (this.touched) this.fetch();
+ });
+ }
+
+
+ fetch() {
+ let include = ['children.children'];
+ this.pagesService.show(this.page.id, {include: include.join(',')}).subscribe(res => {
+ this.page = res.data;
+ });
+ }
+
+ add() {
+ this.formsService.createModel('page', {extraProps: {parent: this.page.id}}, this.listId);
+ this.active = true;
+ }
+
+ edit() {
+ this.formsService.editModel('page', this.page.id, null, this.listId);
+ }
+
+ delete() {
+ if (confirm('r u sure?')) this.pagesService.delete(this.page.id).subscribe(res => {
+ this.listsService.refresh(this.parentListId);
+ });
+ }
+
+
+ toggle() {
+ this.active = !this.active;
+ if (this.active) this.fetch();
+ }
+
+
+}
diff --git a/src/app/_modules/pages/tree/pages-tree.component.html b/src/app/_modules/pages/tree/pages-tree.component.html
new file mode 100644
index 0000000..b269be5
--- /dev/null
+++ b/src/app/_modules/pages/tree/pages-tree.component.html
@@ -0,0 +1,17 @@
+
+
+
+
+
+
+
+
+ 
+ {{noLogoLetters}}
+
+
+
+
+ {{page.type?.title}}
+
+
+
+
+
+
+
+
+
+
diff --git a/src/app/_modules/pages/tree/pages-tree.component.scss b/src/app/_modules/pages/tree/pages-tree.component.scss
new file mode 100644
index 0000000..d2e26cf
--- /dev/null
+++ b/src/app/_modules/pages/tree/pages-tree.component.scss
@@ -0,0 +1,124 @@
+.item {
+ .bar {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ padding: 16px 0;
+ border-bottom: #E0E0E0 solid 1px;
+ .left {
+ flex-shrink: 0;
+ width: 40px;
+ height: 24px;
+ cursor: pointer;
+ .toggle {
+ width: 100%;
+ height: 100%;
+ background: transparent url("~src/assets/images/icons/circle_plus_24.svg") 50% 50% no-repeat;
+ }
+ }
+ .mid {
+ flex-grow: 1;
+ padding: 0 16px;
+ .info {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ .logo {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ position: relative;
+ flex-shrink: 0;
+ width: 40px;
+ height: 40px;
+ margin-right: 16px;
+ border-radius: 100px;
+ background-color: #F9B417;
+ img {
+ width: 100%;
+ height: 100%;
+ border-radius: 100px;
+ object-fit: cover;
+ background-color: #ffffff;
+ }
+ }
+ .name {
+ p {
+ margin: 0;
+ a {
+ font-weight: bold;
+ color: var(--grey-7);
+ }
+ &.sub {
+ font-size: 0.875rem;
+ color: #7f7f7f;
+ }
+ }
+ }
+ }
+ }
+ .right {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ flex-shrink: 0;
+ button {
+ margin-left: 24px;
+ &.edit {
+ background-image: url('~src/assets/images/icons/edit_24dp.svg');
+ }
+ &.add {
+ background-image: url('~src/assets/images/icons/add_library_dark_24.svg');
+ }
+ &.delete {
+ background-image: url('~src/assets/images/icons/close_24dp.svg');
+ }
+ &.move {
+ background-image: url('~src/assets/images/icons/drag-n-drop_24.svg');
+ cursor: move;
+ }
+ }
+ }
+ }
+ .items {
+ display: none;
+ padding-left: 56px;
+ }
+ &.active {
+ >.bar {
+ .left {
+ .toggle {
+ background-image: url('~src/assets/images/icons/circle_minus_24.svg');
+ }
+ }
+ }
+ >.items {
+ display: block;
+ }
+ }
+}
+
+
+@media screen and (max-width: 767px) {
+ .item {
+ .bar {
+ .mid {
+ padding: 0 12px;
+ .info .logo {
+ display: none;
+ }
+ }
+ .right {
+ display: none;
+ }
+ }
+ .items {
+ padding-left: 16px;
+ }
+ &.company {
+ .items {
+ padding-left: 40px;
+ }
+ }
+ }
+}
diff --git a/src/app/_modules/pages/tree/pages-tree.component.ts b/src/app/_modules/pages/tree/pages-tree.component.ts
new file mode 100644
index 0000000..4141732
--- /dev/null
+++ b/src/app/_modules/pages/tree/pages-tree.component.ts
@@ -0,0 +1,81 @@
+import {Component, Input} from '@angular/core';
+import {Router} from "@angular/router";
+import {PagesService} from "@app/_services/pages.service";
+import {FormsService, ListsService} from "@app/_services";
+import {Subscription} from "rxjs";
+import {SortableOptions} from "sortablejs";
+
+@Component({
+ selector: 'pages-tree',
+ templateUrl: 'pages-tree.component.html',
+ styleUrls: ['pages-tree.component.scss']
+})
+export class PagesTreeComponent {
+ @Input() parent: any;
+ public pages =