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

Update/create org flow #909

Merged
merged 10 commits into from
Nov 15, 2023
Merged

Update/create org flow #909

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
cf76703
update: updated the UI flow for add organization
tobi-bams Nov 8, 2023
f65dfd9
update: image can be dragged and dropped, also new organization can b…
tobi-bams Nov 9, 2023
935bed1
Merge branch 'master' into update/create-org-flow
tobi-bams Nov 13, 2023
57862a7
update: add organization and upload image from browser directly
tobi-bams Nov 13, 2023
e035fa4
fix: fixed file_uploader not returning link
tobi-bams Nov 13, 2023
e70816b
update: added click on the upload button
tobi-bams Nov 13, 2023
a97ac40
update: styled the org list component properly
tobi-bams Nov 13, 2023
40256c4
Merge branch 'master' into update/create-org-flow
tobi-bams Nov 13, 2023
556ec0f
update: reverse a change made earlier
tobi-bams Nov 13, 2023
938bff6
Merge branch 'master' into update/create-org-flow
tobi-bams Nov 14, 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
3 changes: 3 additions & 0 deletions frontend/app/public/static/open_in_new_grey.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
9 changes: 9 additions & 0 deletions frontend/app/public/static/upload.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
210 changes: 68 additions & 142 deletions frontend/app/src/people/widgetViews/OrganizationView.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,24 +1,20 @@
import React, { useState, useEffect, useRef, useCallback } from 'react';
import React, { useState, useEffect, useCallback } from 'react';
import styled from 'styled-components';
import PageLoadSpinner from 'people/utils/PageLoadSpinner';
import NoResults from 'people/utils/OrgNoResults';
import { useStores } from 'store';
import { Organization } from 'store/main';
import { Wrap } from 'components/form/style';
import { EuiGlobalToastList } from '@elastic/eui';
import { Button } from 'components/common';
import { useIsMobile } from 'hooks/uiHooks';
import { Formik } from 'formik';
import { FormField, validator } from 'components/form/utils';
import { Modal } from '../../components/common';
import avatarIcon from '../../public/static/profile_avatar.svg';
import { colors } from '../../config/colors';
import { widgetConfigs } from '../utils/Constants';
import Input from '../../components/form/inputs';
import { Person } from '../../store/main';
import OrganizationDetails from './OrganizationDetails';
import ManageButton from './organization/ManageOrgButton';
import OrganizationBudget from './organization/OrgBudget';
import AddOrganization from './organization/AddOrganization';

const color = colors['light'];

Expand All @@ -31,7 +27,10 @@ const Container = styled.div`
margin: -20px -30px;

.organizations {
padding: 20px 30px;
padding: 1.25rem 2.5rem;
@media only screen and (max-width: 800px) {
padding: 1.25rem;
}
}
`;

Expand All @@ -40,20 +39,50 @@ const OrganizationWrap = styled.div`
flex-direction: row;
width: 100%;
background: white;
padding: 25px 30px;
border-radius: 6px;
padding: 1.5rem;
border-radius: 0.375rem;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.15);
@media only screen and (max-width: 800px) {
padding: 15px 0px;
padding: 1rem 0px;
}
@media only screen and (max-width: 700px) {
padding: 12px 0px;
padding: 0.75rem 0px;
margin-bottom: 10px;
}
@media only screen and (max-width: 500px) {
padding: 0px;
}
`;

const ButtonIconLeft = styled.button`
display: flex;
align-items: center;
justify-content: center;
height: 2.5rem;
column-gap: 0.75rem;
padding: 0.5rem 0.75rem;
color: #5f6368;
font-family: 'Barlow';
font-size: 0.875rem;
font-style: normal;
font-weight: 500;
line-height: 0rem;
letter-spacing: 0.00875rem;
border-radius: 0.375rem;
border: 1px solid #d0d5d8;
background: #fff;
box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.06);

:disabled {
cursor: not-allowed;
}
`;

const IconImg = styled.img`
width: 1.25rem;
height: 1.25rem;
`;

const OrganizationData = styled.div`
display: flex;
align-items: center;
Expand All @@ -69,27 +98,29 @@ const OrganizationData = styled.div`
`;

const OrganizationImg = styled.img`
width: 65px;
height: 65px;
width: 4rem;
height: 4rem;
border-radius: 50%;
object-fit: cover;
@media only screen and (max-width: 700px) {
width: 55px;
height: 55px;
}
@media only screen and (max-width: 500px) {
width: 48px;
height: 48px;
width: 3rem;
height: 3rem;
}
@media only screen and (max-width: 470px) {
width: 60px;
height: 60px;
width: 3.75rem;
height: 3.75rem;
}
`;

const OrganizationContainer = styled.div`
display: flex;
flex-direction: column;
width: 100%;
gap: 15px;
gap: 1rem;
`;

const OrgHeadWrap = styled.div`
Expand All @@ -100,8 +131,12 @@ const OrgHeadWrap = styled.div`
`;

const OrgText = styled.div`
font-size: 1.4rem;
font-weight: bold;
color: #3c3f41;
font-family: 'Barlow';
font-size: 1.5rem;
font-style: normal;
font-weight: 600;
line-height: 1.1875rem;
@media only screen and (max-width: 700px) {
font-size: 1.1rem;
}
Expand All @@ -120,50 +155,18 @@ const OrganizationActionWrap = styled.div`
}
`;

const AddOrgButton = styled(Button)`
width: 100%;
border-radius: 10px;
height: 45;
margin-top: 15px;
`;

const Organizations = (props: { person: Person }) => {
const [loading, setIsLoading] = useState<boolean>(false);
const [isOpen, setIsOpen] = useState<boolean>(false);
const [detailsOpen, setDetailsOpen] = useState<boolean>(false);
const [organization, setOrganization] = useState<Organization>();
const [disableFormButtons, setDisableFormButtons] = useState(false);
const [toasts, setToasts]: any = useState([]);
const { main, ui } = useStores();
const isMobile = useIsMobile();
const config = widgetConfigs['organizations'];
const formRef = useRef(null);
const isMyProfile = ui?.meInfo?.pubkey === props?.person?.owner_pubkey;

const user_pubkey = ui.meInfo?.owner_pubkey;

const schema = [...config.schema];

const initValues = {
name: '',
img: '',
show: false
};

function addToast(title: string) {
setToasts([
{
id: '1',
title,
color: 'danger'
}
]);
}

function removeToast() {
setToasts([]);
}

const getUserOrganizations = useCallback(async () => {
setIsLoading(true);
if (ui.selectedPerson) {
Expand All @@ -185,19 +188,6 @@ const Organizations = (props: { person: Person }) => {
setDetailsOpen(false);
};

const onSubmit = async (body: any) => {
setIsLoading(true);
body.owner_pubkey = ui.meInfo?.owner_pubkey;
const res = await main.addOrganization(body);
if (res.status === 200) {
await getUserOrganizations();
} else {
addToast('Error: could not create organization');
}
closeHandler();
setIsLoading(false);
};

// renders org as list item
const orgUi = (org: any, key: number) => {
const btnDisabled = (!org.bounty_count && org.bount_count !== 0) || !org.uuid;
Expand All @@ -217,18 +207,13 @@ const Organizations = (props: { person: Person }) => {
}}
/>
)}
<Button
<ButtonIconLeft
disabled={btnDisabled}
color={!btnDisabled ? 'white' : 'grey'}
text="View Bounties"
endingIcon="open_in_new"
onClick={() => window.open(`/org/bounties/${org.uuid}`, '_target')}
style={{
height: 40,
color: '#000000',
borderRadius: 10
}}
/>
>
View Bounties
<IconImg src="/static/open_in_new_grey.svg" alt="open_in_new_tab" />
</ButtonIconLeft>
</OrganizationActionWrap>
</OrganizationData>
</OrganizationWrap>
Expand Down Expand Up @@ -292,7 +277,9 @@ const Organizations = (props: { person: Person }) => {
zIndex: 20,
...(config?.modalStyle ?? {}),
maxHeight: '100%',
borderRadius: '10px'
borderRadius: '10px',
minWidth: isMobile ? '100%' : '34.4375rem',
minHeight: isMobile ? '100%' : '22.1875rem'
}}
overlayClick={closeHandler}
bigCloseImage={closeHandler}
Expand All @@ -303,76 +290,15 @@ const Organizations = (props: { person: Person }) => {
borderRadius: '50%'
}}
>
<Formik
initialValues={initValues || {}}
kevkevinpal marked this conversation as resolved.
Show resolved Hide resolved
onSubmit={onSubmit}
innerRef={formRef}
validationSchema={validator(schema)}
>
{({
setFieldTouched,
handleSubmit,
values,
setFieldValue,
errors,
initialValues
}: any) => (
<Wrap newDesign={true}>
<h5>Add new organization</h5>
<div className="SchemaInnerContainer">
{schema.length &&
schema.map((item: FormField) => (
<Input
{...item}
key={item.name}
values={values}
errors={errors}
value={values[item.name]}
error={errors[item.name]}
initialValues={initialValues}
deleteErrors={() => {
if (errors[item.name]) delete errors[item.name];
}}
handleChange={(e: any) => {
setFieldValue(item.name, e);
}}
setFieldValue={(e: any, f: any) => {
setFieldValue(e, f);
}}
setFieldTouched={setFieldTouched}
handleBlur={() => setFieldTouched(item.name, false)}
handleFocus={() => setFieldTouched(item.name, true)}
setDisableFormButtons={setDisableFormButtons}
borderType={'bottom'}
imageIcon={true}
style={
item.name === 'github_description' && !values.ticket_url
? {
display: 'none'
}
: undefined
}
/>
))}

<AddOrgButton
disabled={disableFormButtons || loading}
onClick={() => {
handleSubmit();
}}
loading={loading}
color={'primary'}
text={'Add Organization'}
/>
</div>
</Wrap>
)}
</Formik>
<AddOrganization
closeHandler={closeHandler}
getUserOrganizations={getUserOrganizations}
owner_pubkey={ui.meInfo?.owner_pubkey}
/>
</Modal>
)}
</>
)}
<EuiGlobalToastList toasts={toasts} dismissToast={removeToast} toastLifeTimeMs={5000} />
</Container>
);
};
Expand Down
Loading
Loading