diff --git a/app/Http/Controllers/ClosetController.php b/app/Http/Controllers/ClosetController.php
index b95410ec..21716482 100644
--- a/app/Http/Controllers/ClosetController.php
+++ b/app/Http/Controllers/ClosetController.php
@@ -34,8 +34,11 @@ public function getClosetData(Request $request)
{
$category = $request->input('category', 'skin');
$page = abs($request->input('page', 1));
+ $per_page = (int) $request->input('perPage', 6);
$q = $request->input('q', null);
+ $per_page = $per_page > 0 ? $per_page : 6;
+
$items = collect();
if ($q) {
@@ -48,11 +51,11 @@ public function getClosetData(Request $request)
}
// pagination
- $total_pages = ceil($items->count() / 6);
+ $total_pages = ceil($items->count() / $per_page);
return response()->json([
'category' => $category,
- 'items' => $items->forPage($page, 6)->values(),
+ 'items' => $items->forPage($page, $per_page)->values(),
'total_pages' => $total_pages
]);
}
diff --git a/resources/assets/src/js/__tests__/user.test.js b/resources/assets/src/js/__tests__/user.test.js
index 789c764e..5eee068f 100644
--- a/resources/assets/src/js/__tests__/user.test.js
+++ b/resources/assets/src/js/__tests__/user.test.js
@@ -152,12 +152,24 @@ describe('tests for "closet" module', () => {
data: {
category: 'skin',
page: 1,
+ perPage: 0,
q: 'q'
}
});
expect($('#closet-paginator').attr('last-skin-page')).toBe('1');
});
+ it('calculate capacity of closet', () => {
+ document.body.innerHTML = `
+
+ `;
+
+ const getCapacityOfCloset = require(modulePath).getCapacityOfCloset;
+ expect(getCapacityOfCloset()).toBe(28);
+ });
+
it('rename item', async () => {
const fetch = jest.fn()
.mockReturnValue(Promise.resolve({ errno: 0, msg: 'success' }));
diff --git a/resources/assets/src/js/user/closet.js b/resources/assets/src/js/user/closet.js
index a17f9606..11772baa 100644
--- a/resources/assets/src/js/user/closet.js
+++ b/resources/assets/src/js/user/closet.js
@@ -142,6 +142,7 @@ function reloadCloset(category, page, search) {
data: {
category: category,
page: page,
+ perPage: getCapacityOfCloset(),
q: search
}
}).then(({ items, category, total_pages }) => {
@@ -157,6 +158,18 @@ function reloadCloset(category, page, search) {
}).catch(showAjaxError);
}
+/**
+ * Get the capacity of closet.
+ *
+ * @returns {number}
+ */
+function getCapacityOfCloset() {
+ return ~~(
+ $('#skin-category').width() /
+ ($('.item').width() + parseFloat($('.item').css('margin-right')))
+ ) * 2;
+}
+
function renameClosetItem(tid, oldName) {
let newTextureName = '';
@@ -243,6 +256,7 @@ if (typeof require !== 'undefined' && typeof module !== 'undefined') {
setAsAvatar,
renderCloset,
reloadCloset,
+ getCapacityOfCloset,
renameClosetItem,
removeFromCloset,
};
diff --git a/tests/ClosetControllerTest.php b/tests/ClosetControllerTest.php
index 522d2c9f..c47794ac 100644
--- a/tests/ClosetControllerTest.php
+++ b/tests/ClosetControllerTest.php
@@ -30,7 +30,7 @@ public function testIndex()
public function testGetClosetData()
{
- $textures = factory(Texture::class, 5)->create();
+ $textures = factory(Texture::class, 10)->create();
$closet = new Closet($this->user->uid);
$textures->each(function ($texture) use ($closet) {
$closet->add($texture->tid, $texture->name);
@@ -45,6 +45,17 @@ public function testGetClosetData()
'items' => [['tid', 'name', 'type', 'add_at']]
]);
+ // Responsive
+ $result = json_decode($this->call('get', '/user/closet-data?perPage=0')
+ ->getContent(), true);
+ $this->assertEquals(6, count($result['items']));
+ $result = json_decode($this->call('get', '/user/closet-data?perPage=8')
+ ->getContent(), true);
+ $this->assertEquals(8, count($result['items']));
+ $result = json_decode($this->call('get', '/user/closet-data?perPage=8&page=2')
+ ->getContent(), true);
+ $this->assertEquals(2, count($result['items']));
+
// Get capes
$cape = factory(Texture::class, 'cape')->create();
$closet->add($cape->tid, 'custom_name');