@campxdev/shared 1.9.1 → 1.9.2

package/src/components/ApplicationProfile/DepartmentFilter.tsx

@@ -0,0 +1,77 @@
+import { Button, Stack } from '@mui/material'
+import { useEffect } from 'react'
+import { useQuery } from 'react-query'
+import { useImmer } from 'use-immer'
+import axios from '../../config/axios'
+import { SingleSelect } from '../Input'
+import Spinner from '../Spinner'
+
+const defaultState = {
+  departmentId: '',
+}
+
+const getDepartments = () => {
+  return axios.get('/square/departments').then((res) => res.data)
+}
+
+export default function DeprartmentFilter({
+  close,
+  appliedFilters,
+  setAppliedFilters,
+}) {
+  const [filter, setFilter] = useImmer(defaultState)
+
+  const { data, isLoading } = useQuery('department', () => getDepartments())
+
+  useEffect(() => {
+    setFilter({ departmentId: appliedFilters.filters.departmentId })
+  }, [])
+
+  const applyFilter = () => {
+    close()
+    setAppliedFilters((s) => {
+      s.filters.departmentId = filter.departmentId
+      s.filtersApplied = filter.departmentId ? true : false
+    })
+  }
+  const clearFilter = () => {
+    setAppliedFilters((s) => {
+      s.filters.departmentId = ''
+      s.filtersApplied = false
+    })
+    close()
+  }
+
+  if (isLoading) return <Spinner />
+  return (
+    <>
+      <Stack gap={3}>
+        <SingleSelect
+          label="Select Program"
+          onChange={(e) => {
+            setFilter((s) => {
+              s.departmentId = e.target.value
+            })
+          }}
+          value={filter.departmentId}
+          options={
+            data &&
+            data?.map((item) => ({
+              label: item?.name,
+              value: item?.id,
+            }))
+          }
+        />
+
+        <Stack direction="row" gap={2} mt={0.5}>
+          <Button fullWidth onClick={applyFilter}>
+            Apply Filters
+          </Button>
+          <Button variant="outlined" fullWidth onClick={clearFilter}>
+            Clear Filters
+          </Button>
+        </Stack>
+      </Stack>
+    </>
+  )
+}

package/src/components/ApplicationProfile/UserProfileRelation.tsx

@@ -1,130 +1,130 @@
-import { yupResolver } from '@hookform/resolvers/yup'
-import { Stack } from '@mui/material'
-import { useForm } from 'react-hook-form'
-import { useMutation, useQueryClient } from 'react-query'
-import { toast } from 'react-toastify'
-import { useImmer } from 'use-immer'
-import { axiosErrorToast } from '../../config/axios'
-import ActionButton from '../ActionButton'
-import { FormMultiSelect, FormSingleSelect } from '../HookForm'
-import {
-  createApplicationUserProfile,
-  fetchUsers,
-  userProfileSchema,
-} from './services'
-interface UserProps {
-  options: {
-    label: any
-    value: any
-  }[]
-  inputValue: string
-}
-function UserProfileRelation({ close, application, profiles }) {
-  const [state, setState] = useImmer<UserProps>({
-    options: [],
-    inputValue: '',
-  })
-  const queryClient = useQueryClient()
-
-  const { control, handleSubmit, formState } = useForm({
-    defaultValues: {},
-    resolver: yupResolver(userProfileSchema),
-  })
-
-  const { mutate, isLoading: creatingUserProfile } = useMutation(
-    createApplicationUserProfile,
-    {
-      onSuccess: (res) => {
-        queryClient.invalidateQueries(`application-users`)
-        toast.success('User profile added to application successfully')
-        close()
-      },
-      onError: (err) => {
-        // eslint-disable-next-line no-console
-        console.log(err)
-        axiosErrorToast(err)
-      },
-    },
-  )
-
-  const { mutate: fetchUsersFn, isLoading: gettingUsers } = useMutation(
-    fetchUsers,
-    {
-      onSuccess: (res) => {
-        setState((s) => {
-          s.options = res.result?.map((item) => ({
-            label: item.fullName,
-            value: item.id,
-          }))
-        })
-      },
-    },
-  )
-  const onSubmit = (formData) => {
-    mutate({
-      application: application,
-      profileIds: [+formData.profileIds],
-      userId: +formData.userId?.value,
-    })
-  }
-  const onError = (err) => {
-    // eslint-disable-next-line no-console
-    console.log(err)
-  }
-
-  const handleInputChange = (e) => {
-    //TODO : debounce
-    if (e) {
-      setState((s) => {
-        s.inputValue = e.target.value
-      })
-      if (e.target.value.length > 3) {
-        fetchUsersFn({
-          application: application,
-          search: e.target.value,
-        })
-      }
-    }
-  }
-
-  return (
-    <>
-      <form onSubmit={handleSubmit(onSubmit, onError)}>
-        <Stack gap={4} sx={{ padding: '10px' }}>
-          <FormMultiSelect
-            multiple={false}
-            label={'User'}
-            name={'userId'}
-            onInputChange={handleInputChange}
-            loading={gettingUsers}
-            control={control}
-            options={state.options ?? []}
-            required
-          />
-
-          <FormSingleSelect
-            label={'Profile'}
-            name={'profileIds'}
-            control={control}
-            options={
-              profiles?.map((profile) => ({
-                label: profile.name,
-                value: profile.id,
-              })) ?? []
-            }
-            required
-          />
-          <Stack gap={2} direction={'row'} sx={{ justifyContent: 'flex-end' }}>
-            <ActionButton variant="outlined" onClick={close}>
-              Cancel
-            </ActionButton>
-            <ActionButton type="submit" loading={creatingUserProfile}>
-              Confirm
-            </ActionButton>
-          </Stack>
-        </Stack>
-      </form>
-    </>
-  )
-}
-export default UserProfileRelation
+import { yupResolver } from '@hookform/resolvers/yup'
+import { Stack } from '@mui/material'
+import { useForm } from 'react-hook-form'
+import { useMutation, useQueryClient } from 'react-query'
+import { toast } from 'react-toastify'
+import { useImmer } from 'use-immer'
+import { axiosErrorToast } from '../../config/axios'
+import ActionButton from '../ActionButton'
+import { FormMultiSelect, FormSingleSelect } from '../HookForm'
+import {
+  createApplicationUserProfile,
+  fetchUsers,
+  userProfileSchema,
+} from './services'
+interface UserProps {
+  options: {
+    label: any
+    value: any
+  }[]
+  inputValue: string
+}
+function UserProfileRelation({ close, application, profiles }) {
+  const [state, setState] = useImmer<UserProps>({
+    options: [],
+    inputValue: '',
+  })
+  const queryClient = useQueryClient()
+
+  const { control, handleSubmit, formState } = useForm({
+    defaultValues: {},
+    resolver: yupResolver(userProfileSchema),
+  })
+
+  const { mutate, isLoading: creatingUserProfile } = useMutation(
+    createApplicationUserProfile,
+    {
+      onSuccess: (res) => {
+        queryClient.invalidateQueries(`application-users`)
+        toast.success('User profile added to application successfully')
+        close()
+      },
+      onError: (err) => {
+        // eslint-disable-next-line no-console
+        console.log(err)
+        axiosErrorToast(err)
+      },
+    },
+  )
+
+  const { mutate: fetchUsersFn, isLoading: gettingUsers } = useMutation(
+    fetchUsers,
+    {
+      onSuccess: (res) => {
+        setState((s) => {
+          s.options = res.result?.map((item) => ({
+            label: item.fullName,
+            value: item.id,
+          }))
+        })
+      },
+    },
+  )
+  const onSubmit = (formData) => {
+    mutate({
+      application: application,
+      profileIds: [+formData.profileIds],
+      userId: +formData.userId?.value,
+    })
+  }
+  const onError = (err) => {
+    // eslint-disable-next-line no-console
+    console.log(err)
+  }
+
+  const handleInputChange = (e) => {
+    //TODO : debounce
+    if (e) {
+      setState((s) => {
+        s.inputValue = e.target.value
+      })
+      if (e.target.value.length > 3) {
+        fetchUsersFn({
+          application: application,
+          search: e.target.value,
+        })
+      }
+    }
+  }
+
+  return (
+    <>
+      <form onSubmit={handleSubmit(onSubmit, onError)}>
+        <Stack gap={4} sx={{ padding: '10px' }}>
+          <FormMultiSelect
+            multiple={false}
+            label={'User'}
+            name={'userId'}
+            onInputChange={handleInputChange}
+            loading={gettingUsers}
+            control={control}
+            options={state.options ?? []}
+            required
+          />
+
+          <FormSingleSelect
+            label={'Profile'}
+            name={'profileIds'}
+            control={control}
+            options={
+              profiles?.map((profile) => ({
+                label: profile.name,
+                value: profile.id,
+              })) ?? []
+            }
+            required
+          />
+          <Stack gap={2} direction={'row'} sx={{ justifyContent: 'flex-end' }}>
+            <ActionButton variant="outlined" onClick={close}>
+              Cancel
+            </ActionButton>
+            <ActionButton type="submit" loading={creatingUserProfile}>
+              Confirm
+            </ActionButton>
+          </Stack>
+        </Stack>
+      </form>
+    </>
+  )
+}
+export default UserProfileRelation

package/src/components/ApplicationProfile/index.tsx

@@ -1 +1 @@
-export { default } from "./ApplicationProfile";
+export { default } from "./ApplicationProfile";

package/src/components/ApplicationProfile/services.ts

@@ -1,68 +1,71 @@
-import * as yup from 'yup'
-import axios from '../../config/axios'
-export const defaultFilterObj = {
-  search: null,
-  limit: 10,
-  offset: 0,
-}
-
-export const userProfileSchema = yup.object().shape({
-  userId: yup
-    .object()
-    .shape({
-      label: yup.string().required('User is required'),
-      value: yup.string().required('User is required'),
-    })
-    .required('User is required'),
-  profileIds: yup.string().required('Profile is required'),
-})
-export const fetchUsers = (params) => {
-  return axios
-    .get(`/square/profile-permissions/new-users`, {
-      params: params,
-    })
-    .then((res) => res.data)
-}
-
-export const fetchApplicationUsers = (params) => {
-  return axios
-    .get(`/square/profile-permissions/application-users`, {
-      params: params,
-    })
-    .then((res) => res.data)
-}
-
-export const fetchProfiles = (application) => {
-  return axios
-    .get(`/square/profiles`, {
-      params: application,
-    })
-    .then((res) => res.data)
-}
-
-interface ApplicationUserProfile {
-  application: string
-  userId: number
-  profileIds: number[]
-}
-export const createApplicationUserProfile = (
-  postBody: ApplicationUserProfile,
-) => {
-  return axios
-    .post(`/square/profile-permissions/add-user`, postBody)
-    .then((res) => res.data)
-}
-
-export const removeUserApplicationProfile = (postBody) => {
-  return axios
-    .post(`/square/profile-permissions/remove-user`, postBody)
-    .then((res) => res.data)
-}
-
-export const updateUserApplicationProfile = (
-  postBody: ApplicationUserProfile,
-) => {
-  return axios
-    .put(`/square/profile-permissions/edit-user-permissions`, postBody)
-    .then((res) => res.data)
-}
+import * as yup from 'yup'
+import axios from '../../config/axios'
+export const defaultFilterObj = {
+  filters: {
+    search: null,
+    limit: 10,
+    offset: 0,
+  },
+  filtersApplied: false,
+}
+
+export const userProfileSchema = yup.object().shape({
+  userId: yup
+    .object()
+    .shape({
+      label: yup.string().required('User is required'),
+      value: yup.string().required('User is required'),
+    })
+    .required('User is required'),
+  profileIds: yup.string().required('Profile is required'),
+})
+export const fetchUsers = (params) => {
+  return axios
+    .get(`/square/profile-permissions/new-users`, {
+      params: params,
+    })
+    .then((res) => res.data)
+}
+
+export const fetchApplicationUsers = (params) => {
+  return axios
+    .get(`/square/profile-permissions/application-users`, {
+      params: params,
+    })
+    .then((res) => res.data)
+}
+
+export const fetchProfiles = (application) => {
+  return axios
+    .get(`/square/profiles`, {
+      params: application,
+    })
+    .then((res) => res.data)
+}
+
+interface ApplicationUserProfile {
+  application: string
+  userId: number
+  profileIds: number[]
+}
+export const createApplicationUserProfile = (
+  postBody: ApplicationUserProfile,
+) => {
+  return axios
+    .post(`/square/profile-permissions/add-user`, postBody)
+    .then((res) => res.data)
+}
+
+export const removeUserApplicationProfile = (postBody) => {
+  return axios
+    .post(`/square/profile-permissions/remove-user`, postBody)
+    .then((res) => res.data)
+}
+
+export const updateUserApplicationProfile = (
+  postBody: ApplicationUserProfile,
+) => {
+  return axios
+    .put(`/square/profile-permissions/edit-user-permissions`, postBody)
+    .then((res) => res.data)
+}

package/src/components/Attachment.tsx

@@ -1,26 +1,26 @@
-import React from 'react'
-import styled from 'styled-components'
-
-interface AttachemntProps {
-  name: string
-  onClick?: Function
-  actions?: any
-}
-
-const AttachmentContainer = styled.div`
-  background: rgba(0, 0, 0, 0.1);
-  border-radius: 8px;
-  padding: 8px;
-  display: flex;
-  justify-content: space-between;
-  cursor: pointer;
-`
-
-export default function Attachment(props: AttachemntProps) {
-  return (
-    <AttachmentContainer onClick={() => props.onClick && props.onClick()}>
-      <div>{props.name}</div>
-      <div onClick={(e) => e.stopPropagation()}>{props.actions}</div>
-    </AttachmentContainer>
-  )
-}
+import React from 'react'
+import styled from 'styled-components'
+
+interface AttachemntProps {
+  name: string
+  onClick?: Function
+  actions?: any
+}
+
+const AttachmentContainer = styled.div`
+  background: rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  padding: 8px;
+  display: flex;
+  justify-content: space-between;
+  cursor: pointer;
+`
+
+export default function Attachment(props: AttachemntProps) {
+  return (
+    <AttachmentContainer onClick={() => props.onClick && props.onClick()}>
+      <div>{props.name}</div>
+      <div onClick={(e) => e.stopPropagation()}>{props.actions}</div>
+    </AttachmentContainer>
+  )
+}

package/src/components/AutocompleteSearch/AutocompleteSearch.tsx

@@ -1,57 +1,57 @@
-import { Autocomplete as MuiAutocomplete, TextField } from '@mui/material'
-import _ from 'lodash'
-import { useEffect, useMemo, useState } from 'react'
-
-export default function AutocompleteSearch({
-  name,
-  value,
-  onInputChange,
-  onChange,
-  label,
-  options: _options,
-  ...props
-}) {
-  const [options, setOptions] = useState([])
-
-  const debouncedChangeHandler = useMemo(
-    () =>
-      _.debounce((e, newInput) => {
-        onInputChange(newInput)
-      }, 300),
-    [],
-  )
-
-  useEffect(() => {
-    if (!_options) return
-    setOptions((prev) => [..._options])
-  }, [_options])
-
-  return (
-    <MuiAutocomplete
-      id="autocomplete-search"
-      fullWidth
-      getOptionLabel={(option) =>
-        typeof option === 'string' ? option : option?.label
-      }
-      filterOptions={(x) => x}
-      options={options || []}
-      autoComplete
-      includeInputInList
-      filterSelectedOptions
-      value={value}
-      onChange={(event: any, newValue: any) => {
-        if (!newValue) return
-        // onInputChange(newValue)
-        onChange(newValue)
-      }}
-      onInputChange={debouncedChangeHandler}
-      renderInput={(params) => (
-        <TextField {...params} label={label} fullWidth />
-      )}
-      renderOption={(props, option) => {
-        return <li {...props}>{option?.label}</li>
-      }}
-      {...props}
-    />
-  )
-}
+import { Autocomplete as MuiAutocomplete, TextField } from '@mui/material'
+import _ from 'lodash'
+import { useEffect, useMemo, useState } from 'react'
+
+export default function AutocompleteSearch({
+  name,
+  value,
+  onInputChange,
+  onChange,
+  label,
+  options: _options,
+  ...props
+}) {
+  const [options, setOptions] = useState([])
+
+  const debouncedChangeHandler = useMemo(
+    () =>
+      _.debounce((e, newInput) => {
+        onInputChange(newInput)
+      }, 300),
+    [],
+  )
+
+  useEffect(() => {
+    if (!_options) return
+    setOptions((prev) => [..._options])
+  }, [_options])
+
+  return (
+    <MuiAutocomplete
+      id="autocomplete-search"
+      fullWidth
+      getOptionLabel={(option) =>
+        typeof option === 'string' ? option : option?.label
+      }
+      filterOptions={(x) => x}
+      options={options || []}
+      autoComplete
+      includeInputInList
+      filterSelectedOptions
+      value={value}
+      onChange={(event: any, newValue: any) => {
+        if (!newValue) return
+        // onInputChange(newValue)
+        onChange(newValue)
+      }}
+      onInputChange={debouncedChangeHandler}
+      renderInput={(params) => (
+        <TextField {...params} label={label} fullWidth />
+      )}
+      renderOption={(props, option) => {
+        return <li {...props}>{option?.label}</li>
+      }}
+      {...props}
+    />
+  )
+}

package/src/components/AutocompleteSearch/index.tsx

@@ -1 +1 @@
-export { default } from './AutocompleteSearch'
+export { default } from './AutocompleteSearch'