l-min-components 1.0.604 → 1.0.607

package/src/components/AdminRolesPermission/create/data.js

@@ -1,4 +1,4 @@
-import avatar from "../assets/images/avatar.png"
+import avatar from "../assets/images/avatar.png";
 
 export const permissionsData = [
   {
@@ -22,108 +22,283 @@ export const permissionsData = [
 ];
 
 export const roleList = [
-    {
-        name: "Statistics",
-        level: 3
-    },
-    {
-        name: "CMS",
-        level: 3
-    },
-    {
-        name: "Support",
-        level: 3
-    },
-    {
-        name: "Admin",
-        level: 3
-    },
-    {
-        name: "Statistics",
-        level: 3
-    },
-    {
-        name: "Statistics",
-        level: 3
-    },
-    {
-        name: "Statistics",
-        level: 3
-    },
-]
-
+  {
+    name: "Statistics",
+    level: 3,
+  },
+  {
+    name: "CMS",
+    level: 3,
+  },
+  {
+    name: "Support",
+    level: 3,
+  },
+  {
+    name: "Admin",
+    level: 3,
+  },
+  {
+    name: "Statistics",
+    level: 3,
+  },
+  {
+    name: "Statistics",
+    level: 3,
+  },
+  {
+    name: "Statistics",
+    level: 3,
+  },
+];
 
 export const adminList = [
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-    {
-        name: "Acme Co.",
-        status: "Unassigned",
-        image: avatar,
-        selection: false,
-    },
-]
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Unassigned",
+    image: avatar,
+    selection: false,
+  },
+];
+
+export const adminPanelList = [
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+  {
+    name: "Acme Co.",
+    status: "Support",
+    image: avatar,
+    selection: false,
+  },
+];
+
+export const categoryList = [
+  {
+    selection: false,
+    name: "Manager",
+    permissions: "120",
+  },
+  {
+    selection: false,
+    name: "Marketer",
+    permissions: "35",
+  },
+  {
+    selection: false,
+    name: "Customer Care",
+    permissions: "57",
+  },
+  {
+    selection: false,
+    name: "Support",
+    permissions: "49",
+  },
+  {
+    selection: false,
+    name: "Accountant",
+    permissions: "51",
+  },
+  {
+    selection: false,
+    name: "CFO",
+    permissions: "76",
+  },
+  {
+    selection: false,
+    name: "Admin",
+    permissions: "102",
+  },
+];
+
+export const assigneeList = [
+  {
+    name: "Saul Hayes",
+    email: "saulhayes@learngual.com",
+    image: avatar,
+    date: "November 3 2023 | 10:00am",
+  },
+  {
+    name: "Saul Hayes",
+    email: "saulhayes@learngual.com",
+    image: avatar,
+    date: "November 3 2023 | 10:00am",
+  },
+  {
+    name: "Saul Hayes",
+    email: "saulhayes@learngual.com",
+    image: avatar,
+    date: "November 3 2023 | 10:00am",
+  },
+  {
+    name: "Saul Hayes",
+    email: "saulhayes@learngual.com",
+    image: avatar,
+    date: "November 3 2023 | 10:00am",
+  },
+  {
+    name: "Saul Hayes",
+    email: "saulhayes@learngual.com",
+    image: avatar,
+    date: "November 3 2023 | 10:00am",
+  },
+  {
+    name: "Saul Hayes",
+    email: "saulhayes@learngual.com",
+    image: avatar,
+    date: "November 3 2023 | 10:00am",
+  },
+  {
+    name: "Saul Hayes",
+    email: "saulhayes@learngual.com",
+    image: avatar,
+    date: "November 3 2023 | 10:00am",
+  },
+  {
+    name: "Saul Hayes",
+    email: "saulhayes@learngual.com",
+    image: avatar,
+    date: "November 3 2023 | 10:00am",
+  },
+  {
+    name: "Saul Hayes",
+    email: "saulhayes@learngual.com",
+    image: avatar,
+    date: "November 3 2023 | 10:00am",
+  },
+  {
+    name: "Saul Hayes",
+    email: "saulhayes@learngual.com",
+    image: avatar,
+    date: "November 3 2023 | 10:00am",
+  },
+];

package/src/components/AdminRolesPermission/create/index.styled.js

@@ -215,6 +215,19 @@ export const PermissionsAccordion = styled.div`
       align-items: center;
       justify-content: center;
     }
+
+    .rc_sl {
+      display: flex;
+      gap: 8px;
+      align-items: center;
+      .adm_check > span {
+        border-radius: 8px;
+      }
+
+      .rc-accordion-icon {
+        margin-left: 12px;
+      }
+    }
   }
 
   .rc-collapse {
@@ -222,6 +235,61 @@ export const PermissionsAccordion = styled.div`
     height: 0;
     overflow: hidden;
     transition: height 0.35s ease;
+
+    .rc_body_main {
+      border-bottom: 1px solid #d9d9d9;
+      padding: 10px 0;
+
+      .rcb_header {
+        color: #616161;
+        font-size: 16px;
+        font-weight: 400;
+        line-height: normal;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        justify-content: space-between;
+        margin-bottom: 12px;
+      }
+
+      .rcb_body {
+        display: flex;
+        gap: 20px;
+        justify-content: space-between;
+
+        .rcb_lang_list {
+          display: flex;
+          align-items: center;
+          flex-wrap: wrap;
+          gap: 8px;
+
+          .rcb_lang_box {
+            border-radius: 48px;
+            background: #dfe5e5;
+            padding: 6px;
+            height: 31px;
+            display: flex;
+            align-items: center;
+            gap: 6px;
+          }
+        }
+        .sel_lang_dropdown {
+          width: 230px;
+          height: 44px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+          padding: 10px 20px;
+          color: #adb2b2;
+          font-size: 16px;
+          font-weight: 400;
+          letter-spacing: 0.32px;
+          border-radius: 12px;
+          border: 1px solid #c6cccc;
+          background: #fff;
+        }
+      }
+    }
   }
   .rc-collapse.show {
     height: auto;
@@ -258,7 +326,7 @@ export const AdminsContainer = styled.div`
     justify-content: space-between;
 
     .ad_drop_filter {
-        position: relative;
+      position: relative;
     }
 
     .ad_filter_box {
@@ -339,6 +407,7 @@ export const AdminsContainer = styled.div`
           color: #949999;
           font-size: 12px;
           font-weight: 600;
+          cursor: pointer;
         }
       }
     }

package/src/components/AdminRolesPermission/create/permissions.jsx

@@ -3,10 +3,21 @@ import { PermissionsAccordion, PermissionsContainer } from "./index.styled";
 import ButtonComponent from "../../button";
 import { permissionsData } from "./data";
 import { IoChevronDown } from "react-icons/io5";
+import Checkbox from "../../checkBoxes/checkbox/index2";
+import { EnglishFlag } from "../assets/svg/englishFlag";
+import { CloseRedIcon } from "../assets/svg/close-red";
+import { PortugalFlag } from "../assets/svg/portugalFlag";
+import { FrenchFlag } from "../assets/svg/frenchFlag";
+import { GermanFlag } from "../assets/svg/germanFlag";
+import ToggleButtonComponent from "../../toggle button";
+import { FaChevronDown } from "react-icons/fa";
+import PreviewModal from "../modals/preview-modal";
 
 const Permissions = () => {
   const contentEl = useRef();
   const [active, setActive] = useState(null);
+  const [toggleValue, setToggleValue] = useState(false);
+  const [addModal, setAddModal] = useState(false);
 
   const handleToggle = (index) => {
     if (active === index) {
@@ -24,6 +35,7 @@ const Permissions = () => {
           styles={{ width: "120px", padding: 10, height: 40 }}
           onClick={(e) => {
             e.preventDefault();
+            setAddModal(true)
           }}
         />
       </div>
@@ -39,19 +51,113 @@ const Permissions = () => {
             >
               {item?.title}
 
-              <span className="rc-accordion-icon">
-                <IoChevronDown />
-              </span>
+              <div className="rc_sl"       >
+                {active === idx && (
+                  <span  onClick={(e) => {
+                    e.stopPropagation();
+                  }}>
+                    <Checkbox
+                      label=""
+                      color="#ff9900"
+                      defaultValue={false}
+                      // onChange={handleChange}
+                      className="adm_check"
+                    />
+                    All Permissions
+                  </span>
+                )}
+
+                <span className="rc-accordion-icon">
+                  <IoChevronDown />
+                </span>
+              </div>
             </div>
 
             <div
               ref={contentEl}
               className={`rc-collapse ${active === idx ? "show" : ""}`}
               style={active === idx ? { height: "auto" } : { height: "0px" }}
-            ></div>
+            >
+              <div className="rc_body_main">
+                <div className="rcb_header">
+                  Permission to create content in any base language
+                  <div className="rc_toggle">
+                    <ToggleButtonComponent
+                      value={toggleValue}
+                      // onClick={() => setToggleValue(!toggleValue)}
+                    />
+                  </div>
+                </div>
+
+                <div className="rcb_body">
+                  <div className="rcb_lang_list">
+                    <div className="rcb_lang_box">
+                      <EnglishFlag /> English US <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <PortugalFlag />
+                      Portugese
+                      <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <FrenchFlag /> French <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <GermanFlag /> German
+                      <CloseRedIcon />
+                    </div>
+                  </div>
+
+                  <div className="sel_lang_dropdown">
+                    Select Language <FaChevronDown />{" "}
+                  </div>
+                </div>
+              </div>
+              <div className="rc_body_main">
+                <div className="rcb_header">
+                  Permission to review versions of a base language’s content -
+                  level 1 
+                  <div className="rc_toggle">
+                    <ToggleButtonComponent />
+                  </div>
+                </div>
+
+                <div className="rcb_body">
+                  <div className="rcb_lang_list">
+                    <div className="rcb_lang_box">
+                      <EnglishFlag /> English US <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <PortugalFlag />
+                      Portugese
+                      <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <FrenchFlag /> French <CloseRedIcon />
+                    </div>
+                    <div className="rcb_lang_box">
+                      <GermanFlag /> German
+                      <CloseRedIcon />
+                    </div>
+                  </div>
+
+                  <div className="sel_lang_dropdown">
+                    Select Language <FaChevronDown />{" "}
+                  </div>
+                </div>
+              </div>
+            </div>
           </PermissionsAccordion>
         ))}
       </div>
+
+      <PreviewModal
+        isOpen={addModal}
+        onRequestClose={() => setAddModal(false)}
+        title={"Are you sure you want to add these permissions to this role?"}
+        secondaryButtonText={"No, Cancel"}
+        primaryButtonText={"Yes, Add"}
+      />
     </PermissionsContainer>
   );
 };