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 @   starof  阅读(95)  评论(0编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源!
· 字符编码:从基础到乱码解决
历史上的今天:
2017-02-24 处理跨域方式
2017-02-24 用jQuery实现Ajax
2016-02-24 css3常用动画+动画库
点击右上角即可分享
微信分享提示