Staff Editing

src/containers/Collection/Collection.tsx

@@ -13,7 +13,7 @@ import {
   DELETE_COLLECTION,
 } from '../../graphql/mutations/Collection';
 import { GET_TAGS } from '../../graphql/queries/Tag';
-import { GET_GROUPS } from '../../graphql/queries/Groups';
+import { GET_GROUPS } from '../../graphql/queries/Group';
 import { AutoComplete } from '../../components/UI/Form/AutoComplete/AutoComplete';
 import { Calendar } from '../../components/UI/Form/Calendar/Calendar';
 

src/containers/Form/FormLayout.module.css

@@ -99,4 +99,15 @@
   border-width: 2px;
   border-color: #eaedec;
   border-radius: 12px;
+  padding: 15px;
+}
+
+.CheckBox {
+  color: blue !important;
+}
+
+.Select {
+  width: 450px;
+  margin-left: 8px;
+  margin-top: 8px;
 }

src/containers/Form/FormLayout.tsx

@@ -35,8 +35,6 @@ export interface FormLayoutProps {
   linkParameter?: any;
   cancelLink?: any;
   languageSupport?: boolean;
-  checkItems?: any;
-  checkItemsHeader?: string;
 }
 
 export const FormLayout: React.SFC<FormLayoutProps> = ({
@@ -59,8 +57,6 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
   linkParameter = null,
   cancelLink = null,
   languageSupport = true,
-  checkItems,
-  checkItemsHeader,
 }: FormLayoutProps) => {
   const [showDialog, setShowDialog] = useState(false);
   const [deleteItem] = useMutation(deleteItemQuery);
@@ -69,12 +65,15 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
   const [formCancelled, setFormCancelled] = useState(false);
   const [action, setAction] = useState(false);
   const [link, setLink] = useState(undefined);
+  const [groupsID, setGroupsID] = useState();
+  const [additionalData, setadditionalData] = useState();
 
   const languages = useQuery(GET_LANGUAGES, {
     onCompleted: (data) => {
       setLanguageId(data.languages[0].id);
     },
   });
+
   const itemId = match.params.id ? match.params.id : false;
   const { loading, error } = useQuery(getItemQuery, {
     variables: { id: itemId },
@@ -85,9 +84,31 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
         setLink(data[listItem][listItem][linkParameter]);
         setStates(item);
         setLanguageId(languageSupport ? item.language.id : null);
+        if (data.user && data.user.user) {
+          setGroupsID(data.user.user.groups == undefined ? null : data.user.user.groups);
+        }
       }
     },
   });
+
+  // if (additionalQuery) {
+  //   const { loading, error } = useQuery(additionalQuery, {
+  //     variables: {
+  //       opts: {
+  //         order: 'ASC',
+  //         limit: 10,
+  //         offset: 0,
+  //       },
+  //       filter: {
+  //         label: 'Group',
+  //       },
+  //     },
+  //     onCompleted: (data) => {
+  //       console.log(data);
+  //     },
+  //   });
+  // }
+
   const [updateItem] = useMutation(updateItemQuery, {
     onCompleted: () => {
       setFormSubmitted(true);
@@ -157,9 +178,11 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
     let message;
 
     if (itemId) {
+      console.log(payload);
       updateItem({
         variables: {
           id: itemId,
+          groupIds: groupsID,
           input: payload,
         },
       });
@@ -211,6 +234,10 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
     </Button>
   ) : null;
 
+  const handleCheckChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    console.log('hi');
+  };
+
   let form = (
     <>
       <Formik
@@ -221,6 +248,7 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
         }}
         validationSchema={validationSchema}
         onSubmit={(item) => {
+          console.log(item);
           saveHandler(item);
         }}
       >
@@ -238,8 +266,6 @@ export const FormLayout: React.SFC<FormLayoutProps> = ({
                 </React.Fragment>
               );
             })}
-            {checkItemsHeader ? <div className={styles.CheckHeader}>{checkItemsHeader}</div> : null}
-            {checkItemsHeader ? <div className={styles.CheckBoxes}></div> : null}
             <div className={styles.Buttons}>
               <Button
                 variant="contained"

src/containers/StaffManagement/StaffManagement.test.helper.tsx

@@ -1,5 +1,6 @@
 import { GET_USERS_QUERY, FILTER_USERS, USER_COUNT } from '../../graphql/queries/StaffManagement';
 import { GET_LANGUAGES } from '../../graphql/queries/List';
+import { GET_GROUPS } from '../../graphql/queries/Group';
 
 export const STAFF_MANAGEMENT_MOCKS = [
   {
@@ -70,4 +71,25 @@ export const STAFF_MANAGEMENT_MOCKS = [
       },
     },
   },
+  {
+    request: {
+      query: GET_GROUPS,
+    },
+    result: {
+      data: {
+        groups: [
+          {
+            id: '1',
+            label: 'Group 1',
+            isRestricted: true,
+          },
+          {
+            id: '2',
+            label: 'Group 2',
+            isRestricted: true,
+          },
+        ],
+      },
+    },
+  },
 ];

src/containers/StaffManagement/StaffManagement.tsx

@@ -1,36 +1,21 @@
 import React, { useState } from 'react';
 import * as Yup from 'yup';
 import { Input } from '../../components/UI/Form/Input/Input';
-import { GET_USERS_QUERY } from '../../graphql/queries/StaffManagement';
+import { GET_USERS_QUERY, GET_GROUPS } from '../../graphql/queries/StaffManagement';
 import { UPDATE_USER, DELETE_USER } from '../../graphql/mutations/StaffManagement';
 import { CREATE_TEMPLATE } from '../../graphql/mutations/Template';
 import { ReactComponent as StaffManagementIcon } from '../../assets/images/icons/StaffManagement/Active.svg';
+import { useQuery, useMutation } from '@apollo/client';
 import { FormLayout } from '../Form/FormLayout';
+import { AutoComplete } from '../../components/UI/Form/AutoComplete/AutoComplete';
+import { Dropdown } from '../../components/UI/Form/Dropdown/Dropdown';
 
 export interface StaffManagementProps {
   match: any;
 }
 
-const FormSchema = Yup.object().shape({
-  name: Yup.string().required('Name is required.'),
-  phone: Yup.string().required('Phone is required'),
-});
-
 const dialogMessage = ' Once deleted this action cannot be undone.';
 
-const formFields = [
-  { component: Input, name: 'name', type: 'text', placeholder: 'Full Name', query: true },
-  { component: Input, name: 'phone', disabled: true, placeholder: 'Phone Number', query: false },
-  {
-    component: Input,
-    name: 'roles',
-    disabled: true,
-    type: 'text',
-    placeholder: 'Roles',
-    query: true,
-  },
-];
-
 const staffManagementIcon = <StaffManagementIcon />;
 
 const queries = {
@@ -44,14 +29,65 @@ export const StaffManagement: React.SFC<StaffManagementProps> = ({ match }) => {
   const [name, setName] = useState('');
   const [phone, setPhone] = useState('');
   const [roles, setRoles] = useState('');
+  const [groups, setGroups] = useState([]);
 
   const states = { name, phone, roles };
-  const setStates = ({ name, phone, roles }: any) => {
+  const setStates = ({ name, phone, roles, groups }: any) => {
     setName(name);
     setPhone(phone);
     setRoles(roles);
+    setGroups(groups);
   };
 
+  useQuery(GET_GROUPS, {
+    onCompleted: (data) => {
+      setGroups(data.groups);
+    },
+  });
+
+  const formFields = [
+    {
+      component: Input,
+      name: 'name',
+      type: 'text',
+      placeholder: 'Full Name',
+      query: true,
+      select: false,
+    },
+    {
+      component: Input,
+      name: 'phone',
+      placeholder: 'Phone Number',
+      query: false,
+      select: false,
+    },
+    {
+      component: Dropdown,
+      name: 'roles',
+      placeholder: 'Roles',
+      options: [
+        { value: 'admin', name: 'Admin' },
+        { value: 'basic', name: 'Basic' },
+      ],
+    },
+    {
+      component: AutoComplete,
+      name: 'groups',
+      placeholder: 'Groups',
+      options: groups,
+      optionLabel: 'label',
+      textFieldProps: {
+        label: 'Groups',
+        variant: 'outlined',
+      },
+    },
+  ];
+
+  const FormSchema = Yup.object().shape({
+    name: Yup.string().required('Name is required.'),
+    phone: Yup.string().required('Phone is required'),
+  });
+
   return (
     <FormLayout
       {...queries}
@@ -66,7 +102,6 @@ export const StaffManagement: React.SFC<StaffManagementProps> = ({ match }) => {
       listItem="user"
       icon={staffManagementIcon}
       languageSupport={false}
-      checkItemsHeader="Groups"
     />
   );
 };

src/graphql/mutations/StaffManagement.ts

@@ -12,13 +12,16 @@ export const DELETE_USER = gql`
 `;
 
 export const UPDATE_USER = gql`
-  mutation updateUser($id: ID!, $input: UserInput!) {
-    updateUser(id: $id, input: $input) {
+  mutation updateUser($id: ID!, $input: UserInput!, $groupIds: [ID]!) {
+    updateUser(id: $id, input: $input, groupIds: $groupIds) {
       user {
         id
         name
         phone
         roles
+        groups {
+          label
+        }
       }
       errors {
         key

src/graphql/queries/StaffManagement.ts

@@ -35,3 +35,13 @@ export const FILTER_USERS = gql`
     }
   }
 `;
+
+export const GET_GROUPS = gql`
+  query groups($filter: GroupFilter, $opts: Opts) {
+    groups(filter: $filter, opts: $opts) {
+      id
+      label
+      isRestricted
+    }
+  }
+`;