mirrors/oneuptime
1
0
Fork 0
mirror of https://github.com/OneUptime/oneuptime synced 2024-11-22 15:24:55 +00:00
Code Issues Packages Projects Releases Wiki Activity

add project

Browse Source
This commit is contained in:
Simon Larsen 2023-09-07 14:16:14 +05:30
parent 6bbb1ff71f
commit 47bc834fa7
No known key found for this signature in database
GPG Key ID: AB45983AA9C81CDE
1 changed files with 170 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

209
AdminDashboard/src/Pages/Projects/Index.tsx
View File

@ -1,6 +1,6 @@
import Route from 'Common/Types/API/Route';
import Page from 'CommonUI/src/Components/Page/Page';
import React, { FunctionComponent, ReactElement } from 'react';
import React, { FunctionComponent, ReactElement, useEffect, useState } from 'react';
import PageMap from '../../Utils/PageMap';
import RouteMap, { RouteUtil } from '../../Utils/RouteMap';
import ModelTable from 'CommonUI/src/Components/ModelTable/ModelTable';
@ -9,8 +9,163 @@ import FormFieldSchemaType from 'CommonUI/src/Components/Forms/Types/FormFieldSc
import Navigation from 'CommonUI/src/Utils/Navigation';
import Project from 'Model/Models/Project';
import User from 'Model/Models/User';
import { BILLING_ENABLED, getAllEnvVars } from 'CommonUI/src/Config';
import Field from 'CommonUI/src/Components/Forms/Types/Field';
import SubscriptionPlan from 'Common/Types/Billing/SubscriptionPlan';
import { RadioButton } from 'CommonUI/src/Components/RadioButtons/RadioButtons';
import Toggle from 'CommonUI/src/Components/Toggle/Toggle';
import AdminModelAPI from '../../Utils/ModelAPI';
const Projects: FunctionComponent = (): ReactElement => {
const [isSubscriptionPlanYearly, setIsSubscriptionPlanYearly] =
useState<boolean>(true);
useEffect(() => {
refreshFields();
}, [isSubscriptionPlanYearly]);
const refreshFields: Function = (): void => {
let formFields: Array<Field<Project>> = [
{
field: {
name: true,
},
validation: {
minLength: 4,
},
fieldType: FormFieldSchemaType.Text,
placeholder: 'My Project',
description: 'Pick a friendly name.',
title: 'Project Name',
required: true,
stepId: BILLING_ENABLED ? 'basic' : undefined,
},
{
field: {
createdByUser: true,
},
title: 'Owner',
description: "Who would you like the owner of this project to be? If you leave this blank - you will be the owner of the project",
fieldType: FormFieldSchemaType.Dropdown,
stepId: BILLING_ENABLED ? 'basic' : undefined,
dropdownModal: {
type: User,
labelField: 'email',
valueField: '_id',
},
},
];
if (BILLING_ENABLED) {
formFields = [
...formFields,
{
field: {
paymentProviderPlanId: true,
},
stepId: 'plan',
validation: {
minLength: 6,
},
footerElement: getFooter(),
fieldType: FormFieldSchemaType.RadioButton,
radioButtonOptions: SubscriptionPlan.getSubscriptionPlans(
getAllEnvVars()
).map((plan: SubscriptionPlan): RadioButton => {
let description: string = plan.isCustomPricing()
? `Our sales team will contact you soon.`
: `Billed ${isSubscriptionPlanYearly
? 'yearly'
: 'monthly'
}. ${plan.getTrialPeriod() > 0
? `Free ${plan.getTrialPeriod()} days trial.`
: ''
}`;
if (
isSubscriptionPlanYearly &&
plan.getYearlySubscriptionAmountInUSD() === 0
) {
description = 'This plan is free, forever. ';
}
if (
!isSubscriptionPlanYearly &&
plan.getMonthlySubscriptionAmountInUSD() === 0
) {
description = 'This plan is free, forever. ';
}
return {
value: isSubscriptionPlanYearly
? plan.getYearlyPlanId()
: plan.getMonthlyPlanId(),
title: plan.getName(),
description: description,
sideTitle: plan.isCustomPricing()
? 'Custom Price'
: isSubscriptionPlanYearly
? '$' +
plan
.getYearlySubscriptionAmountInUSD()
.toString() +
'/mo billed yearly'
: '$' +
plan
.getMonthlySubscriptionAmountInUSD()
.toString(),
sideDescription: plan.isCustomPricing()
? ''
: isSubscriptionPlanYearly
? `~ $${plan.getYearlySubscriptionAmountInUSD() *
12
} per user / year`
: `/month per user`,
};
}),
title: 'Please select a plan.',
required: true,
},
{
field: {
paymentProviderPromoCode: true,
},
fieldType: FormFieldSchemaType.Text,
placeholder: 'Promo Code (Optional)',
description: 'If you have a coupon code, enter it here.',
title: 'Promo Code',
required: false,
stepId: 'plan',
disabled: false,
},
];
}
setFields(formFields);
};
const [fields, setFields] = useState<Array<Field<Project>>>([]);
const getFooter: Function = (): ReactElement => {
if (!BILLING_ENABLED) {
return <></>;
}
return (
<Toggle
title="Yearly Plan"
initialValue={isSubscriptionPlanYearly}
description="(Save 20%)"
onChange={(value: boolean) => {
setIsSubscriptionPlanYearly(value);
}}
/>
);
};
return (
<Page
title={'Projects'}
@ -31,6 +186,7 @@ const Projects: FunctionComponent = (): ReactElement => {
>
<ModelTable<Project>
modelType={Project}
modelAPI={AdminModelAPI}
id="projects-table"
isDeleteable={false}
isEditable={false}
@ -42,45 +198,20 @@ const Projects: FunctionComponent = (): ReactElement => {
description: 'Here is a list of proejcts in OneUptime.',
}}
showViewIdButton={true}
formSteps={[
{
title: 'Basic Info',
id: 'project-info',
},
{
title: 'Owner',
id: 'owners',
},
]}
formSteps={BILLING_ENABLED
? [
{
title: 'Basic',
id: 'basic',
},
{
title: 'Select Plan',
id: 'plan',
},
]
: undefined}
noItemsMessage={'No projects found.'}
formFields={[
{
field: {
name: true,
},
title: 'Name',
stepId: 'project-info',
fieldType: FormFieldSchemaType.Text,
required: true,
placeholder: 'Project Name',
validation: {
minLength: 4,
},
},
{
field: {
createdByUser: true,
},
title: 'Owner',
stepId: 'owners',
fieldType: FormFieldSchemaType.Dropdown,
dropdownModal: {
type: User,
labelField: 'email',
valueField: '_id',
},
},
]}
formFields={fields}
showRefreshButton={true}
showFilterButton={true}
viewPageRoute={Navigation.getCurrentRoute()}