Füge Filter für die angezeigte Kategorie hinzu und aktualisiere die WebPart-Einstellungen

src/webparts/accordion/AccordionWebPart.ts

@@ -25,6 +25,7 @@ export interface IAccordionWebPartProps {
   titleField: string;
   contentField: string;
   categoryField: string;
+  selectedCategory: string;
   sortField: string;
   sortAscending: boolean;
   allowMultiple: boolean;
@@ -36,15 +37,19 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
   private service: AccordionDataService;
   private lists: IAccordionListOption[] = [];
   private fields: IAccordionFieldOption[] = [];
+  private categories: string[] = [];
   private loadingLists: boolean = false;
   private loadingFields: boolean = false;
+  private loadingCategories: boolean = false;
   private requestVersion: number = 0;
   private disposed: boolean = false;
 
   protected onInit(): Promise<void> {
     this.service = new AccordionDataService(this.context);
     return super.onInit().then((): Promise<void> => this.loadLists())
-      .then((): Promise<void> => this.properties.listId ? this.loadFields(this.properties.listId) : Promise.resolve());
+      .then((): Promise<void> => this.properties.listId ? this.loadFields(this.properties.listId) : Promise.resolve())
+      .then((): Promise<void> => this.properties.listId && this.properties.categoryField
+        ? this.loadCategories(this.properties.listId, this.properties.categoryField) : Promise.resolve());
   }
 
   public render(): void {
@@ -60,7 +65,8 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
       this.properties.contentField,
       this.properties.categoryField || '',
       this.properties.sortField || this.properties.titleField,
-      this.properties.sortAscending !== false
+      this.properties.sortAscending !== false,
+      this.properties.selectedCategory || ''
     ).then((items: IAccordionItem[]): void => {
       if (this.disposed || version !== this.requestVersion) { return; }
       if (!items.length) { this.renderStatus(strings.EmptyMessage, false); return; }
@@ -94,6 +100,9 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
     if (this.properties.listId && !this.fields.length && !this.loadingFields) {
       this.loadFields(this.properties.listId);
     }
+    if (this.properties.listId && this.properties.categoryField && !this.categories.length && !this.loadingCategories) {
+      this.loadCategories(this.properties.listId, this.properties.categoryField);
+    }
   }
 
   protected onPropertyPaneFieldChanged(propertyPath: string, oldValue: any, newValue: any): void { // tslint:disable-line:no-any
@@ -102,10 +111,17 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
       this.properties.titleField = '';
       this.properties.contentField = '';
       this.properties.categoryField = '';
+      this.properties.selectedCategory = '';
       this.properties.sortField = '';
       this.fields = [];
+      this.categories = [];
       this.context.propertyPane.refresh();
       this.loadFields(String(newValue || '')).then((): void => this.render());
+    } else if (propertyPath === 'categoryField' && newValue !== oldValue) {
+      this.properties.selectedCategory = '';
+      this.categories = [];
+      this.context.propertyPane.refresh();
+      this.loadCategories(this.properties.listId, String(newValue || '')).then((): void => this.render());
     }
   }
 
@@ -114,8 +130,12 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
       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 < this.categories.length; i++) {
+      categoryValueOptions.push({ key: this.categories[i], text: this.categories[i] });
+    }
     for (let i: number = 0; i < this.lists.length; i++) {
       listOptions.push({ key: this.lists[i].id, text: this.lists[i].title });
     }
@@ -142,6 +162,10 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
               label: strings.CategoryFieldLabel, options: categoryOptions,
               disabled: !this.properties.listId || this.loadingFields
             }),
+            PropertyPaneDropdown('selectedCategory', {
+              label: strings.CategoryFilterLabel, options: categoryValueOptions,
+              disabled: !this.properties.categoryField || this.loadingCategories
+            }),
             PropertyPaneDropdown('sortField', {
               label: strings.SortFieldLabel, options: fieldOptions,
               disabled: !this.properties.listId || this.loadingFields
@@ -200,6 +224,28 @@ export default class AccordionWebPart extends BaseClientSideWebPart<IAccordionWe
     });
   }
 
+  private loadCategories(listId: string, categoryField: string): Promise<void> {
+    if (!listId || !categoryField) {
+      this.categories = [];
+      this.loadingCategories = false;
+      this.refreshPropertyPane();
+      return Promise.resolve();
+    }
+    this.loadingCategories = true;
+    this.refreshPropertyPane();
+    return this.service.getCategoryValues(listId, categoryField).then((categories: string[]): void => {
+      this.categories = categories;
+      if (categories.indexOf(this.properties.selectedCategory) < 0) { this.properties.selectedCategory = ''; }
+    }).catch((error: Error): void => {
+      this.categories = [];
+      this.properties.selectedCategory = '';
+      if (window.console) { console.error('[Accordion] Categories could not be loaded.', error); }
+    }).then((): void => {
+      this.loadingCategories = false;
+      this.refreshPropertyPane();
+    });
+  }
+
   private applyFieldDefaults(): void {
     const names: string[] = this.fields.map((field: IAccordionFieldOption): string => field.internalName);
     if (names.indexOf(this.properties.titleField) < 0) {