Merge pull request #114 from CentreForDigitalHumanities/feature/page-…

…titles

Feature/page titles

frontend/generated/graphql.ts

@@ -897,6 +897,31 @@ export type DataEntrySourceListQueryVariables = Exact<{ [key: string]: never; }>
 
 export type DataEntrySourceListQuery = { __typename?: 'Query', sources: Array<{ __typename?: 'SourceType', id: string, name: string, editionAuthor: string, editionTitle: string, medievalAuthor: string, medievalTitle: string, numOfEpisodes: number }> };
 
+export type SourceTitleQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type SourceTitleQueryQuery = { __typename?: 'Query', source: { __typename?: 'SourceType', id: string, name: string } };
+
+export type AgentTitleQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type AgentTitleQueryQuery = { __typename?: 'Query', agentDescription?: { __typename?: 'AgentDescriptionType', id: string, name: string, source: { __typename?: 'SourceType', id: string, name: string } } | null };
+
+export type LetterTitleQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type LetterTitleQueryQuery = { __typename?: 'Query', letterDescription?: { __typename?: 'LetterDescriptionType', id: string, name: string, source: { __typename?: 'SourceType', id: string, name: string } } | null };
+
+export type GiftTitleQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type GiftTitleQueryQuery = { __typename?: 'Query', giftDescription?: { __typename?: 'GiftDescriptionType', id: string, name: string, source: { __typename?: 'SourceType', id: string, name: string } } | null };
+
+export type SpaceTitleQueryQueryVariables = Exact<{ [key: string]: never; }>;
+
+
+export type SpaceTitleQueryQuery = { __typename?: 'Query', spaceDescription?: { __typename?: 'SpaceDescriptionType', id: string, name: string, source: { __typename?: 'SourceType', id: string, name: string } } | null };
+
 export const DataEntryAgentDescriptionDocument = gql`
     query DataEntryAgentDescription($id: ID!) {
   agentDescription(id: $id) {
@@ -1258,6 +1283,117 @@ export const DataEntrySourceListDocument = gql`
   export class DataEntrySourceListGQL extends Apollo.Query<DataEntrySourceListQuery, DataEntrySourceListQueryVariables> {
     override document = DataEntrySourceListDocument;
 
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const SourceTitleQueryDocument = gql`
+    query SourceTitleQuery {
+  source(id: "") {
+    id
+    name
+  }
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class SourceTitleQueryGQL extends Apollo.Query<SourceTitleQueryQuery, SourceTitleQueryQueryVariables> {
+    override document = SourceTitleQueryDocument;
+
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const AgentTitleQueryDocument = gql`
+    query AgentTitleQuery {
+  agentDescription(id: "") {
+    id
+    name
+    source {
+      id
+      name
+    }
+  }
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class AgentTitleQueryGQL extends Apollo.Query<AgentTitleQueryQuery, AgentTitleQueryQueryVariables> {
+    override document = AgentTitleQueryDocument;
+
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const LetterTitleQueryDocument = gql`
+    query LetterTitleQuery {
+  letterDescription(id: "") {
+    id
+    name
+    source {
+      id
+      name
+    }
+  }
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class LetterTitleQueryGQL extends Apollo.Query<LetterTitleQueryQuery, LetterTitleQueryQueryVariables> {
+    override document = LetterTitleQueryDocument;
+
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const GiftTitleQueryDocument = gql`
+    query GiftTitleQuery {
+  giftDescription(id: "") {
+    id
+    name
+    source {
+      id
+      name
+    }
+  }
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class GiftTitleQueryGQL extends Apollo.Query<GiftTitleQueryQuery, GiftTitleQueryQueryVariables> {
+    override document = GiftTitleQueryDocument;
+
+    constructor(apollo: Apollo.Apollo) {
+      super(apollo);
+    }
+  }
+export const SpaceTitleQueryDocument = gql`
+    query SpaceTitleQuery {
+  spaceDescription(id: "") {
+    id
+    name
+    source {
+      id
+      name
+    }
+  }
+}
+    `;
+
+  @Injectable({
+    providedIn: 'root'
+  })
+  export class SpaceTitleQueryGQL extends Apollo.Query<SpaceTitleQueryQuery, SpaceTitleQueryQueryVariables> {
+    override document = SpaceTitleQueryDocument;
+
     constructor(apollo: Apollo.Apollo) {
       super(apollo);
     }

frontend/src/app/routes.ts

@@ -14,36 +14,47 @@ import { GiftFormComponent } from './data-entry/gift-form/gift-form.component';
 import { LetterFormComponent } from './data-entry/letter-form/letter-form.component';
 import { AgentFormComponent } from './data-entry/agent-form/agent-form.component';
 import { SourceComponent } from './data-entry/source/source.component';
+import {
+    agentFormTitleResolver, giftFormTitleResolver, letterFormTitleResolver, pageTitle,
+    SITE_NAME, sourceFormTitleResolver, spaceFormTitleResolver
+} from './titles';
 import { EpisodeFormComponent } from './data-entry/episode-form/episode-form.component';
 
 
 const routes: Routes = [
     {
         path: 'home',
+        title: SITE_NAME,
         component: HomeComponent,
     },
     {
         path: 'login',
+        title: pageTitle('Sign in'),
         component: LoginComponent,
     },
     {
         path: 'register',
+        title: pageTitle('Registration'),
         component: RegisterComponent,
     },
     {
         path: 'confirm-email/:key',
+        title: pageTitle('Confirm email'),
         component: VerifyEmailComponent,
     },
     {
         path: 'password-forgotten',
+        title: pageTitle('Forgot password'),
         component: PasswordForgottenComponent
     },
     {
         path: 'reset-password/:uid/:token',
+        title: pageTitle('Reset password'),
         component: ResetPasswordComponent
     },
     {
         path: 'user-settings',
+        title: pageTitle('Settings'),
         component: UserSettingsComponent
     },
     {
@@ -52,26 +63,32 @@ const routes: Routes = [
         children: [
             {
                 path: 'agents/:id',
+                title: agentFormTitleResolver,
                 component: AgentFormComponent,
             },
             {
                 path: 'gifts/:id',
+                title: giftFormTitleResolver,
                 component: GiftFormComponent,
             },
             {
                 path: 'letters/:id',
+                title: letterFormTitleResolver,
                 component: LetterFormComponent,
             },
             {
                 path: 'locations/:id',
+                title: spaceFormTitleResolver,
                 component: LocationFormComponent,
             },
             {
                 path: 'sources',
+                title: pageTitle('Data entry'),
                 component: SourcesComponent
             },
             {
                 path: 'sources/:id',
+                title: sourceFormTitleResolver,
                 component: SourceComponent
             },
             {

frontend/src/app/titles.ts

@@ -0,0 +1,133 @@
+import { inject } from "@angular/core";
+import { ActivatedRouteSnapshot, Params, ResolveFn } from "@angular/router";
+import { Apollo, gql, TypedDocumentNode } from "apollo-angular";
+import { SourceTitleQueryQuery, SourceTitleQueryQueryVariables } from "generated/graphql";
+import { map } from "rxjs";
+import _ from "underscore";
+
+export const SITE_NAME = 'Lettercraft & Epistolary Performance in Medieval Europe';
+export const pageTitle = (name: string) => `${name} - ${SITE_NAME}`;
+
+/**
+ * create a resolver function that relies on a graphQL query
+ *
+ * @param queryFromParams returns a graphQL query based on the route parameters
+ * @param titleFromData transforms the result of the query into a string
+ * @param watchChanges whether to keep watching the query for changes
+ * @returns a ResolverFn to resolve the title based on the query results
+ */
+const queryTitleResolver = <QueryData, QueryVariables>(
+    queryFromParams: (params: Params) => TypedDocumentNode<QueryData, QueryVariables>,
+    titleFromData: (data: QueryData) => string,
+    watchChanges = false,
+): ResolveFn<string> => {
+    return (route: ActivatedRouteSnapshot) => {
+        const query = queryFromParams(route.params);
+        const apollo = inject(Apollo);
+        const query$ = watchChanges ?
+            apollo.watchQuery({ query }).valueChanges :
+            apollo.query({ query });
+        return query$.pipe(
+            map(result => result.data),
+            map(titleFromData),
+            map(pageTitle),
+        );
+    }
+}
+
+
+const sourceTitleQuery = (params: Params) => gql<SourceTitleQueryQuery, SourceTitleQueryQueryVariables>(`
+    query SourceTitleQuery {
+        source(id: "${params['id']}") {
+            id
+            name
+        }
+}`);
+
+const sourceFormTitle = (data: SourceTitleQueryQuery) => `Edit ${data.source?.name}`;
+
+export const sourceFormTitleResolver = queryTitleResolver(
+    sourceTitleQuery, sourceFormTitle
+);
+
+type EntityDescriptionTitleQueryData<Key extends string> =
+    Record<Key, { name: string, source: { name: string } }>;
+
+type AgentTitleQueryData = EntityDescriptionTitleQueryData<'agentDescription'>;
+
+const agentTitleQuery = (params: Params) => gql<AgentTitleQueryData, unknown>(`
+    query AgentTitleQuery {
+        agentDescription(id: "${params['id']}") {
+            id
+            name
+            source { id, name }
+        }
+    }`
+);
+
+const entityDescriptionFormTitle = <Key extends string>(
+    data: EntityDescriptionTitleQueryData<Key>
+) => {
+    const key = _.first(_.without(_.keys(data), '__typename')) as Key;
+    const entity = data[key];
+    if (entity) {
+        return `Edit ${entity.name} (${entity.source.name})`;
+    } else {
+        return 'Not found';
+    }
+}
+
+export const agentFormTitleResolver = queryTitleResolver(
+    agentTitleQuery, entityDescriptionFormTitle, true
+);
+
+type LetterTitleQueryData = EntityDescriptionTitleQueryData<'letterDescription'>;
+
+const letterTitleQuery = (params: Params) => gql<LetterTitleQueryData, unknown>(`
+    query LetterTitleQuery {
+        letterDescription(id: "${params['id']}") {
+            id
+            name
+            source { id, name }
+        }
+    }`
+);
+
+
+export const letterFormTitleResolver = queryTitleResolver(
+    letterTitleQuery, entityDescriptionFormTitle, true
+);
+
+
+type GiftTitleQueryData = EntityDescriptionTitleQueryData<'giftDescription'>;
+
+const giftTitleQuery = (params: Params) => gql<GiftTitleQueryData, unknown>(`
+    query GiftTitleQuery {
+        giftDescription(id: "${params['id']}") {
+            id
+            name
+            source { id, name }
+        }
+    }`
+);
+
+
+export const giftFormTitleResolver = queryTitleResolver(
+    giftTitleQuery, entityDescriptionFormTitle, true
+);
+
+type SpaceTitleQueryData = EntityDescriptionTitleQueryData<'spaceDescription'>;
+
+const spaceTitleQuery = (params: Params) => gql<SpaceTitleQueryData, unknown>(`
+    query SpaceTitleQuery {
+        spaceDescription(id: "${params['id']}") {
+            id
+            name
+            source { id, name }
+        }
+    }`
+);
+
+export const spaceFormTitleResolver = queryTitleResolver(
+    spaceTitleQuery, entityDescriptionFormTitle, true
+);