feat: #571 technology report - custom excel export

Author: Guido Quezada

src/app/modules/technology-report/components/technology-report-table/data.json

@@ -1,40 +1,74 @@
 [
   {
     "id": 1,
-    "name_technology": "Superman",
+    "name_technology": "Pascal",
     "users": [
       {
         "id": 1,
-        "email_user": "[email protected]",
+        "email_user": "[email protected]",
+        "time_spent": 30,
+        "projects": [
+          {
+            "id": 1,
+            "project_name": "Time tracker",
+            "time_spent": 15
+          },
+          {
+            "id": 2,
+            "project_name": "New Project",
+            "time_spent": 10
+          },
+          {
+            "id": 3,
+            "project_name": "Old Project",
+            "time_spent": 5
+          }
+        ]
+      },
+      {
+        "id": 2,
+        "email_user": "[email protected]",
+        "time_spent": 20,
+        "projects": [
+          {
+            "id": 1,
+            "project_name": "Time tracker",
+            "time_spent": 20
+          }
+        ]
+      },
+      {
+        "id": 3,
+        "email_user": "[email protected]",
         "time_spent": 10,
-        "project": [
+        "projects": [
           {
             "id": 1,
             "project_name": "Time tracker",
-            "time_spent": 8
+            "time_spent": 10
           }
         ]
       }
     ],
-    "time_spent": 10
+    "time_spent": 60
   },
   {
     "id": 2,
-    "name_technology": "Tor",
+    "name_technology": "Pascual",
     "users": [
       {
         "id": 1,
-        "email_user": "junito@gmail.com",
+        "email_user": "catgirl@gmail.com",
         "time_spent": 10,
-        "project": [
+        "projects": [
           {
             "id": 1,
             "project_name": "Time tracker",
-            "time_spent": 8
+            "time_spent": 10
           }
         ]
       }
     ],
     "time_spent": 10
   }
-]
+]

src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.html

@@ -9,8 +9,9 @@
     >
       <thead class="thead-blue">
         <tr class="d-flex">
-          <th class="none">Technology</th>
-          <th class="none">Time spend</th>
+          <th class="col md-col">Technology</th>
+          <th class="col md-col">Time spend</th>
+          <th class="none"></th>
         </tr>
       </thead>
       <app-loading-bar
@@ -19,10 +20,25 @@
       <tbody>
         <tr
           class="d-flex"
-          *ngFor="let data of technologies"
+          *ngFor="let tech of technologies"
         >
-          <td class="col md-col">{{ data.name_technology || '' }}</td>
-          <td class="col lg-col">{{ data.time_spent || ''}}</td>
+          <td class="col md-col">{{ tech.name_technology || '' }}</td>
+          <td class="col lg-col">{{ tech.time_spent || ''}}</td>
+          <td class="none">
+            <table>
+              <div *ngFor="let user of tech.users">
+                <tr
+                >
+                  <th>{{ user.email_user }}</th>
+                  <th>{{ user.time_spent || '' }}</th>
+                </tr>
+                <tr *ngFor="let project of user.projects">
+                  <td>{{ project.project_name }}</td>
+                  <td>{{ project.time_spent || '' }}</td>
+                </tr>
+              </div>
+            </table>
+          </td>
         </tr>
       </tbody>
     </table>

src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.spec.ts renamed to src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.spect.ts

@@ -53,25 +53,8 @@ describe('Reports Page', () => {
       fixture.detectChanges();
     }));
 
-    fit('component should be created', async () => {
+    it('component should be created', async () => {
       expect(component).toBeTruthy();
     });
-
-    // it('on success load time entries, the report should be populated', () => {
-    //   component.reportDataSource$.subscribe(ds => {
-    //     expect(ds.data).toEqual(state.reportDataSource.data);
-    //   });
-    // });
-
-    // it('after the component is initialized it should initialize the table', () => {
-    //   spyOn(component.dtTrigger, 'next');
-    //   component.ngAfterViewInit();
-
-    //   expect(component.dtTrigger.next).toHaveBeenCalled();
-    // });
-
-    afterEach(() => {
-      fixture.destroy();
-    });
   });
 });

src/app/modules/technology-report/components/technology-report-table/technology-report-table.component.ts

@@ -40,8 +40,57 @@ export class TechnologyReportTableComponent implements OnInit, OnDestroy, AfterV
             }
           }
         },
+        customize: (xlsx) => {
+          const sheet = xlsx.xl.worksheets['sheet1.xml'];
+          const sheetData = $('sheetData', sheet).clone();
+
+          $('sheetData', sheet).empty();
+          let rowCount = 1;
+
+          sheetData.children().each(function(index) {
+            if (index > 0) {
+              const row = $(this.outerHTML);
+
+              row.attr('r', rowCount);
+              let colCount = 1;
+
+              row.children().each(function() {
+                const cell = $(this);
+                let rc = cell.attr('r');
+                rc = rc.replace(/\d+$/, '') + rowCount;
+
+                cell.attr('r', rc);
+                if (colCount === 3) {
+                  cell.html('');
+                }
+                colCount++;
+
+              });
+              const rowa = row[0].outerHTML;
+              $('sheetData', sheet).append(rowa);
+              rowCount++;
+
+            } else {
+              const row = $(this.outerHTML);
+              let colCount = 1;
+
+              row.children().each(function() {
+                const cell = $(this);
+                if (colCount === 3) {
+                  cell.html('');
+                }
+                colCount++;
+
+              });
+              const rowa = row[0].outerHTML;
+              $('sheetData', sheet).append(rowa);
+              rowCount++;
+
+            }
+          });
+        },
         text: 'Excel',
-        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
+        filename: `technologies-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
       },
       {
         extend: 'csv',
@@ -55,7 +104,7 @@ export class TechnologyReportTableComponent implements OnInit, OnDestroy, AfterV
           }
         },
         text: 'CSV',
-        filename: `time-entries-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
+        filename: `technologies-${formatDate(new Date(), 'MM_dd_yyyy-HH_mm', 'en')}`
       }
     ],
     responsive: true