Skip to content

Commit 426d1e5

Browse files
patrikhellgrenpatrikhellgren
committed
Check labels against user locale or term store locale instead of web locale
1 parent fec3799 commit 426d1e5

File tree

3 files changed

+48
-17
lines changed

3 files changed

+48
-17
lines changed

‎src/controls/modernTaxonomyPicker/ModernTaxonomyPicker.tsx

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ import * as strings from 'ControlStrings';
1515
import { TooltipHost } from '@microsoft/office-ui-fabric-react-bundle';
1616
import { useId } from '@uifabric/react-hooks';
1717
import { ITooltipHostStyles } from 'office-ui-fabric-react';
18+
import { ITermStoreInfo } from '@pnp/sp/taxonomy';
1819
export interface IModernTaxonomyPickerProps {
1920
allowMultipleSelections: boolean;
2021
termSetId: string;
@@ -30,13 +31,18 @@ export interface IModernTaxonomyPickerProps {
3031
}
3132

3233
export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
33-
const [termsService] = React.useState(() => new SPTaxonomyService(props.context));
34+
const [taxonomyService] = React.useState(() => new SPTaxonomyService(props.context));
3435
const [panelIsOpen, setPanelIsOpen] = React.useState(false);
3536
const [selectedOptions, setSelectedOptions] = React.useState<ITag[]>(Object.prototype.toString.call(props.initialValues) === '[object Array]' ? props.initialValues : []);
3637
const [selectedPanelOptions, setSelectedPanelOptions] = React.useState<ITag[]>([]);
38+
const [termStoreInfo, setTermStoreInfo] = React.useState<ITermStoreInfo>();
3739

3840
React.useEffect(() => {
3941
sp.setup(props.context);
42+
taxonomyService.getTermStoreInfo()
43+
.then((termStoreInfo) => {
44+
setTermStoreInfo(termStoreInfo);
45+
});
4046
}, []);
4147

4248
React.useEffect(() => {
@@ -64,11 +70,11 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
6470
}
6571

6672
async function onResolveSuggestions(filter: string, selectedItems?: ITag[]): Promise<ITag[]> {
67-
const languageTag = props.context.pageContext.cultureInfo.currentUICultureName !== '' ? props.context.pageContext.cultureInfo.currentUICultureName : props.context.pageContext.web.languageName;
73+
const languageTag = props.context.pageContext.cultureInfo.currentUICultureName !== '' ? props.context.pageContext.cultureInfo.currentUICultureName : termStoreInfo.defaultLanguageTag;
6874
if (filter === '') {
6975
return [];
7076
}
71-
const filteredTerms = await termsService.searchTerm(Guid.parse(props.termSetId), filter, languageTag, props.anchorTermId ? Guid.parse(props.anchorTermId) : undefined);
77+
const filteredTerms = await taxonomyService.searchTerm(Guid.parse(props.termSetId), filter, languageTag, props.anchorTermId ? Guid.parse(props.anchorTermId) : undefined);
7278
const filteredTermsWithoutSelectedItems = filteredTerms.filter((term) => {
7379
if (!selectedItems || selectedItems.length === 0) {
7480
return true;
@@ -80,8 +86,11 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
8086
const filteredTermsAndAvailable = filteredTermsWithoutSelectedItems.filter((term) => term.isAvailableForTagging.filter((t) => t.setId === props.termSetId)[0].isAvailable);
8187
const filteredTags = filteredTermsAndAvailable.map((term) => {
8288
const key = term.id;
83-
const name = term.labels.filter((termLabel) => (languageTag === '' || termLabel.languageTag === languageTag) &&
84-
termLabel.name.toLowerCase().indexOf(filter.toLowerCase()) === 0)[0]?.name;
89+
let labelsWithMatchingLanguageTag = term.labels.filter((termLabel) => (termLabel.languageTag === languageTag));
90+
if (labelsWithMatchingLanguageTag.length === 0) {
91+
labelsWithMatchingLanguageTag = term.labels.filter((termLabel) => (termLabel.languageTag === termStoreInfo.defaultLanguageTag));
92+
}
93+
const name = labelsWithMatchingLanguageTag.filter((termLabel) => termLabel.name.toLowerCase().indexOf(filter.toLowerCase()) === 0)[0]?.name;
8594
return { key: key, name: name };
8695
});
8796
return filteredTags;
@@ -152,8 +161,9 @@ export function ModernTaxonomyPicker(props: IModernTaxonomyPickerProps) {
152161
<TaxonomyForm
153162
allowMultipleSelections={props.allowMultipleSelections}
154163
onResolveSuggestions={onResolveSuggestions}
155-
onLoadMoreData={termsService.getTerms}
156-
getTermSetInfo={termsService.getTermSetInfo}
164+
onLoadMoreData={taxonomyService.getTerms}
165+
getTermSetInfo={taxonomyService.getTermSetInfo}
166+
termStoreInfo={termStoreInfo}
157167
context={props.context}
158168
termSetId={Guid.parse(props.termSetId)}
159169
pageSize={50}

‎src/controls/modernTaxonomyPicker/taxonomyForm/TaxonomyForm.tsx

Lines changed: 25 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import * as React from 'react';
22
import styles from './TaxonomyForm.module.scss';
33
import { Checkbox, ChoiceGroup, GroupedList, GroupHeader, IBasePickerStyleProps, IBasePickerStyles, ICheckboxStyleProps, ICheckboxStyles, IChoiceGroupOption, IChoiceGroupOptionStyleProps, IChoiceGroupOptionStyles, IGroup, IGroupedList, IGroupFooterProps, IGroupHeaderProps, IGroupHeaderStyleProps, IGroupHeaderStyles, IGroupRenderProps, IGroupShowAllProps, ILabelStyleProps, ILabelStyles, ILinkStyleProps, ILinkStyles, IListProps, IRenderFunction, ISpinnerStyleProps, ISpinnerStyles, IStyleFunctionOrObject, ITag, Label, Link, Spinner, TagPicker } from 'office-ui-fabric-react';
4-
import { ITermInfo, ITermSetInfo } from '@pnp/sp/taxonomy';
4+
import { ITermInfo, ITermSetInfo, ITermStoreInfo } from '@pnp/sp/taxonomy';
55
import { Guid } from '@microsoft/sp-core-library';
66
import { BaseComponentContext } from '@microsoft/sp-component-base';
77
import { css } from '@uifabric/utilities/lib/css';
@@ -17,6 +17,7 @@ export interface ITaxonomyFormProps {
1717
onResolveSuggestions: (filter: string, selectedItems?: ITag[]) => ITag[] | PromiseLike<ITag[]>;
1818
onLoadMoreData: (termSetId: Guid, parentTermId?: Guid, skiptoken?: string, hideDeprecatedTerms?: boolean, pageSize?: number) => Promise<{ value: ITermInfo[], skiptoken: string }>;
1919
getTermSetInfo: (termSetId: Guid) => Promise<ITermSetInfo | undefined>;
20+
termStoreInfo: ITermStoreInfo;
2021
placeHolder: string;
2122
}
2223

@@ -30,18 +31,25 @@ export function TaxonomyForm(props: ITaxonomyFormProps): React.ReactElement<ITax
3031
React.useEffect(() => {
3132
props.getTermSetInfo(props.termSetId)
3233
.then((termSetInfo) => {
33-
const languageTag = props.context.pageContext.cultureInfo.currentUICultureName !== '' ? props.context.pageContext.cultureInfo.currentUICultureName : props.context.pageContext.web.languageName;
34-
35-
const termSetName = termSetInfo.localizedNames.filter((name) => name.languageTag === languageTag)[0].name;
34+
const languageTag = props.context.pageContext.cultureInfo.currentUICultureName !== '' ? props.context.pageContext.cultureInfo.currentUICultureName : props.termStoreInfo.defaultLanguageTag;
35+
let termSetNames = termSetInfo.localizedNames.filter((name) => name.languageTag === languageTag);
36+
if (termSetNames.length === 0) {
37+
termSetNames = termSetInfo.localizedNames.filter((name) => name.languageTag === props.termStoreInfo.defaultLanguageTag);
38+
}
39+
const termSetName = termSetNames[0].name;
3640
const rootGroup: IGroup = { name: termSetName, key: termSetInfo.id, startIndex: -1, count: 50, level: 0, isCollapsed: false, data: { skiptoken: '' }, hasMoreData: termSetInfo.childrenCount > 0 };
3741
setGroups([rootGroup]);
3842
setGroupsLoading((prevGroupsLoading) => [...prevGroupsLoading, termSetInfo.id]);
3943
if (termSetInfo.childrenCount > 0) {
4044
props.onLoadMoreData(props.termSetId, Guid.empty, '', true)
4145
.then((terms) => {
4246
const grps: IGroup[] = terms.value.map(term => {
47+
let termNames = term.labels.filter((termLabel) => (termLabel.languageTag === languageTag && termLabel.isDefault === true));
48+
if (termNames.length === 0) {
49+
termNames = term.labels.filter((termLabel) => (termLabel.languageTag === props.termStoreInfo.defaultLanguageTag && termLabel.isDefault === true));
50+
}
4351
const g: IGroup = {
44-
name: term.labels.filter((termLabel) => (termLabel.languageTag === languageTag && termLabel.isDefault === true))[0]?.name,
52+
name: termNames[0]?.name,
4553
key: term.id,
4654
startIndex: -1,
4755
count: 50,
@@ -66,7 +74,7 @@ export function TaxonomyForm(props: ITaxonomyFormProps): React.ReactElement<ITax
6674
}, []);
6775

6876
const onToggleCollapse = (group: IGroup): void => {
69-
const languageTag = props.context.pageContext.cultureInfo.currentUICultureName !== '' ? props.context.pageContext.cultureInfo.currentUICultureName : props.context.pageContext.web.languageName;
77+
const languageTag = props.context.pageContext.cultureInfo.currentUICultureName !== '' ? props.context.pageContext.cultureInfo.currentUICultureName : props.termStoreInfo.defaultLanguageTag;
7078

7179
if (group.isCollapsed === true) {
7280
setGroups((prevGroups) => {
@@ -96,8 +104,12 @@ export function TaxonomyForm(props: ITaxonomyFormProps): React.ReactElement<ITax
96104
props.onLoadMoreData(props.termSetId, Guid.parse(group.key), '', true)
97105
.then((terms) => {
98106
const grps: IGroup[] = terms.value.map(term => {
107+
let termNames = term.labels.filter((termLabel) => (termLabel.languageTag === languageTag && termLabel.isDefault === true));
108+
if (termNames.length === 0) {
109+
termNames = term.labels.filter((termLabel) => (termLabel.languageTag === props.termStoreInfo.defaultLanguageTag && termLabel.isDefault === true));
110+
}
99111
const g: IGroup = {
100-
name: term.labels.filter((termLabel) => (termLabel.languageTag === languageTag && termLabel.isDefault === true))[0]?.name,
112+
name: termNames[0]?.name,
101113
key: term.id,
102114
startIndex: -1,
103115
count: 50,
@@ -229,7 +241,7 @@ export function TaxonomyForm(props: ITaxonomyFormProps): React.ReactElement<ITax
229241

230242
const onRenderFooter = (footerProps: IGroupFooterProps): JSX.Element => {
231243
if ((footerProps.group.hasMoreData || footerProps.group.children && footerProps.group.children.length === 0) && !footerProps.group.isCollapsed) {
232-
const languageTag = props.context.pageContext.cultureInfo.currentUICultureName !== '' ? props.context.pageContext.cultureInfo.currentUICultureName : props.context.pageContext.web.languageName;
244+
const languageTag = props.context.pageContext.cultureInfo.currentUICultureName !== '' ? props.context.pageContext.cultureInfo.currentUICultureName : props.termStoreInfo.defaultLanguageTag;
233245

234246
if (groupsLoading.some(value => value === footerProps.group.key)) {
235247
const spinnerStyles: IStyleFunctionOrObject<ISpinnerStyleProps, ISpinnerStyles> = { circle: { verticalAlign: 'middle' } };
@@ -247,8 +259,12 @@ export function TaxonomyForm(props: ITaxonomyFormProps): React.ReactElement<ITax
247259
props.onLoadMoreData(props.termSetId, footerProps.group.key === props.termSetId.toString() ? Guid.empty : Guid.parse(footerProps.group.key), footerProps.group.data.skiptoken, true)
248260
.then((terms) => {
249261
const grps: IGroup[] = terms.value.map(term => {
262+
let termNames = term.labels.filter((termLabel) => (termLabel.languageTag === languageTag && termLabel.isDefault === true));
263+
if (termNames.length === 0) {
264+
termNames = term.labels.filter((termLabel) => (termLabel.languageTag === props.termStoreInfo.defaultLanguageTag && termLabel.isDefault === true));
265+
}
250266
const g: IGroup = {
251-
name: term.labels.filter((termLabel) => (termLabel.languageTag === languageTag && termLabel.isDefault === true))[0]?.name,
267+
name: termNames[0]?.name,
252268
key: term.id,
253269
startIndex: -1,
254270
count: 50,

‎src/services/SPTaxonomyService.ts

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@ import { Guid } from '@microsoft/sp-core-library';
33
import { LambdaParser } from '@pnp/odata/parsers';
44
import { SharePointQueryableCollection, sp } from '@pnp/sp';
55
import '@pnp/sp/taxonomy';
6-
import { ITermInfo, ITermSetInfo } from '@pnp/sp/taxonomy';
6+
import { ITermInfo, ITermSetInfo, ITermStoreInfo } from '@pnp/sp/taxonomy';
77

88
export class SPTaxonomyService {
99

@@ -76,4 +76,9 @@ export class SPTaxonomyService {
7676
const tsInfo = await sp.termStore.sets.getById(termSetId.toString()).get();
7777
return tsInfo;
7878
}
79+
80+
public async getTermStoreInfo(): Promise<ITermStoreInfo | undefined> {
81+
const termStoreInfo = await sp.termStore();
82+
return termStoreInfo;
83+
}
7984
}

0 commit comments

Comments
 (0)