-
Notifications
You must be signed in to change notification settings - Fork 103
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: setup tab for media in taxon sheet
- Loading branch information
Showing
10 changed files
with
255 additions
and
2 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
55 changes: 55 additions & 0 deletions
55
frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <div | ||
| class="MediaContainer MediaContainer--empty" | ||
| *ngIf="medias.length === 0" | ||
| > | ||
| <p class="no-media">No media</p> | ||
| </div> | ||
| <div | ||
| class="MediaContainer" | ||
| *ngIf="medias.length !== 0" | ||
| > | ||
| <div class="MediaContainer__list"> | ||
| <div class="List"> | ||
| <ng-container *ngFor="let media of medias"> | ||
| <div | ||
| class="List__item" | ||
| (click)="selectMedia(media)" | ||
| > | ||
| <img | ||
| *ngIf="ms.typeMedia(media) === 'Photo'" | ||
| [src]="ms.href(media, 100)" | ||
| alt="Miniature" | ||
| [ngClass]=" | ||
| media.id_media == selectedMedia.id_media | ||
| ? 'Media Media--thumbnail Media--selected' | ||
| : 'Media Media--thumbnail' | ||
| " | ||
| /> | ||
| <div | ||
| *ngIf="ms.typeMedia(media) !== 'Photo'" | ||
| [ngClass]="media.id_media == selectedMedia.id_media ? 'Media Media--selected' : 'Media'" | ||
| > | ||
| <mat-icon>{{ ms.icon(media) }}</mat-icon> | ||
| </div> | ||
| </div> | ||
| </ng-container> | ||
| </div> | ||
|
|
||
| <mat-paginator | ||
| [pageSizeOptions]="[10, 25, 50, 100]" | ||
| [pageSize]="pagination.perPage" | ||
| [length]="pagination.totalItems" | ||
| [pageIndex]="pagination.currentPage" | ||
| (page)="onPageChange($event)" | ||
| ></mat-paginator> | ||
| </div> | ||
|
|
||
| <div class="MediaContainer__view"> | ||
| <pnx-display-medias | ||
| [medias]="[selectedMedia]" | ||
| [index]="0" | ||
| display="xxlarge" | ||
| diaporama="false" | ||
| ></pnx-display-medias> | ||
| </div> | ||
| </div> |
62 changes: 62 additions & 0 deletions
62
frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,62 @@ | ||
| .MediaContainer { | ||
| display: flex; | ||
| justify-content: space-between; | ||
| width: 100%; | ||
|
|
||
| &--empty { | ||
| flex: 1; | ||
| justify-content: center; | ||
| align-items: center; | ||
| } | ||
|
|
||
| &__view, | ||
| &__list { | ||
| width: 50%; | ||
| } | ||
|
|
||
| &__view { | ||
| overflow: hidden; | ||
| align-content: center; | ||
| } | ||
|
|
||
| &__list { | ||
| display: flex; | ||
| flex-direction: column; | ||
| justify-content: space-between; | ||
| // flex: 1; | ||
| min-width: 0; | ||
|
|
||
| .List { | ||
| display: flex; | ||
| flex-flow: row wrap; | ||
| gap: 2rem; | ||
| margin: 1rem; | ||
| justify-content: start; | ||
| &__item { | ||
| cursor: pointer; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
|
|
||
| .Media { | ||
| width: 5rem; | ||
| height: 5rem; | ||
| color: rgba(0, 0, 0, 0.87); | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border: 3px solid rgba(0, 0, 0, 0.125); | ||
| border-radius: 8px; | ||
| &--thumbnail { | ||
| height: 7rem; | ||
| width: auto; | ||
| border-color: rgba(0, 0, 0, 0); | ||
| } | ||
| &--selected { | ||
| border-color: var(--purple) !important; | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } |
82 changes: 82 additions & 0 deletions
82
frontend/src/app/syntheseModule/taxon-sheet/tab-media/tab-media.component.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,82 @@ | ||
| import { Component, OnInit } from '@angular/core'; | ||
| import { Taxon } from '@geonature_common/form/taxonomy/taxonomy.component'; | ||
| import { MediaService } from '@geonature_common/service/media.service'; | ||
| import { TaxonSheetService } from '../taxon-sheet.service'; | ||
| import { GN2CommonModule } from '@geonature_common/GN2Common.module'; | ||
| import { CommonModule } from '@angular/common'; | ||
| import { PageEvent } from '@angular/material/paginator'; | ||
| import { SyntheseDataService } from '@geonature_common/form/synthese-form/synthese-data.service'; | ||
|
|
||
| export interface Pagination { | ||
| totalItems: number; | ||
| currentPage: number; | ||
| perPage: number; | ||
| } | ||
|
|
||
| export const DEFAULT_PAGINATION: Pagination = { | ||
| totalItems: 0, | ||
| currentPage: 0, | ||
| perPage: 10, | ||
| }; | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| selector: 'pnx-tab-media', | ||
| templateUrl: './tab-media.component.html', | ||
| styleUrls: ['./tab-media.component.scss'], | ||
| imports: [GN2CommonModule, CommonModule], | ||
| }) | ||
| export class TabMediaComponent implements OnInit { | ||
| public medias: any[] = []; | ||
| public selectedMedia: any = {}; | ||
| taxon: Taxon | null = null; | ||
| pagination: Pagination = DEFAULT_PAGINATION; | ||
|
|
||
| constructor( | ||
| public ms: MediaService, | ||
| private _tss: TaxonSheetService, | ||
| private _syntheseDataService: SyntheseDataService | ||
| ) {} | ||
|
|
||
| ngOnInit() { | ||
| this._tss.taxon.subscribe((taxon) => { | ||
| this.taxon = taxon; | ||
| if (!this.taxon) { | ||
| this.medias = []; | ||
| this.selectedMedia = {}; | ||
| this.pagination = DEFAULT_PAGINATION; | ||
| return; | ||
| } | ||
| this.loadMedias(); | ||
| }); | ||
| } | ||
|
|
||
| loadMedias() { | ||
| this._syntheseDataService | ||
| .getTaxonMedias(this.taxon.cd_ref, { | ||
| page: this.pagination.currentPage + 1, | ||
| per_page: this.pagination.perPage, | ||
| }) | ||
| .subscribe((response) => { | ||
| this.medias = response.items; | ||
| this.pagination = { | ||
| totalItems: response.total, | ||
| currentPage: response.page - 1, | ||
| perPage: response.per_page, | ||
| }; | ||
| if (!this.medias.some((media) => media.id_media == this.selectedMedia.id_media)) { | ||
| this.selectedMedia = this.medias[0]; | ||
| } | ||
| }); | ||
| } | ||
|
|
||
| selectMedia(media: any) { | ||
| this.selectedMedia = media; | ||
| } | ||
|
|
||
| onPageChange(event: PageEvent) { | ||
| this.pagination.currentPage = event.pageIndex; | ||
| this.pagination.perPage = event.pageSize; | ||
| this.loadMedias(); | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters