Skip to content

Commit

Permalink
feat: Added flag items layout
Browse files Browse the repository at this point in the history
  • Loading branch information
dev-bre committed Jul 7, 2023
1 parent b8280b4 commit 351091a
Show file tree
Hide file tree
Showing 11 changed files with 126 additions and 30 deletions.
4 changes: 1 addition & 3 deletions db.switchfeat.flags
Original file line number Diff line number Diff line change
@@ -1,3 +1 @@
{"name":"aa","description":"bb","createdOn":{"$$date":1688242303554},"status":false,"updatedOn":{"$$date":1688242303554},"_id":"2tIWq8geXQN0MEH3"}
{"name":"aaa","description":"ddd","createdOn":{"$$date":1688242198336},"status":false,"updatedOn":{"$$date":1688242198337},"_id":"Iuk6NNE4vI8kN5cA"}
{"name":"key1","description":"dcdcdcd","createdOn":{"$$date":1688242491814},"status":false,"updatedOn":{"$$date":1688242491814},"_id":"mTnayQkL0tMgLmKn"}

7 changes: 4 additions & 3 deletions packages/api/src/routes/flagsRoutes.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import multer from 'multer';
export const flagRoutes = Router();
import * as flagsService from "../services/flagsService";
import * as auth from "../managers/auth/passportAuth" ;
import { dateHelper } from "@switchfeat/core";
import { dateHelper, entityHelper } from "@switchfeat/core";

const upload = multer();

Expand Down Expand Up @@ -56,7 +56,8 @@ flagRoutes.post("/api/flags/", upload.any(), auth.isAuthenticated, async (req :
description: flagDescription,
createdOn: dateHelper.utcNow().toJSDate(),
status: !!flagStatus,
updatedOn: dateHelper.utcNow().toJSDate()
updatedOn: dateHelper.utcNow().toJSDate(),
key: entityHelper.generateKey(flagName)
});

res.json({
Expand All @@ -66,7 +67,7 @@ flagRoutes.post("/api/flags/", upload.any(), auth.isAuthenticated, async (req :
} else {
res.json({
success: false,
errorCode: "error_project_alreadysaved"
errorCode: "error_flag_alreadysaved"
});
}
});
6 changes: 6 additions & 0 deletions packages/core/src/helpers/entityHelper.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@

export const generateKey = (val: string) => {
return val.toLowerCase()
.replace(/ /g, "-")
.replace(/[^\w-]+/g, "");
}
3 changes: 2 additions & 1 deletion packages/core/src/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,4 +5,5 @@ export { UserModel } from "./models/userModel";
export * as mongoManager from "./managers/data/mongoManager" ;
export * as neDbManager from "./managers/data/neDBManager" ;
export * from "./config/keys";
export * as dateHelper from "./helpers/dateHelper"
export * as dateHelper from "./helpers/dateHelper"
export * as entityHelper from "./helpers/entityHelper"
1 change: 1 addition & 0 deletions packages/core/src/models/flagModel.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ import { ObjectId } from 'mongodb';
export interface FlagModel {
id?: ObjectId,
name: string;
key: string;
description?: string;
createdOn: Date;
updatedOn: Date;
Expand Down
64 changes: 58 additions & 6 deletions packages/ui/src/components/FlagsItem.tsx
Original file line number Diff line number Diff line change
@@ -1,8 +1,60 @@
import { Switch } from "@headlessui/react";
import { useState } from "react";
import { classNames } from "../helpers/classHelper";
import { FlagModel } from "../models/FlagModel";
import * as dateHelper from "../helpers/dateHelper";

export const FlagsItem: React.FC<FlagModel> = (props) => {

return(<>

</>);
}
export const FlagsItem: React.FC<{ flag: FlagModel }> = (props) => {
const [enabled, setEnabled] = useState(false)

return (


<div className="bg-white shadow sm:rounded-lg m-4">
<Switch.Group as="div" className="px-4 py-5 sm:p-6">

<div className=" sm:flex sm:items-start sm:justify-between">
<div className="max-w-xl text-base text-gray-500">
<Switch.Label as="h3" className="text-base font-semibold leading-6 text-gray-900">
{props.flag.name}
</Switch.Label>
<div className="mt-3">
<Switch.Description>
{props.flag.description}
</Switch.Description>
</div>
<div className="mt-3">
<code className="bg-slate-100 px-2 py-1 rounded-md text-sm">{props.flag.key}</code>
</div>


</div>
<div className=" sm:ml-6 sm:mt-0 sm:flex sm:flex-shrink-0 sm:items-center">
<div className="flex flex-col">
<div className="text-base text-gray-500"> {dateHelper.formatDateTime(props.flag.createdOn)}</div>
<div className="text-right">
<Switch
checked={enabled}
onChange={setEnabled}
className={classNames(
enabled ? 'bg-green-600' : 'bg-gray-200',
'mt-3 relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2',
'border-transparent transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-green-600 focus:ring-offset-2'
)}
>
<span
aria-hidden="true"
className={classNames(
enabled ? 'translate-x-5' : 'translate-x-0',
'inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out'
)}
/>
</Switch>
</div>
</div>
</div>
</div>
</Switch.Group>
</div>
);
}
13 changes: 10 additions & 3 deletions packages/ui/src/components/FlagsList.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,11 @@
export const FlagsList: React.FC = () => {

return(<></>);
import { FlagModel } from "../models/FlagModel";
import { FlagsItem } from "./FlagsItem";

export const FlagsList: React.FC<{ flags: FlagModel[] }> = (props) => {

return (<>
{props.flags.map(flagItem => (
<FlagsItem flag={flagItem} />
))}
</>);
}
27 changes: 27 additions & 0 deletions packages/ui/src/helpers/dateHelper.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import { DateTime } from "luxon";

export const formatDateTime = (dateStr: string | undefined) => {

if (dateStr === undefined) {
return "";
}

return DateTime.fromISO(dateStr).toFormat("MMM dd, yyyy @ hh:mm a");
};

export const utcNow = () : DateTime=> {
return DateTime.utc();
}

export const getDateWithOffset = (nrDays: number, start: DateTime) : DateTime=> {
return start.minus({"days": nrDays});
}

export const diffFromUtcInDays = (date: string | undefined) => {

if (date === undefined) {
return;
}

return DateTime.fromISO(date).diff( DateTime.utc(), ["days"]).toObject().days?.toFixed(0);
};
6 changes: 3 additions & 3 deletions packages/ui/src/models/FlagModel.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
import { DateTime } from "luxon";

export interface FlagModel {
name: string;
description?: string;
createdOn: DateTime;
updatedOn: DateTime;
createdOn: string;
updatedOn: string;
status: boolean;
key: string;
}
7 changes: 5 additions & 2 deletions packages/ui/src/pages/Dashboard.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,8 @@ export const Dashboard: React.FC = (props) => {
};

useEffect(() => {


fetch(`${keys.CLIENT_HOME_PAGE_URL}/api/flags/`, {
method: "GET",
credentials: "include",
Expand All @@ -38,7 +40,8 @@ export const Dashboard: React.FC = (props) => {
description: item.description,
status: item.status,
createdOn: item.createdOn,
updatedOn: item.updatedOn
updatedOn: item.updatedOn,
key: item.key
});
});

Expand All @@ -58,7 +61,7 @@ export const Dashboard: React.FC = (props) => {
{flags.length > 0 &&
<>
<SectionHeader title="Flags"> <CreateFlag refreshFlagsList={handleRefreshFlags} /></SectionHeader>
<FlagsList />
<FlagsList flags={flags} />
</>
}
</>
Expand Down
18 changes: 9 additions & 9 deletions packages/ui/src/pages/DashboardLayout.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -89,14 +89,14 @@ export const DashboardLayout: React.FC<{ children: ReactNode }> = (props) => {
href={item.href}
className={classNames(
item.current
? 'bg-gray-50 text-indigo-600'
: 'text-gray-700 hover:text-indigo-600 hover:bg-gray-50',
? 'bg-gray-50 text-green-600'
: 'text-gray-700 hover:text-green-600 hover:bg-gray-50',
'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
)}
>
<item.icon
className={classNames(
item.current ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-600',
item.current ? 'text-green-600' : 'text-gray-400 group-hover:text-green-600',
'h-6 w-6 shrink-0'
)}
aria-hidden="true"
Expand All @@ -111,10 +111,10 @@ export const DashboardLayout: React.FC<{ children: ReactNode }> = (props) => {
<li className="mt-auto">
<a
href="/dashboard/settings"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-green-600"
>
<Cog6ToothIcon
className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-green-600"
aria-hidden="true"
/>
Settings
Expand Down Expand Up @@ -150,14 +150,14 @@ export const DashboardLayout: React.FC<{ children: ReactNode }> = (props) => {
href={item.href}
className={classNames(
item.current
? 'bg-gray-50 text-indigo-600'
? 'bg-gray-50 text-green-600'
: 'text-gray-700 hover:text-indigo-600 hover:bg-gray-50',
'group flex gap-x-3 rounded-md p-2 text-sm leading-6 font-semibold'
)}
>
<item.icon
className={classNames(
item.current ? 'text-indigo-600' : 'text-gray-400 group-hover:text-indigo-600',
item.current ? 'text-green-600' : 'text-gray-400 group-hover:text-green-600',
'h-6 w-6 shrink-0'
)}
aria-hidden="true"
Expand All @@ -172,10 +172,10 @@ export const DashboardLayout: React.FC<{ children: ReactNode }> = (props) => {
<li className="mt-auto">
<a
href="/dashboard/settings"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-indigo-600"
className="group -mx-2 flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-green-600"
>
<Cog6ToothIcon
className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-green-600"
aria-hidden="true"
/>
Settings
Expand Down

0 comments on commit 351091a

Please sign in to comment.