Appearance

View Mode Cache Mixin ​

File Information ​

  • Path: mixins/view-mode-cache.js
  • Purpose: View mode preference caching and restoration

Overview ​

The View Mode Cache mixin provides functionality for caching and restoring view mode preferences (grid, list, mosaic) across page navigation. It stores user preferences in universal storage and restores them when returning to pages.

Key Features ​

  1. View Mode Caching

    • Stores view mode preference
    • Identifier-based caching
    • Universal storage integration

  2. View Mode Restoration

    • Restores cached view mode
    • Default mode fallback
    • Initialization helpers

  3. View Mode Management

    • Get cached mode
    • Set cached mode
    • Update and cache mode
    • Restore cached mode

Methods ​

getCachedViewMode(identifier) ​

Gets cached view mode:

  • Retrieves from universal storage
  • Returns cached mode or null
  • Supports identifier for context-specific caching

Parameters:

  • identifier (string|null): Optional identifier for context-specific cache

Returns: Cached view mode string or null

Cache Key Format:

  • Without identifier: referringViewMode
  • With identifier: referringViewMode_{identifier}

setCachedViewMode(mode, identifier) ​

Sets cached view mode:

  • Stores in universal storage
  • Supports identifier for context-specific storage
  • Handles errors gracefully

Parameters:

  • mode (string): View mode to cache ('grid', 'list', 'mosaic')
  • identifier (string|null): Optional identifier

getCachedViewModeWithDefault(defaultMode, identifier) ​

Gets cached view mode with default fallback:

  • Gets cached mode
  • Returns default if cache is null
  • Convenience method

Parameters:

  • defaultMode (string): Default mode if cache is empty
  • identifier (string|null): Optional identifier

Returns: View mode string

initializeViewModeFromCache(defaultMode, identifier) ​

Initializes view mode from cache:

  • Gets cached mode with default
  • Returns for initialization
  • Used in component data/computed

Parameters:

  • defaultMode (string): Default mode
  • identifier (string|null): Optional identifier

Returns: View mode string

updateAndCacheViewMode(mode, identifier) ​

Updates view mode and caches it:

  • Sets component viewMode property
  • Caches the mode
  • Single method for update and cache

Parameters:

  • mode (string): View mode
  • identifier (string|null): Optional identifier

restoreCachedViewMode(defaultMode, identifier) ​

Restores cached view mode:

  • Gets cached mode with default
  • Sets component viewMode property
  • Used for restoration

Parameters:

  • defaultMode (string): Default mode
  • identifier (string|null): Optional identifier

restoreCachedViewModes(defaultMode, identifier) ​

Restores cached view modes (alias):

  • Same as restoreCachedViewMode
  • Alternative naming for consistency

View Modes ​

Supported view modes:

  • 'grid' - Grid view
  • 'list' - List view
  • 'mosaic' - Mosaic view (if supported)

Usage Examples ​

Basic Usage ​

vue
<script>
import viewModeCache from '~/mixins/view-mode-cache'

export default {
  mixins: [viewModeCache],
  data() {
    return {
      viewMode: this.initializeViewModeFromCache('grid')
    }
  },
  methods: {
    changeViewMode(mode) {
      this.updateAndCacheViewMode(mode)
    }
  }
}
</script>

With Identifier ​

vue
<script>
import viewModeCache from '~/mixins/view-mode-cache'

export default {
  mixins: [viewModeCache],
  data() {
    return {
      viewMode: this.initializeViewModeFromCache('grid', 'assets')
    }
  },
  methods: {
    changeViewMode(mode) {
      this.updateAndCacheViewMode(mode, 'assets')
    }
  }
}
</script>

Restoration on Mount ​

vue
<script>
import viewModeCache from '~/mixins/view-mode-cache'

export default {
  mixins: [viewModeCache],
  data() {
    return {
      viewMode: 'grid'
    }
  },
  mounted() {
    this.restoreCachedViewMode('grid')
  }
}
</script>

Storage ​

The mixin uses $auth.$storage.getUniversal():

  • Universal storage (works across tabs)
  • Persistent across sessions
  • Identifier-based keys for context

Integration Points ​

  • Asset List Components: View mode toggle
  • Search Results: View mode preference
  • Folder Details: View mode caching
  • Dashboard: View mode preference

Notes for Development ​

  • Mixin provides simple view mode caching
  • Identifier allows context-specific caching
  • Default mode fallback ensures mode always set
  • Universal storage persists across sessions
  • Error handling prevents crashes
  • Component must have viewMode property