2.11.0-RELEASE Feature#293

CHANGELOG.md

@@ -1,7 +1,10 @@
 ## CHANGELOG
 
 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). 
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+### [ita-challenges-frontend-2.11.0-RELEASE] - 2024-05-07 (feature#293) 
+* Add order method for creation_date. Implement the formatDatePipe"
 
 ### [ita-challenges-frontend-2.10.2-RELEASE] - 2024-05-07 
 * Relative paths to image optimized. Internationalization of language literals. 

conf/.env.CI.dev

@@ -1,2 +1,2 @@
 MICROSERVICE_DEPLOY=ita-challenges-frontend
-MICROSERVICE_VERSION=2.10.2-RELEASE
+MICROSERVICE_VERSION=2.11.0-RELEASE

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ita-challenges-frontend",
-  "version": "2.10.2-RELEASE",
+  "version": "2.11.0-RELEASE",
   "scripts": {
     "ng": "ng",
     "start": "ng serve --proxy-config proxy.conf.dev.json",

src/app/core/layout/header/mobile-nav/mobile-nav.component.css

@@ -0,0 +1,43 @@
+nav {
+  display: none;
+  position: fixed;
+  top: 0;
+  width: 100%;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  height: 2rem;
+  border-bottom-left-radius: 50px;
+  border-bottom-right-radius: 50px;
+  background-color: black;
+  color: white;
+}
+
+.breadcrumb {
+  color: white;
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+.navbar-toggler {
+  position: absolute;
+  top: 50%;
+  left: 2em;
+  transform: translate(-50%, -50%);
+  border: none;
+}
+.navbar-toggler:focus {
+  box-shadow: none;
+}
+.navbar-toggler .navbar-toggler-icon {
+  background-image: url("../../../../../assets/img/icon/hamburguer-white.svg");
+  color: white;
+  height: 1em;
+}
+
+@media screen and (max-width: 768px) {
+  nav {
+    display: flex;
+  }
+}/*# sourceMappingURL=mobile-nav.component.css.map */

src/app/models/resource.interface.ts

@@ -7,7 +7,7 @@ export interface ResourceResponse {
   resourceType: string
   userId: string
   categoryId: string
-  createdAt: string
+  createdAt: Date
   updatedAt: string
   user: User
   topics: TopicElement[]

src/app/modules/challenge/components/challenge/challenge.component.css

@@ -0,0 +1,9 @@
+.challenge-component {
+  margin-right: 4rem;
+}
+
+@media (max-width: 768px) {
+  .challenge-component {
+    margin-right: 0; /* Quita el margen derecho */
+  }
+}/*# sourceMappingURL=challenge.component.css.map */

src/app/modules/modals/login-modal/login-modal.component.css

@@ -0,0 +1,21 @@
+.modal-footer button {
+  font-weight: 700;
+}
+
+#change-password {
+  font-size: 1rem;
+}
+
+@media screen and (max-width: 767px) {
+  .modal-body {
+    gap: 3.2rem !important;
+  }
+  .modal-footer {
+    gap: 2.5rem !important;
+    padding-bottom: 2rem !important;
+  }
+  .modal-footer button {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+}/*# sourceMappingURL=login-modal.component.css.map */

src/app/modules/modals/post-register-modal/post-register-modal.component.css

@@ -0,0 +1,18 @@
+img {
+  height: 118px;
+  width: -moz-fit-content;
+  width: fit-content;
+}
+
+p {
+  text-align: center;
+  font-weight: bold;
+}
+
+.form {
+  justify-content: center;
+}
+
+.modal-title {
+  text-align: center;
+}/*# sourceMappingURL=post-register-modal.component.css.map */

src/app/modules/modals/restricted-modal/restricted-modal.component.css

@@ -0,0 +1,16 @@
+img {
+  height: 118px;
+}
+
+p {
+  text-align: center;
+  font-weight: bold;
+}
+
+.form {
+  justify-content: center;
+}
+
+.modal-title {
+  text-align: center;
+}/*# sourceMappingURL=restricted-modal.component.css.map */

src/app/modules/modals/send-solution-modal/send-solution-modal.component.css

@@ -0,0 +1,7 @@
+img {
+  height: 110px;
+}
+
+p {
+  font-weight: bold;
+}/*# sourceMappingURL=send-solution-modal.component.css.map */

src/app/modules/starter/components/starter/starter.component.html

@@ -10,20 +10,23 @@ <h2>{{'modules.starter.main.section2.title' | translate}}</h2>
         </div>
 
         <ul id="sortBy" class="d-md-flex justify-content-end gap-2 d-none">
-            <li class="animated" [ngClass]="{'selected' : sortBy == 'popularity'}" (click)="changeSort('popularity')">
+            <li class="animated" [ngClass]="{'selected' : sortBy == 'popularity', 'up': sortBy === 'popularity' && !isAscending}" (click)="changeSort('popularity')">
                 {{'modules.starter.main.section2.popularity' | translate}}
             </li>
-            <li class="animated" [ngClass]="{'selected' : sortBy == 'date'}" (click)="changeSort('date')">
+            <li class="animated" [ngClass]="{'selected' : sortBy == 'creation_date', 'up': sortBy === 'creation_date' && !isAscending}" (click)="changeSort('creation_date')">
                 {{'modules.starter.main.section2.date' | translate}}
             </li>
         </ul>
         <app-challenge-card *ngFor="let challenge of listChallenges, let i = index"
             [title]="challenge.challenge_title  | dynamicTranslate"
-            [creation_date]="challenge.creation_date" [level]="challenge.level" [popularity]="challenge.popularity"
-            [languages]="challenge.languages" [id]="challenge.id_challenge"></app-challenge-card>
+            [creation_date]="challenge.creation_date | formatDate" 
+            [level]="challenge.level" 
+            [popularity]="challenge.popularity"
+            [languages]="challenge.languages" [id]="challenge.id_challenge">
+        </app-challenge-card>
         <app-pagination (pageEmitter)="getChallengesByPage($event)" [totalPages]="totalPages"
-            [pageNumber]="pageNumber"></app-pagination>
-
+            [pageNumber]="pageNumber">
+        </app-pagination>
     </div>
 </div>
 <app-filters-modal #modal></app-filters-modal>

src/app/modules/starter/components/starter/starter.component.scss

@@ -2,21 +2,25 @@
 @import "/src/styles/buttons";
 @import "/src/styles/fonts";
 
-h2{
+h2 {
     margin-bottom: 3rem;
 }
-img[alt="filter-icon"]{
+
+img[alt="filter-icon"] {
     cursor: pointer;
 }
-ul{
+
+ul {
     list-style: none;
-    li{
+
+    li {
         display: flex;
         font-weight: 700;
         color: $gray-3;
         gap: 2px;
         cursor: pointer;
-        &::after{
+
+        &::after {
             content: "";
             display: block;
             width: 17px;
@@ -25,16 +29,22 @@ ul{
             background-position: center;
             background-repeat: no-repeat;
             opacity: 0;
-
         }
-        &.selected{
+
+        &.selected {
             color: $black-1;
             font-weight: 700;
-            &::after{
+
+            &::after {
                 opacity: 1;
             }
+
+            &.up::after {
+                transform: rotate(180deg);
+            }
         }
-        &:not(.selected):hover{
+
+        &:not(.selected):hover {
             color: $primary
         }
     }
@@ -47,5 +57,5 @@ ul{
         margin-bottom: 1rem;
         margin-top: 0.5rem;
     }
-   
+
 }

src/app/modules/starter/components/starter/starter.component.spec.ts

@@ -30,19 +30,81 @@ describe('StarterComponent', () => {
     expect(component).toBeTruthy()
   })
 
-  it('should get challenges by page', (done) => {
+  it('should call getAllChallenges when sortBy is not empty', (done) => {
     const mockResponse = { challenge: 'challenge' }
-    const starterServiceSpy = jest.spyOn(starterService, 'getAllChallenges').mockReturnValue(of(mockResponse))
+    component.sortBy = 'creation_date'
+    spyOn(starterService, 'getAllChallenges').and.returnValue(of(mockResponse))
 
     component.getChallengesByPage(1)
+    expect(starterService.getAllChallenges).toHaveBeenCalled()
+    done()
+  })
+
+  it('should call getAllChallengesOffset when sortBy empty', (done) => {
+    const mockResponse = { challenge: 'challenge' }
+    const starterServiceSpy = jest.spyOn(starterService, 'getAllChallengesOffset').mockReturnValue(of(mockResponse))
+    component.sortBy = ''
+
+    component.getChallengesByPage(1)
+
     const req = httpClientMock.expectOne(`${environment.BACKEND_ITA_CHALLENGE_BASE_URL}${environment.BACKEND_ALL_CHALLENGES_URL}?offset=0&limit=8`)
     expect(req.request.method).toEqual('GET')
 
     expect(starterServiceSpy).toBeCalledWith(0, 8)
     expect(component.listChallenges).toBe(mockResponse)
     expect(component.totalPages).toEqual(3)
+    expect(starterService.getAllChallengesOffset).toHaveBeenCalled()
 
     req.flush(mockResponse)
+    httpClientMock.verify()
     done()
   })
+
+  it('should set listChallenges correctly when sortBy is empty', () => {
+    const mockResponse = { challenge: 'challenge' }
+    spyOn(starterService, 'getAllChallengesOffset').and.returnValue(of(mockResponse))
+    component.sortBy = ''
+    component.getChallengesByPage(1)
+    expect(component.listChallenges).toBe(mockResponse)
+  })
+
+  it('should set listChallenges correctly when sortBy is not empty', () => {
+    const mockResponse = [{ challenge: 'challenge' }]
+    spyOn(starterService, 'getAllChallenges').and.returnValue(of(mockResponse))
+    spyOn(starterService, 'orderBySortAscending').and.returnValue(of(mockResponse))
+    component.sortBy = 'creation_date'
+    component.getChallengesByPage(1)
+    expect(component.listChallenges).toStrictEqual(mockResponse)
+  })
+
+  // changeSort
+  it('should set isAscending to false and selectedSort equal to newSort', () => {
+    const newSort = 'creation_date'
+    const selectedSort = 'creation_date'
+    const pageNumber = 1
+
+    const getChallengesByPageSpy = jest.spyOn(component, 'getChallengesByPage')
+    component.changeSort(newSort)
+    spyOn(component, 'getChallengesByPage')
+
+    expect(component.isAscending).toBeTruthy()
+    expect(selectedSort).toEqual(newSort)
+    expect(getChallengesByPageSpy).toHaveBeenCalledWith(pageNumber)
+    expect(component.isAscending).toBeTruthy()
+  })
+
+  it('should set isAscending to true after setting it to false', () => {
+    const newSort = 'creation_date'
+    component.changeSort(newSort)
+
+    expect(component.isAscending).toBeTruthy()
+  })
+
+  it('should not call getChallengesByPage if newSort is not "popularity" or "creation_date"', () => {
+    const newSort = ''
+    component.changeSort(newSort)
+    const getChallengesByPageSpy = jest.spyOn(component, 'getChallengesByPage')
+
+    expect(getChallengesByPageSpy).not.toHaveBeenCalled()
+  })
 })