モーダルに関するメモ

newAPIDtlModal.tsx（デモ用）
import React, { ChangeEvent, useState } from "react";
import { useForm } from 'react-hook-form';
import { Spacer } from "../spacer";
import { commonAjax } from '../../../components/commonAjax';
import * as Defs from './apiDefs';

const NewAPIDtlModal = (props: { val: Defs.Api }) => {
  // プルダウンの選択肢
  const gender = [
    { key: 'integer', label: 'integer' },
    { key: 'long', label: 'long' },
    { key: 'float', label: 'float' },
    { key: 'double', label: 'double' },
    { key: 'string', label: 'string' },
    { key: 'byte', label: 'byte' },
    { key: 'binary', label: 'binary' },
    { key: 'boolean', label: 'boolean(true,false)' },
    { key: 'date', label: 'date(yyyy-mm-dd)' },
    { key: 'dateTime', label: 'dateTime(yyyy-mm-ddTHH:MM:SSZ)' },
  ];

  // api情報をコピー
  const tmp = JSON.parse(JSON.stringify(props.val))
  // apiの各項目に削除、編集中、編集済のフラグを付与
  tmp.outinfo[0].column.map((col:Defs.EditColumn)=>{
    col["delete"] = false;
    col["editing"] = false;
    col["edited"] = false;
  })

  // useState
  const origin = JSON.parse(JSON.stringify(tmp))
  const [editAPI, setEditAPI] = useState<Defs.EditApi>(tmp);
  const [editIndex, setEditIndex] = useState<string>("")
  const [reflectLock, setReflectLock] = useState<boolean>(true)
  const [updated, setUpdated] = useState<boolean>(false)
  // input form
  const [colPhysicalName, setColPhysicalName] = useState<string>("")
  const [colLogicalName, setColLogicalName] = useState<string>("")
  const [colType, setColType] = useState<string>("")

  // react hook form
  const {
    register,
    resetField,
    formState: { isDirty, isValid, errors },
  } = useForm({
    defaultValues: { colLogicalName: '', colPhysicalName:'', colType:''},
    mode: 'onChange',
    criteriaMode: 'all',
  });
  const colLogicalNameField = register('colLogicalName', {
    required: {
      value: true,
      message: '論理名は入力が必須の項目です',
    },
  });
  const colPhysicalNameField = register('colPhysicalName', {
    required: {
      value: true,
      message: '物理名は入力が必須の項目です',
    },
    pattern: {
      value: /^[0-9a-zA-Z_]+$/,
      message: '物理名には英数字およびアンダースコアのみ使用可能です',
    }
  });
  const colTypeField = register('colType', {
    required: {
      value: true,
      message: 'データ型は入力が必須の項目です',
    },
  });

  // 物理名、論理名が入力された際に値を設定する
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    switch (e.target.name) {
      case 'colLogicalName':
        setColLogicalName(e.target.value);
        break;
      case 'colPhysicalName':
        setColPhysicalName(e.target.value);
        break;
    }
  };
  // データ型が入力された際に値を設定する
  const selectChange = (e: ChangeEvent<HTMLSelectElement>) => {
        setColType(e.target.value);
  };

  // 更新と追加のボタン切り替え
  const addOrUpd = ()=>{
    if(editIndex===""){
      return(
        <div className="btn-right">
          <button className="btn btn-secondary"
            disabled={!isDirty || !isValid}
            onClick={()=>{
              const addCol={
                "physicalName":colPhysicalName,
                "logicalName":colLogicalName,
                "type":colType,
                "required":$('#'+editAPI.physical_name+'-required').prop('checked'),
                "delete":false,
                "editing":false,
                "edited":true
              }
              editAPI.outinfo[0].column.push(addCol)
              setEditAPI({...editAPI})
              formReset()
              if(reflectLock){
                $('#'+editAPI.physical_name+'-error').text("")
              }
            }}
          >
            追加する
          </button>
        </div>
      )
    } else {
      return(
        <div className="btn-right">
          <button className="btn btn-secondary"
            disabled={
              Boolean(errors.colLogicalName)
              || Boolean(errors.colPhysicalName)
              || Boolean(errors.colType)
            }
            onClick={()=>{
              const addCol={
                "physicalName":colPhysicalName,
                "logicalName":colLogicalName,
                "type":colType,
                "required":$('#'+editAPI.physical_name+'-required').prop('checked'),
                "delete":false,
                "editing":false,
                "edited":true
              }
              editAPI.outinfo[0].column[Number(editIndex)] = addCol
              setEditAPI({...editAPI})
              setEditIndex("")
              formReset()
            }}
          >
            更新する
          </button>
        </div>
      )
    }
  }

  // 削除と復元のボタン切り替え
  const deleteOrUndo = (item:Defs.EditColumn) => {
    if(!item.delete) {
      return(
        <i className="fa fa-times-circle" aria-hidden="true"
           onClick={()=>{
            editCancel(item)
            item.delete=true
            setEditAPI({...editAPI})
           }}
        ></i>
      )
    } else {
      return(
        <i className="fa fa-reply" aria-hidden="true"
           onClick={()=>{
            item.delete=false
            formReset()
            if(reflectLock){
              $('#'+editAPI.physical_name+'-error').text("")
            }
            setEditAPI({...editAPI})
           }}
        ></i>
      )
    }
  }

  // 編集中断処理
  const editCancel = (item:Defs.EditColumn) => {
    formReset()
    setEditIndex("")
    item.editing=false
  }

  // フォームの初期化
  const formReset = () => {
    $('#'+editAPI.physical_name+'-required').prop('checked',false);
    setColLogicalName("")
    setColPhysicalName("")
    setColType("")
    resetField('colLogicalName')
    resetField('colPhysicalName')
    resetField('colType')
  }

  // put api(add col or delete col)
  function putChangeAPI(){
        (async () => {
          let apiList = JSON.parse(JSON.stringify(editAPI))
          apiList.outinfo[0].column.map((item:any, index:number)=>{
            if(item.delete){
              apiList.outinfo[0].column[index] = {}
            } else {
              delete item["delete"]
              delete item["editing"]
              delete item["edited"]
            }
          })
          apiList.outinfo[0].column = apiList.outinfo[0].column.filter((tmp:any) => Object.keys(tmp).length)
          commonAjax
            .axios({swalFire: true, loading: true})
            .put(`/api/api/${editAPI.physical_name}`, apiList.outinfo[0].column)
            .then((res) => {
              apiList.outinfo[0].column.map((col:Defs.EditColumn)=>{
                col["delete"] = false;
                col["editing"] = false;
                col["edited"] = false;
              })
              setEditAPI(apiList)
              setUpdated(true)
            });
        })();
  }

  // モーダルが閉じられた場合、表示するカラムをもとに戻す
  $("#"+props.val.physical_name+"-dtl-modal").on("hidden.bs.modal",()=>{
    if(!updated){
      setEditAPI(JSON.parse(JSON.stringify(origin)))
      setEditIndex("")
      setReflectLock(true)
      formReset()
      $('#'+editAPI.physical_name+'-error').text("")
      $("#"+props.val.physical_name+"-dtl-modal").off("hidden.bs.modal")
    }else{
      setUpdated(false)
      window.location.reload()
    }
  })

  return (
    <>
    {/* Add API col Modal */}
    {/* Content Header (Page header) */}
    <div className="modal fade" id={editAPI.physical_name+"-dtl-modal"}>
      <div className="modal-dialog api-dtl-modal-width">
        <div className="modal-content">
          <div className="modal-header">
            <h4 className="modal-title">サンプルデータ挿入 / API連携項目追加</h4>
            <button type="button" className="close" data-dismiss="modal" aria-label="Close">
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div className="modal-body">
            {/* API name display area */}
            <div className="name-disp-area">
              <div className="api-name">
                <div className="dtl-content-width">API 論理名</div>
                <div className="dtl-modal-font-color">{editAPI.logical_name}</div>
              </div>
              <div className="api-name">
                <div className="dtl-content-width">API 物理名</div>
                <div className="dtl-modal-font-color">{editAPI.physical_name}</div>
              </div>
              <div className="btn-right">
                <button className="btn btn-secondary"
                onClick={()=>{
                  $("#"+editAPI.physical_name+"-dtl-modal").modal("hide").on("hidden.bs.modal",()=>{
                    setTimeout(()=>$('#'+editAPI.physical_name.replaceAll('_', '')+"sample-data").modal("show"))
                    $("#"+editAPI.physical_name+"-dtl-modal").off("hidden.bs.modal")
                  })
                }}>
                  サンプルデータ挿入
                </button>
              </div>
            </div>
            {Spacer({"size":10})}
            <div className="dividing-line"/>
            {/* API col display area */}
            {Spacer({"size":10})}
            <div className="col-disp-title">すでに連携されている連携項目</div>
            {Spacer({"size":20})}
            {editAPI.outinfo.map((val: Defs.EditTableInfo) => {
              const res: any[] = []
              val.column.map((item: Defs.EditColumn, index:number) => {
                res.push(
                  <div className={`add-col-grid col-disp-grid ${item.delete?"delete-col":item.editing?"editing-col":item.edited&&"edited-col"}`}>
                    <div className="add-item">
                      <div className="add-input-form-title"/>
                      <p className="adjust-indent-base adjust-indent-check">{item.required&&"✔"}</p>
                    </div>
                    <div className="add-item">
                      <div className="add-input-form-title"/>
                      <p className="adjust-indent-base adjust-indent-form">{item.logicalName}</p>
                    </div>
                    <div className="add-item">
                      <div className="add-input-form-title"/>
                      <p className="adjust-indent-base adjust-indent-form">{item.physicalName}</p>
                    </div>
                    <div className="add-item">
                      <div className="add-input-form-title"/>
                      <p className="adjust-indent-base adjust-indent-type">{item.type}</p>
                    </div>
                    <div className="btn-left">
                      <i className={`fa fa-solid fa-pen ${item.delete&&"not-applicable"}`}
                         aria-hidden="true"
                         onClick={()=>{
                          if(item.editing){
                            editCancel(item)
                          }else{
                            if(editIndex!==""){
                              editAPI.outinfo[0].column[Number(editIndex)].editing=false
                            }
                            formReset()
                            setColLogicalName(item.logicalName)
                            setColPhysicalName(item.physicalName)
                            setColType(item.type)
                            $('#'+editAPI.physical_name+'-required').prop('checked',item.required);
                            item.editing=true
                            setEditIndex(String(index))
                          }
                         }}
                      ></i>
                      {Spacer({"size":50,horizontal:true})}
                      {deleteOrUndo(item)}
                    </div>
                  </div>
                )
              })
              return res
            })}
            {Spacer({"size":30})}
            <div className="dividing-line"/>
            {/* Add col input area */}
            {Spacer({"size":30})}
            <div className="add-col-grid">
              <div className="add-item">
                <div className="add-input-form-title">必須</div>
                <input type="checkbox" id={editAPI.physical_name+"-required"} className="form-check-input" name={editAPI.physical_name+"-required"} value="1"/>
                <label className="form-check-label check-only input-data-check" htmlFor={editAPI.physical_name+"-required"}></label>
              </div>
              <div className="add-item">
                <div className="add-input-form-title">論理名</div>
                <input
                  type="text"
                  id={editAPI.physical_name+"-add-col-l-name"}
                  className="form-control add-input-form"
                  value={colLogicalName}
                  {...colLogicalNameField}
                  onChange={(e) => {
                    colLogicalNameField.onChange(e);
                    handleChange(e);
                  }}
                />
              </div>
              <div className="add-item">
                <div className="add-input-form-title">物理名</div>
                <input
                  type="text"
                  id={editAPI.physical_name+"-add-col-p-name"}
                  className="form-control add-input-form"
                  value={colPhysicalName}
                  {...colPhysicalNameField}
                  onChange={(e) => {
                    colPhysicalNameField.onChange(e);
                    handleChange(e);
                  }}
                />
              </div>
              <div className="add-item">
                <div className="add-input-form-title">データ型</div>
                <select
                  id={editAPI.physical_name+"-category-sel"}
                  className="form-control input-data-type"
                  required
                  value={colType}
                  {...colTypeField}
                  onChange={(e) => {
                    colTypeField.onChange(e);
                    selectChange(e);
                  }}
                >
                  <option hidden value="">選択する</option>
                  {gender.map((item, i) => (
                    <option
                      value={item.key}
                      key={item.key}
                    >
                      {item.label}
                    </option>
                  ))}
                </select>
              </div>
              {addOrUpd()}
            </div>
            {Spacer({"size":25})}
            <div className="error-msg-area">
              {errors.colLogicalName?.message && (
                  <div className="text-danger">{errors.colLogicalName.message}</div>
              )}
              {errors.colPhysicalName?.message && (
                  <div className="text-danger">{errors.colPhysicalName.message}</div>
              )}
              {errors.colType?.message && (
                  <div className="text-danger">{errors.colType.message}</div>
              )}
              <div className="text-danger" id={editAPI.physical_name+'-error'}></div>
            </div>
            <div className="reflect-col-btn">
            <button className="btn btn-primary" data-toggle="modal" data-target='#test-modal'>test用</button>
              <button className="btn btn-primary"
                      onClick={()=>{
                        let flg = true
                        editAPI.outinfo[0].column.map((item:Defs.EditColumn)=>{
                          if(!item.delete){
                            flg = false
                            setReflectLock(false)
                          }
                        })
                        if(!flg){
                          putChangeAPI()
                        }else{
                          $('#'+editAPI.physical_name+'-error').text("連携項目は1つ以上必要です")
                        }
                      }}>
                反映する
              </button>
            </div>
            {Spacer({"size":30})}
          </div>
        </div>
        {/* <!-- /.modal-content --> */}
      </div>
      {/* <!-- /.modal-dialog --> */}
    </div>
    {/* <!-- /.modal --> */}
  </>
  )
}

export default NewAPIDtlModal;
kirin-ri / memo

モーダルに関するメモ #5
