Merge remote-tracking branch 'origin/qcast-pub' into dev

src/components/common/draggable/WithDraggable.jsx

@@ -3,16 +3,7 @@
 import { useState } from 'react'
 import Draggable from 'react-draggable'
 
-export default function WithDraggable({
-  isShow,
-  children,
-  pos = { x: 0, y: 0 },
-  handle = '',
-  className = '',
-  isModal = true,
-  hasFooter = true,
-  isHidden = false,
-}) {
+export default function WithDraggable({ isShow, children, pos = { x: 0, y: 0 }, handle = '', className = '', hasFooter = true, isHidden = false }) {
   const [position, setPosition] = useState(pos)
 
   const handleOnDrag = (e, data) => {
@@ -31,14 +22,10 @@ export default function WithDraggable({
           onDrag={(e, data) => handleOnDrag(e, data)}
           handle={handle === '' ? '.modal-handle' : handle}
         >
-          {isModal ? (
-            <div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
-              {children}
-              {hasFooter && <WithDraggableFooter />}
-            </div>
-          ) : (
-            <>{children}</>
-          )}
+          <div className={`modal-pop-wrap ${className}`} style={{ visibility: isHidden ? 'hidden' : 'visible' }}>
+            {children}
+            {hasFooter && <WithDraggableFooter />}
+          </div>
         </Draggable>
       )}
     </>
@@ -68,15 +55,10 @@ function WithDraggableBody({ children }) {
   )
 }
 
-function WithDraggablePanel({ children }) {
-  return <>{children}</>
-}
-
 function WithDraggableFooter() {
   return <div className="modal-foot modal-handle"></div>
 }
 
 WithDraggable.Header = WithDraggableHeader
 WithDraggable.Body = WithDraggableBody
-WithDraggable.Panel = WithDraggablePanel
 WithDraggable.Footer = WithDraggableFooter

src/components/floor-plan/modal/circuitTrestle/step/PowerConditionalSelect.jsx

@@ -165,6 +165,15 @@ export default function PowerConditionalSelect(props) {
       return
     }
 
+    if (selectedRow.pcsSerParallelYn === 'Y' && selectedModels.length === 0 && selectedMaker.pcsMkrMultiType === PCS_MKR_MULTI_TYPE.SINGLE_P) {
+      swalFire({
+        title: getMessage('modal.module.pcs.error1'),
+        icon: 'warning',
+      })
+
+      return
+    }
+
     if (selectedMaker.pcsMkrMultiType === PCS_MKR_MULTI_TYPE.MULTI) {
       setSelectedModels([...selectedModels, { ...selectedRow, id: uuidv4() }])
     } else if (!selectedModels.find((m) => m.itemId === selectedRow.itemId)) {
@@ -174,6 +183,11 @@ export default function PowerConditionalSelect(props) {
   }
 
   const onRemoveSelectedModel = (model) => {
+    const tempModels = selectedModels.filter((m) => m.id !== model.id)
+    if (tempModels.length === 1 && tempModels[0].pcsSerParallelYn === 'Y') {
+      setSelectedModels([])
+      return
+    }
     setSelectedModels(selectedModels.filter((m) => m.id !== model.id))
   }
 
@@ -282,14 +296,6 @@ export default function PowerConditionalSelect(props) {
           </label>
         </div>
       </div>
-      {/* <div className="grid-btn-wrap">
-        <button className="btn-frame modal mr5" onClick={() => setTabNum(2)}>
-          {getMessage('modal.circuit.trestle.setting.circuit.allocation.auto')}
-        </button>
-        <button className="btn-frame modal act" onClick={() => setTabNum(tabNum + 1)}>
-          {getMessage('modal.circuit.trestle.setting.circuit.allocation.passivity')}
-        </button>
-      </div> */}
     </>
   )
 }

src/components/floor-plan/modal/panelBatch/PanelBatchStatistics.jsx

@@ -11,60 +11,64 @@ import { canvasState } from '@/store/canvasAtom'
 import { POLYGON_TYPE } from '@/common/common'
 import { useCircuitTrestle } from '@/hooks/useCirCuitTrestle'
 import { moduleSelectionDataState } from '@/store/selectedModuleOptions'
+import Draggable from 'react-draggable'
 
 export default function PanelBatchStatistics() {
   const { getMessage } = useMessage()
   const [isFold, setIsFold] = useState(false)
-  const [pos, setPos] = useState({
-    x: 0,
-    y: 30,
-  })
   const canvas = useRecoilValue(canvasState)
   const { header, rows, footer } = useRecoilValue(moduleStatisticsState)
   const { setModuleStatisticsData } = useCircuitTrestle(true)
   const [moduleSelectionDataStore, setModuleSelectionDataStore] = useRecoilState(moduleSelectionDataState)
+  const [position, setPosition] = useState({
+    x: 0,
+    y: 30,
+  })
+
+  const handleOnDrag = (e, data) => {
+    e.stopPropagation()
+    setPosition({ x: data.x, y: data.y })
+  }
 
   useEffect(() => {
     if (moduleSelectionDataStore && moduleSelectionDataStore.module) setModuleStatisticsData()
   }, [])
 
   return (
-    <WithDraggable isShow={true} handle=".penal-wrap" pos={pos} isModal={false}>
-      <WithDraggable.Panel>
-        <div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
-          <h2>{getMessage('modal.panel.batch.statistic')}</h2>
-          <button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
-          <div className="penal-table-wrap">
-            <table className="penal-table">
-              <thead>
-                <tr>
-                  {header.map((item, index) => (
-                    <th key={`statistic-hd-${index}`}>{item.name}</th>
-                  ))}
-                </tr>
-              </thead>
-              <tbody>
-                {rows.map((row, index) => (
-                  <tr key={`statistic-row-${index}`}>
-                    {header.map((item, i) => (
-                      <td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
-                    ))}
-                  </tr>
+    <Draggable position={{ x: position.x, y: position.y }} onDrag={(e, data) => handleOnDrag(e, data)} handle=".penal-wrap">
+      <div className={`penal-wrap ${!isFold ? 'act' : ''}`}>
+        <h2>{getMessage('modal.panel.batch.statistic')}</h2>
+        <button className="penal-arr" onClick={() => setIsFold(!isFold)}></button>
+        <div className="penal-table-wrap">
+          <table className="penal-table">
+            <thead>
+              <tr>
+                {header.map((item, index) => (
+                  <th key={`statistic-hd-${index}`}>{item.name}</th>
                 ))}
-                <tr>
-                  {header.map((header, index) => (
-                    <td key={`statistic-ft-${index}`}>
-                      {typeof footer[header.prop] === 'number'
-                        ? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
-                        : footer[header.prop]}
-                    </td>
+              </tr>
+            </thead>
+            <tbody>
+              {rows.map((row, index) => (
+                <tr key={`statistic-row-${index}`}>
+                  {header.map((item, i) => (
+                    <td key={`statistic-col-${i}`}>{row[item.prop] ?? 0}</td>
                   ))}
                 </tr>
-              </tbody>
-            </table>
-          </div>
+              ))}
+              <tr>
+                {header.map((header, index) => (
+                  <td key={`statistic-ft-${index}`}>
+                    {typeof footer[header.prop] === 'number'
+                      ? footer[header.prop].toLocaleString('ko-KR', { maximumFractionDigits: 4 })
+                      : footer[header.prop]}
+                  </td>
+                ))}
+              </tr>
+            </tbody>
+          </table>
         </div>
-      </WithDraggable.Panel>
-    </WithDraggable>
+      </div>
+    </Draggable>
   )
 }