Angular项目TaskList service

增删改查跟ProjectService很像

import { TaskList } from './../domain';
import { HttpClient } from '@angular/common/http';
import { Inject, Injectable } from '@angular/core';
import { count, map, mapTo, mergeMap, switchMap } from 'rxjs/operators';
import { from, Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class TaskListService {
  private readonly domain = 'TaskLists';
  private headers = new Headers({
    'Content-type': 'application/json'
  });
  constructor(private httpClient: HttpClient, @Inject('BASE_CONFIG') private config: any) { }

  //POST
  add(TaskList: TaskList): Observable<TaskList> {
    TaskList.id = undefined;
    const uri = `${this.config.uri}/${this.domain}`;
    return this.httpClient.post(uri, JSON.stringify(TaskList)).pipe(
      map(res => res as TaskList)
    )
  }

  //PUT/patch
  update(TaskList: TaskList): Observable<TaskList> {
    const uri = `${this.config.uri}/${this.domain}/${TaskList.id}`;
    const toUpdate = {
      name: TaskList.name //只更新name
    }
    return this.httpClient.patch(uri, JSON.stringify(toUpdate)).pipe(
      map(res => res as TaskList)
    )
  }

  //DELETE
  delete(taskList: TaskList): Observable<TaskList> {
    const uri = `${this.config.uri}/${this.domain}/${taskList.id}`;
    return this.httpClient.delete(uri).pipe(
      mapTo(taskList)
    )
  }

  //GET
  get(projectId: string): Observable<TaskList[]> {
    const uri = `${this.config.uri}/${this.domain}`;
    return this.httpClient.
    get(uri, { params: { 'projectId': projectId } })
    .pipe(
      map(res => res as TaskList[])
    )
  }



}

需要添加一个存储TaskList顺序,通过拖拽交换2个List的顺序。通过Patch更新Order。

也就是要监听两个流merge和concat都行,一个事件流更新drag order,一个事件流更新drop order。

希望这两个流先后更新之后再把得到的task list流返回,做一个reduce操作。

 

//拖拽交换两个List顺序
  swapOrder(src: TaskList, target: TaskList): Observable<TaskList[]> {
    //拖拽的原始uri
    const dragUri = `${this.config.uri}/${this.domain}/${src.id}`;
    const dropUri = `${this.config.uri}/${this.domain}/${src.id}`;
    const drag$ = this.httpClient
      .patch(dragUri, JSON.stringify({ order: target.order }), { headers: this.headers })
      .pipe(map(res => res as TaskList));
    const drop$ = this.httpClient
      .patch(dragUri, JSON.stringify({ order: src.order }), { headers: this.headers })
      .pipe(map(res => res as TaskList));
    return concat(drag$, drop$)
      .pipe(reduce((r: TaskList[], list) => [...r, list], []));
  }

 

如果觉得本文对您有帮助~可以支付宝(左)或微信支持一下:


看到小伙伴打赏时给我写一些鼓励的话,真的非常感动,谢谢你们。


我开了个微信公众号(第三个二维码)用来分享自己的职场英语相关学习经验,感兴趣可以关注,我会不断更新~


微信打赏微信公众号

posted @ 2021-02-24 06:29  starof  阅读(42)  评论(0编辑  收藏  举报