From c492b1a698a455ac9964af3062bf119c27efdbf2 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Thomas=20Ytterstr=C3=B6m?= <thomas.ytterstrom@gmail.com>
Date: Wed, 12 Dec 2018 15:00:17 +0100
Subject: [PATCH] =?UTF-8?q?If=20locale=20is=20swedish=20we=20include=20the?=
 =?UTF-8?q?=20swedish=20characters=20=C3=85=C3=84=C3=96=20in=20the=20peopl?=
 =?UTF-8?q?e=20directory=20webpart?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../webparts/peopleDirectory/PeopleDirectoryWebPart.ts   | 5 ++++-
 .../components/IndexNavigation/IIndexNavigationProps.ts  | 6 +++++-
 .../components/IndexNavigation/IndexNavigation.tsx       | 3 +++
 .../components/PeopleDirectory/IPeopleDirectoryProps.ts  | 4 ++++
 .../components/PeopleDirectory/PeopleDirectory.tsx       | 9 +++++----
 5 files changed, 21 insertions(+), 6 deletions(-)

diff --git a/solution/src/webparts/peopleDirectory/PeopleDirectoryWebPart.ts b/solution/src/webparts/peopleDirectory/PeopleDirectoryWebPart.ts
index 656221c3..c14d2282 100644
--- a/solution/src/webparts/peopleDirectory/PeopleDirectoryWebPart.ts
+++ b/solution/src/webparts/peopleDirectory/PeopleDirectoryWebPart.ts
@@ -23,6 +23,7 @@ export default class PeopleDirectoryWebPart extends BaseClientSideWebPart<IPeopl
         spHttpClient: this.context.spHttpClient,
         title: this.properties.title,
         displayMode: this.displayMode,
+        locale: this.getLocaleId(),
         onTitleUpdate: (newTitle: string) => {
           // after updating the web part title in the component
           // persist it in web part properties
@@ -37,7 +38,9 @@ export default class PeopleDirectoryWebPart extends BaseClientSideWebPart<IPeopl
   protected get dataVersion(): Version {
     return Version.parse('1.0');
   }
-
+  protected getLocaleId() : string {
+    return this.context.pageContext.cultureInfo.currentUICultureName;
+  }
   protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
     return {
       pages: []
diff --git a/solution/src/webparts/peopleDirectory/components/IndexNavigation/IIndexNavigationProps.ts b/solution/src/webparts/peopleDirectory/components/IndexNavigation/IIndexNavigationProps.ts
index 97d4d3f8..435d0ed6 100644
--- a/solution/src/webparts/peopleDirectory/components/IndexNavigation/IIndexNavigationProps.ts
+++ b/solution/src/webparts/peopleDirectory/components/IndexNavigation/IIndexNavigationProps.ts
@@ -10,6 +10,10 @@ export interface IIndexNavigationProps {
    * Current search query. Empty, if not searching.
    */
   searchQuery: string;
+    /**
+   * Current locale
+   */
+  locale: string;
   /**
    * Event handler for selecting a tab
    */
@@ -22,4 +26,4 @@ export interface IIndexNavigationProps {
    * Event handler for clearing the search query
    */
   onSearchClear: () => void;
-}
\ No newline at end of file
+}
diff --git a/solution/src/webparts/peopleDirectory/components/IndexNavigation/IndexNavigation.tsx b/solution/src/webparts/peopleDirectory/components/IndexNavigation/IndexNavigation.tsx
index 21e4d362..2c76e80c 100644
--- a/solution/src/webparts/peopleDirectory/components/IndexNavigation/IndexNavigation.tsx
+++ b/solution/src/webparts/peopleDirectory/components/IndexNavigation/IndexNavigation.tsx
@@ -22,6 +22,9 @@ export class IndexNavigation extends React.Component<IIndexNavigationProps, {}>
   public render(): React.ReactElement<IIndexNavigationProps> {
     // build the list of alphabet letters A..Z
     const az = Array.apply(null, { length: 26 }).map((x: string, i: number): string => { return String.fromCharCode(65 + i); });
+    if (this.props.locale === "sv-SE") {
+      az.push('Å', 'Ä', 'Ö');
+    }
     // for each letter, create a PivotItem component
     const indexes: JSX.Element[] = az.map(index => <PivotItem linkText={index} itemKey={index} key={index} />);
     // as the last tab in the navigation, add the Search option
diff --git a/solution/src/webparts/peopleDirectory/components/PeopleDirectory/IPeopleDirectoryProps.ts b/solution/src/webparts/peopleDirectory/components/PeopleDirectory/IPeopleDirectoryProps.ts
index 22718e06..3b0b9985 100644
--- a/solution/src/webparts/peopleDirectory/components/PeopleDirectory/IPeopleDirectoryProps.ts
+++ b/solution/src/webparts/peopleDirectory/components/PeopleDirectory/IPeopleDirectoryProps.ts
@@ -23,6 +23,10 @@ export interface IPeopleDirectoryProps {
    * be able to edit the page title or not.
    */
   displayMode: DisplayMode;
+   /**
+   * Current locale
+   */
+  locale: string;
   /**
    * Event handler for changing the web part title
    */
diff --git a/solution/src/webparts/peopleDirectory/components/PeopleDirectory/PeopleDirectory.tsx b/solution/src/webparts/peopleDirectory/components/PeopleDirectory/PeopleDirectory.tsx
index 1367f5c4..1ae344fe 100644
--- a/solution/src/webparts/peopleDirectory/components/PeopleDirectory/PeopleDirectory.tsx
+++ b/solution/src/webparts/peopleDirectory/components/PeopleDirectory/PeopleDirectory.tsx
@@ -134,11 +134,11 @@ export class PeopleDirectory extends React.Component<IPeopleDirectoryProps, IPeo
             projects: this._getValueFromSearchResult('PastProjects', r.Cells)
           };
         });
-        
+
         const selectedIndex = this.state.selectedIndex;
 
         if (this.state.searchQuery === '') {
-          // An Index is used to search people. 
+          // An Index is used to search people.
           //Reduce the people collection if the first letter of the lastName of the person is not equal to the selected index
           people = people.reduce((result: IPerson[], person: IPerson) => {
             if (person.lastName && person.lastName.indexOf(selectedIndex) === 0) {
@@ -147,7 +147,7 @@ export class PeopleDirectory extends React.Component<IPeopleDirectoryProps, IPeo
             return result;
           }, []);
         }
-        
+
         if (people.length > 0) {
           // notify the user that loading the data is finished and return the loaded information
           this.setState({
@@ -224,7 +224,8 @@ export class PeopleDirectory extends React.Component<IPeopleDirectoryProps, IPeo
           searchQuery={searchQuery}
           onIndexSelect={this._handleIndexSelect}
           onSearch={this._handleSearch}
-          onSearchClear={this._handleSearchClear} />
+          onSearchClear={this._handleSearchClear}
+          locale={this.props.locale} />
         {loading &&
           // if the component is loading its data, show the spinner
           <Spinner size={SpinnerSize.large} label={strings.LoadingSpinnerLabel} />