lib-common-angular 0.0.9 → 0.0.11

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/crud-dialog1/crud-dialog1.component.scss

@@ -0,0 +1,47 @@
+// Estilos para el componente CRUD Dialog
+.field {
+  margin-bottom: 1rem;
+}
+
+.field label {
+  display: block;
+  margin-bottom: 0.5rem;
+  font-weight: 500;
+}
+
+.p-error {
+  color: #e24c4c;
+  font-size: 0.875rem;
+  margin-top: 0.25rem;
+  display: block;
+}
+
+// Estilo para campos inválidos
+.ng-invalid.ng-dirty {
+  border-color: #e24c4c;
+}
+
+// Estilo para el diálogo
+:host ::ng-deep .p-dialog {
+  border-radius: 12px;
+  overflow: hidden;
+  
+  .p-dialog-header {
+    background: var(--surface-ground);
+    border-top-left-radius: 12px;
+    border-top-right-radius: 12px;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  
+  .p-dialog-content {
+    padding: 2rem;
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+  }
+  
+  .p-dialog-footer {
+    border-bottom-left-radius: 12px;
+    border-bottom-right-radius: 12px;
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/crud-dialog1/crud-dialog1.component.ts

@@ -0,0 +1,199 @@
+import {
+  Component,
+  Input,
+  Output,
+  EventEmitter,
+  OnChanges,
+  SimpleChanges,
+  TemplateRef,
+} from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { ReactiveFormsModule, FormBuilder, FormGroup } from '@angular/forms';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { DynamicField } from '../../interfaces/dynamic-field.interface';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-crud-dialog1',
+  standalone: true,
+  imports: [CommonModule, ReactiveFormsModule, PrimegModule],
+  templateUrl: './crud-dialog1.component.html',
+  styleUrl: './crud-dialog1.component.scss',
+})
+export class CrudDialog1Component implements OnChanges {
+  onSubmit() {
+    throw new Error('Method not implemented.');
+  }
+  @Input() visible: boolean = false;
+  @Input() displayFields: DynamicField[] = [];
+  @Input() currentItem: Record<string, unknown> = {};
+  @Input() fieldSelectOptions: Record<string, { label: string; value: string | number | boolean }[]> = {};
+  @Input() isDefaultContent: boolean = true;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  @Input() body: TemplateRef<any> | undefined;
+
+  @Output() visibleChange = new EventEmitter<boolean>();
+  @Output() save = new EventEmitter<Record<string, unknown>>();
+  @Output() cancel = new EventEmitter<void>();
+  @Output() triggerSave = new EventEmitter<void>(); // Nuevo evento para templates personalizados
+
+  itemForm: FormGroup;
+
+  componente: ComponentesDTO = {
+    id: 18,
+    nombreComponente: 'lib-crud-dialog1',
+    version: '1.0',
+  };
+
+  /**
+   * Archivos seleccionados
+   */
+  selectedFiles: Record<string, File> = {};
+
+  constructor(private fb: FormBuilder) {
+    this.itemForm = this.fb.group({});
+  }
+
+  ngOnChanges(changes: SimpleChanges) {
+    if (changes['currentItem'] && this.currentItem) {
+      this.updateForm();
+    }
+  }
+
+  private updateForm() {
+    const formControls: Record<string, unknown> = {};
+
+    this.displayFields.forEach((field) => {
+      const initialValue = this.getInitialValue(field);
+      const currentValue = this.currentItem[field.key] ?? initialValue;
+
+      formControls[field.key] = [currentValue];
+    });
+
+    this.itemForm = this.fb.group(formControls);
+  }
+
+  /**
+   * Obtiene el valor inicial basado en el tipo de campo
+   */
+  private getInitialValue(
+    field: DynamicField,
+  ): string | number | boolean | null {
+    switch (field.type) {
+      case 'checkbox':
+        return false;
+      case 'number':
+        return 0;
+      case 'select':
+        return null;
+      case 'img':
+      case 'file':
+        return '';
+      default:
+        return '';
+    }
+  }
+
+  /**
+   * Maneja la selección de archivos desde p-fileUpload
+   */
+  onFileSelect(event: { files: File[] }, fieldKey: string): void {
+    const file = event.files[0] as File;
+
+    if (file) {
+      // Guardar archivo
+      this.selectedFiles[fieldKey] = file;
+      // Actualizar el formulario
+      this.itemForm.get(fieldKey)?.setValue(file.name);
+    }
+  }
+
+  /**
+   * Remueve un archivo seleccionado
+   */
+  onFileRemove(fieldKey: string): void {
+    delete this.selectedFiles[fieldKey];
+    this.itemForm.get(fieldKey)?.setValue('');
+  }
+
+  /**
+   * Obtiene el archivo seleccionado para un campo
+   */
+  getSelectedFile(fieldKey: string): File | null {
+    return this.selectedFiles[fieldKey] || null;
+  }
+
+  // ✅ Obtener opciones para campos de tipo select
+getSelectOptions(fieldKey: string): { label: string; value: string | number | boolean }[] {
+  return this.fieldSelectOptions[fieldKey] || [];
+}
+
+
+  hideDialog() {
+    this.visible = false;
+    this.visibleChange.emit(false);
+    this.cancel.emit();
+
+    // ✅ Limpiar archivos seleccionados
+    this.selectedFiles = {};
+  }
+
+  saveItem() {
+    // Si hay un template personalizado, delegar el guardado al template
+    if (this.body) {
+      this.triggerSave.emit();
+      return;
+    }
+
+    // Lógica original para formularios por defecto
+    const formValue = this.itemForm.value;
+
+    // ✅ Preservar el ID si existe (para edición)
+    if (this.currentItem['id']) {
+      formValue['id'] = this.currentItem['id'];
+    }
+
+// Procesar archivos seleccionados antes de guardar
+/**
+ * Si es imagen → crea URL temporal (Blob) para vista previa.
+ * Si es PDF/Excel → guarda nombre, pero conserva el File real en selectedFiles.
+ */
+    Object.entries(this.selectedFiles).forEach(([key, file]) => {
+      if (!file) return;
+      formValue[key] = file.type.startsWith('image/')
+        ? URL.createObjectURL(file)
+        : file.name;
+    });
+
+    // ✅ Agregar archivos originales al payload para procesamiento posterior
+    if (Object.keys(this.selectedFiles).length > 0) {
+      formValue['_files'] = this.selectedFiles;
+    }
+
+    this.save.emit(formValue);
+    this.hideDialog();
+  }
+
+  onDialogHide() {
+    // ✅ Solo limpiar archivos y resetear estado interno sin emitir eventos
+    // Esto evita el bucle infinito con el two-way binding
+    this.selectedFiles = {};
+
+    // ✅ Solo emitir cancel si el diálogo se cerró sin guardar
+    if (this.visible) {
+      this.cancel.emit();
+    }
+  }
+
+  onVisibilityChange(visible: boolean) {
+    // ✅ Manejar el cambio de visibilidad desde PrimeNG
+    this.visible = visible;
+    this.visibleChange.emit(visible);
+
+    if (!visible) {
+      // ✅ Limpiar archivos cuando se cierra el diálogo
+      this.selectedFiles = {};
+      this.cancel.emit();
+    }
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/grid1/grid1.component.html

@@ -0,0 +1,95 @@
+<p-dataview 
+  #dv 
+  [value]="data" 
+  [layout]="layout"
+  [rows]="rows"
+  [paginator]="paginator"
+  [rowsPerPageOptions]="rowsPerPageOptions"
+  [showCurrentPageReport]="showCurrentPageReport"
+  currentPageReportTemplate="Mostrando {first} a {last} de {totalRecords} ítems"
+>
+  <ng-template #grid let-items>
+    @if (showDefaultGrid) {
+      <!-- Grid layout for displaying items -->
+    <div class="grid gap-4" style="grid-template-columns: repeat(auto-fill, minmax(288px, 1fr)); max-width: 100%;">
+      @for (item of items; track item['id']) {
+        <div 
+          [class]="'border rounded-lg p-4 shadow-sm hover:shadow-md transition-all duration-200 bg-white cursor-pointer ' + (isItemSelected(item) ? 'border-green-500 border-2 shadow-lg ring-2 ring-green-200' : 'border-gray-200')" 
+          style="max-width: 672px; justify-self: start;"
+          (click)="toggleItemSelection(item, { checked: !isItemSelected(item) })">
+          <!-- Contenido dinámico de cada card -->
+          <div class="flex flex-col gap-3 h-full">
+            @for (field of displayFields; track field.key) {
+              <div class="field-item">
+                @switch (field.type) {
+                  @case ('img') {
+                    <!-- Imagen -->
+                    <div class="w-full mb-3">
+                      <img 
+                        [src]="getImageUrl(field, item[field.key])" 
+                        [alt]="getImageAltText(field, item)"
+                        class="w-full h-48 object-cover rounded border" 
+                        style="aspect-ratio: 16/9;" />
+                    </div>
+                  }
+                  @case ('checkbox') {
+                    <!-- Campo booleano -->
+                    <div class="flex items-center gap-2 text-sm">
+                      <span class="font-medium text-gray-600">{{ field.label }}:</span>
+                      <span class="flex items-center gap-1">
+                        <i [class]="item[field.key] ? 'pi pi-check-circle text-green-500' : 'pi pi-times-circle text-red-500'"></i>
+                        <span>{{ item[field.key] ? 'Yes' : 'No' }}</span>
+                      </span>
+                    </div>
+                  }
+                  @case ('number') {
+                    <!-- Campo numérico -->
+                    <div class="flex items-center gap-2 text-sm">
+                      <span class="font-medium text-gray-600">{{ field.label }}:</span>
+                      <span>{{ formatDynamicFieldValue(field, item[field.key]) }}</span>
+                    </div>
+                  }
+                  @case ('select') {
+                    <!-- Campo select -->
+                    <div class="flex items-center gap-2 text-sm">
+                      <span class="font-medium text-gray-600">{{ field.label }}:</span>
+                      <span>{{ formatDynamicFieldValue(field, item[field.key]) }}</span>
+                    </div>
+                  }
+                  @default {
+                    <!-- Campo de texto -->
+                    <div class="flex items-center gap-2 text-sm">
+                      <span class="font-medium text-gray-600">{{ field.label }}:</span>
+                      <span>{{ formatDynamicFieldValue(field, item[field.key]) }}</span>
+                    </div>
+                  }
+                }
+              </div>
+            }
+            
+            <!-- Botones de acción -->
+            <div class="flex justify-between items-center mt-auto pt-3 border-t border-gray-100">
+              <!-- Botón de acciones unificado a la izquierda -->
+              <div class="flex gap-2 items-center">
+                <lib-button-actions-row1 
+                  [item]="item" 
+                  (edit)="onEditItem($event)"
+                  (click)="$event.stopPropagation()">
+                </lib-button-actions-row1>
+              </div>
+              
+              <!-- Checkbox de selección a la derecha -->
+              <p-checkbox 
+                [ngModel]="isItemSelected(item)"
+                (ngModelChange)="toggleItemSelection(item, { checked: $event })"
+                [binary]="true"
+                (click)="$event.stopPropagation()">
+              </p-checkbox>
+            </div>
+          </div>
+        </div>
+      }
+    </div>
+    }
+  </ng-template>
+</p-dataview>

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/grid1/grid1.component.scss

@@ -0,0 +1,40 @@
+/* Grid dinámico con anchos mínimos y máximos */
+.grid-container {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(280px, 320px));
+  gap: 1rem;
+  padding: 1rem;
+  justify-content: center;
+  width: 100%;
+}
+
+.product-card {
+  width: 100%;
+  min-width: 280px;
+  max-width: 320px;
+}
+
+/* Responsive para pantallas muy pequeñas */
+@media (max-width: 640px) {
+  .grid-container {
+    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+    padding: 0.5rem;
+    gap: 0.75rem;
+  }
+  
+  .product-card {
+    min-width: 250px;
+    max-width: none;
+  }
+}
+
+/* Para pantallas grandes, permitir más flexibilidad */
+@media (min-width: 1200px) {
+  .grid-container {
+    grid-template-columns: repeat(auto-fit, minmax(280px, 350px));
+  }
+  
+  .product-card {
+    max-width: 350px;
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/grid1/grid1.component.ts

@@ -0,0 +1,124 @@
+import { Component, Input, OnInit, Output, EventEmitter } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+import { DynamicField } from '../../interfaces/dynamic-field.interface';
+import { FieldType } from '@juliaosistem/core-dtos';
+import { DynamicFieldService } from '../../services/dynamic-field.service';
+import { ButtonActionsRow1Component } from '../../atoms/button-actions-row1/button-actions-row1.component';
+import { ComponentesDTO } from '@juliaosistem/core-dtos';
+
+@Component({
+  selector: 'lib-grid1',
+  standalone: true,
+  imports: [CommonModule, FormsModule, PrimegModule, ButtonActionsRow1Component],
+  templateUrl: './grid1.component.html',
+  styleUrl: './grid1.component.scss',
+})
+export class Grid1Component implements OnInit {
+  layout: 'list' | 'grid' = 'grid';
+
+  @Input() data: Record<string, unknown>[] = [];
+  @Input() selectedItems!: Record<string, unknown>[] | null;
+  @Output() selectedItemsChange = new EventEmitter<Record<string, unknown>[] | null>();
+  @Input() fieldTypeConfig: Record<string, FieldType> = {}; // Tipos por campo
+  @Input() fieldLabels: Record<string, string> = {};        // Etiquetas personalizadas
+  @Input() fieldOrder: string[] = [];                       // Orden de columnas
+  @Input() excludeFields: string[] = ['id'];                // Campos a excluir
+@Input() fieldSelectOptions: Record<string, { label: string; value: string | number | boolean }[]> = {};
+  @Input() displayFields: DynamicField[] = [];              // Campos para mostrar
+
+  @Input() showDefaultGrid: boolean = true;                 // Mostrar grid por defecto
+
+  // Propiedades del paginador
+  @Input() rows: number = 10;                               // Filas por página
+  @Input() paginator: boolean = true;                       // Habilitar paginador
+  @Input() rowsPerPageOptions: number[] = [10, 20, 30];     // Opciones de filas por página
+  @Input() showCurrentPageReport: boolean = true;           // Mostrar reporte de página
+
+  @Output() editItem = new EventEmitter<Record<string, unknown>>();
+  
+  fields: DynamicField[] = []; // Campos dinámicos generados
+
+  componente: ComponentesDTO = {
+    id: 19,
+    nombreComponente: 'lib-grid1',
+    version: '1.0'
+  };
+
+  constructor(
+    private dynamicFieldService: DynamicFieldService
+  ) {}
+
+  ngOnInit() {
+    this.initFields();
+
+      // Filtrar displayFields según excludeFields
+  if (this.displayFields?.length) {
+    this.displayFields = this.displayFields.filter(
+      f => !this.excludeFields.includes(f.key)
+    );
+  }
+  }
+
+  initFields() {
+    // Inicializar campos dinámicos si no se han generado y no se pasan desde el padre
+    if (this.fields.length === 0 && this.displayFields.length === 0) {
+      this.fields = this.dynamicFieldService.generateFieldsFromData({
+        data: this.data,
+        fieldTypeConfig: this.fieldTypeConfig,
+        fieldLabels: this.fieldLabels,
+        fieldOrder: this.fieldOrder,
+        excludeFields: this.excludeFields
+      });
+      this.displayFields = [...this.fields];
+    }
+  }
+
+  // ✅ Métodos de renderizado - delegan al servicio
+  formatDynamicFieldValue(field: DynamicField, value: unknown): string {
+    return this.dynamicFieldService.formatDynamicFieldValue(field, value);
+  }
+
+  getImageUrl(field: DynamicField, value: unknown): string {
+    return this.dynamicFieldService.getImageUrl(field, value);
+  }
+
+  getImageAltText(field: DynamicField, item: Record<string, unknown>): string {
+    return this.dynamicFieldService.getImageAltText(field, item);
+  }
+
+  // ✅ Eventos que se emiten al componente padre
+  onEditItem(item: Record<string, unknown>) {
+    this.editItem.emit(item);
+  }
+
+  // ✅ Métodos para manejo de selección
+  onSelectionChange(selectedItems: Record<string, unknown>[] | null) {
+    this.selectedItems = selectedItems;
+    this.selectedItemsChange.emit(selectedItems);
+  }
+
+  isItemSelected(item: Record<string, unknown>): boolean {
+    if (!this.selectedItems) return false;
+    return this.selectedItems.some(selected => selected['id'] === item['id']);
+  }
+
+  toggleItemSelection(item: Record<string, unknown>, event: { checked: boolean }) {
+    if (!this.selectedItems) {
+      this.selectedItems = [];
+    }
+
+    const isSelected = this.isItemSelected(item);
+    
+    if (event.checked && !isSelected) {
+      // Agregar item a la selección
+      this.selectedItems = [...this.selectedItems, item];
+    } else if (!event.checked && isSelected) {
+      // Remover item de la selección
+      this.selectedItems = this.selectedItems.filter(selected => selected['id'] !== item['id']);
+    }
+
+    this.selectedItemsChange.emit(this.selectedItems);
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/inflatable-customizer/customizer.component.html

@@ -0,0 +1,53 @@
+<div class="p-4 bg-white rounded-xl shadow-md space-y-4">
+
+  <!-- Selector de partes -->
+  <div class="space-y-2">
+    <label class="font-semibold">Selecciona la parte a colorear:</label>
+    <div class="grid grid-cols-4 gap-2">
+      @for (part of [].constructor(project.product.parts); track $index; let i = $index) {
+        <button type="button"
+                pButton
+                label="Parte {{i + 1}}"
+                class="w-full"
+                [class.p-button-info]="selectedPart === i"
+                (click)="selectPart(i)">
+        </button>
+      }
+    </div>
+  </div>
+
+  <!-- Select de colores -->
+  <div class="space-y-2">
+    <label class="font-semibold">Elige un color:</label>
+    <select [(ngModel)]="selectedColor" class="w-full border rounded-lg p-2">
+      @for (c of COLORS; track c.hex) {
+        <option [value]="c.hex">{{ c.name }}</option>
+      }
+    </select>
+    <button pButton type="button" label="Aplicar color" icon="pi pi-check" class="mt-2" (click)="applyColor()"></button>
+  </div>
+
+  <!-- Accesorios (usando checkbox nativo) -->
+  <div class="space-y-2">
+    <label class="font-semibold">Accesorios:</label>
+    @for (acc of ACCESSORIES; track acc.id) {
+      <div class="flex items-center gap-2">
+        <input type="checkbox"
+               [checked]="isAccessorySelected(acc)"
+               (change)="toggleAccessory(acc)"
+               id="{{acc.id}}">
+        <label for="{{acc.id}}">{{ acc.name }}</label>
+        <span class="ml-2 text-sm text-gray-500" *ngIf="acc.price > 0">+{{acc.price | currency:'COP':'symbol':'1.0-0'}}</span>
+      </div>
+    }
+  </div>
+
+  <!-- Total -->
+  <div class="p-3 bg-gray-100 rounded-lg flex justify-between items-center font-bold">
+    <span>Total</span>
+    <span>{{ project.totalPrice | currency:'COP':'symbol':'1.0-0' }}</span>
+  </div>
+
+  <!-- Guardar -->
+  <button pButton type="button" label="Guardar Personalización" class="w-full p-button-success" (click)="saveProject()"></button>
+</div>

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/inflatable-customizer/customizer.component.scss

@@ -0,0 +1,26 @@
+.color-option {
+  width: 38px;
+  height: 38px;
+  border-radius: 10px;
+  cursor: pointer;
+  transition: 0.2s;
+  border: 2px solid transparent;
+
+  &.active {
+    transform: scale(1.15);
+    border-color: #111;
+  }
+}
+
+.accessory-box {
+  border: 1px solid #ddd;
+  padding: 12px;
+  border-radius: 12px;
+  cursor: pointer;
+  transition: 0.25s;
+
+  &.selected {
+    background: #eef2ff;
+    border-color: #6366f1;
+  }
+}

package/projects/lib-common-angular/src/lib/componentes/shared/molecules/inflatable-customizer/customizer.component.ts

@@ -0,0 +1,104 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { CommonModule } from '@angular/common';
+import { FormsModule } from '@angular/forms';
+import { ButtonModule } from 'primeng/button';
+import { CheckboxModule } from 'primeng/checkbox';
+import { PrimegModule } from '../../../../modulos/primeg.module';
+
+// MODELOS
+export interface Inflatable {
+  id: number;
+  name: string;
+  parts: number; // cantidad de partes para colorear
+  basePrice: number;
+}
+
+export interface Accessory {
+  id: string;
+  name: string;
+  price: number;
+  requiresText?: boolean;
+  customText?: string;
+}
+
+export interface Project {
+  id: number;
+  product: Inflatable;
+  partColors: { [key: number]: string }; // índice de parte -> color
+  accessories: Accessory[];
+  totalPrice: number;
+}
+
+@Component({
+  selector: 'lib-customizer',
+  standalone: true,
+  imports: [CommonModule, FormsModule, PrimegModule, ButtonModule, CheckboxModule],
+  templateUrl: './customizer.component.html',
+  styleUrls: ['./customizer.component.scss']
+})
+export class CustomizerComponent {
+  @Input() project!: Project;
+  @Output() save = new EventEmitter<Project>();
+
+  selectedColor!: string;
+  selectedPart!: number;
+
+
+
+  ///datos de pruebas
+  COLORS = [
+    { name: 'Rojo Fuego', hex: '#EF4444' },
+    { name: 'Azul Cielo', hex: '#3B82F6' },
+    { name: 'Verde Lima', hex: '#84CC16' },
+    { name: 'Amarillo Sol', hex: '#EAB308' },
+    { name: 'Morado Real', hex: '#A855F7' },
+    { name: 'Naranja Vivo', hex: '#F97316' },
+    { name: 'Rosa Chicle', hex: '#EC4899' },
+    { name: 'Negro Clásico', hex: '#1F2937' },
+  ];
+
+  ///datos de pruebas
+
+  ACCESSORIES: Accessory[] = [
+    { id: 'malla_puerta', name: 'Malla en puerta', price: 50000 },
+    { id: 'mallas_laterales', name: 'Mallas laterales', price: 120000 },
+    { id: 'colchon_anterior', name: 'Colchón anterior', price: 350000 },
+    { id: 'cremallera_adicional', name: 'Cremallera adicional', price: 45000 },
+    { id: 'otro', name: 'Otros (Especificar)', price: 0, requiresText: true }
+  ];
+
+  selectPart(index: number) {
+    this.selectedPart = index;
+    this.selectedColor = this.project.partColors[index] || '';
+  }
+
+  applyColor() {
+    if (this.selectedPart != null && this.selectedColor) {
+      this.project.partColors[this.selectedPart] = this.selectedColor;
+      this.updatePrice();
+    }
+  }
+
+  toggleAccessory(acc: Accessory) {
+    const exists = this.project.accessories.find(a => a.id === acc.id);
+    if (exists) {
+      this.project.accessories = this.project.accessories.filter(a => a.id !== acc.id);
+    } else {
+      this.project.accessories.push({ ...acc });
+    }
+    this.updatePrice();
+  }
+
+  isAccessorySelected(acc: Accessory) {
+    return !!this.project.accessories.find(a => a.id === acc.id);
+  }
+
+  updatePrice() {
+    const accTotal = this.project.accessories.reduce((sum, a) => sum + a.price, 0);
+    this.project.totalPrice = this.project.product.basePrice + accTotal;
+  }
+
+  saveProject() {
+    this.save.emit(this.project);
+  }
+}