Rename edit to InOut, form to edit

CentreForDigitalHumanities · Oct 3, 2024 · b8e190b · b8e190b
1 parent a10906e
commit b8e190b
Show file tree

Hide file tree

Showing 9 changed files with 97 additions and 44 deletions.
diff --git a/frontend/src/app/app.module.ts b/frontend/src/app/app.module.ts
@@ -20,7 +20,7 @@ import { AppComponent } from './app.component';
 import { CorpusDefinitionsModule } from './corpus-definitions/corpus-definitions.module';
 import { CreateDefinitionComponent } from './corpus-definitions/create-definition/create-definition.component';
 import { DefinitionsOverviewComponent } from './corpus-definitions/definitions-overview/definitions-overview.component';
-import { EditDefinitionComponent } from './corpus-definitions/edit-definition/edit-definition.component';
+import { DefinitionInOutComponent } from './corpus-definitions/definition-in-out/definition-in-out.component';
 import { CorpusFormComponent } from './corpus-definitions/form/corpus-form/corpus-form.component';
 import { FieldFormComponent } from './corpus-definitions/form/field-form/field-form.component';
 import { MetaFormComponent } from './corpus-definitions/form/meta-form/meta-form.component';
@@ -148,11 +148,11 @@ export const appRoutes: Routes = [
                 component: CreateDefinitionComponent,
             },
             {
-                path: 'edit/:corpusID',
-                component: EditDefinitionComponent,
+                path: 'io/:corpusID',
+                component: DefinitionInOutComponent,
             },
             {
-                path: 'form/:corpusID',
+                path: 'edit/:corpusID',
                 component: CorpusFormComponent,
             },
             {

diff --git a/frontend/src/app/corpus-definitions/corpus-definitions.module.ts b/frontend/src/app/corpus-definitions/corpus-definitions.module.ts
@@ -2,7 +2,7 @@ import { NgModule } from '@angular/core';
 import { DefinitionsOverviewComponent } from './definitions-overview/definitions-overview.component';
 import { SharedModule } from '@shared/shared.module';
 import { CreateDefinitionComponent } from './create-definition/create-definition.component';
-import { EditDefinitionComponent } from './edit-definition/edit-definition.component';
+import { DefinitionInOutComponent } from './definition-in-out/definition-in-out.component';
 import { DefinitionJsonUploadComponent } from './definition-json-upload/definition-json-upload.component';
 import { ReactiveFormsModule } from '@angular/forms';
 import { MetaFormComponent } from './form/meta-form/meta-form.component';
@@ -17,7 +17,7 @@ import { DropdownModule } from 'primeng/dropdown';
     declarations: [
         CreateDefinitionComponent,
         DefinitionsOverviewComponent,
-        EditDefinitionComponent,
+        DefinitionInOutComponent,
         DefinitionJsonUploadComponent,
         MetaFormComponent,
         CorpusFormComponent,
@@ -27,7 +27,7 @@ import { DropdownModule } from 'primeng/dropdown';
     exports: [
         CreateDefinitionComponent,
         DefinitionsOverviewComponent,
-        EditDefinitionComponent,
+        DefinitionInOutComponent,
         CorpusFormComponent,
     ],
     imports: [

diff --git a/...definition/edit-definition.component.html → ...n-in-out/definition-in-out.component.html b/...definition/edit-definition.component.html → ...n-in-out/definition-in-out.component.html
@@ -4,7 +4,8 @@
             <ul>
                 <li><a [routerLink]="['/']">Corpora</a></li>
                 <li><a [routerLink]="['../..']">Definitions</a></li>
-                <li class="is-active" aria-current="page"><a>{{corpus.definition?.meta.title || '...'}}</a></li>
+                <li class="is-active" aria-current="page"><a>{{corpus.definition?.meta.title ||
+                        '...'}}: import/export</a></li>
             </ul>
         </nav>
 
@@ -29,14 +30,13 @@ <h1 class="title">Edit corpus "{{corpus.definition?.meta.title || '...'}}"</h1>
 
         <form>
             <div class="block">
-                <ia-definition-json-upload
-                    [reset]="reset$" (upload)="onJSONUpload($event)">
+                <ia-definition-json-upload [reset]="reset$" (upload)="onJSONUpload($event)">
                 </ia-definition-json-upload>
             </div>
 
             <div class="block">
-                <button class="button is-primary" [class.is-loading]="corpus.loading$ | async"
-                    type="submit" (click)="submit()">
+                <button class="button is-primary" [class.is-loading]="corpus.loading$ | async" type="submit"
+                    (click)="submit()">
                     <span class="icon" aria-hidden="true">
                         <fa-icon [icon]="formIcons.confirm"></fa-icon>
                     </span>
@@ -62,4 +62,4 @@ <h1 class="title">Edit corpus "{{corpus.definition?.meta.title || '...'}}"</h1>
             </div>
         </form>
     </div>
-</section>
+</section>
diff --git a/...definition/edit-definition.component.scss → ...n-in-out/definition-in-out.component.scss b/...definition/edit-definition.component.scss → ...n-in-out/definition-in-out.component.scss
diff --git a/...inition/edit-definition.component.spec.ts → ...n-out/definition-in-out.component.spec.ts b/...inition/edit-definition.component.spec.ts → ...n-out/definition-in-out.component.spec.ts
@@ -1,18 +1,18 @@
 import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
 
-import { EditDefinitionComponent } from './edit-definition.component';
+import { DefinitionInOutComponent } from './definition-in-out.component';
 import { commonTestBed } from '../../common-test-bed';
 
 describe('EditDefinitionComponent', () => {
-    let component: EditDefinitionComponent;
-    let fixture: ComponentFixture<EditDefinitionComponent>;
+    let component: DefinitionInOutComponent;
+    let fixture: ComponentFixture<DefinitionInOutComponent>;
 
     beforeEach(waitForAsync(() => {
         commonTestBed().testingModule.compileComponents();
     }));
 
     beforeEach(() => {
-        fixture = TestBed.createComponent(EditDefinitionComponent);
+        fixture = TestBed.createComponent(DefinitionInOutComponent);
         component = fixture.componentInstance;
         fixture.detectChanges();
     });

diff --git a/...t-definition/edit-definition.component.ts → ...ion-in-out/definition-in-out.component.ts b/...t-definition/edit-definition.component.ts → ...ion-in-out/definition-in-out.component.ts
@@ -8,11 +8,11 @@ import * as _ from 'lodash';
 import { HttpErrorResponse } from '@angular/common/http';
 
 @Component({
-    selector: 'ia-edit-definition',
-    templateUrl: './edit-definition.component.html',
-    styleUrls: ['./edit-definition.component.scss'],
+    selector: 'ia-definition-in-out',
+    templateUrl: './definition-in-out.component.html',
+    styleUrls: ['./definition-in-out.component.scss'],
 })
-export class EditDefinitionComponent {
+export class DefinitionInOutComponent {
     actionIcons = actionIcons;
     formIcons = formIcons;
 
@@ -22,19 +22,18 @@ export class EditDefinitionComponent {
 
     error: Error;
 
-    constructor(
-        private apiService: ApiService,
-        private route: ActivatedRoute,
-
-    ) {
+    constructor(private apiService: ApiService, private route: ActivatedRoute) {
         const id = parseInt(this.route.snapshot.params['corpusID'], 10);
         this.corpus = new CorpusDefinition(this.apiService, id);
     }
 
     downloadJSON() {
         const data = this.corpus.toDefinition();
         const content = JSON.stringify(data, undefined, 4);
-        const blob = new Blob([content], { type: `application/json;charset=utf-8`, endings: 'native' });
+        const blob = new Blob([content], {
+            type: `application/json;charset=utf-8`,
+            endings: 'native',
+        });
         const filename = data.name + '.json';
         saveAs(blob, filename);
     }
@@ -46,7 +45,7 @@ export class EditDefinitionComponent {
     submit() {
         this.corpus.save().subscribe(
             () => this.reset(),
-            (err: HttpErrorResponse) => this.error = err,
+            (err: HttpErrorResponse) => (this.error = err)
         );
     }
 

diff --git a/frontend/src/app/corpus-definitions/definitions-overview/definitions-overview.component.html b/frontend/src/app/corpus-definitions/definitions-overview/definitions-overview.component.html
@@ -38,16 +38,16 @@ <h1 class="title">Corpus definitions</h1>
                                 </span>
                             </a>
                             &nbsp;
-                            <a class="button" [routerLink]="['form', corpus.id]">
+                            <a class="button" [routerLink]="['edit', corpus.id]">
                                 <span class="icon" aria-label="edit">
-                                    <fa-icon [icon]="documentIcons.text"></fa-icon>
+                                    <fa-icon [icon]="actionIcons.edit"></fa-icon>
                                 </span>
                             </a>
                             &nbsp;
                             <a class="button"
-                                [routerLink]="['edit', corpus.id]">
-                                <span class="icon" aria-label="edit">
-                                    <fa-icon [icon]="actionIcons.edit"></fa-icon>
+                                [routerLink]="['io', corpus.id]">
+                                <span class="icon" aria-label="import-export">
+                                    <fa-icon [icon]="actionIcons.inOut"></fa-icon>
                                 </span>
                             </a>
                             &nbsp;

diff --git a/frontend/src/app/corpus-definitions/form/corpus-form/corpus-form.component.html b/frontend/src/app/corpus-definitions/form/corpus-form/corpus-form.component.html
@@ -1,15 +1,24 @@
 <div class="section">
-    <div class="container is-readable">
+    <div class="container">
+        <nav aria-label="secondary navigation" class="breadcrumb">
+            <ul>
+                <li><a [routerLink]="['/']">Corpora</a></li>
+                <li><a [routerLink]="['../..']">Definitions</a></li>
+                <li class="is-active" aria-current="page"><a>{{(corpus$ | async).definition?.meta.title ||
+                        '...'}}: edit</a></li>
+            </ul>
+        </nav>
+
         <p-steps [model]="steps$ | async" [readonly]="false" [activeIndex]="activeStep$ | async"
             (activeIndexChange)="onActiveIndexChange($event)" />
     </div>
-    </div>
+</div>
 <ng-container [ngSwitch]="activeStep$ | async">
     <div *ngSwitchCase="0" class="section">
         <div class="container is-readable"><ia-meta-form *ngIf="corpus$ | async as corpus" [corpus]="corpus" /></div>
     </div>
     <div *ngSwitchCase="1" class="section">
-            <div class="container is-readable"><ia-upload-sample /></div>
+        <div class="container is-readable"><ia-upload-sample /></div>
     </div>
     <div *ngSwitchCase="2" class="section">
         <div class="container is-readable"><ia-field-form *ngIf="corpus$ | async as corpus" [corpus]="corpus" /></div>

diff --git a/frontend/src/app/shared/icons.ts b/frontend/src/app/shared/icons.ts
@@ -5,14 +5,58 @@ import {
 } from '@fortawesome/free-regular-svg-icons';
 import {
     IconDefinition as SolidIconDefinition,
-    faAngleDown, faAngleUp, faArrowLeft, faArrowRight, faAt, faBook, faBookmark,
-    faBookOpen, faBuilding, faChartColumn, faCheck, faChevronLeft, faChevronRight, faCog,
-    faCogs, faDatabase, faDiagramProject, faDownload, faEnvelope, faEye, faFilter,
-    faHistory, faImage, faInfo, faInfoCircle, faLink, faList, faLocationDot, faLock,
-    faMinus, faPalette, faPencil, faPlus, faQuestionCircle, faSearch, faSearchMinus,
-    faSearchPlus, faSignOut, faSortAlphaAsc, faSortAlphaDesc, faSortNumericAsc,
-    faSortNumericDesc, faSquare, faTable, faTags, faTimes, faTrashCan, faUndo, faUpload,
-    faUser
+    faAngleDown,
+    faAngleUp,
+    faArrowLeft,
+    faArrowRight,
+    faAt,
+    faBook,
+    faBookmark,
+    faBookOpen,
+    faBuilding,
+    faChartColumn,
+    faCheck,
+    faChevronLeft,
+    faChevronRight,
+    faCog,
+    faCogs,
+    faDatabase,
+    faDiagramProject,
+    faDownload,
+    faEnvelope,
+    faEye,
+    faFilter,
+    faHistory,
+    faImage,
+    faInfo,
+    faInfoCircle,
+    faLink,
+    faList,
+    faLocationDot,
+    faLock,
+    faMinus,
+    faPalette,
+    faPencil,
+    faPlus,
+    faQuestionCircle,
+    faSearch,
+    faSearchMinus,
+    faSearchPlus,
+    faSignOut,
+    faSortAlphaAsc,
+    faSortAlphaDesc,
+    faSortNumericAsc,
+    faSortNumericDesc,
+    faSquare,
+    faTable,
+    faTags,
+    faTimes,
+    faTrashCan,
+    faUndo,
+    faUpload,
+    faUser,
+    faArrowsUpDown,
+    faArrowRightArrowLeft,
 } from '@fortawesome/free-solid-svg-icons';
 
 type IconDefinition = SolidIconDefinition | RegularIconDefinition;
@@ -50,6 +94,7 @@ export const actionIcons: Icons = {
     less: faMinus,
     prev: faArrowLeft,
     next: faArrowRight,
+    inOut: faArrowRightArrowLeft,
     link: faLink,
     dropdown: faAngleDown,
     dropup: faAngleUp,