Skip to content

Commit

Permalink
documents: replace files editor
Browse files Browse the repository at this point in the history
* Uses primeng as files editor.
* Adds drag and drop properties.
* Removes useless informations.
* Fixes several issues for file versionning.

Co-Authored-by: Johnny Mariéthoz <[email protected]>
  • Loading branch information
jma committed Jul 10, 2024
1 parent 13421be commit 3a11b33
Show file tree
Hide file tree
Showing 13 changed files with 1,002 additions and 111 deletions.
9 changes: 0 additions & 9 deletions angular.json
Original file line number Diff line number Diff line change
Expand Up @@ -23,10 +23,6 @@
"projects/sonar/src/assets"
],
"styles": [
"node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeflex/primeflex.min.css",
"projects/sonar/src/styles.scss"
],
"scripts": [],
Expand All @@ -47,7 +43,6 @@
"with": "projects/sonar/src/environments/environment.prod.ts"
}
],
"optimization": true,
"outputHashing": "none",
"sourceMap": false,
"namedChunks": false,
Expand Down Expand Up @@ -102,10 +97,6 @@
"projects/sonar/src/assets"
],
"styles": [
"node_modules/primeng/resources/themes/bootstrap4-light-blue/theme.css",
"node_modules/primeng/resources/primeng.min.css",
"node_modules/primeicons/primeicons.css",
"node_modules/primeflex/primeflex.min.css",
"projects/sonar/src/styles.scss"
],
"scripts": []
Expand Down
42 changes: 21 additions & 21 deletions package-lock.json

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -42,10 +42,10 @@
"@angular/platform-browser-dynamic": "^17.3.10",
"@angular/router": "^17.3.10",
"@biesbjerg/ngx-translate-extract-marker": "^1.0.0",
"@ngx-formly/core": "^6.3.3",
"@ngx-formly/primeng": "^6.3.3",
"@ngx-formly/core": "6.3.2",
"@ngx-formly/primeng": "6.3.2",
"@ngx-translate/core": "^15.0.0",
"@rero/ng-core": "^17.1.0",
"@rero/ng-core": "^17.2.1",
"@types/marked": "^4.0.0",
"@vpoppy/ngx-translate-extract": "^9.0.0",
"bootstrap": "^4.6.2",
Expand Down
27 changes: 22 additions & 5 deletions projects/sonar/src/app/app.module.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,9 +15,9 @@
* along with this program. If not, see <http://www.gnu.org/licenses/>.
*/
import { DatePipe } from '@angular/common';
import { HttpClient, HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';
import { HTTP_INTERCEPTORS, HttpClient, HttpClientModule } from '@angular/common/http';
import { APP_INITIALIZER, CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
import { FormlyFieldConfig } from '@ngx-formly/core';
Expand All @@ -30,6 +30,13 @@ import { TabsModule } from 'ngx-bootstrap/tabs';
import { TooltipModule } from 'ngx-bootstrap/tooltip';
import { NgxDropzoneModule } from 'ngx-dropzone';
import { ToastrModule } from 'ngx-toastr';
import { DividerModule } from 'primeng/divider';
import { DropdownModule } from 'primeng/dropdown';
import { FileUploadModule } from 'primeng/fileupload';
import { InputTextModule } from 'primeng/inputtext';
import { OrderListModule } from 'primeng/orderlist';
import { PanelModule } from 'primeng/panel';
import { AdminComponent } from './_layout/admin/admin.component';
import { AppConfigService } from './app-config.service';
import { AppInitializerService } from './app-initializer.service';
import { AppRoutingModule } from './app-routing.module';
Expand Down Expand Up @@ -57,6 +64,8 @@ import { DetailComponent as DocumentDetailComponent } from './record/document/de
import { DocumentComponent } from './record/document/document.component';
import { FileComponent } from './record/document/file/file.component';
import { PublicationPipe } from './record/document/publication.pipe';
import { FileItemComponent } from './record/files/file-item/file-item.component';
import { UploadFilesComponent } from './record/files/upload-files/upload-files.component';
import { DetailComponent as HepvsProjectDetailComponent } from './record/hepvs/project/detail/detail.component';
import { IdentifierComponent } from './record/identifier/identifier.component';
import { DetailComponent as OrganisationDetailComponent } from './record/organisation/detail/detail.component';
Expand All @@ -69,7 +78,6 @@ import { DetailComponent as UserDetailComponent } from './record/user/detail/det
import { UserComponent } from './record/user/user.component';
import { ValidationComponent } from './record/validation/validation.component';
import { UserService } from './user.service';
import { AdminComponent } from './_layout/admin/admin.component';

export function appInitializerFactory(appInitializerService: AppInitializerService): () => Promise<any> {
return () => appInitializerService.initialize().toPromise();
Expand Down Expand Up @@ -114,7 +122,9 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
SubdivisionDetailComponent,
ContributorsPipe,
ContributionsComponent,
ContributionComponent
ContributionComponent,
UploadFilesComponent,
FileItemComponent
],
imports: [
BrowserModule,
Expand All @@ -134,10 +144,17 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
defaultLanguage: 'en'
}),
ReactiveFormsModule,
FormsModule,
BrowserAnimationsModule,
ToastrModule.forRoot(),
NgxDropzoneModule,
RecordModule
RecordModule,
InputTextModule,
FileUploadModule,
OrderListModule,
DropdownModule,
PanelModule,
DividerModule
],
providers: [
{
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -381,20 +381,5 @@ <h5 id="stats" class="mt-5" translate>Statistics</h5>
</div>
</div>
</ng-container>

<!--Preview modal-->
<ng-template #previewModal>
<ng-container *ngIf="previewFile">
<div class="modal-header">
<h4 id="dialog-sizes-name1" class="modal-title pull-left">{{ previewFile.label }}</h4>
<button type="button" class="close pull-right" aria-label="Close" (click)="previewModalRef.hide()">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<iframe class="preview-iframe" id="preview-iframe" width="100%" height="500" [src]="previewFile.url"
style="border: none;"></iframe>
</div>
</ng-container>
</ng-template>
<sonar-upload-files recordType="documents"[pid]="record.pid"></sonar-upload-files>
</ng-container>
106 changes: 106 additions & 0 deletions projects/sonar/src/app/record/files/file-item/file-item.component.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,106 @@
<!--
SONAR User Interface
 Copyright (C) 2024 RERO

 This program is free software: you can redistribute it and/or modify
 it under the terms of the GNU Affero General Public License as published by
 the Free Software Foundation, version 3 of the License.

 This program is distributed in the hope that it will be useful,
 but WITHOUT ANY WARRANTY; without even the implied warranty of
 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
 GNU Affero General Public License for more details.

 You should have received a copy of the GNU Affero General Public License
 along with this program. If not, see <http://www.gnu.org/licenses/>.
-->

<p-panel [toggleable]="true" collapsed="true">
<ng-template pTemplate="header">
<ng-container
[ngTemplateOutlet]="fileLink"
[ngTemplateOutletContext]="{ file: file(), name: file().label }"
></ng-container>
</ng-template>

<ng-template pTemplate="icons">
<button
title="{{ 'remove' | translate }}"
class="p-panel-header-icon p-link mr-2"
(click)="deleteFile(file())"
>
<span class="fa fa-trash"></span>
</button>
</ng-template>

<div class="grid">
<div class="col">
<div class="flex justify-content-end flex-wrap">
<p-button
label="Save"
(click)="save()"
icon="pi pi-save"
class="small"
/>
</div>
<p-divider />
<formly-form
[model]="model"
[fields]="fields()"
[options]="options"
[form]="form"
></formly-form>
</div>
<p-divider layout="vertical"></p-divider>

<div class="col">
<div class="flex justify-content-end flex-wrap">
<p-fileUpload
mode="basic"
[chooseLabel]="'A new version' | translate"
chooseIcon="pi pi-upload"
[accept]="file().metadata.mimetype"
fileLimit="1"
[auto]="true"
[maxFileSize]="500 * 1024 * 1024"
[customUpload]="true"
(uploadHandler)="uploadHandler($event)"
/>
</div>
<p-divider />
@if (file().versions) {
<h5 translate>Versions</h5>
<ul>
@for (version of file()?.versions; track version) {
<li>
<ng-container
[ngTemplateOutlet]="fileLink"
[ngTemplateOutletContext]="{
file: version,
name: version.created | dateTranslate
}"
></ng-container>
</li>
}
</ul>
} @else {
<span translate>No previous version</span>
}
</div>
</div>
</p-panel>

<ng-template #fileLink let-file="file" let-name="name">
@if (file?.links?.self) {
<a
tabindex="-1"
[tooltip]="
(file.size | filesize) + ' / ' + (file.updated | dateTranslate : 'medium')
"
title="download"
[href]="downloadURL(file)"
download
>{{ name }} <i class="fa fa-download"></i
></a>
}
</ng-template>
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
import { ComponentFixture, TestBed } from '@angular/core/testing';

import { FileItemComponent } from './file-item.component';

describe('FileItemComponent', () => {
let component: FileItemComponent;
let fixture: ComponentFixture<FileItemComponent>;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [FileItemComponent]
})
.compileComponents();

fixture = TestBed.createComponent(FileItemComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it('should create', () => {
expect(component).toBeTruthy();
});
});
Loading

0 comments on commit 3a11b33

Please sign in to comment.