opf/openproject

View on GitHub
frontend/src/app/shared/components/autocompleter/user-autocompleter/user-autocompleter.component.ts

Summary

Maintainability
A
0 mins
Test Coverage
// -- copyright
// OpenProject is an open source project management software.
// Copyright (C) 2012-2024 the OpenProject GmbH
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License version 3.
//
// OpenProject is a fork of ChiliProject, which is a fork of Redmine. The copyright follows:
// Copyright (C) 2006-2013 Jean-Philippe Lang
// Copyright (C) 2010-2013 the ChiliProject Team
//
// This program is free software; you can redistribute it and/or
// modify it under the terms of the GNU General Public License
// as published by the Free Software Foundation; either version 2
// of the License, or (at your option) any later version.
//
// This program is distributed in the hope that it will be useful,
// but WITHOUT ANY WARRANTY; without even the implied warranty of
// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
// GNU General Public License for more details.
//
// You should have received a copy of the GNU General Public License
// along with this program; if not, write to the Free Software
// Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA  02110-1301, USA.
//
// See COPYRIGHT and LICENSE files for more details.
//++

import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core';
import { Observable } from 'rxjs';
import { filter, map } from 'rxjs/operators';
import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms';
import { ID } from '@datorama/akita';
import { OpInviteUserModalService } from 'core-app/features/invite-user-modal/invite-user-modal.service';
import { HalResource } from 'core-app/features/hal/resources/hal-resource';
import { InjectField } from 'core-app/shared/helpers/angular/inject-field.decorator';
import { IHALCollection } from 'core-app/core/apiv3/types/hal-collection.type';
import {
  OpAutocompleterComponent,
} from 'core-app/shared/components/autocompleter/op-autocompleter/op-autocompleter.component';
import { ApiV3FilterBuilder } from 'core-app/shared/helpers/api-v3/api-v3-filter-builder';
import { addFiltersToPath } from 'core-app/core/apiv3/helpers/add-filters-to-path';
import {
  UserAutocompleterTemplateComponent,
} from 'core-app/shared/components/autocompleter/user-autocompleter/user-autocompleter-template.component';
import { IUser } from 'core-app/core/state/principals/user.model';
import { compareByAttribute } from 'core-app/shared/helpers/angular/tracking-functions';

export const usersAutocompleterSelector = 'op-user-autocompleter';

export interface IUserAutocompleteItem {
  id:ID;
  name:string;
  href:string|null;
  avatar?:string|null;
}

@Component({
  templateUrl: '../op-autocompleter/op-autocompleter.component.html',
  selector: usersAutocompleterSelector,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => UserAutocompleterComponent),
      multi: true,
    },
    // Provide a new version of the modal invite service,
    // as otherwise the close event will be shared across all instances
    OpInviteUserModalService,
  ],
})
export class UserAutocompleterComponent extends OpAutocompleterComponent<IUserAutocompleteItem> implements OnInit, ControlValueAccessor {
  @Input() public inviteUserToProject:string|undefined;

  @Input() public url:string = this.apiV3Service.users.path;

  @Output() public userInvited = new EventEmitter<HalResource>();

  @InjectField(OpInviteUserModalService) opInviteUserModalService:OpInviteUserModalService;

  getOptionsFn = this.getAvailableUsers.bind(this);

  ngOnInit():void {
    super.ngOnInit();

    this.applyTemplates(UserAutocompleterTemplateComponent, { inviteUserToProject: this.inviteUserToProject });

    this
      .opInviteUserModalService
      .close
      .pipe(
        this.untilDestroyed(),
        filter((user) => !!user),
      )
      .subscribe((user:HalResource) => {
        this.userInvited.emit(user);
      });
  }

  public getAvailableUsers(searchTerm?:string):Observable<IUserAutocompleteItem[]> {
    const filteredURL = this.buildFilteredURL(searchTerm);

    filteredURL.searchParams.set('pageSize', '-1');
    filteredURL.searchParams.set('select', 'elements/id,elements/name,elements/self,total,count,pageSize');

    return this
      .http
      .get<IHALCollection<IUser>>(filteredURL.toString())
      .pipe(
        map((res) => _.uniqBy(res._embedded.elements, (el) => el._links.self?.href || el.id)),
        map((users) => {
          return users.map((user) => {
              return { id: user.id, name: user.name, href: user._links.self?.href };
            });
          }),
      );
  }

  protected buildFilteredURL(searchTerm?:string):URL {
    const filterObject = _.keyBy(this.filters, 'name');
    const searchFilters = ApiV3FilterBuilder.fromFilterObject(filterObject);

    if (searchTerm?.length) {
      searchFilters.add(this.searchKey || 'name', '~', [searchTerm]);
    }

    return addFiltersToPath(this.url, searchFilters);
  }

  public addNewObjectFn(searchString:string):IUserAutocompleteItem {
    return {
      id: searchString,
      name: searchString,
      href: null,
      avatar: null,
    };
  }

  protected defaultTrackByFunction():(item:{ href:unknown, name:unknown }) => unknown|null {
    return (item) => item.href || item.name;
  }

  protected defaultCompareWithFunction():(a:unknown, b:unknown) => boolean {
    return compareByAttribute('href', 'name');
  }
}