Header / Footer editor added - Right now linked to products permission, which should be changed

bookie/src/app/header-footer/header-footer.component.ts

@@ -0,0 +1,80 @@
+import { Component, ElementRef, OnInit, ViewChild } from '@angular/core';
+import { FormBuilder, FormGroup } from '@angular/forms';
+import { MatDialog } from '@angular/material/dialog';
+import { ActivatedRoute, Router } from '@angular/router';
+import { map } from 'rxjs/operators';
+
+import { ToasterService } from '../core/toaster.service';
+
+import { HeaderFooter } from './header-footer';
+import { HeaderFooterService } from './header-footer.service';
+
+@Component({
+  selector: 'app-section-printer',
+  templateUrl: './header-footer.component.html',
+  styleUrls: ['./header-footer.component.css'],
+})
+export class HeaderFooterComponent implements OnInit {
+  @ViewChild('section', { static: true }) sectionElement: ElementRef;
+  form: FormGroup;
+  list: HeaderFooter[];
+  id: string;
+
+  constructor(
+    private route: ActivatedRoute,
+    private router: Router,
+    private fb: FormBuilder,
+    private toaster: ToasterService,
+    private dialog: MatDialog,
+    private ser: HeaderFooterService,
+  ) {
+    this.createForm();
+    route.params.pipe(map((p) => p.id)).subscribe((x) => {
+      this.id = x;
+    });
+  }
+
+  createForm() {
+    this.form = this.fb.group({
+      id: '',
+      text: '',
+    });
+  }
+
+  ngOnInit() {
+    this.route.data.subscribe((data: { list: HeaderFooter[] }) => {
+      this.showItem(data.list);
+    });
+  }
+
+  showItem(list: HeaderFooter[]) {
+    this.list = list;
+    this.form.setValue({
+      id: this.id,
+      text: this.list.find((v) => v.id === this.id).text,
+    });
+  }
+
+  save() {
+    this.ser.save(this.getItem()).subscribe(
+      (result: HeaderFooter[]) => {
+        this.toaster.show('Success', '');
+        this.showItem(result);
+      },
+      (error) => {
+        this.toaster.show('Danger', error.error);
+      },
+    );
+  }
+
+  getItem(): HeaderFooter {
+    const formModel = this.form.value;
+    const item = this.list.find((v) => v.id === this.id);
+    item.text = formModel.text;
+    return item;
+  }
+
+  show(val: any) {
+    this.router.navigate(['/header-footer', val.value]);
+  }
+}