lodash#without TypeScript Examples

@modelAction
    checkAllCancleFun() {
        const currentModule = this.sys.currentModule
        if (!currentModule) this.sys.checkedKeys = []
        // const models = [...this.Models.values()]
        const modelIds = this.Modules.get(currentModule)?.models?.map(a => a.id)
        this.sys.checkedKeys = [
            ...without([...this.sys.checkedKeys], ...(modelIds || []))
        ]
    }

@modelAction
    setCheckedKeys = (keys: string[]) => {
        if (!this.sys.tabOrTree) {
            this.sys.checkedKeys = keys
        } else {
            const modelKeys = [...this.Models.values()]
                .filter(
                    a =>
                        !this.sys.currentModule ||
                        a.moduleId === this.sys.currentModule
                )
                .map(a => a.id)
            const withoutKeys = without(modelKeys, ...keys)
            this.sys.checkedKeys = union(
                without(this.sys.checkedKeys, ...withoutKeys),
                keys
            )
        }
    }

constructor( file: FileManagement ) {
		this.privates = Command.initAuthObject();
		this.groups   = Command.initAuthObject();
		this.pUnionReg = Command.initAuthObject();
		this.gUnionReg = Command.initAuthObject();
		
		this.cmdKeys = without( Object.keys( file.loadYAML( "commands" ) ), "tips" );
	}

/**
   * Updates entities specified in `connectedEntitiesIds` by an entity to the other entities in the list (if not already connected) or disconnects
   * this entity from all entities that are not in the list (if there are ones that connected)
   * @param entityId - entity that will be connected to the every entity in the following list
   * @param connectedEntitiesIds - list of entities that will be connected to the entity specified as the first parameter
   * @param connectedEntitiesSchema - schema of the entities in the list
   *
   * @example
   *
   * // will disconnect all connected destinations from source with `sourceId`
   * await this.updateEntitiesConnections(sourceId, [], {
   *   store: this.destinationsStore,
   *   idField: "_uid",
   *   connectedEntitiesIdsField: "_sources",
   * })
   *
   * // will connect source with id `sourceId` to all destination with `connectedDestinationsIds` and will de
   * // will disconnect all non-listed destinations in `connectedDestinationsIds` from source with `sourceId`
   * await this.updateEntitiesConnections(sourceId, connectedDestinationsIds, {
   *   store: this.destinationsStore,
   *   idField: "_uid",
   *   connectedEntitiesIdsField: "_sources",
   * })
   */
  private async updateEntitiesConnections<T extends EntityData>(
    entityId: string,
    connectedEntitiesIds: string[],
    connectedEntitiesSchema: { store: EntitiesStore<T>; idField: string; connectedEntitiesIdsField: string }
  ): Promise<void> {
    const patches: { [id: string]: Partial<T> } = {}
    const { connectedEntitiesIdsField } = connectedEntitiesSchema
    connectedEntitiesSchema.store.list.forEach(entity => {
      const entityShouldBeConnected = connectedEntitiesIds.includes(entity[connectedEntitiesSchema.idField])
      const entityIsConnected = !!entity[connectedEntitiesIdsField]?.includes(entityId)
      if (entityIsConnected === entityShouldBeConnected) return

      if (entityShouldBeConnected) {
        patches[entity[connectedEntitiesSchema.idField]] = {
          [connectedEntitiesIdsField]: [...(entity[connectedEntitiesIdsField] ?? []), entityId],
        } as any
      } else {
        patches[entity[connectedEntitiesSchema.idField]] = {
          [connectedEntitiesIdsField]: without(entity[connectedEntitiesIdsField] ?? [], entityId),
        } as any
      }
    })

    await Promise.all(
      Object.entries(patches).map(([entityId, patch]) => {
        return flowResult(connectedEntitiesSchema.store.patch(entityId, patch))
      })
    )
  }

without(...other: T[]): List<T> {
        return List.of<T>(without([...this], ...other));
    }

function compareSchema(results: RemovePromise<ReturnType<typeof run>>) {
  const classicReqs = results.classic.networkRequests
    .filter((n) => n.url.includes('api.segment') && !n.url.endsWith('/m'))
    .sort()

  const nextReqs = results.next.networkRequests
    .filter((n) => n.url.includes('api.segment') && !n.url.endsWith('/m'))
    .sort()

  nextReqs.forEach((req, index) => {
    const classic = classicReqs[index]
    if (!classic) {
      return
    }

    expect(req.url).toEqual(classic.url)

    // @ts-ignore need all sources to be rebuilt first
    if (classic.data?._metadata) {
      // @ts-ignore need all sources to be rebuilt first
      delete classic.data._metadata.bundledIds

      // @ts-ignore sort unbundled metadata because of a breaking change in the SegmentIO destination
      classic.data._metadata.unbundled = uniq(
        // @ts-ignore
        classic.data._metadata.unbundled.sort()
      )
    }

    expect(req.data).toContainSchema(classic.data)

    const nextSchema = objectSchema(req.data as object)
    const classicSchema = objectSchema(classic.data as object)

    const intersectionKeys = without(
      intersection(nextSchema, classicSchema),

      // These are different on purpose
      'context.library.name',
      'context.library.version',

      // We use the same website with a slightly different URL
      'context.page.search',
      'properties.search',
      'context.page.url',
      'properties.url',

      'messageId',
      'anonymousId',

      // We do an integrations specific check below since 'next'
      // may have action-destinations that 'classic' does not
      'integrations'
    )

    expect((req.data as Record<string, JSONValue>).integrations).toEqual(
      expect.objectContaining(
        (classic.data as Record<string, JSONValue>).integrations
      )
    )

    const flatNext = flat(req.data) as Record<string, JSONValue>
    const flatClassic = flat(classic.data) as Record<string, JSONValue>

    intersectionKeys.forEach((key) => {
      const comparison = {
        url: req.url,
        key,
        next: flatNext[key],
        classic: flatClassic[key],
      }

      expect({ ...comparison, val: comparison.next }).toEqual({
        ...comparison,
        val: comparison.classic,
      })
    })
  })
}

PureKanban = (props: IKanbanProps) => {
  const { data, boards, execOperation, setBoard, setIsDrag, isDrag, setCurrentCard, currentCard, CardRender, ...rest } =
    props;
  const {
    id: boardId,
    title: boardTitle,
    cards: boardCards,
    pageNo: propsPageNo,
    operations,
    total = 0,
    pageSize = 20,
    ...dataRest
  } = data || {};
  const titleArr = map(boards, 'title');
  const otherTitle = without(titleArr, boardTitle);
  const [pageNo, setPageNo] = React.useState(propsPageNo);
  const [cards, setCards] = React.useState(boardCards || []);
  const [title, setTitle] = React.useState(boardTitle);
  const [showShadow, setShowShadow] = React.useState(false);
  const cardType = 'kanban-info-card';

  const boardDataRef = {
    id: boardId,
    title: boardTitle,
    pageNo: propsPageNo,
    operations,
    total,
    pageSize,
    ...dataRest,
  };

  useUpdateEffect(() => {
    if (propsPageNo > pageNo) {
      boardCards && setCards((prev) => prev.concat(boardCards));
    } else {
      setCards(boardCards || []);
    }
    setPageNo(propsPageNo);
  }, [boardCards, propsPageNo]);

  const boardLoadMoreOp = operations?.boardLoadMore;
  const hasMore = boardLoadMoreOp && total > cards.length;

  const [{ isOver, isAllowDrop }, drop] = useDrop({
    accept: cardType,
    drop: (item: Merge<DragObjectWithType, { data: ICardData }>) => {
      const { cardMoveTo } = item.data.operations;
      const targetKeys = cardMoveTo.serverData?.allowedTargetBoardIDs || [];
      if (!targetKeys?.includes(boardId)) {
        setCurrentCard(null);
        return;
      }
      setCurrentCard(item.data);
      const dragColKey = item.data.boardId;
      const dropColKey = boardId;
      let newTargetKeys = [...targetKeys];
      if (!newTargetKeys.includes(dragColKey)) {
        newTargetKeys.push(dragColKey);
      }
      newTargetKeys = newTargetKeys.filter((t) => t !== dropColKey);
      const newItem = produce(item, (draft: { data: Obj }) => {
        draft.data.operations.cardMoveTo.serverData.allowedTargetBoardIDs = newTargetKeys;
      });
      setBoard((prev) => {
        return prev.map((col) => {
          if (col.id === dropColKey) {
            return {
              ...col,
              cards: col.cards ? [newItem.data, ...col.cards] : [newItem.data],
              total: +(col.total || 0) + 1,
            };
          } else if (col.id === dragColKey) {
            return {
              ...col,
              cards: col.cards?.filter((a) => a.id !== newItem.data.id),
              total: Math.max((col.total || 0) - 1, 0),
            };
          }
          return col;
        });
      });
      execOperation({
        reload: true,
        ...cardMoveTo,
        clientData: { targetBoardID: boardId, dataRef: item.data.dataRef },
      });
    },
    collect: (monitor) => {
      const item = monitor?.getItem && monitor?.getItem();
      const targetKeys = get(item, 'data.operations.cardMoveTo.serverData.allowedTargetBoardIDs') || [];
      let _isAllowDrop = true;
      if (!targetKeys?.length || !targetKeys.includes(boardId)) {
        _isAllowDrop = false;
      }
      return {
        isOver: monitor.isOver(),
        isAllowDrop: _isAllowDrop,
      };
    },
  });

  const changeData = (item: CP_KANBAN.ICard) => {
    const { operations: cardOp } = item;
    return {
      ...item,
      boardId,
      operations: {
        ...(cardOp?.cardMoveTo ? { cardMoveTo: { key: 'cardMoveTo', ...cardOp.cardMoveTo } } : {}),
      },
      dataRef: item,
    };
  };

  let cls = isOver ? 'drag-over' : '';
  cls = isDrag && !isAllowDrop ? `drop-disable ${cls}` : cls;
  cls = isDrag && !isOver ? `not-drag ${cls}` : cls;
  const deleteBoardOp = operations?.boardDelete;
  const deleteAuth = deleteBoardOp?.disabled !== true;
  const updateBoardOp = operations?.boardUpdate;
  const updateAuth = updateBoardOp?.disabled !== true;

  const doUpdate = () => {
    if (title === boardTitle) return;
    if (!title) {
      setTitle(boardTitle);
      return notify('error', i18n.t('can not be empty'));
    }
    if (otherTitle.includes(title)) {
      setTitle(boardTitle);
      return notify('error', i18n.t('{name} already exists', { name: boardTitle }));
    }
    execOperation({
      key: 'boardUpdate',
      reload: true,
      ...operations?.boardUpdate,
      clientData: { dataRef: data, title },
    });
  };

  const handleScroll = (e: any) => {
    setShowShadow(e.target.scrollTop !== 0);
  };

  const loadMore = () => {
    execOperation({
      key: 'boardLoadMore',
      reload: true,
      ...boardLoadMoreOp,
      clientData: {
        pageNo: pageNo + 1,
        pageSize,
        dataRef: boardDataRef,
      },
    } as CP_COMMON.Operation);
  };

  return (
    <div className={classnames(`cp-kanban-col ${cls}`, { 'cp-kanban-col-special-pdd': updateBoardOp })} ref={drop}>
      <div
        className={`flex justify-between items-center cp-kanban-col-header ${showShadow ? 'shadow' : ''} ${
          updateBoardOp ? 'inp' : ''
        }`}
      >
        <div className="text-base font-medium text-default-8 flex-1 flex items-center ">
          {updateBoardOp ? (
            updateAuth ? (
              <Input
                className="text-base font-medium cp-kanban-label-input"
                value={title}
                onChange={(e: React.ChangeEvent<HTMLInputElement>) => setTitle(e.target.value)}
                onPressEnter={doUpdate}
                onBlur={doUpdate}
              />
            ) : (
              <Tooltip title={updateBoardOp.disabledTip || i18n.t('common:No permission to operate')}>
                <Input className="text-base font-medium cp-kanban-label-input update-disabled" readOnly value={title} />
              </Tooltip>
            )
          ) : (
            title
          )}
          <div className="text-default-8 ml-1 text-sm px-2.5 rounded-lg bg-default-06">{total}</div>
        </div>
        {deleteBoardOp ? (
          deleteBoardOp.confirm ? (
            <WithAuth pass={deleteAuth} noAuthTip={deleteBoardOp.disabledTip}>
              <Popconfirm
                title={deleteBoardOp.confirm}
                onConfirm={() =>
                  execOperation({
                    key: 'boardDelete',
                    reload: true,
                    ...deleteBoardOp,
                    clientData: { dataRef: boardDataRef },
                  })
                }
              >
                <ErdaIcon type="delete1" className="ml-3 cursor-pointer" />
              </Popconfirm>
            </WithAuth>
          ) : (
            <WithAuth pass={deleteAuth} noAuthTip={deleteBoardOp.disabledTip}>
              <ErdaIcon
                type="delete1"
                className="ml-3 cursor-pointer"
                onClick={() =>
                  execOperation({
                    key: 'boardDelete',
                    reload: true,
                    ...deleteBoardOp,
                    clientData: { dataRef: boardDataRef },
                  })
                }
              />
            </WithAuth>
          )
        ) : null}
      </div>
      <div className="cp-kanban-col-content" onScroll={handleScroll}>
        {map(cards, (item) => {
          const curDragOp = item.operations?.cardMoveTo;
          return (
            <CardItem
              key={item.id}
              card={changeData(item)}
              CardRender={CardRender}
              cardType={cardType}
              draggable={curDragOp && !curDragOp.disabled}
              className={`${isDrag ? 'hidden' : ''} kanban-list-item ${
                currentCard?.id === item.id ? 'dragged-card' : ''
              }`}
              setIsDrag={setIsDrag}
              onClick={() => {
                rest?.customOp?.clickCard?.(item);
              }}
            />
          );
        })}
        {hasMore && !isDrag ? (
          <div className="hover-active py-1 text-center load-more" onClick={() => loadMore()}>
            {i18n.t('load more')}
          </div>
        ) : null}
      </div>
    </div>
  );
}