document forms

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

@@ -0,0 +1,20 @@
+
+<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

@@ -0,0 +1,43 @@
+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

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

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

@@ -10,15 +10,8 @@
   </div>
 </div>
 <div class="values">
-  <div class="item" *ngFor="let asset of assets">
-    <file-ico [type]="asset.extension"></file-ico>
-    <a href="{{asset.links?.open}}" target="_blank">{{asset.name}}</a>
-    <ico ico="delete_24" (click)="removeValue(asset)" [size]="[24,24]"></ico>
-    <input type="text"  [value]="asset.name" (change)="setFile($event)"/>
-    <input type="text" />
-    <ico></ico>
-    <ico ico="done_24" (click)="setFile(asset)"></ico>
-    <pre>{{asset|json}}</pre>
+  <div *ngFor="let asset of assets">    
+    <field-document-meta [asset]="asset" (delete)="removeValue(asset)"></field-document-meta>
   </div>
   
 </div>

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

@@ -96,7 +96,4 @@ export class FieldDocumentMultipleComponent {
     });
   }
 
-  setFile(asset){
-    console.log(asset)
-  }
 }

src/app/_modules/widjet/drop-down/drop-down.component.scss

@@ -1,3 +1,6 @@
+:host{
+    cursor: pointer;
+}
 
 .invisible{
     display: none;
@@ -9,3 +12,4 @@
     display: inline-flex;
 }
 
+

src/app/_modules/widjet/drop-down/drop-down.component.ts

@@ -10,11 +10,17 @@ export class DropDownComponent {
   @Input() ico = 'drop_down_24';
   @Input() angle = [0,-180];
   @Input() visible = false;
+  @Input() order: {
+    on:boolean,
+    off:boolean
+  };
   @Input() target:HTMLElement;
 
   @Output() toggle =  new EventEmitter<boolean>()
 
   ngOnChanges(){
+    if (this.order?.on === true) this.visible = true;
+    if (this.order?.off === true) this.visible = false;
     this.setToggle()
   }
 

src/assets/css/_forms.scss

@@ -200,14 +200,22 @@ form-field-document{
   .values {
   
     .item {
-      height: 60px;
-      font-size: 20px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-top: 10px;
-      gap:8px;
-    
+      margin-top: $p;
+      .doc-item-header{
+        display: flex;
+        align-items: flex-start;
+        gap: $pxs;
+      }
+      .doc-item-form{
+        input{
+          margin-bottom: $pxs;
+        }
+        .doc-item-form-bar{
+          display: flex;
+          justify-content: flex-end;
+          gap:  $pxs;
+        }
+      }
     }
   }
 }

src/vniigaz-v2/css/_forms.scss

@@ -206,23 +206,28 @@ form-field-document{
   .values {
   
     .item {
-      height: 60px;
-      font-size: 20px;
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      margin-top: 10px;
-      gap:8px;
-      flex-wrap: wrap;
-      input{
-        flex-basis: 100%;
+      margin-top: $p;
+      .doc-item-header{
+        display: flex;
+        align-items: flex-start;
+        gap: $pxs;
+      }
+      .doc-item-form{
+        input{
+          margin-bottom: $pxs;
+        }
+        .doc-item-form-bar{
+          display: flex;
+          justify-content: flex-end;
+          gap:  $pxs;
+        }
       }
     }
   }
 }
 
 .field {
-  display: flex;
+
   flex-direction: column;
   width: 100%;
   margin: 0 0 24px;