Merge pull request #7 from jogaec22/Dev-JE

excel to json data
leoriofrio · Jun 8, 2020 · a418016 · a418016
2 parents a647780 + fa90f02
commit a418016
Show file tree

Hide file tree

Showing 13 changed files with 243 additions and 59 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -43,6 +43,7 @@
     "ngx-ui-loader": "^9.1.1",
     "rxjs": "~6.5.4",
     "tslib": "^1.10.0",
+    "xlsx": "^0.16.2",
     "zone.js": "~0.10.2"
   },
   "devDependencies": {

diff --git a/src/app/configuration/client/client.component.html b/src/app/configuration/client/client.component.html
@@ -10,7 +10,8 @@
             <div class="content-body">
                 <app-project [gridColumns]="gridColumns" [data]="data" [enabledTitleOp] = "enabledTitle"
                 [allowExcelExportOp] = "allowExcelExport"
-                (exportExcel)= "onExportExcel($event)"></app-project>
+                (exportExcel)= "onExportExcel($event)"
+                (emitJsonData)="onJsonData($event)"></app-project>
             </div>
         </div>
     </div>

diff --git a/src/app/configuration/client/client.component.ts b/src/app/configuration/client/client.component.ts
@@ -15,16 +15,16 @@ const dataVal = require('./client.json');
   styleUrls: ['./client.component.scss']
 })
 export class ClientComponent implements OnInit {
-  @ViewChild(ProjectComponent, {static: true}) child: ProjectComponent;
-  
+  @ViewChild(ProjectComponent, { static: true }) child: ProjectComponent;
+
   public data = dataVal;
   public gridColumns = COLUMNS_CLIENT;
   public enabledTitle: boolean;
   public allowExcelExport: boolean;
 
   constructor(private excelExportService: ExcelExportService) {
 
-   }
+  }
 
   ngOnInit(): void {
     this.enabledTitle = true;
@@ -46,5 +46,8 @@ export class ClientComponent implements OnInit {
     }
   }
 
+  public onJsonData(jsonData) {
+    console.log('data de Cliente es', jsonData);
+  }
 
 }
diff --git a/src/app/configuration/colleges/colleges.component.html b/src/app/configuration/colleges/colleges.component.html
@@ -10,7 +10,8 @@
             <div class="content-body">
                 <app-project [gridColumns]="gridColumns" [data]="data" [enabledTitleOp] = "enabledTitle"
                 [allowExcelExportOp] = "allowExcelExport"
-                (exportExcel)= "onExportExcel($event)"></app-project>
+                (exportExcel)= "onExportExcel($event)"
+                (emitJsonData)="onJsonData($event)"></app-project>
             </div>
         </div>
     </div>

diff --git a/src/app/configuration/colleges/colleges.component.ts b/src/app/configuration/colleges/colleges.component.ts
@@ -44,4 +44,8 @@ export class CollegesComponent implements OnInit {
     }
   }
 
+  public onJsonData(jsonData){
+    console.log('data de Colleges es', jsonData);
+  }
+
 }
diff --git a/src/app/configuration/product/product.component.html b/src/app/configuration/product/product.component.html
@@ -10,7 +10,8 @@
             <div class="content-body">                
                 <app-project [gridColumns]="gridColumns" [data]="data" [enabledTitleOp] = "enabledTitle"
                 [allowExcelExportOp] = "allowExcelExport"  [defaultColDef] = "defaultColDefVal" 
-                (exportExcel)= "onExportExcel($event)"></app-project>
+                (exportExcel)= "onExportExcel($event)"
+                (emitJsonData)="onJsonData($event)"></app-project>
             </div>
         </div>
     </div>

diff --git a/src/app/configuration/product/product.component.ts b/src/app/configuration/product/product.component.ts
@@ -71,6 +71,8 @@ export class ProductComponent implements OnInit {
     }
   }
 
-
+  public onJsonData(jsonData){
+    console.log('data de Producto es', jsonData);
+  }
 
 }
diff --git a/src/app/shared/components/project/project.component.html b/src/app/shared/components/project/project.component.html
@@ -1,41 +1,32 @@
-<div >
+<div>
     <span class="title" *ngIf="enabledTitle">Titulo</span>
-        
+
     <div class="pr-4">
-        <button id="btnExportExcel" [disabled]="!uploadFile" *ngIf="allowExcelExport" class="button-title" (click)="exportAsXLSX()">
+        <button id="btnExportExcel" [disabled]="!uploadFile" *ngIf="allowExcelExport" class="button-title"
+            (click)="exportAsXLSX()">
             Exportar a Excel
         </button>
-        <button id="btnUploadFile" *ngIf="allowExcelExport"  class="button-title" (click)="changeView()">
+        <button id="btnUploadFile" *ngIf="allowExcelExport" class="button-title" (click)="changeView()">
             Cargar Archivo
         </button>
+
+        <div *ngIf="!uploadFile" class="complete-zone zone">            
+            <input #inputUploadFile type="file" (change)="changeFile($event)" placeholder="Upload file" accept=".xlsx">
+            <br>
+            <input type="button" value="upload" (click)='upload()' [disabled]="!file">
+        </div>
     </div>
 </div>
 
-
 <content>
-<app-data-import *ngIf="!uploadFile" [multiple]="true" [complete]="false" ></app-data-import>  
-    <ag-grid-angular *ngIf="uploadFile"
-        #agGrid
-        style="width: 100%; height: 670px;  box-sizing: border-box;" 
-        id="myGrid"
-        class="ag-theme-alpine px-4 pt-4 height-70"
-        [rowData]="data" 
-        [context]="context"
-        [columnDefs]="gridColumns"
-        [enableSorting]="true"
-        [enableFilter]="true"
-        [enableCellChangeFlash]="true"
-        [enableCellTextSelection]="true"
-        [defaultColDef]="defaultColDef"
-        [pinnedTopRowData]="pinnedTopRowData"
-        [pinnedBottomRowData]="pinnedBottomRowData"
-        [enterMovesDown]="true"
-        [enterMovesDownAfterEdit]="true"
-        [enableRangeSelection]="true"
-        [frameworkComponents]="frameworkComponents"
-        [processDataFromClipboard]="processDataFromClipboard"
-        (gridReady)="onGridReady($event)"
-         >
+    <!-- <app-data-import *ngIf="!uploadFile" [multiple]="true" [complete]="false"></app-data-import> -->
+    <ag-grid-angular *ngIf="uploadFile" #agGrid style="width: 100%; height: 670px;  box-sizing: border-box;" id="myGrid"
+        class="ag-theme-alpine px-4 pt-4 height-70" [rowData]="data" [context]="context" [columnDefs]="gridColumns"
+        [enableSorting]="true" [enableFilter]="true" [enableCellChangeFlash]="true" [enableCellTextSelection]="true"
+        [defaultColDef]="defaultColDef" [pinnedTopRowData]="pinnedTopRowData"
+        [pinnedBottomRowData]="pinnedBottomRowData" [enterMovesDown]="true" [enterMovesDownAfterEdit]="true"
+        [enableRangeSelection]="true" [frameworkComponents]="frameworkComponents"
+        [processDataFromClipboard]="processDataFromClipboard" (gridReady)="onGridReady($event)">
     </ag-grid-angular>
 
-</content>
+</content>
diff --git a/src/app/shared/components/project/project.component.scss b/src/app/shared/components/project/project.component.scss
@@ -105,4 +105,21 @@ div.ag-root .ag-cell-focus {
   -moz-user-select: text;
   -ms-user-select: text;
   user-select: text;
-}
+}
+
+$header-background-color: var(--header-background-color);
+.complete-zone {
+    width: 450px;
+    height: 200px;
+    border: dashed 1px #979797;
+    margin: 0px auto;
+    h3 {
+      font-size: 20px;
+      font-weight: 600;
+      color: #38424c;
+    }
+    label {
+      color: white;
+      background-color: $header-background-color;
+    }
+  }
-Original file line number
+Diff line change
@@ Expand Up / @@ -44,4 +44,8 @@ export class CollegesComponent implements OnInit { @@
         }
       }
+      public onJsonData(jsonData){
+        console.log('data de Colleges es', jsonData);
+      }
     }