[Fleet Management] Remove exporter from toolbar (#111)

Author: IMinchev64

projects/fleet-management-grid/src/app/fleet-management-grid/fleet-management-grid.component.html

@@ -1,17 +1,15 @@
 <igx-grid class="main-grid" [data]="vehicleData$ | async" [isLoading]="isLoading" #grid height="100%" width="100%">
   <igx-grid-toolbar>
     <igx-grid-toolbar-title>Fleet Management</igx-grid-toolbar-title>
-            <igx-grid-toolbar-actions>
-                <button igxButton="flat" *ngIf="grid.sortingExpressions.length > 0"
-                  (buttonClick)="grid.sortingExpressions=[]">
-                  <igx-icon>clear</igx-icon>
-                  <label>Clear Sort</label>
-                </button>
-                <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
-                <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
-                <igx-grid-toolbar-exporter></igx-grid-toolbar-exporter>
-                <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
-            </igx-grid-toolbar-actions>
+    <igx-grid-toolbar-actions>
+      <button igxButton="flat" *ngIf="grid.sortingExpressions.length > 0" (buttonClick)="grid.sortingExpressions=[]">
+        <igx-icon>clear</igx-icon>
+        <label>Clear Sort</label>
+      </button>
+      <igx-grid-toolbar-hiding></igx-grid-toolbar-hiding>
+      <igx-grid-toolbar-pinning></igx-grid-toolbar-pinning>
+      <igx-grid-toolbar-advanced-filtering></igx-grid-toolbar-advanced-filtering>
+    </igx-grid-toolbar-actions>
   </igx-grid-toolbar>
 
   <igx-column field="vehicleId" header="Vehicle ID" [sortable]="true" width="9%"></igx-column>
@@ -36,7 +34,8 @@
   <igx-column field="locationCity" header="Location (City)" [sortable]="true" width="11%"></igx-column>
   <igx-column field="locationGps" header="Location (GPS)" width="14%">
     <ng-template igxCell let-cell="cell">
-      <a class="link-style" #coordinates href="#" (click)="showLocationOverlay($event, cell); $event.preventDefault();">{{ cell.value }}</a>
+      <a class="link-style" #coordinates href="#"
+        (click)="showLocationOverlay($event, cell); $event.preventDefault();">{{ cell.value }}</a>
     </ng-template>
   </igx-column>
 
@@ -53,15 +52,16 @@
             <div class="carousel-container">
               <igx-carousel #carousel>
                 <igx-slide *ngFor="let slide of getPathToCarImage(dataItem.vehicleId)">
-                    <div class="image-container">
-                        <img [src]="slide"/>
-                    </div>
+                  <div class="image-container">
+                    <img [src]="slide" />
+                  </div>
                 </igx-slide>
               </igx-carousel>
             </div>
 
             <div class="details-table">
-              <div class="detail-block-container" *ngFor="let categorySet of [VEHICLE_DETAILS.detailsCategories, VEHICLE_DETAILS.engineCategories]">
+              <div class="detail-block-container"
+                *ngFor="let categorySet of [VEHICLE_DETAILS.detailsCategories, VEHICLE_DETAILS.engineCategories]">
                 <div class="detail-category-container">
                   <div class="detail-item" *ngFor="let category of categorySet">
                     <span class="detail-category">{{ category.label }}: </span>
@@ -87,7 +87,8 @@
 
         <igx-tab-content>
           <div class="grid-container">
-            <ng-container *ngTemplateOutlet="tripHistory; context: { $implicit: dataService.findTripHistoryById(dataItem.vehicleId) }"></ng-container>
+            <ng-container
+              *ngTemplateOutlet="tripHistory; context: { $implicit: dataService.findTripHistoryById(dataItem.vehicleId) }"></ng-container>
           </div>
         </igx-tab-content>
       </igx-tab-item>
@@ -99,7 +100,8 @@
 
         <igx-tab-content>
           <div class="grid-container">
-            <ng-container *ngTemplateOutlet="maintenance; context: { $implicit: dataService.findMaintenanceDataById(dataItem.vehicleId)}"></ng-container>
+            <ng-container
+              *ngTemplateOutlet="maintenance; context: { $implicit: dataService.findMaintenanceDataById(dataItem.vehicleId)}"></ng-container>
           </div>
         </igx-tab-content>
       </igx-tab-item>
@@ -114,8 +116,9 @@
             <div class="chart-container pie-chart-container">
               <div class="chart-header">
                 <span class="chart-title">Costs per Type</span>
-                <igx-select #select class="chart-select" [value]="periods[dataItem.vehicleId]?.costPerTypePeriod || Period.YTD"
-                (selectionChanging)="onPeriodChange($event, 'costsPerType', dataItem.vehicleId)">
+                <igx-select #select class="chart-select"
+                  [value]="periods[dataItem.vehicleId]?.costPerTypePeriod || Period.YTD"
+                  (selectionChanging)="onPeriodChange($event, 'costsPerType', dataItem.vehicleId)">
                   <label igxLabel>Period</label>
                   <igx-select-item [value]="Period.YTD">YTD</igx-select-item>
                   <igx-select-item [value]="Period.ThreeMonths">Last 3 Months</igx-select-item>
@@ -124,27 +127,20 @@
                 </igx-select>
               </div>
               <div class="chart-content">
-                <igx-pie-chart
-                  name="chart"
-                  class="chart-canvas"
-                  #chart
-                  legendLabelMemberPath="category"
-                  labelMemberPath="summary"
-                  valueMemberPath="value"
-                  labelsPosition="OutsideEnd"
-                  radiusFactor="0.7"
+                <igx-pie-chart name="chart" class="chart-canvas" #chart legendLabelMemberPath="category"
+                  labelMemberPath="summary" valueMemberPath="value" labelsPosition="OutsideEnd" radiusFactor="0.7"
                   [dataSource]="dataService.findCostsPerTypeData(dataItem.vehicleId, periods[dataItem.vehicleId]?.costPerTypePeriod || Period.YTD)"
-                  actualLabelOuterColor="#ededed"
-                  >
+                  actualLabelOuterColor="#ededed">
                 </igx-pie-chart>
               </div>
             </div>
 
             <div class="chart-container area-chart-container">
               <div class="chart-header">
                 <span class="chart-title">Costs per Meter, per Quarter</span>
-                <igx-select #select class="chart-select" [value]="periods[dataItem.vehicleId]?.costPerMeterPeriod || Period.YTD"
-                (selectionChanging)="onPeriodChange($event, 'costsPerMeter', dataItem.vehicleId)">
+                <igx-select #select class="chart-select"
+                  [value]="periods[dataItem.vehicleId]?.costPerMeterPeriod || Period.YTD"
+                  (selectionChanging)="onPeriodChange($event, 'costsPerMeter', dataItem.vehicleId)">
                   <label igxLabel>Period</label>
                   <igx-select-item value="ytd">YTD</igx-select-item>
                   <igx-select-item value="'2023'">2023</igx-select-item>
@@ -154,31 +150,22 @@
                 </igx-select>
               </div>
               <div class="chart-content">
-                <igx-category-chart
-                  name="chart"
-                  class="chart-canvas"
+                <igx-category-chart name="chart" class="chart-canvas"
                   [dataSource]="dataService.findCostsPerMeterData(dataItem.vehicleId, periods[dataItem.vehicleId]?.costPerMeterPeriod || Period.YTD)"
-                  chartType="Area"
-                  isHorizontalZoomEnabled="false"
-                  isVerticalZoomEnabled="false"
-                  computedPlotAreaMarginMode="Series"
-                  xAxisLabelTextColor="#ededed"
-                  yAxisLabelTextColor="#ededed"
-                  yAxisInterval="20"
-                  yAxisMinimumValue="0"
-                  yAxisMaximumValue="80"
-                  yAxisLabelRightMargin="15"
-                  areaFillOpacity="100"
-                  >
+                  chartType="Area" isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false"
+                  computedPlotAreaMarginMode="Series" xAxisLabelTextColor="#ededed" yAxisLabelTextColor="#ededed"
+                  yAxisInterval="20" yAxisMinimumValue="0" yAxisMaximumValue="80" yAxisLabelRightMargin="15"
+                  areaFillOpacity="100">
                 </igx-category-chart>
               </div>
             </div>
 
             <div class="chart-container column-chart-container">
               <div class="chart-header">
                 <span class="chart-title">Fuel Costs per Month</span>
-                <igx-select #select class="chart-select" [value]="periods[dataItem.vehicleId]?.fuelCostPeriod || Period.YTD"
-                (selectionChanging)="onPeriodChange($event, 'fuelCosts', dataItem.vehicleId)">
+                <igx-select #select class="chart-select"
+                  [value]="periods[dataItem.vehicleId]?.fuelCostPeriod || Period.YTD"
+                  (selectionChanging)="onPeriodChange($event, 'fuelCosts', dataItem.vehicleId)">
                   <label igxLabel>Period</label>
                   <igx-select-item [value]="Period.YTD">YTD</igx-select-item>
                   <igx-select-item [value]="Period.ThreeMonths">Last 3 Months</igx-select-item>
@@ -187,22 +174,11 @@
                 </igx-select>
               </div>
               <div class="chart-content">
-                <igx-category-chart
-                  name="chart"
-                  class="column-chart"
-                  #chart
-                  chartType="Column"
+                <igx-category-chart name="chart" class="column-chart" #chart chartType="Column"
                   [dataSource]="dataService.getFuelCostsData(dataItem.vehicleId, periods[dataItem.vehicleId]?.fuelCostPeriod || Period.YTD)"
-                  yAxisTitle="Costs in USD"
-                  isHorizontalZoomEnabled="false"
-                  isVerticalZoomEnabled="false"
-                  xAxisLabelTextColor="#ededed"
-                  yAxisLabelTextColor="#ededed"
-                  yAxisTitleTextColor="#ededed"
-                  yAxisMinimumValue="0"
-                  xAxisMinimumGapSize="30"
-                  yAxisLabelRightMargin="7.5"
-                  >
+                  yAxisTitle="Costs in USD" isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false"
+                  xAxisLabelTextColor="#ededed" yAxisLabelTextColor="#ededed" yAxisTitleTextColor="#ededed"
+                  yAxisMinimumValue="0" xAxisMinimumGapSize="30" yAxisLabelRightMargin="7.5">
                 </igx-category-chart>
               </div>
             </div>
@@ -220,29 +196,13 @@
           <div class="content-wrapper">
             <div class="chart-content utilization-chart-container">
               <h6>Utilization per Month</h6>
-              <igx-legend
-                name="Legend"
-                #legend
-                orientation="Horizontal">
+              <igx-legend name="Legend" #legend orientation="Horizontal">
               </igx-legend>
-              <igx-category-chart
-                name="chart"
-                class="column-chart-two-series"
-                #chart
-                chartType="Column"
-                [dataSource]="dataService.findUtilizationDataById(dataItem.vehicleId)"
-                [legend]="legend"
-                yAxisTitle="Miles"
-                isHorizontalZoomEnabled="false"
-                isVerticalZoomEnabled="false"
-                xAxisLabelTextColor="#ededed"
-                yAxisLabelTextColor="#ededed"
-                yAxisTitleTextColor="#ededed"
-                yAxisMinimumValue="0"
-                yAxisInterval="200"
-                xAxisMinimumGapSize="20"
-                yAxisLabelRightMargin="7.5"
-                >
+              <igx-category-chart name="chart" class="column-chart-two-series" #chart chartType="Column"
+                [dataSource]="dataService.findUtilizationDataById(dataItem.vehicleId)" [legend]="legend"
+                yAxisTitle="Miles" isHorizontalZoomEnabled="false" isVerticalZoomEnabled="false"
+                xAxisLabelTextColor="#ededed" yAxisLabelTextColor="#ededed" yAxisTitleTextColor="#ededed"
+                yAxisMinimumValue="0" yAxisInterval="200" xAxisMinimumGapSize="20" yAxisLabelRightMargin="7.5">
               </igx-category-chart>
             </div>
           </div>
@@ -254,11 +214,13 @@ <h6>Utilization per Month</h6>
 
 <ng-template #tripHistory let-tripHistoryData>
   <igx-grid class="child-grid" [data]="tripHistoryData" height="null" width="100%">
-    <igx-column field="id" header="ID" width="5%" [cellStyles]="rightAlignedCellStyles" [headerStyles]="rightAlignedHeaderStyles"></igx-column>
+    <igx-column field="id" header="ID" width="5%" [cellStyles]="rightAlignedCellStyles"
+      [headerStyles]="rightAlignedHeaderStyles"></igx-column>
     <igx-column field="driverName" header="Driver" width="18%">
       <ng-template igxCell let-cell="cell">
         <igx-avatar shape="circle" size="small" [src]="getPathToDriverPhoto(cell)" class="driver-avatar"></igx-avatar>
-        <a class="status-value" #coordinates href="#" (click)="showDriverOverlay($event, cell); $event.preventDefault();">{{ cell.value }}</a>
+        <a class="status-value" #coordinates href="#"
+          (click)="showDriverOverlay($event, cell); $event.preventDefault();">{{ cell.value }}</a>
         <igx-badge class="driver-badge" type="success" *ngIf="cell.row.index === 0 && cell.row.data.end === 'N/A'">
           Current
         </igx-badge>
@@ -268,16 +230,21 @@ <h6>Utilization per Month</h6>
     <igx-column field="end" header="End" width="9%"></igx-column>
     <igx-column field="startLocation" header="Start Location" width="10%"></igx-column>
     <igx-column field="endLocation" header="End Location" width="10%"></igx-column>
-    <igx-column field="startMeter" header="Start Meter" width="9.5%" [cellStyles]="rightAlignedCellStyles" [headerStyles]="rightAlignedHeaderStyles"></igx-column>
-    <igx-column field="endMeter" header="End Meter" width="9.5%" [cellStyles]="rightAlignedCellStyles" [headerStyles]="rightAlignedHeaderStyles"></igx-column>
-    <igx-column field="distance" header="Distance" width="9%" [cellStyles]="rightAlignedCellStyles" [headerStyles]="rightAlignedHeaderStyles"></igx-column>
-    <igx-column field="totalTime" header="Total Time" width="9%" [cellStyles]="rightAlignedCellStyles" [headerStyles]="rightAlignedHeaderStyles"></igx-column>
+    <igx-column field="startMeter" header="Start Meter" width="9.5%" [cellStyles]="rightAlignedCellStyles"
+      [headerStyles]="rightAlignedHeaderStyles"></igx-column>
+    <igx-column field="endMeter" header="End Meter" width="9.5%" [cellStyles]="rightAlignedCellStyles"
+      [headerStyles]="rightAlignedHeaderStyles"></igx-column>
+    <igx-column field="distance" header="Distance" width="9%" [cellStyles]="rightAlignedCellStyles"
+      [headerStyles]="rightAlignedHeaderStyles"></igx-column>
+    <igx-column field="totalTime" header="Total Time" width="9%" [cellStyles]="rightAlignedCellStyles"
+      [headerStyles]="rightAlignedHeaderStyles"></igx-column>
   </igx-grid>
 </ng-template>
 
 <ng-template #maintenance let-maintenanceData>
   <igx-grid class="child-grid" [data]="maintenanceData" height="100%" width="100%">
-    <igx-column field="id" header="ID" width="5%" [cellStyles]="rightAlignedCellStyles" [headerStyles]="rightAlignedHeaderStyles"></igx-column>
+    <igx-column field="id" header="ID" width="5%" [cellStyles]="rightAlignedCellStyles"
+      [headerStyles]="rightAlignedHeaderStyles"></igx-column>
     <igx-column field="event" header="Event" width="23%"></igx-column>
     <igx-column field="date" header="Date" width="10%"></igx-column>
     <igx-column field="location" header="Location" width="10%"></igx-column>
@@ -304,13 +271,9 @@ <h6 class="overlay-title">{{ vehicleDetails.make }} {{ vehicleDetails.model }}</
       <span class="overlay-text">Mileage: {{ vehicleDetails.mileage }}</span>
     </igx-card-header>
     <igx-card-content class="overlay-location-content">
-      <igx-geographic-map #map [width]="'100%'" [height]="'100%'"
-        zoomable="false"
-        draggable="false"
-        [dataSource]="vehicleDetails.markerLocations"
-        latitudeMemberPath="latitude"
-        longitudeMemberPath="longitude">
-    </igx-geographic-map>
+      <igx-geographic-map #map [width]="'100%'" [height]="'100%'" zoomable="false" draggable="false"
+        [dataSource]="vehicleDetails.markerLocations" latitudeMemberPath="latitude" longitudeMemberPath="longitude">
+      </igx-geographic-map>
     </igx-card-content>
     <igx-card-actions class="overlay-location-actions">
       <button igxButton="flat" (click)="closeLocationOverlay()">Close</button>
@@ -344,4 +307,4 @@ <h6 class="overlay-title">{{ driverDetails.name }}</h6>
       <button igxButton="flat" (click)="closeDriverOverlay()">Close</button>
     </igx-card-actions>
   </igx-card>
-</div>
+</div>