Browse Source

add status filter tabs to My Places page

Added filter tabs (all, published, pending_moderation, revision, rejected)
with client-side filtering and count badges.
neyrogovnarik 1 month ago
parent
commit
866c0b5407
1 changed files with 45 additions and 11 deletions
  1. 45 11
      frontend/src/app/places/my/page.tsx

+ 45 - 11
frontend/src/app/places/my/page.tsx

@@ -248,10 +248,19 @@ function PlaceEditModal({ placeId, onClose, onSaved }: { placeId: string; onClos
   )
 }
 
+const FILTERS: { key: string; label: string }[] = [
+  { key: 'all', label: 'Все' },
+  { key: 'published', label: 'Опубликовано' },
+  { key: 'pending_moderation', label: 'На модерации' },
+  { key: 'revision', label: 'На доработке' },
+  { key: 'rejected', label: 'Отклонено' },
+]
+
 export default function MyPlacesPage() {
   const [places, setPlaces] = useState<Place[]>([])
   const [loading, setLoading] = useState(true)
   const [editId, setEditId] = useState<string | null>(null)
+  const [filter, setFilter] = useState('all')
 
   const fetchPlaces = () => {
     setLoading(true)
@@ -268,16 +277,40 @@ export default function MyPlacesPage() {
       <div className="mx-auto max-w-3xl px-4">
         <h1 className="mb-6 text-2xl font-bold text-white">Мои места</h1>
 
-        {loading ? (
-          <p className="text-white/40">Загрузка...</p>
-        ) : places.length === 0 ? (
-          <div className="rounded-xl bg-white/5 p-8 text-center">
-            <p className="text-white/60">У вас пока нет добавленных мест</p>
-            <a href="/" className="mt-4 inline-block rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-500 transition">На карту</a>
-          </div>
-        ) : (
-          <div className="space-y-4">
-            {places.map((place) => {
+        <div className="mb-6 flex flex-wrap gap-2">
+          {FILTERS.map((f) => {
+            const count = f.key === 'all' ? places.length : places.filter((p) => p.status === f.key).length
+            return (
+              <button key={f.key} onClick={() => setFilter(f.key)}
+                className={`rounded-lg px-4 py-2 text-sm transition ${
+                  filter === f.key ? 'bg-green-600 text-white' : 'bg-white/10 text-white/60 hover:bg-white/20'
+                }`}
+              >{f.label} <span className="opacity-60">({count})</span></button>
+            )
+          })}
+        </div>
+
+        {(() => {
+          const filtered = filter === 'all' ? places : places.filter((p) => p.status === filter)
+
+          if (loading) {
+            return <p className="text-white/40">Загрузка...</p>
+          }
+
+          if (filtered.length === 0) {
+            return (
+              <div className="rounded-xl bg-white/5 p-8 text-center">
+                <p className="text-white/60">
+                  {filter === 'all' ? 'У вас пока нет добавленных мест' : 'Нет мест с таким статусом'}
+                </p>
+                <a href="/" className="mt-4 inline-block rounded-lg bg-green-600 px-6 py-2 text-white hover:bg-green-500 transition">На карту</a>
+              </div>
+            )
+          }
+
+          return (
+            <div className="space-y-4">
+              {filtered.map((place) => {
               const st = STATUS_LABELS[place.status] || { label: place.status, color: 'text-white/40' }
               return (
                 <div key={place.id} className="rounded-xl bg-white/5 p-4 text-white">
@@ -299,7 +332,8 @@ export default function MyPlacesPage() {
               )
             })}
           </div>
-        )}
+          )
+        })()}
       </div>
 
       {editId && (