admin-dashboard-web/src/Pages/EquipmentDocumentation/CreateEquipmentDocumentationModal.js

import { Button } from "antd";
import { useState } from "react";
import { PlusOutlined } from "@ant-design/icons";
import { EquipmentDocumentationViewEditComponent } from ".";

export default function CreateEquipmentDocumentationModal({
  stockItemId,
  fetchDocumentation,
  buttonBlock,
}) {
  const [isOpen, setIsOpen] = useState(false);

  return (
    <>
      <Button
        block={buttonBlock}
        type="primary"
        icon={<PlusOutlined />}
        onClick={() => setIsOpen(true)}
      >
        Create documentation
      </Button>

      <EquipmentDocumentationViewEditComponent
        createMode
        isOpen={isOpen}
        onCancel={() => setIsOpen(false)}
        stockItemId={stockItemId}
        fetchDocumentation={fetchDocumentation}
      />
    </>
  );
}

/*
export default function CreateEquipmentDocumentationModal({
  scannerResult,
  fetchDocumentation,
  buttonBlock,
}) {
  const [isOpen, setIsOpen] = useState(false);
  const [title, setTitle] = useState("New documentation");
  const [selectedDocumentationType, setSelectedDocumentationType] = useState(
    selectDocumentationTypeOptions[0].value
  );
  const [notes, setNotes] = useState([emptyNote]);
  const [isDocumentationUploading, setIsDocumentationUploading] =
    useState(false);

  const handleCancel = () => setIsOpen(false);

  const handleCreate = () => {
    setIsDocumentationUploading(true);

    const updatedNotes = [...notes];

    updatedNotes.forEach((note, index) => {
      if (note.image === null && note.description === "") {
        updatedNotes.splice(index, 1);
      }
    });

    let body = {
      stockItemId: scannerResult,
      type: selectedDocumentationType,
      title: title,
      notes: updatedNotes,
    };

    console.log("body", body);

    myFetch(`/equipment/documentation/create`, "POST", body, {}).then(
      (data) => {
        console.log("data", data);

        setIsDocumentationUploading(false);
        fetchDocumentation();
        handleCancel();
      }
    );
  };

  const handleDescriptionChange = (index) => (e) => {
    const updatedNotes = [...notes];

    updatedNotes[index] = {
      ...updatedNotes[index],
      description: e.target.value,
    };

    setNotes(updatedNotes);
  };

  const handleImageChange = (index) => (newImage) => {
    const updatedNotes = [...notes];

    updatedNotes[index] = {
      ...updatedNotes[index],
      image: newImage,
    };

    setNotes(updatedNotes);
  };

  const handleAddNote = () => setNotes([...notes, emptyNote]);

  const isAddNoteButtonDisabled = () => {
    const lastNote = notes[notes.length - 1];

    return lastNote.image === null && lastNote.description === "";
  };

  const isCreateButtonDisabled = () => {
    if (notes.length === 0) return true;

    if (notes.length === 1) {
      return notes[0].image === null && notes[0].description === "";
    }

    return false;
  };

  return (
    <>
      <Button
        block={buttonBlock}
        type="primary"
        icon={<PlusOutlined />}
        onClick={() => setIsOpen(true)}
      >
        Create documentation
      </Button>

      <MyModal
        isOpen={isOpen}
        onCancel={handleCancel}
        footer={
          <MyModalCloseCreateButtonFooter
            onCreate={handleCreate}
            isCreateButtonDisabled={isCreateButtonDisabled()}
            isCreateButtonLoading={isDocumentationUploading}
            onCancel={handleCancel}
          />
        }
      >
        <Typography.Title
          editable={{ text: title, onChange: setTitle }}
          level={1}
        >
          {title}
        </Typography.Title>

        <div style={{ marginBottom: AppStyle.typography.text.marginBottom }}>
          <Typography.Text>Documentation type</Typography.Text>
        </div>

        <Select
          //defaultValue={selectedDocumentationType}
          value={selectedDocumentationType}
          style={{ width: "100%", marginBottom: AppStyle.app.margin }}
          onChange={(value) => setSelectedDocumentationType(value)}
          options={selectDocumentationTypeOptions}
        />

        {notes.map((note, index) => (
          <NoteComponent
            key={index}
            index={index}
            image={note.image}
            onImageChange={handleImageChange(index)}
            description={note.description}
            onDescriptionChange={handleDescriptionChange(index)}
            onDeleteImage={() => handleImageChange(index)(null)}
          />
        ))}

        <div style={{ textAlign: "center" }}>
          <Button
            type="primary"
            disabled={isAddNoteButtonDisabled()}
            icon={<PlusOutlined />}
            onClick={handleAddNote}
          >
            Add note
          </Button>
        </div>
      </MyModal>
    </>
  );
}
*/