Merge pull request #6 from f7ed0/controller-modifier

Controller modifier

build.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 rm -rf .angular
-npm link sb-shared-lib
+# npm link sb-shared-lib
 # --configuration production
 ng build --configuration production --base-href="/workbench/"
 touch manifest.json && rm -f web.app && cp manifest.json dist/symbiose/ && cd dist/symbiose && zip -r ../../web.app * && cd ../..

src/app/_services/type-usage.service.ts

@@ -0,0 +1,26 @@
+import { Injectable } from '@angular/core';
+import { ApiService } from 'sb-shared-lib';
+
+// TODO add refresh function
+
+@Injectable({
+    providedIn: 'root'
+})
+export class TypeUsageService {
+    protected scheme:any
+
+    constructor(
+        protected api:ApiService,
+    ) {
+        this.api.fetch("?get=core_config_usages").then(
+            data => {
+                this.scheme = data
+                console.log(this.scheme)
+            }
+        )
+    }
+
+    get usages() {
+        return this.scheme
+    }
+}

src/app/app.module.ts

@@ -23,6 +23,7 @@ import { MAT_SNACK_BAR_DEFAULT_OPTIONS } from '@angular/material/snack-bar';
 import localeFr from '@angular/common/locales/fr';
 import { PackageModule } from './in/package/package.module';
 import { TranslateModule } from '@ngx-translate/core';
+import { TypeInputComponent } from './in/type-input/type-input.component';
 
 registerLocaleData(localeFr);
 

src/app/in/controllers/_components/controller-info/controller-info.component.html

@@ -8,13 +8,20 @@
             <label class="packagename accent">{{ current_controller }}</label>
             <label class="packagename accent-color">({{ controller_type.toUpperCase() }})</label>
         </div>
+        <div>
+            <label *ngIf="!fetch_error && scheme['deprecated']" class="depecrated">
+                <mat-icon class="warnicon">warning</mat-icon>
+                DEPRECATED : This controller is deprecated. It may be deleted in future update.
+            </label>
+        </div>
         <br>
         <div *ngIf="fetch_error">
             It looks like you don't have the rights to see this controller informations
         </div>
+
         <div *ngIf="!fetch_error">
-            <label class="content-label">Description</label>
-            <p class="content-desc">{{scheme['description']}}</p>
+            <label class="content-label">Description</label><br>
+            <label class="content-desc">{{scheme['description']}}</label>
         </div>
     </div>
     <div class="core-prez">
@@ -124,4 +131,14 @@
         </div>
         <br>
     </div>
+    <div class="class-container-bottom">
+        <mat-grid-list [cols]="4" rowHeight="100%" class="max-width button-pkg-container">
+            <mat-grid-tile>
+                <button mat-button class="package-info-button" (click)="nav(1)"><mat-icon>text_format</mat-icon><label>Params</label></button>
+            </mat-grid-tile>
+            <mat-grid-tile>
+                <button mat-button class="package-info-button" (click)="nav(2)"><mat-icon>translate</mat-icon><label>Translations</label></button>
+            </mat-grid-tile>
+        </mat-grid-list>
+    </div>
 </div>

src/app/in/controllers/_components/controller-info/controller-info.component.scss

@@ -6,13 +6,17 @@
 }
 
 .margin-container {
-    margin: 1em;
     padding: 2em;
     border-radius: 10px;
     background-color: whitesmoke;
     height: calc(100% - 4em);
 }
 
+.class-container-bottom {
+    margin-top: .5em;
+    height: 4em;
+}
+
 .flex-labels label {
     margin-right: 0.5em;
 }
@@ -166,9 +170,18 @@ pre {
 
 .core-prez {
     overflow-y: scroll;
-    height: calc(100% - 145px);
+    height: calc(100% - 155px - 4em);
 }
 
 .title-controller {
-    height : 145px;
+    height : 155px;
+}
+
+.depecrated {
+    color: mat-color($warncolor);
+    font-size : 1.1em;
+}
+
+.warnicon {
+    transform: translateY(.2em);
 }

src/app/in/controllers/_components/controller-info/controller-info.component.ts

@@ -43,6 +43,9 @@ export class ControllerInfoComponent implements OnInit {
     @Input() fetch_error:boolean
     @Input() moving:boolean = false
     @Output() goto = new EventEmitter<string>();
+
+    @Output() navigate = new EventEmitter<number>()
+
     public paramsValue: any;
     public presentRequiredParams: any;
     public canSubmit: boolean
@@ -63,6 +66,7 @@ export class ControllerInfoComponent implements OnInit {
     public async ngOnChanges() {
         this.routes = await this.api.getRoutes();
         this.initialization()
+        console.log(this.scheme)
     }
 
     /**
@@ -308,4 +312,8 @@ export class ControllerInfoComponent implements OnInit {
             });
         }
     }
+
+    nav(choice:number) {
+        this.navigate.emit(choice)
+    }
 }

src/app/in/controllers/_components/params-editor/_components/param-list/param-list.component.html

@@ -0,0 +1,21 @@
+<div>
+    <mat-form-field class="filterinput">
+        <mat-icon matPrefix>filter_list</mat-icon>
+        <mat-label>Filter</mat-label>
+        <input matInput [formControl]="filterControl">
+    </mat-form-field>
+    <button mat-mini-fab color="primary" (click)="createItem()"><mat-icon>add</mat-icon></button>
+</div>
+<mat-list class="list">
+    <mat-list-item *ngFor="let item of filteredList" class="item" (click)="onClickItem(list.indexOf(item))" [class.selected]="this.selectedIndex === list.indexOf(item)">
+        <div class="icon">
+            <mat-icon>{{iconList[item.type]}}</mat-icon>
+        </div>
+        <div class="name">
+            <label>{{item.name}}</label>
+        </div>
+        <div class="button">
+            <button mat-icon-button (click)="deleteItem(list.indexOf(item))"><mat-icon>delete</mat-icon></button>
+        </div>
+    </mat-list-item>
+</mat-list>

src/app/in/controllers/_components/params-editor/_components/param-list/param-list.component.scss

@@ -0,0 +1,50 @@
+@import "src/theme.scss";
+
+:host {
+    width : 100%;
+    height : 100%;
+    padding: 1em;
+    margin: .5em;
+    background-color: whitesmoke;
+    border-radius: 1em;
+
+}
+
+.list {
+    width : 100%;
+    height : 100%;
+    overflow-y: scroll;
+}
+
+.selected {
+    background-color: #dddddd;
+}
+
+.icon {
+    display : flex;
+    justify-content: center;
+    align-items: center;
+    background-color: mat-color($maincolor,A100) ;
+    min-width: 3em;
+    width: 10%;
+    height: 2em;
+    border-radius: 1em;
+}
+
+.name {
+    padding: 0 2em;
+    width: calc( 100% - max(2em,10%) );
+}
+
+.item {
+    width: 100%;
+    height: 3em;
+    align-items: center;
+    cursor : pointer;
+    border-radius: .5em;
+}
+
+.filterinput {
+    margin-right: 10px;
+    width : calc(100% - 60px)
+}

src/app/in/controllers/_components/params-editor/_components/param-list/param-list.component.spec.ts

@@ -0,0 +1,25 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ParamListComponent } from './param-list.component';
+
+describe('ParamListComponent', () => {
+  let component: ParamListComponent;
+  let fixture: ComponentFixture<ParamListComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ParamListComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ParamListComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/in/controllers/_components/params-editor/_components/param-list/param-list.component.ts

@@ -0,0 +1,91 @@
+import { Component, EventEmitter, Input, OnChanges, OnInit, Output, SimpleChanges } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Params } from '@angular/router';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+import { AsyncPipe } from '@angular/common';
+import { Param } from '../../_objects/Params';
+import { ca } from 'date-fns/locale';
+
+@Component({
+  selector: 'app-param-list',
+  templateUrl: './param-list.component.html',
+  styleUrls: ['./param-list.component.scss']
+})
+export class ParamListComponent implements OnInit, OnChanges {
+
+  @Input() list: Params[]
+  @Input() selectedIndex: number
+
+  @Output() select = new EventEmitter<number>()
+  @Output() CRUD = new EventEmitter<string>()
+
+  public filteredList: Params[]
+
+  public searchInput: string
+
+  public filterControl = new FormControl("")
+  public incremeter = 0
+
+  public iconList: { [id: string]: string } = {
+    "string": "format_quote",
+    "integer": "123",
+    "array": "data_array",
+    "float": "money",
+    "boolean": "question_mark",
+    "computed": "functions",
+    "alias": "type_specimen",
+    "binary": "looks_one",
+    "date": "today",
+    "datetime": "event",
+    "time": "access_time",
+    "text": "article",
+    "many2one": "call_merge",
+    "one2many": "call_split",
+    "many2many": "height"
+  }
+
+  constructor() {
+
+  }
+
+  ngOnInit(): void {
+    console.log("=============")
+    this.filteredList = this.list.sort((p1, p2) => p1.name.localeCompare(p2.name));
+    console.log(this.filteredList)
+    this.filterControl.valueChanges.subscribe(data => {
+      console.log("RTIO")
+      this.filteredList = this._filter(data)
+    })
+  }
+
+  ngOnChanges(): void {
+    console.log("----")
+    console.log(this.list)
+    this.filteredList = this._filter(this.filterControl.value)
+  }
+
+
+  private _filter(value: string): Params[] {
+    const filterValue = value.toLowerCase();
+    return this.list.filter(option => option.name.toLowerCase().includes(filterValue)).sort((p1, p2) => p1.name.localeCompare(p2.name));
+  }
+
+  onClickItem(index: number) {
+    this.select.emit(index)
+  }
+
+  createItem() {
+    this.list.push(new Param("new_param_" + (this.incremeter++)))
+    this.CRUD.emit("Creation of a new param")
+    this.filteredList = this._filter(this.filterControl.value)
+  }
+
+  deleteItem(index: number) {
+    let d = this.list.splice(index, 1)
+    this.CRUD.emit("deletion of " + d[0].name)
+    this.onClickItem(-1)
+    this.filteredList = this._filter(this.filterControl.value)
+  }
+
+}

src/app/in/controllers/_components/params-editor/_components/param-side-pane/_component/property-domain-component/_components/auto-complete/auto-complete.component.html

@@ -0,0 +1,9 @@
+<mat-form-field appearance="fill" class="max-width">
+    <mat-label>{{ label }}</mat-label>
+    <input matInput [formControl]="control" [matAutocomplete]="auto" [value]="value">
+    <mat-autocomplete #auto="matAutocomplete" (optionSelected)="onSelectionChange($event)">
+        <mat-option *ngFor="let option of filteredOptions | async" [value]="option">
+            {{ option }}
+        </mat-option>
+    </mat-autocomplete>
+</mat-form-field>

src/app/in/controllers/_components/params-editor/_components/param-side-pane/_component/property-domain-component/_components/auto-complete/auto-complete.component.ts

@@ -0,0 +1,43 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+import { FormControl } from '@angular/forms';
+import { Observable } from 'rxjs';
+import { map, startWith } from 'rxjs/operators';
+
+@Component({
+    selector: 'app-auto-complete',
+    templateUrl: './auto-complete.component.html',
+    styleUrls: ['./auto-complete.component.scss']
+})
+export class AutoCompleteComponent implements OnInit {
+
+    @Input() label: string;
+    @Input() options: string[];
+    @Input() value: any;
+    @Output() updateValue = new EventEmitter<string>();
+
+    control = new FormControl();
+    filteredOptions: Observable<string[]>;
+
+    constructor() { }
+
+    ngOnInit(): void {
+        this.filteredOptions = this.control.valueChanges.pipe(
+        startWith(''),
+        map(value => this.filter(value))
+        );
+
+        this.control.setValue(this.value);
+    }
+
+    private filter(value: string): string[] {
+        const filterValue = value.toLowerCase();
+
+        return Object.keys(this.options).filter(option => {
+        return option.toLowerCase().includes(filterValue);
+        });
+    }
+
+    public onSelectionChange(event: any) {
+        this.updateValue.emit(event.option.value);
+    }
+}