feature/feature/IO-3554-Form-Row-Layout - Responsive overhaul

client/src/components/shop-employees/shop-employees-form.component.jsx

@@ -1,7 +1,8 @@
 import { DeleteFilled } from "@ant-design/icons";
 import { useApolloClient, useMutation, useQuery } from "@apollo/client/react";
 import { useTreatmentsWithConfig } from "@splitsoftware/splitio-react";
-import { Button, Card, Form, Input, InputNumber, Select, Switch, Table } from "antd";
+import { Button, Card, Form, Input, InputNumber, Select, Switch } from "antd";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 import { useForm } from "antd/es/form/Form";
 import queryString from "query-string";
 import { useEffect } from "react";
@@ -380,9 +381,10 @@ export function ShopEmployeesFormComponent({ bodyshop }) {
         </Form.List>
       </Form>
 
-      <Table
+      <ResponsiveTable
         title={() => <ShopEmployeeAddVacation employee={data && data.employees_by_pk} />}
         columns={columns}
+        mobileColumnKeys={["start", "length", "actions"]}
         rowKey={"id"}
         dataSource={data?.employees_by_pk?.employee_vacations ?? []}
       />

client/src/components/shop-employees/shop-employees-list.component.jsx

@@ -1,9 +1,10 @@
-import { Button, Table } from "antd";
+import { Button } from "antd";
 import queryString from "query-string";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
 import { useLocation, useNavigate } from "react-router-dom";
 import { alphaSort } from "../../utils/sorters";
+import ResponsiveTable from "../responsive-table/responsive-table.component";
 
 export default function ShopEmployeesListComponent({ loading, employees }) {
   const { t } = useTranslation();
@@ -89,7 +90,7 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
   ];
   return (
     <div>
-      <Table
+      <ResponsiveTable
         title={() => {
           return (
             <Button
@@ -106,6 +107,7 @@ export default function ShopEmployeesListComponent({ loading, employees }) {
         loading={loading}
         pagination={{ placement: "top" }}
         columns={columns}
+        mobileColumnKeys={["employee_number", "employee_name", "active"]}
         rowKey="id"
         dataSource={employees}
         rowSelection={{