feat:curator task planning mediahub, table, list, create monthly, weekly, daily, detail
This commit is contained in:
Rama Priyanto
parent
c4ec45b210
commit
ac434a0e5e
|
|
@ -0,0 +1,75 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { ColumnDef } from "@tanstack/react-table";
|
||||||
|
|
||||||
|
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuItem,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { htmlToString } from "@/utils/globals";
|
||||||
|
import { Link, useRouter } from "@/i18n/routing";
|
||||||
|
|
||||||
|
const columns: ColumnDef<any>[] = [
|
||||||
|
{
|
||||||
|
accessorKey: "no",
|
||||||
|
header: "No",
|
||||||
|
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "title",
|
||||||
|
header: "Judul Perencanaan",
|
||||||
|
cell: ({ row }) => <span>{row.getValue("title")}</span>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "createdByName",
|
||||||
|
header: "Nama Pembuat",
|
||||||
|
cell: ({ row }) => <span>{row.getValue("createdByName")}</span>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "description",
|
||||||
|
header: "Deskripsi",
|
||||||
|
cell: ({ row }) => <span>{htmlToString(row.getValue("description"))}</span>,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "status",
|
||||||
|
header: "Status",
|
||||||
|
cell: ({ row }) => <span>{row.getValue("status")}</span>,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: "actions",
|
||||||
|
accessorKey: "action",
|
||||||
|
header: "Actions",
|
||||||
|
enableHiding: false,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
size="icon"
|
||||||
|
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
||||||
|
>
|
||||||
|
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent className="p-0" align="end">
|
||||||
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||||
|
<Link
|
||||||
|
href={`/curator/task-plan/mediahub/detail/${row.original.id}`}
|
||||||
|
>
|
||||||
|
Detail
|
||||||
|
</Link>
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default columns;
|
||||||
|
|
@ -0,0 +1,183 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import {
|
||||||
|
ColumnDef,
|
||||||
|
ColumnFiltersState,
|
||||||
|
PaginationState,
|
||||||
|
SortingState,
|
||||||
|
VisibilityState,
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getFilteredRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
useReactTable,
|
||||||
|
} from "@tanstack/react-table";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||||
|
import {
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
Eye,
|
||||||
|
MoreVertical,
|
||||||
|
Search,
|
||||||
|
SquarePen,
|
||||||
|
Trash2,
|
||||||
|
TrendingDown,
|
||||||
|
TrendingUp,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
||||||
|
import { paginationBlog } from "@/service/blog/blog";
|
||||||
|
import { ticketingPagination } from "@/service/ticketing/ticketing";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import TablePagination from "@/components/table/table-pagination";
|
||||||
|
import columns from "./columns";
|
||||||
|
|
||||||
|
const TaskPlanMediahubTable = (props: {
|
||||||
|
data: any;
|
||||||
|
totalPage: number;
|
||||||
|
totalData: number;
|
||||||
|
}) => {
|
||||||
|
const { data, totalPage, totalData } = props;
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
||||||
|
// const [totalData, setTotalData] = React.useState<number>(1);
|
||||||
|
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||||
|
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const [columnVisibility, setColumnVisibility] =
|
||||||
|
React.useState<VisibilityState>({});
|
||||||
|
const [rowSelection, setRowSelection] = React.useState({});
|
||||||
|
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||||
|
pageIndex: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
});
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
const [limit, setLimit] = React.useState(10);
|
||||||
|
|
||||||
|
const table = useReactTable({
|
||||||
|
data: dataTable,
|
||||||
|
columns,
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onColumnFiltersChange: setColumnFilters,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
|
onColumnVisibilityChange: setColumnVisibility,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
onPaginationChange: setPagination,
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
columnFilters,
|
||||||
|
columnVisibility,
|
||||||
|
rowSelection,
|
||||||
|
pagination,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const pageFromUrl = searchParams?.get("page");
|
||||||
|
if (pageFromUrl) {
|
||||||
|
setPage(Number(pageFromUrl));
|
||||||
|
}
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
}, [page, limit, data]);
|
||||||
|
|
||||||
|
async function fetchData() {
|
||||||
|
// try {
|
||||||
|
// const res = await ticketingPagination("", limit, page - 1);
|
||||||
|
// const data = res.data?.data;
|
||||||
|
console.log("datgaa", data);
|
||||||
|
const contentData = data;
|
||||||
|
contentData.forEach((item: any, index: number) => {
|
||||||
|
item.no = (page - 1) * limit + index + 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("contentData : ", contentData);
|
||||||
|
|
||||||
|
setDataTable(contentData);
|
||||||
|
// setTotalData(data?.totalElements);
|
||||||
|
// } catch (error) {
|
||||||
|
// console.error("Error fetching tasks:", error);
|
||||||
|
// }
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full overflow-x-auto">
|
||||||
|
<Table className="overflow-hidden mt-3">
|
||||||
|
<TableHeader>
|
||||||
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
<TableRow key={headerGroup.id} className="bg-default-200">
|
||||||
|
{headerGroup.headers.map((header) => (
|
||||||
|
<TableHead key={header.id}>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(
|
||||||
|
header.column.columnDef.header,
|
||||||
|
header.getContext()
|
||||||
|
)}
|
||||||
|
</TableHead>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{table.getRowModel().rows?.length ? (
|
||||||
|
table.getRowModel().rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.id}
|
||||||
|
data-state={row.getIsSelected() && "selected"}
|
||||||
|
className="h-[75px]"
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<TableCell key={cell.id}>
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||||
|
No results.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
<TablePagination
|
||||||
|
table={table}
|
||||||
|
totalData={totalData}
|
||||||
|
totalPage={totalPage}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default TaskPlanMediahubTable;
|
||||||
|
|
@ -0,0 +1,436 @@
|
||||||
|
"use client";
|
||||||
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import { Link } from "@/i18n/routing";
|
||||||
|
import { CalendarIcon } from "lucide-react";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import JoditEditor from "jodit-react";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||||
|
|
||||||
|
const FormSchema = z.object({
|
||||||
|
date: z.date({
|
||||||
|
required_error: "Required",
|
||||||
|
}),
|
||||||
|
title: z.string({
|
||||||
|
required_error: "Required",
|
||||||
|
}),
|
||||||
|
detail: z.string({
|
||||||
|
required_error: "Required",
|
||||||
|
}),
|
||||||
|
output: z.array(z.string()).refine((value) => value.some((item) => item), {
|
||||||
|
message: "Required",
|
||||||
|
}),
|
||||||
|
unit: z.array(z.string()).refine((value) => value.some((item) => item), {
|
||||||
|
message: "Required",
|
||||||
|
}),
|
||||||
|
type: z.enum(["publication", "amplification", "contra"], {
|
||||||
|
required_error: "Required",
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
|
||||||
|
const items = [
|
||||||
|
{
|
||||||
|
id: "video",
|
||||||
|
label: "Audio Visual",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "image",
|
||||||
|
label: "Foto",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "audio",
|
||||||
|
label: "Audio",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "text",
|
||||||
|
label: "Text",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const units = [
|
||||||
|
{
|
||||||
|
id: "mabes",
|
||||||
|
label: "Mabes Polri",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "polda",
|
||||||
|
label: "Polda",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
id: "polres",
|
||||||
|
label: "Polres",
|
||||||
|
},
|
||||||
|
];
|
||||||
|
export default function CreateMonthly() {
|
||||||
|
const MySwal = withReactContent(Swal);
|
||||||
|
|
||||||
|
const form = useForm<z.infer<typeof FormSchema>>({
|
||||||
|
resolver: zodResolver(FormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
unit: [],
|
||||||
|
output: [],
|
||||||
|
detail: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const editor = useRef(null);
|
||||||
|
|
||||||
|
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||||
|
console.log("data", data);
|
||||||
|
if (form.getValues("detail") == "") {
|
||||||
|
form.setError("detail", {
|
||||||
|
type: "manual",
|
||||||
|
message: "Required",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Simpan Data",
|
||||||
|
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
cancelButtonColor: "#d33",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "Simpan",
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
save(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = async (data: z.infer<typeof FormSchema>) => {
|
||||||
|
console.log("data", data);
|
||||||
|
};
|
||||||
|
|
||||||
|
const output = form.watch("output");
|
||||||
|
|
||||||
|
const isAllChecked = items.every((item) => output?.includes(item.id));
|
||||||
|
|
||||||
|
const unit = form.watch("unit");
|
||||||
|
|
||||||
|
const isAllUnitChecked = units.every((item) => unit?.includes(item.id));
|
||||||
|
|
||||||
|
const handleAllCheckedChange = (checked: boolean | string) => {
|
||||||
|
if (checked) {
|
||||||
|
form.setValue(
|
||||||
|
"output",
|
||||||
|
items.map((item) => item.id)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
form.setValue("output", []);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleItemCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
|
form.setValue(
|
||||||
|
"output",
|
||||||
|
checked ? [...output, id] : output.filter((value) => value !== id)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleAllUnitCheckedChange = (checked: boolean | string) => {
|
||||||
|
if (checked) {
|
||||||
|
form.setValue(
|
||||||
|
"unit",
|
||||||
|
units.map((item) => item.id)
|
||||||
|
);
|
||||||
|
} else {
|
||||||
|
form.setValue("unit", []);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleUnitCheckedChange = (id: string, checked: boolean | string) => {
|
||||||
|
form.setValue(
|
||||||
|
"unit",
|
||||||
|
checked ? [...unit, id] : unit.filter((value) => value !== id)
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<SiteBreadcrumb />
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="flex flex-row justify-center gap-5 mt-10">
|
||||||
|
<Link
|
||||||
|
href="/curator/task-plan/mediahub/create-monthly"
|
||||||
|
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||||
|
>
|
||||||
|
Bulanan
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/curator/task-plan/mediahub/create-weekly"
|
||||||
|
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||||
|
>
|
||||||
|
Mingguan
|
||||||
|
</Link>
|
||||||
|
|
||||||
|
<div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
|
||||||
|
Harian
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col bg-white gap-2 p-6">
|
||||||
|
<p className="text-lg">Perencanaan MediaHub</p>
|
||||||
|
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="title"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Judul Perencanaan</FormLabel>
|
||||||
|
<Input
|
||||||
|
value={field.value}
|
||||||
|
placeholder="Masukkan Judul Perencanaan"
|
||||||
|
onChange={field.onChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="output"
|
||||||
|
render={() => (
|
||||||
|
<FormItem>
|
||||||
|
<div className="mb-4">
|
||||||
|
<FormLabel className="text-sm">Output Tugas</FormLabel>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row gap-3 items-center ">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={isAllChecked}
|
||||||
|
// indeterminate={isSomeChecked && !isAllChecked}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
handleAllCheckedChange(checked)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<label htmlFor="all" className="text-sm">
|
||||||
|
Semua
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{items.map((item) => (
|
||||||
|
<FormField
|
||||||
|
key={item.id}
|
||||||
|
control={form.control}
|
||||||
|
name="output"
|
||||||
|
render={({ field }) => {
|
||||||
|
return (
|
||||||
|
<FormItem
|
||||||
|
key={item.id}
|
||||||
|
className="flex flex-row items-start space-x-3 space-y-0"
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<Checkbox
|
||||||
|
checked={output?.includes(item.id)}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
handleItemCheckedChange(item.id, checked)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormLabel className="font-normal">
|
||||||
|
{item.label}
|
||||||
|
</FormLabel>
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="unit"
|
||||||
|
render={() => (
|
||||||
|
<FormItem>
|
||||||
|
<div className="mb-4">
|
||||||
|
<FormLabel className="text-sm">Pelaksana Tugas</FormLabel>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-row gap-3 items-center ">
|
||||||
|
<div className="flex items-center gap-3">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={isAllUnitChecked}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
handleAllUnitCheckedChange(checked)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
<label htmlFor="all" className="text-sm">
|
||||||
|
Semua
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{units.map((item) => (
|
||||||
|
<FormField
|
||||||
|
key={item.id}
|
||||||
|
control={form.control}
|
||||||
|
name="unit"
|
||||||
|
render={({ field }) => {
|
||||||
|
return (
|
||||||
|
<FormItem
|
||||||
|
key={item.id}
|
||||||
|
className="flex flex-row items-start space-x-3 space-y-0"
|
||||||
|
>
|
||||||
|
<FormControl>
|
||||||
|
<Checkbox
|
||||||
|
checked={unit?.includes(item.id)}
|
||||||
|
disabled={
|
||||||
|
item.id === "polres" &&
|
||||||
|
!unit.includes("polda")
|
||||||
|
}
|
||||||
|
onCheckedChange={(checked) =>
|
||||||
|
handleUnitCheckedChange(item.id, checked)
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
</FormControl>
|
||||||
|
<FormLabel className="font-normal">
|
||||||
|
{item.label}
|
||||||
|
</FormLabel>
|
||||||
|
</FormItem>
|
||||||
|
);
|
||||||
|
}}
|
||||||
|
/>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="type"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Jenis Penugasan</FormLabel>
|
||||||
|
<FormControl>
|
||||||
|
<RadioGroup
|
||||||
|
onValueChange={field.onChange}
|
||||||
|
defaultValue={field.value}
|
||||||
|
className="flex flex-row gap-3"
|
||||||
|
>
|
||||||
|
<FormItem className="flex items-center space-x-3 space-y-0">
|
||||||
|
<FormControl>
|
||||||
|
<RadioGroupItem value="publication" />
|
||||||
|
</FormControl>
|
||||||
|
<FormLabel className="font-normal">
|
||||||
|
Publikasi
|
||||||
|
</FormLabel>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem className="flex items-center space-x-3 space-y-0">
|
||||||
|
<FormControl>
|
||||||
|
<RadioGroupItem value="amplification" />
|
||||||
|
</FormControl>
|
||||||
|
<FormLabel className="font-normal">
|
||||||
|
Amplifikasi
|
||||||
|
</FormLabel>
|
||||||
|
</FormItem>
|
||||||
|
<FormItem className="flex items-center space-x-3 space-y-0">
|
||||||
|
<FormControl>
|
||||||
|
<RadioGroupItem value="contra" />
|
||||||
|
</FormControl>
|
||||||
|
<FormLabel className="font-normal">Kontra</FormLabel>
|
||||||
|
</FormItem>
|
||||||
|
</RadioGroup>
|
||||||
|
</FormControl>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="date"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel>Pilih Tanggal</FormLabel>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn(
|
||||||
|
"w-[280px] justify-start text-left font-normal",
|
||||||
|
!field.value && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
{field.value ? (
|
||||||
|
format(field.value, "PPP")
|
||||||
|
) : (
|
||||||
|
<span>Masukkan Tanggal</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={field.value}
|
||||||
|
onSelect={field.onChange}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="detail"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Detail Perencanaan</FormLabel>
|
||||||
|
<JoditEditor
|
||||||
|
ref={editor}
|
||||||
|
value={field.value}
|
||||||
|
className="dark:text-black"
|
||||||
|
onChange={field.onChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-row gap-2 justify-end mt-4 pt-4">
|
||||||
|
<Button type="submit" variant="outline" color="destructive">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" color="primary">
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,227 @@
|
||||||
|
"use client";
|
||||||
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import { Link, useRouter } from "@/i18n/routing";
|
||||||
|
import { CalendarIcon } from "lucide-react";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import JoditEditor from "jodit-react";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
import { error } from "@/config/swal";
|
||||||
|
import { savePlanning } from "@/service/agenda-setting/agenda-setting";
|
||||||
|
|
||||||
|
const FormSchema = z.object({
|
||||||
|
month: z.date({
|
||||||
|
required_error: "Required",
|
||||||
|
}),
|
||||||
|
title: z.string({
|
||||||
|
required_error: "Required",
|
||||||
|
}),
|
||||||
|
detail: z.string({
|
||||||
|
required_error: "Required",
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
export default function CreateMonthly() {
|
||||||
|
const MySwal = withReactContent(Swal);
|
||||||
|
const router = useRouter();
|
||||||
|
const form = useForm<z.infer<typeof FormSchema>>({
|
||||||
|
resolver: zodResolver(FormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
detail: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const editor = useRef(null);
|
||||||
|
|
||||||
|
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||||
|
if (form.getValues("detail") == "") {
|
||||||
|
form.setError("detail", {
|
||||||
|
type: "manual",
|
||||||
|
message: "Required",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Simpan Data",
|
||||||
|
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
cancelButtonColor: "#d33",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "Simpan",
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
save(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = async (data: z.infer<typeof FormSchema>) => {
|
||||||
|
const reqData = {
|
||||||
|
planningTypeId: 1,
|
||||||
|
title: data.title,
|
||||||
|
time: "3",
|
||||||
|
description: data.detail,
|
||||||
|
username: "",
|
||||||
|
date: new Date(data.month).getMonth() + 1,
|
||||||
|
status: "Open",
|
||||||
|
};
|
||||||
|
console.log("req", reqData, data.month);
|
||||||
|
const response = await savePlanning(reqData);
|
||||||
|
close();
|
||||||
|
if (response.error) {
|
||||||
|
error(response.message);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Sukses",
|
||||||
|
icon: "success",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "OK",
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
router.push("/curator/task-plan/mediahub");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleMonthSelect = (selectedDate: Date | undefined) => {
|
||||||
|
if (!selectedDate) return;
|
||||||
|
const newDate = new Date(
|
||||||
|
selectedDate.getFullYear(),
|
||||||
|
selectedDate.getMonth(),
|
||||||
|
1
|
||||||
|
);
|
||||||
|
form.setValue("month", newDate);
|
||||||
|
};
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<SiteBreadcrumb />
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="flex flex-row justify-center gap-5 mt-10">
|
||||||
|
<div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
|
||||||
|
Bulanan
|
||||||
|
</div>
|
||||||
|
<Link
|
||||||
|
href="/curator/task-plan/mediahub/create-weekly"
|
||||||
|
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||||
|
>
|
||||||
|
Mingguan
|
||||||
|
</Link>
|
||||||
|
<Link
|
||||||
|
href="/curator/task-plan/mediahub/create-daily"
|
||||||
|
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||||
|
>
|
||||||
|
Harian
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col bg-white gap-2 p-6">
|
||||||
|
<p className="text-lg">Perencanaan MediaHub Bulanan</p>
|
||||||
|
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="title"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Judul Perencanaan</FormLabel>
|
||||||
|
<Input
|
||||||
|
value={field.value}
|
||||||
|
placeholder="Masukkan Judul Perencanaan"
|
||||||
|
onChange={field.onChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="month"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel>Pilih Bulan</FormLabel>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn(
|
||||||
|
"w-[280px] justify-start text-left font-normal",
|
||||||
|
!field.value && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
{field.value ? (
|
||||||
|
format(field.value, "MMMM yyyy")
|
||||||
|
) : (
|
||||||
|
<span>Masukkan Bulan</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0">
|
||||||
|
<Calendar
|
||||||
|
mode="single"
|
||||||
|
selected={field.value}
|
||||||
|
onSelect={handleMonthSelect}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="detail"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Detail Perencanaan</FormLabel>
|
||||||
|
<JoditEditor
|
||||||
|
ref={editor}
|
||||||
|
value={field.value}
|
||||||
|
className="dark:text-black"
|
||||||
|
onChange={field.onChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-row gap-2 justify-end mt-4 pt-4">
|
||||||
|
<Button type="submit" variant="outline" color="destructive">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" color="primary">
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,232 @@
|
||||||
|
"use client";
|
||||||
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Calendar } from "@/components/ui/calendar";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import {
|
||||||
|
Popover,
|
||||||
|
PopoverContent,
|
||||||
|
PopoverTrigger,
|
||||||
|
} from "@/components/ui/popover";
|
||||||
|
import { Link, useRouter } from "@/i18n/routing";
|
||||||
|
import { CalendarIcon } from "lucide-react";
|
||||||
|
import React, { useRef, useState } from "react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import { format } from "date-fns";
|
||||||
|
import JoditEditor from "jodit-react";
|
||||||
|
import {
|
||||||
|
Form,
|
||||||
|
FormControl,
|
||||||
|
FormDescription,
|
||||||
|
FormField,
|
||||||
|
FormItem,
|
||||||
|
FormLabel,
|
||||||
|
FormMessage,
|
||||||
|
} from "@/components/ui/form";
|
||||||
|
import { z } from "zod";
|
||||||
|
import { useForm } from "react-hook-form";
|
||||||
|
import { zodResolver } from "@hookform/resolvers/zod";
|
||||||
|
import Swal from "sweetalert2";
|
||||||
|
import withReactContent from "sweetalert2-react-content";
|
||||||
|
import { error } from "@/config/swal";
|
||||||
|
import { getOnlyDate } from "@/utils/globals";
|
||||||
|
import { savePlanning } from "@/service/agenda-setting/agenda-setting";
|
||||||
|
|
||||||
|
const FormSchema = z.object({
|
||||||
|
week: z.object({
|
||||||
|
from: z.date({
|
||||||
|
required_error: "Start date (from) is required",
|
||||||
|
}),
|
||||||
|
to: z.date({
|
||||||
|
required_error: "End date (to) is required",
|
||||||
|
}),
|
||||||
|
}),
|
||||||
|
title: z.string({
|
||||||
|
required_error: "Required",
|
||||||
|
}),
|
||||||
|
detail: z.string({
|
||||||
|
required_error: "Required",
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
export default function CreateMonthly() {
|
||||||
|
const MySwal = withReactContent(Swal);
|
||||||
|
const router = useRouter();
|
||||||
|
const form = useForm<z.infer<typeof FormSchema>>({
|
||||||
|
resolver: zodResolver(FormSchema),
|
||||||
|
defaultValues: {
|
||||||
|
detail: "",
|
||||||
|
},
|
||||||
|
});
|
||||||
|
const editor = useRef(null);
|
||||||
|
|
||||||
|
const onSubmit = async (data: z.infer<typeof FormSchema>) => {
|
||||||
|
if (form.getValues("detail") == "") {
|
||||||
|
form.setError("detail", {
|
||||||
|
type: "manual",
|
||||||
|
message: "Required",
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Simpan Data",
|
||||||
|
text: "Apakah Anda yakin ingin menyimpan data ini?",
|
||||||
|
icon: "warning",
|
||||||
|
showCancelButton: true,
|
||||||
|
cancelButtonColor: "#d33",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "Simpan",
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
save(data);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
const save = async (data: z.infer<typeof FormSchema>) => {
|
||||||
|
const reqData = {
|
||||||
|
planningTypeId: 1,
|
||||||
|
title: data.title,
|
||||||
|
time: "2",
|
||||||
|
description: data.detail,
|
||||||
|
username: "",
|
||||||
|
date: `${getOnlyDate(data.week.from)} - ${getOnlyDate(data.week.to)}`,
|
||||||
|
status: "Open",
|
||||||
|
};
|
||||||
|
console.log("req", reqData);
|
||||||
|
const response = await savePlanning(reqData);
|
||||||
|
close();
|
||||||
|
if (response.error) {
|
||||||
|
error(response.message);
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
|
||||||
|
MySwal.fire({
|
||||||
|
title: "Sukses",
|
||||||
|
icon: "success",
|
||||||
|
confirmButtonColor: "#3085d6",
|
||||||
|
confirmButtonText: "OK",
|
||||||
|
}).then((result) => {
|
||||||
|
if (result.isConfirmed) {
|
||||||
|
router.push("/curator/task-plan/mediahub");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div>
|
||||||
|
<SiteBreadcrumb />
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="flex flex-row justify-center gap-5 mt-10">
|
||||||
|
<Link
|
||||||
|
href="/curator/task-plan/mediahub/create-monthly"
|
||||||
|
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||||
|
>
|
||||||
|
Bulanan
|
||||||
|
</Link>
|
||||||
|
<div className="bg-primary rounded-full px-5 py-2 text-white text-sm">
|
||||||
|
Mingguan
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<Link
|
||||||
|
href="/curator/task-plan/mediahub/create-daily"
|
||||||
|
className="bg-slate-200 text-black rounded-full px-5 py-2 text-sm"
|
||||||
|
>
|
||||||
|
Harian
|
||||||
|
</Link>
|
||||||
|
</div>
|
||||||
|
<div className="flex flex-col bg-white gap-2 p-6">
|
||||||
|
<p className="text-lg">Perencanaan MediaHub Mingguan</p>
|
||||||
|
|
||||||
|
<Form {...form}>
|
||||||
|
<form onSubmit={form.handleSubmit(onSubmit)} className="space-y-3">
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="title"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Judul Perencanaan</FormLabel>
|
||||||
|
<Input
|
||||||
|
value={field.value}
|
||||||
|
placeholder="Masukkan Judul Perencanaan"
|
||||||
|
onChange={field.onChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="week"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem className="flex flex-col">
|
||||||
|
<FormLabel>Pilih Tanggal</FormLabel>
|
||||||
|
<Popover>
|
||||||
|
<PopoverTrigger asChild>
|
||||||
|
<Button
|
||||||
|
variant={"outline"}
|
||||||
|
className={cn(
|
||||||
|
"w-[280px] justify-start text-left font-normal",
|
||||||
|
!field.value && "text-muted-foreground"
|
||||||
|
)}
|
||||||
|
>
|
||||||
|
<CalendarIcon className="mr-2 h-4 w-4" />
|
||||||
|
{field.value?.from ? (
|
||||||
|
field.value.to ? (
|
||||||
|
<>
|
||||||
|
{format(field.value.from, "LLL dd, y")} -{" "}
|
||||||
|
{format(field.value.to, "LLL dd, y")}
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
format(field.value.from, "LLL dd, y")
|
||||||
|
)
|
||||||
|
) : (
|
||||||
|
<span>Masukkan Tanggal</span>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</PopoverTrigger>
|
||||||
|
<PopoverContent className="w-auto p-0">
|
||||||
|
<Calendar
|
||||||
|
mode="range"
|
||||||
|
selected={field.value}
|
||||||
|
onSelect={field.onChange}
|
||||||
|
initialFocus
|
||||||
|
/>
|
||||||
|
</PopoverContent>
|
||||||
|
</Popover>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<FormField
|
||||||
|
control={form.control}
|
||||||
|
name="detail"
|
||||||
|
render={({ field }) => (
|
||||||
|
<FormItem>
|
||||||
|
<FormLabel>Detail Perencanaan</FormLabel>
|
||||||
|
<JoditEditor
|
||||||
|
ref={editor}
|
||||||
|
value={field.value}
|
||||||
|
className="dark:text-black"
|
||||||
|
onChange={field.onChange}
|
||||||
|
/>
|
||||||
|
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
<div className="flex flex-row gap-2 justify-end mt-4 pt-4">
|
||||||
|
<Button type="submit" variant="outline" color="destructive">
|
||||||
|
Cancel
|
||||||
|
</Button>
|
||||||
|
<Button type="submit" color="primary">
|
||||||
|
Submit
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -0,0 +1,270 @@
|
||||||
|
"use client";
|
||||||
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
|
import { Checkbox } from "@/components/ui/checkbox";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { Label } from "@/components/ui/label";
|
||||||
|
import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
|
||||||
|
import { close, loading } from "@/config/swal";
|
||||||
|
import { getWeeklyPlanList } from "@/service/agenda-setting/agenda-setting";
|
||||||
|
import { getPlanningById } from "@/service/planning/planning";
|
||||||
|
import { useParams } from "next/navigation";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import {
|
||||||
|
Select,
|
||||||
|
SelectContent,
|
||||||
|
SelectGroup,
|
||||||
|
SelectItem,
|
||||||
|
SelectTrigger,
|
||||||
|
SelectValue,
|
||||||
|
} from "@/components/ui/select";
|
||||||
|
import JoditEditor from "jodit-react";
|
||||||
|
|
||||||
|
export default function DetailTaskPlanMediahub() {
|
||||||
|
const params = useParams();
|
||||||
|
const id = params?.id;
|
||||||
|
const editor = useRef(null);
|
||||||
|
|
||||||
|
const [planningData, setPlanningData] = useState<any>();
|
||||||
|
|
||||||
|
const [type, setType] = useState("");
|
||||||
|
|
||||||
|
const [weeklyList, setWeeklyList] = useState<any>([]);
|
||||||
|
const [weeklySelected, setWeeklySelected] = useState();
|
||||||
|
|
||||||
|
const [taskOutput, setTaskOutput] = useState<any>([]);
|
||||||
|
const [destination, setDestination] = useState<any>([]);
|
||||||
|
const [listDest, setListDest] = useState([]);
|
||||||
|
const [topDestination, setTopDestination] = useState<any>([]);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
initFetch();
|
||||||
|
}, [id]);
|
||||||
|
|
||||||
|
async function initFetch() {
|
||||||
|
if (id != undefined) {
|
||||||
|
loading();
|
||||||
|
const res = await getPlanningById(id);
|
||||||
|
close();
|
||||||
|
|
||||||
|
if (res?.data?.data != undefined) {
|
||||||
|
const data = res?.data?.data;
|
||||||
|
console.log("Data :", data);
|
||||||
|
setPlanningData(data);
|
||||||
|
setAssignedTopLevel(data?.assignedToTopLevel);
|
||||||
|
setArrayDestination(data?.assignedToLevel);
|
||||||
|
setArrayTaskOutput(data?.fileTypeOutput);
|
||||||
|
setType(String(data?.assignmentTypeId));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setArrayDestination(assignedToLevel: any) {
|
||||||
|
if (assignedToLevel?.length > 0) {
|
||||||
|
const arrayDestination = [];
|
||||||
|
const arrayDest = assignedToLevel.split(",");
|
||||||
|
|
||||||
|
for (const element of arrayDest) {
|
||||||
|
arrayDestination.push(element);
|
||||||
|
}
|
||||||
|
|
||||||
|
setDestination(arrayDestination);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setAssignedTopLevel(assignedToTopLevel: any) {
|
||||||
|
if (assignedToTopLevel?.length > 0) {
|
||||||
|
const arrayTopLevel = [];
|
||||||
|
const arrayTop = assignedToTopLevel.split(",");
|
||||||
|
|
||||||
|
for (const element of arrayTop) {
|
||||||
|
arrayTopLevel.push(Number(element));
|
||||||
|
}
|
||||||
|
|
||||||
|
setTopDestination(arrayTopLevel);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function setArrayTaskOutput(output: any) {
|
||||||
|
if (output?.length > 0) {
|
||||||
|
const arrayOutput = [];
|
||||||
|
const arrOutput = output.split(",");
|
||||||
|
|
||||||
|
for (const element of arrOutput) {
|
||||||
|
arrayOutput.push(Number(element));
|
||||||
|
}
|
||||||
|
|
||||||
|
setTaskOutput(arrayOutput);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
getWeeklyPlanning();
|
||||||
|
}, [planningData]);
|
||||||
|
|
||||||
|
async function getWeeklyPlanning() {
|
||||||
|
const TODAY = dayjs().format("YYYY-MM-DD");
|
||||||
|
const res = await getWeeklyPlanList(planningData?.date || TODAY, 1);
|
||||||
|
|
||||||
|
if (res.data !== null) {
|
||||||
|
const rawUser = res.data?.data;
|
||||||
|
const optionArr = rawUser.map((option: any) => ({
|
||||||
|
id: option.id,
|
||||||
|
label: option.title,
|
||||||
|
value: option.id,
|
||||||
|
}));
|
||||||
|
console.log("res", optionArr);
|
||||||
|
|
||||||
|
setWeeklyList(optionArr);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SiteBreadcrumb />
|
||||||
|
<div className="text-black flex flex-col gap-4">
|
||||||
|
<p className="text-lg">Perencanaan Mediahub</p>
|
||||||
|
<p className="text-sm">Judul Perencanaan</p>
|
||||||
|
<Input value={planningData?.title} readOnly />
|
||||||
|
<p className="text-sm">Output Tugas</p>
|
||||||
|
<div className="flex flex-row gap-3">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={taskOutput ? taskOutput.length == 4 : false}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="all"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Semua
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={taskOutput ? taskOutput.includes(2) : false}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="all"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Audio Visual
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={taskOutput ? taskOutput.includes(4) : false}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="all"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Audio
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={taskOutput ? taskOutput.includes(1) : false}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="all"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Foto
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={taskOutput ? taskOutput.includes(3) : false}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="all"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Text
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm">Pelaksana Tugas</p>
|
||||||
|
<div className="flex flex-row gap-3">
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={topDestination ? topDestination.includes(0) : false}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="all"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Semua Unit
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={topDestination ? topDestination.includes(1) : false}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="all"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Mabes Polri
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={topDestination ? topDestination.includes(2) : false}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="all"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Polda
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<Checkbox
|
||||||
|
id="all"
|
||||||
|
checked={topDestination ? topDestination.includes(3) : false}
|
||||||
|
/>
|
||||||
|
<label
|
||||||
|
htmlFor="all"
|
||||||
|
className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
|
||||||
|
>
|
||||||
|
Polres
|
||||||
|
</label>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<p className="text-sm">Jenis Penugasan</p>
|
||||||
|
<RadioGroup className="flex flex-row" disabled>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<RadioGroupItem value="1" id="1" checked={type === "1"} />
|
||||||
|
<Label htmlFor="1">Publikasi {type}</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<RadioGroupItem value="2" id="2" checked={type === "2"} />
|
||||||
|
<Label htmlFor="2">Amplifikasi</Label>
|
||||||
|
</div>
|
||||||
|
<div className="flex items-center space-x-2">
|
||||||
|
<RadioGroupItem value="3" id="3" checked={type === "3"} />
|
||||||
|
<Label htmlFor="3">Kontra</Label>
|
||||||
|
</div>
|
||||||
|
</RadioGroup>
|
||||||
|
<p className="text-sm">Tanggal</p>
|
||||||
|
<Input value={planningData?.date} className="w-fit" readOnly />
|
||||||
|
<p className="text-sm">Penugasan Mingguan</p>
|
||||||
|
<Input value={weeklyList[0]?.label} readOnly />
|
||||||
|
<JoditEditor
|
||||||
|
ref={editor}
|
||||||
|
value={planningData?.description}
|
||||||
|
className="dark:text-black"
|
||||||
|
config={{ readonly: true, toolbar: false }}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: "Task Plan Mediahub",
|
title: "Mediahub",
|
||||||
};
|
};
|
||||||
|
|
||||||
const Layout = ({ children }: { children: React.ReactNode }) => {
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
|
@ -0,0 +1,37 @@
|
||||||
|
"use client";
|
||||||
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
|
import ListViewTable from "@/components/table/task-plan/list-view-table";
|
||||||
|
import SingleViewTable from "@/components/table/task-plan/single-view-table";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { useRouter } from "@/i18n/routing";
|
||||||
|
import { useState } from "react";
|
||||||
|
|
||||||
|
export default function TaskPlanMediaHub() {
|
||||||
|
const router = useRouter();
|
||||||
|
const [view, setView] = useState("single");
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<SiteBreadcrumb />
|
||||||
|
<div className="flex flex-col gap-4">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<Button
|
||||||
|
onClick={() =>
|
||||||
|
view === "single" ? setView("list") : setView("single")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{view == "single" ? "List" : "Single"} View
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
color="primary"
|
||||||
|
onClick={() =>
|
||||||
|
router.push("/curator/task-plan/mediahub/create-monthly")
|
||||||
|
}
|
||||||
|
>
|
||||||
|
Buat Perencaan
|
||||||
|
</Button>
|
||||||
|
</div>
|
||||||
|
{view == "single" ? <SingleViewTable /> : <ListViewTable />}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
export const metadata = {
|
export const metadata = {
|
||||||
title: "Task Plan Social Media Mediahub",
|
title: "Medos Mediahub",
|
||||||
};
|
};
|
||||||
|
|
||||||
const Layout = ({ children }: { children: React.ReactNode }) => {
|
const Layout = ({ children }: { children: React.ReactNode }) => {
|
||||||
|
|
@ -1,10 +1,9 @@
|
||||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
||||||
|
|
||||||
export default function MedsosMediahub() {
|
export default function TaskPlanMedsosMediaHub() {
|
||||||
return (
|
return (
|
||||||
<div>
|
<div>
|
||||||
<SiteBreadcrumb />
|
<SiteBreadcrumb />
|
||||||
medsos mediahub
|
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
@ -1,16 +0,0 @@
|
||||||
"use client";
|
|
||||||
import SiteBreadcrumb from "@/components/site-breadcrumb";
|
|
||||||
import { Button } from "@/components/ui/button";
|
|
||||||
import { useState } from "react";
|
|
||||||
|
|
||||||
export default function TaskPlanMediahub() {
|
|
||||||
const [singleView, setSingleView] = useState(true);
|
|
||||||
return (
|
|
||||||
<div>
|
|
||||||
<SiteBreadcrumb />
|
|
||||||
<div className="flex justify-between">
|
|
||||||
<Button></Button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
@ -34,8 +34,6 @@
|
||||||
--warning: 16 93% 70%;
|
--warning: 16 93% 70%;
|
||||||
--warning-foreground: 33.3 100% 96.5%;
|
--warning-foreground: 33.3 100% 96.5%;
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
--success: 154 52% 55%;
|
--success: 154 52% 55%;
|
||||||
--success-foreground: 138.5 76.5% 96.7%;
|
--success-foreground: 138.5 76.5% 96.7%;
|
||||||
|
|
||||||
|
|
@ -85,7 +83,6 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dark {
|
.dark {
|
||||||
|
|
||||||
--background: 222.2 47.4% 11.2%;
|
--background: 222.2 47.4% 11.2%;
|
||||||
--foreground: 210 40% 98%;
|
--foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
|
@ -95,7 +92,6 @@
|
||||||
--popover: 222.2 84% 4.9%;
|
--popover: 222.2 84% 4.9%;
|
||||||
--popover-foreground: 210 40% 98%;
|
--popover-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
|
||||||
--card: 215 27.9% 16.9%;
|
--card: 215 27.9% 16.9%;
|
||||||
--card-foreground: 210 40% 98%;
|
--card-foreground: 210 40% 98%;
|
||||||
|
|
||||||
|
|
@ -166,19 +162,16 @@
|
||||||
.dashcode-app-codeVmapWarning path {
|
.dashcode-app-codeVmapWarning path {
|
||||||
@apply fill-warning;
|
@apply fill-warning;
|
||||||
}
|
}
|
||||||
.dashcode-app-codeVmapWarning path .svg-map__location[aria-checked="true"] {
|
.dashcode-app-codeVmapWarning path .svg-map__location[aria-checked="true"] {
|
||||||
@apply fill-warning;
|
@apply fill-warning;
|
||||||
}
|
}
|
||||||
.dashcode-app-codeVmapSuccess path {
|
.dashcode-app-codeVmapSuccess path {
|
||||||
@apply fill-success;
|
@apply fill-success;
|
||||||
|
|
||||||
}
|
}
|
||||||
.dashcode-app-codeVmapSuccess path .svg-map__location[aria-checked="true"] {
|
.dashcode-app-codeVmapSuccess path .svg-map__location[aria-checked="true"] {
|
||||||
@apply fill-success;
|
@apply fill-success;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@layer base {
|
@layer base {
|
||||||
* {
|
* {
|
||||||
@apply border-border;
|
@apply border-border;
|
||||||
|
|
@ -208,7 +201,6 @@
|
||||||
padding-right: 0px !important;
|
padding-right: 0px !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.no-scrollbar::-webkit-scrollbar {
|
.no-scrollbar::-webkit-scrollbar {
|
||||||
width: 0px;
|
width: 0px;
|
||||||
}
|
}
|
||||||
|
|
@ -216,7 +208,6 @@
|
||||||
.no-scrollbar::-webkit-scrollbar-thumb {
|
.no-scrollbar::-webkit-scrollbar-thumb {
|
||||||
background-color: transparent;
|
background-color: transparent;
|
||||||
}
|
}
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.logo-box-3 {
|
.logo-box-3 {
|
||||||
|
|
@ -227,15 +218,23 @@
|
||||||
@apply flex flex-col items-center justify-center;
|
@apply flex flex-col items-center justify-center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
.has-sticky-header::after {
|
.has-sticky-header::after {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -10;
|
z-index: -10;
|
||||||
--tw-backdrop-blur: blur(12px);
|
--tw-backdrop-blur: blur(12px);
|
||||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
||||||
|
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
|
||||||
|
var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||||
|
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
||||||
|
var(--tw-backdrop-sepia);
|
||||||
--tw-content: "";
|
--tw-content: "";
|
||||||
content: var(--tw-content);
|
content: var(--tw-content);
|
||||||
background: linear-gradient(180deg, rgba(var(--v-theme-background)) 44%, rgba(var(--v-theme-background)) 73%, rgba(var(--v-theme-background)));
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(var(--v-theme-background)) 44%,
|
||||||
|
rgba(var(--v-theme-background)) 73%,
|
||||||
|
rgba(var(--v-theme-background))
|
||||||
|
);
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
block-size: 5.5rem;
|
block-size: 5.5rem;
|
||||||
inset-block-start: -2.5rem;
|
inset-block-start: -2.5rem;
|
||||||
|
|
@ -248,10 +247,19 @@
|
||||||
position: absolute;
|
position: absolute;
|
||||||
z-index: -10;
|
z-index: -10;
|
||||||
--tw-backdrop-blur: blur(12px);
|
--tw-backdrop-blur: blur(12px);
|
||||||
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);
|
backdrop-filter: var(--tw-backdrop-blur) var(--tw-backdrop-brightness)
|
||||||
|
var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale)
|
||||||
|
var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert)
|
||||||
|
var(--tw-backdrop-opacity) var(--tw-backdrop-saturate)
|
||||||
|
var(--tw-backdrop-sepia);
|
||||||
--tw-content: "";
|
--tw-content: "";
|
||||||
content: var(--tw-content);
|
content: var(--tw-content);
|
||||||
background: linear-gradient(180deg, rgba(var(--v-theme-background)) 44%, rgba(var(--v-theme-background)) 73%, rgba(var(--v-theme-background)));
|
background: linear-gradient(
|
||||||
|
180deg,
|
||||||
|
rgba(var(--v-theme-background)) 44%,
|
||||||
|
rgba(var(--v-theme-background)) 73%,
|
||||||
|
rgba(var(--v-theme-background))
|
||||||
|
);
|
||||||
background-repeat: repeat;
|
background-repeat: repeat;
|
||||||
block-size: 5.5rem;
|
block-size: 5.5rem;
|
||||||
inset-block-start: 1.5rem;
|
inset-block-start: 1.5rem;
|
||||||
|
|
@ -365,7 +373,7 @@
|
||||||
@apply hidden;
|
@apply hidden;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashcode-app-calendar .fc .fc-list-sticky .fc-list-day>* {
|
.dashcode-app-calendar .fc .fc-list-sticky .fc-list-day > * {
|
||||||
@apply bg-default-50;
|
@apply bg-default-50;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -373,12 +381,11 @@
|
||||||
@apply pt-0;
|
@apply pt-0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashcode-app-calendar .fc-timegrid-event-harness>.fc-timegrid-event {
|
.dashcode-app-calendar .fc-timegrid-event-harness > .fc-timegrid-event {
|
||||||
@apply static;
|
@apply static;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: 981px) {
|
@media (max-width: 981px) {
|
||||||
|
|
||||||
.dashcode-app-calendar .fc-button-group,
|
.dashcode-app-calendar .fc-button-group,
|
||||||
.dashcode-app-calendar .fc .fc-toolbar {
|
.dashcode-app-calendar .fc .fc-toolbar {
|
||||||
display: block !important;
|
display: block !important;
|
||||||
|
|
@ -445,14 +452,13 @@
|
||||||
@apply bg-success border-none text-primary-foreground text-center px-2 font-medium text-sm;
|
@apply bg-success border-none text-primary-foreground text-center px-2 font-medium text-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashcode-app-calendar .dark {
|
.dashcode-app-calendar .dark {
|
||||||
@apply bg-card-foreground border-none text-primary-foreground px-2 font-medium text-sm;
|
@apply bg-card-foreground border-none text-primary-foreground px-2 font-medium text-sm;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
/* react select */
|
/* react select */
|
||||||
|
|
||||||
.dashcode-app .react-select .react-select.is-invalid .select__control {
|
.dashcode-app .react-select .react-select.is-invalid .select__control {
|
||||||
border-color: none !important;
|
border-color: none !important;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -473,10 +479,13 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashcode-app .react-select .select__menu .select__option {
|
.dashcode-app .react-select .select__menu .select__option {
|
||||||
@apply hover:bg-default/10;
|
@apply hover:bg-default/10;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashcode-app .react-select .select__menu .select__option.select__option--is-selected {
|
.dashcode-app
|
||||||
|
.react-select
|
||||||
|
.select__menu
|
||||||
|
.select__option.select__option--is-selected {
|
||||||
@apply bg-default dark:bg-default-200;
|
@apply bg-default dark:bg-default-200;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -492,11 +501,16 @@
|
||||||
@apply text-default-500;
|
@apply text-default-500;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashcode-app .react-select .react-select__control.select__control--is-disabled {
|
.dashcode-app
|
||||||
|
.react-select
|
||||||
|
.react-select__control.select__control--is-disabled {
|
||||||
@apply cursor-not-allowed;
|
@apply cursor-not-allowed;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashcode-app .react-select .react-select__control .select__indicator-separator {
|
.dashcode-app
|
||||||
|
.react-select
|
||||||
|
.react-select__control
|
||||||
|
.select__indicator-separator {
|
||||||
@apply bg-default-50 text-default-800 placeholder:text-opacity-60;
|
@apply bg-default-50 text-default-800 placeholder:text-opacity-60;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -504,7 +518,12 @@
|
||||||
@apply cursor-pointer text-default-600;
|
@apply cursor-pointer text-default-600;
|
||||||
}
|
}
|
||||||
|
|
||||||
.dashcode-app .react-select .has-error .react-select__control .select__indicator svg {
|
.dashcode-app
|
||||||
|
.react-select
|
||||||
|
.has-error
|
||||||
|
.react-select__control
|
||||||
|
.select__indicator
|
||||||
|
svg {
|
||||||
@apply text-destructive;
|
@apply text-destructive;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -520,7 +539,7 @@
|
||||||
@apply fill-default-foreground;
|
@apply fill-default-foreground;
|
||||||
}
|
}
|
||||||
|
|
||||||
html[dir=rtl] .react-select .select__loading-indicator {
|
html[dir="rtl"] .react-select .select__loading-indicator {
|
||||||
flex-direction: row-reverse;
|
flex-direction: row-reverse;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
@ -540,4 +559,18 @@ html[dir=rtl] .react-select .select__loading-indicator {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar-table::-webkit-scrollbar {
|
||||||
|
width: 1px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar-table::-webkit-scrollbar-track {
|
||||||
|
background: #e5e7eb;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar-table::-webkit-scrollbar-thumb {
|
||||||
|
background: #6b7280;
|
||||||
|
}
|
||||||
|
|
||||||
|
.custom-scrollbar-table::-webkit-scrollbar-thumb:hover {
|
||||||
|
background: #9ca3af;
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,133 @@
|
||||||
|
import * as React from "react";
|
||||||
|
import { ColumnDef } from "@tanstack/react-table";
|
||||||
|
|
||||||
|
import { Eye, MoreVertical, SquarePen, Trash2 } from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
DropdownMenuItem,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { htmlToString } from "@/utils/globals";
|
||||||
|
import { Link, useRouter } from "@/i18n/routing";
|
||||||
|
import {
|
||||||
|
Accordion,
|
||||||
|
AccordionContent,
|
||||||
|
AccordionItem,
|
||||||
|
AccordionTrigger,
|
||||||
|
} from "@/components/ui/accordion";
|
||||||
|
import {
|
||||||
|
Dialog,
|
||||||
|
DialogContent,
|
||||||
|
DialogHeader,
|
||||||
|
DialogTitle,
|
||||||
|
DialogTrigger,
|
||||||
|
} from "@/components/ui/dialog";
|
||||||
|
|
||||||
|
const columns: ColumnDef<any>[] = [
|
||||||
|
{
|
||||||
|
accessorKey: "no",
|
||||||
|
header: "No",
|
||||||
|
cell: ({ row }) => <span>{row.getValue("no")}</span>,
|
||||||
|
},
|
||||||
|
// {
|
||||||
|
// accessorKey: "title",
|
||||||
|
// header: "Judul Perencanaan",
|
||||||
|
// cell: ({ row }) => <span>{row.getValue("title")}</span>,
|
||||||
|
// },
|
||||||
|
{
|
||||||
|
accessorKey: "title",
|
||||||
|
header: "Judul Perencanaan",
|
||||||
|
cell: ({ row }) => {
|
||||||
|
const datas = row.original.subPlanningList;
|
||||||
|
return (
|
||||||
|
<Dialog>
|
||||||
|
<DialogTrigger asChild>
|
||||||
|
<a className="cursor-pointer">{row.getValue("title")}</a>
|
||||||
|
</DialogTrigger>
|
||||||
|
<DialogContent size="md">
|
||||||
|
<DialogHeader>
|
||||||
|
<DialogTitle>Rencanaan Mingguan</DialogTitle>
|
||||||
|
</DialogHeader>
|
||||||
|
<table>
|
||||||
|
<tr>
|
||||||
|
<th className="text-left">Judul Perencanaan</th>
|
||||||
|
<th>Batas Waktu</th>
|
||||||
|
<th>Status</th>
|
||||||
|
<th>Aksi</th>
|
||||||
|
</tr>
|
||||||
|
{datas?.map((data: any) => (
|
||||||
|
<tr key={data.id}>
|
||||||
|
<th className="text-left font-normal text-sm">
|
||||||
|
{data.title}
|
||||||
|
</th>
|
||||||
|
<th className="font-normal text-sm">{data.date}</th>
|
||||||
|
<th className="font-normal text-sm">{data.status}</th>
|
||||||
|
<th className="flex justify-center text-sm">
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
size="icon"
|
||||||
|
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
||||||
|
>
|
||||||
|
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent className="p-0" align="end">
|
||||||
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||||
|
Detail
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
</th>
|
||||||
|
</tr>
|
||||||
|
))}
|
||||||
|
</table>
|
||||||
|
</DialogContent>
|
||||||
|
</Dialog>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
accessorKey: "date",
|
||||||
|
header: "Batas Waktu",
|
||||||
|
cell: ({ row }) => <span>{row.getValue("date")}</span>,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
accessorKey: "status",
|
||||||
|
header: "Status",
|
||||||
|
cell: ({ row }) => <span>{row.getValue("status")}</span>,
|
||||||
|
},
|
||||||
|
|
||||||
|
{
|
||||||
|
id: "actions",
|
||||||
|
accessorKey: "action",
|
||||||
|
header: "Actions",
|
||||||
|
enableHiding: false,
|
||||||
|
cell: ({ row }) => {
|
||||||
|
return (
|
||||||
|
<DropdownMenu>
|
||||||
|
<DropdownMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
size="icon"
|
||||||
|
className="bg-transparent ring-offset-transparent hover:bg-transparent hover:ring-0 hover:ring-transparent"
|
||||||
|
>
|
||||||
|
<MoreVertical className="h-4 w-4 text-default-800" />
|
||||||
|
</Button>
|
||||||
|
</DropdownMenuTrigger>
|
||||||
|
<DropdownMenuContent className="p-0" align="end">
|
||||||
|
<DropdownMenuItem className="p-2 border-b text-default-700 group focus:bg-default focus:text-primary-foreground rounded-none">
|
||||||
|
Detail
|
||||||
|
</DropdownMenuItem>
|
||||||
|
</DropdownMenuContent>
|
||||||
|
</DropdownMenu>
|
||||||
|
);
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
export default columns;
|
||||||
|
|
@ -0,0 +1,179 @@
|
||||||
|
"use client";
|
||||||
|
|
||||||
|
import * as React from "react";
|
||||||
|
import {
|
||||||
|
ColumnDef,
|
||||||
|
ColumnFiltersState,
|
||||||
|
PaginationState,
|
||||||
|
SortingState,
|
||||||
|
VisibilityState,
|
||||||
|
flexRender,
|
||||||
|
getCoreRowModel,
|
||||||
|
getFilteredRowModel,
|
||||||
|
getPaginationRowModel,
|
||||||
|
getSortedRowModel,
|
||||||
|
useReactTable,
|
||||||
|
} from "@tanstack/react-table";
|
||||||
|
import { Button } from "@/components/ui/button";
|
||||||
|
|
||||||
|
import {
|
||||||
|
Table,
|
||||||
|
TableBody,
|
||||||
|
TableCell,
|
||||||
|
TableHead,
|
||||||
|
TableHeader,
|
||||||
|
TableRow,
|
||||||
|
} from "@/components/ui/table";
|
||||||
|
import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
|
||||||
|
import {
|
||||||
|
ChevronLeft,
|
||||||
|
ChevronRight,
|
||||||
|
Eye,
|
||||||
|
MoreVertical,
|
||||||
|
Search,
|
||||||
|
SquarePen,
|
||||||
|
Trash2,
|
||||||
|
TrendingDown,
|
||||||
|
TrendingUp,
|
||||||
|
} from "lucide-react";
|
||||||
|
import { cn } from "@/lib/utils";
|
||||||
|
import {
|
||||||
|
DropdownMenu,
|
||||||
|
DropdownMenuContent,
|
||||||
|
DropdownMenuItem,
|
||||||
|
DropdownMenuTrigger,
|
||||||
|
} from "@/components/ui/dropdown-menu";
|
||||||
|
import { Input } from "@/components/ui/input";
|
||||||
|
import { InputGroup, InputGroupText } from "@/components/ui/input-group";
|
||||||
|
import { paginationBlog } from "@/service/blog/blog";
|
||||||
|
import { ticketingPagination } from "@/service/ticketing/ticketing";
|
||||||
|
import { Badge } from "@/components/ui/badge";
|
||||||
|
import { useRouter, useSearchParams } from "next/navigation";
|
||||||
|
import TablePagination from "@/components/table/table-pagination";
|
||||||
|
import columns from "./list-view-column";
|
||||||
|
import { getPlanningPagination } from "@/service/agenda-setting/agenda-setting";
|
||||||
|
|
||||||
|
const ListViewTable = () => {
|
||||||
|
const router = useRouter();
|
||||||
|
const searchParams = useSearchParams();
|
||||||
|
|
||||||
|
const [dataTable, setDataTable] = React.useState<any[]>([]);
|
||||||
|
const [totalData, setTotalData] = React.useState<number>(1);
|
||||||
|
const [sorting, setSorting] = React.useState<SortingState>([]);
|
||||||
|
const [columnFilters, setColumnFilters] = React.useState<ColumnFiltersState>(
|
||||||
|
[]
|
||||||
|
);
|
||||||
|
const [columnVisibility, setColumnVisibility] =
|
||||||
|
React.useState<VisibilityState>({});
|
||||||
|
const [rowSelection, setRowSelection] = React.useState({});
|
||||||
|
const [pagination, setPagination] = React.useState<PaginationState>({
|
||||||
|
pageIndex: 0,
|
||||||
|
pageSize: 10,
|
||||||
|
});
|
||||||
|
const [page, setPage] = React.useState(1);
|
||||||
|
const [limit, setLimit] = React.useState(10);
|
||||||
|
const [totalPage, setTotalPage] = React.useState(1);
|
||||||
|
const table = useReactTable({
|
||||||
|
data: dataTable,
|
||||||
|
columns,
|
||||||
|
onSortingChange: setSorting,
|
||||||
|
onColumnFiltersChange: setColumnFilters,
|
||||||
|
getCoreRowModel: getCoreRowModel(),
|
||||||
|
getPaginationRowModel: getPaginationRowModel(),
|
||||||
|
getSortedRowModel: getSortedRowModel(),
|
||||||
|
getFilteredRowModel: getFilteredRowModel(),
|
||||||
|
onColumnVisibilityChange: setColumnVisibility,
|
||||||
|
onRowSelectionChange: setRowSelection,
|
||||||
|
onPaginationChange: setPagination,
|
||||||
|
state: {
|
||||||
|
sorting,
|
||||||
|
columnFilters,
|
||||||
|
columnVisibility,
|
||||||
|
rowSelection,
|
||||||
|
pagination,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
const pageFromUrl = searchParams?.get("page");
|
||||||
|
if (pageFromUrl) {
|
||||||
|
setPage(Number(pageFromUrl));
|
||||||
|
}
|
||||||
|
}, [searchParams]);
|
||||||
|
|
||||||
|
React.useEffect(() => {
|
||||||
|
fetchData();
|
||||||
|
}, [page, limit]);
|
||||||
|
|
||||||
|
async function fetchData() {
|
||||||
|
try {
|
||||||
|
const res = await getPlanningPagination(page - 1, "", 10, 1, 3);
|
||||||
|
const data = res.data?.data;
|
||||||
|
const contentData = data?.content;
|
||||||
|
contentData.forEach((item: any, index: number) => {
|
||||||
|
item.no = (page - 1) * limit + index + 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
console.log("contentData : ", data);
|
||||||
|
|
||||||
|
setDataTable(contentData);
|
||||||
|
setTotalData(data?.totalElements);
|
||||||
|
setTotalPage(data?.totalPages);
|
||||||
|
} catch (error) {
|
||||||
|
console.error("Error fetching tasks:", error);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="w-full overflow-x-auto">
|
||||||
|
<Table className="overflow-hidden mt-3">
|
||||||
|
<TableHeader>
|
||||||
|
{table.getHeaderGroups().map((headerGroup) => (
|
||||||
|
<TableRow key={headerGroup.id} className="bg-default-200">
|
||||||
|
{headerGroup.headers.map((header) => (
|
||||||
|
<TableHead key={header.id}>
|
||||||
|
{header.isPlaceholder
|
||||||
|
? null
|
||||||
|
: flexRender(
|
||||||
|
header.column.columnDef.header,
|
||||||
|
header.getContext()
|
||||||
|
)}
|
||||||
|
</TableHead>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))}
|
||||||
|
</TableHeader>
|
||||||
|
<TableBody>
|
||||||
|
{table.getRowModel().rows?.length ? (
|
||||||
|
table.getRowModel().rows.map((row) => (
|
||||||
|
<TableRow
|
||||||
|
key={row.id}
|
||||||
|
data-state={row.getIsSelected() && "selected"}
|
||||||
|
className="h-[75px]"
|
||||||
|
>
|
||||||
|
{row.getVisibleCells().map((cell) => (
|
||||||
|
<TableCell key={cell.id}>
|
||||||
|
{flexRender(cell.column.columnDef.cell, cell.getContext())}
|
||||||
|
</TableCell>
|
||||||
|
))}
|
||||||
|
</TableRow>
|
||||||
|
))
|
||||||
|
) : (
|
||||||
|
<TableRow>
|
||||||
|
<TableCell colSpan={columns.length} className="h-24 text-center">
|
||||||
|
No results.
|
||||||
|
</TableCell>
|
||||||
|
</TableRow>
|
||||||
|
)}
|
||||||
|
</TableBody>
|
||||||
|
</Table>
|
||||||
|
<TablePagination
|
||||||
|
table={table}
|
||||||
|
totalData={totalData}
|
||||||
|
totalPage={totalPage}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
export default ListViewTable;
|
||||||
|
|
@ -0,0 +1,328 @@
|
||||||
|
"use client";
|
||||||
|
import dayjs from "dayjs";
|
||||||
|
import { useEffect, useRef, useState } from "react";
|
||||||
|
import utc from "dayjs/plugin/utc";
|
||||||
|
import { ChevronLeft, ChevronRight } from "lucide-react";
|
||||||
|
import { close, loading } from "@/config/swal";
|
||||||
|
import { useSearchParams } from "next/navigation";
|
||||||
|
import { Swiper, SwiperSlide } from "swiper/react";
|
||||||
|
import "swiper/css";
|
||||||
|
import "swiper/css/free-mode";
|
||||||
|
import "swiper/css/navigation";
|
||||||
|
import "swiper/css/thumbs";
|
||||||
|
|
||||||
|
import Image from "next/image";
|
||||||
|
import { FreeMode, Navigation, Thumbs } from "swiper/modules";
|
||||||
|
import { Swiper as SwiperType } from "swiper/types";
|
||||||
|
import {
|
||||||
|
getMonthlyPlanList,
|
||||||
|
getPlanningDailyByTypeId,
|
||||||
|
getWeeklyPlanList,
|
||||||
|
getWeeklyPlanListByParentId,
|
||||||
|
} from "@/service/agenda-setting/agenda-setting";
|
||||||
|
import TaskPlanMediahubTable from "@/app/[locale]/(protected)/curator/task-plan/mediahub/components/table";
|
||||||
|
|
||||||
|
const TODAY = dayjs().format("YYYY-MM-DD"); // Pastikan Anda mendefinisikan TODAY dengan format yang konsisten
|
||||||
|
|
||||||
|
export default function SingleViewTable() {
|
||||||
|
const params = useSearchParams();
|
||||||
|
const [selectedMonthItem, setSelectedMonthItem] = useState<
|
||||||
|
string | undefined
|
||||||
|
>(undefined);
|
||||||
|
const [selectedWeekly, setSelectedWeekly] = useState<string | undefined>(
|
||||||
|
undefined
|
||||||
|
);
|
||||||
|
const [selectedDate, setSelectedDate] = useState<number>(
|
||||||
|
new Date(TODAY).getDate()
|
||||||
|
);
|
||||||
|
const [nowDate, setNowDate] = useState<string>(TODAY);
|
||||||
|
|
||||||
|
const INITIAL_YEAR = dayjs().format("YYYY");
|
||||||
|
const INITIAL_MONTH = dayjs().format("M");
|
||||||
|
const size = 20;
|
||||||
|
|
||||||
|
const page: string | undefined | null = params?.get("page");
|
||||||
|
const id: string | undefined | null = params?.get("id");
|
||||||
|
const pages = page ? Number(page) - 1 : 0;
|
||||||
|
const no = (size || 10) * pages;
|
||||||
|
|
||||||
|
const [selectedMonth, setSelectedMonth] = useState<dayjs.Dayjs>(
|
||||||
|
dayjs(new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1))
|
||||||
|
);
|
||||||
|
|
||||||
|
const [selectedMonthTitle, setSelectedMonthTitle] = useState<string>("");
|
||||||
|
const [days, setDays] = useState<any>([]);
|
||||||
|
|
||||||
|
const weekday = require("dayjs/plugin/weekday");
|
||||||
|
const weekOfYear = require("dayjs/plugin/weekOfYear");
|
||||||
|
|
||||||
|
dayjs.extend(utc);
|
||||||
|
dayjs.extend(weekday);
|
||||||
|
dayjs.extend(weekOfYear);
|
||||||
|
|
||||||
|
const [monthlyList, setMonthlyList] = useState([]);
|
||||||
|
const [weeklyList, setWeeklyList] = useState([]);
|
||||||
|
const [getData, setGetData] = useState<any>([]);
|
||||||
|
const [getTotalPage, setGetTotalPage] = useState<number>(1);
|
||||||
|
const [getTOtalData, setGetTotalData] = useState(0);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
createCalendar("START");
|
||||||
|
}, []);
|
||||||
|
|
||||||
|
function createDaysForCurrentMonth(
|
||||||
|
year: string,
|
||||||
|
month: string,
|
||||||
|
daysInMonth: number
|
||||||
|
) {
|
||||||
|
const days: any = [];
|
||||||
|
for (let day = 1; day <= daysInMonth; day++) {
|
||||||
|
const date = dayjs(
|
||||||
|
new Date(parseInt(year), parseInt(month) - 1, day)
|
||||||
|
).format("YYYY-MM-DD");
|
||||||
|
days.push({
|
||||||
|
date,
|
||||||
|
isCurrentMonth: true,
|
||||||
|
isToday: date === TODAY,
|
||||||
|
});
|
||||||
|
}
|
||||||
|
return days;
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getMonthlyPlanning(dates: number) {
|
||||||
|
const res = await getMonthlyPlanList(dates, 1);
|
||||||
|
console.log("monthsss", res);
|
||||||
|
setMonthlyList(res.data?.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function getWeeklyPlanning(
|
||||||
|
id: string | undefined,
|
||||||
|
date: number | undefined
|
||||||
|
) {
|
||||||
|
if (id) {
|
||||||
|
const res = await getWeeklyPlanListByParentId(id, 1);
|
||||||
|
setWeeklyList(res.data?.data);
|
||||||
|
} else {
|
||||||
|
const res = await getWeeklyPlanList(date, 1, true);
|
||||||
|
setWeeklyList(res.data?.data);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function createCalendar(
|
||||||
|
year: string = INITIAL_YEAR,
|
||||||
|
month: string = INITIAL_MONTH
|
||||||
|
) {
|
||||||
|
const state = year;
|
||||||
|
|
||||||
|
year = year === "START" ? INITIAL_YEAR : year;
|
||||||
|
setSelectedMonthTitle(
|
||||||
|
dayjs(new Date(parseInt(year), parseInt(month) - 1))
|
||||||
|
.utc()
|
||||||
|
.local()
|
||||||
|
.format("MMMM YYYY")
|
||||||
|
);
|
||||||
|
|
||||||
|
const currentMonthDays = createDaysForCurrentMonth(
|
||||||
|
year,
|
||||||
|
month,
|
||||||
|
dayjs(`${year}-${month}-01`).daysInMonth()
|
||||||
|
);
|
||||||
|
|
||||||
|
console.log("Month:", currentMonthDays);
|
||||||
|
getMonthlyPlanning(state === "START" ? TODAY : currentMonthDays[0]?.date);
|
||||||
|
getWeeklyPlanning(
|
||||||
|
undefined,
|
||||||
|
state === "START" ? TODAY : currentMonthDays[0]?.date
|
||||||
|
);
|
||||||
|
|
||||||
|
setDays(currentMonthDays);
|
||||||
|
console.log("currentMonthDays", currentMonthDays);
|
||||||
|
}
|
||||||
|
|
||||||
|
async function fetchData(
|
||||||
|
parentId: string | number | undefined,
|
||||||
|
date?: string
|
||||||
|
) {
|
||||||
|
loading();
|
||||||
|
const response = await getPlanningDailyByTypeId(
|
||||||
|
pages,
|
||||||
|
size,
|
||||||
|
parentId || selectedWeekly,
|
||||||
|
date || nowDate || TODAY,
|
||||||
|
1
|
||||||
|
);
|
||||||
|
|
||||||
|
close();
|
||||||
|
setupData(response.data?.data);
|
||||||
|
}
|
||||||
|
|
||||||
|
function setupData(rawData: any) {
|
||||||
|
if (rawData != undefined) {
|
||||||
|
const dataContent = rawData?.content;
|
||||||
|
const data = [];
|
||||||
|
|
||||||
|
for (const [i, element] of dataContent.entries()) {
|
||||||
|
element.no = no + i + 1;
|
||||||
|
data.push(element);
|
||||||
|
}
|
||||||
|
|
||||||
|
setGetData(data);
|
||||||
|
setGetTotalPage(rawData?.totalPages);
|
||||||
|
setGetTotalData(rawData?.totalElements);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPrevMonth() {
|
||||||
|
const selectedMonthNew = dayjs(selectedMonth).subtract(1, "month");
|
||||||
|
|
||||||
|
createCalendar(
|
||||||
|
selectedMonthNew.format("YYYY"),
|
||||||
|
selectedMonthNew.format("M")
|
||||||
|
);
|
||||||
|
fetchData(undefined, selectedMonthNew?.format("YYYY-MM-DD"));
|
||||||
|
setSelectedMonth(selectedMonthNew);
|
||||||
|
setSelectedDate(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getPresentMonth() {
|
||||||
|
const selectedMonthNew = dayjs(
|
||||||
|
new Date(parseInt(INITIAL_YEAR), parseInt(INITIAL_MONTH) - 1, 1)
|
||||||
|
);
|
||||||
|
|
||||||
|
createCalendar(
|
||||||
|
selectedMonthNew.format("YYYY"),
|
||||||
|
selectedMonthNew.format("M")
|
||||||
|
);
|
||||||
|
fetchData(undefined, TODAY);
|
||||||
|
setSelectedDate(Number(dayjs().format("D")));
|
||||||
|
setSelectedMonth(selectedMonthNew);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getNextMonth() {
|
||||||
|
const selectedMonthNew = dayjs(selectedMonth).add(1, "month");
|
||||||
|
|
||||||
|
createCalendar(
|
||||||
|
selectedMonthNew.format("YYYY"),
|
||||||
|
selectedMonthNew.format("M")
|
||||||
|
);
|
||||||
|
fetchData(undefined, selectedMonthNew?.format("YYYY-MM-DD"));
|
||||||
|
setSelectedMonth(selectedMonthNew);
|
||||||
|
setSelectedDate(1);
|
||||||
|
}
|
||||||
|
const onSelectedMonthItem = (id: string | undefined) => {
|
||||||
|
// fetchData(date)
|
||||||
|
setSelectedMonthItem(id);
|
||||||
|
getWeeklyPlanning(id, undefined);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelectedWeekly = (id: string | undefined) => {
|
||||||
|
setSelectedWeekly(id);
|
||||||
|
fetchData(id);
|
||||||
|
};
|
||||||
|
|
||||||
|
const onSelectedDay = (day: number, date: string) => {
|
||||||
|
fetchData(undefined, date);
|
||||||
|
setSelectedDate(day);
|
||||||
|
setNowDate(date);
|
||||||
|
};
|
||||||
|
const removeSelection = () => {
|
||||||
|
setSelectedMonthItem(undefined);
|
||||||
|
setSelectedWeekly(undefined);
|
||||||
|
};
|
||||||
|
|
||||||
|
return (
|
||||||
|
<div className="border-2 rounded-sm p-4 flex gap-3 flex-col">
|
||||||
|
<div className="flex justify-between">
|
||||||
|
<div className="flex flex-row gap-2">
|
||||||
|
<a onClick={getPrevMonth} className="cursor-pointer">
|
||||||
|
<ChevronLeft />
|
||||||
|
</a>
|
||||||
|
<a onClick={getPresentMonth} className="cursor-pointer">
|
||||||
|
Today
|
||||||
|
</a>
|
||||||
|
<a onClick={getNextMonth} className="cursor-pointer">
|
||||||
|
<ChevronRight />
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<p className="text-xl font-semibold">{selectedMonthTitle}</p>
|
||||||
|
</div>
|
||||||
|
<div className="flex justify-end">
|
||||||
|
<a
|
||||||
|
className="border-2 border-primary px-2 py-1 rounded-full text-[10px] text-primary cursor-pointer"
|
||||||
|
onClick={() => removeSelection()}
|
||||||
|
>
|
||||||
|
Hapus Pilihan
|
||||||
|
</a>
|
||||||
|
</div>
|
||||||
|
<div className="px-8 flex flex-col gap-2 text-sm">
|
||||||
|
<p className="font-semibold">Rencana Bulanan</p>
|
||||||
|
{monthlyList?.length > 0 ? (
|
||||||
|
<div className="flex flex-nowrap gap-3 flex-row">
|
||||||
|
{monthlyList?.map((item: any) => (
|
||||||
|
<div
|
||||||
|
key={item.id}
|
||||||
|
className={`rounded-full px-8 py-3 cursor-pointer ${
|
||||||
|
selectedMonthItem === item.id
|
||||||
|
? "bg-sky-600 text-white "
|
||||||
|
: "bg-sky-300"
|
||||||
|
}`}
|
||||||
|
onClick={() => onSelectedMonthItem(item.id)}
|
||||||
|
>
|
||||||
|
<p>{item.title}</p>
|
||||||
|
</div>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex justify-center bg-slate-200 rounded-full py-1">
|
||||||
|
Rencana Bulanan Belum Tersedia
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<p className="font-semibold">Rencana Mingguan</p>
|
||||||
|
{weeklyList?.length > 0 ? (
|
||||||
|
<div className="flex flex-nowrap gap-3 flex-row">
|
||||||
|
{weeklyList?.map((item: any) => (
|
||||||
|
<a
|
||||||
|
key={item.id}
|
||||||
|
className={`bg-sky-300 rounded-full px-8 py-3 cursor-pointer ${
|
||||||
|
selectedWeekly === item.id
|
||||||
|
? "bg-sky-600 text-white "
|
||||||
|
: "bg-sky-300"
|
||||||
|
}`}
|
||||||
|
onClick={() => onSelectedWeekly(item.id)}
|
||||||
|
>
|
||||||
|
<p>{item.title}</p>
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
) : (
|
||||||
|
<div className="flex justify-center bg-slate-200 rounded-full py-1">
|
||||||
|
Rencana Mingguan Belum Tersedia
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
<p className="font-semibold">Rencana Harian</p>
|
||||||
|
</div>
|
||||||
|
<div className="custom-scrollbar-table flex flex-nowrap justify-between gap-2 overflow-x-auto">
|
||||||
|
{days.map((day: any) => (
|
||||||
|
<a
|
||||||
|
key={day.date}
|
||||||
|
className={`cursor-pointer px-2 ${
|
||||||
|
selectedDate == parseInt(day.date.split("-")[2], 10)
|
||||||
|
? "border-b-2 border-primary text-primary"
|
||||||
|
: ""
|
||||||
|
}`}
|
||||||
|
onClick={() =>
|
||||||
|
onSelectedDay(parseInt(day.date.split("-")[2], 10), day.date)
|
||||||
|
}
|
||||||
|
>
|
||||||
|
{parseInt(day.date.split("-")[2], 10)}
|
||||||
|
</a>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
<TaskPlanMediahubTable
|
||||||
|
data={getData}
|
||||||
|
totalPage={getTotalPage}
|
||||||
|
totalData={getTOtalData}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
@ -2,7 +2,7 @@ import { getAPIInterceptor, postAPIInterceptor } from "@/config/api";
|
||||||
|
|
||||||
export async function getAgendaSettingsById(id: any) {
|
export async function getAgendaSettingsById(id: any) {
|
||||||
const url = `agenda-settings?id=${id}`;
|
const url = `agenda-settings?id=${id}`;
|
||||||
return getAPIInterceptor({ url });
|
return getAPIInterceptor(url);
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getAgendaSettingsList(year = "", month = "", type = "") {
|
export async function getAgendaSettingsList(year = "", month = "", type = "") {
|
||||||
|
|
@ -14,3 +14,52 @@ export async function saveAgendaSettings(data: any) {
|
||||||
const url = `agenda-settings`;
|
const url = `agenda-settings`;
|
||||||
return postAPIInterceptor(url, data);
|
return postAPIInterceptor(url, data);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export async function getPlanningDailyByTypeId(
|
||||||
|
page: number,
|
||||||
|
size = 10,
|
||||||
|
parentId: any,
|
||||||
|
date: string,
|
||||||
|
typeId: number
|
||||||
|
) {
|
||||||
|
const url = `planning/pagination/daily?enablePage=1&size=${size}&page=${page}&date=${date}&typeId=${typeId}${
|
||||||
|
parentId ? `&parentId=${parentId}` : ""
|
||||||
|
}`;
|
||||||
|
return getAPIInterceptor(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getMonthlyPlanList(dates: number, typeId: number) {
|
||||||
|
const url = `planning/monthly/list?date=${dates}&typeId=${typeId}`;
|
||||||
|
return getAPIInterceptor(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getWeeklyPlanList(
|
||||||
|
dates: number | undefined,
|
||||||
|
typeId: number,
|
||||||
|
isMonthly = false
|
||||||
|
) {
|
||||||
|
const url = `planning/weekly/list?date=${dates}&typeId=${typeId}&isMonthly=${isMonthly}`;
|
||||||
|
return getAPIInterceptor(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getWeeklyPlanListByParentId(id: string, typeId: number) {
|
||||||
|
const url = `planning/weekly/list?parentId=${id}&typeId=${typeId}`;
|
||||||
|
return getAPIInterceptor(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function getPlanningPagination(
|
||||||
|
page: number,
|
||||||
|
title = "",
|
||||||
|
size = 10,
|
||||||
|
typeId: number,
|
||||||
|
time: number,
|
||||||
|
parentId = ""
|
||||||
|
) {
|
||||||
|
const url = `planning/pagination?enablePage=1&size=${size}&page=${page}&title=${title}&typeId=${typeId}&time=${time}&parentId=${parentId}`;
|
||||||
|
return getAPIInterceptor(url);
|
||||||
|
}
|
||||||
|
|
||||||
|
export async function savePlanning(data: any) {
|
||||||
|
const url = "planning";
|
||||||
|
return postAPIInterceptor(url, data);
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -1,8 +1,6 @@
|
||||||
import { format } from "date-fns";
|
import { format } from "date-fns";
|
||||||
import { id, tr } from "date-fns/locale";
|
import { id, tr } from "date-fns/locale";
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
export const generateLocalizedPath = (href: string, locale: string): string => {
|
export const generateLocalizedPath = (href: string, locale: string): string => {
|
||||||
if (href.startsWith(`/${locale}`)) {
|
if (href.startsWith(`/${locale}`)) {
|
||||||
return href;
|
return href;
|
||||||
|
|
@ -10,7 +8,11 @@ export const generateLocalizedPath = (href: string, locale: string): string => {
|
||||||
return `/${locale}${href}`;
|
return `/${locale}${href}`;
|
||||||
};
|
};
|
||||||
|
|
||||||
export function textEllipsis(str: string, maxLength: number, { side = "end", ellipsis = "..." } = {}) {
|
export function textEllipsis(
|
||||||
|
str: string,
|
||||||
|
maxLength: number,
|
||||||
|
{ side = "end", ellipsis = "..." } = {}
|
||||||
|
) {
|
||||||
if (str !== undefined && str?.length > maxLength) {
|
if (str !== undefined && str?.length > maxLength) {
|
||||||
switch (side) {
|
switch (side) {
|
||||||
case "start":
|
case "start":
|
||||||
|
|
@ -21,7 +23,7 @@ export function textEllipsis(str: string, maxLength: number, { side = "end", ell
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
return str;
|
return str;
|
||||||
};
|
}
|
||||||
|
|
||||||
export function formatDateToIndonesian(d: Date) {
|
export function formatDateToIndonesian(d: Date) {
|
||||||
try {
|
try {
|
||||||
|
|
@ -31,3 +33,33 @@ export function formatDateToIndonesian(d: Date) {
|
||||||
return "";
|
return "";
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
export function htmlToString(str: string) {
|
||||||
|
if (str == undefined || str == null) {
|
||||||
|
return "";
|
||||||
|
}
|
||||||
|
return (
|
||||||
|
str
|
||||||
|
.replaceAll(/<style[^>]*>.*<\/style>/gm, "")
|
||||||
|
// Remove script tags and content
|
||||||
|
.replaceAll(/<script[^>]*>.*<\/script>/gm, "")
|
||||||
|
// Replace  ,&ndash
|
||||||
|
.replaceAll(" ", "")
|
||||||
|
.replaceAll("–", "-")
|
||||||
|
// Replace quotation mark
|
||||||
|
.replaceAll("“", '"')
|
||||||
|
.replaceAll("”", '"')
|
||||||
|
// Remove all opening, closing and orphan HTML tags
|
||||||
|
.replaceAll(/<[^>]+>/gm, "")
|
||||||
|
// Remove leading spaces and repeated CR/LF
|
||||||
|
.replaceAll(/([\n\r]+ +)+/gm, "")
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
export function getOnlyDate(date: Date) {
|
||||||
|
const year = date.getFullYear();
|
||||||
|
const month = String(date.getMonth() + 1).padStart(2, "0");
|
||||||
|
const day = String(date.getDate()).padStart(2, "0");
|
||||||
|
|
||||||
|
return `${year}-${month}-${day}`;
|
||||||
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue