form field value asset edit functionality

src/app/_modules/form-fields/types/document/field-document-meta/field-document-meta.component.html

@@ -1,20 +0,0 @@
-
-<div [formGroup]="formGroup" class="item">
-    <div class="doc-item-header">
-        <file-ico [type]="asset.extension"></file-ico>
-        <a href="{{asset.links?.open}}" target="_blank">{{asset.name}}</a>
-        <drop-down [target]="form" [order]="edit" ico="edit_24" [angle]="[0,0]" (toggle)="default()"></drop-down>
-        <ico ico="delete_24" (click)="del()" [size]="[24,24]"></ico>
-    </div>
-
-    <div #form class="doc-item-form">
-        <label for="name" class="caption">Название документа</label>
-        <input type="text" name="name" formControlName="name" />
-        <label for="description" class="caption">Описание документа</label>
-        <input type="text" name="description" formControlName="description"  />
-        <div class="doc-item-form-bar">
-            <ico iso (click)="close()"></ico>
-            <ico ico="done_24" (click)="setFile(asset)"></ico>
-        </div>
-    </div>
-</div>

src/app/_modules/form-fields/types/document/field-document-meta/field-document-meta.component.ts

@@ -1,43 +0,0 @@
-import { Component, EventEmitter, Input, Output } from '@angular/core';
-import {FormGroup, FormControl} from "@angular/forms";
-
-@Component({
-  selector: 'field-document-meta',
-  templateUrl: './field-document-meta.component.html',
-  styleUrls: ['./field-document-meta.component.scss']
-})
-export class FieldDocumentMetaComponent {
-
-  @Input() asset: any;
-  @Output() delete = new EventEmitter;
-  
-  public formGroup: FormGroup;
-  public edit:any;
-
-
-  ngOnInit(){
-    console.log(this.asset)
-    this.default()
-  }
-
-  default(){
-    this.formGroup = new FormGroup({
-      name: new FormControl(this.asset.name),
-      description: new FormControl(this.asset.description),
-    });
-  }
-
-  setFile(asset){
-    console.log(this.asset, this.formGroup.value)
-    this.edit = {off:true};
-  }
-
-  close(){
-    this.edit = {off:true};
-  }
-  
-  del(){
-    this.delete.emit(this.asset)
-  }
-  
-}

src/app/_modules/form-fields/types/document/form-field-document.module.ts

@@ -6,7 +6,7 @@ import {FieldDocumentReadonlyComponent} from "@app/_modules/form-fields/types/do
 import {FieldDocumentSingleComponent} from "@app/_modules/form-fields/types/document/single/field-document-single.component";
 import {FieldDocumentMultipleComponent} from "@app/_modules/form-fields/types/document/multiple/field-document-multiple.component";
 import { WidjetModule } from '@app/_modules/widjet/widjet.module';
-import { FieldDocumentMetaComponent } from './field-document-meta/field-document-meta.component';
+import {FieldDocumentValueComponent} from "@app/_modules/form-fields/types/document/value/field-document-value.component";
 
 @NgModule({
   imports: [
@@ -19,7 +19,8 @@ import { FieldDocumentMetaComponent } from './field-document-meta/field-document
     FieldDocumentReadonlyComponent,
     FieldDocumentSingleComponent,
     FieldDocumentMultipleComponent,
-    FieldDocumentMetaComponent
+    FieldDocumentValueComponent,
+    FieldDocumentValueComponent
   ],
   exports: [
     FormFieldDocumentComponent

src/app/_modules/form-fields/types/document/multiple/field-document-multiple.component.html

@@ -1,6 +1,6 @@
 <div class="area" [class.hover]="dragOver">
   <input #fileInput type="file" [id]="field.name" (change)="onFileInput($event)" multiple="multiple" />
-  <p>Перетащите сюда или <a (click)="fileInput.click()">выберите файлы</a> 
+  <p>Перетащите сюда или <a (click)="fileInput.click()">выберите файлы</a>
     в формате PDF, XLS, DOC, JPG, PPTX
     <!-- общим объемом не более 10 Мбайт.-->
   </p>
@@ -10,8 +10,5 @@
   </div>
 </div>
 <div class="values">
-  <div *ngFor="let asset of assets">    
-    <field-document-meta [asset]="asset" (delete)="removeValue(asset)"></field-document-meta>
-  </div>
-  
+  <field-document-value *ngFor="let asset of assets" [asset]="asset" (delete)="removeValue(asset)"></field-document-value>
 </div>

src/app/_modules/form-fields/types/document/single/field-document-single.component.html

@@ -1,7 +1,7 @@
 <div class="area" [class.hover]="dragOver">
   <input #fileInput type="file" accept="application/*" [id]="field.name" (change)="onFileInput($event)" />
-  <p>Перетащите сюда или 
-    <a (click)="fileInput.click()">выберите файл</a> 
+  <p>Перетащите сюда или
+    <a (click)="fileInput.click()">выберите файл</a>
     в формате PDF, XLS, DOC, JPG, PPTX<!-- общим объемом не более 10 Мбайт.-->
   </p>
   <div class="indicator" *ngIf="upload.file">
@@ -10,9 +10,5 @@
   </div>
 </div>
 <div class="values" *ngIf="asset">
-  <div class="item">
-    <file-ico [type]="asset.extension"></file-ico>
-    <a href="{{asset.links?.open}}" target="_blank">{{asset.name}}</a>
-    <button type="button" class="btn clear trash" (click)="clear()"></button>
-  </div>
-</div>
+  <field-document-value [asset]="asset" (delete)="clear()"></field-document-value>
+</div>

src/app/_modules/form-fields/types/document/value/field-document-value.component.html

@@ -0,0 +1,22 @@
+<div class="item">
+    <div class="doc-item-header">
+      <file-ico [type]="asset.extension"></file-ico>
+      <div class="info">
+        <div class="name"><a href="{{asset.links?.open}}" target="_blank">{{asset.name}}</a></div>
+        <div class="description">{{asset.description}}</div>
+      </div>
+      <drop-down [target]="form" [order]="edit" ico="edit_24" [angle]="[0,0]" (toggle)="default()"></drop-down>
+      <ico ico="delete_24" (click)="del()" [size]="[24,24]"></ico>
+    </div>
+
+    <div [formGroup]="formGroup" #form class="doc-item-form">
+        <label for="name" class="caption">Название документа</label>
+        <input id="name" type="text" name="name" formControlName="name" />
+        <label for="description" class="caption">Описание документа</label>
+        <input id="description" type="text" name="description" formControlName="description"  />
+        <div class="doc-item-form-bar">
+            <ico iso (click)="close()"></ico>
+            <ico ico="done_24" style="background-color: #eaeaea" (click)="update()"></ico>
+        </div>
+    </div>
+</div>

src/app/_modules/form-fields/types/document/value/field-document-value.component.ts

@@ -0,0 +1,47 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import {FormGroup, FormControl} from "@angular/forms";
+import {AssetsService} from "@app/_services";
+
+@Component({
+  selector: 'field-document-value',
+  templateUrl: 'field-document-value.component.html',
+  styleUrls: ['field-document-value.component.scss']
+})
+export class FieldDocumentValueComponent {
+  @Input() asset: any;
+  @Output() delete = new EventEmitter;
+  public formGroup: FormGroup;
+  public edit:any;
+
+
+  constructor(private assetsService: AssetsService) {
+  }
+
+
+  ngOnInit(){
+    this.default();
+  }
+
+  default() {
+    this.formGroup = new FormGroup({
+      name: new FormControl(this.asset.name),
+      description: new FormControl(this.asset.description)
+    });
+  }
+
+  update() {
+    this.assetsService.update(this.asset.id, this.formGroup.value).subscribe(res => {
+      this.asset = res.data;
+      this.edit = {off:true};
+    });
+  }
+
+  close(){
+    this.edit = {off:true};
+  }
+
+  del(){
+    this.delete.emit(this.asset)
+  }
+
+}

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

@@ -5,7 +5,6 @@ import {PagesService} from "@app/_services/pages.service";
 import {ListsService} from "@app/_services";
 import {Title} from "@angular/platform-browser";
 
-
 @Component({
   templateUrl: 'page.component.html',
   styleUrls: ['page.component.scss']

src/app/_modules/widjet/swiper-gallery/swiper-gallery.component.ts

@@ -13,7 +13,7 @@ export class SwiperGalleryComponent {
   @Input() start = 0;
   @Input() closing:boolean;
 
-  @Output() event = new EventEmitter<string>() 
+  @Output() event = new EventEmitter<string>()
 
   @ViewChild('swiper', { static: false }) swiper?: SwiperComponent;
   @ViewChild('thumb', { static: false }) thumb?: SwiperComponent;
@@ -22,7 +22,7 @@ export class SwiperGalleryComponent {
   handleKeyDown(event: KeyboardEvent) {
   if (event.key === 'Escape') this.event.emit('close')
 }
-  
+
   public active:number;
   public single: boolean;
 
@@ -44,8 +44,8 @@ export class SwiperGalleryComponent {
     freeMode: true,
     watchSlidesProgress: true,
   }
-  
-  
+
+
   ngOnInit(){
     this.active = this.start;
     this.single = this.items.length === 1;

src/app/_services/assets.service.ts

@@ -8,6 +8,10 @@ export class AssetsService {
   constructor(private http: HttpClient) {
   }
 
+  update(id: string, data: any): Observable<any> {
+    return this.http.put(`${environment.apiUrl}/api/assets/${id}`, data);
+  }
+
   upload(file: any, params?: any): Observable<any> {
     let formData = new FormData();
     formData.append('file', file);

src/environments/environment.ts

@@ -6,7 +6,7 @@ export const environment = {
   production: false,
   apiUrl: 'http://api.nircms.lc',
   clientId: 2,
-  clientSecret: 'SoQdwJzNSVfFd9Bqa4wAEYxCTxzdvKd5PJZIlGqo',
+  clientSecret: 'gVk3jjKq6rWWM52025xgXlw2XGW1UACowyMIyhRR',
   project: null,
   defaultLocale: 'ru'
 };