fix: mobile style and add org edit platform (#333)

Signed-off-by: laixingyou <[email protected]>
oss-compass · Mar 8, 2024 · 1e54956 · 1e54956
1 parent dd35dfe
commit 1e54956
Show file tree

Hide file tree

Showing 7 changed files with 40 additions and 14 deletions.
diff --git a/apps/web/src/common/components/OrgEdit/ManageOrgEdit.tsx b/apps/web/src/common/components/OrgEdit/ManageOrgEdit.tsx
@@ -17,18 +17,21 @@ const ManageOrgEdit = ({
   level,
   contributor,
   name,
+  provider,
   setShowEdit,
 }: {
   label?: string;
   level?: string;
   contributor?: string;
   name?: string;
+  provider?: string;
   setShowEdit: (b: boolean) => void;
 }) => {
   const { t } = useTranslation();
   const [orgName, setOrgName] = useState(name || '');
   const [date, setDate] = useState<RangeValue>(null);
   const [form] = Form.useForm();
+
   const onCheck = async () => {
     try {
       const values = await form.validateFields();
@@ -39,7 +42,7 @@ const ManageOrgEdit = ({
         label,
         level,
         contributor,
-        platform: 'github',
+        platform: provider,
         organizations: [{ orgName, firstDate, lastDate }],
       });
     } catch (errorInfo) {

diff --git a/apps/web/src/common/components/OrgEdit/index.tsx b/apps/web/src/common/components/OrgEdit/index.tsx
@@ -20,12 +20,14 @@ const OrgEdit = ({
   organizations = [],
   type = 'add',
   index,
+  provider,
   setShowEdit,
   onSuccess,
 }: {
   organizations?: ContributorOrgInput[];
   type?: 'add' | 'edit';
   index?: number;
+  provider: string;
   setShowEdit: (b: boolean) => void;
   onSuccess?: () => void;
 }) => {
@@ -51,12 +53,12 @@ const OrgEdit = ({
       if (type === 'edit') {
         organizations[index] = { orgName, firstDate, lastDate };
         mutation.mutate({
-          platform: 'github',
+          platform: provider,
           organizations: [...organizations],
         });
       } else {
         mutation.mutate({
-          platform: 'github',
+          platform: provider,
           organizations: [{ orgName, firstDate, lastDate }, ...organizations],
         });
       }

diff --git a/...b/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx b/...b/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorContribution.tsx
@@ -23,7 +23,7 @@ const ContributorContribution: React.FC<{
   const [onlyOrg, setOnlyOrg] = useState<boolean>(false);
 
   return (
-    <div className="relative w-[50%] flex-shrink-0 pt-4 ">
+    <div className="relative w-[50%] flex-shrink-0 pt-4 lg:h-[50%] lg:w-full">
       <div className="absolute right-6 z-10 h-4 bg-transparent pl-4 text-xs">
         <PieDropDownMenu
           showOrgModel={true}

diff --git a/.../src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx b/.../src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorOrganizations.tsx
@@ -126,7 +126,10 @@ const ContributorContribution: React.FC<{
   };
 
   return (
-    <div className="w-[50%] flex-shrink-0 pt-4" ref={chartRef}>
+    <div
+      className="w-[50%] flex-shrink-0 pt-4 lg:h-[50%] lg:w-full"
+      ref={chartRef}
+    >
       <MetricChart
         style={{ height: '100%', zIndex: 1 }}
         loading={isLoading}

diff --git a/...eb/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/index.tsx b/...eb/src/modules/analyze/DataView/MetricDetail/MetricContributor/ContributorTable/index.tsx
@@ -378,6 +378,7 @@ const MetricTable: React.FC<{
               level={level}
               contributor={currentName}
               name={currentOrgName}
+              provider={origin}
               setShowEdit={() => {
                 setOpenConfirm(false);
               }}

diff --git a/apps/web/src/modules/analyze/DataView/MetricDetail/index.tsx b/apps/web/src/modules/analyze/DataView/MetricDetail/index.tsx
@@ -14,6 +14,7 @@ import LoadingAnalysis from '@modules/analyze/DataView/Status/LoadingAnalysis';
 import LabelItems from '@modules/analyze/components/NavBar/LabelItems';
 import { useRouter } from 'next/router';
 import { useHandleQueryParams } from '@modules/analyze/hooks/useHandleQueryParams';
+import { Select } from 'antd';
 
 const VerifyMetricDetail = () => {
   const { isLoading } = useVerifyDetailRangeQuery();
@@ -79,7 +80,7 @@ const MetricDetail = () => {
             {t('analyze:metric_detail:project_deep_dive_insight')}
           </span>
         </div>
-        <div className="absolute right-1/2 flex translate-x-1/2 justify-center">
+        <div className="absolute right-1/2 flex translate-x-1/2 justify-center lg:hidden">
           <MyTab
             options={tabOptions}
             value={tab}
@@ -89,6 +90,17 @@ const MetricDetail = () => {
             }}
           />
         </div>
+        <div className=">lg:hidden absolute right-1/2 flex translate-x-1/2 justify-center">
+          <Select
+            style={{ width: 120 }}
+            onChange={(v) => {
+              setTab(v);
+              handleQueryParams({ tab: v });
+            }}
+            value={tab}
+            options={tabOptions}
+          />
+        </div>
         <div className="absolute right-6">
           <MerticDatePicker />
         </div>

diff --git a/apps/web/src/modules/settings/profile/Organizations.tsx b/apps/web/src/modules/settings/profile/Organizations.tsx
@@ -12,8 +12,9 @@ import {
   useModifyUserOrgsMutation,
   ContributorOrgInput,
 } from '@oss-compass/graphql';
+import { cookieGetAuthProvider } from '@common/utils/cookie';
 
-const OrgItem = ({ provider, index, organizations, onSuccess }) => {
+const OrgItem = ({ org, index, organizations, onSuccess, provider }) => {
   const customFormat = (date) => {
     if (date.startsWith('2099')) {
       return t('common:up_to_now');
@@ -41,7 +42,7 @@ const OrgItem = ({ provider, index, organizations, onSuccess }) => {
     const arr = [...organizations];
     arr.splice(index, 1);
     mutation.mutate({
-      platform: 'github',
+      platform: provider,
       organizations: [...arr],
     });
   };
@@ -52,21 +53,21 @@ const OrgItem = ({ provider, index, organizations, onSuccess }) => {
           setShowEdit={setShowEdit}
           organizations={organizations as ContributorOrgInput[]}
           onSuccess={onSuccess}
+          provider={provider}
           type={'edit'}
           index={index}
         />
       ) : (
         <div className="flex items-center justify-between border-b border-[#E7E7E7] py-4">
           <div className="flex">
             <div className="mr-2 w-[120px] font-bold">
-              <span className="line-clamp-1" title={provider.orgName}>
-                {provider.orgName}
+              <span className="line-clamp-1" title={org.orgName}>
+                {org.orgName}
               </span>
             </div>
             <div className="flex text-[#868690]">
-              <div className="mr-2">{customFormat(provider?.firstDate)}</div>
-              {'-'}{' '}
-              <div className="ml-2">{customFormat(provider?.lastDate)}</div>
+              <div className="mr-2">{customFormat(org?.firstDate)}</div>
+              {'-'} <div className="ml-2">{customFormat(org?.lastDate)}</div>
             </div>
           </div>
           <div className="flex">
@@ -88,6 +89,8 @@ const OrgItem = ({ provider, index, organizations, onSuccess }) => {
 const Organizations = () => {
   const { t } = useTranslation();
   const { currentUser } = useSnapshot(userInfoStore);
+  const provider = cookieGetAuthProvider();
+
   const contributingOrgs = currentUser.contributingOrgs.map((item) => {
     return {
       orgName: item.orgName,
@@ -112,10 +115,11 @@ const Organizations = () => {
           return (
             <OrgItem
               key={item.orgName + index}
-              provider={item}
+              org={item}
               index={index}
               organizations={contributingOrgs as ContributorOrgInput[]}
               onSuccess={onSuccess}
+              provider={provider}
             />
           );
         })}
@@ -125,6 +129,7 @@ const Organizations = () => {
           setShowEdit={setShowEdit}
           organizations={contributingOrgs as ContributorOrgInput[]}
           onSuccess={onSuccess}
+          provider={provider}
         />
       )}
       <div className="mt-4">