From 3496025d97140268dc2e899adca994b5b9f343c0 Mon Sep 17 00:00:00 2001 From: Rafi Zadanly Date: Tue, 31 Jan 2023 14:32:38 +0700 Subject: quotation and categories --- src/components/layouts/AppBar.js | 2 +- src/components/layouts/Header.js | 89 +++++++++++++++++++++- .../transactions/TransactionStatusBadge.js | 41 ++++++++++ 3 files changed, 128 insertions(+), 4 deletions(-) create mode 100644 src/components/transactions/TransactionStatusBadge.js (limited to 'src/components') diff --git a/src/components/layouts/AppBar.js b/src/components/layouts/AppBar.js index b4c7703c..c3d38707 100644 --- a/src/components/layouts/AppBar.js +++ b/src/components/layouts/AppBar.js @@ -43,7 +43,7 @@ const AppBar = ({ title }) => { {/* --- Start Icons */}
- + diff --git a/src/components/layouts/Header.js b/src/components/layouts/Header.js index 4741905f..bc740810 100644 --- a/src/components/layouts/Header.js +++ b/src/components/layouts/Header.js @@ -1,5 +1,5 @@ import Image from "next/image"; -import { useCallback, useEffect, useRef, useState } from "react"; +import { Fragment, useCallback, useEffect, useRef, useState } from "react"; import Head from "next/head"; import { useRouter } from "next/router"; import axios from "axios"; @@ -9,7 +9,9 @@ import { ShoppingCartIcon, ChevronRightIcon, Cog6ToothIcon, - HeartIcon + HeartIcon, + ChevronDownIcon, + ChevronUpIcon } from "@heroicons/react/24/outline"; // Helpers @@ -19,11 +21,11 @@ import Link from "../elements/Link"; // Images import Logo from "@/images/logo.png"; import greeting from "@/core/utils/greeting"; +import apiOdoo from "@/core/utils/apiOdoo"; const menus = [ { name: 'Semua Brand', href: '/shop/brands' }, { name: 'Blog Indoteknik', href: '/' }, - { name: 'Kategori', href: '/' }, ]; export default function Header({ title }) { @@ -71,6 +73,47 @@ export default function Header({ title }) { } } + const [ isOpenCategory, setOpenCategory ] = useState(false); + const [ categories, setCategories ] = useState([]); + + useEffect(() => { + const loadCategories = async () => { + if (isOpenCategory && categories.length == 0) { + let dataCategories = await apiOdoo('GET', '/api/v1/category/tree'); + dataCategories = dataCategories.map((category) => { + category.childs = category.childs.map((child1Category) => { + return { + ...child1Category, + isOpen: false + } + }) + return { + ...category, + isOpen: false + } + }); + setCategories(dataCategories); + } + } + loadCategories(); + }, [ isOpenCategory, categories ]); + + const toggleCategories = (id = 0) => { + let newCategories = categories.map((category) => { + category.childs = category.childs.map((child1Category) => { + return { + ...child1Category, + isOpen: id == child1Category.id ? !child1Category.isOpen : child1Category.isOpen + } + }) + return { + ...category, + isOpen: id == category.id ? !category.isOpen : category.isOpen + } + }); + setCategories(newCategories); + } + return ( <> @@ -108,6 +151,46 @@ export default function Header({ title }) {
)) } +
setOpenCategory(!isOpenCategory)}> + Kategori +
+ { !isOpenCategory && } + { isOpenCategory && } +
+
+ { isOpenCategory && categories.map((category) => ( + +
+ + { category.name } + +
toggleCategories(category.id)}> + { !category.isOpen && } + { category.isOpen && } +
+
+ { category.isOpen && category.childs.map((child1Category) => ( + +
+ + { child1Category.name } + + { child1Category.childs.length > 0 && ( +
toggleCategories(child1Category.id)}> + { !child1Category.isOpen && } + { child1Category.isOpen && } +
+ ) } +
+ { child1Category.isOpen && child1Category.childs.map((child2Category) => ( + + { child2Category.name } + + )) } + + )) } + + )) } diff --git a/src/components/transactions/TransactionStatusBadge.js b/src/components/transactions/TransactionStatusBadge.js new file mode 100644 index 00000000..588542fe --- /dev/null +++ b/src/components/transactions/TransactionStatusBadge.js @@ -0,0 +1,41 @@ +const TransactionStatusBadge = ({ status }) => { + let badgeProps = { + className: ['h-fit'], + text: '' + }; + switch (status) { + case 'cancel': + badgeProps.className.push('badge-red'); + badgeProps.text = 'Batal' + break; + case 'draft': + badgeProps.className.push('badge-gray'); + badgeProps.text = 'Pending Quotation' + break; + case 'waiting': + badgeProps.className.push('badge-yellow'); + badgeProps.text = 'Menunggu Konfirmasi' + break; + case 'sale': + badgeProps.className.push('badge-blue'); + badgeProps.text = 'Pesanan Diproses' + break; + case 'shipping': + badgeProps.className.push('badge-blue'); + badgeProps.text = 'Pesanan Dikirim' + break; + case 'done': + badgeProps.className.push('badge-green'); + badgeProps.text = 'Selesai' + break; + } + badgeProps.className = badgeProps.className.join(' '); + + return ( +
+ { badgeProps.text } +
+ ) +}; + +export default TransactionStatusBadge; \ No newline at end of file -- cgit v1.2.3