Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

UI: Edit page allocated devices #1588

Merged
merged 5 commits into from
Nov 24, 2023
Merged

UI: Edit page allocated devices #1588

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b28e466
Edit page allocated devices tab
Shruti-Apte Nov 8, 2023
160808d
Merge branch 'develop' into allocatedDevices_edit_page
Shruti-Apte Nov 22, 2023
2bc45f1
worked on review commits and modified some code
Shruti-Apte Nov 22, 2023
821a331
worked on review comments
Shruti-Apte Nov 24, 2023
fe29bea
Merge branch 'develop' into allocatedDevices_edit_page
Shruti-Apte Nov 24, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion app/javascript/src/StyledComponents/Button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ const BUTTON_STYLES = {
const SIZES = { small: "small", medium: "medium", large: "large" };

const Button = ({
style = "primary",
style,
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

why the primary value is removed?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Because it was applying primary style to the buttons where it is not needed.
for example in some places we are using <Button> component with it's own modified CSS but if we pass primary as a default value, it's combing the primary css style with modified css.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

By default, the primary style is needed. Update the Button component to overwrite the primary styles with the modified css from the importing component. Please check the Miru docs of the Button component https://docs.miru.so/contributing-guide/component-library/button
What I mean is whenever someone imports the Button component, then by default primary style should be loaded without passing any style prop

size,
disabled = false,
className = "",
Expand Down
101 changes: 101 additions & 0 deletions app/javascript/src/components/Profile/UserDetail/AllocatedDevicesDetails/Edit/EditPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,101 @@
import React from "react";

import { MobileIcon } from "miruIcons";
import "react-phone-number-input/style.css";
import { Button } from "StyledComponents";

import { CustomInputText } from "common/CustomInputText";
import { CustomReactSelect } from "common/CustomReactSelect";

const EditPage = () => (
<div className="mt-4 h-full bg-miru-gray-100 px-10">
prasanthchaduvula marked this conversation as resolved.
Show resolved Hide resolved
<div className="flex border-b border-b-miru-gray-400 py-10">
<div className="flex w-1/5 pr-4">
<MobileIcon
className="mr-2 mt-1 text-miru-dark-purple-1000"
size={16}
weight="bold"
/>
<span className="text-sm font-medium text-miru-dark-purple-1000">
Devices
</span>
</div>
<div className="w-9/12">
<div className="flex flex-row py-3">
<div className="flex w-1/2 flex-col px-2">
<CustomReactSelect
// handleOnChange={}
prasanthchaduvula marked this conversation as resolved.
Show resolved Hide resolved
id="device_type"
label="Device Type"
name=""
// options={}
// value={}
/>
</div>
<div className="flex w-1/2 flex-col px-2">
<CustomInputText
id="model"
label="Model"
name=""
type="text"
value=""
// onChange={}
/>
</div>
</div>
<div className="flex flex-row py-3">
<div className="flex w-1/2 flex-col px-2">
<CustomInputText
id=""
label="Serial Number"
name=""
type="text"
value=""
// onChange={}
/>
</div>
<div className="flex w-1/2 flex-col px-2">
<CustomInputText
id=""
label="Memory"
name=""
type="text"
value=""
// onChange={}
/>
</div>
</div>
<div className="flex flex-row py-3">
<div className="flex w-1/2 flex-col">
<div className="field relative flex w-full flex-col px-2">
<CustomInputText
id=""
label="Graphics"
name=""
type="text"
value=""
/>
</div>
</div>
<div className="flex w-1/2 flex-col">
<div className="field relative flex w-full flex-col px-2">
<CustomInputText
id=""
label="Processor"
name=""
type="text"
value=""
/>
</div>
</div>
</div>
<div className="mt-10 flex w-full items-center justify-between">
<Button className="mx-2 w-full rounded border border-dashed border-miru-dark-purple-200 bg-white py-3 text-center text-base font-bold tracking-widest text-miru-dark-purple-200">
+ Add Another Device
</Button>
</div>
</div>
</div>
</div>
);
export default EditPage;
51 changes: 51 additions & 0 deletions app/javascript/src/components/Profile/UserDetail/AllocatedDevicesDetails/Edit/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/* eslint-disable no-unused-vars */
import React, { Fragment, useState } from "react";

import dayjs from "dayjs";
import utc from "dayjs/plugin/utc";
import { useNavigate } from "react-router-dom";

import Loader from "common/Loader/index";
import { useUserContext } from "context/UserContext";

import EditPage from "./EditPage";

dayjs.extend(utc);

const AllocatedDevicesEdit = () => {
const navigate = useNavigate();
const { isDesktop } = useUserContext();

const [isLoading, setIsLoading] = useState(false);

const handleCancelDetails = () => {
setIsLoading(true);
navigate(`/settings/devices`, { replace: true });
};

return (
<Fragment>
{isDesktop && (
<Fragment>
<div className="flex items-center justify-between bg-miru-han-purple-1000 px-10 py-4">
<h1 className="text-2xl font-bold text-white">Allocated Devices</h1>
<div>
<button
className="mx-1 cursor-pointer rounded-md border border-white bg-miru-han-purple-1000 px-3 py-2 font-bold text-white "
onClick={handleCancelDetails}
>
Cancel
</button>
<button className="mx-1 cursor-pointer rounded-md border bg-white px-3 py-2 font-bold text-miru-han-purple-1000">
Update
</button>
</div>
</div>
{isLoading ? <Loader className="min-h-70v" /> : <EditPage />}
</Fragment>
)}
</Fragment>
);
};

export default AllocatedDevicesEdit;
8 changes: 8 additions & 0 deletions app/javascript/src/components/Profile/UserDetail/AllocatedDevicesDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,7 @@
import React, { useEffect, useState } from "react";

import { useNavigate } from "react-router-dom";

import deviceApi from "apis/devices";
import Loader from "common/Loader/index";
import DetailsHeader from "components/Profile/DetailsHeader";
Expand All @@ -10,6 +12,7 @@ import StaticPage from "./StaticPage";

const AllocatedDevicesDetails = () => {
const { user } = useUserContext();
const navigate = useNavigate();

const [isLoading, setIsLoading] = useState<boolean>(false);
const [devices, setDevices] = useState<Device[]>([]);
Expand All @@ -26,10 +29,15 @@ const AllocatedDevicesDetails = () => {
getDevicesDetail();
}, []);

const handleEdit = () => {
navigate(`/settings/devices/edit`, { replace: true });
};

return (
<div>
<DetailsHeader
showButtons
editAction={handleEdit}
isDisableUpdateBtn={false}
subTitle=""
title="Allocated Devices"
Expand Down
14 changes: 12 additions & 2 deletions app/javascript/src/components/Profile/UserDetail/EmploymentDetails/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { useNavigate } from "react-router-dom";
import teamsApi from "apis/teams";
import Loader from "common/Loader/index";
import { useProfile } from "components/Profile/context/EntryContext";
import DetailsHeader from "components/Profile/DetailsHeader";
import { useUserContext } from "context/UserContext";
import { employmentMapper } from "mapper/teams.mapper";

Expand Down Expand Up @@ -34,7 +35,7 @@ const EmploymentDetails = () => {

return (
<Fragment>
<div className="flex items-center justify-between bg-miru-han-purple-1000 px-10 py-4">
{/* <div className="flex items-center justify-between bg-miru-han-purple-1000 px-10 py-4">
<h1 className="text-2xl font-bold text-white">Employment Details</h1>
<button
className="cursor-pointer rounded-md border border-white bg-miru-han-purple-1000 px-6 py-2 font-bold text-white"
Expand All @@ -44,7 +45,16 @@ const EmploymentDetails = () => {
>
Edit
</button>
</div>
</div> */}
<DetailsHeader
showButtons
isDisableUpdateBtn={false}
subTitle=""
title="Employment Details"
editAction={() =>
navigate(`/settings/employment/edit`, { replace: true })
}
/>
{isLoading ? (
<Loader className="min-h-70v" />
) : (
Expand Down
6 changes: 6 additions & 0 deletions app/javascript/src/components/Profile/routes.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import OrgDetails from "./Organization/Details";
import OrgEdit from "./Organization/Edit";
import PaymentSettings from "./Organization/Payment";
import AllocatedDevicesDetails from "./UserDetail/AllocatedDevicesDetails";
import AllocatedDevicesEdit from "./UserDetail/AllocatedDevicesDetails/Edit";
import UserDetailsEdit from "./UserDetail/Edit";
import EmploymentDetails from "./UserDetail/EmploymentDetails";
import EmploymentDetailsEdit from "./UserDetail/EmploymentDetails/Edit";
Expand Down Expand Up @@ -38,6 +39,11 @@ export const SETTINGS_ROUTES = [
Component: AllocatedDevicesDetails,
authorisedRoles: [ADMIN, OWNER, BOOK_KEEPER, EMPLOYEE],
},
{
path: "/devices/edit",
Component: AllocatedDevicesEdit,
authorisedRoles: [ADMIN, OWNER, BOOK_KEEPER, EMPLOYEE],
},
{
path: "/",
Component: MobileNav,
Expand Down
Loading