Building the CattleUSA Auctions Module

As a lead developer at CattleUSA, I was responsible for building the Auctions module, which is a core component of the platform. This module allows users to browse and participate in livestock auctions across the United States. This post details the architecture and implementation of the Auctions module, highlighting the key challenges and solutions. According to Angular's official 2025 strategy blog post, the framework is focusing on investing in key areas that help Angular developers succeed, with a strong emphasis on standalone components and improved forms experience—approaches we've embraced in the Auctions module to ensure optimal performance and maintainability.

Core Functionality

The Auctions module is responsible for the following core functionality:

1. Displaying a List of Sale Barns: The module fetches a list of sale barns from the backend and displays them in a user-friendly format.
2. Sorting and Filtering: The module allows users to sort and filter the list of sale barns based on various criteria.
3. User Authentication and Authorization: The module integrates with the authentication and authorization system to ensure that users only have access to the auctions they are authorized to view.
4. Sale Barn Preview Dialog: The module provides a preview dialog that allows users to view more information about a specific sale barn.

Technical Implementation

The Auctions module is implemented using Angular and leverages several key technologies:

1. Angular Components: The UI is built using reusable Angular components.
2. Angular Services: Services are used to handle data fetching, business logic, and authentication.
3. RxJS: RxJS observables are used to manage asynchronous data streams.
4. Angular Material: Angular Material components are used for UI elements.

Data Fetching and Display

The Auctions module fetches sale barn data from the backend using an Angular service. The data is then transformed and displayed in a list using the auctions.component.ts component.

// Fetching sale barn data
this.salebarnService.list().subscribe(salebarns => {
  this.salebarns = salebarns;
});

Sorting and Filtering

The Auctions module allows users to sort and filter the list of sale barns based on various criteria, such as name, location, and date. This is implemented using Angular signals and computed properties.

// Sorting and filtering logic
public sortField = signal<string>('CompanyName');
public sortDirection = signal<string>('asc');

public salebarns = computed(() => {
  const field = this.sortField();
  const direction = this.sortDirection();
  const approvalMap = this.buyerApprovalsMap();
  const salebarns = this.#salebarns();

  const online: salebarnWithApproval[] = [];
  const offline: salebarnWithApproval[] = [];

  salebarns.forEach(barn => {
    if (barn === undefined) return;

    if (barn.Active === 'y' && barn.CattleusaShow === 1) {
      const barnWithApproval = { ...barn } as salebarnWithApproval;
      barnWithApproval.buyerApproval = approvalMap[barn.SaleBarnID] || null;
      barnWithApproval.SaleDayNum = this.dayNum(barn.SaleDay?.toLowerCase());

      if (barn.SaleStatus === 'live') {
        online.push(barnWithApproval);
      } else {
        offline.push(barnWithApproval);
      }
    }
  });

  const sortFn = (a: salebarnWithApproval, b: salebarnWithApproval) => {
    const aValue = a[field as keyof salebarnWithApproval];
    const bValue = b[field as keyof salebarnWithApproval];

    // Handle undefined values
    if (aValue === undefined && bValue === undefined) return 0;
    if (aValue === undefined) return 1; // undefined values sort to the end
    if (bValue === undefined) return -1;

    if (direction === 'asc') {
      return aValue < bValue ? -1 : aValue > bValue ? 1 : 0;
    } else {
      return bValue < aValue ? -1 : bValue > aValue ? 1 : 0;
    }
  };

  online.sort(sortFn);
  offline.sort(sortFn);
  return { online, offline };
});

User Authentication and Authorization

The Auctions module integrates with the authentication and authorization system to ensure that users only have access to the auctions they are authorized to view. This is implemented using Angular guards and services.

// Authentication and authorization logic
public viewAuction(salebarnID: number) {
  const authState = this.auth();
  if (!authState || Object.keys(authState).length == 0 || !authState.AuthToken) {
    this.router.navigate(['/login'], { queryParams: { continue: salebarnID } });
  } else {
    this.router.navigateByUrl('/auctions/' + salebarnID);
  }
}

Sale Barn Preview Dialog

The Auctions module provides a preview dialog that allows users to view more information about a specific sale barn. This is implemented using Angular Material's MatDialog service.

// Opening the sale barn preview dialog
public async openSalebarnPreview(salebarn: salebarnWithApproval, tabIndex: number, isOnline: boolean) {
  const eventsBySalebarn = this.eventsListBySalebarns();

  const dialogRef = this.dialog.open(SaleBarnPreviewComponent, {
    data: {
      isOnline: signal(isOnline),
      salebarn,
      tabIndex,
      eventsList: eventsBySalebarn[salebarn.SaleBarnID] || [],
      onlineEvent: fromEvent(window, 'online')
    },
    panelClass: ['salebarn-preview-dialog', 'itemDetails'],
    autoFocus: false,
    position: { top: '0' },
    width: '95vw',
    maxWidth: '95vw',
    enterAnimationDuration: '250ms',
    exitAnimationDuration: '250ms'
  });
  return dialogRef;
}

Challenges and Solutions

Building the Auctions module presented several challenges:

1. Performance: The module needed to display a large number of sale barns without sacrificing performance. This was addressed by using techniques such as lazy loading and virtualization.
2. Scalability: The module needed to be scalable to handle a growing number of users and auctions. This was addressed by using a component-based architecture and efficient data fetching techniques.
3. User Experience: The module needed to be user-friendly and easy to navigate. This was addressed by using a clean and intuitive UI design.

Results and Impact

The Auctions module has been a success, providing users with a seamless and efficient way to browse and participate in livestock auctions. The module has also contributed to the overall success of the CattleUSA platform.

Conclusion

The Auctions module is a core component of the CattleUSA platform, providing users with a seamless and efficient way to browse and participate in livestock auctions. The module is built using Angular and leverages several key technologies to provide a user-friendly and scalable experience. This project showcases my ability to design and implement complex UI features, integrate with backend services, and optimize for performance and scalability.