bit fix

1 year ago · 177edeb8bd
parent 0315d4c727
commit 177edeb8bd
5 changed files with 32 additions and 17 deletions
--- a/resources/css/spinner.css
+++ b/resources/css/spinner.css
@ -1,5 +1,11 @@
 #nprogress {
-    pointer-events: none;
+    pointer-events: auto !important;
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 100 !important;
 }

 #nprogress .bar {
@ -32,7 +38,7 @@
 #nprogress .spinner {
    display: flex !important;
    position: fixed;
-    z-index: 1031;
+    z-index: 1031 !important;
    top: 0px !important;
    right: 0px !important;
    width: 100% !important;
@ -48,6 +54,7 @@
    width: 140px !important;
    height: 60px !important;
    padding: 0.5rem;
+    z-index: 1031 !important;
    background-color: white;
    display: flex;
    flex-direction: row;
--- a/resources/js/Customer/Index/Index.jsx
+++ b/resources/js/Customer/Index/Index.jsx
@ -60,6 +60,9 @@ export default function Index(props) {

    return (
        <CustomerLayout>
+            {/* for test */}
+            {/* <div id="nprogress"></div> */}
+
            <Head title="Home" />
            <div className="flex flex-col min-h-[calc(95dvh)]">
                {/* guest or user banner */}
--- a/resources/js/Customer/Index/IndexPartials/AllVoucher.jsx
+++ b/resources/js/Customer/Index/IndexPartials/AllVoucher.jsx
@ -109,7 +109,7 @@ export default function AllVoucher() {
            <div className="w-full flex flex-row overflow-y-scroll space-x-2 px-4 mt-2">
                {sLocations.map((location, index) => (
                    <div
-                        className="flex flex-row items-center gap-1 px-2 py-1 rounded-2xl bg-blue-100 border border-blue-200"
+                        className="flex flex-row items-center gap-1 px-2 py-1 rounded-2xl bg-blue-100 border border-blue-200 hover:bg-blue-500"
                        key={location.id}
                        onClick={() => handleRemoveLocation(index)}
                    >
--- a/resources/js/Customer/Index/IndexPartials/FavoriteVoucher.jsx
+++ b/resources/js/Customer/Index/IndexPartials/FavoriteVoucher.jsx
@ -1,5 +1,5 @@
 import React, { useEffect, useState } from 'react'
-import { router, usePage } from '@inertiajs/react'
+import { router, usePage, useForm } from '@inertiajs/react'
 import { HiOutlineStar } from 'react-icons/hi2'

 import VoucherCard from '../Partials/VoucherCard'
@ -33,20 +33,20 @@ export default function FavoriteVoucher() {
            _flocations,
        },
    } = usePage()
+    const { post, processing } = useForm({})

    const nextPageUrl = next_page_url === undefined ? null : next_page_url
    const [items, setItems] = useState(data === undefined ? [] : data)

    const handleRemoveLocation = (location) => {
-        router.post(
-            route('customer.location.favorite', location),
-            {},
-            {
-                onSuccess: () => {
-                    router.visit(route(route().current()))
-                },
-            }
-        )
+        if (processing) {
+            return
+        }
+        post(route('customer.location.favorite', location), {
+            onSuccess: () => {
+                router.visit(route(route().current()))
+            },
+        })
    }

    const handleNextPage = () => {
@ -75,7 +75,7 @@ export default function FavoriteVoucher() {
            <div className="w-full flex flex-row overflow-y-scroll space-x-2 px-4 mt-2">
                {_flocations.map((location) => (
                    <div
-                        className="flex flex-row items-center gap-1 px-2 py-1 rounded-2xl bg-blue-100 border border-blue-200"
+                        className="flex flex-row items-center gap-1 px-2 py-1 rounded-2xl bg-blue-100 border border-blue-200 hover:bg-blue-500"
                        key={location.id}
                        onClick={() => handleRemoveLocation(location)}
                    >
--- a/resources/js/Customer/Index/Partials/LocationModal.jsx
+++ b/resources/js/Customer/Index/Partials/LocationModal.jsx
@ -1,5 +1,5 @@
 import { useEffect, useState } from 'react'
-import { router, usePage } from '@inertiajs/react'
+import { router, useForm, usePage } from '@inertiajs/react'
 import { HiArrowLeft, HiOutlineStar } from 'react-icons/hi2'

 import { useAutoFocus } from '@/hooks'
@ -15,6 +15,8 @@ export default function LocationModal(props) {
    } = usePage()
    const { state, locations, onItemSelected } = props

+    const { post, processing } = useForm({})
+
    const [search, setSearch] = useState('')
    const locationFocus = useAutoFocus()
    const [filter_locations, setFilterLocations] = useState(locations)
@ -40,7 +42,10 @@ export default function LocationModal(props) {
    }

    const handleFavorite = (location) => {
-        router.post(route('customer.location.favorite', location))
+        if (processing) {
+            return
+        }
+        post(route('customer.location.favorite', location))
    }

    useEffect(() => {
@ -67,7 +72,7 @@ export default function LocationModal(props) {
            <div className="flex flex-col overflow-y-auto max-h-[80vh] bg-white">
                {filter_locations.map((location) => (
                    <div
-                        className="flex flex-row justify-between items-center"
+                        className="flex flex-row justify-between items-center hover:bg-gray-200"
                        key={location.id}
                    >
                        <div