frontend/src/modules/ViewItemModal/components/ViewForm/ViewForm.tsx - master - softailor/gridient

frontend/src/modules/ViewItemModal/components/ViewForm/ViewForm.tsx
92 строки3 KB
Jenkins
Auto add
18 фев 2026, 10:19
18 фев 2026, 10:191e6c4f8
import { FC, useEffect } from "react";

import { Spin } from "antd";

import { useGetItemInfoQuery, useGetViewValuesByIdQuery } from "services";

import { useGetFieldGroupsQuery } from "services/fieldGroupsApi";

import { Row } from "./Row";

import "./ViewForm.scss";

type ViewFormProps = {
  listId?: number;
  itemId?: number;
  onSetValuesRefetch?: (refetch: () => void) => void;
};

export const ViewForm: FC<ViewFormProps> = ({ listId, itemId, onSetValuesRefetch }) => {
  const { data: groups, isLoading: groupsLoading } = useGetFieldGroupsQuery(listId);

  const {
    data: values,
    isLoading: valuesLoading,
    refetch: refetchValues,
  } = useGetViewValuesByIdQuery({ listId, itemId }, { skip: itemId === undefined });

  const { data: sysInfo } = useGetItemInfoQuery({ listId, itemId });
  useEffect(() => {
    if (onSetValuesRefetch) {
      onSetValuesRefetch(refetchValues);
    }
  }, [refetchValues, onSetValuesRefetch]);
  if (groupsLoading || valuesLoading) {
    return <Spin />;
  }
  return (
    <div className="view-form">
      <div className="view-form__row">
        <div className="view-form__row-label">Идентификатор</div>
        <div className="view-form__row-value">{itemId}</div>
      </div>
      {groups
        ?.filter(
          (group) => (values ?? []).filter((value) => value.fieldGroupId === group.id).length > 0,
        )
        .sort((a, b) => a.sortOrder - b.sortOrder)
        .map((group) => (
          <div className="view-form__group" key={group.id}>
            {group.precedingTitle && (
              <h3 className="view-form__group-title">{group.precedingTitle}</h3>
            )}
            <h3
              className={group.isSubtitle ? "view-form__group-subtitle" : "view-form__group-title"}
            >
              {group.name}
            </h3>
            {values
              ?.filter((item) => item.fieldGroupId === group.id)
              .sort((a, b) => a.fieldSortOrder - b.fieldSortOrder)
              .map((item, index) => (
                <Row item={item} listId={listId} itemId={itemId} key={index} />
              ))}
          </div>
        ))}
      <div className="view-form__info">
        {sysInfo?.createdBy ? (
          <div className="view-form__info-row">
            Создан пользователем <span>{sysInfo?.createdBy.displayName}</span> в{" "}
            <span>{sysInfo?.created}</span>
          </div>
        ) : (
          <div className="view-form__info-row">
            Создан <span>автоматически в {sysInfo?.created}</span>
          </div>
        )}
        {sysInfo?.modifiedBy && (
          <div className="view-form__info-row">
            Изменен пользователем <span>{sysInfo?.modifiedBy.displayName}</span> в{" "}
            <span>{sysInfo?.updated}</span>
          </div>
        )}
        {sysInfo?.deletedBy && (
          <div className="view-form__info-row">
            Удален пользователем <span>{sysInfo?.deletedBy.displayName}</span> в{" "}
            <span>{sysInfo?.deleted}</span>
          </div>
        )}
      </div>
    </div>
  );
};