add restore and remove

api/api/rules.service.ts

             responseType_ = 'text';
         }
 
-        return this.httpClient.post<Rule>(`${this.configuration.basePath}/rules`,
+        return this.httpClient.post<Rule>(`${this.configuration.basePath}/rules/admin`,
             createRuleDto,
             {
                 responseType: <any>responseType_,
         );
     }
 
+    /**
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public findAllAdmin(observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<Array<Rule>>;
+    public findAllAdmin(observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<HttpResponse<Array<Rule>>>;
+    public findAllAdmin(observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<HttpEvent<Array<Rule>>>;
+    public findAllAdmin(observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json'}): Observable<any> {
+
+        let headers = this.defaultHeaders;
+
+        let credential: string | undefined;
+        // authentication (basic) required
+        credential = this.configuration.lookupCredential('basic');
+        if (credential) {
+            headers = headers.set('Authorization', 'Basic ' + credential);
+        }
+
+        let httpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (httpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+                'application/json'
+            ];
+            httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (httpHeaderAcceptSelected !== undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(httpHeaderAcceptSelected && httpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.get<Array<Rule>>(`${this.configuration.basePath}/rules/admin`,
+            {
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
     /**
      * @param id 
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
             responseType_ = 'text';
         }
 
-        return this.httpClient.delete<any>(`${this.configuration.basePath}/rules/${encodeURIComponent(String(id))}`,
+        return this.httpClient.delete<any>(`${this.configuration.basePath}/rules/admin/${encodeURIComponent(String(id))}`,
+            {
+                responseType: <any>responseType_,
+                withCredentials: this.configuration.withCredentials,
+                headers: headers,
+                observe: observe,
+                reportProgress: reportProgress
+            }
+        );
+    }
+
+    /**
+     * @param id 
+     * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
+     * @param reportProgress flag to report request and response progress.
+     */
+    public restore(id: string, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined}): Observable<any>;
+    public restore(id: string, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined}): Observable<HttpResponse<any>>;
+    public restore(id: string, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined}): Observable<HttpEvent<any>>;
+    public restore(id: string, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: undefined}): Observable<any> {
+        if (id === null || id === undefined) {
+            throw new Error('Required parameter id was null or undefined when calling restore.');
+        }
+
+        let headers = this.defaultHeaders;
+
+        let credential: string | undefined;
+        // authentication (basic) required
+        credential = this.configuration.lookupCredential('basic');
+        if (credential) {
+            headers = headers.set('Authorization', 'Basic ' + credential);
+        }
+
+        let httpHeaderAcceptSelected: string | undefined = options && options.httpHeaderAccept;
+        if (httpHeaderAcceptSelected === undefined) {
+            // to determine the Accept header
+            const httpHeaderAccepts: string[] = [
+            ];
+            httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
+        }
+        if (httpHeaderAcceptSelected !== undefined) {
+            headers = headers.set('Accept', httpHeaderAcceptSelected);
+        }
+
+
+        let responseType_: 'text' | 'json' = 'json';
+        if(httpHeaderAcceptSelected && httpHeaderAcceptSelected.startsWith('text')) {
+            responseType_ = 'text';
+        }
+
+        return this.httpClient.post<any>(`${this.configuration.basePath}/rules/admin/restore/${encodeURIComponent(String(id))}`,
+            null,
             {
                 responseType: <any>responseType_,
                 withCredentials: this.configuration.withCredentials,
      * @param observe set whether or not to return the data Observable as the body, response or events. defaults to returning the body.
      * @param reportProgress flag to report request and response progress.
      */
-    public update(id: string, body: object, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<object>;
-    public update(id: string, body: object, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<HttpResponse<object>>;
-    public update(id: string, body: object, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: 'application/json'}): Observable<HttpEvent<object>>;
-    public update(id: string, body: object, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: 'application/json'}): Observable<any> {
+    public update(id: string, body: object, observe?: 'body', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined}): Observable<any>;
+    public update(id: string, body: object, observe?: 'response', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined}): Observable<HttpResponse<any>>;
+    public update(id: string, body: object, observe?: 'events', reportProgress?: boolean, options?: {httpHeaderAccept?: undefined}): Observable<HttpEvent<any>>;
+    public update(id: string, body: object, observe: any = 'body', reportProgress: boolean = false, options?: {httpHeaderAccept?: undefined}): Observable<any> {
         if (id === null || id === undefined) {
             throw new Error('Required parameter id was null or undefined when calling update.');
         }
         if (httpHeaderAcceptSelected === undefined) {
             // to determine the Accept header
             const httpHeaderAccepts: string[] = [
-                'application/json'
             ];
             httpHeaderAcceptSelected = this.configuration.selectHeaderAccept(httpHeaderAccepts);
         }
             responseType_ = 'text';
         }
 
-        return this.httpClient.patch<object>(`${this.configuration.basePath}/rules/${encodeURIComponent(String(id))}`,
+        return this.httpClient.patch<any>(`${this.configuration.basePath}/rules/admin/${encodeURIComponent(String(id))}`,
             body,
             {
                 responseType: <any>responseType_,

api/api/rules.serviceInterface.ts

      */
     findAll(extraHttpRequestParams?: any): Observable<Array<Rule>>;
 
+    /**
+     * 
+     * 
+     */
+    findAllAdmin(extraHttpRequestParams?: any): Observable<Array<Rule>>;
+
     /**
      * 
      * 
      */
     remove(id: string, extraHttpRequestParams?: any): Observable<{}>;
 
+    /**
+     * 
+     * 
+     * @param id 
+     */
+    restore(id: string, extraHttpRequestParams?: any): Observable<{}>;
+
     /**
      * 
      * 
      * @param id 
      * @param body 
      */
-    update(id: string, body: object, extraHttpRequestParams?: any): Observable<object>;
+    update(id: string, body: object, extraHttpRequestParams?: any): Observable<{}>;
 
 }

api/model/rule.ts

     text: string;
     parentRule?: Rule | null;
     subRule?: Array<Rule> | null;
+    created?: string | null;
+    updated?: string | null;
+    deletedAt?: string | null;
 }
 

src/app/admin/create-rule/class/dynamic-database.ts

 import { map } from "rxjs/operators";
 import { CreateRuleDto, Rule, RulesService } from "../../../../../api";
 import { environment } from "../../../../environments/environment";
+import { RuleDataService } from "../../../service/rule-data.service";
 import { RuleFlatNode } from "./rule-flat-node";
 
 
 
   get data(): Rule[] { return this.dataChange.value; }
   get count(): number { return this.dataChange.value.length };
+  protected removeData(rule: Rule) {
+    const indexOfRule = this.dataChange.value.indexOf(rule);
+    if (indexOfRule !== -1) {
+      this.dataChange.value.splice(indexOfRule, 1)
+      this.dataChange.next(
+        this.data
+      );
+    }
+  }
   protected addData(rule: Rule) { this.dataChange.next([...this.dataChange.value, rule]) }
-  constructor(protected rulesService: RulesService) {
+  constructor(protected rulesService: RulesService, protected ruleHelperService: RuleDataService) {
     this.rulesService.configuration.basePath = environment.apiUrl;
-    this.rulesService.findAll()
+    this.rulesService.findAllAdmin()
       .subscribe(
         (rules: Rule[]) => this.dataChange.next(
           rules
-            .filter(this.filterRuleWithParentFromRootLayer)
-            .sort(this.compareRulesByParagraph)
+            .filter(ruleHelperService.filterRuleWithParentFromRootLayer)
+            .sort(ruleHelperService.compareRulesByParagraph)
         )
       ),
       (err) => {
         //TODO add toaster
       }
   }
-  getParagraphOfNextChild = (parentRule): string => `${parentRule.paragraph}.${parentRule.subRule.length + 1}`;
-  filterRuleWithParentFromRootLayer = (rootLayerRule: Rule) => typeof rootLayerRule.parentRule !== 'number';
-
-  compareRulesByParagraph = (ruleA: Rule, ruleB: Rule) => this.compareParahraph(ruleA.paragraph, ruleB.paragraph);
 
-
-  compareParahraph(paragraphA: string, paragraphB: string): 0 | 1 | -1 {
-    if (paragraphA === paragraphB) {
-      return 0;
-    }
-    const paragrapASections = paragraphA.split('.');
-    const paragrapBSections = paragraphB.split('.');
-    if (+paragrapASections[0] > +paragrapBSections[0]) {
-      return 1;
-    }
-    if (+paragrapASections[0] < +paragrapBSections[0]) {
-      return -1;
-    }
-    if (+paragrapASections[0] === +paragrapBSections[0]) {
-      let shiftedParagraphASections = paragrapASections;
-      shiftedParagraphASections.shift();
-      let shiftedParagraphBSections = paragrapBSections;
-      shiftedParagraphBSections.shift();
-      return this.compareParahraph(
-        shiftedParagraphASections.join('.'),
-        shiftedParagraphBSections.join('.'),
-      )
-    }
-  }
   getParentById = (ruleId: string) => this.data.find(rule => rule.id === ruleId)
   insertEmptyChild(parent: Rule) {
+    if (!parent.subRule) {
+      parent.subRule = [];
+    }
     parent.subRule.push(
       {
         text: '',
         id: '0',
         parentRule: parent,
-        paragraph: this.getParagraphOfNextChild(parent)
+        paragraph: this.ruleHelperService.getParagraphOfNextChild(parent),
+        created: 'today',
+        deletedAt: null,
+        updated: null,
       }
     )
     this.dataChange.next(this.data);
       text: '',
       id: '0',
       parentRule: null,
-      paragraph: `${this.count + 2}`
+      paragraph: `${this.count + 1}`,
+      created: 'today',
+      deletedAt: null,
+      updated: null,
     })
   }
   insertChild(parent: Rule, subRule: Rule) {
               paragraph: parent.paragraph,
               subRuleIds: [
                 ...parent.subRule
-                  .filter(rule => rule.id === "0")
-                  .map(rule => rule.id) ?? [],
+                  .filter(rule => rule.id !== "0")
+                  .map(rule => rule.id),
                 subRule.id,
               ],
               text: parent.text
 
   insertParent(newRule: Rule) {
     const createNewRule: CreateRuleDto = {
-      paragraph: `${this.count + 1}`,
+      paragraph: newRule.paragraph,
       text: newRule.text,
       subRuleIds: null,
       parentId: null
     this.dataChange.next(this.data);
   }
 
+  removeParent(parent: Rule) {
+    parent.deletedAt = "deleted";
+    this.rulesService.remove(parent.id).subscribe(
+      (deleted) => {
+        //todo add update message
+      },
+      (err) => {
+        //TODO Push error message
+        console.error(err);
+      }
+    );
+    this.dataChange.next(this.data);
+  }
+
+  restore(rule: Rule) {
+    rule.deletedAt = null;
+    if (rule.subRule) {
+      rule.subRule.forEach((subRule) => {
+        this.restore(subRule);
+      })
+    }
+    this.rulesService.restore(rule.id).subscribe(
+      (deleted) => {
+        //todo add restored message
+      },
+      (err) => {
+        //TODO Push error message
+        console.error(err);
+      }
+    );
+    this.dataChange.next(this.data);
+  }
+
   removeChild(parent: Rule, subRule: Rule) {
     if (parent.subRule) {
-      const subRuleToRemove = this.findSubRuleFromParent(parent, subRule);
-      const indexIfSubRule = parent.subRule.indexOf(subRuleToRemove);
-      if (indexIfSubRule > -1) {
-        parent.subRule.splice(indexIfSubRule, 1);
-      }
+      subRule.deletedAt = "delted";
+      this.rulesService.remove(subRule.id).subscribe(
+        (deleted) => {
+          this.update(parent.id, {
+            paragraph: parent.paragraph,
+            subRuleIds: [
+              ...parent.subRule
+                .filter(rule => rule.id !== "0")
+                .map(rule => rule.id)
+            ],
+            text: parent.text
+          }).subscribe(
+            (updated) => {
+              //todo add update message
+            },
+            (err) => {
+              //TODO Push error message
+              console.error(err);
+            }
+          );
+          //todo add update message
+        },
+        (err) => {
+          //TODO Push error message
+          console.error(err);
+        }
+      );
       this.dataChange.next(this.data);
     }
   }

src/app/admin/create-rule/create-rule.component.html

                 <button mat-icon-button disabled></button> §{{ node.item.paragraph }} {{ node.item.text }}
                 <button *ngIf="node.root" mat-icon-button (click)="addEmptyRule(node)">
           <mat-icon>add</mat-icon>
+        </button>
+                <button mat-icon-button (click)="remove(node)">
+          <mat-icon>remove</mat-icon>
         </button>
             </div>
         </mat-tree-node>
             <button *ngIf="node.root" mat-icon-button (click)="addEmptyRule(node)">
             <mat-icon>add</mat-icon>
           </button>
+            <button mat-icon-button (click)="remove(node)">
+            <mat-icon>remove</mat-icon>
+          </button>
         </mat-tree-node>
         <mat-tree-node *matTreeNodeDef="let node; when: hasNoContent" matTreeNodePadding>
             <button mat-icon-button disabled></button>
             </mat-form-field>
             <button mat-button (click)="addNode(node, itemValue.value)">Save</button>
         </mat-tree-node>
+
+        <mat-tree-node class="disabled-node" *matTreeNodeDef="let node; when: isDeleted" matTreeNodePadding>
+            <button mat-icon-button (click)="restore(node)">
+              <mat-icon>restore</mat-icon>
+            </button>
+            <span>§{{ node.item.paragraph }} {{node.item.text}}</span>
+        </mat-tree-node>
     </mat-tree>
     <button mat-icon-button (click)="addEmptyRule()">
-    <mat-icon>add</mat-icon>
+      <mat-icon>add</mat-icon>
   </button>
 </mat-card>

src/app/admin/create-rule/create-rule.component.scss

 
 .new-node-input {
     padding-left: 2vw;
+}
+
+.disabled-node {
+    text-decoration: line-through;
 }

src/app/admin/create-rule/create-rule.component.ts

   getLevel = (node: RuleFlatNode) => node.level;
   isExpandable = (node: RuleFlatNode) => node.expandable;
   getChildren = (node: Rule): Rule[] => node.subRule;
-  hasChild = (_: number, node: RuleFlatNode) => node.expandable;
+  hasChild = (_: number, node: RuleFlatNode) => node.expandable && !this.isDeleted(_, node);
+  isDeleted = (_: number, _nodeData: RuleFlatNode) => _nodeData.item.deletedAt !== null;
   hasNoContent = (_: number, _nodeData: RuleFlatNode) => _nodeData.item.text === '';
   hasContent = (_nodeData: RuleFlatNode) => _nodeData.item.text !== "";
 
     if (!!newRule.parentRule) {
       const parentRule = this._database.getParentById(newRule.parentRule.id)
       this._database.insertChild(parentRule, newRule)
+      return;
     }
     this._database.insertParent(newRule)
   }
 
+  async remove(nodeToRemove: RuleFlatNode) {
+    const ruleToRemove = this.flatNodeMap.get(nodeToRemove);
+    if (nodeToRemove.root) {
+      this._database.removeParent(ruleToRemove);
+      return
+    }
+    const parentNode = this.getParentNode(nodeToRemove);
+    const parent = this.flatNodeMap.get(parentNode);
+    this._database.removeChild(parent, ruleToRemove);
+  }
+
+
+  async restore(nodeToRestore: RuleFlatNode) {
+    const ruleToRestore = this.flatNodeMap.get(nodeToRestore);
+    this._database.restore(ruleToRestore);
+  }
+
+
+
 }

src/app/main/main.component.html

 <mat-sidenav-container class="all-wrap">
-  <mat-sidenav-content class="page-wrap">
-    <mat-toolbar color="primary">
-      <span class="mat-title title"  >
+    <mat-sidenav-content class="page-wrap">
+        <mat-toolbar color="primary">
+            <span routerLink="" class="mat-title title">
         <mat-icon mat-list-icon class="logo">bedroom_baby</mat-icon> Hof Hoppe</span
       >
     </mat-toolbar>
       <router-outlet></router-outlet>
     </main>
   </mat-sidenav-content>
-</mat-sidenav-container>
+</mat-sidenav-container>

src/app/rules/rules/rules.component.ts

 import { Component, OnInit } from '@angular/core';
 import { Rule } from '../../../../api/model/rule';
 import { RulesService } from '../../../../api/api/rules.service';
+import { RuleDataService } from '../../service/rule-data.service';
 @Component({
   selector: 'app-rules',
   templateUrl: './rules.component.html',
 })
 export class RulesComponent implements OnInit {
   rules: Rule[] = []
-  constructor(protected rulesService: RulesService) {
+  constructor(protected rulesService: RulesService,protected ruleDataService: RuleDataService) {
     rulesService.configuration.basePath = 'http://localhost:3000';
   }
 
+
   ngOnInit(): void {
     this.rulesService.findAll('body').subscribe((rules: Rule[]) => {
-      this.rules = rules;
+      this.rules = rules
+        .sort(this.ruleDataService.compareRulesByParagraph)
+
     })
   }
 

src/app/service/rule-data.service.spec.ts

+import { TestBed } from '@angular/core/testing';
+
+import { RuleDataService } from './rule-data.service';
+
+describe('RuleDataService', () => {
+  let service: RuleDataService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(RuleDataService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/service/rule-data.service.ts

+import { Injectable } from '@angular/core';
+import { Rule } from '../../../api';
+
+@Injectable({
+  providedIn: 'root'
+})
+export class RuleDataService {
+  getParagraphOfNextChild = (parentRule): string => `${parentRule.paragraph}.${parentRule.subRule.length + 1}`;
+  filterRuleWithParentFromRootLayer = (rootLayerRule: Rule) => typeof rootLayerRule.parentRule !== 'number';
+
+  compareRulesByParagraph = (ruleA: Rule, ruleB: Rule) => this.compareParahraph(ruleA.paragraph, ruleB.paragraph);
+
+
+  compareParahraph(paragraphA: string, paragraphB: string): 0 | 1 | -1 {
+    if (paragraphA === paragraphB) {
+      return 0;
+    }
+    const paragrapASections = paragraphA.split('.');
+    const paragrapBSections = paragraphB.split('.');
+    if (+paragrapASections[0] > +paragrapBSections[0]) {
+      return 1;
+    }
+    if (+paragrapASections[0] < +paragrapBSections[0]) {
+      return -1;
+    }
+    if (+paragrapASections[0] === +paragrapBSections[0]) {
+      let shiftedParagraphASections = paragrapASections;
+      shiftedParagraphASections.shift();
+      let shiftedParagraphBSections = paragrapBSections;
+      shiftedParagraphBSections.shift();
+      return this.compareParahraph(
+        shiftedParagraphASections.join('.'),
+        shiftedParagraphBSections.join('.'),
+      )
+    }
+  }
+  constructor() { }
+}