@khester/create-dynamics-app 1.0.8 → 1.1.0

package/templates/dynamics-365-starter/src/page-templates/SearchPage.tsx

@@ -0,0 +1,629 @@
+import React, { useState, useCallback } from 'react';
+import {
+  Stack,
+  Text,
+  SearchBox,
+  Pivot,
+  PivotItem,
+  DetailsList,
+  IColumn,
+  SelectionMode,
+  MessageBar,
+  MessageBarType,
+  Spinner,
+  SpinnerSize,
+  CommandBar,
+  ICommandBarItemProps,
+  Dropdown,
+  IDropdownOption,
+  Checkbox,
+  DefaultButton,
+  Facepile,
+  IFacepilePersona,
+} from '@fluentui/react';
+import { BaseEntity } from '../models/BaseEntity';
+import { useDynamicsApi } from '../providers/DynamicsProvider';
+import { Logger } from '../components/Logging/logger';
+
+interface EntitySearchConfig<T extends BaseEntity> {
+  key: string;
+  title: string;
+  entityLogicalName: string;
+  entityClass: any;
+  columns: IColumn[];
+  searchFields: string[];
+  fetchXmlTemplate: string; // Should include {{searchQuery}} placeholder
+  icon?: string;
+  color?: string;
+}
+
+interface SearchFilter {
+  key: string;
+  title: string;
+  type: 'dropdown' | 'checkbox' | 'date';
+  options?: IDropdownOption[];
+  value?: any;
+}
+
+interface SearchPageProps {
+  title?: string;
+  entityConfigs: EntitySearchConfig<any>[];
+  globalSearchFields?: string[];
+  filters?: SearchFilter[];
+  onItemSelected?: (item: any, entityType: string) => void;
+  onCreateNew?: (entityType: string) => void;
+  enableAdvancedSearch?: boolean;
+  enableSavedSearches?: boolean;
+  placeholder?: string;
+  minSearchLength?: number;
+}
+
+/**
+ * Generic search page template for Dynamics 365
+ * Supports cross-entity search with advanced filtering and saved searches
+ */
+export function SearchPage({
+  title = 'Search',
+  entityConfigs,
+  globalSearchFields = [],
+  filters = [],
+  onItemSelected,
+  onCreateNew,
+  enableAdvancedSearch = true,
+  enableSavedSearches = false,
+  placeholder = 'Search across all entities...',
+  minSearchLength = 3,
+}: SearchPageProps) {
+  const { apiService } = useDynamicsApi();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [searchResults, setSearchResults] = useState<{ [key: string]: any[] }>(
+    {}
+  );
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState<string | null>(null);
+  const [selectedTab, setSelectedTab] = useState('all');
+  const [activeFilters, setActiveFilters] = useState<{ [key: string]: any }>(
+    {}
+  );
+  const [showAdvancedSearch, setShowAdvancedSearch] = useState(false);
+  const [searchHistory, setSearchHistory] = useState<string[]>([]);
+  const [totalResults, setTotalResults] = useState(0);
+
+  // Perform search across all configured entities
+  const performSearch = useCallback(
+    async (query: string) => {
+      if (!query || query.length < minSearchLength) {
+        setSearchResults({});
+        setTotalResults(0);
+        return;
+      }
+
+      if (!apiService) {
+        setError('API service not available');
+        return;
+      }
+
+      try {
+        setLoading(true);
+        setError(null);
+        Logger.log(`Searching for: "${query}"`);
+
+        const results: { [key: string]: any[] } = {};
+        let total = 0;
+
+        // Search each entity type
+        for (const config of entityConfigs) {
+          try {
+            // Build search conditions
+            const searchConditions = config.searchFields
+              .map(
+                (field) =>
+                  `<condition attribute="${field}" operator="like" value="%${query}%" />`
+              )
+              .join('\n          ');
+
+            // Apply additional filters
+            const filterConditions = Object.entries(activeFilters)
+              .filter(
+                ([_, value]) =>
+                  value !== null && value !== undefined && value !== ''
+              )
+              .map(([key, value]) => {
+                const filter = filters.find((f) => f.key === key);
+                if (filter?.type === 'checkbox') {
+                  return value
+                    ? `<condition attribute="${key}" operator="eq" value="true" />`
+                    : '';
+                } else if (filter?.type === 'dropdown') {
+                  return `<condition attribute="${key}" operator="eq" value="${value}" />`;
+                }
+                return `<condition attribute="${key}" operator="like" value="%${value}%" />`;
+              })
+              .filter((condition) => condition)
+              .join('\n          ');
+
+            const allConditions = [searchConditions, filterConditions]
+              .filter((c) => c)
+              .join('\n          ');
+
+            const fetchXml = config.fetchXmlTemplate
+              .replace('{{searchQuery}}', query)
+              .replace('{{searchConditions}}', allConditions);
+
+            const result = await apiService.retrieveMultipleRecords(
+              config.entityLogicalName,
+              fetchXml
+            );
+            const entities = (result.entities || []).map(
+              (data: any) => new config.entityClass(data)
+            );
+
+            results[config.key] = entities;
+            total += entities.length;
+
+            Logger.log(`Found ${entities.length} ${config.title} results`);
+          } catch (err) {
+            Logger.warn(
+              `Search failed for ${config.title}:`,
+              err instanceof Error ? err.message : String(err)
+            );
+            results[config.key] = [];
+          }
+        }
+
+        setSearchResults(results);
+        setTotalResults(total);
+
+        // Update search history
+        if (!searchHistory.includes(query)) {
+          setSearchHistory((prev) => [query, ...prev.slice(0, 9)]); // Keep last 10 searches
+        }
+
+        Logger.log(`Search completed. Total results: ${total}`);
+      } catch (err) {
+        const errorMessage =
+          err instanceof Error ? err.message : 'Search failed';
+        setError(errorMessage);
+        Logger.error('Search error:', 'SearchPage', err);
+      } finally {
+        setLoading(false);
+      }
+    },
+    [
+      apiService,
+      entityConfigs,
+      activeFilters,
+      filters,
+      minSearchLength,
+      searchHistory,
+    ]
+  );
+
+  // Handle search input
+  const handleSearch = (query: string) => {
+    setSearchQuery(query);
+    if (query.length >= minSearchLength) {
+      performSearch(query);
+    } else {
+      setSearchResults({});
+      setTotalResults(0);
+    }
+  };
+
+  // Handle filter change
+  const handleFilterChange = (filterKey: string, value: any) => {
+    setActiveFilters((prev) => ({
+      ...prev,
+      [filterKey]: value,
+    }));
+
+    // Re-search with new filters
+    if (searchQuery.length >= minSearchLength) {
+      performSearch(searchQuery);
+    }
+  };
+
+  // Clear all filters
+  const clearFilters = () => {
+    setActiveFilters({});
+    if (searchQuery.length >= minSearchLength) {
+      performSearch(searchQuery);
+    }
+  };
+
+  // Handle item selection
+  const handleItemClick = (
+    item: any,
+    entityConfig: EntitySearchConfig<any>
+  ) => {
+    if (onItemSelected) {
+      onItemSelected(item, entityConfig.key);
+    }
+  };
+
+  // Get all results for "All" tab
+  const getAllResults = () => {
+    const allResults: any[] = [];
+    entityConfigs.forEach((config) => {
+      const configResults = searchResults[config.key] || [];
+      configResults.forEach((item) => {
+        allResults.push({
+          ...item,
+          _entityType: config.key,
+          _entityTitle: config.title,
+          _entityIcon: config.icon,
+          _entityColor: config.color,
+        });
+      });
+    });
+    return allResults;
+  };
+
+  // Create columns for "All" tab
+  const createAllResultsColumns = (): IColumn[] => [
+    {
+      key: 'name',
+      name: 'Name',
+      minWidth: 200,
+      maxWidth: 300,
+      isResizable: true,
+      onRender: (item: any) => {
+        const config = entityConfigs.find((c) => c.key === item._entityType);
+        const nameField = config?.columns[0]?.fieldName || 'name';
+        return (
+          <Stack horizontal verticalAlign="center" tokens={{ childrenGap: 8 }}>
+            {item._entityIcon && (
+              <span
+                style={{ fontSize: 16, color: item._entityColor || '#605e5c' }}
+              >
+                {item._entityIcon}
+              </span>
+            )}
+            <span
+              style={{ color: '#0078d4', cursor: 'pointer', fontWeight: 500 }}
+              onClick={() => config && handleItemClick(item, config)}
+            >
+              {item[nameField] || 'N/A'}
+            </span>
+          </Stack>
+        );
+      },
+    },
+    {
+      key: 'entityType',
+      name: 'Type',
+      minWidth: 100,
+      maxWidth: 150,
+      isResizable: true,
+      onRender: (item: any) => (
+        <span
+          style={{
+            padding: '4px 8px',
+            borderRadius: 4,
+            backgroundColor: item._entityColor
+              ? `${item._entityColor}20`
+              : '#f3f2f1',
+            color: item._entityColor || '#605e5c',
+            fontSize: 12,
+            fontWeight: 600,
+          }}
+        >
+          {item._entityTitle}
+        </span>
+      ),
+    },
+  ];
+
+  // Enhanced columns with click handlers
+  const createEnhancedColumns = (
+    config: EntitySearchConfig<any>
+  ): IColumn[] => {
+    return config.columns.map((column) => ({
+      ...column,
+      onRender:
+        column.onRender ||
+        ((item: any) => {
+          const value = item[column.fieldName || ''];
+          if (column.key === config.columns[0].key) {
+            // Make first column clickable
+            return (
+              <span
+                style={{ color: '#0078d4', cursor: 'pointer', fontWeight: 500 }}
+                onClick={() => handleItemClick(item, config)}
+              >
+                {value || ''}
+              </span>
+            );
+          }
+          return <span>{value || ''}</span>;
+        }),
+    }));
+  };
+
+  // Command bar items
+  const commandBarItems: ICommandBarItemProps[] = [
+    ...(enableAdvancedSearch
+      ? [
+          {
+            key: 'advanced',
+            text: showAdvancedSearch ? 'Hide Filters' : 'Show Filters',
+            iconProps: { iconName: 'Filter' },
+            onClick: () => setShowAdvancedSearch(!showAdvancedSearch),
+          },
+        ]
+      : []),
+    ...(Object.keys(activeFilters).length > 0
+      ? [
+          {
+            key: 'clear',
+            text: 'Clear Filters',
+            iconProps: { iconName: 'ClearFilter' },
+            onClick: clearFilters,
+          },
+        ]
+      : []),
+    ...(onCreateNew
+      ? [
+          {
+            key: 'create',
+            text: 'Create New',
+            iconProps: { iconName: 'Add' },
+            subMenuProps: {
+              items: entityConfigs.map((config) => ({
+                key: config.key,
+                text: config.title,
+                iconProps: { iconName: 'Add' },
+                onClick: () => onCreateNew(config.key),
+              })),
+            },
+          },
+        ]
+      : []),
+  ];
+
+  // Get search suggestions
+  const getSearchSuggestions = (): IFacepilePersona[] => {
+    return searchHistory.slice(0, 5).map((query, index) => ({
+      personaName: query,
+      onClick: () => handleSearch(query),
+    }));
+  };
+
+  return (
+    <div style={{ padding: '20px', maxWidth: '100%' }}>
+      <Stack tokens={{ childrenGap: 20 }}>
+        {/* Header */}
+        <Stack>
+          <Text variant="xxLarge" style={{ fontWeight: 600, color: '#323130' }}>
+            {title}
+          </Text>
+          <Text variant="medium" style={{ color: '#605e5c' }}>
+            Search across multiple entity types
+          </Text>
+        </Stack>
+
+        {/* Search Box */}
+        <Stack tokens={{ childrenGap: 12 }}>
+          <SearchBox
+            placeholder={placeholder}
+            value={searchQuery}
+            onChange={(_, newValue) => handleSearch(newValue || '')}
+            onSearch={(newValue) => handleSearch(newValue)}
+            style={{ maxWidth: 600 }}
+          />
+
+          {/* Search History */}
+          {searchHistory.length > 0 && (
+            <Stack>
+              <Text
+                variant="small"
+                style={{ color: '#605e5c', marginBottom: 8 }}
+              >
+                Recent searches:
+              </Text>
+              <Facepile
+                personas={getSearchSuggestions()}
+                maxDisplayablePersonas={5}
+                styles={{
+                  member: { cursor: 'pointer' },
+                }}
+              />
+            </Stack>
+          )}
+        </Stack>
+
+        {/* Advanced Search Filters */}
+        {enableAdvancedSearch && showAdvancedSearch && filters.length > 0 && (
+          <Stack
+            style={{
+              padding: 16,
+              border: '1px solid #edebe9',
+              borderRadius: 4,
+              backgroundColor: '#faf9f8',
+            }}
+            tokens={{ childrenGap: 16 }}
+          >
+            <Text variant="medium" style={{ fontWeight: 600 }}>
+              Advanced Filters
+            </Text>
+            <Stack horizontal wrap tokens={{ childrenGap: 16 }}>
+              {filters.map((filter) => (
+                <Stack key={filter.key} style={{ minWidth: 200 }}>
+                  {filter.type === 'dropdown' && (
+                    <Dropdown
+                      label={filter.title}
+                      options={filter.options || []}
+                      selectedKey={activeFilters[filter.key]}
+                      onChange={(_, option) =>
+                        handleFilterChange(filter.key, option?.key)
+                      }
+                    />
+                  )}
+                  {filter.type === 'checkbox' && (
+                    <Checkbox
+                      label={filter.title}
+                      checked={activeFilters[filter.key] || false}
+                      onChange={(_, checked) =>
+                        handleFilterChange(filter.key, checked)
+                      }
+                    />
+                  )}
+                </Stack>
+              ))}
+              <DefaultButton
+                text="Clear Filters"
+                onClick={clearFilters}
+                disabled={Object.keys(activeFilters).length === 0}
+                style={{ alignSelf: 'end' }}
+              />
+            </Stack>
+          </Stack>
+        )}
+
+        {/* Error Message */}
+        {error && (
+          <MessageBar
+            messageBarType={MessageBarType.error}
+            onDismiss={() => setError(null)}
+          >
+            {error}
+          </MessageBar>
+        )}
+
+        {/* Command Bar */}
+        <CommandBar items={commandBarItems} />
+
+        {/* Results */}
+        {searchQuery.length > 0 && searchQuery.length < minSearchLength && (
+          <MessageBar messageBarType={MessageBarType.info}>
+            Please enter at least {minSearchLength} characters to search
+          </MessageBar>
+        )}
+
+        {loading ? (
+          <div
+            style={{
+              display: 'flex',
+              justifyContent: 'center',
+              alignItems: 'center',
+              minHeight: 200,
+              flexDirection: 'column',
+            }}
+          >
+            <Spinner size={SpinnerSize.large} label="Searching..." />
+          </div>
+        ) : totalResults > 0 ? (
+          <Stack>
+            <Text
+              variant="medium"
+              style={{ color: '#605e5c', marginBottom: 16 }}
+            >
+              Found {totalResults} results for "{searchQuery}"
+            </Text>
+
+            <Pivot
+              selectedKey={selectedTab}
+              onLinkClick={(item) =>
+                setSelectedTab(item?.props.itemKey || 'all')
+              }
+            >
+              {/* All Results Tab */}
+              <PivotItem headerText={`All (${totalResults})`} itemKey="all">
+                <div style={{ paddingTop: 16 }}>
+                  <DetailsList
+                    items={getAllResults()}
+                    columns={createAllResultsColumns()}
+                    setKey="all"
+                    layoutMode={0}
+                    selectionMode={SelectionMode.none}
+                    isHeaderVisible={true}
+                  />
+                </div>
+              </PivotItem>
+
+              {/* Individual Entity Tabs */}
+              {entityConfigs.map((config) => {
+                const results = searchResults[config.key] || [];
+                return (
+                  <PivotItem
+                    key={config.key}
+                    headerText={`${config.title} (${results.length})`}
+                    itemKey={config.key}
+                  >
+                    <div style={{ paddingTop: 16 }}>
+                      {results.length === 0 ? (
+                        <div
+                          style={{
+                            textAlign: 'center',
+                            padding: '40px 20px',
+                            color: '#605e5c',
+                          }}
+                        >
+                          <Text variant="medium">No {config.title} found</Text>
+                        </div>
+                      ) : (
+                        <DetailsList
+                          items={results}
+                          columns={createEnhancedColumns(config)}
+                          setKey={config.key}
+                          layoutMode={0}
+                          selectionMode={SelectionMode.none}
+                          isHeaderVisible={true}
+                        />
+                      )}
+                    </div>
+                  </PivotItem>
+                );
+              })}
+            </Pivot>
+          </Stack>
+        ) : searchQuery.length >= minSearchLength ? (
+          <div
+            style={{
+              textAlign: 'center',
+              padding: '40px 20px',
+              color: '#605e5c',
+            }}
+          >
+            <div style={{ fontSize: 48, marginBottom: 16, color: '#a19f9d' }}>
+              🔍
+            </div>
+            <Text
+              variant="large"
+              style={{ fontWeight: 600, marginBottom: 8, color: '#323130' }}
+            >
+              No results found
+            </Text>
+            <Text variant="medium">
+              Try adjusting your search terms or filters
+            </Text>
+          </div>
+        ) : null}
+      </Stack>
+    </div>
+  );
+}
+
+// Helper function to create search FetchXML template
+export function createSearchFetchXml(
+  entityName: string,
+  attributes: string[],
+  searchFields: string[],
+  orderBy?: string
+): string {
+  const attributeElements = attributes
+    .map((attr) => `<attribute name="${attr}" />`)
+    .join('\n            ');
+  const orderElement = orderBy ? `<order attribute="${orderBy}" />` : '';
+
+  return `
+    <fetch top="50">
+      <entity name="${entityName}">
+        ${attributeElements}
+        ${orderElement}
+        <filter type="or">
+          {{searchConditions}}
+        </filter>
+      </entity>
+    </fetch>`;
+}