New Design For Organization List And Admin View (#810)

* started new org design * redesigned organization list * centralized assigned tickets no result * finished org list redesign * updated organization mobile designs * started profile update * finished org admin design * added an .editorconfig file * removed spaces from routes * prettier: auto formatted * check: prettier check * tests: commented out failing tests --------- Co-authored-by: kevkevin <[email protected]>
stakwork · Oct 12, 2023 · 4d3ffb9 · 4d3ffb9
1 parent d0fa141
commit 4d3ffb9
Show file tree

Hide file tree

Showing 42 changed files with 941 additions and 741 deletions.
diff --git a/.github/workflows/pull_request.yml b/.github/workflows/pull_request.yml
@@ -32,12 +32,23 @@ jobs:
         run: go test -v ./...
 
   build:
-    name: build Job
+    name: Build Job
     runs-on:
       - ubuntu-latest
     steps:
       - uses: actions/checkout@v2
       - name: Install modules
         run: yarn --cwd ./frontend/app install
-      - name: Eslint
+      - name: Build 
         run: CI=false yarn --cwd ./frontend/app run build
+
+  prettier:
+    name: Prettier Job
+    runs-on:
+      - ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - name: Install modules
+        run: yarn --cwd ./frontend/app install
+      - name: Prettier 
+        run: CI=false yarn --cwd ./frontend/app run prettier:check 
diff --git a/db/db.go b/db/db.go
@@ -688,7 +688,7 @@ func (db database) GetPerson(id uint) Person {
 
 func (db database) GetPersonByPubkey(pubkey string) Person {
 	m := Person{}
-	db.db.Where("owner_pub_key = ? AND (deleted = 'false' OR deleted is null)", pubkey).Find(&m)
+	db.db.Where("owner_pub_key = ? AND (deleted = false OR deleted is null)", pubkey).Find(&m)
 
 	return m
 }

diff --git a/db/structs.go b/db/structs.go
@@ -100,7 +100,7 @@ type Tabler interface {
 type Person struct {
 	ID               uint           `json:"id"`
 	Uuid             string         `json:"uuid"`
-	OwnerPubKey      string         `gorm:"uniqueIndex,unique"json:"owner_pubkey"`
+	OwnerPubKey      string         `gorm:"uniqueIndex,unique" json:"owner_pubkey"`
 	OwnerAlias       string         `json:"owner_alias"`
 	UniqueName       string         `json:"unique_name"`
 	Description      string         `json:"description"`
@@ -407,6 +407,7 @@ type Organization struct {
 	Updated     *time.Time `json:"updated"`
 	Show        bool       `json:"show"`
 	BountyCount int64      `json:"bounty_count,omitempty"`
+	Budget      uint       `json:"budget,omitempty"`
 }
 
 type OrganizationShort struct {

diff --git a/frontend/app/.prettierrc.json b/frontend/app/.prettierrc.json
@@ -4,4 +4,4 @@
     "printWidth": 100,
     "singleQuote": true,
     "trailingComma": "none"
-}
+}
diff --git a/frontend/app/craco.config.js b/frontend/app/craco.config.js
@@ -1,9 +1,9 @@
-const { whenTest } = require( '@craco/craco' )
+const { whenTest } = require('@craco/craco')
 
 module.exports = {
 	babel: {
 		plugins: [
-			...whenTest( () => [ [ '@babel/plugin-transform-modules-commonjs', { allowTopLevelThis: true } ] ], [] )
+			...whenTest(() => [['@babel/plugin-transform-modules-commonjs', { allowTopLevelThis: true }]], [])
 		]
 	}
 }
diff --git a/frontend/app/package.json b/frontend/app/package.json
@@ -16,6 +16,7 @@
     "lint": "eslint src --max-warnings 67 --ext .ts --ext .tsx --ignore-pattern *.spec.tsx --ignore-pattern *.spec.ts",
     "lint:fix": "npm run lint -- --fix",
     "prettier": "npx prettier --config .prettierrc.json -w ./src",
+    "prettier:check": "npx prettier --config .prettierrc.json --check ./src",
     "prepare": "cd ../.. && husky install frontend/app/.husky"
   },
   "resolutions": {
@@ -186,7 +187,8 @@
     "husky": "^8.0.3",
     "nock": "^13.3.0",
     "react-error-overlay": "6.0.9",
-    "typescript": "^5.0.3"
+    "typescript": "^5.0.3",
+    "prettier": "^3.0.3"
   },
   "jest": {
     "transformIgnorePatterns": [

diff --git a/frontend/app/public/static/no_org.png b/frontend/app/public/static/no_org.png
diff --git a/frontend/app/src/components/common/Button.tsx b/frontend/app/src/components/common/Button.tsx
@@ -21,6 +21,12 @@ const B = styled(EuiButton)`
   text-transform: none !important;
   text-decoration: none !important;
   transform: none !important;
+  @media only screen and (max-width: 700px) {
+    font-size: 12.5px;
+  }
+  @media only screen and (max-width: 500px) {
+    font-size: 11.5px;
+  }
 `;
 
 interface IconProps {

diff --git a/frontend/app/src/components/common/IconButton2.tsx b/frontend/app/src/components/common/IconButton2.tsx
@@ -42,6 +42,9 @@ const B = styled(EuiButton)<ButtonHoverProps>`
     transform: none !important;
     text-decoration: none !important;
   }
+  @media only screen and (max-width: 700px) {
+    font-size: 12.5px;
+  }
 `;
 
 const T = styled(EuiButton)`

diff --git a/frontend/app/src/pages/people/PersonPage.tsx b/frontend/app/src/pages/people/PersonPage.tsx
@@ -45,6 +45,7 @@ const Panel = styled.div<PanelProps>`
   padding: 20px;
   box-shadow: ${(p: any) => (p.isMobile ? 'none' : '0px 0px 6px rgb(0 0 0 / 7%)')};
   border-bottom: ${(p: any) => (p.isMobile ? '2px solid #EBEDEF' : 'none')};
+  padding-bottom: ${(p: any) => (p.isMobile ? 80 : 0)};
 `;
 export const PersonPage = observer(() => {
   const { main, ui } = useStores();
@@ -82,7 +83,7 @@ export const PersonPage = observer(() => {
             height: '100%'
           }}
         >
-          <Panel isMobile={isMobile} style={{ paddingBottom: 0, paddingTop: 80 }}>
+          <Panel isMobile={isMobile}>
             <UserInfo setShowSupport={setShowSupport} />
             <TabsPages />
           </Panel>

diff --git a/frontend/app/src/pages/people/tabs/index.tsx b/frontend/app/src/pages/people/tabs/index.tsx
@@ -7,19 +7,25 @@ import { Route, Switch, useHistory, useLocation, useRouteMatch } from 'react-rou
 import { useStores } from 'store';
 import styled from 'styled-components';
 import { Wanted } from './Wanted';
+
 const Container = styled.div<{ isMobile: boolean }>`
   flex-grow: 1;
   margin: ${(p: any) => (p.isMobile ? '0 -20px' : '0')};
 `;
 
-const Tabs = styled.div`
+const Tabs = styled.div<{ canEdit: boolean }>`
   display: flex;
   width: 100%;
   align-items: center;
   overflow-x: auto;
   ::-webkit-scrollbar {
     display: none;
   }
+  background: #fff;
+  padding: 0 20px;
+  border-bottom: solid 1px #ebedef;
+  box-shadow: ${(p: any) =>
+    p.canEdit ? '0px 2px 0px rgba(0, 0, 0, 0.07)' : '0px 2px 6px rgba(0, 0, 0, 0.07)'};
 `;
 interface TagProps {
   selected: boolean;
@@ -56,6 +62,27 @@ const Counter = styled.div`
   color: #b0b7bc;
 `;
 
+const RouteWrap = styled.div`
+  padding: 20px 30px;
+  height: calc(100% - 63px);
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+`;
+
+interface RouteDataProps {
+  fullSelectedWidget: (name: any) => any;
+}
+
+const RouteData = styled.div<RouteDataProps>`
+  display: flex;
+  align-items: flex-start;
+  justify-content: ${(p: any) =>
+    p.fullSelectedWidget && p.fullSelectedWidget.length > 0 ? 'flex-start' : 'center'};
+  flex-wrap: wrap;
+  min-height: 100%;
+`;
+
 const tabs = widgetConfigs;
 export const TabsPages = observer(() => {
   const location = useLocation();
@@ -109,14 +136,7 @@ export const TabsPages = observer(() => {
 
   return (
     <Container isMobile={isMobile}>
-      <Tabs
-        style={{
-          background: '#fff',
-          padding: '0 20px',
-          borderBottom: 'solid 1px #ebedef',
-          boxShadow: canEdit ? '0px 2px 0px rgba(0, 0, 0, 0.07)' : '0px 2px 6px rgba(0, 0, 0, 0.07)'
-        }}
-      >
+      <Tabs canEdit={canEdit}>
         {tabs &&
           tabsNames.map((name: any, i: number) => {
             const t = tabs[name];
@@ -160,29 +180,12 @@ export const TabsPages = observer(() => {
       <Switch>
         {tabsNames.map((name: any) => (
           <Route key={name} path={`${path}${name}`}>
-            <div
-              style={{
-                padding: 20,
-                height: 'calc(100% - 63px)',
-                overflowY: 'auto',
-                position: 'relative',
-                width: '100%'
-              }}
-            >
-              <div
-                style={{
-                  display: 'flex',
-                  alignItems: 'flex-start',
-                  justifyContent:
-                    fullSelectedWidget && fullSelectedWidget.length > 0 ? 'flex-start' : 'center',
-                  flexWrap: 'wrap',
-                  minHeight: '100%'
-                }}
-              >
+            <RouteWrap>
+              <RouteData fullSelectedWidget={fullSelectedWidget}>
                 {name === 'wanted' && <Wanted />}
                 <RenderWidgets widget={name} />
-              </div>
-            </div>
+              </RouteData>
+            </RouteWrap>
           </Route>
         ))}
       </Switch>

diff --git a/frontend/app/src/people/Person.tsx b/frontend/app/src/people/Person.tsx
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
 import styled from 'styled-components';
-import { random } from 'lodash';
 import { getHost } from '../config/host';
-import { Button, Divider, LazyImg, LazyImgBg } from '../components/common/index';
+import { Button, Divider, LazyImgBg } from '../components/common/index';
 import ConnectCard from './utils/ConnectCard';
 import { PersonProps } from './interfaces';
 
@@ -187,11 +186,7 @@ export default function Person(props: PersonProps) {
       <DWrap squeeze={squeeze} onClick={() => select(id, unique_name, owner_pubkey)}>
         <div>
           <div style={{ height: 210 }}>
-            <Img
-              style={{ height: '100%', width: '100%', borderRadius: 0 }}
-              src={img}
-              // src={img || getUserPlaceholder(owner_pubkey)}
-            />
+            <Img style={{ height: '100%', width: '100%', borderRadius: 0 }} src={img} />
           </div>
           <div style={{ padding: 16 }}>
             <DTitle>{owner_alias}</DTitle>

diff --git a/frontend/app/src/people/main/FocusView.tsx b/frontend/app/src/people/main/FocusView.tsx
@@ -243,7 +243,7 @@ function FocusedView(props: FocusViewProps) {
     let newBody = cloneDeep(body);
 
     if (config && config.name === 'about') {
-      const res = await main.saveProfile(newBody);
+      await main.saveProfile(newBody);
       if (shouldCloseModal) {
         closeModal();
       }

diff --git a/frontend/app/src/people/main/bountyModal/BountyModal.tsx b/frontend/app/src/people/main/bountyModal/BountyModal.tsx
@@ -17,8 +17,6 @@ export const BountyModal = ({ basePath }: BountyModalProps) => {
   const { canEdit, person } = usePerson(ui.selectedPerson);
   const [bounty, setBounty] = useState<PersonBounty[]>([]);
 
-  const wantedLength = person?.extras ? person?.extras.wanted?.length : 0;
-
   const onGoBack = () => {
     ui.setBountyPerson(0);
     history.push({

diff --git a/frontend/app/src/people/utils/Constants.tsx b/frontend/app/src/people/utils/Constants.tsx
@@ -1,7 +1,6 @@
 import {
   aboutSchema,
   wantedSchema,
-  offerSchema,
   offerSkillSchema,
   offerOtherSchema,
   wantedCodingTaskSchema,
@@ -38,12 +37,17 @@ const widgetConfigs = {
     },
     schema: organizationSchema,
     action: {
-      text: 'Add New Organization',
-      icon: 'local_offer'
+      text: 'Add Organization',
+      icon: 'add'
     },
     noneSpace: {
+      noUserResult: {
+        img: 'no_org.png',
+        text: 'Manage and organize your tickets',
+        sub: 'Fund and pay bounties directly through the website, add members, organize tickets, and more!'
+      },
       noResult: {
-        img: 'no_wanted2.png',
+        img: 'no_org.png',
         text: 'No Organization Yet',
         sub: 'Looks like this person has not created or added to any organizations yet.'
       }
@@ -73,41 +77,6 @@ const widgetConfigs = {
       }
     }
   },
-  offer: {
-    label: 'Portfolio',
-    name: 'offer',
-    submitText: 'Save',
-    modalStyle: {
-      width: 'auto',
-      maxWidth: 'auto',
-      minWidth: '400px',
-      minHeight: '40%',
-      maxHeight: '70%'
-    },
-    schema: offerSchema,
-    action: {
-      text: 'Add to Portfolio',
-      // text: 'Sell Something',
-      icon: 'work'
-    },
-    noneSpace: {
-      me: {
-        img: 'no_offers.png',
-        text: 'Use lightning network to market your skills!',
-        // text: 'Use lightning network to sell your digital goods!',
-        buttonText: 'Add to Portfolio',
-        // buttonText: 'Sell something',
-        buttonIcon: 'work'
-      },
-      otherUser: {
-        img: 'no_offers2.png',
-        text: 'Portfolio is Empty',
-        // text: 'No Offers Yet',
-        sub: "Looks like this person hasn't shared their porfolio."
-        // sub: 'Looks like this person is not selling anything yet.'
-      }
-    }
-  },
   // TODO: REMOVE
   wanted: {
     label: 'Bounties',

diff --git a/frontend/app/src/people/utils/NoneSpace.tsx b/frontend/app/src/people/utils/NoneSpace.tsx
@@ -79,6 +79,11 @@ const C = styled.div<styledProps>`
   padding: 0 65px;
 `;
 
+const NonSpaceButton = styled(Button)`
+  margin-top: 20px
+  border-radius: 10px;
+`;
+
 export default function NoneSpace(props: NoneSpaceProps) {
   const color = colors['light'];
   if (props.banner) {
@@ -136,12 +141,11 @@ export default function NoneSpace(props: NoneSpaceProps) {
       <div style={{ height: 200 }}>
         <div style={{ marginTop: 20 }}>{props.Button}</div>
         {!props.Button && props.buttonText && (
-          <Button
+          <NonSpaceButton
             text={props.buttonText}
             leadingIcon={props.buttonIcon}
             width={210}
             height={48}
-            style={{ marginTop: 40 }}
             onClick={props.action}
             color="primary"
           />