<div class="grid pt-6 pl-6 flex flex-wrap"> <div class="flex col-12 justify-content-center"> <p class="text-3xl">{{resource.resourceName}} </p> </div> <div class="md:col-6 flex flex-column"> <div class="col-12 text-center"> <img [src]="imagePath+'/'+resourceId" class="imageSize" > </div> <div class="col-12"> <p-panel class="col-12 inline"> <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{project}">Project</div><div class="my-0">{{resource.project}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{language}">Resource language</div><div class="my-0">{{resource.language?.name}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{resourceOrigin}">Resource origin</div> <div class="my-0 overflow-text"><a href="{{resource.resourceOrigin}}" target="_blank">{{resource.resourceOrigin}}</a></div></div> <div class="flex align-items-center"> <div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{resourceType}">Resource type</div><div class="my-0">{{resource.resourceType?.name}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{contactInstitution}">Organization name</div><div class="my-0">{{resource.contactInstitution}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0"[ngStyle]="{color:'var(--surface-500)'}" i18n="@@{contactEmail}">Contact email</div><div class="my-0"></div>{{resource.contactEmail}}</div> <div class="flex align-items-center"><div class="col-3 inline my-0"[ngStyle]="{color:'var(--surface-500)'}" i18n="@@{contactPhone}">Contact phone</div><div class="my-0">{{resource.contactPhone}}</div></div> <div class="flex align-items-center"><div class="col-3 inline my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{citation}">Citation (DOI)</div><div class="overflow-text my-0">{{resource.citation}}</div></div> </p-panel> </div> </div> <div class="md:col-6 flex flex-column"> <p-panel i18n-header="@@{short_summary}" header="Short summary" class="col-12 p-d-block"> <div *ngIf="resource.descriptionNative == undefined" class="flex keep-format" [innerHTML]="resource.description"></div> <p-tabView *ngIf="resource.descriptionNative != undefined"> <p-tabPanel i18n-header="@@{tab_english}" header="English" > <div class="flex keep-format"> {{resource.description}}</div> </p-tabPanel> <p-tabPanel i18n-header="@@{tab_native}}" header="Native"> <div class="flex keep-format"> {{resource.descriptionNative}}</div> </p-tabPanel> </p-tabView> <div class="flex mt-5"> <div class="inline col-3 my-0"[ngStyle]="{color:'var(--surface-500)'}" i18n="@@{sectors}">Sectors</div> <div class="inline my-0" *ngFor="let sector of resource.sectors"> <img class="sector mx-2" [src]="'assets/sectors/'+sector.sectorIcon" pTooltip="{{sector.name}}"> </div> </div> <div class="flex flex-wrap"> <div class="inline col-3 my-0" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{regions}">Regions</div> <div *ngFor="let region of resource.regions" class="inline my-0"> <p class=" my-0 py-2 mx-2" >{{region.name}}</p> </div> </div> <div class="flex"> <div class="inline col-3" [ngStyle]="{color:'var(--surface-500)'}"i18n="@@{relevant_pests}">Relevant pest(s)</div> <div class="col-9"> <div *ngFor="let pest of resource.pests" class="inline-flex pr-2 pb-2"> <p-badge severity="danger" value={{pest.commonName}}></p-badge> </div> </div> </div> <div class="flex"> <div class="inline col-3" [ngStyle]="{color:'var(--surface-500)'}" i18n="@@{relevant_crops}"> Relevant crop(s)</div> <div class="col-9"> <div class="inline-flex pr-2 pb-2" *ngFor="let crop of resource.crops"> <p-badge severity="success" value={{crop.commonName}}></p-badge> </div> </div> </div> </p-panel> <p-panel class="col-12 p-d-block" i18n-header="@@{find_more}" header="Find out more" *ngIf="(resource.files != undefined) || (resource.links != undefined)"> <div *ngFor="let file of resource.files" > <i class="pi pi-file p-mr-2" style="font-size: 2rem"></i> <button pButton type="button" label="{{file.description}}" class="p-button-link button-link" (click)="downloadFile(file.description)"></button> </div> <div class="mt-2" *ngFor="let link of resource.links" > <i class="pi pi-link p-mr-2" style="font-size: 2rem"></i> <a class="link-wrap" href="{{link}}" target="_blank">{{link}}</a> </div> </p-panel> </div> <div class="col-12 pt-3 flex justify-content-center"> <div class="pr-2"> <p-button i18n-label="@@{back_to_search}" label="Back to search" icon="pi pi-search" routerLink="/home" [loading]="false"></p-button> <p-button i18n-label="@@{share}" label="Share" icon="pi pi-share-alt" class="ml-3"(click)=linkCopied(getPermLink(resource.idResource)) [loading]="false"></p-button> <p-button i18n-label="@@{download}" label="Download" icon="pi pi-share-alt" class="ml-3"(click)=download(resource) [loading]="false"></p-button> </div> <div class="pr-2" *ngIf="!resource.approved && resource.canEdit && (loggeduser| async)?.roles?.includes('ADMIN')"> <p-button i18n-label="@@{approve}" label="Approve" icon="pi pi-check" (onClick)="approve($event)" [loading]="false"></p-button> </div> <div class="pr-2" *ngIf="(loggeduser| async)?.roles?.includes('ADMIN') && resource.canEdit"> <p-button i18n-label="@@{edit}" label="Edit" icon="pi pi-pencil" routerLink="/resource/edit/{{resourceId}}" [loading]="false"></p-button> </div> <div *ngIf="(loggeduser| async)?.roles?.includes('ADMIN') && resource.canEdit"> <p-button i18n-label="@@{delete]" label="Delete" icon="pi pi-trash" (onClick)="delete($event)" [loading]="false"></p-button> </div> </div> </div> <p-toast position="bottom-center" key="bc"></p-toast> <p-confirmDialog></p-confirmDialog> <p-dialog id="shareModal" name="shareModal" header="Copy link to share" [(visible)]="displayModal" [style]="{width: '40vw'}"> <div class="field"> <label i18n="@@{link}">Link</label> <input id="link" type="text" [(ngModel)]="copiedLink" pInputText/> </div> <div class="field button-center"> <button pButton type="button" class="p-button-help" label="Ok" (click)="displayModal=false" ></button> </div> </p-dialog>