feat(UI): Fixed UI and Improved the cropper

Signed-off-by: vivek kumar <[email protected]>
Worktez · May 8, 2022 · ab6f41b · ab6f41b
1 parent 7bed86f
commit ab6f41b
Show file tree

Hide file tree

Showing 30 changed files with 418 additions and 301 deletions.
diff --git a/functions/index.js b/functions/index.js
@@ -8,7 +8,10 @@
 // eslint-disable-next-line no-dupe-else-if
 
 const admin = require("firebase-admin");
-admin.initializeApp();
+
+if (admin.apps.length === 0) {
+    admin.initializeApp();
+}
 
 const { users } = require("./model/users/users");
 const { tasks } = require("./model/tasks/tasks");

diff --git a/functions/model/librarian/lib.js b/functions/model/librarian/lib.js
@@ -120,6 +120,20 @@ exports.setProfilePicToUserDocument = function(inputJson, uid, orgFileDocumentNa
     return Promise.resolve(setProfilePicToUserDocumentPromise);
 };
 
+/**
+ * Description
+ * @param {any} uid
+ * @return {any}
+ */
+ exports.getFileInUser = function(uid) {
+    let query = db.collection("Users").doc(uid).collection("ProfilePic");
+    query = query.where("FileStatus", "==", "OK");
+
+    const getProfilePicToUserDocumentPromise = query.get();
+
+    return Promise.resolve(getProfilePicToUserDocumentPromise);
+};
+
 /**
  * Description
  * @param {any} orgDomain

diff --git a/functions/model/librarian/librarian.js b/functions/model/librarian/librarian.js
@@ -29,6 +29,7 @@ const { getFilesInOrgDocument } = require("./tark/getFilesInOrgDocuments");
 const { uploadFileToContributorsDocuments } = require("./tark/uploadFileToContributorsDocuments");
 const { uploadProfilePicToUserDoc } = require("./tark/uploadUserProfilePic");
 const { deleteFilesInOrg } = require("./tark/deleteFilesInOrg");
+const { getFilesInUser } = require("./tark/getFilesInUser");
 
 /**
  * Description
@@ -129,6 +130,17 @@ fastify.post("/uploadUserProfilePic", (req, res) => {
     uploadProfilePicToUserDoc(req, res);
 });
 
+/**
+ * Description
+ * @param {any} "/uploadUserProfilePic"
+ * @param {any} req
+ * @param {any} res
+ * @returns {any}
+ */
+ fastify.post("/getFilesInUser", (req, res) => {
+    getFilesInUser(req, res);
+});
+
 /**
  * Description
  * @param {any} req

diff --git a/functions/model/librarian/tark/getFilesInUser.js b/functions/model/librarian/tark/getFilesInUser.js
@@ -0,0 +1,42 @@
+/* eslint-disable linebreak-style */
+/* eslint-disable no-trailing-spaces */
+/* eslint-disable object-curly-spacing */
+/* eslint-disable no-unused-vars */
+/** *********************************************************
+ * Copyright (C) 2022
+ * Worktez
+ *
+ * This program is free software; you can redistribute it and/or
+ * modify it under the terms of the MIT License
+ *
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
+ * See the MIT License for more details.
+ ***********************************************************/
+
+const { getFileInUser } = require("../lib");
+
+exports.getFilesInUser = function(request, response) {
+  const uid = request.body.data.UID;
+  const resultData = [];
+  const status = 200;
+
+  const promise1 = getFileInUser(uid).then((snapshot) => {
+    snapshot.forEach((element) => {
+      resultData.push(element.data());
+    });
+  });
+
+  return Promise.resolve(promise1).then(() => {
+    const result={data: {status: "Ok", data: resultData}};
+    return response.status(status).send(result);
+  })
+      .catch((error) => {
+        console.error(error);
+        const result= {data: {status: "Error", data: undefined}};
+        return response.status(status).send(result);
+      });
+};
+
diff --git a/functions/model/librarian/tark/uploadFileToTask.js b/functions/model/librarian/tark/uploadFileToTask.js
@@ -17,7 +17,7 @@
  * See the MIT License for more details.
  ***********************************************************/
 
-const { setFileToTask} = require("../lib");
+const { setFileToTask } = require("../lib");
 const { getTask, updateTask } = require("../../tasks/lib");
 const { getOrgUseAppKey } = require("../../organization/lib");
 const { addActivity } = require("../../activity/tark/addActivity");

diff --git a/functions/model/mailer/tark/generateTemplate.js b/functions/model/mailer/tark/generateTemplate.js
@@ -80,7 +80,7 @@ exports.generateTemplate = function(mailType, valueArray) {
     mailSubject = "Experience updated on Worktez";
     htmlContent = "<tr><td style=\"padding-left:30px;text-align:center;\"><p>" + "Hi $$$ your profile has been updated Successfully!" + "</p></td></tr><tr style=\"text-align:center;\" rowspan=\"1\"><td><a href=\"https://worktez.com/profile/$$$$" + "\" target=\"_blank\" style=\"background-color: #dc3226; color: white; text-decoration:none; padding: 15px;border-radius:50px;border:red;cursor:pointer;\">View comment</a><p style=\"color:#666;\">Please click the button to view the comment.";
   } else if (mailType == "Update_Pic_Profile") {
-    templateName = "updatePic";
+    templateName = "updatePic.html";
     mailSubject = "Profile Pic updated on Worktez";
     htmlContent = "<tr><td style=\"padding-left:30px;text-align:center;\"><p>" + "Hi $$$ your profile has been updated Successfully!" + "</p></td></tr><tr style=\"text-align:center;\" rowspan=\"1\"><td><a href=\"https://worktez.com/profile/$$$$" + "\" target=\"_blank\" style=\"background-color: #dc3226; color: white; text-decoration:none; padding: 15px;border-radius:50px;border:red;cursor:pointer;\">View comment</a><p style=\"color:#666;\">Please click the button to view the comment.";
   } else if (mailType == "Update_Project_Profile") {

diff --git a/functions/model/users/lib.js b/functions/model/users/lib.js
@@ -257,7 +257,11 @@ exports.getMyTeamCollection = function(uid, orgAppKey) {
         doc.forEach((user) => {
             data = user.data();
         });
-        return data.Teams;
+        if (data != undefined) {
+            return data.Teams;
+        }
+
+        return undefined;
     });
     return Promise.resolve(promise);
 };

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,6 +32,7 @@
     "jquery": "^3.5.1",
     "latest": "^0.2.0",
     "ngx-cookie-service": "^13.1.2",
+    "ngx-image-cropper": "^6.1.0",
     "popper.js": "^1.16.1",
     "rxfire": "^6.0.0",
     "rxjs": "~7.4.0",

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -159,6 +159,8 @@ import { GetIconComponent } from './icons/get-icon/get-icon.component';
 import { IconsBaseComponent } from './body/common-tools/icons-base/icons-base.component';
 import { ColorsBaseComponent } from './body/common-tools/colors-base/colors-base.component';
 
+import { ImageCropperModule } from 'ngx-image-cropper';
+
 @NgModule({
   declarations: [
     AppComponent,
@@ -303,7 +305,8 @@ import { ColorsBaseComponent } from './body/common-tools/colors-base/colors-base
     MatSortModule,
     MatInputModule,
     MatFormFieldModule,
-    DragDropModule
+    DragDropModule,
+    ImageCropperModule
   ],
   providers: [
     AuthService,

diff --git a/src/app/body/board/board.component.ts b/src/app/body/board/board.component.ts
@@ -90,14 +90,12 @@ export class BoardComponent implements OnInit {
   readSprintData() {
     this.showContent = false;
     if (this.startService.teamCurrentSprintNumber != 0) {
-      console.log("checking 0");
       if(this.startService.selectedTeamId == this.applicationSettingsService.team.TeamId) {
         this.applicationSettingsService.getSprintsDetails(this.startService.teamCurrentSprintNumber).subscribe(sprints => {
         this.child.forEach(child => {
           child.highlightSelectedTeam(this.startService.selectedTeamId);
         });
         if (sprints) {
-          console.log("checking 1");
           this.sprintData = sprints;
           this.currentSprintNumber=this.sprintData.SprintNumber;
 
@@ -128,7 +126,6 @@ export class BoardComponent implements OnInit {
         }
       });
     } else {
-      console.log("checking 2");
       this.startService.readApplicationData();
       this.startService.applicationDataStateObservable.subscribe((data) => {
         if(data) {

diff --git a/src/app/body/common-tools/update-image/update-image.component.css b/src/app/body/common-tools/update-image/update-image.component.css
@@ -11,8 +11,14 @@
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
 * See the MIT License for more details. 
 ***********************************************************/
-button {
-    background-color: var(--secondary-color);
-    border: var(--primary-border);
-    color: var(--button-text);
+#button {
+    background-color: var(--primary-color);
+    color: #ffffff;
+    width: 100%;
+}
+
+#button:hover,
+#button:active {
+    background-color: var(--dropdown-hover);
+    color: var(--button-text-hover);
 }
diff --git a/src/app/body/common-tools/update-image/update-image.component.html b/src/app/body/common-tools/update-image/update-image.component.html
@@ -11,15 +11,46 @@
 * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. 
 * See the MIT License for more details. 
 ***********************************************************/-->
-<!-- <div class="modal-header p-4">
-    <h2 class="modal-title" id="exampleModalLabel">Edit Profile Pic2</h2>
-</div> -->
-<div class="modal-body">
-    <div class="row">
-        <div class="col-12 p-2">
-            <img [src]="imageInput" id="image" style="height: 400px;" #image crossorigin>
-        </div>
-
-        <button class="btn btn-primary col-md-12" (click)="setProfilePic()">Set Profile Pic</button>
+<div class="row p-2">
+    <div class="col-12">
+        <ng-container *ngIf="!imageUrl; else imageUrlFound">
+            <image-cropper
+            [imageChangedEvent]="imgChangeEvt"
+            [maintainAspectRatio]="true" 
+            [aspectRatio]="4 / 4"
+            [resizeToWidth]="256" 
+            format="png" 
+            (imageCropped)="cropImg($event)" 
+            (imageLoaded)="imgLoad()"
+            (cropperReady)="initCropper()" 
+            (loadImageFailed)="imgFailed()"
+            crossorigin>
+            </image-cropper>
+        </ng-container>
+        <ng-template #imageUrlFound>
+            <image-cropper
+            [imageURL]="imageUrl"
+            [maintainAspectRatio]="true" 
+            [aspectRatio]="4 / 4"
+            [resizeToWidth]="256" 
+            format="png" 
+            (imageCropped)="cropImg($event)" 
+            (imageLoaded)="imgLoad()"
+            (cropperReady)="initCropper()" 
+            (loadImageFailed)="imgFailed()"
+            crossorigin>
+            </image-cropper>
+        </ng-template>
+    </div>
+</div>
+<div class="row p-2" *ngIf="showSaveButton">
+    <div class="col d-flex justify-content-center">
+        <button class="btn" id="button" (click)="cropPhotoDone()">Save</button>
+    </div>
+</div>
+<div class="row p-2">
+    <div class="col d-flex justify-content-center">
+        <label type="button" for="image" class="btn" id="button">Choose Photo</label>
+        <input type="file" id="image" style="display: none;" (change)="onFileChange($event)">
     </div>
 </div>