plan.component.ts

import { Component, OnInit, OnDestroy } from '@angular/core';
import { HttpHeaders, HttpResponse } from '@angular/common/http';
import { ActivatedRoute } from '@angular/router';
import { Subscription } from 'rxjs';
import { JhiEventManager, JhiParseLinks } from 'ng-jhipster';
import { NgbModal } from '@ng-bootstrap/ng-bootstrap';

import { IPlan } from 'app/shared/model/plan.model';

import { ITEMS_PER_PAGE } from 'app/shared/constants/pagination.constants';
import { PlanService } from './plan.service';
import { PlanDeleteDialogComponent } from './plan-delete-dialog.component';

@Component({
  selector: 'jhi-plan',
  templateUrl: './plan.component.html',
})
export class PlanComponent implements OnInit, OnDestroy {
  plans: IPlan[];
  eventSubscriber?: Subscription;
  itemsPerPage: number;
  links: any;
  page: number;
  predicate: string;
  ascending: boolean;
  currentSearch: string;

  constructor(
    protected planService: PlanService,
    protected eventManager: JhiEventManager,
    protected modalService: NgbModal,
    protected parseLinks: JhiParseLinks,
    protected activatedRoute: ActivatedRoute
  ) {
    this.plans = [];
    this.itemsPerPage = ITEMS_PER_PAGE;
    this.page = 0;
    this.links = {
      last: 0,
    };
    this.predicate = 'id';
    this.ascending = true;
    this.currentSearch =
      this.activatedRoute.snapshot && this.activatedRoute.snapshot.queryParams['search']
        ? this.activatedRoute.snapshot.queryParams['search']
        : '';
  }

  loadAll(): void {
    if (this.currentSearch) {
      this.planService
        .search({
          query: this.currentSearch,
          page: this.page,
          size: this.itemsPerPage,
          sort: this.sort(),
        })
        .subscribe((res: HttpResponse<IPlan[]>) => this.paginatePlans(res.body, res.headers));
      return;
    }

    this.planService
      .query({
        page: this.page,
        size: this.itemsPerPage,
        sort: this.sort(),
      })
      .subscribe((res: HttpResponse<IPlan[]>) => this.paginatePlans(res.body, res.headers));
  }

  reset(): void {
    this.page = 0;
    this.plans = [];
    this.loadAll();
  }

  loadPage(page: number): void {
    this.page = page;
    this.loadAll();
  }

  search(query: string): void {
    this.plans = [];
    this.links = {
      last: 0,
    };
    this.page = 0;
    if (query) {
      this.predicate = '_score';
      this.ascending = false;
    } else {
      this.predicate = 'id';
      this.ascending = true;
    }
    this.currentSearch = query;
    this.loadAll();
  }

  ngOnInit(): void {
    this.loadAll();
    this.registerChangeInPlans();
  }

  ngOnDestroy(): void {
    if (this.eventSubscriber) {
      this.eventManager.destroy(this.eventSubscriber);
    }
  }

  trackId(index: number, item: IPlan): number {
    // eslint-disable-next-line @typescript-eslint/no-unnecessary-type-assertion
    return item.id!;
  }

  registerChangeInPlans(): void {
    this.eventSubscriber = this.eventManager.subscribe('planListModification', () => this.reset());
  }

  delete(plan: IPlan): void {
    const modalRef = this.modalService.open(PlanDeleteDialogComponent, { size: 'lg', backdrop: 'static' });
    modalRef.componentInstance.plan = plan;
  }

  sort(): string[] {
    const result = [this.predicate + ',' + (this.ascending ? 'asc' : 'desc')];
    if (this.predicate !== 'id') {
      result.push('id');
    }
    return result;
  }

  protected paginatePlans(data: IPlan[] | null, headers: HttpHeaders): void {
    const headersLink = headers.get('link');
    this.links = this.parseLinks.parse(headersLink ? headersLink : '');
    if (data) {
      for (let i = 0; i < data.length; i++) {
        this.plans.push(data[i]);
      }
    }
  }
}

plan.model.ts

import { Moment } from 'moment';
import { ITask } from 'app/shared/model/task.model';

export interface IPlan {
  id?: number;
  startDate?: Moment;
  tasks?: ITask[];
}

export class Plan implements IPlan {
  constructor(public id?: number, public startDate?: Moment, public tasks?: ITask[]) {}
}

plan.module.ts

import { NgModule } from '@angular/core';
import { RouterModule } from '@angular/router';

import { DeploymentSharedModule } from 'app/shared/shared.module';
import { PlanComponent } from './plan.component';
import { PlanDetailComponent } from './plan-detail.component';
import { PlanUpdateComponent } from './plan-update.component';
import { PlanDeleteDialogComponent } from './plan-delete-dialog.component';
import { PlanTaskDetailComponent} from './plan-task-detail.component';
import { planRoute } from './plan.route';

@NgModule({
  imports: [DeploymentSharedModule, RouterModule.forChild(planRoute)],
  declarations: [PlanComponent, PlanDetailComponent, PlanUpdateComponent, PlanTaskDetailComponent, PlanDeleteDialogComponent],
  entryComponents: [PlanDeleteDialogComponent],
})
export class DeploymentPlanModule {}

plan.route.ts

import { Injectable } from '@angular/core';
import { HttpResponse } from '@angular/common/http';
import { Resolve, ActivatedRouteSnapshot, Routes, Router } from '@angular/router';
import { Observable, of, EMPTY } from 'rxjs';
import { flatMap } from 'rxjs/operators';

import { Authority } from 'app/shared/constants/authority.constants';
import { UserRouteAccessService } from 'app/core/auth/user-route-access-service';
import { IPlan, Plan } from 'app/shared/model/plan.model';
import { PlanService } from './plan.service';
import { PlanComponent } from './plan.component';
import { PlanDetailComponent } from './plan-detail.component';
import { PlanUpdateComponent } from './plan-update.component';

@Injectable({ providedIn: 'root' })
export class PlanResolve implements Resolve<IPlan> {
  constructor(private service: PlanService, private router: Router) {}

  resolve(route: ActivatedRouteSnapshot): Observable<IPlan> | Observable<never> {
    const id = route.params['id'];
    if (id) {
      return this.service.find(id).pipe(
        flatMap((plan: HttpResponse<Plan>) => {
          if (plan.body) {
            return of(plan.body);
          } else {
            this.router.navigate(['404']);
            return EMPTY;
          }
        })
      );
    }
    return of(new Plan());
  }
}

export const planRoute: Routes = [
  {
    path: '',
    component: PlanComponent,
    data: {
      authorities: [Authority.USER],
      pageTitle: 'Plans',
    },
    canActivate: [UserRouteAccessService],
  },
  {
    path: ':id/view',
    component: PlanDetailComponent,
    resolve: {
      plan: PlanResolve,
    },
    data: {
      authorities: [Authority.USER],
      pageTitle: 'Plans',
    },
    canActivate: [UserRouteAccessService],
  },
  {
    path: 'new',
    component: PlanUpdateComponent,
    resolve: {
      plan: PlanResolve,
    },
    data: {
      authorities: [Authority.USER],
      pageTitle: 'Plans',
    },
    canActivate: [UserRouteAccessService],
  },
  {
    path: ':id/edit',
    component: PlanUpdateComponent,
    resolve: {
      plan: PlanResolve,
    },
    data: {
      authorities: [Authority.USER],
      pageTitle: 'Plans',
    },
    canActivate: [UserRouteAccessService],
  },
];

plan.service.ts

import { Injectable } from '@angular/core';
import { HttpClient, HttpResponse } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
import * as moment from 'moment';

import { DATE_FORMAT } from 'app/shared/constants/input.constants';
import { SERVER_API_URL } from 'app/app.constants';
import { createRequestOption, SearchWithPagination } from 'app/shared/util/request-util';
import { IPlan } from 'app/shared/model/plan.model';

type EntityResponseType = HttpResponse<IPlan>;
type EntityArrayResponseType = HttpResponse<IPlan[]>;

@Injectable({ providedIn: 'root' })
export class PlanService {
  public resourceUrl = SERVER_API_URL + 'api/plans';
  public resourceSearchUrl = SERVER_API_URL + 'api/_search/plans';
  public resourcePlanTaskUrl = SERVER_API_URL + 'api/plantask';

  constructor(protected http: HttpClient) {}


  find(id: number): Observable<EntityResponseType> {
    return this.http
      .get<IPlan>(`${this.resourceUrl}/${id}`, { observe: 'response' })
      .pipe(map((res: EntityResponseType) => this.convertDateFromServer(res)));
  }