IO-1056 IO-1062 Kanban & phonebook updates.

client/src/components/phonebook-form/phonebook-form.component.jsx

@@ -7,8 +7,28 @@ import PhoneFormItem, {
   PhoneItemFormatterValidation,
 } from "../form-items-formatted/phone-form-item.component";
 import LayoutFormRow from "../layout-form-row/layout-form-row.component";
+import { HasRbacAccess } from "../rbac-wrapper/rbac-wrapper.component";
+import { connect } from "react-redux";
+import { createStructuredSelector } from "reselect";
+import {
+  selectAuthLevel,
+  selectBodyshop,
+} from "../../redux/user/user.selectors";
+const mapStateToProps = createStructuredSelector({
+  authLevel: selectAuthLevel,
+  bodyshop: selectBodyshop,
+});
+const mapDispatchToProps = (dispatch) => ({
+  //setUserLanguage: language => dispatch(setUserLanguage(language))
+});
+export default connect(
+  mapStateToProps,
+  mapDispatchToProps
+)(PhonebookFormComponent);
 
-export default function PhonebookFormComponent({
+export function PhonebookFormComponent({
+  authLevel,
+  bodyshop,
   form,
   formLoading,
   handleDelete,
@@ -17,6 +37,12 @@ export default function PhonebookFormComponent({
 
   const { getFieldValue } = form;
 
+  const hasNoAccess = !HasRbacAccess({
+    bodyshop,
+    authLevel,
+    action: "phonebook:edit",
+  });
+
   return (
     <div>
       <PageHeader
@@ -33,10 +59,16 @@ export default function PhonebookFormComponent({
               onClick={() => form.submit()}
               type="primary"
               loading={formLoading}
+              disabled={hasNoAccess}
             >
               {t("general.actions.save")}
             </Button>
-            <Button type="danger" onClick={handleDelete} loading={formLoading}>
+            <Button
+              type="danger"
+              disabled={hasNoAccess}
+              onClick={handleDelete}
+              loading={formLoading}
+            >
               {t("general.actions.delete")}
             </Button>
           </Space>
@@ -45,35 +77,35 @@ export default function PhonebookFormComponent({
       <FormFieldsChanged form={form} />
       <LayoutFormRow grow>
         <Form.Item label={t("phonebook.fields.firstname")} name="firstname">
-          <Input />
+          <Input disabled={hasNoAccess} />
         </Form.Item>
         <Form.Item label={t("phonebook.fields.lastname")} name="lastname">
-          <Input />
+          <Input disabled={hasNoAccess} />
         </Form.Item>
         <Form.Item label={t("phonebook.fields.company")} name="company">
-          <Input />
+          <Input disabled={hasNoAccess} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>
         <Form.Item label={t("phonebook.fields.category")} name="category">
-          <Input />
+          <Input disabled={hasNoAccess} />
         </Form.Item>
         <Form.Item label={t("phonebook.fields.address1")} name="address1">
-          <Input />
+          <Input disabled={hasNoAccess} />
         </Form.Item>
         <Form.Item label={t("phonebook.fields.address2")} name="address2">
-          <Input />
+          <Input disabled={hasNoAccess} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>
         <Form.Item label={t("phonebook.fields.city")} name="city">
-          <Input />
+          <Input disabled={hasNoAccess} />
         </Form.Item>
         <Form.Item label={t("phonebook.fields.state")} name="state">
-          <Input />
+          <Input disabled={hasNoAccess} />
         </Form.Item>
         <Form.Item label={t("phonebook.fields.country")} name="country">
-          <Input />
+          <Input disabled={hasNoAccess} />
         </Form.Item>
       </LayoutFormRow>
       <LayoutFormRow grow>
@@ -87,7 +119,10 @@ export default function PhonebookFormComponent({
           ]}
           name="email"
         >
-          <FormItemEmail email={getFieldValue("email")} />
+          <FormItemEmail
+            email={getFieldValue("email")}
+            disabled={hasNoAccess}
+          />
         </Form.Item>
         <Form.Item
           label={t("phonebook.fields.phone1")}
@@ -97,7 +132,7 @@ export default function PhonebookFormComponent({
               PhoneItemFormatterValidation(getFieldValue, "phone1"),
           ]}
         >
-          <PhoneFormItem />
+          <PhoneFormItem disabled={hasNoAccess} />
         </Form.Item>
         <Form.Item
           label={t("phonebook.fields.phone2")}
@@ -107,7 +142,7 @@ export default function PhonebookFormComponent({
               PhoneItemFormatterValidation(getFieldValue, "phone2"),
           ]}
         >
-          <PhoneFormItem />
+          <PhoneFormItem disabled={hasNoAccess} />
         </Form.Item>
         <Form.Item
           label={t("phonebook.fields.fax")}
@@ -117,7 +152,7 @@ export default function PhonebookFormComponent({
               PhoneItemFormatterValidation(getFieldValue, "fax"),
           ]}
         >
-          <PhoneFormItem />
+          <PhoneFormItem disabled={hasNoAccess} />
         </Form.Item>
       </LayoutFormRow>
     </div>

client/src/components/production-board-kanban-card/production-board-kanban-card.component.jsx

@@ -67,7 +67,7 @@ export default function ProductionBoardCard(technician, card) {
                     ? `${card.employee_refinish_rel.first_name} ${card.employee_refinish_rel.last_name}`
                     : ""
                 }`}</div>
-                <div>{`P: ${
+                <div>{`CSR: ${
                   card.employee_csr_rel
                     ? `${card.employee_csr_rel.first_name} ${card.employee_csr_rel.last_name}`
                     : ""

client/src/pages/phonebook/phonebook.page.component.jsx

@@ -10,15 +10,20 @@ import { useHistory, useLocation } from "react-router-dom";
 import { createStructuredSelector } from "reselect";
 import AlertComponent from "../../components/alert/alert.component";
 import { QUERY_PHONEBOOK_PAGINATED } from "../../graphql/phonebook.queries";
-import { selectBodyshop } from "../../redux/user/user.selectors";
+import {
+  selectAuthLevel,
+  selectBodyshop,
+} from "../../redux/user/user.selectors";
 import ChatOpenButton from "../../components/chat-open-button/chat-open-button.component";
 import { alphaSort } from "../../utils/sorters";
+import { HasRbacAccess } from "../../components/rbac-wrapper/rbac-wrapper.component";
 
 const mapStateToProps = createStructuredSelector({
   bodyshop: selectBodyshop,
+  authLevel: selectAuthLevel,
 });
 
-export function PhonebookPageComponent({ bodyshop }) {
+export function PhonebookPageComponent({ bodyshop, authLevel }) {
   const searchParams = queryString.parse(useLocation().search);
   const { page, sortcolumn, sortorder, search, phonebookentry } = searchParams;
   const history = useHistory();
@@ -133,6 +138,11 @@ export function PhonebookPageComponent({ bodyshop }) {
       history.push({ search: queryString.stringify(searchParams) });
     }
   };
+  const hasNoAccess = !HasRbacAccess({
+    bodyshop,
+    authLevel,
+    action: "phonebook:edit",
+  });
 
   return (
     <Card
@@ -155,7 +165,7 @@ export function PhonebookPageComponent({ bodyshop }) {
               </Button>
             </>
           )}
-          <Button onClick={handleNewPhonebook}>
+          <Button disabled={hasNoAccess} onClick={handleNewPhonebook}>
             {t("phonebook.actions.new")}
           </Button>
           <Button onClick={() => refetch()}>