Edit allocated devices: API Integration

app/controllers/internal_api/v1/users/devices_controller.rb

@@ -9,22 +9,15 @@ def index
     render :index, locals: { devices: }, status: :ok
   end
 
-  def create
-    authorize @user, policy_class: Users::DevicePolicy
-    device = @user.devices.new(device_params.merge(issued_to: @user, issued_by: @user.current_workspace))
-    device.save!
-    render :create, locals: { device: }, status: :ok
-  end
-
   def show
     authorize device, policy_class: Users::DevicePolicy
     render :show, locals: { device: }, status: :ok
   end
 
-  def update
-    authorize device, policy_class: Users::DevicePolicy
-    device.update!(device_params)
-    render :update, locals: { device: }, status: :ok
+  def create
+    authorize @user, policy_class: Users::DevicePolicy
+    BulkDevicesService.new(device_params, set_user).process
+    render json: { notice: I18n.t("devices.update.success") }
   end
 
   private
@@ -39,7 +32,11 @@ def device
 
     def device_params
       params.require(:device).permit(
-        :device_type, :name, :serial_number, specifications: {}
+        add_devices: [:device_type, :name, :serial_number, :is_insured, :insurance_bought_date, :insurance_expiry_date,
+                      specifications: [:processor, :ram, :graphics]],
+        update_devices: [:id, :device_type, :name, :serial_number, :is_insured, :insurance_bought_date,
+                         :insurance_expiry_date, specifications: [:processor, :ram, :graphics]],
+        remove_devices: []
       )
     end
 end

app/javascript/src/apis/devices.ts

@@ -2,6 +2,9 @@ import axios from "./api";
 
 const get = async userId => axios.get(`/users/${userId}/devices`);
 
-const deviceApi = { get };
+const post = async (userId, payload) =>
+  axios.post(`/users/${userId}/devices`, payload);
+
+const deviceApi = { get, post };
 
 export default deviceApi;

app/javascript/src/common/CustomDatePicker/index.tsx

@@ -15,6 +15,8 @@ const CustomDatePicker = ({
   setVisibility,
   wrapperRef,
   dateFormat,
+  maxDate,
+  minDate,
 }: CustomDatePickerProps) => {
   const range = (start, end) => {
     const ans = [];
@@ -59,6 +61,8 @@ const CustomDatePicker = ({
       calendarClassName="miru-calendar"
       selected={parseDate(date)}
       wrapperClassName="datePicker"
+      maxDate={maxDate ? new Date(maxDate) : null}
+      minDate={minDate ? new Date(minDate) : null}
       renderCustomHeader={({
         date,
         changeYear,
@@ -113,6 +117,8 @@ type CustomDatePickerProps = {
   setVisibility?: (visibility: boolean) => any;
   wrapperRef?: any;
   dateFormat?: any;
+  maxDate?: string;
+  minDate?: string;
 };
 
 export default CustomDatePicker;

app/javascript/src/common/CustomToggle.tsx

@@ -1,18 +1,30 @@
 import React from "react";
 
-const CustomToggle = (
-  { isChecked = false, setIsChecked, toggleCss, id, onToggle = () => {} } // eslint-disable-line
-) => (
+type customToggleProps = {
+  isChecked: boolean;
+  setIsChecked?: React.Dispatch<React.SetStateAction<boolean>>;
+  toggleCss: string;
+  id: number | string;
+  onToggle?: (e?: any) => void; // eslint-disable-line
+};
+
+const CustomToggle = ({
+  isChecked = false,
+  setIsChecked,
+  toggleCss,
+  id,
+  onToggle,
+}: customToggleProps) => (
   <div className={`customToggle__container ${toggleCss}`}>
     <label>
       <input
         checked={isChecked}
         className="customToggle"
-        id={id}
+        id={id.toString()}
         type="checkbox"
-        onChange={() => {
-          onToggle();
-          setIsChecked(!isChecked);
+        onChange={e => {
+          onToggle(e);
+          setIsChecked && setIsChecked(!isChecked);
         }}
       />
       <div>

app/javascript/src/common/DatePickerWithInputBox/index.tsx

@@ -0,0 +1,59 @@
+import React from "react";
+
+import dayjs from "dayjs";
+import { CalendarIcon } from "miruIcons";
+
+import CustomDatePicker from "common/CustomDatePicker";
+import { CustomInputText } from "common/CustomInputText";
+import { ErrorSpan } from "common/ErrorSpan";
+
+const DatePickerWithInputBox = ({
+  ref,
+  handleDatePickerVisibility,
+  isDatePickerVisible,
+  dateFormat,
+  isError,
+  errorMessage,
+  handleDateChange,
+  date,
+  id,
+  label,
+  minDate = null,
+  maxDate = null,
+}) => (
+  <div className="flex w-1/2 cursor-pointer flex-col" ref={ref}>
+    <div
+      className="field relative flex w-full flex-col px-2"
+      id={id}
+      onClick={handleDatePickerVisibility}
+    >
+      <CustomInputText
+        disabled
+        id={id}
+        label={label}
+        name={id}
+        type="text"
+        value={date ? dayjs(date).format(dateFormat) : ""}
+      />
+      <CalendarIcon
+        className="absolute top-0 bottom-0 right-4 my-auto"
+        color="#5B34EA"
+        size={20}
+      />
+    </div>
+    {isError && (
+      <ErrorSpan className="text-xs text-red-600" message={errorMessage} />
+    )}
+    {isDatePickerVisible && (
+      <CustomDatePicker
+        date={date || dayjs()}
+        dateFormat="YYYY-MM-DD"
+        handleChange={handleDateChange}
+        maxDate={maxDate}
+        minDate={minDate}
+      />
+    )}
+  </div>
+);
+
+export default DatePickerWithInputBox;

app/javascript/src/components/Profile/Personal/Devices/Device.ts

@@ -1,7 +1,11 @@
 export interface Device {
+  id: "";
   device_type: "laptop" | "mobile" | "";
   name: string;
   serial_number: string;
+  insurance_activation_date: string;
+  insurance_expiry_date: string;
+  is_insured: boolean;
   specifications: {
     ram: string;
     graphics: string;