Close #232

Former-commit-id: ec2f7562e0830ebb98bc7b4d997d74f2e6d685a6 [formerly 281a652559131d195b76feefef5cf0303d312b1e] [formerly 11a192c2d6f5d9667c55fdcf3f028391f70f6793 [formerly d3d3cb3d4f43761db209450673554814094d37cf]]
Former-commit-id: a55ef038e404c2e9b97a802bfbf562fac02a98cc [formerly 033ded413b4f7bd21b7ff60feced6b590203cc16]
Former-commit-id: 6fc7fedc5fc087790102a07c3db3060e82400411

assets/src/components/buttons/SwitchView.vue

@@ -1,32 +1,35 @@
 <template>
   <button @click="change" :aria-label="$t('buttons.switchView')" :title="$t('buttons.switchView')" class="action" id="switch-view-button">
-    <i class="material-icons">{{ icon() }}</i>
+    <i class="material-icons">{{ icon }}</i>
     <span>{{ $t('buttons.switchView') }}</span>
   </button>
 </template>
 
 <script>
+import { mapState, mapMutations } from 'vuex'
+import { updateUser } from '@/utils/api'
+
 export default {
   name: 'switch-button',
+  computed: {
+    ...mapState(['user']),
+    icon: function () {
+      if (this.user.viewMode === 'mosaic') return 'view_list'
+      return 'view_module'
+    }
+  },
   methods: {
+    ...mapMutations(['updateUser']),
     change: function (event) {
       // If we are on mobile we should close the dropdown.
       this.$store.commit('closeHovers')
 
-      let display = 'mosaic'
+      let user = {...this.user}
+      user.viewMode = (this.icon === 'view_list') ? 'list' : 'mosaic'
 
-      if (this.$store.state.req.display === 'mosaic') {
-        display = 'list'
-      }
-
-      this.$store.commit('listingDisplay', display)
-      let path = this.$store.state.baseURL
-      if (path === '') path = '/'
-      document.cookie = `display=${display}; max-age=31536000; path=${path}`
-    },
-    icon: function () {
-      if (this.$store.state.req.display === 'mosaic') return 'view_list'
-      return 'view_module'
+      updateUser(user, 'partial').then(() => {
+        this.updateUser({ viewMode: user.viewMode })
+      }).catch(this.$showError)
     }
   }
 }

assets/src/components/files/Listing.vue

@@ -7,7 +7,7 @@
     <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
   </div>
   <div v-else id="listing"
-    :class="req.display"
+    :class="user.viewMode"
     @dragenter="dragEnter"
     @dragend="dragEnd">
     <div>
@@ -98,7 +98,7 @@ export default {
   name: 'listing',
   components: { Item },
   computed: {
-    ...mapState(['req', 'selected']),
+    ...mapState(['req', 'selected', 'user']),
     nameSorted () {
       return (this.req.sort === 'name')
     },