Merge pull request KelvinTegelaar#2339 from Ren-Roros-Digital/New-Sor…

…ting-Function

New sorting function

src/components/forms/RFFComponents.jsx

@@ -193,7 +193,7 @@ export const RFFCFormInput = ({
 }
 RFFCFormInput.propTypes = {
   ...sharedPropTypes,
-  type: PropTypes.oneOf(['color', 'file', 'text', 'password']),
+  type: PropTypes.oneOf(['color', 'file', 'text', 'password', 'number']),
   placeholder: PropTypes.string,
 }
 

src/components/utilities/index.js

@@ -18,6 +18,7 @@ import PageSizeSwitcher from 'src/components/utilities/PageSizeSwitcher'
 import Toasts from 'src/components/utilities/Toasts'
 import UsageLocation from 'src/components/utilities/UsageLocation'
 import CippTableOffcanvas from './CippTableOffcanvas'
+import validateAlphabeticalSort from './validateAlphabeticalSort'
 
 export {
   CippActionsOffcanvas,
@@ -43,4 +44,5 @@ export {
   PageSizeSwitcher,
   Toasts,
   UsageLocation,
+  validateAlphabeticalSort,
 }

src/components/utilities/validateAlphabeticalSort.jsx

@@ -0,0 +1,23 @@
+export default function validateAlphabeticalSort(data, sortKeys) {
+  if (!sortKeys || sortKeys.length === 0) return data
+  try {
+    if (!data) return data
+    const newList = data.filter((element) => {
+      return sortKeys.every((key) => {
+        return (element) => element[key] != null && element[key] != undefined
+      })
+    })
+    return newList.sort((a, b) => {
+      try {
+        return sortKeys.reduce((acc, key) => {
+          if (acc !== 0) return acc
+          return (a[key] ?? '').toString().localeCompare(b[key] ?? '')
+        }, 0)
+      } catch (error) {
+        return 0
+      }
+    })
+  } catch (error) {
+    return data
+  }
+}

src/views/endpoint/intune/MEMAddPolicy.jsx

@@ -2,9 +2,15 @@ import React, { useState } from 'react'
 import { CCol, CRow, CListGroup, CListGroupItem, CCallout, CSpinner } from '@coreui/react'
 import { Field, FormSpy } from 'react-final-form'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { faCheck, faExclamationTriangle, faTimes } from '@fortawesome/free-solid-svg-icons'
+import {
+  faCheck,
+  faExclamationTriangle,
+  faFunnelDollar,
+  faTimes,
+} from '@fortawesome/free-solid-svg-icons'
 import { CippWizard } from 'src/components/layout'
 import { WizardTableField } from 'src/components/tables'
+import { validateAlphabeticalSort } from 'src/components/utilities'
 import PropTypes from 'prop-types'
 import {
   Condition,
@@ -16,6 +22,7 @@ import {
 import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
 import { OnChange } from 'react-final-form-listeners'
 import CippJsonView from 'src/components/utilities/CippJsonView'
+import { value } from 'lodash-es'
 
 const Error = ({ name }) => (
   <Field
@@ -70,7 +77,6 @@ const AddPolicy = () => {
                 let template = intuneTemplates.data.filter(function (obj) {
                   return obj.GUID === value
                 })
-                // console.log(template[0][set])
                 onChange(template[0][set])
               }}
             </OnChange>
@@ -145,10 +151,12 @@ const AddPolicy = () => {
             {intuneTemplates.isSuccess && (
               <RFFCFormSelect
                 name="TemplateList"
-                values={intuneTemplates.data?.map((template) => ({
-                  value: template.GUID,
-                  label: template.Displayname,
-                }))}
+                values={validateAlphabeticalSort(intuneTemplates.data, ['Displayname'])?.map(
+                  (template) => ({
+                    value: template.GUID,
+                    label: template.Displayname,
+                  }),
+                )}
                 placeholder="Select a template"
                 label="Please choose a template to apply."
               />

src/views/tenant/standards/ListAppliedStandards.jsx

@@ -31,7 +31,7 @@ import {
 import { faCheck, faCircleNotch, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons'
 import { CippContentCard, CippPage } from 'src/components/layout'
 import { useSelector } from 'react-redux'
-import { ModalService } from 'src/components/utilities'
+import { ModalService, validateAlphabeticalSort } from 'src/components/utilities'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import Skeleton from 'react-loading-skeleton'
 import { CippTable, cellBooleanFormatter } from 'src/components/tables'
@@ -509,6 +509,7 @@ const ApplyNewStandard = () => {
                                             <>
                                               {component.type === 'Select' && (
                                                 <RFFCFormSelect
+                                                  placeholder="Select a value"
                                                   name={component.name}
                                                   className="mb-3"
                                                   label={component.label}
@@ -613,7 +614,10 @@ const ApplyNewStandard = () => {
                                           name={`${template.switchName}.TemplateList`}
                                           className="mb-3"
                                           multi={true}
-                                          values={template.templates.data?.map((t) => ({
+                                          values={validateAlphabeticalSort(
+                                            template.templates.data,
+                                            ['Displayname', 'name'],
+                                          )?.map((t) => ({
                                             value: t.GUID,
                                             name: t.name || t.Displayname || t.displayName,
                                           }))}