group drop down list
This commit is contained in:
Виталий Лавшонок
@@ -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) =>
|
||||
{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 className="overflow-hidden">
|
||||
<div className="text-liquid-red my-[20px]">
|
||||
У вас нет группы вкоторой вы
|
||||
являетесь Администратором!
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Даты */}
|
||||
|
||||
@@ -17,6 +17,7 @@ import {
|
||||
} from '../../../components/input/DropDownList';
|
||||
import DateInput from '../../../components/input/DateInput';
|
||||
import { cn } from '../../../lib/cn';
|
||||
import { fetchMyGroups } from '../../../redux/slices/groups';
|
||||
|
||||
function toUtc(localDateTime?: string): string {
|
||||
if (!localDateTime) return '';
|
||||
@@ -80,6 +81,16 @@ const ModalCreateContest: FC<ModalCreateContestProps> = ({
|
||||
const contest = useAppSelector(
|
||||
(state) => state.contests.createContest.contest,
|
||||
);
|
||||
const myname = useAppSelector((state) => state.auth.username);
|
||||
const myGroups = useAppSelector(
|
||||
(state) => state.groups.fetchMyGroups.groups,
|
||||
).filter((group) =>
|
||||
group.members.some(
|
||||
(member) =>
|
||||
member.username === myname &&
|
||||
member.role.includes('Administrator'),
|
||||
),
|
||||
);
|
||||
|
||||
useEffect(() => {
|
||||
if (status === 'successful') {
|
||||
@@ -92,6 +103,12 @@ const ModalCreateContest: FC<ModalCreateContestProps> = ({
|
||||
}
|
||||
}, [status]);
|
||||
|
||||
useEffect(() => {
|
||||
if (active) {
|
||||
dispatch(fetchMyGroups());
|
||||
}
|
||||
}, [active]);
|
||||
|
||||
const handleChange = (key: keyof CreateContestBody, value: any) => {
|
||||
setForm((prev) => ({ ...prev, [key]: value }));
|
||||
};
|
||||
@@ -105,7 +122,16 @@ const ModalCreateContest: FC<ModalCreateContestProps> = ({
|
||||
}),
|
||||
);
|
||||
};
|
||||
const groupItems = myGroups.map((v) => {
|
||||
return {
|
||||
value: '' + v.id,
|
||||
text: v.name,
|
||||
};
|
||||
});
|
||||
const groupIdDefaultState =
|
||||
myGroups.find((g) => g.id == form?.groupId) ?? myGroups[0] ?? undefined;
|
||||
|
||||
console.log(groupItems, myGroups, groupIdDefaultState);
|
||||
return (
|
||||
<Modal
|
||||
className="bg-liquid-background border-liquid-lighter border-[2px] p-[25px] rounded-[20px] text-liquid-white"
|
||||
@@ -165,26 +191,44 @@ const ModalCreateContest: FC<ModalCreateContestProps> = ({
|
||||
|
||||
<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]',
|
||||
form.visibility == 'GroupPrivate' &&
|
||||
'grid-rows-[1fr] opacity-100',
|
||||
)}
|
||||
>
|
||||
<div className="overflow-hidden">
|
||||
<div className="grid grid-cols-2 gap-[10px] mt-[10px]">
|
||||
<NumberInput
|
||||
defaultState={form.groupId ?? 1}
|
||||
name="groupId"
|
||||
label="Id группы"
|
||||
placeholder="Например: 3"
|
||||
minValue={1}
|
||||
maxValue={1000000000000000}
|
||||
onChange={(v) =>
|
||||
handleChange('groupId', Number(v))
|
||||
}
|
||||
{groupIdDefaultState ? (
|
||||
<div
|
||||
className={cn(
|
||||
form.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 className="overflow-hidden">
|
||||
<div className="text-liquid-red my-[20px]">
|
||||
У вас нет группы вкоторой вы являетесь
|
||||
Администратором!
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{/* Даты */}
|
||||
|
||||
Reference in New Issue
Block a user