zoukankan      html  css  js  c++  java
  • 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], []));
      }

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


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


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


    微信打赏微信公众号

  • 相关阅读:
    一个牛人的人生感悟与心得
    WPF企业内训全程实录(中)【转】
    网易视频
    ASP.NET Mvc + NHibernate + Unity Application Block 示例程序
    B2C电子商务系统(二)定单流程活动图状态图
    全球名校视频公开课公益项目
    jquery Test
    EA(Enterprise Architect)
    介绍两个UML工具
    B2C电子商务系统(一)用例图
  • 原文地址:https://www.cnblogs.com/starof/p/14439196.html
Copyright © 2011-2022 走看看