dodavanje fajlova

package-lock.json

@@ -5993,6 +5993,23 @@
         "tslib": "^2.3.0"
       }
     },
+    "ngx-clipboard": {
+      "version": "15.1.0",
+      "resolved": "https://registry.npmjs.org/ngx-clipboard/-/ngx-clipboard-15.1.0.tgz",
+      "integrity": "sha512-dUJl1cNtdkCqL953oAhP7wmUPFrqW2aDg5OPhwPU9R3cLEdQgU2NbsHEUz4zaPyEopTXu8SR37onVm1Ep8qOHg==",
+      "requires": {
+        "ngx-window-token": ">=6.0.0",
+        "tslib": "^2.0.0"
+      }
+    },
+    "ngx-window-token": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/ngx-window-token/-/ngx-window-token-6.0.0.tgz",
+      "integrity": "sha512-IeLKO1jzfzSvZ6vlAt4QSY/B5XcHEhdOwTjqvWEPt6/esWV9T3mA2ln10kj6SCc9pUSx4NybxE10gcyyYroImg==",
+      "requires": {
+        "tslib": "^2.0.0"
+      }
+    },
     "nice-napi": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/nice-napi/-/nice-napi-1.0.2.tgz",

src/app/component/header-menu/header-menu.component.ts

@@ -43,12 +43,18 @@ export class HeaderMenuComponent implements OnInit,OnDestroy{
         visible:this.isUserAdmin()
       },
       {
-        label: 'IPMWORKS',
+        label: 'IPMWORKS Project',
         url:'http://ipmworks.net',
         styleClass:"pr-2",
         target:"_blank"
       },
       {
+        label: 'Help and Support',
+        routerLink:'/help',
+        styleClass:"pr-2",
+        target:"_blank"
+      },
+      {
         label: 'Logout',
         command:(event) => {this.logout()},
         styleClass:"pr-2",

src/app/component/help/help.component.html

+<div class="card pt-6 pl-6 pr-6">
+<p-panel class="col-12 p-d-block" header="Useful material" *ngIf="(helpFilesDesc != undefined)">
+  <div *ngFor="let file of helpFilesDesc" class="flex">
+    <div class="col-5 mb-2 md:col-11 md:mb-0">
+      <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.fileIdentifier)"></button>
+    </div>
+    <div class="col-1 md:col-1" *ngIf="(loggeduser| async)?.roles?.includes('ADMIN')">
+      <button pButton pRipple type="submit" label="Delete" icon="pi pi-trash" (click)="delete(file.fileIdentifier)" [loading]="false" class="p-button-danger"></button>
+    </div>
+  </div>
+
+</p-panel>
+  <div class="col-12 pt-3 flex justify-content-center">
+    <div class="col-1 md:col-1" *ngIf="(loggeduser| async)?.roles?.includes('ADMIN')">
+      <p-button label="Add new file" [loading]="false" type="submit" (click)="displayFileModal=true"></p-button>
+    </div>
+  </div>
+</div>
+<p-toast position="bottom-center" key="bc"></p-toast>
+<p-confirmDialog></p-confirmDialog>
+<p-dialog id="addFileModal" name="addFileModal" header="Add new file" [style]="{width: '50vw'}" [(visible)]="displayFileModal">
+  <div class="field">
+    <label>File title</label>
+    <input id="fileDescription" type="text" pInputText [(ngModel)]="newFile.description" />
+  </div>
+  <div class="field">
+    <label>Select file</label>
+    <p-fileUpload name="help" [auto]=true (onRemove) = removeFile() [maxFileSize]=5242880 [auto]=true [showUploadButton]=false [customUpload]=true (uploadHandler)="fileUploader($event)"></p-fileUpload>
+  </div>
+
+  <div class="field button-center">
+    <button pButton type="button" class="p-button-help mr-3" label="Cancel"  (click)="displayFileModal=false" ></button>
+    <button pButton type="button"  label="Submit" (click)="addFile()" [disabled]="isEmpty()"></button>
+  </div>
+</p-dialog>

src/app/component/help/help.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { HelpComponent } from './help.component';
+
+describe('HelpComponent', () => {
+  let component: HelpComponent;
+  let fixture: ComponentFixture<HelpComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ HelpComponent ]
+    })
+    .compileComponents();
+  });
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(HelpComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/component/help/help.component.ts

+import { Component, OnInit } from '@angular/core';
+import {ResourceService} from "../../service/resource.service";
+import {FileDesc} from "../../model/resource";
+import {Observable} from "rxjs";
+import {User} from "../../model/user";
+import {UserState} from "../../states/user.state";
+import {Store} from "@ngxs/store";
+import {ConfirmationService, MessageService} from "primeng/api";
+import {Router} from "@angular/router";
+
+@Component({
+  selector: 'app-help',
+  templateUrl: './help.component.html',
+  styleUrls: ['./help.component.css']
+})
+export class HelpComponent implements OnInit {
+  helpFilesDesc: FileDesc[] = [];
+  url: any;
+  newFile: FileDesc = {};
+  displayFileModal = false;
+  fileContent: any;
+
+
+  // @ts-ignore
+  public loggeduser: Observable<User> = this.store.select(UserState.userDetails);
+
+  constructor(private resourceService: ResourceService, private router: Router, private store: Store, private messageService: MessageService, private confirmationService: ConfirmationService) {
+  }
+
+  ngOnInit(): void {
+    this.resourceService.getAllHelpFilesDesc().subscribe((files: FileDesc[]) => {
+      this.helpFilesDesc = files;
+    });
+  }
+
+  downloadFile(fileId: any): void {
+    this.resourceService.downloadFileById(fileId).subscribe((file: any) => {
+      const blob = new Blob([file], {type: file.type});
+
+      this.url = window.URL.createObjectURL(blob);
+      /*const link = document.createElement('a');
+      link.href = this.url;
+      link.target="_blank";
+      link.download = fileName;*/
+      window.open(this.url, "_blank")
+    }, error => {
+      console.log(error)
+    });
+  }
+
+  delete(fileId?: String) {
+    this.confirmationService.confirm({
+      message: 'Are you sure that you want to delete resource?',
+      icon: 'pi pi-exclamation-triangle',
+      accept: () => {
+        // @ts-ignore
+        this.resourceService.deleteFile(fileId).subscribe(r => {
+            this.messageService.add({severity: 'success', detail: 'Resource has been deleted.'});
+            this.router.navigate(['/help']);
+          }, error => {
+            this.messageService.add({severity: 'error', detail: 'Some error occurred!'});
+          }
+        );
+      }
+    });
+  }
+
+  public fileUploader(event: any) {
+    this.fileContent = event.files[0];
+  }
+
+  public addFile() {
+    // @ts-ignore
+    this.resourceService.addFile(this.fileContent, this.newFile.description, "help").subscribe(data => {
+        this.messageService.add({severity: 'success', detail: 'File is added!'});
+      this.router.navigate(['/help']);
+
+    }, error => {
+      this.messageService.add({severity: 'error', detail: 'Some error occurred!'})
+    });
+  }
+
+  public removeFile(){
+    this.fileContent=undefined;
+  }
+  public isEmpty(){
+    if (this.newFile.description && this.fileContent){
+      return false;
+    }else{
+      return true;
+    }
+  }
+}

src/app/component/home/home.component.css

@@ -34,4 +34,3 @@
   padding:5px;
   display: inline-block;
 }
-

src/app/component/home/home.component.html

-<p-messages [(value)]="disclaimer" [enableService]="false"></p-messages>
+<p-messages	severity="info" [enableService]="false" *ngIf="!close">
+ <ng-template pTemplate>
+   <span class="p-message-icon pi pi-info-circle"></span>
+   <span class="p-message-summary">Disclaimer</span>
+   <span class="p-message-detail">This IPMWORKS Resource Toolbox is a repository for IPM resource developed by the EU IPMWORKS project (101000339). The cooperating partners have no economic responsibility whatsoever for losses due to using this service. In continuing to use the IPMWorks Resource Toolbox you agree to <a [ngStyle]="{color:'var(--surface-0)'}" href="#">Part 1</a> of the Toolbox Terms and Conditions.</span>
+   <button type="button" (click)="closeDisclaimer()"  class="p-message-close p-link"><i class=" p-message-close-icon pi pi-times"></i></button>
+ </ng-template>
+</p-messages>
+
 <div class="grid pt-6 pl-6">
    <div class="col-3">
      <form #searchForm="ngForm" (ngSubmit)="searchResource()">
@@ -11,7 +19,7 @@
         <p-dropdown   autoWidth="false" [style]="{'width':'100%'}" placeholder="Select pest type"  [options]="pestType" name="pestType"[(ngModel)]="searchModel.pestType" optionLabel="name" ></p-dropdown>
       </div>-->
        <p class="text-xl">Project</p>
-       <p-dropdown   autoWidth="false" [style]="{'width':'100%'}" placeholder="Select projecte"  [(ngModel)]="searchModel.project" [options]="projects" name="project" optionLabel="name" ></p-dropdown>
+       <p-dropdown   autoWidth="false" [style]="{'width':'100%'}" placeholder="Select project"  [(ngModel)]="searchModel.project" [options]="projects" name="project" optionLabel="name" ></p-dropdown>
        <p class="text-xl">Resource types</p>
        <p-multiSelect placeholder="Select resource type" name="resourceType" [(ngModel)]="searchModel.resourceType" [options]="contentTypes" optionLabel="name">
        </p-multiSelect>
@@ -67,13 +75,17 @@
                 <div class="pb-1 align-self-end">
                   <p-tag *ngIf="resource.resourceType" [rounded]=true value="{{resource.resourceType.name}}">
                   </p-tag>
+                  <p-avatar *ngIf="resource.external" shape="circle" icon="pi pi-external-link"></p-avatar>
+
                 </div>
                <div class="" routerLink="/resource/{{resource.idResource}}">
                   <img [defaultImage]="'assets/sectors/multi.jpg'" [useSrcset]="true" [lazyLoad]="imagePath+'/'+resource.idResource" class="imageSizeHome"/>
                   <p class="text-center">{{resource.resourceName}}</p>
                </div>
                 <div class="align-self-center">
-                  <button pButton type="button" routerLink="/resource/{{resource.idResource}}" icon="pi pi-forward" class="p-button-outlined mr-4" pTooltip="See more..."></button>
+                  <a routerLink="/resource/{{resource.idResource}}" target="_blank" [style]="'text-decoration:unset'">
+                    <button pButton type="button"  icon="pi pi-forward" class="p-button-outlined mr-4" pTooltip="See more..."></button>
+                  </a>
                   <!--<button pButton type="button" icon="pi pi-share-alt" class="p-button-outlined" pTooltip="Copy link for sharing" ngxClipboard [cbContent]="getPermLink(resource.idResource)" (click)=linkCopied(getPermLink(resource.idResource))></button>-->
                 </div>
                </div>

src/app/component/home/home.component.ts

@@ -49,6 +49,7 @@ export class HomeComponent implements OnInit{
   serachRunning= false;
   searchTerm: string = "";
   more= false;
+  close = false;
   imagePath = environment.baseUrl+"/resource/image";
   imagePathRaw = environment.baseUrl+"/resource/image/raw";
   searchModel:SearchModel = {};
@@ -80,9 +81,10 @@ export class HomeComponent implements OnInit{
       this.search = false;
       this.serachRunning=false;
     });
-    this.disclaimer = [{severity:"info", summary:"Disclaimer", detail:"This IPMWORKS Resource Toolbox is a repository for IPM resource developed by the EU IPMWORKS project (101000339). The cooperating partners have no economic responsibility whatsoever for losses due to using this service."}];
     }
-
+  public closeDisclaimer(){
+    this.close = true;
+  }
     public toggleFilters(){
     //kada se zatvore dodatni filteri isprazniti ako je nesto bilo selektovano u tim filterima
     this.more = !this.more;

src/app/component/resource/resource.component.html

 <div class="grid pt-6 pl-6 flex">
   <div class="flex col-12 justify-content-center">
-    <p class="text-3xl">{{resource.resourceName}}</p>
+    <p class="text-3xl">{{resource.resourceName}}
+    </p>
   </div>
   <div class="col-6 flex flex-column">
     <div class="col-12 text-center">

src/app/component/resource/resource.component.ts

@@ -75,10 +75,10 @@ export class ResourceComponent implements OnInit {
       accept: () => {
         // @ts-ignore
         this.resourceService.deleteResource(this.resourceId).subscribe(r =>{
-            this.messageService.add({severity:'success', detail:'Resource has been deletede.'});
+            this.messageService.add({severity:'success', detail:'Resource has been deleted.'});
             this.router.navigate(['/home'])
           },error =>{
-            this.messageService.add({severity:'error', detail:'Some error occured!'});
+            this.messageService.add({severity:'error', detail:'Some error occurred!'});
           }
         );
       }

src/app/model/resource.ts

@@ -25,6 +25,7 @@ export interface Resource {
   citation?:string;
   creationDate?:Date;
   approved?:boolean;
+  external?:boolean;
 }
 
 export class Crop{
@@ -68,6 +69,10 @@ export class Keyword{
   public idKeyword!: string;
   public name!: string;
 }
+export class FileDesc{
+  public fileIdentifier?: string;
+  public description?: string;
+}
 export class PageableResource {
   content?: Resource[] = [];
   empty?: boolean;

src/app/service/resource.service.ts

@@ -14,7 +14,7 @@ import {
   Keyword,
   Pest,
   Crop,
-  PageableResource
+  PageableResource, FileDesc
 } from "../model/resource";
 import {SearchModel} from "../model/search-model";
 
@@ -46,12 +46,21 @@ export class ResourceService {
   public deleteResource(id:string) {
     return this._httpClient.get<Resource>(`${AppConfig.ApiPaths.deleteResource}`+"/"+id);
   }
+  public deleteFile(id:string) {
+    return this._httpClient.get<Resource>(`${AppConfig.ApiPaths.deleteFile}`+"/"+id);
+  }
   public downloadFile(name: string) {
     const httpOptions = {
       responseType: 'blob' as 'json',
     };
     return this._httpClient.get<Resource>(`${AppConfig.ApiPaths.getFile}`+"/"+name, httpOptions);
   }
+  public downloadFileById(id: string) {
+    const httpOptions = {
+      responseType: 'blob' as 'json',
+    };
+    return this._httpClient.get<any>(`${AppConfig.ApiPaths.getFileById}`+"/"+id, httpOptions);
+  }
   public saveResource(resource: Resource,edit:boolean) {
     resource.creationDate = new Date();
     if(!edit){
@@ -78,6 +87,21 @@ export class ResourceService {
     })
     return this._httpClient.post(`${AppConfig.ApiPaths.addFile}`+"/"+idResource,formData)
   }
+  public addFile(file:File,description:string, type:string){
+
+    const formData: FormData = new FormData();
+    if(file != undefined) {
+      formData.append("file", file);
+    }
+    if(description != undefined) {
+      formData.append("description", description);
+    }
+    if(type != undefined) {
+      formData.append("type", type);
+    }
+
+    return this._httpClient.post(`${AppConfig.ApiPaths.addHelpFile}`,formData)
+  }
   public getAllSectors() {
     return this._httpClient.get<Sector[]>(`${AppConfig.ApiPaths.getAllSectors}`);
   }
@@ -103,4 +127,9 @@ export class ResourceService {
     return this._httpClient.get<Keyword[]>(`${AppConfig.ApiPaths.getAllKeywords}`);
   }
 
+  public getAllHelpFilesDesc() {
+    return this._httpClient.get<FileDesc[]>(`${AppConfig.ApiPaths.getAllHelpFilesDesc}`);
+  }
+
+
 }

src/styles.css

@@ -19,9 +19,6 @@
 .p-menubar-root-list{
   padding-left:120px !important;
 }
-.p-button:not(.p-button-outlined){
-  background-color:#00662e !important;
-}
 .p-multiselect, .p-inputtext	 {
   width: 100%;
 }
@@ -54,6 +51,10 @@
 .p-button.p-button-outlined{
   color:#00662e !important;
 }
+.p-button:not(.p-button-outlined){
+  background-color:#00662e;
+}
+
 .p-grid {
   display: flex;
   flex-wrap: wrap;
@@ -86,3 +87,6 @@
 .p-badge{
   font-size: 14px !important;
 }
+.p-avatar{
+  background-color: white !important;
+}