group drop down list

src/pages/ContestEditor.tsx

@@ -21,6 +21,7 @@ import {
 import { NumberInput } from '../components/input/NumberInput';
 import { cn } from '../lib/cn';
 import DateInput from '../components/input/DateInput';
+import { fetchMyGroups } from '../redux/slices/groups';
 
 interface Mission {
     id: number;
@@ -92,7 +93,7 @@ const ContestEditor = () => {
         missionIds: [],
         articleIds: [],
     });
-
+    const myname = useAppSelector((state) => state.auth.username);
     const [missions, setMissions] = useState<Mission[]>([]);
 
     const statusDelete = useAppSelector(
@@ -106,6 +107,16 @@ const ContestEditor = () => {
         (state) => state.contests.fetchContestById,
     );
 
+    const myGroups = useAppSelector(
+        (state) => state.groups.fetchMyGroups.groups,
+    ).filter((group) =>
+        group.members.some(
+            (member) =>
+                member.username === myname &&
+                member.role.includes('Administrator'),
+        ),
+    );
+
     function toLocalInputValue(utcString: string) {
         const d = new Date(utcString);
 
@@ -193,6 +204,7 @@ const ContestEditor = () => {
 
     useEffect(() => {
         if (refactor && contestByIdstatus == 'successful' && contestById) {
+            dispatch(fetchMyGroups());
             setContest({
                 ...contestById,
                 // groupIds: contestById.groups.map(group => group.groupId),
@@ -205,8 +217,6 @@ const ContestEditor = () => {
         }
     }, [contestById]);
 
-    console.log(contest);
-
     const visibilityDefaultState =
         visibilityItems.find(
             (i) => contest && i.value === contest.visibility,
@@ -217,6 +227,17 @@ const ContestEditor = () => {
             (i) => contest && i.value === contest.scheduleType,
         ) ?? scheduleTypeItems[0];
 
+    const groupItems = myGroups.map((v) => {
+        return {
+            value: '' + v.id,
+            text: v.name,
+        };
+    });
+    const groupIdDefaultState =
+        myGroups.find((g) => g.id == contest?.groupId) ??
+        myGroups[0] ??
+        undefined;
+
     return (
         <div className="h-screen grid grid-rows-[60px,1fr] text-liquid-white">
             <Header backClick={() => navigate(back || '/home/contests')} />
@@ -287,29 +308,50 @@ const ContestEditor = () => {
 
                             <div
                                 className={cn(
-                                    ' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-200',
+                                    ' grid grid-flow-row grid-rows-[0fr] opacity-0 transition-all duration-200 mb-[10px]',
                                     contest.visibility == 'GroupPrivate' &&
                                         'grid-rows-[1fr] opacity-100',
                                 )}
                             >
-                                <div className="overflow-hidden">
-                                    <div className="grid grid-cols-2 gap-[10px] mt-[10px]">
-                                        <NumberInput
-                                            defaultState={contest.groupId ?? 1}
-                                            name="groupId"
-                                            label="Id группы"
-                                            placeholder="Например: 3"
-                                            minValue={1}
-                                            maxValue={1000000000000000}
-                                            onChange={(v) =>
-                                                handleChange(
-                                                    'groupId',
-                                                    Number(v),
-                                                )
-                                            }
-                                        />
+                                {groupIdDefaultState ? (
+                                    <div
+                                        className={cn(
+                                            contest.visibility !=
+                                                'GroupPrivate' &&
+                                                'overflow-hidden',
+                                        )}
+                                    >
+                                        <div>
+                                            <label className="block text-sm mb-2 mt-[10px]">
+                                                Группа для привязки
+                                            </label>
+
+                                            <DropDownList
+                                                items={groupItems}
+                                                defaultState={{
+                                                    value:
+                                                        '' +
+                                                        groupIdDefaultState.id,
+                                                    text: groupIdDefaultState.name,
+                                                }}
+                                                onChange={(v) => {
+                                                    handleChange(
+                                                        'groupId',
+                                                        Number(v),
+                                                    );
+                                                }}
+                                                weight="w-full"
+                                            />
+                                        </div>
                                     </div>
-                                </div>
+                                ) : (
+                                    <div className="overflow-hidden">
+                                        <div className="text-liquid-red my-[20px]">
+                                            У вас нет группы вкоторой вы
+                                            являетесь Администратором!
+                                        </div>
+                                    </div>
+                                )}
                             </div>
 
                             {/* Даты */}