ui-soxo-bootstrap-core 2.4.24 → 2.4.25-dev.10

package/core/models/staff/components/staff-add/staff-add.js

@@ -0,0 +1,352 @@
+import React, { useState, useEffect, useRef } from 'react';
+import './staff-add.scss';
+import { Modal, Tabs, Input, Form, Row, Col, message, Checkbox, Select } from 'antd';
+import { useTranslation, Button } from './../../../../lib/';
+import { UsersAPI } from '../../..';
+
+const StaffAdd = ({ visible, onCancel, staffId, staffData, onSuccess }) => {
+  const [form] = Form.useForm();
+  const { t } = useTranslation();
+
+  /** -------------------------------
+   *  STATE
+   * ------------------------------- */
+  const [loading, setLoading] = useState(false);
+  const [designations, setDesignations] = useState([]);
+  const [isSubmitDisabled, setIsSubmitDisabled] = useState(true);
+  const [codeStatus, setCodeStatus] = useState({ status: '', message: '' });
+
+  const nameInputRef = useRef(null);
+
+  const editMode = Boolean(staffId);
+
+  /** -------------------------------
+   *  FORM WATCHERS
+   * ------------------------------- */
+  const watchedName = Form.useWatch('shortName', form);
+  const watchedCode = Form.useWatch('id', form);
+  const watchedDesc = Form.useWatch('description', form);
+
+  /** -------------------------------
+   *  EFFECTS
+   * ------------------------------- */
+
+  // Auto-focus on open
+  useEffect(() => {
+    if (visible) {
+      setTimeout(() => nameInputRef.current?.focus(), 200);
+    }
+  }, [visible]);
+
+  // Control submit button
+  useEffect(() => {
+    setIsSubmitDisabled(!(watchedName && watchedCode && watchedDesc));
+  }, [watchedName, watchedCode, watchedDesc]);
+
+  // Load designations when modal opens
+  useEffect(() => {
+    if (visible) getDesignations();
+  }, [visible]);
+
+  // Reset or fill edit form
+  useEffect(() => {
+    if (visible) {
+      if (editMode && staffData) fillEditForm(staffData);
+    } else {
+      form.resetFields();
+    }
+  }, [visible]);
+
+  /** -------------------------------
+   *  API CALL – Designations
+   * ------------------------------- */
+  const getDesignations = () => {
+    setLoading(true);
+    UsersAPI.getDesignations()
+      .then((res) => {
+        if (res?.success && Array.isArray(res.result)) {
+          const formatted = res.result.map((ele) => ({
+            label: ele.dg_desc?.trim() || '',
+            value: ele.dg_code,
+          }));
+          setDesignations(formatted);
+        } else {
+          setDesignations([]);
+        }
+      })
+      .catch((err) => {
+        console.error('Error fetching designations:', err);
+        setDesignations([]);
+      })
+      .finally(() => setLoading(false));
+  };
+
+  /** -------------------------------
+   *  VALIDATION – Code
+   * ------------------------------- */
+  const validateDoctorCode = async (_, value) => {
+    if (editMode) return Promise.resolve(); // Skip validation if editing
+
+    if (!value) {
+      setCodeStatus({ status: '', message: '' });
+      return Promise.resolve();
+    }
+
+    try {
+      const res = await UsersAPI.getStaffCode(value);
+
+      if (res?.status === 409 || res?.success === false) {
+        setCodeStatus({ status: 'error', message: res.message || 'Code already exists' });
+        return Promise.reject(new Error(res.message || 'Code already exists'));
+      }
+
+      if (res?.status === 200 && res?.success === true) {
+        setCodeStatus({
+          status: 'success',
+          message: 'The entered code is valid for assigning a staff.',
+        });
+        return Promise.resolve();
+      }
+
+      setCodeStatus({ status: 'error', message: 'Unexpected response' });
+      return Promise.reject(new Error('Unexpected response'));
+    } catch {
+      setCodeStatus({ status: 'error', message: 'Validation failed' });
+      return Promise.reject(new Error('Validation failed'));
+    }
+  };
+
+  /** -------------------------------
+   *  UTIL – Enter Key Navigation
+   * ------------------------------- */
+  const handleEnterKey = (e) => {
+    if (e.key === 'Enter') {
+      e.preventDefault();
+      const fields = Array.from(document.querySelectorAll('.ant-input'));
+      const index = fields.indexOf(e.target);
+      if (index > -1 && index < fields.length - 1) {
+        fields[index + 1].focus();
+      }
+    }
+  };
+
+  /** -------------------------------
+   *  FORM FILL – Edit Mode
+   * ------------------------------- */
+  const fillEditForm = (data) => {
+    form.setFieldsValue({
+      id: data.id,
+      shortName: data.shortName,
+      description: data.description,
+      designation: data.designationPtr,
+      phone1: data.phone,
+      phone2: data.mobile || data.alternateMobile,
+      email1: data.email,
+      email2: data.alternateEmail,
+      slno: data.slNo,
+      active: data.active === 'Y' ? 'Y' : 'N',
+      remarks: data.remarks,
+      address1: data.address1,
+      address2: data.address2,
+      place: data.place,
+      zip: data.zip,
+    });
+  };
+
+  /** -------------------------------
+   *  SUBMIT HANDLER
+   * ------------------------------- */
+  const handleFinish = async (values) => {
+    setLoading(true);
+
+    const payload = {
+      id: values.id,
+      shortName: values.shortName,
+      description: values.description,
+      designationPtr: values.designation,
+      phone: values.phone1,
+      mobile: values.phone2,
+      alternateMobile: values.phone2,
+      email: values.email1,
+      alternateEmail: values.email2,
+      remarks: values.remarks,
+      slNo: values.slno ? Number(values.slno) : null,
+      active: values.active === 'Y' ? 'Y' : 'N',
+      address1: values.address1,
+      address2: values.address2,
+      place: values.place,
+      zip: values.zip,
+    };
+
+    try {
+      const res = editMode ? await UsersAPI.updateStaff(payload, staffData.id) : await UsersAPI.createStaff(payload);
+
+      if (res?.success) {
+        message.success(editMode ? 'Staff updated successfully' : 'Staff created successfully');
+        onSuccess?.();
+        onCancel();
+      } else {
+        message.error(res?.message || 'Operation failed');
+      }
+    } catch {
+      message.error('Something went wrong');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  /** -------------------------------
+   *  RENDER
+   * ------------------------------- */
+  return (
+    <Modal
+      title={editMode ? 'Edit Staff' : 'Add Staff'}
+      open={visible}
+      onCancel={onCancel}
+      width={950}
+      footer={null}
+      destroyOnClose
+      style={{ top: 10 }}
+    >
+      <Form form={form} layout="vertical" onFinish={handleFinish}>
+        {/* TOP SECTION */}
+        <Row gutter={16}>
+          <Col span={6}>
+            <Form.Item
+              label="Code"
+              name="id"
+              validateTrigger="onChange"
+              hasFeedback={!editMode}
+              rules={[{ required: true }, { validator: validateDoctorCode }]}
+            >
+              <Input placeholder="Enter Code" ref={nameInputRef} onKeyDown={handleEnterKey} disabled={editMode} />
+            </Form.Item>
+          </Col>
+
+          <Col span={6}>
+            <Form.Item label="Name" name="shortName" rules={[{ required: true }]}>
+              <Input placeholder="Enter Name" onKeyDown={handleEnterKey} />
+            </Form.Item>
+          </Col>
+
+          <Col span={12}>
+            <Form.Item label="Description" name="description" rules={[{ required: true }]}>
+              <Input placeholder="Enter Description" onKeyDown={handleEnterKey} />
+            </Form.Item>
+          </Col>
+        </Row>
+
+        <Tabs defaultActiveKey="1">
+          {/* GENERAL TAB */}
+          <Tabs.TabPane tab="GENERAL" key="1">
+            <Row gutter={16}>
+              <Col span={6}>
+                <Form.Item label="Phone Number 1" name="phone1">
+                  <Input maxLength={10} placeholder="Enter Phone Number" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={6}>
+                <Form.Item label="Phone Number 2" name="phone2">
+                  <Input maxLength={10} placeholder="Enter Phone Number" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={6}>
+                <Form.Item label="Email ID 1" name="email1">
+                  <Input placeholder="Enter Email" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={6}>
+                <Form.Item label="Email ID 2" name="email2">
+                  <Input placeholder="Enter Email" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row gutter={16}>
+              <Col span={8}>
+                <Form.Item name="designation" label="Designation">
+                  <Select placeholder="Select Designation" options={designations} allowClear showSearch optionFilterProp="label" />
+                </Form.Item>
+              </Col>
+
+              <Col span={8}>
+                <Form.Item label="Serial Number" name="slno">
+                  <Input placeholder="Enter Serial Number" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={8}>
+                <div style={{ display: 'flex', alignItems: 'center', gap: 10, marginTop: 30 }}>
+                  <label>Active</label>
+                  <Form.Item
+                    name="active"
+                    valuePropName="checked"
+                    getValueFromEvent={(e) => (e.target.checked ? 'Y' : 'N')}
+                    getValueProps={(value) => ({ checked: value === 'Y' })}
+                    style={{ marginBottom: 0 }}
+                  >
+                    <Checkbox />
+                  </Form.Item>
+                </div>
+              </Col>
+            </Row>
+
+            <Row>
+              <Col span={24}>
+                <Form.Item label="Remarks" name="remarks">
+                  <Input placeholder="Enter Remarks" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+            </Row>
+          </Tabs.TabPane>
+
+          {/* ADDRESS TAB */}
+          <Tabs.TabPane tab="ADDRESS" key="2">
+            <Row gutter={16}>
+              <Col span={12}>
+                <Form.Item label="Address Line 1" name="address1">
+                  <Input placeholder="Enter Address" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={12}>
+                <Form.Item label="Address Line 2" name="address2">
+                  <Input placeholder="Enter Address" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+            </Row>
+
+            <Row gutter={16}>
+              <Col span={12}>
+                <Form.Item label="Place" name="place">
+                  <Input placeholder="Enter Place" onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+
+              <Col span={12}>
+                <Form.Item label="Zip Code" name="zip">
+                  <Input placeholder="Enter Zip Code" maxLength={7} onKeyDown={handleEnterKey} />
+                </Form.Item>
+              </Col>
+            </Row>
+          </Tabs.TabPane>
+        </Tabs>
+
+        {/* FOOTER BUTTONS */}
+        <div style={{ display: 'flex', justifyContent: 'flex-end', gap: 10 }}>
+          <Button onClick={onCancel} type="secondary">
+            Cancel
+          </Button>
+          <Button type="primary" htmlType="submit" loading={loading} disabled={isSubmitDisabled}>
+            {editMode ? 'Update' : 'Save'}
+          </Button>
+        </div>
+      </Form>
+    </Modal>
+  );
+};
+
+export default StaffAdd;