@khester/create-dynamics-app 1.1.0 → 2.1.0

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

@@ -1,629 +0,0 @@
-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>`;
-}