@os1-platform/dispatch-mobile 2.1.2 → 2.1.3

package/src/components/executiontasks/forms/FormGenerator.tsx

@@ -0,0 +1,283 @@
+import React, { useRef, useState, useLayoutEffect, useEffect } from 'react';
+import {
+  BackHandler,
+  KeyboardAvoidingView,
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  View,
+} from 'react-native';
+import ReactNativeForm, { defaultProps, FormContext } from 'rjsf-native';
+import DateTimeWidget from './widgets/DateTimeWidget';
+import TimeRangeSelector from './widgets/TimeRangeSelector';
+import QRBarcodeScannerWidget from './widgets/QRBarcodeScannerWidget';
+import DropdownWidget from './widgets/DropdownWidget';
+import { Button, Modal, Portal, Provider } from 'react-native-paper';
+import type { FormInputSchema } from './FormSchema';
+import { getBaseETResponse } from '../../../utils/ExecTaskUtils';
+import { getEventCodeByET } from '../../../manager/dispatchCodes/EventCodeContainer';
+import {
+  EntityCode,
+  ExecutionTaskID,
+} from '../../../models/execTasks/ETConfig';
+import {
+  CommonStyles,
+  Fonts,
+} from '../../../styles/executionTasks/CommonStyles';
+import SdkColors, { ColorTheme } from '../../../styles/SdkColors';
+import Icon from 'react-native-vector-icons/MaterialIcons';
+import { GO_BACK_EVENT_CODE } from '../../../constants/constants';
+import { hasGoBackConnector } from '../../../components/utils';
+import GoBackModal from '../../../components/widgets/GoBackModal';
+import { useFocusEffect } from '@react-navigation/native';
+
+const customWidgets = {
+  datePicker: DateTimeWidget,
+  timeRangeSelector: TimeRangeSelector,
+  scanner: QRBarcodeScannerWidget,
+  select: DropdownWidget,
+};
+
+const FormGenerator = (props: FormInputSchema) => {
+  const form = useRef(null);
+  const [showBackModal, setShowBackModal] = useState(false);
+  const [onCancel, setOnCancel] = useState(false);
+
+  // Handle back-button click when scanList was being viewed
+  useFocusEffect(
+    React.useCallback(() => {
+      const onBackPress = () => {
+        if (
+          props.taskMeta?.enableGoBack &&
+          hasGoBackConnector(props.applicableReasons)
+        ) {
+          setShowBackModal(true);
+          return true;
+        } else {
+          props.navigation.goBack();
+          return true;
+        }
+      };
+      BackHandler.addEventListener('hardwareBackPress', onBackPress);
+      return () =>
+        BackHandler.removeEventListener('hardwareBackPress', onBackPress);
+    }, [])
+  );
+
+  useLayoutEffect(() => {
+    props.navigation.setOptions({
+      title: props.title,
+      headerLeft: () => {
+        return (
+          <Icon
+            onPress={() => {
+              if (
+                props.taskMeta?.enableGoBack &&
+                hasGoBackConnector(props.applicableReasons)
+              )
+                setShowBackModal(true);
+              else props.navigation.goBack();
+            }}
+            name="arrow-back"
+            color={'black'}
+            size={25}
+            style={{
+              paddingRight: 15,
+              paddingTop: 5,
+            }}
+          />
+        );
+      },
+    });
+  }, [props.navigation, props.title]);
+
+  const renderModal = () => {
+    return (
+      <GoBackModal
+        showModal={showBackModal}
+        setShowModal={setShowBackModal}
+        onSuccess={async () => {
+          props.onSubmitET({
+            ...(await getBaseETResponse(
+              EntityCode.FORMS,
+              false,
+              GO_BACK_EVENT_CODE,
+              '',
+              props.mergedObjectiveId,
+              ExecutionTaskID.FORMS
+            )),
+            data: {},
+          });
+          setShowBackModal(false);
+        }}
+        onFailure={() => setShowBackModal(false)}
+      />
+    );
+  };
+
+  return (
+    <Provider>
+      {renderModal()}
+      <KeyboardAvoidingView style={CommonStyles.mainContainer}>
+        <ScrollView style={{ flex: 1, flexGrow: 1 }}>
+          <View
+            style={{
+              flex: 1,
+              padding: 20,
+            }}
+          >
+            <FormContext.Provider
+              value={{
+                ...defaultProps,
+                requiredTitle: '*',
+                theme: {
+                  primaryColor: SdkColors[ColorTheme.LIGHT].primaryButton,
+                  highlightColor: SdkColors[ColorTheme.LIGHT].primaryButton,
+                  borderColor: SdkColors[ColorTheme.LIGHT].primaryButton,
+                  textColor: '#3D445C',
+                  placeholderTextColor: '#3D445C',
+                  errorColor: '#b00020',
+                  fontFamily:
+                    Platform.OS === 'android'
+                      ? Fonts.IBMPlexSans_400Regular
+                      : 'IBMPlexSans-Regular',
+                },
+              }}
+            >
+              <Text style={[styles.title]}>{props.message}</Text>
+              <ReactNativeForm
+                noHtml5Validate={onCancel ? true : false}
+                noValidate={onCancel ? true : false}
+                widgets={customWidgets}
+                // @ts-ignore
+                ref={form}
+                // @ts-ignore
+                schema={props.jsonSchema}
+                showErrorList={false}
+                uiSchema={props.uiSchema}
+                onError={async (error) => {
+                  if (onCancel === false) props.onError(error);
+                  else {
+                    props.onSubmitET({
+                      ...(await getBaseETResponse(
+                        EntityCode.FORMS,
+                        false,
+                        getEventCodeByET(
+                          ExecutionTaskID.FORMS,
+                          false,
+                          props.applicableReasons?.failure
+                        ),
+                        '',
+                        props.mergedObjectiveId,
+                        ExecutionTaskID.FORMS
+                      )),
+                      data: {},
+                    });
+                  }
+                }}
+                onSubmit={async (response) => {
+                  if (onCancel === true) {
+                    props.onSubmitET({
+                      ...(await getBaseETResponse(
+                        EntityCode.FORMS,
+                        false,
+                        getEventCodeByET(
+                          ExecutionTaskID.FORMS,
+                          false,
+                          props.applicableReasons?.failure
+                        ),
+                        '',
+                        props.mergedObjectiveId,
+                        ExecutionTaskID.FORMS
+                      )),
+                      data: response.formData,
+                    });
+                  } else {
+                    props.onSubmitET({
+                      ...(await getBaseETResponse(
+                        EntityCode.FORMS,
+                        true,
+                        getEventCodeByET(
+                          ExecutionTaskID.FORMS,
+                          true,
+                          props.applicableReasons?.success
+                        ),
+                        '',
+                        props.mergedObjectiveId,
+                        ExecutionTaskID.FORMS
+                      )),
+                      data: response.formData,
+                    });
+                  }
+                }}
+              >
+                <Text>{ }</Text>
+              </ReactNativeForm>
+            </FormContext.Provider>
+          </View>
+        </ScrollView>
+        <View style={styles.bottomView}>
+          <View>
+            <Button
+              style={[CommonStyles.nextButton, { width: 165, marginStart: 10 }]}
+              labelStyle={CommonStyles.nextButtonLabel}
+              mode={'contained'}
+              onPress={() => {
+                if (form.current) {
+                  setOnCancel(false);
+                  // @ts-ignore
+                  form.current.submit();
+                }
+              }}
+            >
+              Proceed
+            </Button>
+          </View>
+          <View>
+            {(props.isSelfLoop == false) && <Button
+              style={[CommonStyles.cancelButton, { width: 165, marginEnd: 10 }]}
+              labelStyle={CommonStyles.cancelButtonLabel}
+              mode={'outlined'}
+              onPress={() => {
+                if (form.current) {
+                  setOnCancel(true);
+                  // @ts-ignore
+                  form.current.submit();
+                }
+              }}
+            >
+              Cancel
+            </Button>
+            }
+          </View>
+        </View>
+      </KeyboardAvoidingView>
+    </Provider>
+  );
+};
+
+export default FormGenerator;
+
+const styles = StyleSheet.create({
+  title: {
+    marginTop: 10,
+    marginBottom: 20,
+    fontFamily:
+      Platform.OS === 'android'
+        ? Fonts.IBMPlexSans_400Regular
+        : 'IBMPlexSans-Regular',
+    fontStyle: 'normal',
+    fontSize: 16,
+    lineHeight: 20,
+    letterSpacing: 0.25,
+    color: '#3D445C',
+    alignItems: 'center',
+  },
+  bottomView: {
+    flexDirection: 'row-reverse',
+    justifyContent: 'space-evenly',
+    padding: 16,
+    backgroundColor: 'white',
+  },
+});

package/src/components/executiontasks/forms/FormSchema.ts

@@ -0,0 +1,30 @@
+import type {
+  BaseETRequest,
+  BaseETResponse,
+} from '../../../models/execTasks/ETBaseModels';
+
+export type FormInputSchema = BaseETRequest & {
+  jsonSchema: JSONSchema;
+  uiSchema: UISchame;
+  isSelfLoop: boolean;
+  onError: (e: any) => void;
+  onSubmitET: (result: FormOutputSchema) => void;
+};
+/**
+ * Json schema used in react-jsonschema-form
+ */
+export interface JSONSchema {
+  [k: string]: unknown;
+}
+/**
+ * UI schema used in react-jsonschema-form
+ */
+export interface UISchame {
+  [k: string]: unknown;
+}
+
+export type FormOutputSchema = BaseETResponse & {
+  data: {
+    [k: string]: unknown;
+  };
+};

package/src/components/executiontasks/forms/widgets/DateTimeWidget.tsx

@@ -0,0 +1,144 @@
+import React, { useState } from 'react';
+import {
+  Platform,
+  StyleSheet,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import DateTimePicker, { Event } from '@react-native-community/datetimepicker';
+import type { WidgetProps } from '@rjsf/core';
+import { useFormContext } from 'rjsf-native';
+import SdkColors, { ColorTheme } from '../../../../styles/SdkColors';
+
+const MODES = {
+  DATE: 'date',
+  TIME: 'time',
+  DATETIME: 'datetime',
+};
+
+type DateWidgetProps = WidgetProps & {
+  minDate?: Date;
+  maxDate?: Date;
+};
+
+const DateTimeWidget = ({
+  id,
+  label,
+  value,
+  onChange,
+  onFocus,
+  autofocus,
+  options,
+  rawErrors,
+  maxDate,
+}: DateWidgetProps) => {
+  const [show, setShow] = useState(false);
+  const [date, setDate] = useState<Date | null>(null);
+  const { theme } = useFormContext();
+  const [focused, setFocused] = useState(false);
+
+  const themedStyle = {
+    borderColor:
+      rawErrors?.length > 0
+        ? theme.errorColor
+        : focused
+        ? theme.highlightColor
+        : theme.borderColor,
+    borderWidth: focused ? 2 : 1.5,
+    color: theme.textColor,
+  };
+  const onDateChange = (_event: Event, selectedDate?: Date) => {
+    setShow(Platform.OS === 'ios');
+    if (selectedDate) {
+      const currentDate = selectedDate;
+      let dateTimeValue = getValueBasedOnMode(options, currentDate);
+      setDate(currentDate);
+      onChange(dateTimeValue);
+    }
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={() => setShow(true)}>
+        <TextInput
+          editable={false}
+          onTouchStart={() => setShow(true)}
+          value={getValueBasedOnMode(options, date)}
+          placeholder={label}
+          selectionColor={'#6200EE'}
+          autoFocus={autofocus}
+          onFocus={() => {
+            setFocused(true);
+            onFocus(id, value);
+          }}
+          placeholderTextColor={theme.placeholderTextColor}
+          style={[styles.input, themedStyle]}
+        />
+      </TouchableOpacity>
+      {show && (
+        <DateTimePicker
+          testID="dateTimePicker"
+          // @ts-ignore
+          mode={getWidgetType(options.mode)}
+          minimumDate={options.mode === 'date' ? new Date() : undefined}
+          maximumDate={maxDate}
+          is24Hour={false}
+          display={Platform.OS === 'ios' ? 'compact' : 'default'}
+          onChange={onDateChange}
+          value={date ?? new Date()}
+          textColor={'red'}
+        />
+      )}
+    </View>
+  );
+};
+
+function getWidgetType(mode: string): string {
+  switch (mode) {
+    case 'date':
+      return MODES.DATE;
+    case 'time':
+      return MODES.TIME;
+    case 'datetime':
+      return MODES.DATETIME;
+    default:
+      return MODES.DATE;
+  }
+}
+
+function getValueBasedOnMode(uiOptions: any, date: Date | null): string {
+  if (!date) return '';
+  switch (uiOptions.mode) {
+    case 'date':
+      return date.toISOString().substring(0, 10);
+    case 'time':
+      return date.toLocaleTimeString().slice(0, 5);
+    case 'datetime':
+      return date.toLocaleString();
+    default:
+      return date.toLocaleString();
+  }
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  input: {
+    borderColor: SdkColors[ColorTheme.LIGHT].primaryButton,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    paddingTop: 15,
+    paddingBottom: 15,
+    borderRadius: 4,
+    fontSize: 16,
+    color: '#111111',
+  },
+});
+
+/**
+ * max and min date has to be implemented
+ */
+
+export default DateTimeWidget;

package/src/components/executiontasks/forms/widgets/DropdownWidget.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import DropDownPicker from 'react-native-dropdown-picker';
+import type { WidgetProps } from '@rjsf/core';
+import SdkColors, { ColorTheme } from '../../../../styles/SdkColors';
+
+type enumOptions = {
+  label: string;
+  value: string;
+};
+
+type DropdownWidgetProps = WidgetProps & {
+  options: { [key: string]: any };
+};
+
+const DropdownWidget = (props: DropdownWidgetProps) => {
+  const [open, setOpen] = useState(false);
+  const [dropdownValue, setDropdownValue] = useState(props.value);
+  return (
+    <View style={styles.container}>
+      <DropDownPicker
+        style={styles.input}
+        //@ts-ignore
+        items={props.options.enumOptions}
+        open={open}
+        setOpen={setOpen}
+        value={dropdownValue}
+        setValue={setDropdownValue}
+        listMode={'SCROLLVIEW'}
+        onChangeValue={(value) => props.onChange(value)}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+  },
+  input: {
+    borderColor: SdkColors[ColorTheme.LIGHT].primaryButton,
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    paddingTop: 15,
+    paddingBottom: 15,
+    borderRadius: 4,
+    fontSize: 16,
+    color: '#111111',
+  },
+});
+
+export default DropdownWidget;

package/src/components/executiontasks/forms/widgets/QRBarcodeScannerWidget.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import {
+  Modal,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+import type { WidgetProps } from '@rjsf/core';
+import { useFormContext } from 'rjsf-native';
+import { AntDesign } from '@expo/vector-icons';
+import CScanner from '../../scan/sub_components/CScanner';
+
+const QRBarcodeScannerWidget = ({
+  id,
+  label,
+  value,
+  onChange,
+  onFocus,
+  autofocus,
+  rawErrors,
+}: WidgetProps) => {
+  const [show, setShow] = useState(false);
+  const [scannerOutput, setScannerOutput] = React.useState<string>('');
+  const { theme } = useFormContext();
+  const [focused, setFocused] = useState(false);
+
+  const themedStyle = {
+    borderColor:
+      rawErrors?.length > 0
+        ? theme.errorColor
+        : focused
+        ? theme.highlightColor
+        : theme.borderColor,
+    borderWidth: focused ? 2 : 1,
+    color: theme.textColor,
+  };
+
+  return (
+    <View style={styles.container}>
+      <TouchableOpacity onPress={() => setShow(true)}>
+        <TextInput
+          editable={false}
+          onTouchStart={() => setShow(true)}
+          value={scannerOutput}
+          placeholder={label}
+          autoFocus={autofocus}
+          onFocus={() => {
+            setFocused(true);
+            onFocus(id, value);
+          }}
+          selectionColor={theme.highlightColor}
+          placeholderTextColor={theme.placeholderTextColor}
+          style={[styles.input, themedStyle]}
+        />
+      </TouchableOpacity>
+      {show && (
+        <ScannerDialog
+          onSubmitDialog={(data) => {
+            setScannerOutput(data);
+            onChange(data);
+          }}
+          /**
+           * Failure case impl.*/
+          onModalClose={() => setShow(false)}
+        />
+      )}
+    </View>
+  );
+};
+
+function ScannerDialog(props: ScannerDialogProps) {
+  const [modalVisible, setModalVisible] = useState(true);
+
+  return (
+    <View style={styles.centeredView}>
+      <Modal
+        animationType="slide"
+        transparent={true}
+        visible={modalVisible}
+        onRequestClose={() => {
+          setModalVisible(!modalVisible);
+          props.onModalClose();
+        }}
+      >
+        <View style={styles.centeredView}>
+          <View style={styles.modalContent}>
+            <Text style={styles.modalText}>Barcode/QR Scanner</Text>
+            <CScanner
+              barCodeTypes={[]}
+              onScanned={(result) => {
+                props.onSubmitDialog(result);
+                setModalVisible(false);
+                props.onModalClose();
+              }}
+            />
+            <AntDesign
+              name="closecircleo"
+              size={40}
+              color="blue"
+              onPress={() => {
+                setModalVisible(false);
+                props.onModalClose();
+              }}
+            />
+          </View>
+        </View>
+      </Modal>
+    </View>
+  );
+}
+const styles = StyleSheet.create({
+  centeredView: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+    marginTop: 22,
+  },
+  modalContent: {
+    margin: 20,
+    backgroundColor: 'white',
+    borderRadius: 20,
+    padding: 35,
+    alignItems: 'center',
+    shadowColor: '#000',
+    shadowOffset: {
+      width: 0,
+      height: 2,
+    },
+    shadowOpacity: 0.25,
+    shadowRadius: 4,
+    elevation: 5,
+  },
+  modalText: {
+    marginBottom: 15,
+    textAlign: 'center',
+  },
+  container: {
+    flex: 1,
+  },
+  input: {
+    borderColor: '#979B9E',
+    borderWidth: 1,
+    paddingHorizontal: 16,
+    paddingTop: 15,
+    paddingBottom: 15,
+    borderRadius: 4,
+    fontSize: 16,
+    color: '#333333',
+  },
+});
+
+export interface ScannerDialogProps {
+  onSubmitDialog: (value: string) => void;
+  onModalClose: () => void;
+}
+export default QRBarcodeScannerWidget;

package/src/components/executiontasks/forms/widgets/TimeRangeSelector.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import { StyleSheet, View } from 'react-native';
+import type { WidgetProps } from '@rjsf/core';
+import DateTimeWidget from './DateTimeWidget';
+
+const TimeRangeSelector = (props: WidgetProps) => {
+  const [start, setStart] = useState(new Date());
+  const [end, setEnd] = useState(new Date());
+  useEffect(() => {
+    props.onChange(JSON.stringify({ start: start, end: end }));
+  });
+  return (
+    <View style={styles.container}>
+      <DateTimeWidget
+        {...props}
+        onChange={(date) => {
+          setStart(date);
+        }}
+      />
+      <DateTimeWidget
+        {...props}
+        onChange={(date) => {
+          setEnd(date);
+        }}
+      />
+    </View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+  },
+});
+
+export default TimeRangeSelector;