Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » Angular » Gestion de diccionarios con angular

Angular - Gestion de diccionarios con angular

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 4
Ha aumentado su posición en 4 puestos en Angular (en relación al último mes)
Gráfica de Angular

Gestion de diccionarios con angular

Publicado por ibai (2 intervenciones) el 28/01/2020 16:00:33
Buenos días, espero que me puedan ayudar en la creación de una pantalla para mi empresa. Yo nunca he trabajado con angular y necesitamos algo demasiado dificil para un junior. Pero como nuestro frontend se fue es lo que toca.

Estamos en un proyecto de anonimización de documentos y tengo que crear una pantalla para los diccionarios.

Los diccionarios se basan en lo siguiente:

1
2
3
4
5
6
7
8
9
10
dictionary "one":
	id = autoincrement
	name = one
	term = Smith			  replacement   = personX
 
dictionary "two":
	id = autoincrement
	name = two
	term_1 = google			replacement_1 = bird
	term_2 = tom	                replacement_2 = guy

Así debería de poder introducir tantos terminos como yo quiera.
Esto es para que cuando nuestro programa lea los terminos, se sustituyan por el valor y no se vea el nombre de la persona, empresa o cualquier cosa.

Me sirve cualquier codigo que pueda asemejarse o tutorial que sepan, o explicacion sobre como deberia de enfocar la creacion del proyecto

Estoy con angular , agradecería mucho que me ayudaran ya que yo soy junior y nunca trabaje con nada de esto...Un saludo y gracias
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
sin imagen de perfil
Val: 4
Ha aumentado su posición en 4 puestos en Angular (en relación al último mes)
Gráfica de Angular

Gestion de diccionarios con angular

Publicado por ibai (2 intervenciones) el 31/01/2020 18:58:00
Ahora mismo esto es lo que tengo, puedo crear diccionarios pero necesito añadirle los terminos que quiera a cada diccionario.


[img]/usr/tmp/5e3468fa9465c-dicty.png[/img]
[img]/usr/tmp/5e3468fe2d40f-dialogdicty.png[/img]

dictionary.component.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
import { Component, OnInit } from '@angular/core';
 
import { AuthService } from '../../auth.service';
import { Router } from '@angular/router';
import { FormArray, FormBuilder, FormGroup, Validators } from '@angular/forms';
 
import { SelectionModel } from '@angular/cdk/collections';
import { DataSource } from '@angular/cdk/collections';
import { MatTableDataSource } from '@angular/material';
import { MatDialog, MatDialogConfig } from "@angular/material";
 
import { GetDictionaryModel } from './dictionarymodel';
import { DialogDictionaryComponent } from '../dialog-dictionary/dialog-dictionary.component';
 
@Component({
  selector: 'app-dictionary',
  templateUrl: './dictionary.component.html',
  styleUrls: ['./dictionary.component.scss']
})
export class DictionaryComponent implements OnInit {
 
  displayedColumns  = ["select", "name" , "type", "activecheck"];
  myDataArray: GetDictionaryModel[] = [];
  dataSource = new MatTableDataSource<GetDictionaryModel>();
  selection = new SelectionModel<GetDictionaryModel>(true, []);
 
  constructor(private dialog: MatDialog, private fb: FormBuilder, private router: Router, private authService: AuthService) {
 
  }
 
 
  isAllSelected() {
    const numSelected = this.selection.selected.length;
    const numRows = this.dataSource.data.length;
    return numSelected === numRows;
  }
  masterToggle() {
    // if there is a selection then clear that selection
    if (this.isAllSelected()) {
      this.selection.clear();
    } else {
      this.isAllSelected() ?
        this.selection.clear() :
        this.dataSource.data.forEach(row => this.selection.select(row));
    }
  }
  editSelectRow(){
    if(this.selection.selected.length==1){
 
      const dialogConfig = new MatDialogConfig();
 
      dialogConfig.disableClose = true;
      dialogConfig.autoFocus = true;
      dialogConfig.data=this.selection.selected[0];
      this.dialog.open(DialogDictionaryComponent, dialogConfig);
      const dialogRef = this.dialog.open(DialogDictionaryComponent, dialogConfig);
 
      dialogRef.afterClosed().subscribe(data => {
 
          if(data){
            this.editRowData(data);
          }
          this.dialog.closeAll();
          this.selection = new SelectionModel<GetDictionaryModel>(true, []);
      });
 
    }else{
      alert('Solo se puede editar una fila, marque solo una fila para editarla');
    }
  }
 
 
  removeSelectedRows() {
 
    this.selection.selected.forEach(item => {
      let index: number = this.dataSource.data.findIndex(d => d === item);
      console.log(this.dataSource.data.findIndex(d => d === item));
      this.dataSource.data.splice(index,1)
      this.dataSource = new MatTableDataSource<GetDictionaryModel>(this.dataSource.data);
 
    });
    this.selection = new SelectionModel<GetDictionaryModel>(true, []);
 
  }
  // Composite dialog
  openDialog() {
 
    const DialogConfig = new MatDialogConfig();
 
    DialogConfig.disableClose = true;
    DialogConfig.autoFocus = true;
 
    this.dialog.open(DialogDictionaryComponent, DialogConfig);
    const dialogRef = this.dialog.open(DialogDictionaryComponent, DialogConfig);
 
    dialogRef.afterClosed().subscribe(data => {
      if(data){
        this.addRowData(data);
      }
      this.dialog.closeAll();
    });
  }
 
  editRowData(row_obj){
    let index: number = this.dataSource.data.findIndex(d => d === this.selection.selected[0]);
 
 
   //this.dataSource = new MatTableDataSource<getrefactormodel>(this.dataSource.data);
    this.dataSource.data[index]=row_obj;
 
 
    this.dataSource._updateChangeSubscription();
  }
 
  addRowData(row_obj){
 
    this.dataSource.data.push(row_obj);
 
    this.dataSource._updateChangeSubscription();
 
  }
 
 
  ngOnInit() {
 
    this.authService.getdictionary().subscribe((res : GetDictionaryModel[])=>{
      this.myDataArray = res;
      this.dataSource = new MatTableDataSource();
      this.dataSource.data = this.myDataArray;
    });
 
  }
  submitDictionary(){
    this.authService.dictionary(this.dataSource.data)
          .subscribe(res => {
            this.router.navigate(['dictionary']);
            location.reload();
          }, (err) => {
            console.log(err);
            alert(err.error);
          });
  }
 
 
}
dictionary.component.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<div class="example-container mat-elevation-z8">
    <div class="example-loading-shade"
         *ngIf="isLoadingResults">
      <mat-spinner *ngIf="isLoadingResults"></mat-spinner>
    </div>
    <mat-card class="example-card">
        <mat-card class="example-card">
            <button mat-raised-button color="primary" (click)="openDialog()">
                Añadir diccionario
            </button>
            <button mat-raised-button color="primary" (click)="removeSelectedRows()">
                Remove
            </button>
            <button mat-raised-button color="primary" (click)="editSelectRow()">
                Edit
            </button>
 
              <mat-table [dataSource]="dataSource" matSort>
 
                  <!-- Checkbox Column -->
                  <ng-container matColumnDef="select">
                    <mat-header-cell *matHeaderCellDef>
                      <mat-checkbox (change)="$event ? masterToggle() : null"
                        [checked]="selection.hasValue() && isAllSelected()"
                        [indeterminate]="selection.hasValue() && !isAllSelected()">
                      </mat-checkbox>
                    </mat-header-cell>
                    <mat-cell *matCellDef="let row">
                      <mat-checkbox (click)="$event.stopPropagation()"
                        (change)="$event ? selection.toggle(row) : null"
                        [checked]="selection.isSelected(row)">
                      </mat-checkbox>
                    </mat-cell>
                  </ng-container>
 
                  <!-- Columna id -->
 <!--                  <ng-container matColumnDef="id">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> id</mat-header-cell>
                    <mat-cell *matCellDef="let row"> {{row.id}} </mat-cell>
                  </ng-container>   -->
                  <!-- Columna Name -->
                  <ng-container matColumnDef="name">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> name</mat-header-cell>
                        <mat-cell *matCellDef="let row"> {{row.name}} </mat-cell>
                  </ng-container>
                  <!-- Columna tipoDiccionario -->
                  <ng-container matColumnDef="type">
                    <mat-header-cell *matHeaderCellDef mat-sort-header> Tipo diccionario</mat-header-cell>
                    <mat-cell *matCellDef="let row">
                      <!-- {{row.type == 'T' ? 'Text' : 'Expression'}} -->
                     {{row.type == 'Composite' ? 'Composite' : (row.type == 'Terms' ? 'Identificador' : 'Sustituto') }}
                  </mat-cell>
                </ng-container>
                  <!-- Columna clave-->
    <!--                <ng-container matColumnDef="clave">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> clave </mat-header-cell>
                <mat-cell *matCellDef="let row"> {{row.clave}} </mat-cell>
                  </ng-container> -->
 
                  <!-- Columna valor -->
    <!--                <ng-container matColumnDef="valor">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> valor</mat-header-cell>
                        <mat-cell *matCellDef="let row"> {{row.valor}} </mat-cell>
                  </ng-container> -->
 
                    <!-- Columna Activo -->
                     <ng-container matColumnDef="activecheck">
                        <mat-header-cell *matHeaderCellDef mat-sort-header> Activa </mat-header-cell>
                        <mat-cell *matCellDef="let row"> {{row.activecheck}} </mat-cell>
                  </ng-container>
 
 
                <mat-header-row *matHeaderRowDef="displayedColumns" class="encabezado"></mat-header-row>
                <mat-row *matRowDef="let row; columns: displayedColumns;"></mat-row>
              </mat-table>
 
        <div class="button-row">
          <button (click)="submitDictionary()"  mat-flat-button color="primary">Enviar</button>
        </div>
      </mat-card>
    </mat-card>
  </div>

Y la ventana emergente para crear los diccionarios:

dialog.dictionary.ts
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
import { Component, OnInit ,Inject, Optional} from '@angular/core';
 
import { MatDialogRef,MAT_DIALOG_DATA } from "@angular/material";
import {FormControl,FormArray, FormBuilder, FormGroup, Validators} from '@angular/forms';
import { MatDialog, MatDialogConfig } from "@angular/material";
import { MatTableDataSource } from '@angular/material';
 
import { opt } from './doctypemodel';
import { Router } from '@angular/router';
 
import{ GetDictionaryModel } from "../dictionary/dictionarymodel";
import { AuthService } from '../../auth.service';
 
@Component({
  selector: 'app-dialog-dictionary',
  templateUrl: './dialog-dictionary.component.html',
  styleUrls: ['./dialog-dictionary.component.scss']
})
export class DialogDictionaryComponent implements OnInit {
 
  valueTipDoc:string;
  form: FormGroup;
  optPath: opt[]=[];
  dictyByDoc: GetDictionaryModel[]=[];
  arrayPath: GetDictionaryModel[]=[];
  dataSource = new MatTableDataSource<GetDictionaryModel>();
  dictyForm: FormGroup;
 
  constructor(
    private dialog: MatDialog,
    private router: Router,
    private fb: FormBuilder,
    private authService: AuthService,
    private DialogRef: MatDialogRef<DialogDictionaryComponent>,
    @Optional() @Inject(MAT_DIALOG_DATA) public data1:GetDictionaryModel
 
    ) {
      this.authService.getdoctype().subscribe((res : opt[])=>{
        this.optPath = res;
 
      });
}
 
  ngOnInit() {
 
    this.form = this.fb.group({
      id:[''],
      name:['', Validators.required],
      activecheck:['' , Validators.required],
      type:['' , Validators.required],
    });
 
    this.form.get('activecheck').setValue('D');
 
    if(this.data1 != null){
 
      this.form.get('id').setValue(this.data1.id);
      this.form.get('name').setValue(this.data1.name);
      this.form.get('type').setValue(this.data1.type);
      this.valueTipDoc = "1";
      //this.form.get('valueTipDoc').setValue(this.data1.idPath[0].doctype);
      // this.form.get('clave').setValue(this.data1.clave);
      //this.form.get('valor').setValue(this.data1.valor);
      //$('#select2').val("1");
      //this.valueTipDoc=this.data1.idPath[0].doctype.toString();
 
      //$("#select2 option[value="+ this.data1.idPath[0].doctype.toString() +"]").select;
 
    }
  }
 
/*   loadPath(idDoc){
    this.authService.getDictyByDoc(idDoc)
    .subscribe((res : GetDictionaryModel[])=>{
      this.dictyByDoc = res;
      //$('#select1').append('<mat-option *ngFor="let mv of moveByDoc" [value]="mv.id">{{mv.originpath}}</mat-option>');
      //$('#select1').append('<mat-option >hola</mat-option>');
     // $("#select1").append(new Option("option text", "value"));
    });
  } */
 
  openDialog(){
    const DialogConfig = new MatDialogConfig();
 
    DialogConfig.disableClose = true;
    DialogConfig.autoFocus = true;
 
    this.dialog.open(DialogDictionaryComponent, DialogConfig);
    const dialogRef = this.dialog.open(DialogDictionaryComponent, DialogConfig);
 
    dialogRef.afterClosed().subscribe(data => {
      if(data){
        this.addRowData(data);
      }
      this.dialog.closeAll();
    });
 
  }
 
  addRowData(row_obj){
 
    this.dataSource.data.push(row_obj);
 
    this.dataSource._updateChangeSubscription();
 
  }
  save() {
    if(this.form.valid){
      this.DialogRef.close(this.form.value);
    }else{
      alert('Texto mal introducido');
    }
 
  }
 
    close() {
        this.DialogRef.close();
    }
//************************* Codigo para crear terminos de los diccionarios  ******************************/
    get dictyFormGroupItemsArray(): FormArray {
      return this.dictyForm.get('items') as FormArray;
    }
 
    createItem() {
      return this.fb.group({
        identificador: ['', Validators.required],
        sustituto: ['', Validators.required],
        id:[, Validators.required]
      });
    }
 
    addFila(){
 
      let arrayControl = this.dictyFormGroupItemsArray;
      let valuesform = arrayControl.getRawValue();
      let ulti = valuesform.length - 1;
      let valuesfila = valuesform[ulti];
      if((valuesfila.originpath) && (valuesfila.targetpath)){
        this.dictyFormGroupItemsArray.push(this.createItem());
 
      }else{
        alert("Introduzca valores en los campos");
      }
    }
 
/*       getget() {
        this.authService.getmove().subscribe((res: GetDictionaryModel[]) => {
        this.movemodel = res;
        for(let refac of this.movemodel){
            $('#originpath').val(refac.originpath);
            $('#targetpath').val(refac.targetpath);
            $('#name').val(refac.name);
            $('#add').click();
        }
      });
    alert(this.movemodel[0]);
  } */
/*
  removeItem(index) {
    this.moveFormGroupItemsArray.removeAt(index);
  } */
 
}
dialog.dictionary.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
<h1 mat-dialog-title>Gestión de diccionarios </h1>
<form [formGroup]="form"  (submit)="save()" >
    <mat-dialog-content >
 
        <div>
            <mat-form-field>
                <input matInput #input1 maxlength="300" minlength="2"
                    placeholder="Nombre"
                formControlName="name">
                <mat-hint align="end">{{input1.value?.length || 0}}/300</mat-hint>
                <mat-error>
                    Minimo 2 caracteres máximo 300
                </mat-error>
            </mat-form-field>
        </div>
        <div>
            <mat-form-field>
                <mat-label>Tipo de diccionario</mat-label>
                <mat-select  formControlName="type">
                  <mat-option value="composite">Compuesto</mat-option>
                  <mat-option value="terms">Identificadores</mat-option>
                  <mat-option value="replacement">Sustitutos</mat-option>
                </mat-select>
 
              </mat-form-field>
        </div>
 
        <mat-card class="example-card">
 
            <button mat-raised-button color="primary" (click)="openDialog()">
                Añadir términos
            </button>
 
        </mat-card>
 
<!--         <div>
            <mat-form-field>
            <input matInput #input1 maxlength="300" minlength="2"
                placeholder="clave"
                formControlName="clave">
                <mat-hint align="end">{{input1.value?.length || 0}}/300</mat-hint>
                <mat-error>
                    Minimo 2 caracteres máximo 300
                </mat-error>
                </mat-form-field>
            </div>
            <div>
                <mat-form-field>
                <input matInput #input1 maxlength="300" minlength="2"
                    placeholder="valor"
                    formControlName="valor">
                    <mat-hint align="end">{{input1.value?.length || 0}}/300</mat-hint>
                    <mat-error>
                    Minimo 2 caracteres máximo 300
                    </mat-error>
                </mat-form-field>
            </div> -->
 
    </mat-dialog-content>
 
    <mat-dialog-actions>
        <button type="button" class="mat-raised-button" (click)="close()">Close</button>
        <button  class="mat-raised-button mat-primary" type="submit" >Save</button>
    </mat-dialog-actions>
</form>
Lo que estoy intentando hacer es meter otro dialog dentro del dialog que me permita añadir los terminos en ese diccionario, nose si no se puede meter un dialog dentro de otro por medio de otro codigo del anterior sprrint que hicimos. Pero tampoco se si son compatibles

[img]/usr/tmp/5e346a6667200-rules.png[/img]

Gracias por la atención si llegaron hasta aqui, nose porque no se ven las imagenes...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar