QC Voting
- # fix - Beranda dan mandatori input ## No issuee
This commit is contained in:
@@ -2,6 +2,7 @@
|
||||
|
||||
import { ComponentGlobal_NotifikasiBerhasil } from "@/app_modules/component_global/notif_global/notifikasi_berhasil";
|
||||
import {
|
||||
ActionIcon,
|
||||
Box,
|
||||
Button,
|
||||
Center,
|
||||
@@ -15,7 +16,7 @@ import {
|
||||
} from "@mantine/core";
|
||||
import { DatePickerInput } from "@mantine/dates";
|
||||
import { useCounter } from "@mantine/hooks";
|
||||
import { IconHome, IconPlus } from "@tabler/icons-react";
|
||||
import { IconHome, IconMinus, IconPlus, IconTrash } from "@tabler/icons-react";
|
||||
import { useAtom } from "jotai";
|
||||
import moment from "moment";
|
||||
import { AppRouterInstance } from "next/dist/shared/lib/app-router-context.shared-runtime";
|
||||
@@ -27,9 +28,12 @@ import {
|
||||
MODEL_VOTING,
|
||||
MODEL_VOTING_DAFTAR_NAMA_VOTE,
|
||||
} from "../model/interface";
|
||||
import _ from "lodash";
|
||||
import _, { slice } from "lodash";
|
||||
import { Vote_funEditById } from "../fun/edit/fun_edit_by_id";
|
||||
import { ComponentGlobal_NotifikasiGagal } from "@/app_modules/component_global/notif_global/notifikasi_gagal";
|
||||
import ComponentGlobal_InputCountDown from "@/app_modules/component_global/input_countdown";
|
||||
import ComponentGlobal_ErrorInput from "@/app_modules/component_global/error_input";
|
||||
import { ComponentGlobal_NotifikasiPeringatan } from "@/app_modules/component_global/notif_global/notifikasi_peringatan";
|
||||
|
||||
export default function Vote_Edit({
|
||||
dataVote,
|
||||
@@ -39,7 +43,7 @@ export default function Vote_Edit({
|
||||
listDaftarVote: MODEL_VOTING_DAFTAR_NAMA_VOTE[];
|
||||
}) {
|
||||
const [data, setData] = useState(dataVote);
|
||||
const [listVoting, setListVoting] = useState(listDaftarVote);
|
||||
const [pilihanNama, setPilihanNama] = useState(listDaftarVote);
|
||||
|
||||
return (
|
||||
<>
|
||||
@@ -47,8 +51,16 @@ export default function Vote_Edit({
|
||||
<TextInput
|
||||
label="Judul"
|
||||
withAsterisk
|
||||
placeholder="Masukan judul"
|
||||
placeholder="Judul"
|
||||
value={data.title}
|
||||
maxLength={100}
|
||||
error={
|
||||
data.title === "" ? (
|
||||
<ComponentGlobal_ErrorInput text="Masukan judul" />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
onChange={(val) => {
|
||||
setData({
|
||||
...data,
|
||||
@@ -56,21 +68,36 @@ export default function Vote_Edit({
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<Textarea
|
||||
label="Deskripsi"
|
||||
autosize
|
||||
minRows={2}
|
||||
maxRows={5}
|
||||
withAsterisk
|
||||
placeholder="Masukan deskripsi"
|
||||
value={data.deskripsi}
|
||||
onChange={(val) => {
|
||||
setData({
|
||||
...data,
|
||||
deskripsi: val.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<Stack spacing={5}>
|
||||
<Textarea
|
||||
label="Deskripsi"
|
||||
autosize
|
||||
minRows={2}
|
||||
maxRows={5}
|
||||
withAsterisk
|
||||
placeholder="Deskripsi"
|
||||
value={data.deskripsi}
|
||||
maxLength={300}
|
||||
error={
|
||||
data.deskripsi === "" ? (
|
||||
<ComponentGlobal_ErrorInput text="Masukan deskripsi" />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
onChange={(val) => {
|
||||
setData({
|
||||
...data,
|
||||
deskripsi: val.target.value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
<ComponentGlobal_InputCountDown
|
||||
lengthInput={data.deskripsi.length}
|
||||
maxInput={300}
|
||||
/>
|
||||
</Stack>
|
||||
|
||||
<DatePickerInput
|
||||
label="Jangka Waktu"
|
||||
@@ -82,45 +109,97 @@ export default function Vote_Edit({
|
||||
return moment(date).diff(Date.now(), "days") < 0;
|
||||
}}
|
||||
value={[data.awalVote, data.akhirVote]}
|
||||
onChange={(val: any) =>
|
||||
error={
|
||||
data.awalVote === null || data.akhirVote === null ? (
|
||||
<ComponentGlobal_ErrorInput text="Invalid Date" />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
onChange={(val: any) => {
|
||||
setData({
|
||||
...data,
|
||||
awalVote: val[0],
|
||||
akhirVote: val[1],
|
||||
})
|
||||
}
|
||||
});
|
||||
}}
|
||||
/>
|
||||
|
||||
<Stack spacing={0}>
|
||||
<Center>
|
||||
<Text fw={"bold"} fz={"sm"}>
|
||||
Daftar Voting
|
||||
Daftar Pilihan
|
||||
</Text>
|
||||
</Center>
|
||||
|
||||
<Stack>
|
||||
<Stack>
|
||||
{listVoting.map((e, index) => (
|
||||
<Box key={index}>
|
||||
<TextInput
|
||||
label={"Nama Voting"}
|
||||
withAsterisk
|
||||
placeholder="Nama pilihan voting"
|
||||
value={e.value}
|
||||
onChange={(v) => {
|
||||
const cloneData = _.clone(listVoting);
|
||||
cloneData[index].value = v.currentTarget.value;
|
||||
|
||||
setListVoting([...listVoting]);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
{pilihanNama.map((e, index) => (
|
||||
<Grid key={index} h="100%" align="center">
|
||||
<Grid.Col span={10}>
|
||||
<Box>
|
||||
<TextInput
|
||||
label={"Nama Pilihan"}
|
||||
withAsterisk
|
||||
placeholder="Nama pilihan"
|
||||
value={e.value}
|
||||
maxLength={100}
|
||||
error={
|
||||
e.value === "" ? (
|
||||
<ComponentGlobal_ErrorInput text="Masukan nama pilihan" />
|
||||
) : (
|
||||
""
|
||||
)
|
||||
}
|
||||
onChange={(v) => {
|
||||
const cloneData = _.clone(pilihanNama);
|
||||
cloneData[index].value = v.currentTarget.value;
|
||||
setPilihanNama([...pilihanNama]);
|
||||
}}
|
||||
/>
|
||||
</Box>
|
||||
</Grid.Col>
|
||||
<Grid.Col span={2} mt={"md"}>
|
||||
<ActionIcon
|
||||
variant="transparent"
|
||||
radius={"xl"}
|
||||
disabled={pilihanNama.length < 3 ? true : false}
|
||||
onClick={() => {
|
||||
pilihanNama.splice(index, 1);
|
||||
setPilihanNama([...pilihanNama]);
|
||||
}}
|
||||
>
|
||||
<IconTrash
|
||||
style={{
|
||||
transition: "0.5s",
|
||||
}}
|
||||
color={pilihanNama.length < 3 ? "gray" : "red"}
|
||||
/>
|
||||
</ActionIcon>
|
||||
</Grid.Col>
|
||||
</Grid>
|
||||
))}
|
||||
</Stack>
|
||||
|
||||
<Group position="center">
|
||||
<Button
|
||||
disabled={pilihanNama.length >= 4 ? true : false}
|
||||
compact
|
||||
w={100}
|
||||
radius={"xl"}
|
||||
leftIcon={<IconPlus size={15} />}
|
||||
variant="outline"
|
||||
onClick={() => {
|
||||
setPilihanNama([...(pilihanNama as any), { value: "" }]);
|
||||
}}
|
||||
>
|
||||
<Text fz={8}>Tambah List</Text>
|
||||
</Button>
|
||||
</Group>
|
||||
</Stack>
|
||||
</Stack>
|
||||
|
||||
<ButtonAction data={data} listVoting={listVoting} />
|
||||
<ButtonAction data={data} listVoting={pilihanNama} />
|
||||
|
||||
{/* <pre>{JSON.stringify(listDaftarVote, null, 2)}</pre> */}
|
||||
</Stack>
|
||||
@@ -136,16 +215,20 @@ function ButtonAction({
|
||||
listVoting: MODEL_VOTING_DAFTAR_NAMA_VOTE[];
|
||||
}) {
|
||||
const router = useRouter();
|
||||
const [isLoading, setIsLoading] = useState(false);
|
||||
const [hotMenu, setHotMenu] = useAtom(gs_vote_hotMenu);
|
||||
const [tabsStatus, setTabsStatus] = useAtom(gs_vote_status);
|
||||
|
||||
async function onUpdate() {
|
||||
// console.log(listVoting);
|
||||
|
||||
await Vote_funEditById(data, listVoting).then((res) => {
|
||||
if (res.status === 200) {
|
||||
ComponentGlobal_NotifikasiBerhasil("Berhasil Update");
|
||||
// setHotMenu(1);
|
||||
// setTabsStatus("Draft");
|
||||
router.back();
|
||||
setIsLoading(true);
|
||||
} else {
|
||||
ComponentGlobal_NotifikasiGagal(res.message);
|
||||
}
|
||||
@@ -154,7 +237,14 @@ function ButtonAction({
|
||||
|
||||
return (
|
||||
<>
|
||||
<Button mt={"lg"} radius={"xl"} color="green" onClick={() => onUpdate()}>
|
||||
<Button
|
||||
loaderPosition="center"
|
||||
loading={isLoading ? true : false}
|
||||
mt={"lg"}
|
||||
radius={"xl"}
|
||||
color="green"
|
||||
onClick={() => onUpdate()}
|
||||
>
|
||||
Update
|
||||
</Button>
|
||||
</>
|
||||
|
||||
Reference in New Issue
Block a user