SPFx-Projekte/Accordion
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

Aktualisiere Version auf 1.1.0, füge Unterstützung für verwaltete Metadatenkategorien hinzu und verbessere die Filterung in der Accordion-Komponente

Browse Source
This commit is contained in:
Torsten Brendgen
2026-08-26 23:22:36 +02:00
parent 200825c4af
commit be1701eef3
11 changed files with 159 additions and 43 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/webparts/accordion/AccordionCategoryValues.ts
+46
View File
@@ -0,0 +1,46 @@
export function getAccordionCategoryValues(value: any): string[] { // tslint:disable-line:no-any
if (value === undefined || value === null) { return []; }
const source: any[] = value && Array.isArray(value.results) ? value.results : [value]; // tslint:disable-line:no-any
const values: string[] = [];
const keys: { [key: string]: boolean } = {};
for (let i: number = 0; i < source.length; i++) {
const current: string[] = categoryEntryValues(source[i]);
for (let valueIndex: number = 0; valueIndex < current.length; valueIndex++) {
const text: string = current[valueIndex].trim();
const key: string = '$' + text.toLocaleLowerCase();
if (text && !keys[key]) { keys[key] = true; values.push(text); }
}
}
return values;
}
function categoryEntryValues(entry: any): string[] { // tslint:disable-line:no-any
if (entry === undefined || entry === null) { return []; }
if (entry.Label) { return [String(entry.Label)]; }
if (typeof entry !== 'string') {
if (typeof entry === 'number' || typeof entry === 'boolean') { return [String(entry)]; }
if (entry.Description || entry.Url) { return [String(entry.Description || entry.Url)]; }
return [];
}
const candidate: string = entry.trim();
if (!candidate) { return []; }
let parts: string[] = [candidate];
if (candidate.indexOf(';#') >= 0) {
parts = candidate.split(';#');
} else if (candidate.indexOf(';') >= 0) {
const semicolonParts: string[] = candidate.split(';');
const allTaxonomyValues: boolean = semicolonParts.every((part: string): boolean =>
/\|[0-9a-f]{8}-[0-9a-f-]{27}$/i.test(part.trim()));
if (allTaxonomyValues) { parts = semicolonParts; }
}
const values: string[] = [];
for (let i: number = 0; i < parts.length; i++) {
const part: string = parts[i].trim();
if (!part || /^-?\d+$/.test(part)) { continue; }
const taxonomyMatch: RegExpMatchArray = part.match(/^(.*)\|[0-9a-f]{8}-[0-9a-f-]{27}$/i);
values.push(taxonomyMatch ? taxonomyMatch[1].trim() : part);
}
return values.filter((text: string): boolean => !!text);
}
src/webparts/accordion/AccordionDataService.ts
+15 -17
View File
@@ -1,5 +1,6 @@
import { SPHttpClient, SPHttpClientResponse } from '@microsoft/sp-http';
import { WebPartContext } from '@microsoft/sp-webpart-base';
import { getAccordionCategoryValues } from './AccordionCategoryValues';
import { IAccordionFieldOption, IAccordionItem, IAccordionListOption } from './AccordionTypes';
export class AccordionDataService {
@@ -51,13 +52,16 @@ export class AccordionDataService {
.then((response: SPHttpClientResponse): Promise<any> => this.ensureJson(response)) // tslint:disable-line:no-any
.then((payload: any): IAccordionItem[] => this.results(payload) // tslint:disable-line:no-any
.filter((item: any): boolean => !categoryValue || // tslint:disable-line:no-any
this.toValues(item[categoryField]).indexOf(categoryValue) >= 0)
.map((item: any): IAccordionItem => ({ // tslint:disable-line:no-any
id: Number(item.Id),
title: this.toText(item[titleField]),
content: this.toText(item[contentField]),
category: categoryField ? this.toText(item[categoryField]) : ''
})));
getAccordionCategoryValues(item[categoryField]).indexOf(categoryValue) >= 0)
.map((item: any): IAccordionItem => { // tslint:disable-line:no-any
const categories: string[] = categoryField ? getAccordionCategoryValues(item[categoryField]) : [];
return {
id: Number(item.Id),
title: this.toText(item[titleField]),
content: this.toText(item[contentField]),
categories: categories
};
}));
}
public getCategoryValues(listId: string, categoryField: string): Promise<string[]> {
@@ -71,9 +75,9 @@ export class AccordionDataService {
const keys: { [key: string]: boolean } = {};
const items: any[] = this.results(payload); // tslint:disable-line:no-any
for (let i: number = 0; i < items.length; i++) {
const current: string[] = this.toValues(items[i][categoryField]);
const current: string[] = getAccordionCategoryValues(items[i][categoryField]);
for (let valueIndex: number = 0; valueIndex < current.length; valueIndex++) {
const key: string = current[valueIndex].toLocaleLowerCase();
const key: string = '$' + current[valueIndex].toLocaleLowerCase();
if (!keys[key]) { keys[key] = true; values.push(current[valueIndex]); }
}
}
@@ -113,15 +117,9 @@ export class AccordionDataService {
return '';
}
private toValues(value: any): string[] { // tslint:disable-line:no-any
if (value === undefined || value === null) { return []; }
const source: any[] = value && Array.isArray(value.results) ? value.results : [value]; // tslint:disable-line:no-any
return source.map((entry: any): string => this.toText(entry).trim()) // tslint:disable-line:no-any
.filter((entry: string): boolean => !!entry);
}
private isSupportedField(type: string): boolean {
return ['Text', 'Note', 'Choice', 'MultiChoice', 'Number', 'Integer', 'Boolean', 'DateTime', 'Computed'].indexOf(String(type)) >= 0;
return ['Text', 'Note', 'Choice', 'MultiChoice', 'Number', 'Integer', 'Boolean', 'DateTime', 'Computed',
'TaxonomyFieldType', 'TaxonomyFieldTypeMulti'].indexOf(String(type)) >= 0;
}
private isFieldName(value: string): boolean { return /^[A-Za-z_][A-Za-z0-9_]*$/.test(String(value || '')); }
private isGuid(value: string): boolean { return /^[0-9a-f]{8}-[0-9a-f-]{27}$/i.test(this.cleanGuid(value)); }
src/webparts/accordion/AccordionTypes.ts
+1 -2
View File
@@ -15,6 +15,5 @@ export interface IAccordionItem {
id: number;
title: string;
content: string;
category: string;
categories: string[];
}
src/webparts/accordion/AccordionWebPart.ts
+20 -6
View File
@@ -126,13 +126,18 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
}
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
const fieldOptions: IPropertyPaneDropdownOption[] = this.fields.map((field: IAccordionFieldOption): IPropertyPaneDropdownOption => ({
const standardFields: IAccordionFieldOption[] = this.fields.filter((field: IAccordionFieldOption): boolean =>
!this.isTaxonomyField(field));
const fieldOptions: IPropertyPaneDropdownOption[] = standardFields.map((field: IAccordionFieldOption): IPropertyPaneDropdownOption => ({
key: field.internalName, text: field.title + ' (' + field.internalName + ')'
}));
const categoryFieldOptions: IPropertyPaneDropdownOption[] = this.fields.map((field: IAccordionFieldOption): IPropertyPaneDropdownOption => ({
key: field.internalName, text: field.title + ' (' + field.internalName + ')'
}));
const categoryOptions: IPropertyPaneDropdownOption[] = [{ key: '', text: strings.NoCategoryOption }];
const categoryValueOptions: IPropertyPaneDropdownOption[] = [{ key: '', text: strings.AllCategoriesOption }];
const listOptions: IPropertyPaneDropdownOption[] = [{ key: '', text: strings.SelectOption }];
for (let i: number = 0; i < fieldOptions.length; i++) { categoryOptions.push(fieldOptions[i]); }
for (let i: number = 0; i < categoryFieldOptions.length; i++) { categoryOptions.push(categoryFieldOptions[i]); }
for (let i: number = 0; i < this.categories.length; i++) {
categoryValueOptions.push({ key: this.categories[i], text: this.categories[i] });
}
@@ -247,26 +252,35 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
}
private applyFieldDefaults(): void {
const names: string[] = this.fields.map((field: IAccordionFieldOption): string => field.internalName);
const standardFields: IAccordionFieldOption[] = this.fields.filter((field: IAccordionFieldOption): boolean =>
!this.isTaxonomyField(field));
const names: string[] = standardFields.map((field: IAccordionFieldOption): string => field.internalName);
const categoryNames: string[] = this.fields.map((field: IAccordionFieldOption): string => field.internalName);
if (names.indexOf(this.properties.titleField) < 0) {
this.properties.titleField = names.indexOf('Title') >= 0 ? 'Title' : (names[0] || '');
}
if (names.indexOf(this.properties.contentField) < 0) {
const note: IAccordionFieldOption = this.fields.filter((field: IAccordionFieldOption): boolean =>
const note: IAccordionFieldOption = standardFields.filter((field: IAccordionFieldOption): boolean =>
field.type === 'Note' && field.internalName !== this.properties.titleField)[0];
this.properties.contentField = note ? note.internalName : this.firstDifferentField(this.properties.titleField);
}
if (names.indexOf(this.properties.categoryField) < 0) { this.properties.categoryField = ''; }
if (categoryNames.indexOf(this.properties.categoryField) < 0) { this.properties.categoryField = ''; }
if (names.indexOf(this.properties.sortField) < 0) { this.properties.sortField = this.properties.titleField; }
}
private firstDifferentField(excluded: string): string {
for (let i: number = 0; i < this.fields.length; i++) {
if (this.fields[i].internalName !== excluded) { return this.fields[i].internalName; }
if (this.fields[i].internalName !== excluded && !this.isTaxonomyField(this.fields[i])) {
return this.fields[i].internalName;
}
}
return '';
}
private isTaxonomyField(field: IAccordionFieldOption): boolean {
return field.type === 'TaxonomyFieldType' || field.type === 'TaxonomyFieldTypeMulti';
}
private isConfigured(): boolean {
return !!(this.service && this.properties.listId && this.properties.titleField && this.properties.contentField);
}
src/webparts/accordion/components/Accordion.tsx
+16 -10
View File
@@ -28,17 +28,17 @@ export default class Accordion extends React.Component<IAccordionProps, IAccordi
{this.props.showCategories && group.name
? <h2 className={styles.categoryTitle}>{group.name}</h2>
: undefined}
<div>{group.items.map((item: IAccordionItem) => this.renderItem(item))}</div>
<div>{group.items.map((item: IAccordionItem) => this.renderItem(item, groupIndex))}</div>
</section>
)}
</div>;
}
private renderItem(item: IAccordionItem): React.ReactElement<any> { // tslint:disable-line:no-any
private renderItem(item: IAccordionItem, groupIndex: number): React.ReactElement<any> { // tslint:disable-line:no-any
const open: boolean = this.state.openIds.indexOf(item.id) >= 0;
const buttonId: string = this.instanceId + '-button-' + item.id;
const panelId: string = this.instanceId + '-panel-' + item.id;
return <div className={styles.item} key={item.id}>
const buttonId: string = this.instanceId + '-button-' + groupIndex + '-' + item.id;
const panelId: string = this.instanceId + '-panel-' + groupIndex + '-' + item.id;
return <div className={styles.item} key={groupIndex + '-' + item.id}>
<h3 className={styles.heading}>
<button type='button' id={buttonId} className={styles.trigger}
aria-expanded={open} aria-controls={panelId}
@@ -75,12 +75,18 @@ export default class Accordion extends React.Component<IAccordionProps, IAccordi
const result: Array<{ name: string; items: IAccordionItem[] }> = [];
const byName: { [name: string]: { name: string; items: IAccordionItem[] } } = {};
for (let i: number = 0; i < this.props.items.length; i++) {
const name: string = this.props.items[i].category || this.props.defaultCategory;
if (!byName[name]) {
byName[name] = { name: name, items: [] };
result.push(byName[name]);
const names: string[] = this.props.items[i].categories.length
? this.props.items[i].categories
: [this.props.defaultCategory];
for (let nameIndex: number = 0; nameIndex < names.length; nameIndex++) {
const name: string = names[nameIndex];
const groupKey: string = '$' + name.toLocaleLowerCase();
if (!byName[groupKey]) {
byName[groupKey] = { name: name, items: [] };
result.push(byName[groupKey]);
}
byName[groupKey].items.push(this.props.items[i]);
}
byName[name].items.push(this.props.items[i]);
}
return result;
}