Fixed some bugs

Author: Sapython

package-lock.json

@@ -13,61 +13,65 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~12.0.1",
-    "@angular/cdk": "^12.0.3",
-    "@angular/common": "~12.0.1",
-    "@angular/core": "~12.0.1",
+    "@angular/animations": "^12.0.5",
+    "@angular/cdk": "^12.2.8",
+    "@angular/common": "^12.0.5",
+    "@angular/core": "^12.0.5",
     "@angular/fire": "^6.1.5",
-    "@angular/forms": "~12.0.1",
-    "@angular/material": "^12.0.3",
-    "@angular/platform-browser": "~12.0.1",
-    "@angular/platform-browser-dynamic": "~12.0.1",
-    "@angular/router": "~12.0.1",
+    "@angular/forms": "^12.0.5",
+    "@angular/material": "^12.2.8",
+    "@angular/platform-browser": "^12.0.5",
+    "@angular/platform-browser-dynamic": "^12.0.5",
+    "@angular/router": "^12.0.5",
     "@capacitor/app": "1.0.0",
     "@capacitor/core": "3.0.0",
-    "@capacitor/filesystem": "^1.0.0",
+    "@capacitor/filesystem": "^1.0.3",
     "@capacitor/haptics": "1.0.0",
     "@capacitor/keyboard": "1.0.0",
-    "@capacitor/storage": "^1.0.0",
-    "@ionic/angular": "^5.5.2",
+    "@capacitor/storage": "^1.2.0",
+    "@ionic/angular": "^5.8.1",
     "@ionic/pwa-elements": "^3.0.2",
-    "angular-calendar": "^0.28.24",
+    "angular-calendar": "^0.28.28",
     "chart.js": "^2.9.3",
-    "firebase": "^8.6.3",
-    "ng2-charts": "^2.3.0",
+    "electron": "^13.5.1",
+    "firebase": "^8.10.0",
+    "moment": "^2.29.1",
+    "ng2-charts": "^2.4.3",
+    "ngx-electron": "^2.2.0",
     "rxjs": "~6.6.0",
-    "tslib": "^2.0.0",
+    "tslib": "^2.3.1",
     "zone.js": "~0.11.4"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "~12.0.1",
+    "@angular-devkit/build-angular": "^12.0.5",
     "@angular-eslint/builder": "~12.0.0",
     "@angular-eslint/eslint-plugin": "~12.0.0",
     "@angular-eslint/eslint-plugin-template": "~12.0.0",
     "@angular-eslint/template-parser": "~12.0.0",
-    "@angular/cli": "~12.0.1",
-    "@angular/compiler": "~12.0.1",
-    "@angular/compiler-cli": "~12.0.1",
-    "@angular/language-service": "~12.0.1",
+    "@angular/cli": "^12.0.5",
+    "@angular/compiler": "^12.0.5",
+    "@angular/compiler-cli": "^12.0.5",
+    "@angular/language-service": "^12.0.5",
     "@capacitor/cli": "3.0.0",
     "@ionic/angular-toolkit": "^4.0.0",
+    "@ionic/lab": "3.2.10",
     "@types/jasmine": "~3.6.0",
-    "@types/jasminewd2": "~2.0.3",
-    "@types/node": "^12.11.1",
+    "@types/jasminewd2": "^2.0.10",
+    "@types/node": "^12.20.27",
     "@typescript-eslint/eslint-plugin": "4.16.1",
     "@typescript-eslint/parser": "4.16.1",
-    "eslint": "^7.6.0",
+    "eslint": "^7.32.0",
     "eslint-plugin-import": "2.22.1",
     "eslint-plugin-jsdoc": "30.7.6",
     "eslint-plugin-prefer-arrow": "1.2.2",
     "jasmine-core": "~3.7.1",
     "jasmine-spec-reporter": "~5.0.0",
-    "karma": "~6.3.2",
+    "karma": "^6.3.4",
     "karma-chrome-launcher": "~3.1.0",
     "karma-coverage": "~2.0.3",
     "karma-coverage-istanbul-reporter": "~3.0.2",
     "karma-jasmine": "~4.0.0",
-    "karma-jasmine-html-reporter": "^1.5.0",
+    "karma-jasmine-html-reporter": "^1.7.0",
     "protractor": "~7.0.0",
     "ts-node": "~8.3.0",
     "typescript": "~4.2.4"

package.json

@@ -149,11 +149,6 @@ export class AllNotificationsComponent implements OnInit {
     this.selectedNotificationSubtitle=date
     this.selectedNotificationBody=body
     this.selectedNotificationTags=tags;
-    console.log(this.selectedNotificationTitle)
-    console.log(this.selectedNotificationBody)
-    console.log(this.selectedNotificationSubtitle)
-    console.log(this.selectedNotificationTags)
-
   }
   closeNotification(){
     var card = document.getElementById("hiddenInfoCard") as HTMLElement;

src/app/all-notifications/all-notifications.component.ts

@@ -4,7 +4,7 @@
       <ion-content>
         <ion-list id="inbox-list">
           <ion-avatar>
-            <img [src]="authService.getUserPhoto()" alt="User">
+            <img [src]="authService.getUserPhoto()" referrerpolicy="no-referrer" alt="User">
           </ion-avatar>
           <ion-list-header>{{authService.getUserName()}}&nbsp;&nbsp;<ion-chip color="danger" outline>Live</ion-chip></ion-list-header>
           <ion-note>{{authService.getUserEmail()}}</ion-note>
@@ -44,9 +44,9 @@
             <ion-label>{{ label }}</ion-label>
           </ion-item>
         </ion-list>
-        <ion-item>
-          <ion-button (click)="authService.SignOut()" color="danger">Log Out</ion-button>
-        </ion-item>
+        <div class="uk-width-1-1">
+          <ion-button (click)="authService.SignOut()" class="uk-width-1-1 logout">Log Out</ion-button>
+        </div>
       </ion-content>
     </ion-menu>
     <ion-router-outlet id="main-content"></ion-router-outlet>

src/app/dashboard/dashboard.component.html

@@ -161,6 +161,13 @@ ion-searchbar{
   height:100px;
   transform: translate(-50%,-50%);
 }
+.logout{
+  --border-radius: 20px;
+  border-radius: 20px;
+  border:2px rgb(255, 87, 109) solid;
+  --background: rgba(255, 87, 109,0.3);
+  color:rgb(255, 87, 109);
+}
 @media (prefers-color-scheme:dark){
   #overlay{
       background-color: #07172cbd;

src/app/dashboard/dashboard.component.scss

@@ -59,6 +59,7 @@ export class DashboardComponent implements OnInit {
 
   constructor(public authService:AuthService,public dataProvider:DataProvider,public usersInfoService:UsersInfoService) { 
     this.dataProvider.showOverlay=true;
+    console.log(this.authService.userId);
     this.usersInfoService.getCurrentUserData().subscribe((value)=>{
       this.userAccessLevel=-1;
       this.dataProvider.accessLevel=-1;
@@ -78,7 +79,14 @@ export class DashboardComponent implements OnInit {
       this.dataProvider.showOverlay=false;
     })
   }
-
+  openNotification(title,date,body,tags){
+    var card = document.getElementById("hiddenInfoCard") as HTMLElement;
+    card.style.right="-10px";
+  }
+  closeNotification(){
+    var card = document.getElementById("hiddenInfoCard") as HTMLElement;
+    card.style.right="-60vw";
+  }
   ngOnInit() {
   }
 

src/app/dashboard/dashboard.component.ts

@@ -44,37 +44,87 @@
               <ion-row>
                 <ion-col>
                   <ion-label class="uk-width-expand sideDivider">
-                    <span class="txt3 success">Payroll</span>
+                    <span class="txt3 success">Projects in progress</span>
                     <br>
-                    <span class="txt4 success"><span class="txt1">29</span> Calendar days</span>
+                    <span class="txt4 success"><span class="txt1">{{totalProjects}}</span></span>
                   </ion-label>
                 </ion-col>
                 <ion-col>
                   <ion-label class="uk-width-expand sideDivider">
-                    <span class="txt3 primary">Total Employees</span>
+                    <span class="txt3 primary">Leave taken</span>
                     <br>
-                    <span class="txt1 primary">130</span>
+                    <span class="txt1 primary">{{totalLeavesTaken}}</span>
                   </ion-label>
                 </ion-col>
                 <ion-col>
                   <ion-label class="uk-width-expand sideDivider">
-                    <span class="txt3 warning">Working Days</span>
+                    <span class="txt3 warning">Working days</span>
                     <br>
                     <span class="txt1 warning">{{totalWorkingDays}} |</span><span class="warning"> and {{totalCompleteDays}} are complete</span>
                   </ion-label>
                 </ion-col>
                 <ion-col>
                   <ion-label class="uk-width-expand">
-                    <span class="txt3 danger">Payroll Processed</span>
+                    <span class="txt3 danger">Project Completed</span>
                     <br>
-                    <span class="txt1 danger">121</span>
-                    <span class="txt3 danger">/130</span>
+                    <span class="txt1 danger">{{totalCompletedProjects}}</span>
                   </ion-label>
                 </ion-col>
               </ion-row>
             </ion-grid>
           </ion-card>
         </div>
+        <div>
+          <ion-reorder slot="end">
+            <ion-icon name="swap-vertical-outline"></ion-icon>
+          </ion-reorder>
+          <ion-row>
+            <ion-card class="uk-width-1-1">
+              <ion-label class="txt2">Quick actions for you</ion-label>
+              <ion-grid>
+                <ion-row>
+                  <ion-col>
+                    <ion-item>
+                      <ion-label>Request A Leave </ion-label>
+                      <ion-icon slot="end" size="large" color="tertiary" name="card"></ion-icon>
+                    </ion-item>
+                    <ion-button [disabled]="!leaveFormAllowed" expand="block" color="tertiary" shape="round" (click)="openNotification()">
+                      Complete Action
+                    </ion-button>
+                    <ion-label color="danger" *ngIf="!leaveFormAllowed">You can't take a leave because you used all of them</ion-label>
+                  </ion-col>
+                  <ion-col>
+                    <ion-item>
+                      <ion-label>Submit a new project idea.</ion-label>
+                      <ion-icon slot="end" size="large" color="warning" name="document-text"></ion-icon>
+                    </ion-item>
+                    <ion-button expand="block" color="warning" shape="round">
+                      Generate Report
+                    </ion-button>
+                  </ion-col>
+                  <ion-col>
+                    <ion-item>
+                      <ion-label>Contact current project team.</ion-label>
+                      <ion-icon slot="end" size="large" color="primary" name="chatbox-ellipses"></ion-icon>
+                    </ion-item>
+                    <ion-button expand="block" color="primary" shape="round">
+                      Message Everyone
+                    </ion-button>
+                  </ion-col>
+                  <ion-col>
+                    <ion-item>
+                      <ion-label>Check code </ion-label>
+                      <ion-icon slot="end" size="large" color="danger" name="cellular"></ion-icon>
+                    </ion-item>
+                    <ion-button expand="block" color="danger" shape="round">
+                      Get Increment Score
+                    </ion-button>
+                  </ion-col>
+                </ion-row>
+              </ion-grid>
+            </ion-card>
+          </ion-row>
+        </div>
         <div>
           <ion-reorder slot="end">
             <ion-icon name="swap-vertical-outline"></ion-icon>
@@ -252,3 +302,71 @@
     </ion-list>
   </div>
 </ion-content>
+<ion-card id="hiddenInfoCard">
+  <ion-button (click)="closeNotification()" expand="full" fill="clear">
+    <ion-icon name="close"></ion-icon>
+    &nbsp;&nbsp;Close Panel
+  </ion-button>
+  <ion-label color="success" class="txt2 uk-align-center" style="width:max-content;">You have {{totalLeaveLeft}} leaves left for this annum</ion-label>
+  <ion-card>
+    <form [formGroup]="form" action="">
+        <ion-input 
+          type="text" 
+          autofocus 
+          placeholder="Reason" 
+          inputmode="text"
+          required
+          formControlName="reason"
+          max="20"
+          clearInput="true"
+          #reason
+        ></ion-input>
+        <ion-textarea 
+          type="text" 
+          placeholder="Description" 
+          inputmode="text" 
+          required 
+          clearInput="true" 
+          #description 
+          formControlName="description" 
+        ></ion-textarea>
+        <ion-input 
+          type="number" 
+          placeholder="Total Leave Days" 
+          inputmode="text"
+          required
+          clearInput="true" 
+          [min]="1"
+          [max]="totalLeaveLeft"
+          #totalDays
+          formControlName="totalDays"
+        ></ion-input>
+        <ion-item>
+          <ion-label>Start Date</ion-label>
+          <ion-datetime 
+          value="1990-02-19" 
+          placeholder="Select Date" 
+          #startingDate 
+          required
+          [min]="minDateInISO"
+          (ionChange)="changedDate(startingDate.value)"
+          formControlName="startingDate"></ion-datetime>
+        </ion-item>
+        <ion-item>
+          <ion-label>Start Date</ion-label>
+          <ion-datetime 
+          placeholder="Select Date" 
+          #endingDate 
+          required 
+          [disabled]="startingDate.value==''" 
+          [min]="minEndDateInISO" 
+          [max]="maxDateInISO" 
+          formControlName="endingDate"></ion-datetime>
+        </ion-item>
+        <ion-button class="uk-align-center" (click)="addLeaveRequest()" type="submit" [disabled]="isLoading || !form.valid"
+      [ngClass]="isLoading || !form.valid ? 'disabled' : ''" shape="round" color="success">
+        <ion-icon name="log-in-outline" size="large"></ion-icon>&nbsp;Sign Up
+        </ion-button>
+    </form>
+  </ion-card>
+</ion-card>

src/app/home/home.component.html

@@ -47,6 +47,18 @@ td{
 .uk-table{
     transition: all 1s ease-in-out;
 }
+#hiddenInfoCard{
+    --background: var(--ion-color-light-shade);
+    position:absolute;
+    top:0px;
+    right:-60vw;
+    width:50vw;
+    z-index:500;
+    height:100vh;
+    overflow: hidden;
+    transition: all 1s ease-in-out;
+}
+