Merge branch 'main' of https://gitlab.com/hanifsalafi/mediahub_redesign into prod
This commit is contained in:
commit
7d9f23896e
|
|
@ -76,9 +76,6 @@ export default function EditUserForm() {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const passwordVal = form.watch("password");
|
|
||||||
const confPasswordVal = form.watch("confirmPassword");
|
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
initData();
|
initData();
|
||||||
}, []);
|
}, []);
|
||||||
|
|
|
||||||
|
|
@ -354,7 +354,7 @@ export default function EditUserForm() {
|
||||||
rules={["minLength", "specialChar", "number", "capital", "match"]}
|
rules={["minLength", "specialChar", "number", "capital", "match"]}
|
||||||
minLength={8}
|
minLength={8}
|
||||||
value={passwordVal || ""}
|
value={passwordVal || ""}
|
||||||
valueAgain={confPasswordVal}
|
valueAgain={confPasswordVal || ""}
|
||||||
onChange={(isValid) => {
|
onChange={(isValid) => {
|
||||||
form.setValue("isValidPassword", isValid);
|
form.setValue("isValidPassword", isValid);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -752,7 +752,7 @@ export default function CreateUserForm() {
|
||||||
rules={["minLength", "specialChar", "number", "capital", "match"]}
|
rules={["minLength", "specialChar", "number", "capital", "match"]}
|
||||||
minLength={8}
|
minLength={8}
|
||||||
value={passwordVal || ""}
|
value={passwordVal || ""}
|
||||||
valueAgain={confPasswordVal}
|
valueAgain={confPasswordVal || ""}
|
||||||
onChange={(isValid) => {
|
onChange={(isValid) => {
|
||||||
form.setValue("isValidPassword", isValid);
|
form.setValue("isValidPassword", isValid);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -191,8 +191,6 @@ export default function DetailUserForm() {
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
|
||||||
const passwordVal = form.watch("password");
|
|
||||||
const confPasswordVal = form.watch("confirmPassword");
|
|
||||||
const selectedRole = form.watch("role");
|
const selectedRole = form.watch("role");
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
||||||
|
|
@ -757,7 +757,7 @@ export default function EditUserForm() {
|
||||||
rules={["minLength", "specialChar", "number", "capital", "match"]}
|
rules={["minLength", "specialChar", "number", "capital", "match"]}
|
||||||
minLength={8}
|
minLength={8}
|
||||||
value={passwordVal || ""}
|
value={passwordVal || ""}
|
||||||
valueAgain={confPasswordVal}
|
valueAgain={confPasswordVal || ""}
|
||||||
onChange={(isValid) => {
|
onChange={(isValid) => {
|
||||||
form.setValue("isValidPassword", isValid);
|
form.setValue("isValidPassword", isValid);
|
||||||
}}
|
}}
|
||||||
|
|
|
||||||
|
|
@ -125,16 +125,16 @@ export default function CreateCategoryModal() {
|
||||||
});
|
});
|
||||||
|
|
||||||
const contentType = form.watch("contentType");
|
const contentType = form.watch("contentType");
|
||||||
const isAllContentChecked = listContent.every((item) =>
|
const isAllContentChecked = contentType && listContent.every((item) =>
|
||||||
contentType?.includes(item.id)
|
contentType.includes(item.id)
|
||||||
);
|
);
|
||||||
|
|
||||||
const users = form.watch("selectedUser");
|
const users = form.watch("selectedUser");
|
||||||
const isAllUserChecked = userList.every((item) => users?.includes(item.id));
|
const isAllUserChecked = users && userList.every((item) => users.includes(item.id));
|
||||||
|
|
||||||
const target = form.watch("publishTo");
|
const target = form.watch("publishTo");
|
||||||
const isAllTargetChecked = publishToList.every((item) =>
|
const isAllTargetChecked = target && publishToList.every((item) =>
|
||||||
target?.includes(item.id)
|
target.includes(item.id)
|
||||||
);
|
);
|
||||||
|
|
||||||
const { getRootProps, getInputProps } = useDropzone({
|
const { getRootProps, getInputProps } = useDropzone({
|
||||||
|
|
|
||||||
|
|
@ -146,12 +146,12 @@ export default function EditCategoryModal(props: {
|
||||||
form.setValue("id", String(data?.id));
|
form.setValue("id", String(data?.id));
|
||||||
form.setValue("title", String(data?.name));
|
form.setValue("title", String(data?.name));
|
||||||
form.setValue("description", String(data?.description));
|
form.setValue("description", String(data?.description));
|
||||||
form.setValue("contentType", data?.mediaTypes?.split(","));
|
form.setValue("contentType", data?.mediaTypes?.split(",") || []);
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"selectedUser",
|
"selectedUser",
|
||||||
removeAndReturn(data?.publishedFor, [2, 3, 4])
|
removeAndReturn(data?.publishedFor, [2, 3, 4])
|
||||||
);
|
);
|
||||||
form.setValue("publishTo", data?.publishedLocation?.split(","));
|
form.setValue("publishTo", data?.publishedLocation?.split(",") || []);
|
||||||
form.setValue("file", thumbnailLink);
|
form.setValue("file", thumbnailLink);
|
||||||
|
|
||||||
setUnitData(filterString(data?.publishedLocationLevel, "under"));
|
setUnitData(filterString(data?.publishedLocationLevel, "under"));
|
||||||
|
|
@ -183,16 +183,16 @@ export default function EditCategoryModal(props: {
|
||||||
}
|
}
|
||||||
|
|
||||||
const contentType = form.watch("contentType");
|
const contentType = form.watch("contentType");
|
||||||
const isAllContentChecked = listContent.every((item) =>
|
const isAllContentChecked = contentType && listContent.every((item) =>
|
||||||
contentType?.includes(item.id)
|
contentType.includes(item.id)
|
||||||
);
|
);
|
||||||
|
|
||||||
const users = form.watch("selectedUser");
|
const users = form.watch("selectedUser");
|
||||||
const isAllUserChecked = userList.every((item) => users?.includes(item.id));
|
const isAllUserChecked = users && userList.every((item) => users.includes(item.id));
|
||||||
|
|
||||||
const target = form.watch("publishTo");
|
const target = form.watch("publishTo");
|
||||||
const isAllTargetChecked = publishToList.every((item) =>
|
const isAllTargetChecked = target && publishToList.every((item) =>
|
||||||
target?.includes(item.id)
|
target.includes(item.id)
|
||||||
);
|
);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
|
||||||
|
|
@ -68,11 +68,11 @@ export function UnitMapping(props: {
|
||||||
|
|
||||||
const unitType = form.watch("items");
|
const unitType = form.watch("items");
|
||||||
|
|
||||||
const isAllUnitChecked = unitList.every((item) =>
|
const isAllUnitChecked = unitType && unitList.every((item) =>
|
||||||
unitType?.includes(String(item.id))
|
unitType.includes(String(item.id))
|
||||||
);
|
);
|
||||||
const isAllSatkerChecked = satkerList.every((item) =>
|
const isAllSatkerChecked = unitType && satkerList.every((item) =>
|
||||||
unitType?.includes(String(item.id))
|
unitType.includes(String(item.id))
|
||||||
);
|
);
|
||||||
|
|
||||||
const setupUnit = (data: UnitType[]) => {
|
const setupUnit = (data: UnitType[]) => {
|
||||||
|
|
|
||||||
|
|
@ -91,8 +91,8 @@ export default function CreateFAQModal() {
|
||||||
});
|
});
|
||||||
|
|
||||||
const target = form.watch("publishTo");
|
const target = form.watch("publishTo");
|
||||||
const isAllTargetChecked = publishToList.every((item) =>
|
const isAllTargetChecked = target && publishToList.every((item) =>
|
||||||
target?.includes(item.id)
|
target.includes(item.id)
|
||||||
);
|
);
|
||||||
|
|
||||||
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||||
|
|
|
||||||
|
|
@ -74,11 +74,11 @@ export function UnitMapping(props: {
|
||||||
|
|
||||||
const unitType = form.watch("items");
|
const unitType = form.watch("items");
|
||||||
|
|
||||||
const isAllUnitChecked = unitList.every((item) =>
|
const isAllUnitChecked = unitType && unitList.every((item) =>
|
||||||
unitType?.includes(String(item.id))
|
unitType.includes(String(item.id))
|
||||||
);
|
);
|
||||||
const isAllSatkerChecked = satkerList.every((item) =>
|
const isAllSatkerChecked = unitType && satkerList.every((item) =>
|
||||||
unitType?.includes(String(item.id))
|
unitType.includes(String(item.id))
|
||||||
);
|
);
|
||||||
const isAllPolresChecked = polresList.every((item) =>
|
const isAllPolresChecked = polresList.every((item) =>
|
||||||
unitType?.includes(String(item.id))
|
unitType?.includes(String(item.id))
|
||||||
|
|
|
||||||
|
|
@ -132,29 +132,36 @@ const useTableColumns = () => {
|
||||||
accessorKey: "statusName",
|
accessorKey: "statusName",
|
||||||
header: "Status",
|
header: "Status",
|
||||||
cell: ({ row }) => {
|
cell: ({ row }) => {
|
||||||
const statusColors: Record<string, string> = {
|
const statusId = Number(row.original?.statusId);
|
||||||
diterima: "bg-green-100 text-green-600",
|
const reviewedAtLevel = row.original?.reviewedAtLevel || "";
|
||||||
"menunggu review": "bg-orange-100 text-orange-600",
|
const creatorGroupLevelId = Number(row.original?.creatorGroupLevelId);
|
||||||
|
const needApprovalFromLevel = Number(
|
||||||
|
row.original?.needApprovalFromLevel
|
||||||
|
);
|
||||||
|
|
||||||
|
const userHasReviewed = reviewedAtLevel.includes(`:${userLevelId}:`);
|
||||||
|
const isCreator = creatorGroupLevelId === Number(userLevelId);
|
||||||
|
|
||||||
|
const isWaitingForReview =
|
||||||
|
statusId === 2 && !userHasReviewed && !isCreator;
|
||||||
|
|
||||||
|
const isApprovalNeeded =
|
||||||
|
statusId === 1 && needApprovalFromLevel === Number(userLevelId);
|
||||||
|
|
||||||
|
const label =
|
||||||
|
isWaitingForReview || isApprovalNeeded
|
||||||
|
? "Menunggu Review"
|
||||||
|
: statusId === 2
|
||||||
|
? "Diterima"
|
||||||
|
: row.original?.statusName;
|
||||||
|
|
||||||
|
const colors: Record<string, string> = {
|
||||||
|
"Menunggu Review": "bg-orange-100 text-orange-600",
|
||||||
|
Diterima: "bg-green-100 text-green-600",
|
||||||
|
default: "bg-red-200 text-red-600",
|
||||||
};
|
};
|
||||||
|
|
||||||
const colors = [
|
const statusStyles = colors[label] || colors.default;
|
||||||
"bg-orange-100 text-orange-600",
|
|
||||||
"bg-orange-100 text-orange-600",
|
|
||||||
"bg-green-100 text-green-600",
|
|
||||||
"bg-blue-100 text-blue-600",
|
|
||||||
"bg-red-200 text-red-600",
|
|
||||||
];
|
|
||||||
|
|
||||||
const status =
|
|
||||||
Number(row.original?.statusId) == 2 &&
|
|
||||||
row.original?.reviewedAtLevel !== null &&
|
|
||||||
!row.original?.reviewedAtLevel?.includes(`:${userLevelId}:`) &&
|
|
||||||
Number(row.original?.creatorGroupLevelId) != Number(userLevelId)
|
|
||||||
? "1"
|
|
||||||
: row.original?.statusId;
|
|
||||||
const statusStyles =
|
|
||||||
colors[Number(status)] || "bg-red-200 text-red-600";
|
|
||||||
// const statusStyles = statusColors[status] || "bg-red-200 text-red-600";
|
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Badge
|
<Badge
|
||||||
|
|
@ -163,18 +170,7 @@ const useTableColumns = () => {
|
||||||
statusStyles
|
statusStyles
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{(Number(row.original?.statusId) == 2 &&
|
{label}
|
||||||
!row.original?.reviewedAtLevel !== null &&
|
|
||||||
!row.original?.reviewedAtLevel?.includes(
|
|
||||||
`:${Number(userLevelId)}:`
|
|
||||||
) &&
|
|
||||||
Number(row.original?.creatorGroupLevelId) !=
|
|
||||||
Number(userLevelId)) ||
|
|
||||||
(Number(row.original?.statusId) == 1 &&
|
|
||||||
Number(row.original?.needApprovalFromLevel) ==
|
|
||||||
Number(userLevelId))
|
|
||||||
? "Menunggu Review"
|
|
||||||
: row.original?.statusName}{" "}
|
|
||||||
</Badge>
|
</Badge>
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
|
|
|
||||||
|
|
@ -281,11 +281,11 @@ export default function DetailDaily() {
|
||||||
|
|
||||||
const output = form.watch("output");
|
const output = form.watch("output");
|
||||||
|
|
||||||
const isAllChecked = items.every((item) => output?.includes(item.id));
|
const isAllChecked = output && items.every((item) => output.includes(item.id));
|
||||||
|
|
||||||
const unit = form.watch("unit");
|
const unit = form.watch("unit");
|
||||||
|
|
||||||
const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
|
const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
|
||||||
|
|
||||||
const handleAllCheckedChange = (checked: boolean | string) => {
|
const handleAllCheckedChange = (checked: boolean | string) => {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
|
|
@ -318,11 +318,11 @@ export default function DetailDaily() {
|
||||||
|
|
||||||
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
form.setValue("unit", [...unit, id]);
|
form.setValue("unit", [...(unit ?? []), id]);
|
||||||
} else {
|
} else {
|
||||||
if (id == "2") {
|
if (id == "2") {
|
||||||
const temp = [];
|
const temp = [];
|
||||||
for (const element of unit) {
|
for (const element of unit ?? []) {
|
||||||
if (element == "1") {
|
if (element == "1") {
|
||||||
temp.push("1");
|
temp.push("1");
|
||||||
}
|
}
|
||||||
|
|
@ -331,7 +331,7 @@ export default function DetailDaily() {
|
||||||
} else {
|
} else {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"unit",
|
"unit",
|
||||||
unit.filter((value) => value !== id)
|
(unit ?? []).filter((value) => value !== id)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -542,14 +542,14 @@ export default function DetailDaily() {
|
||||||
id={list.id}
|
id={list.id}
|
||||||
name={`all${list.id}`}
|
name={`all${list.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("2")
|
unit?.includes("2") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[list.id]
|
: !!selected[list.id]
|
||||||
}
|
}
|
||||||
onCheckedChange={() =>
|
onCheckedChange={() =>
|
||||||
handleParentChange(list.id)
|
handleParentChange(list.id)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("2")}
|
disabled={unit?.includes("2") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={list.name}
|
htmlFor={list.name}
|
||||||
|
|
@ -564,7 +564,7 @@ export default function DetailDaily() {
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selectAll[list.id]
|
: !!selectAll[list.id]
|
||||||
}
|
}
|
||||||
|
|
@ -574,7 +574,7 @@ export default function DetailDaily() {
|
||||||
Boolean(e)
|
Boolean(e)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor="all-polres"
|
htmlFor="all-polres"
|
||||||
|
|
@ -592,7 +592,7 @@ export default function DetailDaily() {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
id={`${list.id}${subDes.id}`}
|
id={`${list.id}${subDes.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[
|
: !!selected[
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
|
|
@ -603,7 +603,7 @@ export default function DetailDaily() {
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={`${list.id}${subDes.id}`}
|
htmlFor={`${list.id}${subDes.id}`}
|
||||||
|
|
|
||||||
|
|
@ -294,11 +294,11 @@ export default function EditDaily() {
|
||||||
|
|
||||||
const output = form.watch("output");
|
const output = form.watch("output");
|
||||||
|
|
||||||
const isAllChecked = items.every((item) => output?.includes(item.id));
|
const isAllChecked = output && items.every((item) => output.includes(item.id));
|
||||||
|
|
||||||
const unit = form.watch("unit");
|
const unit = form.watch("unit");
|
||||||
|
|
||||||
const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
|
const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
|
||||||
|
|
||||||
const handleAllCheckedChange = (checked: boolean | string) => {
|
const handleAllCheckedChange = (checked: boolean | string) => {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
|
|
@ -314,7 +314,7 @@ export default function EditDaily() {
|
||||||
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
|
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"output",
|
"output",
|
||||||
checked ? [...output, id] : output.filter((value) => value !== id)
|
checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -331,11 +331,11 @@ export default function EditDaily() {
|
||||||
|
|
||||||
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
form.setValue("unit", [...unit, id]);
|
form.setValue("unit", [...(unit ?? []), id]);
|
||||||
} else {
|
} else {
|
||||||
if (id == "2") {
|
if (id == "2") {
|
||||||
const temp = [];
|
const temp = [];
|
||||||
for (const element of unit) {
|
for (const element of unit ?? []) {
|
||||||
if (element == "1") {
|
if (element == "1") {
|
||||||
temp.push("1");
|
temp.push("1");
|
||||||
}
|
}
|
||||||
|
|
@ -344,7 +344,7 @@ export default function EditDaily() {
|
||||||
} else {
|
} else {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"unit",
|
"unit",
|
||||||
unit.filter((value) => value !== id)
|
(unit ?? []).filter((value) => value !== id)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -506,7 +506,7 @@ export default function EditDaily() {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={unit?.includes(item.id)}
|
checked={unit?.includes(item.id)}
|
||||||
disabled={
|
disabled={
|
||||||
item.id === "3" && !unit.includes("2")
|
item.id === "3" && !(unit?.includes("2") ?? false)
|
||||||
}
|
}
|
||||||
onCheckedChange={(checked) =>
|
onCheckedChange={(checked) =>
|
||||||
handleUnitCheckedChange(item.id, checked)
|
handleUnitCheckedChange(item.id, checked)
|
||||||
|
|
@ -550,14 +550,14 @@ export default function EditDaily() {
|
||||||
id={list.id}
|
id={list.id}
|
||||||
name={`all${list.id}`}
|
name={`all${list.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("2")
|
unit?.includes("2") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[list.id]
|
: !!selected[list.id]
|
||||||
}
|
}
|
||||||
onCheckedChange={() =>
|
onCheckedChange={() =>
|
||||||
handleParentChange(list.id)
|
handleParentChange(list.id)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("2")}
|
disabled={unit?.includes("2") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={list.name}
|
htmlFor={list.name}
|
||||||
|
|
@ -572,7 +572,7 @@ export default function EditDaily() {
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selectAll[list.id]
|
: !!selectAll[list.id]
|
||||||
}
|
}
|
||||||
|
|
@ -582,7 +582,7 @@ export default function EditDaily() {
|
||||||
Boolean(e)
|
Boolean(e)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor="all-polres"
|
htmlFor="all-polres"
|
||||||
|
|
@ -600,7 +600,7 @@ export default function EditDaily() {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
id={`${list.id}${subDes.id}`}
|
id={`${list.id}${subDes.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[
|
: !!selected[
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
|
|
@ -611,7 +611,7 @@ export default function EditDaily() {
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={`${list.id}${subDes.id}`}
|
htmlFor={`${list.id}${subDes.id}`}
|
||||||
|
|
|
||||||
|
|
@ -242,11 +242,11 @@ export default function CreateDaily() {
|
||||||
|
|
||||||
const output = form.watch("output");
|
const output = form.watch("output");
|
||||||
|
|
||||||
const isAllChecked = items.every((item) => output?.includes(item.id));
|
const isAllChecked = output && items.every((item) => output.includes(item.id));
|
||||||
|
|
||||||
const unit = form.watch("unit");
|
const unit = form.watch("unit");
|
||||||
|
|
||||||
const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
|
const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
|
||||||
|
|
||||||
const handleAllCheckedChange = (checked: boolean | string) => {
|
const handleAllCheckedChange = (checked: boolean | string) => {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
|
|
@ -262,7 +262,7 @@ export default function CreateDaily() {
|
||||||
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
|
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"output",
|
"output",
|
||||||
checked ? [...output, id] : output.filter((value) => value !== id)
|
checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -279,11 +279,11 @@ export default function CreateDaily() {
|
||||||
|
|
||||||
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
form.setValue("unit", [...unit, id]);
|
form.setValue("unit", [...(unit ?? []), id]);
|
||||||
} else {
|
} else {
|
||||||
if (id == "2") {
|
if (id == "2") {
|
||||||
const temp = [];
|
const temp = [];
|
||||||
for (const element of unit) {
|
for (const element of unit ?? []) {
|
||||||
if (element == "1") {
|
if (element == "1") {
|
||||||
temp.push("1");
|
temp.push("1");
|
||||||
}
|
}
|
||||||
|
|
@ -292,7 +292,7 @@ export default function CreateDaily() {
|
||||||
} else {
|
} else {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"unit",
|
"unit",
|
||||||
unit.filter((value) => value !== id)
|
(unit ?? []).filter((value) => value !== id)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -472,7 +472,7 @@ export default function CreateDaily() {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={unit?.includes(item.id)}
|
checked={unit?.includes(item.id)}
|
||||||
disabled={
|
disabled={
|
||||||
item.id === "3" && !unit.includes("2")
|
item.id === "3" && !(unit?.includes("2") ?? false)
|
||||||
}
|
}
|
||||||
onCheckedChange={(checked) =>
|
onCheckedChange={(checked) =>
|
||||||
handleUnitCheckedChange(item.id, checked)
|
handleUnitCheckedChange(item.id, checked)
|
||||||
|
|
@ -516,14 +516,14 @@ export default function CreateDaily() {
|
||||||
id={list.id}
|
id={list.id}
|
||||||
name={`all${list.id}`}
|
name={`all${list.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("2")
|
unit?.includes("2") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[list.id]
|
: !!selected[list.id]
|
||||||
}
|
}
|
||||||
onCheckedChange={() =>
|
onCheckedChange={() =>
|
||||||
handleParentChange(list.id)
|
handleParentChange(list.id)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("2")}
|
disabled={unit?.includes("2") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={list.name}
|
htmlFor={list.name}
|
||||||
|
|
@ -538,7 +538,7 @@ export default function CreateDaily() {
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selectAll[list.id]
|
: !!selectAll[list.id]
|
||||||
}
|
}
|
||||||
|
|
@ -548,7 +548,7 @@ export default function CreateDaily() {
|
||||||
Boolean(e)
|
Boolean(e)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor="all-polres"
|
htmlFor="all-polres"
|
||||||
|
|
@ -566,7 +566,7 @@ export default function CreateDaily() {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
id={`${list.id}${subDes.id}`}
|
id={`${list.id}${subDes.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[
|
: !!selected[
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
|
|
@ -577,7 +577,7 @@ export default function CreateDaily() {
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={`${list.id}${subDes.id}`}
|
htmlFor={`${list.id}${subDes.id}`}
|
||||||
|
|
|
||||||
|
|
@ -281,11 +281,11 @@ export default function DetailDaily() {
|
||||||
|
|
||||||
const output = form.watch("output");
|
const output = form.watch("output");
|
||||||
|
|
||||||
const isAllChecked = items.every((item) => output?.includes(item.id));
|
const isAllChecked = output && items.every((item) => output.includes(item.id));
|
||||||
|
|
||||||
const unit = form.watch("unit");
|
const unit = form.watch("unit");
|
||||||
|
|
||||||
const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
|
const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
|
||||||
|
|
||||||
const handleAllCheckedChange = (checked: boolean | string) => {
|
const handleAllCheckedChange = (checked: boolean | string) => {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
|
|
@ -301,7 +301,7 @@ export default function DetailDaily() {
|
||||||
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
|
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"output",
|
"output",
|
||||||
checked ? [...output, id] : output.filter((value) => value !== id)
|
checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -318,11 +318,11 @@ export default function DetailDaily() {
|
||||||
|
|
||||||
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
form.setValue("unit", [...unit, id]);
|
form.setValue("unit", [...(unit ?? []), id]);
|
||||||
} else {
|
} else {
|
||||||
if (id == "2") {
|
if (id == "2") {
|
||||||
const temp = [];
|
const temp = [];
|
||||||
for (const element of unit) {
|
for (const element of unit ?? []) {
|
||||||
if (element == "1") {
|
if (element == "1") {
|
||||||
temp.push("1");
|
temp.push("1");
|
||||||
}
|
}
|
||||||
|
|
@ -331,7 +331,7 @@ export default function DetailDaily() {
|
||||||
} else {
|
} else {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"unit",
|
"unit",
|
||||||
unit.filter((value) => value !== id)
|
(unit ?? []).filter((value) => value !== id)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -542,14 +542,14 @@ export default function DetailDaily() {
|
||||||
id={list.id}
|
id={list.id}
|
||||||
name={`all${list.id}`}
|
name={`all${list.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("2")
|
unit?.includes("2") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[list.id]
|
: !!selected[list.id]
|
||||||
}
|
}
|
||||||
onCheckedChange={() =>
|
onCheckedChange={() =>
|
||||||
handleParentChange(list.id)
|
handleParentChange(list.id)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("2")}
|
disabled={unit?.includes("2") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={list.name}
|
htmlFor={list.name}
|
||||||
|
|
@ -564,7 +564,7 @@ export default function DetailDaily() {
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selectAll[list.id]
|
: !!selectAll[list.id]
|
||||||
}
|
}
|
||||||
|
|
@ -574,7 +574,7 @@ export default function DetailDaily() {
|
||||||
Boolean(e)
|
Boolean(e)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor="all-polres"
|
htmlFor="all-polres"
|
||||||
|
|
@ -592,7 +592,7 @@ export default function DetailDaily() {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
id={`${list.id}${subDes.id}`}
|
id={`${list.id}${subDes.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[
|
: !!selected[
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
|
|
@ -603,7 +603,7 @@ export default function DetailDaily() {
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={`${list.id}${subDes.id}`}
|
htmlFor={`${list.id}${subDes.id}`}
|
||||||
|
|
|
||||||
|
|
@ -294,11 +294,11 @@ export default function EditDaily() {
|
||||||
|
|
||||||
const output = form.watch("output");
|
const output = form.watch("output");
|
||||||
|
|
||||||
const isAllChecked = items.every((item) => output?.includes(item.id));
|
const isAllChecked = output && items.every((item) => output.includes(item.id));
|
||||||
|
|
||||||
const unit = form.watch("unit");
|
const unit = form.watch("unit");
|
||||||
|
|
||||||
const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
|
const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
|
||||||
|
|
||||||
const handleAllCheckedChange = (checked: boolean | string) => {
|
const handleAllCheckedChange = (checked: boolean | string) => {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
|
|
@ -314,7 +314,7 @@ export default function EditDaily() {
|
||||||
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
|
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"output",
|
"output",
|
||||||
checked ? [...output, id] : output.filter((value) => value !== id)
|
checked ? [...(output ?? []), id] : (output ?? []).filter((value) => value !== id)
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
@ -331,11 +331,11 @@ export default function EditDaily() {
|
||||||
|
|
||||||
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
if (checked) {
|
if (checked) {
|
||||||
form.setValue("unit", [...unit, id]);
|
form.setValue("unit", [...(unit ?? []), id]);
|
||||||
} else {
|
} else {
|
||||||
if (id == "2") {
|
if (id == "2") {
|
||||||
const temp = [];
|
const temp = [];
|
||||||
for (const element of unit) {
|
for (const element of unit ?? []) {
|
||||||
if (element == "1") {
|
if (element == "1") {
|
||||||
temp.push("1");
|
temp.push("1");
|
||||||
}
|
}
|
||||||
|
|
@ -344,7 +344,7 @@ export default function EditDaily() {
|
||||||
} else {
|
} else {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"unit",
|
"unit",
|
||||||
unit.filter((value) => value !== id)
|
(unit ?? []).filter((value) => value !== id)
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -506,7 +506,7 @@ export default function EditDaily() {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={unit?.includes(item.id)}
|
checked={unit?.includes(item.id)}
|
||||||
disabled={
|
disabled={
|
||||||
item.id === "3" && !unit.includes("2")
|
item.id === "3" && !(unit?.includes("2") ?? false)
|
||||||
}
|
}
|
||||||
onCheckedChange={(checked) =>
|
onCheckedChange={(checked) =>
|
||||||
handleUnitCheckedChange(item.id, checked)
|
handleUnitCheckedChange(item.id, checked)
|
||||||
|
|
@ -550,14 +550,14 @@ export default function EditDaily() {
|
||||||
id={list.id}
|
id={list.id}
|
||||||
name={`all${list.id}`}
|
name={`all${list.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("2")
|
unit?.includes("2") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[list.id]
|
: !!selected[list.id]
|
||||||
}
|
}
|
||||||
onCheckedChange={() =>
|
onCheckedChange={() =>
|
||||||
handleParentChange(list.id)
|
handleParentChange(list.id)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("2")}
|
disabled={unit?.includes("2") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={list.name}
|
htmlFor={list.name}
|
||||||
|
|
@ -572,7 +572,7 @@ export default function EditDaily() {
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selectAll[list.id]
|
: !!selectAll[list.id]
|
||||||
}
|
}
|
||||||
|
|
@ -582,7 +582,7 @@ export default function EditDaily() {
|
||||||
Boolean(e)
|
Boolean(e)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor="all-polres"
|
htmlFor="all-polres"
|
||||||
|
|
@ -600,7 +600,7 @@ export default function EditDaily() {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
id={`${list.id}${subDes.id}`}
|
id={`${list.id}${subDes.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[
|
: !!selected[
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
|
|
@ -611,7 +611,7 @@ export default function EditDaily() {
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={`${list.id}${subDes.id}`}
|
htmlFor={`${list.id}${subDes.id}`}
|
||||||
|
|
|
||||||
|
|
@ -264,9 +264,9 @@ export default function CreateDaily() {
|
||||||
const media = form.watch("media");
|
const media = form.watch("media");
|
||||||
const unit = form.watch("unit");
|
const unit = form.watch("unit");
|
||||||
|
|
||||||
const isAllChecked = items.every((item) => output?.includes(item.id));
|
const isAllChecked = output && items.every((item) => output.includes(item.id));
|
||||||
const isAllMediaChecked = medias.every((item) => media?.includes(item.id));
|
const isAllMediaChecked = media && medias.every((item) => media.includes(item.id));
|
||||||
const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
|
const isAllUnitChecked = unit && units.every((item) => unit.includes(item.id));
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
async function initState() {
|
async function initState() {
|
||||||
|
|
@ -398,10 +398,8 @@ export default function CreateDaily() {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"output",
|
"output",
|
||||||
checked
|
checked
|
||||||
? [...output, item.id]
|
? [...(output ?? []), item.id]
|
||||||
: output.filter(
|
: (output ?? []).filter((value) => value !== item.id)
|
||||||
(value) => value !== item.id
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
@ -464,16 +462,14 @@ export default function CreateDaily() {
|
||||||
checked={unit?.includes(item.id)}
|
checked={unit?.includes(item.id)}
|
||||||
disabled={
|
disabled={
|
||||||
item.id === "polres" &&
|
item.id === "polres" &&
|
||||||
!unit.includes("polda")
|
!(unit?.includes("polda") ?? false)
|
||||||
}
|
}
|
||||||
onCheckedChange={(checked) => {
|
onCheckedChange={(checked) => {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"unit",
|
"unit",
|
||||||
checked
|
checked
|
||||||
? [...unit, item.id]
|
? [...(unit ?? []), item.id]
|
||||||
: unit.filter(
|
: (unit ?? []).filter((value) => value !== item.id)
|
||||||
(value) => value !== item.id
|
|
||||||
)
|
|
||||||
);
|
);
|
||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
|
|
@ -515,14 +511,14 @@ export default function CreateDaily() {
|
||||||
id={list.id}
|
id={list.id}
|
||||||
name={`all${list.id}`}
|
name={`all${list.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("2")
|
unit?.includes("2") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[list.id]
|
: !!selected[list.id]
|
||||||
}
|
}
|
||||||
onCheckedChange={() =>
|
onCheckedChange={() =>
|
||||||
handleParentChange(list.id)
|
handleParentChange(list.id)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("2")}
|
disabled={unit?.includes("2") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={list.name}
|
htmlFor={list.name}
|
||||||
|
|
@ -537,7 +533,7 @@ export default function CreateDaily() {
|
||||||
<div className="flex items-center space-x-2">
|
<div className="flex items-center space-x-2">
|
||||||
<Checkbox
|
<Checkbox
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selectAll[list.id]
|
: !!selectAll[list.id]
|
||||||
}
|
}
|
||||||
|
|
@ -547,7 +543,7 @@ export default function CreateDaily() {
|
||||||
Boolean(e)
|
Boolean(e)
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor="all-polres"
|
htmlFor="all-polres"
|
||||||
|
|
@ -565,7 +561,7 @@ export default function CreateDaily() {
|
||||||
<Checkbox
|
<Checkbox
|
||||||
id={`${list.id}${subDes.id}`}
|
id={`${list.id}${subDes.id}`}
|
||||||
checked={
|
checked={
|
||||||
unit.includes("3")
|
unit?.includes("3") ?? false
|
||||||
? true
|
? true
|
||||||
: !!selected[
|
: !!selected[
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
|
|
@ -576,7 +572,7 @@ export default function CreateDaily() {
|
||||||
`${list.id}${subDes.id}`
|
`${list.id}${subDes.id}`
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
disabled={unit.includes("3")}
|
disabled={unit?.includes("3") ?? false}
|
||||||
/>
|
/>
|
||||||
<label
|
<label
|
||||||
htmlFor={`${list.id}${subDes.id}`}
|
htmlFor={`${list.id}${subDes.id}`}
|
||||||
|
|
@ -648,8 +644,8 @@ export default function CreateDaily() {
|
||||||
form.setValue(
|
form.setValue(
|
||||||
"media",
|
"media",
|
||||||
checked
|
checked
|
||||||
? [...media, item.id]
|
? [...(media ?? []), item.id]
|
||||||
: media.filter(
|
: (media ?? []).filter(
|
||||||
(value) => value !== item.id
|
(value) => value !== item.id
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
|
||||||
|
|
@ -24,6 +24,7 @@ import {
|
||||||
} from "@/components/ui/table";
|
} from "@/components/ui/table";
|
||||||
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||||
import {
|
import {
|
||||||
|
ChevronDown,
|
||||||
ChevronLeft,
|
ChevronLeft,
|
||||||
ChevronRight,
|
ChevronRight,
|
||||||
Eye,
|
Eye,
|
||||||
|
|
@ -61,6 +62,7 @@ import {
|
||||||
SelectValue,
|
SelectValue,
|
||||||
} from "@/components/ui/select";
|
} from "@/components/ui/select";
|
||||||
import { useTranslations } from "next-intl";
|
import { useTranslations } from "next-intl";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
|
||||||
type StatusFilter = string[];
|
type StatusFilter = string[];
|
||||||
|
|
||||||
|
|
@ -87,7 +89,8 @@ const ContentTable = () => {
|
||||||
const userLevelId = getCookiesDecrypt("ulie");
|
const userLevelId = getCookiesDecrypt("ulie");
|
||||||
const [categories, setCategories] = React.useState<string[]>();
|
const [categories, setCategories] = React.useState<string[]>();
|
||||||
const [categoryFilter, setCategoryFilter] = React.useState<string[]>([]);
|
const [categoryFilter, setCategoryFilter] = React.useState<string[]>([]);
|
||||||
const [statusFilter, setStatusFilter] = React.useState<StatusFilter>([]);
|
// const [statusFilter, setStatusFilter] = React.useState<StatusFilter>([]);
|
||||||
|
const [statusFilter, setStatusFilter] = React.useState<any[]>([]);
|
||||||
const [startDateString, setStartDateString] = React.useState<string>("");
|
const [startDateString, setStartDateString] = React.useState<string>("");
|
||||||
const [endDateString, setEndDateString] = React.useState<string>("");
|
const [endDateString, setEndDateString] = React.useState<string>("");
|
||||||
const [filterByCreator, setFilterByCreator] = React.useState<string>("");
|
const [filterByCreator, setFilterByCreator] = React.useState<string>("");
|
||||||
|
|
@ -168,6 +171,14 @@ const ContentTable = () => {
|
||||||
table.getColumn("judul")?.setFilterValue(e.target.value);
|
table.getColumn("judul")?.setFilterValue(e.target.value);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function handleStatusCheckboxChange(value: any) {
|
||||||
|
setStatusFilter((prev: any) =>
|
||||||
|
prev.includes(value)
|
||||||
|
? prev.filter((status: any) => status !== value)
|
||||||
|
: [...prev, value]
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="w-full overflow-x-auto">
|
<div className="w-full overflow-x-auto">
|
||||||
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between md:flex-row md:items-center md:justify-between lg:flex-row items-start lg:justify-between lg:items-center px-5">
|
<div className="flex flex-col sm:flex-row sm:items-center sm:justify-between md:flex-row md:items-center md:justify-between lg:flex-row items-start lg:justify-between lg:items-center px-5">
|
||||||
|
|
@ -185,43 +196,88 @@ const ContentTable = () => {
|
||||||
/>
|
/>
|
||||||
</InputGroup>
|
</InputGroup>
|
||||||
</div>
|
</div>
|
||||||
<div className=" items-center gap-3 w-full md:w-[200px]">
|
<div className="flex flex-row gap-3">
|
||||||
{/* <Select
|
<div className=" items-center gap-3 w-full md:w-[152px] border border-black rounded-lg">
|
||||||
onValueChange={(value) => {
|
<Select
|
||||||
setStatusFilter([value]);
|
onValueChange={(value) => {
|
||||||
}}
|
setFileTypeFilter([value]);
|
||||||
>
|
}}
|
||||||
<SelectTrigger className="w-[180px]">
|
>
|
||||||
<SelectValue placeholder="Select a Filter Status" />
|
<SelectTrigger className="w-full lg:w-[150px]">
|
||||||
</SelectTrigger>
|
<SelectValue placeholder={t("selectFilter")} />
|
||||||
<SelectContent>
|
</SelectTrigger>
|
||||||
<SelectGroup>
|
<SelectContent>
|
||||||
<SelectLabel>Status</SelectLabel>
|
<SelectGroup>
|
||||||
<SelectItem value="1">Menunggu Review</SelectItem>
|
<SelectLabel>Filter</SelectLabel>
|
||||||
<SelectItem value="2">Diterima</SelectItem>
|
<SelectItem value="1">{t("image")}</SelectItem>
|
||||||
<SelectItem value="3">Minta Update</SelectItem>
|
<SelectItem value="2">{t("audio-visual")}</SelectItem>
|
||||||
<SelectItem value="4">Ditolak</SelectItem>
|
<SelectItem value="3">{t("text")}</SelectItem>
|
||||||
</SelectGroup>
|
<SelectItem value="4">{t("audio")}</SelectItem>
|
||||||
</SelectContent>
|
</SelectGroup>
|
||||||
</Select> */}
|
</SelectContent>
|
||||||
<Select
|
</Select>
|
||||||
onValueChange={(value) => {
|
</div>
|
||||||
setFileTypeFilter([value]);
|
<DropdownMenu>
|
||||||
}}
|
<DropdownMenuTrigger asChild>
|
||||||
>
|
<Button variant="outline" className="ml-auto" size="md">
|
||||||
<SelectTrigger className="w-full lg:w-[180px]">
|
Filter <ChevronDown />
|
||||||
<SelectValue placeholder={t("selectFilter")} />
|
</Button>
|
||||||
</SelectTrigger>
|
</DropdownMenuTrigger>
|
||||||
<SelectContent>
|
<DropdownMenuContent
|
||||||
<SelectGroup>
|
align="end"
|
||||||
<SelectLabel>Filter</SelectLabel>
|
className="w-64 h-[150px] overflow-y-auto"
|
||||||
<SelectItem value="1">{t("image")}</SelectItem>
|
>
|
||||||
<SelectItem value="2">{t("audio-visual")}</SelectItem>
|
<Label className="ml-2 mt-2">Status</Label>
|
||||||
<SelectItem value="3">{t("text")}</SelectItem>
|
<div className="flex items-center px-4 py-1">
|
||||||
<SelectItem value="4">Audio</SelectItem>
|
<input
|
||||||
</SelectGroup>
|
type="checkbox"
|
||||||
</SelectContent>
|
id="status-2"
|
||||||
</Select>
|
className="mr-2"
|
||||||
|
checked={statusFilter.includes(1)}
|
||||||
|
onChange={() => handleStatusCheckboxChange(1)}
|
||||||
|
/>
|
||||||
|
<label htmlFor="status-2" className="text-sm">
|
||||||
|
Menunggu Review
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center px-4 py-1">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="status-2"
|
||||||
|
className="mr-2"
|
||||||
|
checked={statusFilter.includes(2)}
|
||||||
|
onChange={() => handleStatusCheckboxChange(2)}
|
||||||
|
/>
|
||||||
|
<label htmlFor="status-2" className="text-sm">
|
||||||
|
Diterima
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center px-4 py-1">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="status-3"
|
||||||
|
className="mr-2"
|
||||||
|
checked={statusFilter.includes(3)}
|
||||||
|
onChange={() => handleStatusCheckboxChange(3)}
|
||||||
|
/>
|
||||||
|
<label htmlFor="status-3" className="text-sm">
|
||||||
|
Minta Update
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center px-4 py-1">
|
||||||
|
<input
|
||||||
|
type="checkbox"
|
||||||
|
id="status-4"
|
||||||
|
className="mr-2"
|
||||||
|
checked={statusFilter.includes(4)}
|
||||||
|
onChange={() => handleStatusCheckboxChange(4)}
|
||||||
|
/>
|
||||||
|
<label htmlFor="status-4" className="text-sm">
|
||||||
|
Ditolak
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<Table className="overflow-hidden mt-3">
|
<Table className="overflow-hidden mt-3">
|
||||||
|
|
|
||||||
|
|
@ -81,8 +81,8 @@ export default function CreateSpvFAQModal() {
|
||||||
});
|
});
|
||||||
|
|
||||||
const target = form.watch("publishTo");
|
const target = form.watch("publishTo");
|
||||||
const isAllTargetChecked = publishToList.every((item) =>
|
const isAllTargetChecked = target && publishToList.every((item) =>
|
||||||
target?.includes(item.id)
|
target.includes(item.id)
|
||||||
);
|
);
|
||||||
|
|
||||||
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||||
|
|
|
||||||
|
|
@ -98,7 +98,6 @@ export default function FilterPage() {
|
||||||
setSearchTitle(title);
|
setSearchTitle(title);
|
||||||
setCategoryFilter(category ? category.split("&") : []);
|
setCategoryFilter(category ? category.split("&") : []);
|
||||||
setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
|
setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
|
||||||
|
|
||||||
}, [searchParams]);
|
}, [searchParams]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -120,7 +119,7 @@ export default function FilterPage() {
|
||||||
"",
|
"",
|
||||||
isInt,
|
isInt,
|
||||||
pageNumber
|
pageNumber
|
||||||
);
|
);
|
||||||
|
|
||||||
const content = response?.data?.data?.content || [];
|
const content = response?.data?.data?.content || [];
|
||||||
const total = response?.data?.data?.totalPages || 1;
|
const total = response?.data?.data?.totalPages || 1;
|
||||||
|
|
@ -437,10 +436,21 @@ export default function FilterPage() {
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
|
{!title ? (
|
||||||
"downloadableContent",
|
<p>
|
||||||
{ defaultValue: "Downloadable ContentS" }
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
)}`}</p>
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
|
||||||
|
|
@ -486,10 +486,27 @@ const FilterPage = () => {
|
||||||
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
||||||
<p>
|
<p>
|
||||||
{" "}
|
{" "}
|
||||||
Audio {">"} <span className="font-bold">{t("allAudio", { defaultValue: "All Audio" })}</span>
|
Audio {">"}{" "}
|
||||||
|
<span className="font-bold">
|
||||||
|
{t("allAudio", { defaultValue: "All Audio" })}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableAudio", { defaultValue: "Downloadable Audio" })}`}</p>
|
{!title ? (
|
||||||
|
<p>
|
||||||
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
@ -529,7 +546,9 @@ const FilterPage = () => {
|
||||||
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
onChange={(date) => setMonthYearFilter(date)}
|
onChange={(date) => setMonthYearFilter(date)}
|
||||||
dateFormat="MM | yyyy"
|
dateFormat="MM | yyyy"
|
||||||
placeholderText={t("selectYear", { defaultValue: "Select Year" })}
|
placeholderText={t("selectYear", {
|
||||||
|
defaultValue: "Select Year",
|
||||||
|
})}
|
||||||
showMonthYearPicker
|
showMonthYearPicker
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -547,7 +566,9 @@ const FilterPage = () => {
|
||||||
onChange={(update) => {
|
onChange={(update) => {
|
||||||
setDateRange(update);
|
setDateRange(update);
|
||||||
}}
|
}}
|
||||||
placeholderText={t("searchDate", { defaultValue: "Search Date" })}
|
placeholderText={t("searchDate", {
|
||||||
|
defaultValue: "Search Date",
|
||||||
|
})}
|
||||||
onCalendarClose={() => setCalenderState(!calenderState)}
|
onCalendarClose={() => setCalenderState(!calenderState)}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|
@ -707,14 +728,20 @@ const FilterPage = () => {
|
||||||
<div className="w-full pr-4 lg:pr-16 pb-4">
|
<div className="w-full pr-4 lg:pr-16 pb-4">
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="flex flex-col items-end mb-4">
|
<div className="flex flex-col items-end mb-4">
|
||||||
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })} </h2>
|
<h2 className="text-lg font-semibold">
|
||||||
|
{t("sortBy", { defaultValue: "Sort By" })}{" "}
|
||||||
|
</h2>
|
||||||
<select
|
<select
|
||||||
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
||||||
onChange={(e) => handleSorting(e)}
|
onChange={(e) => handleSorting(e)}
|
||||||
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
>
|
>
|
||||||
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
|
<option value="latest">
|
||||||
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
|
{t("latest", { defaultValue: "Latest" })}
|
||||||
|
</option>
|
||||||
|
<option value="popular">
|
||||||
|
{t("mostPopular", { defaultValue: "Most Popular" })}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -502,10 +502,27 @@ const FilterPage = () => {
|
||||||
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
||||||
<p>
|
<p>
|
||||||
{" "}
|
{" "}
|
||||||
{t("text", { defaultValue: "Text" })} {">"} <span className="font-bold">{t("allText", { defaultValue: "All Text" })}</span>
|
{t("text", { defaultValue: "Text" })} {">"}{" "}
|
||||||
|
<span className="font-bold">
|
||||||
|
{t("allText", { defaultValue: "All Text" })}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableText", { defaultValue: "Downloadable Text" })}`}</p>
|
{!title ? (
|
||||||
|
<p>
|
||||||
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
@ -545,7 +562,9 @@ const FilterPage = () => {
|
||||||
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
onChange={(date) => setMonthYearFilter(date)}
|
onChange={(date) => setMonthYearFilter(date)}
|
||||||
dateFormat="MM | yyyy"
|
dateFormat="MM | yyyy"
|
||||||
placeholderText={t("selectYear", { defaultValue: "Select Year" })}
|
placeholderText={t("selectYear", {
|
||||||
|
defaultValue: "Select Year",
|
||||||
|
})}
|
||||||
showMonthYearPicker
|
showMonthYearPicker
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -563,7 +582,9 @@ const FilterPage = () => {
|
||||||
onChange={(update) => {
|
onChange={(update) => {
|
||||||
setDateRange(update);
|
setDateRange(update);
|
||||||
}}
|
}}
|
||||||
placeholderText={t("selectDate", { defaultValue: "Select Date" })}
|
placeholderText={t("selectDate", {
|
||||||
|
defaultValue: "Select Date",
|
||||||
|
})}
|
||||||
onCalendarClose={() => setCalenderState(!calenderState)}
|
onCalendarClose={() => setCalenderState(!calenderState)}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|
@ -769,14 +790,20 @@ const FilterPage = () => {
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="flex flex-col items-end mb-4">
|
<div className="flex flex-col items-end mb-4">
|
||||||
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
|
<h2 className="text-lg font-semibold">
|
||||||
|
{t("sortBy", { defaultValue: "Sort By" })}
|
||||||
|
</h2>
|
||||||
<select
|
<select
|
||||||
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
||||||
onChange={(e) => handleSorting(e)}
|
onChange={(e) => handleSorting(e)}
|
||||||
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
>
|
>
|
||||||
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
|
<option value="latest">
|
||||||
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
|
{t("latest", { defaultValue: "Latest" })}
|
||||||
|
</option>
|
||||||
|
<option value="popular">
|
||||||
|
{t("mostPopular", { defaultValue: "Most Popular" })}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -503,10 +503,26 @@ const FilterPage = () => {
|
||||||
<p> {t("image", { defaultValue: "Image" })}</p>
|
<p> {t("image", { defaultValue: "Image" })}</p>
|
||||||
{">"}
|
{">"}
|
||||||
<p>
|
<p>
|
||||||
<span className="font-bold">{t("allImage", { defaultValue: "All Image" })}</span>
|
<span className="font-bold">
|
||||||
|
{t("allImage", { defaultValue: "All Image" })}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableImage", { defaultValue: "Downloadable Image" })}`}</p>
|
{!title ? (
|
||||||
|
<p>
|
||||||
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
@ -542,7 +558,9 @@ const FilterPage = () => {
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
type="text"
|
type="text"
|
||||||
id="search"
|
id="search"
|
||||||
placeholder={t("searchTitle", { defaultValue: "Search Title" })}
|
placeholder={t("searchTitle", {
|
||||||
|
defaultValue: "Search Title",
|
||||||
|
})}
|
||||||
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -556,7 +574,9 @@ const FilterPage = () => {
|
||||||
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
onChange={(date) => setMonthYearFilter(date)}
|
onChange={(date) => setMonthYearFilter(date)}
|
||||||
dateFormat="MM | yyyy"
|
dateFormat="MM | yyyy"
|
||||||
placeholderText={t("selectYear", { defaultValue: "Select Year" })}
|
placeholderText={t("selectYear", {
|
||||||
|
defaultValue: "Select Year",
|
||||||
|
})}
|
||||||
showMonthYearPicker
|
showMonthYearPicker
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -574,7 +594,9 @@ const FilterPage = () => {
|
||||||
onChange={(update) => {
|
onChange={(update) => {
|
||||||
setDateRange(update);
|
setDateRange(update);
|
||||||
}}
|
}}
|
||||||
placeholderText={t("selectDate", { defaultValue: "Select Date" })}
|
placeholderText={t("selectDate", {
|
||||||
|
defaultValue: "Select Date",
|
||||||
|
})}
|
||||||
onCalendarClose={() => setCalenderState(!calenderState)}
|
onCalendarClose={() => setCalenderState(!calenderState)}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|
@ -753,14 +775,20 @@ const FilterPage = () => {
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="flex flex-col items-end mb-4">
|
<div className="flex flex-col items-end mb-4">
|
||||||
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
|
<h2 className="text-lg font-semibold">
|
||||||
|
{t("sortBy", { defaultValue: "Sort By" })}
|
||||||
|
</h2>
|
||||||
<select
|
<select
|
||||||
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
||||||
onChange={(e) => handleSorting(e)}
|
onChange={(e) => handleSorting(e)}
|
||||||
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
>
|
>
|
||||||
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
|
<option value="latest">
|
||||||
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
|
{t("latest", { defaultValue: "Latest" })}
|
||||||
|
</option>
|
||||||
|
<option value="popular">
|
||||||
|
{t("mostPopular", { defaultValue: "Most Popular" })}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -499,10 +499,27 @@ const FilterPage = () => {
|
||||||
<p>
|
<p>
|
||||||
{" "}
|
{" "}
|
||||||
{t("video", { defaultValue: "Video" })}
|
{t("video", { defaultValue: "Video" })}
|
||||||
{">"} <span className="font-bold">{t("allVideo", { defaultValue: "All Video" })}</span>
|
{">"}{" "}
|
||||||
|
<span className="font-bold">
|
||||||
|
{t("allVideo", { defaultValue: "All Video" })}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableVideo", { defaultValue: "Downloadable Video" })}`}</p>
|
{!title ? (
|
||||||
|
<p>
|
||||||
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
@ -542,7 +559,9 @@ const FilterPage = () => {
|
||||||
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
onChange={(date) => setMonthYearFilter(date)}
|
onChange={(date) => setMonthYearFilter(date)}
|
||||||
dateFormat="MM | yyyy"
|
dateFormat="MM | yyyy"
|
||||||
placeholderText={t("selectYear", { defaultValue: "Select Year" })}
|
placeholderText={t("selectYear", {
|
||||||
|
defaultValue: "Select Year",
|
||||||
|
})}
|
||||||
showMonthYearPicker
|
showMonthYearPicker
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -560,7 +579,9 @@ const FilterPage = () => {
|
||||||
onChange={(update) => {
|
onChange={(update) => {
|
||||||
setDateRange(update);
|
setDateRange(update);
|
||||||
}}
|
}}
|
||||||
placeholderText={t("selectDate", { defaultValue: "Select Date" })}
|
placeholderText={t("selectDate", {
|
||||||
|
defaultValue: "Select Date",
|
||||||
|
})}
|
||||||
onCalendarClose={() => setCalenderState(!calenderState)}
|
onCalendarClose={() => setCalenderState(!calenderState)}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|
@ -766,14 +787,20 @@ const FilterPage = () => {
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="w-full">
|
<div className="w-full">
|
||||||
<div className="flex flex-col items-end mb-4">
|
<div className="flex flex-col items-end mb-4">
|
||||||
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
|
<h2 className="text-lg font-semibold">
|
||||||
|
{t("sortBy", { defaultValue: "Sort By" })}
|
||||||
|
</h2>
|
||||||
<select
|
<select
|
||||||
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
||||||
onChange={(e) => handleSorting(e)}
|
onChange={(e) => handleSorting(e)}
|
||||||
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
>
|
>
|
||||||
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
|
<option value="latest">
|
||||||
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
|
{t("latest", { defaultValue: "Latest" })}
|
||||||
|
</option>
|
||||||
|
<option value="popular">
|
||||||
|
{t("mostPopular", { defaultValue: "Most Popular" })}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -319,7 +319,7 @@ const FilterPage = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleCategoryFilter = (e: boolean, id: string) => {
|
const handleCategoryFilter = (e: boolean, id: string) => {
|
||||||
let filter = [...categoryFilter];
|
let filter = [...categoryFilter];
|
||||||
|
|
||||||
if (e) {
|
if (e) {
|
||||||
|
|
@ -486,10 +486,27 @@ const FilterPage = () => {
|
||||||
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
<div className="flex flex-col md:flex-row items-start gap-5 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
||||||
<p>
|
<p>
|
||||||
{" "}
|
{" "}
|
||||||
Audio {">"} <span className="font-bold">{t("allAudio", { defaultValue: "All Audio" })}</span>
|
Audio {">"}{" "}
|
||||||
|
<span className="font-bold">
|
||||||
|
{t("allAudio", { defaultValue: "All Audio" })}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableAudio", { defaultValue: "Downloadable Audio" })}`}</p>
|
{!title ? (
|
||||||
|
<p>
|
||||||
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
@ -529,7 +546,9 @@ const FilterPage = () => {
|
||||||
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
onChange={(date) => setMonthYearFilter(date)}
|
onChange={(date) => setMonthYearFilter(date)}
|
||||||
dateFormat="MM | yyyy"
|
dateFormat="MM | yyyy"
|
||||||
placeholderText={t("selectYear", { defaultValue: "Select Year" })}
|
placeholderText={t("selectYear", {
|
||||||
|
defaultValue: "Select Year",
|
||||||
|
})}
|
||||||
showMonthYearPicker
|
showMonthYearPicker
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -547,7 +566,9 @@ const FilterPage = () => {
|
||||||
onChange={(update) => {
|
onChange={(update) => {
|
||||||
setDateRange(update);
|
setDateRange(update);
|
||||||
}}
|
}}
|
||||||
placeholderText={t("searchDate", { defaultValue: "Search Date" })}
|
placeholderText={t("searchDate", {
|
||||||
|
defaultValue: "Search Date",
|
||||||
|
})}
|
||||||
onCalendarClose={() => setCalenderState(!calenderState)}
|
onCalendarClose={() => setCalenderState(!calenderState)}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|
@ -707,14 +728,20 @@ const FilterPage = () => {
|
||||||
<div className="w-full pr-4 lg:pr-16 pb-4">
|
<div className="w-full pr-4 lg:pr-16 pb-4">
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="flex flex-col items-end mb-4">
|
<div className="flex flex-col items-end mb-4">
|
||||||
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })} </h2>
|
<h2 className="text-lg font-semibold">
|
||||||
|
{t("sortBy", { defaultValue: "Sort By" })}{" "}
|
||||||
|
</h2>
|
||||||
<select
|
<select
|
||||||
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
||||||
onChange={(e) => handleSorting(e)}
|
onChange={(e) => handleSorting(e)}
|
||||||
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
>
|
>
|
||||||
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
|
<option value="latest">
|
||||||
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
|
{t("latest", { defaultValue: "Latest" })}
|
||||||
|
</option>
|
||||||
|
<option value="popular">
|
||||||
|
{t("mostPopular", { defaultValue: "Most Popular" })}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -492,10 +492,27 @@ const FilterPage = () => {
|
||||||
<div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
<div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
||||||
<p>
|
<p>
|
||||||
{" "}
|
{" "}
|
||||||
{t("text", { defaultValue: "Text" })} {">"} <span className="font-bold">{t("allText", { defaultValue: "All Text" })}</span>
|
{t("text", { defaultValue: "Text" })} {">"}{" "}
|
||||||
|
<span className="font-bold">
|
||||||
|
{t("allText", { defaultValue: "All Text" })}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableText", { defaultValue: "Downloadable Text" })}`}</p>
|
{!title ? (
|
||||||
|
<p>
|
||||||
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
@ -535,7 +552,9 @@ const FilterPage = () => {
|
||||||
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
onChange={(date) => setMonthYearFilter(date)}
|
onChange={(date) => setMonthYearFilter(date)}
|
||||||
dateFormat="MM | yyyy"
|
dateFormat="MM | yyyy"
|
||||||
placeholderText={t("selectYear", { defaultValue: "Select Year" })}
|
placeholderText={t("selectYear", {
|
||||||
|
defaultValue: "Select Year",
|
||||||
|
})}
|
||||||
showMonthYearPicker
|
showMonthYearPicker
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -553,7 +572,9 @@ const FilterPage = () => {
|
||||||
onChange={(update) => {
|
onChange={(update) => {
|
||||||
setDateRange(update);
|
setDateRange(update);
|
||||||
}}
|
}}
|
||||||
placeholderText={t("selectDate", { defaultValue: "Select Date" })}
|
placeholderText={t("selectDate", {
|
||||||
|
defaultValue: "Select Date",
|
||||||
|
})}
|
||||||
onCalendarClose={() => setCalenderState(!calenderState)}
|
onCalendarClose={() => setCalenderState(!calenderState)}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|
@ -759,14 +780,20 @@ const FilterPage = () => {
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="flex flex-col items-end mb-4">
|
<div className="flex flex-col items-end mb-4">
|
||||||
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
|
<h2 className="text-lg font-semibold">
|
||||||
|
{t("sortBy", { defaultValue: "Sort By" })}
|
||||||
|
</h2>
|
||||||
<select
|
<select
|
||||||
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
||||||
onChange={(e) => handleSorting(e)}
|
onChange={(e) => handleSorting(e)}
|
||||||
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
>
|
>
|
||||||
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
|
<option value="latest">
|
||||||
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
|
{t("latest", { defaultValue: "Latest" })}
|
||||||
|
</option>
|
||||||
|
<option value="popular">
|
||||||
|
{t("mostPopular", { defaultValue: "Most Popular" })}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -303,7 +303,7 @@ const FilterPage = () => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
const handleCategoryFilter = (e: boolean, id: string) => {
|
const handleCategoryFilter = (e: boolean, id: string) => {
|
||||||
let filter = [...categoryFilter];
|
let filter = [...categoryFilter];
|
||||||
|
|
||||||
if (e) {
|
if (e) {
|
||||||
|
|
@ -469,10 +469,27 @@ const FilterPage = () => {
|
||||||
<div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
<div className="flex flex-row md:flex-row items-start gap-3 py-10 px-4 lg:px-20 bg-[#f7f7f7] dark:bg-black">
|
||||||
<p>
|
<p>
|
||||||
{" "}
|
{" "}
|
||||||
{t("image", { defaultValue: "Image" })} {">"} <span className="font-bold">{t("allImage", { defaultValue: "All Image" })}</span>
|
{t("image", { defaultValue: "Image" })} {">"}{" "}
|
||||||
|
<span className="font-bold">
|
||||||
|
{t("allImage", { defaultValue: "All Image" })}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableImage", { defaultValue: "Downloadable Image" })}`}</p>
|
{!title ? (
|
||||||
|
<p>
|
||||||
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
@ -507,7 +524,9 @@ const FilterPage = () => {
|
||||||
onKeyDown={handleKeyDown}
|
onKeyDown={handleKeyDown}
|
||||||
type="text"
|
type="text"
|
||||||
id="search"
|
id="search"
|
||||||
placeholder={t("searchTitle", { defaultValue: "Search Title" })}
|
placeholder={t("searchTitle", {
|
||||||
|
defaultValue: "Search Title",
|
||||||
|
})}
|
||||||
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="mt-1 w-full border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -521,7 +540,9 @@ const FilterPage = () => {
|
||||||
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
onChange={(date) => setMonthYearFilter(date)}
|
onChange={(date) => setMonthYearFilter(date)}
|
||||||
dateFormat="MM | yyyy"
|
dateFormat="MM | yyyy"
|
||||||
placeholderText={t("selectYear", { defaultValue: "Select Year" })}
|
placeholderText={t("selectYear", {
|
||||||
|
defaultValue: "Select Year",
|
||||||
|
})}
|
||||||
showMonthYearPicker
|
showMonthYearPicker
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -539,7 +560,9 @@ const FilterPage = () => {
|
||||||
onChange={(update) => {
|
onChange={(update) => {
|
||||||
setDateRange(update);
|
setDateRange(update);
|
||||||
}}
|
}}
|
||||||
placeholderText={t("selectDate", { defaultValue: "Select Date" })}
|
placeholderText={t("selectDate", {
|
||||||
|
defaultValue: "Select Date",
|
||||||
|
})}
|
||||||
onCalendarClose={() => setCalenderState(!calenderState)}
|
onCalendarClose={() => setCalenderState(!calenderState)}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|
@ -718,14 +741,20 @@ const FilterPage = () => {
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="flex flex-col items-end mb-4">
|
<div className="flex flex-col items-end mb-4">
|
||||||
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
|
<h2 className="text-lg font-semibold">
|
||||||
|
{t("sortBy", { defaultValue: "Sort By" })}
|
||||||
|
</h2>
|
||||||
<select
|
<select
|
||||||
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
||||||
onChange={(e) => handleSorting(e)}
|
onChange={(e) => handleSorting(e)}
|
||||||
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
>
|
>
|
||||||
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
|
<option value="latest">
|
||||||
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
|
{t("latest", { defaultValue: "Latest" })}
|
||||||
|
</option>
|
||||||
|
<option value="popular">
|
||||||
|
{t("mostPopular", { defaultValue: "Most Popular" })}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -487,10 +487,27 @@ const FilterPage = () => {
|
||||||
<p>
|
<p>
|
||||||
{" "}
|
{" "}
|
||||||
{t("video", { defaultValue: "Video" })}
|
{t("video", { defaultValue: "Video" })}
|
||||||
{">"} <span className="font-bold">{t("allVideo", { defaultValue: "All Video" })}</span>
|
{">"}{" "}
|
||||||
|
<span className="font-bold">
|
||||||
|
{t("allVideo", { defaultValue: "All Video" })}
|
||||||
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t("downloadableVideo", { defaultValue: "Downloadable Video" })}`}</p>
|
{!title ? (
|
||||||
|
<p>
|
||||||
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
@ -530,7 +547,9 @@ const FilterPage = () => {
|
||||||
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="mt-1 w-full text-xs border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
onChange={(date) => setMonthYearFilter(date)}
|
onChange={(date) => setMonthYearFilter(date)}
|
||||||
dateFormat="MM | yyyy"
|
dateFormat="MM | yyyy"
|
||||||
placeholderText={t("selectYear", { defaultValue: "Select Year" })}
|
placeholderText={t("selectYear", {
|
||||||
|
defaultValue: "Select Year",
|
||||||
|
})}
|
||||||
showMonthYearPicker
|
showMonthYearPicker
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -548,7 +567,9 @@ const FilterPage = () => {
|
||||||
onChange={(update) => {
|
onChange={(update) => {
|
||||||
setDateRange(update);
|
setDateRange(update);
|
||||||
}}
|
}}
|
||||||
placeholderText={t("selectDate", { defaultValue: "Select Date" })}
|
placeholderText={t("selectDate", {
|
||||||
|
defaultValue: "Select Date",
|
||||||
|
})}
|
||||||
onCalendarClose={() => setCalenderState(!calenderState)}
|
onCalendarClose={() => setCalenderState(!calenderState)}
|
||||||
/>
|
/>
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
|
|
@ -754,14 +775,20 @@ const FilterPage = () => {
|
||||||
<Reveal>
|
<Reveal>
|
||||||
<div className="flex-1">
|
<div className="flex-1">
|
||||||
<div className="flex flex-col items-end mb-4">
|
<div className="flex flex-col items-end mb-4">
|
||||||
<h2 className="text-lg font-semibold">{t("sortBy", { defaultValue: "Sort By" })}</h2>
|
<h2 className="text-lg font-semibold">
|
||||||
|
{t("sortBy", { defaultValue: "Sort By" })}
|
||||||
|
</h2>
|
||||||
<select
|
<select
|
||||||
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
defaultValue={sortBy == "popular" ? "terpopuler" : "terbaru"}
|
||||||
onChange={(e) => handleSorting(e)}
|
onChange={(e) => handleSorting(e)}
|
||||||
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
className="border rounded-md py-2 px-3 focus:ring-red-500 focus:border-red-500"
|
||||||
>
|
>
|
||||||
<option value="latest">{t("latest", { defaultValue: "Latest" })}</option>
|
<option value="latest">
|
||||||
<option value="popular">{t("mostPopular", { defaultValue: "Most Popular" })}</option>
|
{t("latest", { defaultValue: "Latest" })}
|
||||||
|
</option>
|
||||||
|
<option value="popular">
|
||||||
|
{t("mostPopular", { defaultValue: "Most Popular" })}
|
||||||
|
</option>
|
||||||
</select>
|
</select>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -98,7 +98,6 @@ export default function FilterPage() {
|
||||||
setSearchTitle(title);
|
setSearchTitle(title);
|
||||||
setCategoryFilter(category ? category.split("&") : []);
|
setCategoryFilter(category ? category.split("&") : []);
|
||||||
setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
|
setSortByOpt(sortBy === "popular" ? "clickCount" : "createdAt");
|
||||||
|
|
||||||
}, [searchParams]);
|
}, [searchParams]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
|
|
@ -120,7 +119,7 @@ export default function FilterPage() {
|
||||||
"",
|
"",
|
||||||
isInt,
|
isInt,
|
||||||
pageNumber
|
pageNumber
|
||||||
);
|
);
|
||||||
|
|
||||||
const content = response?.data?.data?.content || [];
|
const content = response?.data?.data?.content || [];
|
||||||
const total = response?.data?.data?.totalPages || 1;
|
const total = response?.data?.data?.totalPages || 1;
|
||||||
|
|
@ -437,10 +436,21 @@ export default function FilterPage() {
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
|
{!title ? (
|
||||||
"downloadableContent",
|
<p>
|
||||||
{ defaultValue: "Downloadable ContentS" }
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
)}`}</p>
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
|
||||||
|
|
@ -494,10 +494,21 @@ const FilterPage = () => {
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
|
{!title ? (
|
||||||
"downloadableAudio",
|
<p>
|
||||||
{ defaultValue: "Downloadable Audio" }
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
)}`}</p>
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
|
||||||
|
|
@ -510,10 +510,21 @@ const FilterPage = () => {
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
|
{!title ? (
|
||||||
"downloadableText",
|
<p>
|
||||||
{ defaultValue: "Downloadable Text" }
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
)}`}</p>
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
|
||||||
|
|
@ -516,10 +516,21 @@ const FilterPage = () => {
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
|
{!title ? (
|
||||||
"downloadableImage",
|
<p>
|
||||||
{ defaultValue: "Downloadable Image" }
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
)}`}</p>
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
|
<div className="flex flex-col lg:flex-row gap-6 pl-4 lg:pl-20 py-4">
|
||||||
|
|
|
||||||
|
|
@ -425,10 +425,22 @@ export default function FilterPage() {
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
|
{!title ? (
|
||||||
"downloadableContent",
|
<p>
|
||||||
{ defaultValue: "Downloadable ContentS" }
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${
|
||||||
)}`}</p>
|
totalContent ?? 0
|
||||||
|
} ${t("downloadableImage", {
|
||||||
|
defaultValue: "artikel berisi Foto yang dapat diunduh",
|
||||||
|
})}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
|
||||||
|
|
@ -511,10 +511,21 @@ const FilterPage = () => {
|
||||||
</span>
|
</span>
|
||||||
</p>
|
</p>
|
||||||
<p className="font-bold">|</p>
|
<p className="font-bold">|</p>
|
||||||
<p>{`${t("thereIs", { defaultValue: "There Is" })} ${totalContent} ${t(
|
{!title ? (
|
||||||
"downloadableVideo",
|
<p>
|
||||||
{ defaultValue: "Downloadable Video" }
|
{`${t("thereIs", { defaultValue: "Terdapat" })} ${totalContent} ${t(
|
||||||
)}`}</p>
|
"downloadableImage",
|
||||||
|
{ defaultValue: "artikel berisi Foto yang dapat diunduh" }
|
||||||
|
)}`}
|
||||||
|
</p>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<p>
|
||||||
|
{t("search-results", { defaultValue: "Hasil pencarian untuk" })}{" "}
|
||||||
|
<span className="font-bold">"{title}"</span>
|
||||||
|
</p>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Left */}
|
{/* Left */}
|
||||||
|
|
|
||||||
|
|
@ -571,6 +571,7 @@ export default function FormAudioUpdate() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
size="icon"
|
size="icon"
|
||||||
color="destructive"
|
color="destructive"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|
|
||||||
|
|
@ -550,6 +550,7 @@ export default function FormImageUpdate() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
size="icon"
|
size="icon"
|
||||||
color="destructive"
|
color="destructive"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|
|
||||||
|
|
@ -553,6 +553,7 @@ export default function FormTeksUpdate() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
size="icon"
|
size="icon"
|
||||||
color="destructive"
|
color="destructive"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|
|
||||||
|
|
@ -627,6 +627,7 @@ export default function FormVideoUpdate() {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<Button
|
<Button
|
||||||
|
type="button"
|
||||||
size="icon"
|
size="icon"
|
||||||
color="destructive"
|
color="destructive"
|
||||||
variant="outline"
|
variant="outline"
|
||||||
|
|
|
||||||
|
|
@ -643,7 +643,7 @@
|
||||||
"FilterPage": {
|
"FilterPage": {
|
||||||
"downloadableContent": "Downloadable Content",
|
"downloadableContent": "Downloadable Content",
|
||||||
"content": "Content",
|
"content": "Content",
|
||||||
"allContent":"All Content",
|
"allContent": "All Content",
|
||||||
"image": "Image",
|
"image": "Image",
|
||||||
"video": "Video",
|
"video": "Video",
|
||||||
"text": "Text",
|
"text": "Text",
|
||||||
|
|
@ -666,7 +666,8 @@
|
||||||
"categories": "Categories",
|
"categories": "Categories",
|
||||||
"sortBy": "Sort by",
|
"sortBy": "Sort by",
|
||||||
"latest": "Latest",
|
"latest": "Latest",
|
||||||
"mostPopular": "Most Popular"
|
"mostPopular": "Most Popular",
|
||||||
|
"search-results": "Search Result"
|
||||||
},
|
},
|
||||||
"Planning": {
|
"Planning": {
|
||||||
"planning": "Planning",
|
"planning": "Planning",
|
||||||
|
|
|
||||||
|
|
@ -667,7 +667,8 @@
|
||||||
"categories": "Kategori",
|
"categories": "Kategori",
|
||||||
"sortBy": "Urutkan Berdasarkan",
|
"sortBy": "Urutkan Berdasarkan",
|
||||||
"latest": "Terbaru",
|
"latest": "Terbaru",
|
||||||
"mostPopular": "Terpopuler"
|
"mostPopular": "Terpopuler",
|
||||||
|
"search-results": "Hasil Pencarian"
|
||||||
},
|
},
|
||||||
"Planning": {
|
"Planning": {
|
||||||
"planning": "Perencanaan",
|
"planning": "Perencanaan",
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue