Merge Q-CAST-III-MR-185: 물건현황 목록, 상세 1차점,2차점 즐겨찾기 & 목록 그리드 헤더 정렬추가

src/components/management/Stuff.jsx

@@ -43,9 +43,9 @@ export default function Stuff() {
   const copyNo = async (value) => {
     try {
       await navigator.clipboard.writeText(value)
-      alert('물건번호가 복사되었습니다.')
+      alert(getMessage('stuff.detail.header.message2'))
     } catch (error) {
-      alert('물건번호 복사에 실패했습니다.')
+      alert(getMessage('stuff.detail.header.message3'))
     }
   }
 

src/components/management/StuffDetail.jsx

@@ -88,6 +88,9 @@ export default function StuffDetail() {
   const [prefCodeList, setPrefCodeList] = useState([]) //도도부현 코트 리스트
   const [prefValue, setPrefValue] = useState('')
   const [saleStoreList, setSaleStoreList] = useState([]) // 판매점 리스트
+  const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
+  const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
+
   const [otherSaleStoreList, setOtherSaleStoreList] = useState([])
   const [originOtherSaleStoreList, setOriginOtherSaleStoreList] = useState([])
 
@@ -318,21 +321,37 @@ export default function StuffDetail() {
 
       //1차점 : X167 T01
       //2차점 : 10X22, 201X112
-      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
+      let url
+      if (sessionState?.storeId === 'T01') {
+        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
+        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+      } else {
+        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+      }
+
+      get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
           const firstList = res.filter((row) => row.saleStoreLevel === '1')
+          let favList
+          if (sessionState?.storeId === 'T01') {
+            firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
+            favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
+            setSaleStoreList(firstList)
+            setFavoriteStoreList(favList)
+            setShowSaleStoreList(favList)
+          } else {
+            //1차점 셀렉트박스
+            setSaleStoreList(firstList)
+          }
           const otherList = res.filter((row) => row.saleStoreLevel !== '1')
-
-          //1차점 셀렉트박스
-          setSaleStoreList(firstList)
-
           let filterOtherList
           if (sessionState?.storeId === 'T01') {
             filterOtherList = otherList.filter((row) => row.firstAgentId === 'T01')
+
             setOriginOtherSaleStoreList(filterOtherList)
             setOtherSaleStoreList(filterOtherList)
           } else {
-            //1차점 아닌 판매점 셀렉트박스
+            //T01 아니고 2차점 판매점 셀렉트박스
             setOriginOtherSaleStoreList(otherList)
             setOtherSaleStoreList(otherList)
           }
@@ -380,13 +399,29 @@ export default function StuffDetail() {
 
       //1차점 : X167 T01
       //2차점 : 10X22, 201X112
-      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
+      let url
+      if (sessionState?.storeId === 'T01') {
+        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
+        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+      } else {
+        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+      }
+      get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
           const firstList = res.filter((row) => row.saleStoreLevel === '1')
           const otherList = res.filter((row) => row.saleStoreLevel !== '1')
+          let favList
 
-          //1차점 셀렉트박스
+          if (sessionState?.storeId === 'T01') {
-          setSaleStoreList(firstList)
+            firstList.sort((a, b) => (a.saleStoreId !== 'T01') - (b.saleStoreId !== 'T01') || a.saleStoreId - b.saleStoreId)
+            favList = firstList.filter((row) => row.saleStoreId === 'T01' || row.priority !== 'B')
+            setSaleStoreList(firstList)
+            setFavoriteStoreList(favList)
+            setShowSaleStoreList(favList)
+          } else {
+            //1차점 셀렉트박스
+            setSaleStoreList(firstList)
+          }
 
           let filterOtherList
           if (sessionState?.storeId === 'T01') {
@@ -495,6 +530,16 @@ export default function StuffDetail() {
   const onRadioChange = (key) => {
     setSelectObjectStatusId(key.target.value)
   }
+
+  //1차점 자동완성 input
+  const onInputChange = (key) => {
+    if (key !== '') {
+      setShowSaleStoreList(saleStoreList)
+    } else {
+      setShowSaleStoreList(favoriteStoreList)
+    }
+  }
+
   //1차점 변경 이벤트
   const onSelectionChange = (key) => {
     if (isObjectNotEmpty(key)) {
@@ -516,7 +561,7 @@ export default function StuffDetail() {
       }
     } else {
       // EDIT
-      if (planReqNo !== null) {
+      if (planReqNo !== null && planReqNo !== '') {
         if (confirm(getMessage('stuff.detail.confirm.message1'))) {
           delFlg = true
         } else {
@@ -629,7 +674,7 @@ export default function StuffDetail() {
       }
     } else {
       //EDIT
-      if (planReqNo !== null) {
+      if (planReqNo !== null && planReqNo !== '') {
         if (confirm(getMessage('stuff.detail.confirm.message1'))) {
           delFlg = true
         } else {
@@ -849,7 +894,6 @@ export default function StuffDetail() {
         errors.installHeight = true
       }
 
-      // console.log('상세에러필드:::::', errors)
       setIsFormValid(Object.keys(errors).length === 0 ? true : false)
     }
   }, [
@@ -906,20 +950,17 @@ export default function StuffDetail() {
   // 저장
   const onValid = async () => {
     const formData = form.getValues()
-
     let errors = {}
     let fieldNm
     //담당자
     if (!formData.receiveUser || formData.receiveUser.trim().length === 0) {
       fieldNm = getMessage('stuff.detail.receiveUser')
       errors = fieldNm
-      inputReceiveUserEl.current.focus()
     }
     //물건명
     if (!formData.objectName || formData.objectName.trim().length === 0) {
       fieldNm = getMessage('stuff.detail.objectStatusId')
       errors = fieldNm
-      inputObjectNameEl.current.focus()
     }
     //경칭
     if (!formData.objectNameOmit) {
@@ -935,13 +976,11 @@ export default function StuffDetail() {
     if (!formData.zipNo) {
       fieldNm = getMessage('stuff.detail.zipNo')
       errors = fieldNm
-      inputZipNoEl.current.focus()
     }
     //주소
     if (!formData.address) {
       fieldNm = getMessage('stuff.detail.address')
       errors = fieldNm
-      inputAddressEl.current.focus()
     }
     //도도부현
     if (!formData.prefId || formData.prefId === '0') {
@@ -962,7 +1001,6 @@ export default function StuffDetail() {
     if (!formData.verticalSnowCover) {
       fieldNm = getMessage('stuff.detail.verticalSnowCover')
       errors = fieldNm
-      inputVerticalSnowCoverEl.current.focus()
     }
 
     //면조도구분
@@ -974,7 +1012,6 @@ export default function StuffDetail() {
     if (!formData.installHeight) {
       fieldNm = getMessage('stuff.detail.installHeight')
       errors = fieldNm
-      inputInstallHeightEl.current.focus()
     }
 
     if (Object.keys(errors).length > 0) {
@@ -1306,33 +1343,68 @@ export default function StuffDetail() {
                     </th>
                     <td>
                       <div className="flx-box">
-                        <div className="select-wrap mr5" style={{ width: '567px' }}>
+                        {(sessionState?.storeId === 'T01' && (
-                          <Select
+                          <>
-                            id="long-value-select1"
+                            <div className="select-wrap mr5" style={{ width: '567px' }}>
-                            instanceId="long-value-select1"
+                              <Select
-                            className="react-select-custom"
+                                id="long-value-select1"
-                            classNamePrefix="custom"
+                                instanceId="long-value-select1"
-                            placeholder="Select"
+                                className="react-select-custom"
-                            options={saleStoreList}
+                                classNamePrefix="custom"
-                            onChange={onSelectionChange}
+                                placeholder="Select"
-                            getOptionLabel={(x) => x.saleStoreName}
+                                options={showSaleStoreList}
-                            getOptionValue={(x) => x.saleStoreId}
+                                onInputChange={onInputChange}
-                            isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                onChange={onSelectionChange}
-                            isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                getOptionLabel={(x) => x.saleStoreName}
-                            value={saleStoreList.filter(function (option) {
+                                getOptionValue={(x) => x.saleStoreId}
-                              return option.saleStoreId === selOptions
+                                isClearable={sessionState?.storeLvl === '1' ? true : false}
-                            })}
+                                isDisabled={sessionState?.storeLvl !== '1' ? true : false}
-                          />
+                                value={showSaleStoreList.filter(function (option) {
-                        </div>
+                                  return option.saleStoreId === selOptions
-                        <div className="input-wrap" style={{ width: '216px' }}>
+                                })}
-                          <input
+                              ></Select>
-                            type="text"
+                            </div>
-                            className="input-light"
+                            <div className="input-wrap" style={{ width: '216px' }}>
-                            value={form.watch('saleStoreId') || ''}
+                              <input
-                            {...form.register('saleStoreId')}
+                                type="text"
-                            readOnly
+                                className="input-light"
-                          />
+                                value={form.watch('saleStoreId') || ''}
-                        </div>
+                                {...form.register('saleStoreId')}
+                                readOnly
+                              />
+                            </div>
+                          </>
+                        )) || (
+                          <>
+                            <div className="select-wrap mr5" style={{ width: '567px' }}>
+                              <Select
+                                id="long-value-select1"
+                                instanceId="long-value-select1"
+                                className="react-select-custom"
+                                classNamePrefix="custom"
+                                placeholder="Select"
+                                options={saleStoreList}
+                                onChange={onSelectionChange}
+                                getOptionLabel={(x) => x.saleStoreName}
+                                getOptionValue={(x) => x.saleStoreId}
+                                isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                value={saleStoreList.filter(function (option) {
+                                  return option.saleStoreId === selOptions
+                                })}
+                              ></Select>
+                            </div>
+                            <div className="input-wrap" style={{ width: '216px' }}>
+                              <input
+                                type="text"
+                                className="input-light"
+                                value={form.watch('saleStoreId') || ''}
+                                {...form.register('saleStoreId')}
+                                readOnly
+                              />
+                            </div>
+                          </>
+                        )}
                       </div>
                     </td>
                   </tr>
@@ -1651,13 +1723,7 @@ export default function StuffDetail() {
                         </th>
                         <td>
                           <div className="input-wrap" style={{ width: '500px' }}>
-                            <input
+                            <input type="text" className="input-light" {...form.register('receiveUser')} value={form.watch('receiveUser') || ''} />
-                              type="text"
-                              className="input-light"
-                              {...form.register('receiveUser')}
-                              value={form.watch('receiveUser') || ''}
-                              ref={inputReceiveUserEl}
-                            />
                           </div>
                         </td>
                       </tr>
@@ -1686,7 +1752,7 @@ export default function StuffDetail() {
                             })}
                             {/* 상세라디오끝 */}
                             <div className="input-wrap mr5" style={{ width: '545px' }}>
-                              <input type="text" className="input-light" {...form.register('objectName')} ref={inputObjectNameEl} />
+                              <input type="text" className="input-light" {...form.register('objectName')} />
                             </div>
                             <div className="select-wrap" style={{ width: '120px' }}>
                               <Select
@@ -1732,33 +1798,68 @@ export default function StuffDetail() {
                         </th>
                         <td>
                           <div className="flx-box">
-                            <div className="select-wrap mr5" style={{ width: '567px' }}>
+                            {(sessionState?.storeId === 'T01' && (
-                              <Select
+                              <>
-                                id="long-value-select1"
+                                <div className="select-wrap mr5" style={{ width: '567px' }}>
-                                instanceId="long-value-select1"
+                                  <Select
-                                className="react-select-custom"
+                                    id="long-value-select1"
-                                classNamePrefix="custom"
+                                    instanceId="long-value-select1"
-                                placeholder="Select"
+                                    className="react-select-custom"
-                                options={saleStoreList}
+                                    classNamePrefix="custom"
-                                onChange={onSelectionChange}
+                                    placeholder="Select"
-                                getOptionLabel={(x) => x.saleStoreName}
+                                    options={showSaleStoreList}
-                                getOptionValue={(x) => x.saleStoreId}
+                                    onInputChange={onInputChange}
-                                isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                    onChange={onSelectionChange}
-                                isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                    getOptionLabel={(x) => x.saleStoreName}
-                                value={saleStoreList.filter(function (option) {
+                                    getOptionValue={(x) => x.saleStoreId}
-                                  return option.saleStoreId === selOptions
+                                    isClearable={sessionState?.storeLvl === '1' ? true : false}
-                                })}
+                                    isDisabled={sessionState?.storeLvl !== '1' ? true : false}
-                              />
+                                    value={saleStoreList.filter(function (option) {
-                            </div>
+                                      return option.saleStoreId === selOptions
-                            <div className="input-wrap" style={{ width: '216px' }}>
+                                    })}
-                              <input
+                                  />
-                                type="text"
+                                </div>
-                                className="input-light"
+                                <div className="input-wrap" style={{ width: '216px' }}>
-                                value={form.watch('saleStoreId') || ''}
+                                  <input
-                                {...form.register('saleStoreId')}
+                                    type="text"
-                                readOnly
+                                    className="input-light"
-                              />
+                                    value={form.watch('saleStoreId') || ''}
-                            </div>
+                                    {...form.register('saleStoreId')}
+                                    readOnly
+                                  />
+                                </div>
+                              </>
+                            )) || (
+                              <>
+                                <div className="select-wrap mr5" style={{ width: '567px' }}>
+                                  <Select
+                                    id="long-value-select1"
+                                    instanceId="long-value-select1"
+                                    className="react-select-custom"
+                                    classNamePrefix="custom"
+                                    placeholder="Select"
+                                    options={saleStoreList}
+                                    onChange={onSelectionChange}
+                                    getOptionLabel={(x) => x.saleStoreName}
+                                    getOptionValue={(x) => x.saleStoreId}
+                                    isClearable={sessionState?.storeLvl === '1' ? true : false}
+                                    isDisabled={sessionState?.storeLvl !== '1' ? true : false}
+                                    value={saleStoreList.filter(function (option) {
+                                      return option.saleStoreId === selOptions
+                                    })}
+                                  />
+                                </div>
+                                <div className="input-wrap" style={{ width: '216px' }}>
+                                  <input
+                                    type="text"
+                                    className="input-light"
+                                    value={form.watch('saleStoreId') || ''}
+                                    {...form.register('saleStoreId')}
+                                    readOnly
+                                  />
+                                </div>
+                              </>
+                            )}
                           </div>
                         </td>
                       </tr>
@@ -1811,7 +1912,7 @@ export default function StuffDetail() {
                         <td>
                           <div className="flx-box">
                             <div className="input-wrap mr5" style={{ width: '200px' }}>
-                              <input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} ref={inputZipNoEl} />
+                              <input type="text" className="input-light" disabled value={form.watch('zipNo') || ''} />
                             </div>
                             <Button className="btn-origin grey" onPress={onSearchPostNumberPopOpen}>
                               {getMessage('stuff.detail.btn.addressPop')}
@@ -1848,13 +1949,7 @@ export default function StuffDetail() {
                               )}
                             </div>
                             <div className="input-wrap mr5" style={{ width: '580px' }}>
-                              <input
+                              <input type="text" className="input-light" value={form.watch('address') || ''} {...form.register('address')} />
-                                type="text"
-                                className="input-light"
-                                value={form.watch('address') || ''}
-                                {...form.register('address')}
-                                ref={inputAddressEl}
-                              />
                             </div>
                           </div>
                         </td>
@@ -1935,7 +2030,6 @@ export default function StuffDetail() {
                                 onKeyUp={handleKeyUp}
                                 value={form.watch('verticalSnowCover') || ''}
                                 {...register('verticalSnowCover')}
-                                ref={inputVerticalSnowCoverEl}
                               />
                             </div>
                             <span className="mr10">cm</span>
@@ -1987,7 +2081,6 @@ export default function StuffDetail() {
                                 onKeyUp={handleKeyUp}
                                 value={form.watch('installHeight') || ''}
                                 {...register('installHeight')}
-                                ref={inputInstallHeightEl}
                               />
                             </div>
                             <span>m</span>
@@ -2017,7 +2110,7 @@ export default function StuffDetail() {
                         <th>{getMessage('stuff.detail.remarks')}</th>
                         <td>
                           <div className="input-wrap">
-                            <input type="text" className="input-light" {...form.register('remarks')} />
+                            <input type="text" className="input-light" {...form.register('remarks')} value={form.watch('remarks') || ''} />
                           </div>
                         </td>
                       </tr>

src/components/management/StuffQGrid.jsx

@@ -39,7 +39,7 @@ export default function StuffQGrid(props) {
     return {
       filter: false,
       flex: 1,
-      sortable: false,
+      sortable: true,
       suppressMovable: true,
       resizable: true,
       suppressSizeToFit: false,

src/components/management/StuffSearchCondition.jsx

@@ -4,7 +4,6 @@ import React, { useEffect, useRef, useState } from 'react'
 import { useAxios } from '@/hooks/useAxios'
 import { useRecoilState, useRecoilValue, useResetRecoilState } from 'recoil'
 import { appMessageStore, globalLocaleStore } from '@/store/localeAtom'
-// import Select from 'react-dropdown-select'
 import Select from 'react-select'
 import KO from '@/locales/ko.json'
 import JA from '@/locales/ja.json'
@@ -57,7 +56,9 @@ export default function StuffSearchCondition() {
   const [receiveUser, setReceiveUser] = useState('') //담당자
   const [dateType, setDateType] = useState('U') //갱신일(U)/등록일(R)
 
-  const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT
+  const [schSelSaleStoreList, setSchSelSaleStoreList] = useState([]) //판매대리점 자동완성 SELECT 전체
+  const [favoriteStoreList, setFavoriteStoreList] = useState([]) //즐겨찾기한 판매점목록
+  const [showSaleStoreList, setShowSaleStoreList] = useState([]) //보여줄 판매점목록
   // 조회
   const onSubmit = () => {
     let diff = dayjs(endDate).diff(startDate, 'day')
@@ -128,13 +129,24 @@ export default function StuffSearchCondition() {
   useEffect(() => {
     if (isObjectNotEmpty(sessionState)) {
       // storeId가 T01 이거나 1차점일때만 판매대리점 선택 활성화
-      get({ url: `/api/object/saleStore/${sessionState?.storeId}/list` }).then((res) => {
+      let url
+      if (sessionState?.storeId === 'T01') {
+        // url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=an1`
+        url = `/api/object/saleStore/${sessionState?.storeId}/list?userId=${sessionState?.userId}`
+      } else {
+        url = `/api/object/saleStore/${sessionState?.storeId}/list`
+      }
+      get({ url: url }).then((res) => {
         if (!isEmptyArray(res)) {
           res.map((row) => {
             row.value = row.saleStoreId
             row.label = row.saleStoreName
           })
-          setSchSelSaleStoreList(res)
+          const allList = res
+          const favList = res.filter((row) => row.priority !== 'B')
+          setSchSelSaleStoreList(allList)
+          setFavoriteStoreList(favList)
+          setShowSaleStoreList(favList)
         }
       })
     }
@@ -147,6 +159,15 @@ export default function StuffSearchCondition() {
     }
   }
 
+  //자동완성 인풋
+  const onInputChange = (key) => {
+    if (key !== '') {
+      setShowSaleStoreList(schSelSaleStoreList)
+    } else {
+      setShowSaleStoreList(favoriteStoreList)
+    }
+  }
+
   //판매대리점 자동완성 변경
   const onSelectionChange = (key) => {
     if (isObjectNotEmpty(key)) {
@@ -300,11 +321,15 @@ export default function StuffSearchCondition() {
                         classNamePrefix="custom"
                         placeholder="Select"
                         ref={ref}
-                        options={schSelSaleStoreList}
+                        // options={schSelSaleStoreList}
+                        options={showSaleStoreList}
+                        onInputChange={onInputChange}
                         onChange={onSelectionChange}
                         getOptionLabel={(x) => x.saleStoreName}
                         getOptionValue={(x) => x.saleStoreId}
-                        value={schSelSaleStoreList.filter(function (option) {
+                        // value={schSelSaleStoreList.filter(function (option) {
+                        value={showSaleStoreList.filter(function (option) {
+                          // console.log('자동완성 value::::', option)
                           if (stuffSearch?.code === 'S' && schSelSaleStoreId === '') {
                             return false
                           } else if (stuffSearch?.code === 'S' && schSelSaleStoreId !== '') {