controllers/dashboard/frame_loader_controller.js

  1. import { Controller } from "@hotwired/stimulus"
  2. import { subscription } from "~/javascripts/store/mixins/subscription"
  4. /**
  5.  * @class Dashboard.FrameLoaderController
  6.  * @classdesc Requests the correct Turbo frame to load in the required data visualisation
  7.  * @extends Controller
  8.  **/
  9. export default class extends Controller {
  10.   static targets = [ "frame", "loading" ]
  11.   static values = {
  12.     defaultFrame: String,
  13.     path: String,
  14.     storeId: String
  15.   }
  17.   /** 
  18.    * Subscribe to the store.
  19.    * 
  20.    * @instance
  21.    * @memberof Dashboard.FrameLoaderController
  22.    **/
  23.   connect() {
  24.     this.clonedLoader = this.loadingTarget.cloneNode(true)
  25.     subscription(this)
  26.     this.subscribe()
  27.     this.reconnect()
  28.   }
  30.   /** 
  31.    * Handles a repeated Turbo visit to the dashboard page.
  32.    * 
  33.    * @instance
  34.    * @memberof Dashboard.FrameLoaderController
  35.    **/
  36.    reconnect() {
  37.     if (this.store("frameSelected")) {
  38.       this.editStore("frameSelected", this.defaultFrameValue)
  39.     }
  40.   }
  42.   /** 
  43.    * Generate a Turbo frame to load the correct data visualisation and append the loader inside
  44.    * 
  45.    * @instance
  46.    * @memberof Dashboard.FrameLoaderController
  47.    **/
  48.   storeUpdated(prop, storeId) {
  49.     if (prop === "frameSelected") {
  50.       let turboFrame = document.createElement("turbo-frame")
  51.       turboFrame.id = this.store("frameSelected")
  52.       turboFrame.src = this.pathValue
  53.       turboFrame.appendChild(this.clonedLoader)
  55.       this.frameTarget.innerHTML = ""
  56.       this.frameTarget.appendChild(turboFrame)
  57.     }
  58.   }
  60.   /** 
  61.    * Unsubscribe from the store
  62.    * 
  63.    * @instance
  64.    * @memberof Dashboard.FrameLoaderController
  65.    **/
  66.   disconnect() {
  67.     this.unsubscribe()
  68.   }
  69. }