deposit: add new file component

angular.json

@@ -23,7 +23,8 @@
               "projects/sonar/src/assets"
             ],
             "styles": [
-              "projects/sonar/src/styles.scss"
+              "projects/sonar/src/styles.scss",
+              "node_modules/ngx-spinner/animations/ball-zig-zag.css"
             ],
             "scripts": [],
             "preserveSymlinks": true,
@@ -50,7 +51,6 @@
               "extractLicenses": true,
               "vendorChunk": false,
               "buildOptimizer": true,
-              "optimization": true,
               "budgets": [
                 {
                   "type": "initial",

projects/sonar/.browserslistrc

@@ -6,12 +6,11 @@
 #   npx browserslist
 
 last 2 Chrome versions
-last 2 ChromeAndroid versions
-
-last 2 Safari versions
-last 2 iOS versions
-
-last 2 Firefox versions
-last 2 FirefoxAndroid versions
-
-# last 2 Edge versions
+last 1 Firefox version
+last 2 Edge major versions
+last 2 Safari major versions
+last 2 iOS major versions
+Firefox ESR
+not dead
+> 0.2%
+not IE 9-11

projects/sonar/e2e/tsconfig.json

@@ -3,7 +3,7 @@
   "compilerOptions": {
     "outDir": "../../../out-tsc/e2e",
     "module": "commonjs",
-    "target": "es2018",
+    "target": "es2022",
     "types": [
       "jasmine",
       "node"

projects/sonar/src/app/_layout/admin/admin.component.html

@@ -48,7 +48,7 @@
                 Deposits
               </a>
               <div class="dropdown-menu dropdown-menu-right" *dropdownMenu>
-                <a class="dropdown-item" routerLink="/deposit/0/create" translate>Deposit a publication</a>
+                <a class="dropdown-item" routerLink="/deposit/create" translate>Deposit a publication</a>
                 <a class="dropdown-item" routerLink="/records/deposits" translate>Deposits</a>
               </div>
             </li>

projects/sonar/src/app/app-routing.module.ts

@@ -41,10 +41,9 @@ import { OrganisationComponent } from './record/organisation/organisation.compon
 import { BriefViewComponent as ProjectBriefViewComponent } from './record/project/brief-view/brief-view.component';
 import { DetailComponent as ProjectDetailComponent } from './record/project/detail/detail.component';
 import { BriefViewComponent as SubdivisionBriefViewComponent } from './record/subdivision/brief-view/brief-view.component';
-import { DetailComponent as SubdivisionDetailComponent } from './record/subdivision/detail/detail.component';
-import { DetailComponent as UserDetailComponent } from './record/user/detail/detail.component';
 import { UserComponent } from './record/user/user.component';
 import { UserService } from './user.service';
+import { MetadataComponent } from './deposit/metadata/metadata.component';
 
 const adminModeDisabled = (): Observable<ActionStatus> => {
   return of({
@@ -59,6 +58,11 @@ const routes: Routes = [
     component: AdminComponent,
     children: [
       { path: '', component: DashboardComponent },
+      {
+        path: 'deposit/create',
+        canActivate: mapToCanActivate([RoleGuard]),
+        component: UploadComponent,
+      },
       {
         path: 'deposit/:id',
         canActivate: mapToCanActivate([RoleGuard]),
@@ -67,7 +71,7 @@ const routes: Routes = [
         },
         children: [
           {
-            path: 'create',
+            path: 'files',
             component: UploadComponent
           },
           {
@@ -76,7 +80,7 @@ const routes: Routes = [
           },
           {
             path: ':step',
-            component: DepositEditorComponent
+            component: MetadataComponent
           }
         ]
       }
@@ -298,11 +302,8 @@ export class AppRoutingModule {
       {
         type: 'users',
         briefView: UserComponent,
-        detailView: UserDetailComponent,
         aggregationsOrder: ['subdivision'],
-        editorSettings: {
-          longMode: true,
-        },
+        redirectUrl: (record: any) => of(`/records/users?q=pid:${record.metadata.pid}`),
         sortOptions: [
           {
             label: _('Relevance'),
@@ -362,12 +363,12 @@ export class AppRoutingModule {
         label: 'Research projects',
         briefView: ProjectBriefViewComponent,
         detailView: projectDetail$,
-        editorSettings: {
-          longMode: true,
-        },
         recordResource: true,
         aggregationsExpand: ['organisation', 'user'],
         aggregationsOrder: ['organisation', 'user', 'status'],
+        editorSettings: {
+          longMode: true,
+        },
         exportFormats: [
           {
             label: 'CSV',
@@ -401,9 +402,6 @@ export class AppRoutingModule {
         briefView: CollectionBriefViewComponent,
         detailView: CollectionDetailComponent,
         files: fileConfig,
-        editorSettings: {
-          longMode: true,
-        },
         sortOptions: [
           {
             label: _('Relevance'),
@@ -421,10 +419,7 @@ export class AppRoutingModule {
         type: 'subdivisions',
         label: 'Subdivisions',
         briefView: SubdivisionBriefViewComponent,
-        detailView: SubdivisionDetailComponent,
-        editorSettings: {
-          longMode: true,
-        },
+        redirectUrl: (record: any) => of(`/records/subdivisions?q=pid:${record.metadata.pid}`),
         sortOptions: [
           {
             label: _('Relevance'),
@@ -449,12 +444,11 @@ export class AppRoutingModule {
         }
 
         recordsRoutesConfiguration.forEach((config: any) => {
-          const route = {
+          const route: any = {
             matcher: (url: any) => this._routeMatcher(url, config.type),
             canActivate: mapToCanActivate([RoleGuard]),
             children: [
               { path: '', component: RecordSearchPageComponent },
-              { path: 'detail/:pid', component: DetailComponent },
               { path: 'edit/:pid', component: EditorComponent },
               { path: 'new', component: EditorComponent, canActivate: mapToCanActivate([CanAddGuard]) }
             ],
@@ -466,7 +460,8 @@ export class AppRoutingModule {
                   key: config.type,
                   label: config.label || config.type.charAt(0).toUpperCase() + config.type.slice(1),
                   component: config.briefView || null,
-                  editorSettings: config.editorSettings || false,
+                  editorSettings: config.editorSettings || {},
+                  redirectUrl: config.redirectUrl || null,
                   detailComponent: config.detailView || null,
                   aggregations: config.aggregations || null,
                   aggregationsExpand: config.aggregationsExpand || [],
@@ -485,7 +480,9 @@ export class AppRoutingModule {
               ]
             }
           };
-
+          if (config.detailView) {
+            route.children.push({ path: 'detail/:pid', component: DetailComponent });
+          }
           this._router.config[0].children.push(route);
         });
       }

projects/sonar/src/app/app.component.html

@@ -14,5 +14,8 @@
  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/>.
 -->
-<ngx-spinner type="ball-spin-clockwise" size="medium" bdColor="rgba(51,51,51,0.3)" color="#000"></ngx-spinner>
+<ngx-spinner color="#fff" size="medium" type="ball-zig-zag" [fullScreen]="true">
+  <p class="text-white" translate>Loading…</p>
+</ngx-spinner>
 <router-outlet></router-outlet>
+<p-confirmDialog />

projects/sonar/src/app/app.module.ts

@@ -30,20 +30,25 @@ 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 { CarouselModule } from 'primeng/carousel';
+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 { PaginatorModule } from 'primeng/paginator';
+import { PanelModule } from 'primeng/panel';
+import { SplitButtonModule } from 'primeng/splitbutton';
+import { StepsModule } from 'primeng/steps';
+import { TabViewModule } from 'primeng/tabview';
+import { ToolbarModule } from 'primeng/toolbar';
 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';
 import { AppTranslateLoader } from './app-translate-loader';
 import { AppComponent } from './app.component';
+import { FieldDescriptionComponent } from './core/field-description/field-description.component';
 import { FileLinkPipe } from './core/file-link.pipe';
 import { FileSizePipe } from './core/filesize.pipe';
 import { HighlightJsonPipe } from './core/highlight-json.pipe';
@@ -57,6 +62,7 @@ import { ReviewComponent } from './deposit/review/review.component';
 import { UploadComponent } from './deposit/upload/upload.component';
 import { HttpInterceptor } from './interceptor/http.interceptor';
 import { ContributorsPipe } from './pipe/contributors.pipe';
+import { FaIconClassPipe } from './pipe/fa-icon-class.pipe';
 import { LanguageValuePipe } from './pipe/language-value.pipe';
 import { BriefViewComponent as CollectionBriefViewComponent } from './record/collection/brief-view/brief-view.component';
 import { DetailComponent as CollectionDetailComponent } from './record/collection/detail/detail.component';
@@ -67,22 +73,27 @@ 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 { OtherFilesComponent } from './record/files/other-files/other-files.component';
+import { StatsFilesComponent } from './record/files/stats-files/stats-files.component';
 import { UploadFilesComponent } from './record/files/upload-files/upload-files.component';
 import { DetailComponent as HepvsProjectDetailComponent } from './record/hepvs/project/detail/detail.component';
+
+import { ConfirmDialogModule } from 'primeng/confirmdialog';
+import { DialogModule } from 'primeng/dialog';
+import { FilesComponent } from './deposit/files/files.component';
+import { MetadataComponent } from './deposit/metadata/metadata.component';
 import { IdentifierComponent } from './record/identifier/identifier.component';
 import { DetailComponent as OrganisationDetailComponent } from './record/organisation/detail/detail.component';
 import { OrganisationComponent } from './record/organisation/organisation.component';
 import { BriefViewComponent as ProjectBriefViewComponent } from './record/project/brief-view/brief-view.component';
 import { DetailComponent as ProjectDetailComponent } from './record/project/detail/detail.component';
 import { BriefViewComponent as SubdivisionBriefViewComponent } from './record/subdivision/brief-view/brief-view.component';
-import { DetailComponent as SubdivisionDetailComponent } from './record/subdivision/detail/detail.component';
-import { DetailComponent as UserDetailComponent } from './record/user/detail/detail.component';
 import { UserComponent } from './record/user/user.component';
 import { ValidationComponent } from './record/validation/validation.component';
 import { UserService } from './user.service';
-import { OtherFilesComponent } from './record/files/other-files/other-files.component';
-import { FaIconClassPipe } from './pipe/fa-icon-class.pipe';
-import { StatsFilesComponent } from './record/files/stats-files/stats-files.component';
+import { SwisscoveryComponent } from './deposit/editor/swisscovery/swisscovery.component';
+import { MessagesModule } from 'primeng/messages';
+
 
 export function appInitializerFactory(appInitializerService: AppInitializerService): () => Promise<any> {
   return () => appInitializerService.initialize().toPromise();
@@ -100,7 +111,6 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
     UserComponent,
     DocumentDetailComponent,
     OrganisationDetailComponent,
-    UserDetailComponent,
     JoinPipe,
     LanguageValuePipe,
     DashboardComponent,
@@ -124,22 +134,28 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
     CollectionBriefViewComponent,
     CollectionDetailComponent,
     SubdivisionBriefViewComponent,
-    SubdivisionDetailComponent,
     ContributorsPipe,
     ContributionsComponent,
     ContributionComponent,
     UploadFilesComponent,
     FileItemComponent,
     OtherFilesComponent,
     FaIconClassPipe,
-    StatsFilesComponent
+    StatsFilesComponent,
+    FieldDescriptionComponent,
+    MetadataComponent,
+    FilesComponent,
+    SwisscoveryComponent
   ],
   imports: [
     BrowserModule,
     BrowserAnimationsModule,
     AppRoutingModule,
     HttpClientModule,
     CollapseModule.forRoot(),
+    StepsModule,
+    ToolbarModule,
+    TabViewModule ,
     TabsModule.forRoot(),
     TooltipModule.forRoot(),
     ModalModule.forRoot(),
@@ -164,7 +180,11 @@ export function minElementError(err: any, field: FormlyFieldConfig) {
     PanelModule,
     DividerModule,
     CarouselModule,
-    PaginatorModule
+    PaginatorModule,
+    SplitButtonModule,
+    DialogModule,
+    ConfirmDialogModule,
+    MessagesModule
   ],
   providers: [
     {

projects/sonar/src/app/core/field-description/field-description.component.html

@@ -0,0 +1,30 @@
+
+@if (field()) {
+  <div class="grid">
+    <dt class="col-4">{{ label() }}</dt>
+    <dd class="col mb-0">
+      @if(type() === 'array') {
+        <ul class="list-none p-0 mb-0">
+          @for (value of field(); track value; let last=$last; let index=$index) {
+            <li>
+              @if (template) {
+                <ng-container
+                  *ngTemplateOutlet="template; context: { $implicit: value, last, index }"/>
+              } @else {
+                {{ value }}
+              }
+            </li>
+          }
+        </ul>
+      }
+      @else {
+        @if (template) {
+          <ng-container
+            *ngTemplateOutlet="template; context: { $implicit: field() }"/>
+        } @else {
+          {{ field() }}
+        }
+      }
+    </dd>
+  </div>
+}

projects/sonar/src/app/core/field-description/field-description.component.ts

@@ -0,0 +1,33 @@
+import { AfterContentInit, Component, ContentChildren, QueryList, TemplateRef, computed, input } from '@angular/core';
+import { PrimeTemplate } from 'primeng/api';
+import { Nullable } from 'primeng/ts-helpers';
+
+@Component({
+  selector: 'sonar-field-description',
+  templateUrl: './field-description.component.html'
+})
+export class FieldDescriptionComponent implements AfterContentInit {
+  label = input<string>();
+  field = input<any>();
+  type = computed(() => this.getType());
+  template: Nullable<TemplateRef<any>>;
+
+  @ContentChildren(PrimeTemplate) templates: QueryList<PrimeTemplate> | null;
+
+  ngAfterContentInit() {
+    (this.templates as QueryList<PrimeTemplate>).forEach((item) => {
+        switch (item.getType()) {
+            case 'template':
+                this.template = item.template;
+                break;
+        }
+      });
+    }
+    getType() {
+      const field = this.field();
+      if (Array.isArray(field)) {
+        return 'array';
+      }
+      return typeof field;
+    }
+}