Fix that state of skin library page can't be saved

resources/assets/src/views/skinlib/List.vue

@@ -23,7 +23,7 @@
         <div class="box box-default">
           <div class="box-header">
             <div class="form-group row">
-              <form class="col-md-6" @submit.prevent="fetchData">
+              <form class="col-md-6" @submit.prevent="submitSearch">
                 <el-input
                   v-model="keyword"
                   :placeholder="$t('vendor.datatable.search')"
@@ -38,7 +38,7 @@
                     </el-select>
                   </template>
                   <template #append>
-                    <el-button data-test="btn-search" @click="fetchData">
+                    <el-button data-test="btn-search" @click="submitSearch">
                       {{ $t('general.submit') }}
                     </el-button>
                   </template>
@@ -118,7 +118,7 @@ import Paginate from 'vuejs-paginate'
 import {
   ButtonGroup, Select, Option,
 } from 'element-ui'
-import { queryString } from '../../scripts/utils'
+import { queryString, queryStringify } from '../../scripts/utils'
 import SkinLibItem from '../../components/SkinLibItem.vue'
 
 Vue.use(ButtonGroup)
@@ -137,7 +137,7 @@ export default {
       uploader: +queryString('uploader', 0),
       sort: queryString('sort', 'time'),
       keyword: queryString('keyword', ''),
-      page: 1,
+      page: +queryString('page', 1),
       items: [],
       totalPages: 0,
       currentUid: 0,
@@ -160,12 +160,15 @@ export default {
   watch: {
     filter() {
       this.fetchData()
+      this.updateQueryString()
     },
     uploader() {
       this.fetchData()
+      this.updateQueryString()
     },
     sort() {
       this.fetchData()
+      this.updateQueryString()
     },
   },
   beforeMount() {
@@ -193,9 +196,24 @@ export default {
       this.currentUid = currentUid
       this.pending = false
     },
+    updateQueryString() {
+      const qs = queryStringify({
+        filter: this.filter,
+        uploader: this.uploader,
+        sort: this.sort,
+        keyword: this.keyword,
+        page: this.page,
+      })
+      window.history.pushState(null, '', `skinlib?${qs}`)
+    },
+    submitSearch() {
+      this.fetchData()
+      this.updateQueryString()
+    },
     pageChanged(page) {
       this.page = page
       this.fetchData()
+      this.updateQueryString()
     },
     reset() {
       this.filter = 'skin'

resources/assets/tests/views/skinlib/List.test.ts

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import { mount } from '@vue/test-utils'
 // @ts-ignore
 import Button from 'element-ui/lib/button'
+import { queryString } from '@/scripts/utils'
 import List from '@/views/skinlib/List.vue'
 
 jest.mock('element-ui', () => ({
@@ -55,6 +56,10 @@ jest.mock('element-ui', () => ({
   },
 }))
 
+beforeEach(() => {
+  window.history.pushState(null, '', 'skinlib')
+})
+
 test('fetch data before mounting', () => {
   Vue.prototype.$http.get.mockResolvedValue({
     data: {
@@ -100,6 +105,7 @@ test('toggle texture type', () => {
       filter: 'steve', uploader: 0, sort: 'time', keyword: '', page: 1,
     }
   )
+  expect(queryString('filter')).toBe('steve')
   select.setValue('alex')
   select.trigger('change')
   expect(breadcrumb.text()).toContain('skinlib.filter.alex')
@@ -109,6 +115,7 @@ test('toggle texture type', () => {
       filter: 'alex', uploader: 0, sort: 'time', keyword: '', page: 1,
     }
   )
+  expect(queryString('filter')).toBe('alex')
   select.setValue('cape')
   select.trigger('change')
   expect(breadcrumb.text()).toContain('general.cape')
@@ -118,6 +125,7 @@ test('toggle texture type', () => {
       filter: 'cape', uploader: 0, sort: 'time', keyword: '', page: 1,
     }
   )
+  expect(queryString('filter')).toBe('cape')
 })
 
 test('check specified uploader', async () => {
@@ -143,6 +151,7 @@ test('check specified uploader', async () => {
       filter: 'skin', uploader: 1, sort: 'time', keyword: '', page: 1,
     }
   )
+  expect(queryString('uploader')).toBe('1')
 })
 
 test('sort items', () => {
@@ -164,6 +173,7 @@ test('sort items', () => {
     }
   )
   expect(wrapper.text()).toContain('skinlib.sort.likes')
+  expect(queryString('sort')).toBe('likes')
 
   sortByTime.trigger('click')
   expect(Vue.prototype.$http.get).toBeCalledWith(
@@ -173,6 +183,7 @@ test('sort items', () => {
     }
   )
   expect(wrapper.text()).toContain('skinlib.sort.time')
+  expect(queryString('sort')).toBe('time')
 })
 
 test('search by keyword', () => {
@@ -191,6 +202,7 @@ test('search by keyword', () => {
       filter: 'skin', uploader: 0, sort: 'time', keyword: 'a', page: 1,
     }
   )
+  expect(queryString('keyword')).toBe('a')
 
   wrapper.setData({ keyword: 'b' })
   wrapper.find('[data-test="btn-search"]').trigger('click')
@@ -200,6 +212,7 @@ test('search by keyword', () => {
       filter: 'skin', uploader: 0, sort: 'time', keyword: 'b', page: 1,
     }
   )
+  expect(queryString('keyword')).toBe('b')
 })
 
 test('reset all filters', () => {
@@ -244,6 +257,7 @@ test('on page changed', () => {
       filter: 'skin', uploader: 0, sort: 'time', keyword: '', page: 2,
     }
   )
+  expect(queryString('page')).toBe('2')
 })
 
 test('on like toggled', async () => {

resources/misc/changelogs/en/4.2.0.md

@@ -14,3 +14,4 @@
 - Fixed that dashboard of user center cannot be centered. (Thanks @outtimes)
 - Fixed data consistency when deleting texture.
 - Fixed that model can't walk after resetting model in skin previewer.
+- Fixed that state of skin library page can't be saved.

resources/misc/changelogs/zh_CN/4.2.0.md

@@ -14,3 +14,4 @@
 - 修复用户中心仪表盘不能居中的问题（感谢 @outtimes）
 - 修复删除材质时的数据一致性
 - 修复皮肤预览中重置预览后不能使模型行走的问题
+- 修复不能保存皮肤库页面状态的问题