@stacksjs/defaults 0.70.207 → 0.70.208

package/views/dashboard/commerce/categories/index.stx

@@ -0,0 +1,406 @@
+@extends('layouts/default')
+
+@section('content')
+@title('Dashboard - Commerce Categories')
+<div class="p-6 space-y-6">
+
+  <PageHeader title="Categories" description="Manage your product categories">
+    <template #actions>
+      <Button variant="primary" @click="openAddModal()">
+        <div class="h-4 w-4 i-hugeicons-plus-sign"></div>
+        Add Category
+      </Button>
+    </template>
+  </PageHeader>
+
+  <!-- Filters -->
+  <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between mt-6">
+    <div class="relative max-w-sm">
+      <div class="flex absolute inset-y-0 left-0 items-center pl-3 pointer-events-none">
+        <div class="h-5 w-5 text-gray-400 i-hugeicons-search-01"></div>
+      </div>
+      <input
+        x-model="searchQuery"
+        @input="resetPage()"
+        type="text"
+        class="block pl-10 pr-3 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:placeholder:text-neutral-500 dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset"
+        placeholder="Search categories..."
+      />
+    </div>
+
+    <div class="flex flex-col gap-4 sm:flex-row">
+      <select
+        x-model="featuredFilter"
+        class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset"
+      >
+        <option value="all">All Categories</option>
+        <option value="featured">Active Only</option>
+        <option value="not-featured">Inactive Only</option>
+      </select>
+
+      <select
+        x-model.number="itemsPerPage"
+        class="block pl-3 pr-10 py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white dark:bg-neutral-800 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-700 focus:ring-2 focus:ring-blue-600 focus:ring-inset"
+      >
+        <option value="5">5 per page</option>
+        <option value="10">10 per page</option>
+        <option value="25">25 per page</option>
+        <option value="50">50 per page</option>
+      </select>
+    </div>
+  </div>
+
+  <!-- Categories table -->
+  <div class="flow-root mt-6">
+    <div class="overflow-x-auto -mx-4 -my-2 sm:-mx-6 lg:-mx-8">
+      <div class="inline-block py-2 sm:px-6 lg:px-8 min-w-full align-middle">
+        <div class="overflow-hidden ring-1 ring-black ring-opacity-5 sm:rounded-lg shadow">
+          <CategoriesTable
+            :categories="paginatedCategories"
+            :searchQuery="searchQuery"
+            :featuredFilter="featuredFilter"
+            :sortBy="sortBy"
+            :sortOrder="sortOrder"
+            :currentPage="currentPage"
+            :itemsPerPage="itemsPerPage"
+            @toggle-sort="toggleSort"
+            @view-category="viewCategory"
+            @edit-category="editCategory"
+            @delete-category="handleDeleteCategory"
+          />
+        </div>
+      </div>
+    </div>
+  </div>
+
+  <div class="px-4 py-3 bg-gray-50 dark:bg-neutral-900 border-gray-200 border-t dark:border-neutral-700">
+    <Pagination
+      :currentPage="currentPage"
+      :totalItems="totalItems"
+      :itemsPerPage="itemsPerPage"
+      @prev="handlePrevPage"
+      @next="handleNextPage"
+      @page="handlePageChange"
+    />
+  </div>
+
+  <!-- Add / Edit Category Modal — kept mounted so form state survives toggles. -->
+  <div :show="showAddModal" class="fixed inset-0 overflow-y-auto z-10">
+    <div class="flex items-end justify-center sm:items-center p-4 sm:p-0 min-h-full text-center">
+      <div class="fixed inset-0 bg-gray-500 bg-opacity-75 transition-opacity" @click="closeAddModal()"></div>
+
+      <div class="overflow-hidden relative pb-4 pt-5 px-4 sm:my-8 sm:p-6 sm:max-w-lg sm:w-full text-left bg-white dark:bg-neutral-800 rounded-lg shadow-xl transition-all transform">
+        <div>
+          <div class="mt-3 sm:mt-5 text-center">
+            <h3 class="font-semibold leading-6 text-base text-gray-900 dark:text-white">{{ isEditing() ? 'Edit Category' : 'Add New Category' }}</h3>
+            <div class="mt-4">
+              <div class="space-y-4">
+                <div>
+                  <label for="category-name" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Name</label>
+                  <div class="mt-2">
+                    <input
+                      type="text"
+                      id="category-name"
+                      x-model="newCategoryName"
+                      class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm"
+                    />
+                  </div>
+                </div>
+                <div>
+                  <label for="category-description" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Description</label>
+                  <div class="mt-2">
+                    <textarea
+                      id="category-description"
+                      x-model="newCategoryDescription"
+                      rows="3"
+                      class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm"
+                    ></textarea>
+                  </div>
+                </div>
+                <div>
+                  <label for="category-image" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Image</label>
+                  <div class="mt-2">
+                    <div class="flex gap-3 items-center">
+                      <input
+                        type="text"
+                        id="category-image"
+                        x-model="newCategoryImageUrl"
+                        placeholder="/images/categories/your-category.jpg"
+                        class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm"
+                      />
+                      <span class="text-gray-500 dark:text-neutral-400">or</span>
+                      <label for="file-upload" class="px-2.5 py-1.5 font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm cursor-pointer">
+                        Browse
+                        <input
+                          id="file-upload"
+                          type="file"
+                          accept="image/*"
+                          class="sr-only"
+                          @change="handleImageUpload"
+                        />
+                      </label>
+                    </div>
+                  </div>
+                  <div class="flex justify-center mt-2">
+                    <img
+                      :show="newCategoryImageUrl()"
+                      :src="imagePreview()"
+                      alt="Category preview"
+                      class="object-cover h-16 w-16 border border-gray-200 rounded-full dark:border-neutral-700 shadow-sm"
+                      onerror="this.src='/images/categories/placeholder.jpg'"
+                    />
+                    <div
+                      :show="!newCategoryImageUrl()"
+                      class="flex items-center justify-center h-16 w-16 font-medium text-white bg-blue-500 rounded-full shadow-sm"
+                    >
+                      {{ newCategoryName() ? newCategoryName().charAt(0).toUpperCase() : '?' }}
+                    </div>
+                  </div>
+                  <p class="mt-1 text-gray-500 text-left text-xs dark:text-neutral-400">Enter the URL of the category image or upload a file</p>
+                </div>
+                <div>
+                  <label for="category-display-order" class="block font-medium leading-6 text-gray-900 text-left text-sm dark:text-neutral-200">Display Order</label>
+                  <div class="mt-2">
+                    <input
+                      type="number"
+                      id="category-display-order"
+                      x-model.number="newCategoryDisplayOrder"
+                      min="0"
+                      class="block py-1.5 w-full text-gray-900 sm:leading-6 sm:text-sm dark:text-white placeholder:text-gray-400 dark:bg-neutral-700 border-0 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 focus:ring-2 focus:ring-blue-600 focus:ring-inset shadow-sm"
+                      placeholder="0"
+                    />
+                  </div>
+                </div>
+                <div class="flex items-center">
+                  <input
+                    id="category-featured"
+                    type="checkbox"
+                    x-model="newCategoryIsActive"
+                    class="h-4 w-4 text-blue-600 dark:bg-neutral-700 border-gray-300 rounded dark:border-neutral-600 focus:ring-blue-600"
+                  />
+                  <label for="category-featured" class="block ml-2 text-gray-900 text-sm dark:text-neutral-200">Active category</label>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+        <div class="sm:grid sm:gap-3 sm:grid-cols-2 sm:grid-flow-row-dense mt-5 sm:mt-6">
+          <button
+            type="button"
+            @click="addCategory()"
+            class="inline-flex justify-center sm:col-start-2 px-3 py-2 w-full font-semibold text-sm text-white bg-blue-600 hover:bg-blue-500 rounded-md focus-visible:outline focus-visible:outline-2 focus-visible:outline-blue-600 focus-visible:outline-offset-2 shadow-sm"
+          >
+            {{ isEditing() ? 'Save' : 'Add' }}
+          </button>
+          <button
+            type="button"
+            @click="closeAddModal()"
+            class="inline-flex justify-center sm:col-start-1 mt-3 px-3 py-2 sm:mt-0 w-full font-semibold text-gray-900 text-sm dark:text-white bg-white dark:bg-neutral-700 hover:bg-gray-50 dark:hover:bg-neutral-600 ring-1 ring-gray-300 ring-inset rounded-md dark:ring-neutral-600 shadow-sm"
+          >
+            Cancel
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+
+<script client>
+import { useCategories } from '../../../../functions/commerce/products/categories'
+import type { Categories } from '../../../../types/defaults'
+
+const { categories, fetchCategories, createCategory, deleteCategory: deleteCategoryFromAPI } = useCategories()
+
+const searchQuery = state('')
+const sortBy = state<'name' | 'display_order'>('name')
+const sortOrder = state<'asc' | 'desc'>('asc')
+const featuredFilter = state<'all' | 'featured' | 'not-featured'>('all')
+const currentPage = state(1)
+const itemsPerPage = state(10)
+
+// Modal state.
+const showAddModal = state(false)
+const isEditing = state(false)
+const editingCategoryId = state<number | null>(null)
+
+// Flat signals per form field — keeps each x-model binding 1:1.
+const newCategoryName = state('')
+const newCategoryDescription = state('')
+const newCategoryIsActive = state(true)
+const newCategoryImageUrl = state('')
+const newCategoryDisplayOrder = state(0)
+
+const filteredCategories = derived(() => {
+  const q = searchQuery().toLowerCase()
+  const filter = featuredFilter()
+  const by = sortBy()
+  const dir = sortOrder()
+
+  return (categories.value as Categories[])
+    .filter((c) => {
+      const matchesSearch
+        = c.name.toLowerCase().includes(q)
+          || (c.description || '').toLowerCase().includes(q)
+      const matchesFeatured
+        = filter === 'all'
+          || (filter === 'featured' && c.is_active)
+          || (filter === 'not-featured' && !c.is_active)
+      return matchesSearch && matchesFeatured
+    })
+    .sort((a, b) => {
+      let cmp = 0
+      if (by === 'name')
+        cmp = a.name.localeCompare(b.name)
+      else if (by === 'display_order')
+        cmp = (a.display_order || 0) - (b.display_order || 0)
+      return dir === 'asc' ? cmp : -cmp
+    })
+})
+
+const paginatedCategories = derived(() => {
+  const start = (currentPage() - 1) * itemsPerPage()
+  return filteredCategories().slice(start, start + itemsPerPage())
+})
+
+const totalItems = derived(() => filteredCategories().length)
+
+function imagePreview(): string {
+  return newCategoryImageUrl() || '/images/categories/placeholder.jpg'
+}
+
+function resetPage(): void {
+  currentPage.set(1)
+}
+
+function handlePrevPage(): void {
+  if (currentPage() > 1)
+    currentPage.update(p => p - 1)
+}
+
+function handleNextPage(): void {
+  const totalPages = Math.ceil(totalItems() / itemsPerPage())
+  if (currentPage() < totalPages)
+    currentPage.update(p => p + 1)
+}
+
+function handlePageChange(page: number): void {
+  currentPage.set(page)
+}
+
+function toggleSort(column: 'name' | 'display_order'): void {
+  if (sortBy() === column) {
+    sortOrder.update(d => d === 'asc' ? 'desc' : 'asc')
+  }
+  else {
+    sortBy.set(column)
+    sortOrder.set('asc')
+  }
+}
+
+function resetForm(): void {
+  newCategoryName.set('')
+  newCategoryDescription.set('')
+  newCategoryIsActive.set(true)
+  newCategoryImageUrl.set('')
+  newCategoryDisplayOrder.set(0)
+}
+
+function openAddModal(): void {
+  isEditing.set(false)
+  editingCategoryId.set(null)
+  resetForm()
+  showAddModal.set(true)
+}
+
+function closeAddModal(): void {
+  showAddModal.set(false)
+  isEditing.set(false)
+  editingCategoryId.set(null)
+}
+
+// Naive client-side image upload — same shape as the original. In a
+// real app, POST to the server and store the returned URL.
+function handleImageUpload(event: Event): void {
+  const input = event.target as HTMLInputElement
+  const file = input.files?.[0]
+  if (!file)
+    return
+  const reader = new FileReader()
+  reader.onload = (e) => {
+    if (e.target && typeof e.target.result === 'string')
+      newCategoryImageUrl.set(e.target.result)
+  }
+  reader.readAsDataURL(file)
+}
+
+async function addCategory(): Promise<void> {
+  const list = categories.value as Categories[]
+  const id = list.length > 0 ? Math.max(...list.map(c => c.id || 0)) + 1 : 1
+
+  const optimistic = {
+    id,
+    name: newCategoryName(),
+    description: newCategoryDescription(),
+    image_url: newCategoryImageUrl(),
+    is_active: newCategoryIsActive(),
+    display_order: newCategoryDisplayOrder(),
+    uuid: `category-${id}`,
+  }
+  categories.value = [...list, optimistic as unknown as Categories]
+
+  try {
+    await createCategory({
+      name: optimistic.name,
+      description: optimistic.description,
+      image_url: optimistic.image_url,
+      is_active: optimistic.is_active,
+      display_order: optimistic.display_order,
+    } as unknown as Categories)
+    closeAddModal()
+  }
+  catch (error) {
+    categories.value = (categories.value as Categories[]).filter(c => c.id !== id)
+    // eslint-disable-next-line no-console
+    console.error('Failed to create category:', error)
+  }
+}
+
+function viewCategory(category: Categories): void {
+  navigate(`/dashboard/commerce/categories/${category.id}`)
+}
+
+function editCategory(category: Categories): void {
+  isEditing.set(true)
+  editingCategoryId.set(category.id ?? null)
+  newCategoryName.set(category.name)
+  newCategoryDescription.set(category.description || '')
+  newCategoryIsActive.set(category.is_active ?? true)
+  newCategoryImageUrl.set(category.image_url || '')
+  newCategoryDisplayOrder.set(category.display_order ?? 0)
+  showAddModal.set(true)
+}
+
+async function handleDeleteCategory(category: Categories): Promise<void> {
+  // eslint-disable-next-line no-alert
+  if (!confirm(`Are you sure you want to delete the category "${category.name}"?`))
+    return
+
+  const original = [...(categories.value as Categories[])]
+  categories.value = original.filter(c => c.id !== category.id)
+
+  try {
+    await deleteCategoryFromAPI(category.id as number)
+  }
+  catch (error) {
+    categories.value = original
+    // eslint-disable-next-line no-console
+    console.error('Failed to delete category:', error)
+  }
+}
+
+onMount(async () => {
+  await fetchCategories()
+})
+</script>
+
+@endsection