comicgum
203 lines
7.3 KiB
TypeScript
203 lines
7.3 KiB
TypeScript
"use client";
|
|
import React, { useEffect, useState } from "react";
|
|
import Label from '@/components/form/Label2';
|
|
import Input from '@/components/form/input/InputField2';
|
|
import Select from '@/components/form/Select2';
|
|
import CtModal from "@/components/CtModal";
|
|
import { useMultiState } from "@/hooks/useMultiState";
|
|
import api from '@/lib/_AG';
|
|
import Button from "@/components/ui/button/Button2";
|
|
import { PlusIcon, TrashBinIcon } from "@/icons";
|
|
|
|
|
|
interface DeviceGooodsItem {
|
|
column_no: string;
|
|
goods_id: number;
|
|
price?: number;
|
|
inventory?: number;
|
|
}
|
|
|
|
export interface GoodsModalProps {
|
|
biz_group_name?: string; // internal use
|
|
biz_reg_num?: string; // internal use
|
|
device_name?: string; // internal use
|
|
optGoodsList: { label: string; value: string; }[];
|
|
//
|
|
device_id: string;
|
|
prev_device_goods: DeviceGooodsItem[];
|
|
new_device_goods: DeviceGooodsItem[];
|
|
}
|
|
|
|
interface ManageGoodsModalProps {
|
|
multiState: ReturnType<typeof useMultiState<GoodsModalProps>>;
|
|
onOk: () => void;
|
|
isOpen: boolean;
|
|
closeModal: () => void;
|
|
}
|
|
|
|
|
|
export default function ManageGoodsModal({ multiState, onOk, isOpen, closeModal }: ManageGoodsModalProps) {
|
|
|
|
function computeGoods(modal: GoodsModalProps): GoodsModalProps {
|
|
// 1 & 2. 우선 slot이 빈 문자열("")이 아닌 아이템들만 추출 (1차 필터링)
|
|
const filteredPrev = modal.prev_device_goods.filter(item => item.column_no !== "");
|
|
const filteredNew = modal.new_device_goods.filter(item => item.column_no !== "");
|
|
|
|
// 3. slot이 같으면서 goods_id까지 같은 아이템은 양쪽에서 제거
|
|
// 즉, "상대방 배열에 나랑 똑같은(column_no & goods_id) 애가 없는" 것들만 남깁니다.
|
|
|
|
// device_goods 정제
|
|
const final_device_goods = filteredPrev.filter(prevItem =>
|
|
!filteredNew.find(newItem =>
|
|
newItem.column_no === prevItem.column_no && newItem.goods_id === prevItem.goods_id
|
|
)
|
|
);
|
|
|
|
// new_device_goods 정제
|
|
const final_new_device_goods = filteredNew.filter(newItem =>
|
|
!filteredPrev.find(prevItem =>
|
|
prevItem.column_no === newItem.column_no && prevItem.goods_id === newItem.goods_id
|
|
)
|
|
);
|
|
|
|
// 결과 저장
|
|
return {
|
|
...modal,
|
|
prev_device_goods: final_device_goods,
|
|
new_device_goods: final_new_device_goods,
|
|
};
|
|
}
|
|
|
|
|
|
/*
|
|
const handleSelectGoods = (goods_id: number, newValue: string) => {
|
|
setGoodsList((prev) =>
|
|
prev.map((item) => (item.goods_id === id ? { ...item, value: newValue } : item))
|
|
);
|
|
};
|
|
*/
|
|
|
|
const handleClickAddOrModify = () => {
|
|
//if (multiState.values.name == "") {
|
|
// alert("기기 명칭을 입력하셔야 합니다.");
|
|
// return;
|
|
//}
|
|
|
|
console.log("1 - ", multiState.values.prev_device_goods);
|
|
console.log("2 - ", multiState.values.new_device_goods);
|
|
|
|
//const { biz_group_name, biz_reg_num, device_name, optGoodsList, ...params } = multiState.values;
|
|
const { biz_group_name, biz_reg_num, device_name, optGoodsList, ...params } = computeGoods(multiState.values);
|
|
|
|
console.log("5 - ", params.prev_device_goods);
|
|
console.log("6 - ", params.new_device_goods);
|
|
|
|
|
|
//console.log(params);
|
|
|
|
api.post('/api/manage-device-goods.do', params).then((resp) => {
|
|
console.log(resp);
|
|
|
|
if (resp.data.errCode == 0) {
|
|
alert("저장되었습니다.");
|
|
onOk();
|
|
}
|
|
else if (resp.data.errCode == -11) {
|
|
alert("컬럼번호는 중복될 수 없습니다.");
|
|
}
|
|
else {
|
|
alert("일시적으로 사용할 수 없습니다 : " + resp.data.errCode);
|
|
}
|
|
})
|
|
.catch((err) => console.error(err))
|
|
}
|
|
|
|
const handleClickAdd = () => {
|
|
if (multiState.values.optGoodsList.length == 0) {
|
|
//alert("등록된 상품이 없습니다. 좌측 '상품관리' 메뉴에서 상품목록을 등록하세요.");
|
|
return;
|
|
}
|
|
|
|
const newItem: DeviceGooodsItem = { column_no: "", goods_id: parseInt(multiState.values.optGoodsList[0].value) }
|
|
const newArray: DeviceGooodsItem[] = [...multiState.values.new_device_goods, newItem];
|
|
|
|
multiState.set("new_device_goods", newArray);
|
|
}
|
|
|
|
const handleClickDel = (row: number) => {
|
|
const newArray: DeviceGooodsItem[] =
|
|
multiState.values.new_device_goods.filter((_, index) => index !== row);
|
|
|
|
multiState.set("new_device_goods", newArray);
|
|
}
|
|
|
|
const handleChangeSlot = (index: number, newValue: string) => {
|
|
const newArray: DeviceGooodsItem[] = [...multiState.values.new_device_goods];
|
|
newArray[index].column_no = newValue;
|
|
|
|
multiState.set("new_device_goods", newArray);
|
|
};
|
|
|
|
const handleChangeInventory = (index: number, newValue: string) => {
|
|
const newArray: DeviceGooodsItem[] = [...multiState.values.new_device_goods];
|
|
newArray[index].inventory = Number(newValue);
|
|
|
|
multiState.set("new_device_goods", newArray);
|
|
};
|
|
|
|
const handleChangeGoods = (index: number, newValue: string) => {
|
|
const newArray: DeviceGooodsItem[] = [...multiState.values.new_device_goods];
|
|
newArray[index].goods_id = Number(newValue);
|
|
|
|
multiState.set("new_device_goods", newArray);
|
|
};
|
|
|
|
return (
|
|
// <div className="rounded-2xl border border-gray-200 bg-white dark:border-gray-800 dark:bg-white/[0.03]">
|
|
<CtModal
|
|
title={"기기에 상품 등록 또는 수정"}
|
|
description={"등록 또는 수정할 상품 정보를 입력하세요."}
|
|
okBtnText={"저장"}
|
|
onClickOk={handleClickAddOrModify}
|
|
isOpen={isOpen}
|
|
closeModal={closeModal}
|
|
className="max-w-[700px] p-6 lg:p-10"
|
|
>
|
|
<div>
|
|
<Label>사업자원장</Label>
|
|
<Input type="text" value={multiState.values.biz_group_name + (multiState.values.biz_reg_num ? `(${multiState.values.biz_reg_num})` : "")} disabled />
|
|
</div>
|
|
<div>
|
|
<Label>무인기기명 또는 관리이름</Label>
|
|
<Input type="text" placeholder="" value={multiState.values.device_name} disabled />
|
|
</div>
|
|
{multiState.values.new_device_goods.map((item, index) => (
|
|
<div key={index}>
|
|
<Label>상품정보 {index + 1}</Label>
|
|
<div className="flex gap-2">
|
|
<div className={"w-34"}>
|
|
<Input type="text" placeholder="컬럼번호2" value={multiState.values.new_device_goods[index].column_no} onChange={(e) => handleChangeSlot(index, e.target.value)} />
|
|
</div>
|
|
<div className="flex-1">
|
|
<Select
|
|
placeholder="상품을 선택하세요"
|
|
options={multiState.values.optGoodsList}
|
|
defaultValue={String(multiState.values.new_device_goods[index].goods_id)}
|
|
onChange={(e) => handleChangeGoods(index, e.target.value)}
|
|
className="dark:bg-dark-900" />
|
|
</div>
|
|
<div className={"w-34"}>
|
|
<Input type="number" placeholder="수량" value={multiState.values.new_device_goods[index].inventory} onChange={(e) => handleChangeInventory(index, e.target.value)} />
|
|
</div>
|
|
<Button size="sm" variant="outline" startIcon={<TrashBinIcon />} onClick={() => handleClickDel(index)}></Button>
|
|
</div>
|
|
</div>
|
|
))}
|
|
<div>
|
|
<Button size="sm" variant="primary" startIcon={<PlusIcon />} onClick={handleClickAdd}>상품 추가하기</Button>
|
|
</div>
|
|
</CtModal>
|
|
// </div>
|
|
);
|
|
};
|