Add "quick apply" button at skinlib.show page

resources/assets/src/components/skinlib/Show.vue

@@ -15,6 +15,13 @@
                         v-t="'skinlib.addToCloset'"
                     ></button>
                     <template v-else>
+                        <a
+                            v-if="liked"
+                            :href="`${baseUrl}/user/closet?tid=${tid}`"
+                            class="btn btn-success pull-right"
+                            style="margin-left: 12px"
+                            v-t="'skinlib.apply'"
+                        ></a>
                         <a
                             v-if="liked"
                             @click="removeFromCloset"

resources/assets/src/components/user/Closet.vue

@@ -194,7 +194,7 @@ import toastr from 'toastr';
 import Paginate from 'vuejs-paginate';
 import ClosetItem from './ClosetItem';
 import EmailVerification from './EmailVerification';
-import { debounce } from '../../js/utils';
+import { debounce, queryString } from '../../js/utils';
 import { swal } from '../../js/notify';
 
 export default {
@@ -229,6 +229,14 @@ export default {
     beforeMount() {
         this.loadCloset();
     },
+    mounted() {
+        const tid = +queryString('tid', 0);
+        if (tid) {
+            this.selectTexture(tid);
+            this.applyTexture();
+            $('#modal-use-as').modal();
+        }
+    },
     methods: {
         search() {},
         async loadCloset(page = 1) {
@@ -261,7 +269,7 @@ export default {
             return `${blessing.base_url}/avatar/35/${tid}`;
         },
         async selectTexture(tid) {
-            const { type, hash } = await this.$http.post(`/skinlib/info/${tid}`);
+            const { type, hash } = await this.$http.get(`/skinlib/info/${tid}`);
             if (type === 'cape') {
                 this.capeUrl = `/textures/${hash}`;
                 this.selectedCape = tid;

resources/assets/tests/components/user/Closet.test.js

@@ -157,8 +157,8 @@ test('compute avatar URL', () => {
 });
 
 test('select texture', async () => {
-    Vue.prototype.$http.get.mockResolvedValue({});
-    Vue.prototype.$http.post
+    Vue.prototype.$http.get
+        .mockResolvedValueOnce({})
         .mockResolvedValueOnce({ type: 'steve', hash: 'a' })
         .mockResolvedValueOnce({ type: 'cape', hash: 'b' });
 
@@ -166,13 +166,13 @@ test('select texture', async () => {
     wrapper.setData({ skinItems: [{ tid: 1 }] });
     wrapper.find(ClosetItem).vm.$emit('select');
     await wrapper.vm.$nextTick();
-    expect(Vue.prototype.$http.post).toBeCalledWith('/skinlib/info/1');
+    expect(Vue.prototype.$http.get).toBeCalledWith('/skinlib/info/1');
     expect(wrapper.vm.skinUrl).toBe('/textures/a');
 
     wrapper.setData({ skinItems: [], capeItems: [{ tid: 2 }], category: 'cape' });
     wrapper.find(ClosetItem).vm.$emit('select');
     await wrapper.vm.$nextTick();
-    expect(Vue.prototype.$http.post).toBeCalledWith('/skinlib/info/2');
+    expect(Vue.prototype.$http.get).toBeCalledWith('/skinlib/info/2');
     expect(wrapper.vm.capeUrl).toBe('/textures/b');
 });
 
@@ -271,3 +271,31 @@ test('reset selected texture', () => {
         capeUrl: ''
     }));
 });
+
+test('select specified texture initially', async () => {
+    window.history.pushState({}, 'title', 'about:blank?tid=1');
+    window.$ = jest.fn(() => ({
+        modal() {},
+        iCheck: () => ({
+            on(evt, cb) {
+                cb();
+            },
+        }),
+        0: {
+            dispatchEvent: () => {}
+        }
+    }));
+    Vue.prototype.$http.get
+        .mockResolvedValueOnce({
+            items: [],
+            category: 'skin',
+            total_pages: 1
+        })
+        .mockResolvedValueOnce({ type: 'cape', hash: '' })
+        .mockResolvedValueOnce([]);
+    const wrapper = mount(Closet);
+    jest.runAllTimers();
+    await wrapper.vm.$nextTick();
+    jest.unmock('@/js/utils');
+    window.history.pushState({}, 'title', 'about:blank');
+});

resources/lang/en/front-end.yml

@@ -49,6 +49,7 @@ skinlib:
   emptyNewTextureName: Empty new texture name.
   anyModels: Any Models
   seeMyUpload: Check My Upload
+  apply: Quick Apply
   filter:
     skin: (Any Model)
     steve: (Steve)

resources/lang/zh_CN/front-end.yml

@@ -49,6 +49,7 @@ skinlib:
   private: 私密
   anyModels: 任意模型
   seeMyUpload: 查看我上传的
+  apply: 立即使用
   filter:
     skin: （任意模型）
     steve: （Steve）