feat : sửa text, disable nút, back mh cài đặt chỉ tiêu

src/_screens/criteria/criteria-setting/index.js

@@ -12,6 +12,10 @@ import InputText from "../../../_components/Auth/InputText";
 import { DEFAULT_SETTING_CRITERIA } from "../../../_constants/common";
 import { alertActions } from "../../../_actions";
 
+
+const textTilte = 'Mức độ hoàn thành tiêu chí'
+const textContent = 'Mức độ hoàn thành tiêu chí được tính bằng tiêu chí có mức hoàn thành thấp nhất trong 2 tiêu chí số lần giao bài trong tháng và tỷ lệ học sinh làm bài được giao trong tháng'
+
 export default function CriteriaSetting() {
   const search = history?.location?.search;
   const params = new URLSearchParams(search);
@@ -20,11 +24,42 @@ export default function CriteriaSetting() {
   const dispatch = useDispatch()
 
   const [criteriaTarget, setCriteriaTarget] = useState(DEFAULT_SETTING_CRITERIA);
+  const [showAlert, setShowAlert] = useState(false);
+  const [alertMessage, setAlertMessage] = useState("");
 
   const schoolList = isJsonString(decodeURIComponent(_schoolList))
     ? JSON.parse(decodeURIComponent(_schoolList))
     : decodeURIComponent(_schoolList);
   
+    function AlertSuccess({ message, onComplete, notShowComplete }) {
+      function close() {
+        onComplete();
+        dispatch(alertActions.clear());
+        history.goBack();
+      }
+    
+      if (notShowComplete) {
+        return null;
+      } else {
+        return (
+          <div
+            id="modal-center"
+            className="uk-flex-top uk-modal uk-flex uk-open"
+            uk-modal=""
+          >
+            <div className="uk-modal-dialog uk-modal-body uk-margin-auto-vertical root-alert">
+              <p className="text-center">{message}</p>
+              <div className="form-sunE-button root-alert-button">
+                <button className="btn-line-blue" onClick={close}>
+                  Đóng
+                </button>
+              </div>
+            </div>
+          </div>
+        );
+      }
+    }
+
   const saveCriteriaSetting = async () => {
     try {
       const dataSave = {
@@ -35,16 +70,15 @@ export default function CriteriaSetting() {
         student_done_active: criteriaTarget.studentDone.enable ? 1 : 0,
         student_done_target_1: criteriaTarget.studentDone.target1,
         student_done_target_2: criteriaTarget.studentDone.target2,
-      }
+      }      
       const res = await apiCaller(
         "/report/api_report/assignCriteriaToOrganization",
         "PUT",
         dataSave,
       );
       if (res?.status) {
-        dispatch(alertActions.success({
-          message: res?.msg
-        }))
+        setAlertMessage(res?.msg);
+        setShowAlert(true);
       }
     } catch (err) {
       console.log("err: ", err);
@@ -97,6 +131,14 @@ export default function CriteriaSetting() {
     );
   };
 
+  const isSaveDisabled = () => {
+    return (
+      (criteriaTarget.assign.enable && 
+       (!criteriaTarget.assign.target1 || !criteriaTarget.assign.target2)) ||
+      (criteriaTarget.studentDone.enable && 
+       (!criteriaTarget.studentDone.target1 || !criteriaTarget.studentDone.target2))
+    );
+  };
   const renderRightItem = ({ title, desc, valueName, unit, key, maxLengthInput }) => {
     return (
       <div
@@ -128,18 +170,22 @@ export default function CriteriaSetting() {
                 <span>Hoàn thành mức 1:</span>
               </div>
               <div className="criteria-setting-item-detail-value">
-                {`${valueName} < `}
+                {`${valueName} ít hơn `}
                 <input
                   value={criteriaTarget[key].target1}
                   onChange={(e) => {
-                    if (!!maxLengthInput && e.target.value.length > maxLengthInput) {
+                    const value = e.target.value;
+                    if (!/^[1-9]\d*$/.test(value) && value !== "") {
+                      return;
+                    }
+                    if (!!maxLengthInput && value.length > maxLengthInput) {
                       return;
                     }
                     setCriteriaTarget({
                       ...criteriaTarget,
                       [key]: {
                         ...criteriaTarget[key],
-                        target1: e.target.value,
+                        target1: value,
                       },
                     });
                   }}
@@ -154,14 +200,18 @@ export default function CriteriaSetting() {
                 <span>Hoàn thành mức 2:</span>
               </div>
               <div className="criteria-setting-item-detail-value">
+                {` ${valueName} từ  `}
                 <span>
                   {criteriaTarget[key].target1}
                   {unit}
                 </span>
-                {` < ${valueName} < `}
+                {' đến ít hơn '}
                 <input
                   value={criteriaTarget[key].target2}
                   onChange={(e) => {
+                    if (!/^[1-9]\d*$/.test(e.target.value) && e.target.value !== "") {
+                      return;
+                    }
                     if (!!maxLengthInput && e.target.value.length > maxLengthInput) {
                       return;
                     }
@@ -184,7 +234,7 @@ export default function CriteriaSetting() {
                 <span>Hoàn thành mức 3:</span>
               </div>
               <div className="criteria-setting-item-detail-value">
-                {`${valueName} > `}
+                {`${valueName} lớn hơn hoặc bằng `}
                 <span>
                   {criteriaTarget[key].target2}
                   {unit}
@@ -207,12 +257,10 @@ export default function CriteriaSetting() {
         <div className="criteria-setting-container bg-sub-main-img">
           <div className="criteria-setting-left-side">
             <p className="criteria-setting-left-title">
-              MỨC ĐỘ CĐS SUNDAY ENGLISH
+            {textTilte.toLocaleUpperCase()}
             </p>
             <p className="criteria-setting-left-desc">
-              Mức độ CĐS Sunday English được tính bằng tiêu chí có mức hoàn
-              thành thấp nhất trong 2 tiêu chí số lần giao bài trong tháng và tỷ
-              lệ học sinh làm bài được giao trong tháng.
+              {textContent}
             </p>
             <div className="criteria-setting-left-img">
               <img src="/assets/imgs/book_criteria_setting.png" />
@@ -222,13 +270,13 @@ export default function CriteriaSetting() {
             <div className="criteria-setting-right-content">
               {renderRightItem({
                 title: "Số lần giao bài trong tháng",
-                desc: "(Bao gồm các lần giao bài có thời gian kết thúc trong tháng đó)",
-                valueName: "Số lần giao",
+                desc: "Gồm các lần giao bài có thời gian kết thúc trong tháng đó",
+                valueName: "Số lần giao ",
                 key: "assign",
               })}
               {renderRightItem({
                 title: "Tỷ lệ học sinh làm bài được giao trong tháng",
-                desc: "(Tỷ lệ học sinh làm bài được tính bằng số học sinh đã hoàn thành tất cả các bài tập được giao trong tháng (trừ những bài chưa đến hạn) trên tổng số học sinh của lớp. Học sinh để quá hạn bài tập trong tháng nhưng làm bài  trước khi hết tháng thì vẫn được tính là hoàn thành bài tập).",
+                desc: "Tỷ lệ học sinh làm bài được tính bằng số học sinh đã hoàn thành tất cả các bài tập được giao trong tháng (trừ những bài chưa đến hạn) trên tổng số học sinh của lớp. Học sinh để quá hạn bài tập trong tháng nhưng làm bài trước khi hết tháng thì vẫn được tính là hoàn thành bài tập.",
                 valueName: "Tỉ lệ làm bài",
                 unit: "%",
                 key: "studentDone",
@@ -245,12 +293,18 @@ export default function CriteriaSetting() {
                 Quay lại
               </PrimaryButton>
               {authentication?.user?.role === USER_ROLE.ADMIN && (
-                <PrimaryButton onClick={saveCriteriaSetting}>Lưu</PrimaryButton>
+                <PrimaryButton onClick={saveCriteriaSetting} isDisabled={isSaveDisabled()}>Lưu</PrimaryButton>
               )}
             </div>
           </div>
         </div>
       </div>
+      {showAlert && (
+        <AlertSuccess
+          message={alertMessage}
+          onComplete={() => setShowAlert(false)}
+        />
+      )}
     </div>
   );
 }