Close #232

Former-commit-id: ec2f7562e0830ebb98bc7b4d997d74f2e6d685a6 [formerly 281a652559131d195b76feefef5cf0303d312b1e] [formerly 11a192c2d6f5d9667c55fdcf3f028391f70f6793 [formerly d3d3cb3d4f]]
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') {
+      updateUser(user, 'partial').then(() => {
-        display = 'list'
+        this.updateUser({ viewMode: user.viewMode })
-      }
+      }).catch(this.$showError)
-
-      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'
     }
   }
 }

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')
     },

assets/src/store/mutations.js

@@ -45,8 +45,12 @@ const mutations = {
   resetSelected: (state) => {
     state.selected = []
   },
-  listingDisplay: (state, value) => {
+  updateUser: (state, value) => {
-    state.req.display = value
+    if (typeof value !== 'object') return
+
+    for (let field in value) {
+      state.user[field] = value[field]
+    }
   },
   updateRequest: (state, value) => {
     state.req = value

file.go

@@ -67,8 +67,6 @@ type Listing struct {
 	Sort string `json:"sort"`
 	// And which order.
 	Order string `json:"order"`
-	// Displays in mosaic or list.
-	Display string `json:"display"`
 }
 
 // GetInfo gets the file information and, in case of error, returns the

filemanager.go

@@ -297,6 +297,7 @@ var DefaultUser = User{
 	Locale:        "en",
 	Scope:         ".",
 	FileSystem:    fileutils.Dir("."),
+	ViewMode:      "mosaic",
 }
 
 // User contains the configuration for each user.
@@ -340,6 +341,9 @@ type User struct {
 
 	// Commands is the list of commands the user can execute.
 	Commands []string `json:"commands"`
+
+	// User view mode for files and folders.
+	ViewMode string `json:"viewMode"`
 }
 
 // Allowed checks if the user has permission to access a directory/file.

http/resource.go

@@ -130,8 +130,6 @@ func listingHandler(c *fm.Context, w http.ResponseWriter, r *http.Request) (int,
 	}
 
 	listing.ApplySort()
-	listing.Display = displayMode(w, r, cookieScope)
-
 	return renderJSON(w, f)
 }
 
@@ -301,32 +299,6 @@ func resourcePatchHandler(c *fm.Context, w http.ResponseWriter, r *http.Request)
 	return ErrorToHTTP(err, true), err
 }
 
-// displayMode obtains the display mode from the Cookie.
-func displayMode(w http.ResponseWriter, r *http.Request, scope string) string {
-	var displayMode string
-
-	// Checks the cookie.
-	if displayCookie, err := r.Cookie("display"); err == nil {
-		displayMode = displayCookie.Value
-	}
-
-	// If it's invalid, set it to mosaic, which is the default.
-	if displayMode == "" || (displayMode != "mosaic" && displayMode != "list") {
-		displayMode = "mosaic"
-	}
-
-	// Set the cookie.
-	http.SetCookie(w, &http.Cookie{
-		Name:   "display",
-		Value:  displayMode,
-		MaxAge: 31536000,
-		Path:   scope,
-		Secure: r.TLS != nil,
-	})
-
-	return displayMode
-}
-
 // handleSortOrder gets and stores for a Listing the 'sort' and 'order',
 // and reads 'limit' if given. The latter is 0 if not given. Sets cookies.
 func handleSortOrder(w http.ResponseWriter, r *http.Request, scope string) (sort string, order string, err error) {

http/users.go

@@ -272,8 +272,9 @@ func usersPutHandler(c *fm.Context, w http.ResponseWriter, r *http.Request) (int
 	if which == "partial" {
 		c.User.CSS = u.CSS
 		c.User.Locale = u.Locale
+		c.User.ViewMode = u.ViewMode
 
-		err = c.Store.Users.Update(c.User, "CSS", "Locale")
+		err = c.Store.Users.Update(c.User, "CSS", "Locale", "ViewMode")
 		if err != nil {
 			return http.StatusInternalServerError, err
 		}