@os1-platform/dispatch-mobile 2.1.0 → 2.1.2

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

@@ -1,282 +0,0 @@
-import React, { useRef, useState, useLayoutEffect } 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>
-            <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

@@ -1,29 +0,0 @@
-import type {
-  BaseETRequest,
-  BaseETResponse,
-} from '../../../models/execTasks/ETBaseModels';
-
-export type FormInputSchema = BaseETRequest & {
-  jsonSchema: JSONSchema;
-  uiSchema: UISchame;
-  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

@@ -1,144 +0,0 @@
-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

@@ -1,52 +0,0 @@
-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

@@ -1,158 +0,0 @@
-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

@@ -1,38 +0,0 @@
-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;