geonetwork-ui 2.4.0-dev.e4dc8777 → 2.4.0-dev.e689547d

package/src/libs/api/repository/src/lib/gn4/platform/gn4-platform.service.ts

@@ -1,5 +1,5 @@
 import { Injectable } from '@angular/core'
-import { Observable, combineLatest, of, switchMap } from 'rxjs'
+import { combineLatest, Observable, of, switchMap } from 'rxjs'
 import { catchError, map, shareReplay, tap } from 'rxjs/operators'
 import {
   MeApiService,
@@ -192,17 +192,16 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     if (this.keywordsByThesauri[uri]) {
       return this.keywordsByThesauri[uri]
     }
-    const keywords$: Observable<KeywordApiResponse[]> =
-      this.registriesApiService.searchKeywords(
-        null,
-        this.langService.iso3,
-        1000,
-        0,
-        null,
-        null,
-        null,
-        `${uri}*`
-      ) as Observable<KeywordApiResponse[]>
+    const keywords$ = this.registriesApiService.searchKeywords(
+      null,
+      this.langService.iso3,
+      1000,
+      0,
+      null,
+      null,
+      null,
+      `${uri}*`
+    ) as Observable<KeywordApiResponse[]>
 
     this.keywordsByThesauri[uri] = combineLatest([
       keywords$,
@@ -221,6 +220,38 @@ export class Gn4PlatformService implements PlatformServiceInterface {
     return this.keywordsByThesauri[uri]
   }
 
+  searchKeywordsInThesaurus(query: string, thesaurusId: string) {
+    return this.allThesaurus$.pipe(
+      switchMap((thesauri) => {
+        const strippedThesaurusId = thesaurusId.replace(
+          'geonetwork.thesaurus.',
+          ''
+        )
+        if (!thesauri.find((thes) => thes.key === strippedThesaurusId))
+          return of([])
+        return this.registriesApiService
+          .searchKeywords(
+            query,
+            this.langService.iso3,
+            100,
+            0,
+            null,
+            [strippedThesaurusId],
+            null
+          )
+          .pipe(
+            map((keywords: KeywordApiResponse[]) =>
+              this.mapper.keywordsFromApi(
+                keywords,
+                thesauri,
+                this.langService.iso3
+              )
+            )
+          )
+      })
+    )
+  }
+
   getUserFeedbacks(uuid: string): Observable<UserFeedback[]> {
     return this.userfeedbackApiService.getUserComments(uuid).pipe(
       map((userFeedbacks) =>

package/src/libs/common/domain/src/lib/model/record/contact.model.ts

@@ -1,4 +1,5 @@
 import { Organization } from './organization.model'
+import { marker } from '@biesbjerg/ngx-translate-extract-marker'
 
 export const RoleValues = [
   'unspecified',
@@ -24,6 +25,33 @@ export const RoleValues = [
   'user', // Party who uses the resource
 ]
 
+export const RoleLabels = new Map<Role, string>([
+  ['unspecified', marker('domain.contact.role.unspecified')],
+  ['other', marker('domain.contact.role.other')],
+  ['author', marker('domain.contact.role.author')],
+  ['collaborator', marker('domain.contact.role.collaborator')],
+  ['contributor', marker('domain.contact.role.contributor')],
+  ['custodian', marker('domain.contact.role.custodian')],
+  ['distributor', marker('domain.contact.role.distributor')],
+  ['editor', marker('domain.contact.role.editor')],
+  ['funder', marker('domain.contact.role.funder')],
+  ['mediator', marker('domain.contact.role.mediator')],
+  ['originator', marker('domain.contact.role.originator')],
+  ['owner', marker('domain.contact.role.owner')],
+  ['point_of_contact', marker('domain.contact.role.point_of_contact')],
+  [
+    'principal_investigator',
+    marker('domain.contact.role.principal_investigator'),
+  ],
+  ['processor', marker('domain.contact.role.processor')],
+  ['publisher', marker('domain.contact.role.publisher')],
+  ['resource_provider', marker('domain.contact.role.resource_provider')],
+  ['rights_holder', marker('domain.contact.role.rights_holder')],
+  ['sponsor', marker('domain.contact.role.sponsor')],
+  ['stakeholder', marker('domain.contact.role.stakeholder')],
+  ['user', marker('domain.contact.role.user')],
+])
+
 export type Role = typeof RoleValues[number]
 
 export interface Individual {

package/src/libs/common/domain/src/lib/model/record/metadata.model.ts

@@ -67,6 +67,7 @@ export interface Keyword {
   description?: string
   type: KeywordType
   thesaurus?: ThesaurusModel
+  bbox?: [number, number, number, number]
 }
 // languages should be expressed using two-letters ISO 639-1 codes
 export type LanguageCode = string
@@ -159,7 +160,8 @@ export interface GraphicOverview {
 }
 
 export interface DatasetSpatialExtent {
-  geometry: Geometry
+  bbox?: [number, number, number, number]
+  geometry?: Geometry
   description?: string
 }
 

package/src/libs/common/domain/src/lib/model/user/user.model.ts

@@ -5,6 +5,6 @@ export interface UserModel {
   name: string
   surname: string
   email: string
-  organisation: string
+  organisation?: string
   profileIcon?: string
 }

package/src/libs/common/domain/src/lib/platform.service.interface.ts

@@ -21,6 +21,10 @@ export abstract class PlatformServiceInterface {
     keywordTypes: KeywordType[]
   ): Observable<Keyword[]>
   abstract getKeywordsByUri(uri: string): Observable<Keyword[]>
+  abstract searchKeywordsInThesaurus(
+    query: string,
+    thesaurusId: string
+  ): Observable<Keyword[]>
   abstract getUserFeedbacks(recordUuid: string): Observable<UserFeedback[]>
   abstract postUserFeedbacks(recordUuid: UserFeedback): Observable<void>
 }

package/src/libs/common/domain/src/lib/repository/records-repository.interface.ts

@@ -30,6 +30,18 @@ export abstract class RecordsRepositoryInterface {
     uniqueIdentifier: string
   ): Observable<[CatalogRecord, string, boolean] | null>
 
+  /**
+   * This emits once:
+   * - record object with a new unique identifier and suffixed title
+   * - serialized representation of the record as text
+   * - false, as the duplicated record is always a draft
+   * @param uniqueIdentifier
+   * @returns Observable<[CatalogRecord, string, false] | null>
+   */
+  abstract openRecordForDuplication(
+    uniqueIdentifier: string
+  ): Observable<[CatalogRecord, string, false] | null>
+
   /**
    * @param record
    * @param referenceRecordSource
@@ -40,6 +52,14 @@ export abstract class RecordsRepositoryInterface {
     referenceRecordSource?: string
   ): Observable<string>
 
+  /**
+   * @param uniqueIdentifier
+   * @returns Observable<void> Returns when record is deleted
+   */
+  abstract deleteRecord(uniqueIdentifier: string): Observable<void>
+
+  abstract generateTemporaryId(): string
+
   /**
    * @param record
    * @param referenceRecordSource
@@ -52,7 +72,9 @@ export abstract class RecordsRepositoryInterface {
 
   abstract clearRecordDraft(uniqueIdentifier: string): void
   abstract recordHasDraft(uniqueIdentifier: string): boolean
+  abstract isRecordNotYetSaved(uniqueIdentifier: string): boolean
 
   /** will return all pending drafts, both published and not published */
   abstract getAllDrafts(): Observable<CatalogRecord[]>
+  abstract draftsChanged$: Observable<void>
 }

package/src/libs/common/fixtures/src/index.ts

@@ -11,3 +11,5 @@ export * from './lib/records.fixtures'
 export * from './lib/repository.fixtures'
 export * from './lib/user.fixtures'
 export * from './lib/user-feedbacks.fixtures'
+
+export * from './lib/editor'

package/src/libs/common/fixtures/src/lib/editor/editor.fixtures.ts

@@ -0,0 +1,156 @@
+export const EDITOR_CONFIG = () => ({
+  pages: [
+    {
+      labelKey: 'Resource description',
+      sections: [EDITOR_SECTION_ABOUT()],
+    },
+    {
+      labelKey: 'Resources',
+      sections: [EDITOR_SECTION_CLASSIFICATION()],
+    },
+    {
+      labelKey: 'Access and contact',
+      sections: [
+        EDITOR_SECTION_USE_AND_ACCESS_CONDITIONS(),
+        EDITOR_SECTION_DATA_MANAGER(),
+      ],
+    },
+  ],
+})
+
+export const EDITOR_SECTION_ABOUT = () => ({
+  labelKey: 'About the resource',
+  descriptionKey: 'This section describes the resource.',
+  hidden: false,
+  fields: [
+    EDITOR_FIELD_TITLE(),
+    EDITOR_FIELD_ABSTRACT(),
+    EDITOR_FIELD_RESOURCE_UPDATED(),
+    EDITOR_FIELD_RECORD_UPDATED(),
+    EDITOR_FIELD_UPDATE_FREQUENCY(),
+    EDITOR_FIELD_TEMPORAL_EXTENTS(),
+  ],
+})
+
+export const EDITOR_SECTION_DATA_MANAGER = () => ({
+  labelKey: 'Data manager',
+  descriptionKey: '',
+  hidden: false,
+  fields: [],
+})
+
+export const EDITOR_SECTION_USE_AND_ACCESS_CONDITIONS = () => ({
+  labelKey: 'Data manager',
+  descriptionKey: '',
+  hidden: false,
+  fields: [EDITOR_FIELD_LICENSE()],
+})
+
+export const EDITOR_SECTION_CLASSIFICATION = () => ({
+  labelKey: 'Classification',
+  descriptionKey: 'The classification has an impact on the access to the data.',
+  hidden: false,
+  fields: [EDITOR_FIELD_KEYWORDS(), EDITOR_FIELD_UNIQUE_IDENTIFIER()],
+})
+
+export const EDITOR_FIELD_TITLE = () => ({
+  model: 'title',
+  hidden: false,
+  value: 'Accroches vélos MEL',
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.title',
+  },
+})
+
+export const EDITOR_FIELD_ABSTRACT = () => ({
+  model: 'abstract',
+  hidden: false,
+  value: 'Abstract',
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.abstract',
+  },
+})
+
+export const EDITOR_FIELD_RESOURCE_UPDATED = () => ({
+  model: 'resourceUpdated',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.resourceUpdated',
+  },
+})
+
+export const EDITOR_FIELD_RECORD_UPDATED = () => ({
+  model: 'recordUpdated',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.recordUpdated',
+    locked: true,
+  },
+  value: '2024-07-16T05:18:53.000Z',
+  onSaveProcess: '${dateNow()}',
+})
+
+export const EDITOR_FIELD_UPDATE_FREQUENCY = () => ({
+  model: 'updateFrequency',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.updateFrequency',
+  },
+  value: 'unknown',
+})
+
+export const EDITOR_FIELD_TEMPORAL_EXTENTS = () => ({
+  model: 'temporalExtents',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.temporalExtents',
+  },
+  value: [],
+})
+
+export const EDITOR_FIELD_SPATIAL_EXTENTS = () => ({
+  model: 'spatialExtents',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.spatialExtents',
+  },
+})
+
+export const EDITOR_FIELD_KEYWORDS = () => ({
+  model: 'keywords',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.keywords',
+  },
+})
+
+export const EDITOR_FIELD_UNIQUE_IDENTIFIER = () => ({
+  model: 'uniqueIdentifier',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.uniqueIdentifier',
+    locked: true,
+  },
+  value: 'accroche_velos',
+})
+
+export const EDITOR_FIELD_LICENSE = () => ({
+  model: 'licenses',
+  hidden: false,
+  formFieldConfig: {
+    labelKey: 'editor.record.form.field.license',
+    locked: true,
+  },
+})
+
+export const EDITOR_FIELDS = () => [
+  EDITOR_FIELD_TITLE(),
+  EDITOR_FIELD_ABSTRACT(),
+  EDITOR_FIELD_RESOURCE_UPDATED(),
+  EDITOR_FIELD_RECORD_UPDATED(),
+  EDITOR_FIELD_UPDATE_FREQUENCY(),
+  EDITOR_FIELD_TEMPORAL_EXTENTS(),
+  EDITOR_FIELD_SPATIAL_EXTENTS(),
+  EDITOR_FIELD_KEYWORDS(),
+  EDITOR_FIELD_UNIQUE_IDENTIFIER(),
+]

package/src/libs/common/fixtures/src/lib/editor/index.ts

@@ -0,0 +1 @@
+export * from './editor.fixtures'

package/src/libs/common/fixtures/src/lib/organisations.fixture.ts

@@ -1,6 +1,15 @@
 import { deepFreeze } from './utils/freeze'
 import { Organization } from '../../../../../libs/common/domain/src/lib/model/record'
 
+export const REGION_HAUT_DE_FRANCE_ORG_FIXTURE = (): Organization => ({
+  name: 'Région Hauts-de-France',
+  description: 'A very sweet description about Région Hauts-de-France.',
+  email: 'contact@region-haut-de-france.com',
+  website: new URL('https://region-haut-de-france.com/'),
+  logoUrl: new URL('https://region-haut-de-france.com/logo.png'),
+  recordCount: 4,
+})
+
 export const ORGANISATIONS_FIXTURE: Organization[] = deepFreeze([
   {
     name: 'I Data Org',
@@ -114,4 +123,5 @@ export const ORGANISATIONS_FIXTURE: Organization[] = deepFreeze([
     logoUrl: new URL('https://my-geonetwork.org/logo12.png'),
     recordCount: 2,
   },
+  REGION_HAUT_DE_FRANCE_ORG_FIXTURE(),
 ])

package/src/libs/data-access/gn4/src/openapi/api/records.api.service.ts

@@ -7201,11 +7201,7 @@ export class RecordsApiService {
     }
 
     // to determine the Content-Type header
-    const consumes: string[] = [
-      'application/xml',
-      'application/json',
-      'application/x-www-form-urlencoded',
-    ]
+    const consumes: string[] = ['application/xml']
     const httpContentTypeSelected: string | undefined =
       this.configuration.selectHeaderContentType(consumes)
     if (httpContentTypeSelected !== undefined) {

package/src/libs/data-access/gn4/src/spec.yaml

@@ -1832,14 +1832,6 @@ paths:
             schema:
               type: string
               description: XML fragment.
-          application/json:
-            schema:
-              type: string
-              description: XML fragment.
-          application/x-www-form-urlencoded:
-            schema:
-              type: string
-              description: XML fragment.
       responses:
         default:
           description: default response

package/src/libs/feature/editor/src/lib/+state/editor.actions.ts

@@ -28,3 +28,10 @@ export const saveRecordFailure = createAction(
 )
 
 export const draftSaveSuccess = createAction('[Editor] Draft save success')
+
+export const undoRecordDraft = createAction('[Editor] Undo record draft')
+
+export const setCurrentPage = createAction(
+  '[Editor] Set current page',
+  props<{ page: number }>()
+)

package/src/libs/feature/editor/src/lib/+state/editor.effects.ts

@@ -6,9 +6,9 @@ import * as EditorActions from './editor.actions'
 import { EditorService } from '../services/editor.service'
 import { Store } from '@ngrx/store'
 import {
+  selectEditorConfig,
   selectRecord,
   selectRecordAlreadySavedOnce,
-  selectRecordFieldsConfig,
 } from './editor.selectors'
 import { RecordsRepositoryInterface } from '../../../../../../libs/common/domain/src/lib/repository/records-repository.interface'
 
@@ -24,7 +24,7 @@ export class EditorEffects {
       ofType(EditorActions.saveRecord),
       withLatestFrom(
         this.store.select(selectRecord),
-        this.store.select(selectRecordFieldsConfig),
+        this.store.select(selectEditorConfig),
         this.store.select(selectRecordAlreadySavedOnce)
       ),
       switchMap(([, record, fieldsConfig, alreadySavedOnce]) =>
@@ -70,6 +70,21 @@ export class EditorEffects {
     )
   )
 
+  undoRecordDraft$ = createEffect(() =>
+    this.actions$.pipe(
+      ofType(EditorActions.undoRecordDraft),
+      withLatestFrom(this.store.select(selectRecord)),
+      switchMap(([, record]) => this.editorService.undoRecordDraft(record)),
+      map(([record, recordSource, alreadySavedOnce]) =>
+        EditorActions.openRecord({
+          record,
+          alreadySavedOnce,
+          recordSource,
+        })
+      )
+    )
+  )
+
   checkHasChangesOnOpen$ = createEffect(() =>
     this.actions$.pipe(
       ofType(EditorActions.openRecord),

package/src/libs/feature/editor/src/lib/+state/editor.facade.ts

@@ -25,8 +25,12 @@ export class EditorFacade {
   changedSinceSave$ = this.store.pipe(
     select(EditorSelectors.selectRecordChangedSinceSave)
   )
-  recordFields$ = this.store.pipe(select(EditorSelectors.selectRecordFields))
+  currentSections$ = this.store.pipe(
+    select(EditorSelectors.selectRecordSections)
+  )
   draftSaveSuccess$ = this.actions$.pipe(ofType(EditorActions.draftSaveSuccess))
+  currentPage$ = this.store.pipe(select(EditorSelectors.selectCurrentPage))
+  editorConfig$ = this.store.pipe(select(EditorSelectors.selectEditorConfig))
 
   openRecord(
     record: CatalogRecord,
@@ -42,7 +46,15 @@ export class EditorFacade {
     this.store.dispatch(EditorActions.saveRecord())
   }
 
+  undoRecordDraft() {
+    this.store.dispatch(EditorActions.undoRecordDraft())
+  }
+
   updateRecordField(field: string, value: unknown) {
     this.store.dispatch(EditorActions.updateRecordField({ field, value }))
   }
+
+  setCurrentPage(page: number) {
+    this.store.dispatch(EditorActions.setCurrentPage({ page }))
+  }
 }

package/src/libs/feature/editor/src/lib/+state/editor.models.ts

@@ -1 +1,12 @@
+import { EditorField, EditorFieldValue, EditorSection } from '../models'
+
 export type SaveRecordError = string
+
+export interface EditorFieldWithValue {
+  config: EditorField
+  value: EditorFieldValue
+}
+
+export type EditorSectionWithValues = EditorSection & {
+  fieldsWithValues: EditorFieldWithValue[]
+}

package/src/libs/feature/editor/src/lib/+state/editor.reducer.ts

@@ -2,8 +2,8 @@ import { Action, createReducer, on } from '@ngrx/store'
 import * as EditorActions from './editor.actions'
 import { CatalogRecord } from '../../../../../../libs/common/domain/src/lib/model/record'
 import { SaveRecordError } from './editor.models'
-import { EditorFieldsConfig } from '../models/fields.model'
-import { DEFAULT_FIELDS } from '../fields.config'
+import { EditorConfig } from '../models'
+import { DEFAULT_CONFIGURATION } from '../fields.config'
 
 export const EDITOR_FEATURE_KEY = 'editor'
 
@@ -13,7 +13,7 @@ export const EDITOR_FEATURE_KEY = 'editor'
  * @property saving
  * @property saveError
  * @property changedSinceSave
- * @property fieldsConfig Configuration for the fields in the editor
+ * @property editorConfig Configuration for the fields in the editor
  */
 export interface EditorState {
   record: CatalogRecord | null
@@ -22,7 +22,8 @@ export interface EditorState {
   saving: boolean
   saveError: SaveRecordError | null
   changedSinceSave: boolean
-  fieldsConfig: EditorFieldsConfig
+  editorConfig: EditorConfig
+  currentPage: number
 }
 
 export interface EditorPartialState {
@@ -36,7 +37,8 @@ export const initialEditorState: EditorState = {
   saving: false,
   saveError: null,
   changedSinceSave: false,
-  fieldsConfig: DEFAULT_FIELDS,
+  editorConfig: DEFAULT_CONFIGURATION,
+  currentPage: 0,
 }
 
 const reducer = createReducer(
@@ -77,6 +79,10 @@ const reducer = createReducer(
   on(EditorActions.markRecordAsChanged, (state) => ({
     ...state,
     changedSinceSave: true,
+  })),
+  on(EditorActions.setCurrentPage, (state, { page }) => ({
+    ...state,
+    currentPage: page,
   }))
 )
 

package/src/libs/feature/editor/src/lib/+state/editor.selectors.ts

@@ -1,5 +1,6 @@
 import { createFeatureSelector, createSelector } from '@ngrx/store'
 import { EDITOR_FEATURE_KEY, EditorState } from './editor.reducer'
+import { EditorSectionWithValues } from './editor.models'
 
 export const selectEditorState =
   createFeatureSelector<EditorState>(EDITOR_FEATURE_KEY)
@@ -34,16 +35,29 @@ export const selectRecordAlreadySavedOnce = createSelector(
   (state: EditorState) => state.alreadySavedOnce
 )
 
-export const selectRecordFieldsConfig = createSelector(
+export const selectEditorConfig = createSelector(
   selectEditorState,
-  (state: EditorState) => state.fieldsConfig
+  (state: EditorState) => state.editorConfig
 )
 
-export const selectRecordFields = createSelector(
+export const selectCurrentPage = createSelector(
   selectEditorState,
-  (state: EditorState) =>
-    state.fieldsConfig.map((fieldConfig) => ({
-      config: fieldConfig,
-      value: state.record?.[fieldConfig.model] ?? null,
-    }))
+  (state: EditorState) => state.currentPage
+)
+
+export const selectRecordSections = createSelector(
+  selectEditorState,
+  (state: EditorState) => {
+    const currentPage = state.editorConfig.pages[state.currentPage]
+    if (!currentPage) {
+      return [] as EditorSectionWithValues[]
+    }
+    return currentPage.sections.map((section) => ({
+      ...section,
+      fieldsWithValues: section.fields.map((fieldConfig) => ({
+        config: fieldConfig,
+        value: state.record?.[fieldConfig.model] ?? null,
+      })),
+    })) as EditorSectionWithValues[]
+  }
 )

package/src/libs/feature/editor/src/lib/components/contact-card/contact-card.component.html

@@ -0,0 +1,27 @@
+<div class="flex flex-row gap-4 items-center">
+  <div class="flex flex-row border border-gray-200 rounded-xl p-4 gap-4 w-full">
+    <gn-ui-thumbnail
+      class="w-[56px] h-[56px] rounded-[4px]"
+      [thumbnailUrl]="contact.organization.logoUrl?.href"
+      [fit]="'contain'"
+    ></gn-ui-thumbnail>
+    <div class="flex flex-col w-full">
+      <div class="flex flex-row justify-between">
+        <span
+          class="flex flex-wrap font-bold w-full"
+          data-test="contactCardName"
+          >{{ contact.firstName }} {{ contact.lastName }}</span
+        >
+      </div>
+      <div data-test="contactCardEmail">{{ contact.email }}</div>
+    </div>
+  </div>
+  <gn-ui-button
+    *ngIf="removable"
+    data-test="removeContactButton"
+    type="light"
+    extraClass="w-[20px] h-[20px] flex items-center justify-center"
+    (buttonClick)="removeContact(contact)"
+    ><span class="material-symbols-outlined"> close </span>
+  </gn-ui-button>
+</div>

package/src/libs/feature/editor/src/lib/components/contact-card/contact-card.component.ts

@@ -0,0 +1,30 @@
+import {
+  ChangeDetectionStrategy,
+  Component,
+  EventEmitter,
+  Input,
+  Output,
+} from '@angular/core'
+import { Individual } from '../../../../../../../libs/common/domain/src/lib/model/record'
+import { MatIconModule } from '@angular/material/icon'
+import { CommonModule } from '@angular/common'
+import { ButtonComponent } from '../../../../../../../libs/ui/inputs/src'
+import { ThumbnailComponent } from '../../../../../../../libs/ui/elements/src'
+
+@Component({
+  selector: 'gn-ui-contact-card',
+  templateUrl: './contact-card.component.html',
+  styleUrls: ['./contact-card.component.css'],
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  standalone: true,
+  imports: [CommonModule, MatIconModule, ButtonComponent, ThumbnailComponent],
+})
+export class ContactCardComponent {
+  @Input() contact: Individual
+  @Input() removable = true
+  @Output() contactRemoved = new EventEmitter<Individual>()
+
+  removeContact(contact: Individual) {
+    this.contactRemoved.emit(contact)
+  }
+}