+fixed user permissions options

src/actions/actionUserUpdate.js

@@ -1,4 +1,4 @@
-import { call, put, select } from "redux-saga/effects";
+import { call, delay, put, select } from "redux-saga/effects";
 import { actionPromiseClear } from "../reducers";
 import { promiseWorker } from "../reducers/promiseReducer";
 import { actionAboutMe } from "./actionAboutMe";
@@ -24,5 +24,6 @@ export function* userUpdateWorker(action) {
         yield put(actionAboutMe());
     }
 
+    yield delay(500);
     yield put(actionPromiseClear("userUpsert"));
 }

src/components/admin/AdminUserPage.js/UserForm.js

@@ -13,6 +13,18 @@ import { actionUploadFile } from "../../../actions/actionUploadFile";
 import { ProfileImageEditor } from "../../common/ProfileImageEditor";
 import { actionPromisesClear } from "../../../actions/actionPromisesClear";
 
+const styles = {
+    multiValue: (base, state) => {
+        return state.data.isFixed ? { ...base, backgroundColor: "gray" } : base;
+    },
+    multiValueLabel: (base, state) => {
+        return state.data.isFixed ? { ...base, fontWeight: "bold", color: "white", paddingRight: 6 } : base;
+    },
+    multiValueRemove: (base, state) => {
+        return state.data.isFixed ? { ...base, display: "none" } : base;
+    },
+};
+
 const CProfileImageEditor = connect(null, {
     onFileDrop: (acceptedFiles) => actionUploadFile(acceptedFiles[0]),
 })(ProfileImageEditor);
@@ -42,6 +54,10 @@ export const UserForm = ({
     const [acl, setAcl] = useState([]);
     const navigate = useNavigate();
 
+    useEffect(() => {
+        console.log(promiseStatus);
+    }, [promiseStatus]);
+
     const formik = useFormik({
         initialValues: {
             name: "",
@@ -55,7 +71,7 @@ export const UserForm = ({
             let userToSave = {};
             userToSave = formik.values;
             user?._id && (userToSave._id = user._id);
-            userToSave.acl = acl;
+            userToSave.acl = acl.map(({ value }) => value);
             avatar ? (userToSave.avatar = avatar) : delete userToSave.avatar;
             onSaveClick && onSaveClick();
             onSave(userToSave);
@@ -63,6 +79,27 @@ export const UserForm = ({
         },
     });
 
+    const orderOptions = (values) => {
+        return values.filter((v) => v.isFixed).concat(values.filter((v) => !v.isFixed));
+    };
+
+    const onChange = (values, actionMeta) => {
+        switch (actionMeta.action) {
+            case "remove-value":
+            case "pop-value":
+                if (actionMeta.removedValue.isFixed) {
+                    return;
+                }
+                break;
+            case "clear":
+                values = aclList.filter((acl) => acl.isFixed);
+                break;
+        }
+
+        values = orderOptions(values);
+        setAcl(values);
+    };
+
     useEffect(() => {
         return () => {
             promiseTimeOut && clearTimeout(promiseTimeOut);
@@ -75,6 +112,7 @@ export const UserForm = ({
             formik.setSubmitting(false);
             promiseTimeOut && clearTimeout(promiseTimeOut);
             setPromiseTimeOut(null);
+
             setAlert({
                 show: true,
                 severity: "success",
@@ -115,7 +153,7 @@ export const UserForm = ({
     }, [deletePromiseStatus]);
 
     useEffect(() => {
-        setAcl(user?.acl || []);
+        setAcl(orderOptions(aclList.filter((item) => user?.acl?.includes(item.value)) || []));
         formik.setFieldValue("name", user.name || "");
         formik.setFieldValue("username", user.username || "");
         formik.setFieldValue("nick", user.nick || "");
@@ -131,7 +169,7 @@ export const UserForm = ({
 
     return (
         <Box className="UserForm" component="form" onSubmit={formik.handleSubmit}>
-            <Grid container>
+            <Grid container spacing={2}>
                 <Grid item xs={5}>
                     <CProfileImageEditor avatar={avatar} />
                 </Grid>
@@ -210,11 +248,13 @@ export const UserForm = ({
                         <InputLabel>Permissions</InputLabel>
                         <Select
                             placeholder="Обрати категорії"
-                            value={acl.map((value) => ({ value, label: value }))}
+                            value={acl}
                             closeMenuOnSelect={false}
-                            onChange={(e) => setAcl(e.map(({ value }) => value))}
+                            onChange={onChange}
                             options={aclList}
+                            isClearable={acl?.some((acl) => !acl.isFixed)}
                             isMulti={true}
+                            styles={styles}
                         />
                     </Box>
                 </Grid>

src/helpers/aclList.js

@@ -1,5 +1,5 @@
 export const aclList = [
     { label: "admin", value: "admin" },
     { label: "active", value: "active" },
-    // { label: "anon", value: "anon", isFixed: true, isVisited: true },
+    { label: "anon", value: "anon", isFixed: true },
 ];