Merge pull request #587 from DigitalExcellence/Release/v1.7.0

Release/v1.7.0

Author: MeesvanStraten

CHANGELOG.md

@@ -5,6 +5,28 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres
 to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+##  Release v.1.7.0-beta - 8-10-2021
+
+### Added
+- Added pagination to own projects page. [#526](https://github.com/DigitalExcellence/dex-frontend/issues/526)
+- Back button to add project wizard - [#563](https://github.com/DigitalExcellence/dex-frontend/issues/563)
+- Fixed the wizard long description text area to wrap words. - [#562](https://github.com/DigitalExcellence/dex-frontend/issues/562)
+
+### Changed
+- Projects overview not sorting on Likes High > Low [#557](https://github.com/DigitalExcellence/dex-frontend/issues/557)
+- Changed project-edit page. Was a separate page, is now a part of te detail-modal [#536](https://github.com/DigitalExcellence/dex-frontend/issues/536)
+
+### Deprecated
+
+### Removed
+
+### Fixed
+- Highlight project modal, not dissapearing when clicking out of it.[#569](https://github.com/DigitalExcellence/dex-frontend/issues/569)
+- Project filter is not cleared anymore after editing project. [#561](https://github.com/DigitalExcellence/dex-frontend/issues/561)
+- Added option to remove a previously uploaded icon to edit page and wizard[#482](https://github.com/DigitalExcellence/dex-frontend/issues/482)
+
+### Security
+
 ##  Release v.1.6.0-beta - 15-9-2021
 
 ### Added

angular.json

@@ -90,8 +90,8 @@
                 },
                 {
                   "type": "anyComponentStyle",
-                  "maximumWarning": "6kb",
-                  "maximumError": "10kb"
+                  "maximumWarning": "8kb",
+                  "maximumError": "15kb"
                 }
               ]
             },
@@ -193,4 +193,4 @@
   "cli": {
     "analytics": false
   }
-}
+}

package-lock.json

@@ -24,25 +24,25 @@
       <ng-container [ngSwitch]="(currentStep | async)?.wizardPageName">
         <!--    From this point the steps are always displayed    -->
         <ng-container *ngSwitchCase="'project-categories'">
-          <app-project-categories (clickNext)="onNextStep()" [step]="(currentStep | async)"></app-project-categories>
+          <app-project-categories (clickNext)="onNextStep()" (clickPrevious)="onPreviousStep()" [step]="(currentStep | async)"></app-project-categories>
         </ng-container>
         <ng-container *ngSwitchCase="'project-name'">
-          <app-project-name (clickNext)="onNextStep()" [step]="(currentStep | async)"></app-project-name>
+          <app-project-name (clickNext)="onNextStep()" (clickPrevious)="onPreviousStep()" [step]="(currentStep | async)"></app-project-name>
         </ng-container>
         <ng-container *ngSwitchCase="'project-description'">
-          <app-project-description (clickNext)="onNextStep()" [step]="(currentStep | async)"></app-project-description>
+          <app-project-description (clickNext)="onNextStep()" (clickPrevious)="onPreviousStep()" [step]="(currentStep | async)"></app-project-description>
         </ng-container>
         <ng-container *ngSwitchCase="'project-images'">
-          <app-project-images (clickNext)="onNextStep()" [step]="(currentStep | async)"></app-project-images>
+          <app-project-images (clickNext)="onNextStep()" (clickPrevious)="onPreviousStep()" [step]="(currentStep | async)"></app-project-images>
         </ng-container>
         <ng-container *ngSwitchCase="'project-icon'">
-          <app-project-icon (clickNext)="onNextStep()" [isOptional]="true" [step]="(currentStep | async)"></app-project-icon>
+          <app-project-icon (clickNext)="onNextStep()" (clickPrevious)="onPreviousStep()" [isOptional]="true" [step]="(currentStep | async)"></app-project-icon>
         </ng-container>
         <ng-container *ngSwitchCase="'project-collaborators'">
-          <app-project-collaborators (clickNext)="onNextStep()" [isOptional]="true" [step]="(currentStep | async)"></app-project-collaborators>
+          <app-project-collaborators (clickNext)="onNextStep()" (clickPrevious)="onPreviousStep()" [isOptional]="true" [step]="(currentStep | async)"></app-project-collaborators>
         </ng-container>
         <ng-container *ngSwitchCase="'project-call-to-action'">
-          <app-project-call-to-action (clickNext)="onNextStep()" [isOptional]="true" [step]="(currentStep | async)"></app-project-call-to-action>
+          <app-project-call-to-action (clickNext)="onNextStep()" (clickPrevious)="onPreviousStep()" [isOptional]="true" [step]="(currentStep | async)"></app-project-call-to-action>
         </ng-container>
         <ng-container *ngSwitchCase="'project-link'">
           <app-project-link (clickNext)="onNextStep()" [formSubmitted]="formSubmitted" [step]="(currentStep | async)"></app-project-link>

src/app/modules/project/add/main/wizard/wizard.component.html

@@ -94,6 +94,15 @@ export class WizardComponent implements OnInit {
     }
   }
 
+  /**
+   * Method which triggers when the button to the previous page is pressed
+   */
+  public onPreviousStep() {
+    if (!this.wizardService.isFirstStep()) {
+      this.wizardService.moveToPreviousStep();
+    }
+  }
+
   /**
    * Method that will take the built project in the wizard and send it to the backend
    * @param newProject - the built project

src/app/modules/project/add/main/wizard/wizard.component.ts

@@ -20,5 +20,6 @@ <h2 class="step-header">Want to add a call to action?</h2>
 <p>Get people in action!</p>
 <app-call-to-actions-edit [projectCallToActions]="project.callToActions"></app-call-to-actions-edit>
 <div class="bottom-button-wrapper">
+  <button (click)="onClickPrevious()" class="form-previous-btn">Previous</button>
   <button (click)="onClickNext()" class="form-continue-btn">Next</button>
 </div>

src/app/modules/project/add/main/wizard/wizardPages/default/project-call-to-action/project-call-to-action.component.html

@@ -18,5 +18,10 @@
 
 .bottom-button-wrapper {
   display: flex;
-  justify-content: flex-end;
+  justify-content: center;
+
+  button {
+    margin-left: 5px;
+    margin-right: 5px;
+  }
 }

src/app/modules/project/add/main/wizard/wizardPages/default/project-call-to-action/project-call-to-action.component.scss

@@ -49,4 +49,10 @@ <h3>Categories</h3>
 <!--    #{{tag}}-->
 <!--  </span>-->
 <!--  </div>-->
-<button (click)="onClickNext()" class="form-continue-btn">{{isOptional ? "Skip" : "Next"}}</button>
+<div class="buttons">
+  <div class="inline-input">
+    <button (click)="onClickPrevious()" class="form-previous-btn">Previous</button>
+    <button (click)="onClickNext()" class="form-continue-btn">{{isOptional ? "Skip" : "Next"}}</button>
+  </div>
+</div>
+

src/app/modules/project/add/main/wizard/wizardPages/default/project-categories/project-categories.component.html

@@ -38,6 +38,13 @@
   }
 }
 
+.buttons {
+  display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
 #tag {
   box-shadow: $box-shadow;
 }

src/app/modules/project/add/main/wizard/wizardPages/default/project-categories/project-categories.component.scss

@@ -66,6 +66,9 @@ <h2 class="step-header">{{step.name}}</h2>
   </div>
   <div class="image-col">
     <img alt="" src="/assets/images/wizard/collaborators.svg" />
-    <button (click)="onClickNext()" class="form-continue-btn">{{isOptional && !(collaboratorList.length > 0) ? "Skip" : "Next"}}</button>
+    <div class="inline-input">
+      <button (click)="onClickPrevious()" class="form-previous-btn">Previous</button>
+      <button (click)="onClickNext()" class="form-continue-btn">{{isOptional && !(collaboratorList.length > 0) ? "Skip" : "Next"}}</button>
+    </div>
   </div>
 </div>

src/app/modules/project/add/main/wizard/wizardPages/default/project-collaborators/project-collaborators.component.html

@@ -39,6 +39,9 @@ <h2 class="step-header">{{step.name}}</h2>
   </div>
   <div class="right">
     <img alt="describe svg" src="/assets/images/wizard/describe.svg"/>
-    <button (click)="onClickNext()" [disabled]="!shortDescription.valid || !longDescription.valid" class="form-continue-btn">Next</button>
+    <div class="inline-input">
+      <button (click)="onClickPrevious()" class="form-previous-btn">Previous</button>
+      <button (click)="onClickNext()" [disabled]="!shortDescription.valid || !longDescription.valid" class="form-continue-btn">Next</button>
+    </div>
   </div>
 </div>

src/app/modules/project/add/main/wizard/wizardPages/default/project-description/project-description.component.html

@@ -65,6 +65,7 @@
   .project-long-description {
     .ql-container {
       width: 100%;
+      word-break: break-all;
       height: 350px;
     }
   }

src/app/modules/project/add/main/wizard/wizardPages/default/project-description/project-description.component.scss

@@ -20,14 +20,23 @@ <h2 class="step-header">{{step.name}}</h2>
 <p class="step-description">{{step.description}}</p>
 <div class="wrapper">
   <div class="project-icon-picker">
-    <app-file-uploader [acceptMultiple]="acceptMultiple" [acceptedTypes]="acceptedTypes" [showPreview]="false"></app-file-uploader>
+    <app-file-uploader #projectIconFileUploader [acceptMultiple]="acceptMultiple" [acceptedTypes]="acceptedTypes" [showPreview]="false"></app-file-uploader>
   </div>
-  <button (click)="mobileUploadButtonClick()" class="form-continue-btn grey">Upload image</button>
+  <div class='button-wrapper'>
+    <button (click)="mobileUploadButtonClick()" class="form-continue-btn grey">Upload image</button>
+    <button (click)="deleteIconClicked()" *ngIf="projectIconFileUploader.files[0]" class="form-continue-btn grey">Remove image</button>
+  </div>
+  
   <div class="right">
     <div class="file-preview">
       <div [style.background-image]="'url('+getProjectIcon()+')'" class="circle"></div>
+      <div (click)="deleteIconClicked()" *ngIf="projectIconFileUploader.files[0]" class="overlay"><em
+        class="fas fa-trash"></em></div>
       <img alt="Workers svg" class="workers" src="/assets/images/wizard/icon.svg"/>
     </div>
-    <button (click)="onClickNext()" class="form-continue-btn">{{isOptional && !(fileUploader?.files.length > 0) ? "Skip" : "Next"}}</button>
+    <div class="inline-input">
+      <button (click)="onClickPrevious()" class="form-previous-btn">Previous</button>
+      <button (click)="onClickNext()" class="form-continue-btn">{{isOptional && !(fileUploader?.files.length > 0) ? "Skip" : "Next"}}</button>
+    </div>
   </div>
 </div>

src/app/modules/project/add/main/wizard/wizardPages/default/project-icon/project-icon.component.html

@@ -20,6 +20,11 @@
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 30px;
+
+  .button-wrapper{
+    display: flex;
+    justify-content: space-around;
+  }
   button {
     &.grey {
       display: none;
@@ -78,6 +83,39 @@
         }
       }
 
+      .overlay {
+        z-index: 2;
+        height: 100%;
+        width: 75%;
+        border-radius: 100%;
+        position: absolute;
+        background-color: rgba(0, 0, 0, 0.2);
+        left: 0;
+        top: 0;
+        opacity: 0;
+        transition: $transition-short;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        em {
+          cursor: pointer;
+          color: white;
+          font-size: 48px;
+        }
+      }
+      @media only screen and (max-width: 600px) {
+        .overlay {
+          display: none;
+        }
+      }
+
+      &:hover {
+        .overlay {
+          opacity: 1;
+        }
+      }
+
       img {
         display: inline-block;
         z-index: 2;
@@ -93,7 +131,7 @@
         }
       }
     }
-
+    
     button {
       margin-top: 30px;
     }

src/app/modules/project/add/main/wizard/wizardPages/default/project-icon/project-icon.component.scss

@@ -75,6 +75,13 @@ export class ProjectIconComponent extends WizardStepBaseComponent implements OnI
     document.querySelector('input').click();
   }
 
+  /**
+   * Method that triggers when the delete-overlay is clicked
+   */
+  public deleteIconClicked() {
+    this.fileUploader.deleteFile(0);
+  }
+
   /**
    * Method that determines which preview to use for the project icon
    */

src/app/modules/project/add/main/wizard/wizardPages/default/project-icon/project-icon.component.ts

@@ -11,6 +11,7 @@ <h2 class="step-header">{{ step.name }}</h2>
       </div>
     </div>
     <div class="buttons">
+      <button (click)="onClickPrevious()" class="form-previous-btn">Previous</button>
       <button (click)="mobileUploadButtonClick()" class="form-continue-btn grey">Upload image</button>
       <button (click)="onClickNext()" class="form-continue-btn">
           {{ isOptional && !(fileUploader?.files.length > 0) ? "Skip" : "Next" }}

src/app/modules/project/add/main/wizard/wizardPages/default/project-images/project-images.component.html

@@ -26,6 +26,9 @@ <h2 class="step-header">{{step.name}}</h2>
       required
       type="text"/>
   <button (click)="onClickNext()" [disabled]="!projectName.valid" class="form-continue-btn">Next</button>
+  <div *ngIf="!isFirstStep">
+    <button (click)="onClickPrevious()" class="form-previous-btn">Previous</button>
+  </div>
 </div>
 <div class="image-wrapper">
   <img alt="name svg" src="/assets/images/wizard/name.svg"/>

src/app/modules/project/add/main/wizard/wizardPages/default/project-name/project-name.component.html

@@ -31,6 +31,10 @@ export class ProjectNameComponent extends WizardStepBaseComponent implements OnI
    * Form fields
    */
   public projectName = new FormControl('');
+  /**
+   * Remembers if project-name is the first step in the current wizard
+   */
+  public isFirstStep: boolean;
   /**
    * Hold a copy of the project temporarily to prevent the service from listening to every change
    */
@@ -41,6 +45,7 @@ export class ProjectNameComponent extends WizardStepBaseComponent implements OnI
   }
 
   public ngOnInit(): void {
+    this.isFirstStep = this.wizardService.isFirstStep();
     this.project = this.wizardService.builtProject;
     if (this.project.name) {
       this.projectName.setValue(this.project.name);