controllers/dashboard/years_controller.js

  1. import { Controller } from "@hotwired/stimulus"
  2. import { subscription } from "~/javascripts/store/mixins/subscription"
  4. /**
  5.  * @class Dashboard.YearsController
  6.  * @classdesc Stimulus controller that fetches the data to populate the years and months buttons.
  7.  * @extends Controller
  8.  **/
  9. export default class extends Controller {
  10.   static targets = [ "buttonGroup", "button" ]
  11.   static values = {
  12.     storeId: String,
  13.     function: String,
  14.     status: String
  15.   }
  17.   /** 
  18.    * Subscribe to the store. Setup dataVizData and then fetch years and months data
  19.    * 
  20.    * @instance
  21.    * @memberof Dashboard.YearsController
  22.    **/
  23.   connect() {
  24.     subscription(this)
  25.     this.subscribe()
  26.     if (!this.store("dataVizData")) this.editStore("dataVizData", {})
  27.     if (!this.store("yearsAndMonths")) this.yearsAndMonths()
  28.     
  29.     this.reconnect()
  30.   }
  32.   /** 
  33.    * Handles a repeated Turbo visit to the dashboard page.
  34.    * 
  35.    * @instance
  36.    * @memberof Dashboard.YearsController
  37.    **/
  38.   reconnect() {
  39.     if (this.store("selectedDataVizData")) {
  40.       this.storeUpdated("yearsAndMonths", this.storeIdValue)
  41.     }
  42.   }
  44.   /** 
  45.    * Triggered when the years and months data is loaded. Uses a document fragment to fully create the
  46.    * years buttons before removing the load button and adding all the new years buttons. The last button
  47.    * is set as selected
  48.    * 
  49.    * @instance
  50.    * @memberof Dashboard.YearsController
  51.    **/
  52.   statusValueChanged() {
  53.     if (this.statusValue === "loaded") {
  54.       let fragment = document.createDocumentFragment()
  55.       this.store("years").forEach(year => {
  56.         const buttonClone = this.buttonTarget.cloneNode(false)
  57.         const button = fragment.appendChild(buttonClone)
  58.         button.innerHTML = year
  59.       });
  60.       this.buttonTarget.remove()
  61.       this.buttonGroupTarget.appendChild(fragment)
  62.       this.buttonTargets[this.buttonTargets.length - 1].classList.add("selected")
  63.     }
  64.   }
  66.   /** 
  67.    * Ignores year if already clicked. Set the months data for the selected year. Set the last month as
  68.    * selected in the store and gives the class selected to the clicked year.
  69.    * 
  70.    * @instance
  71.    * @memberof Dashboard.YearsController
  72.    **/
  73.   yearClicked(event) {
  74.     if (this.store("yearSelected") === parseInt(event.target.innerHTML)) return
  75.     
  76.     this.editStore("yearSelected", parseInt(event.target.innerHTML))
  77.     const yearAndMonths = this.store("yearsAndMonths").find(data => {
  78.       return data.year === this.store("yearSelected")
  79.     })
  80.     this.editStore("months", yearAndMonths.month_numbers)
  81.     this.editStore("monthSelected", this.store("months")[this.store("months").length - 1])
  83.     this.buttonTargets.forEach(buttonTarget => buttonTarget.classList.remove("selected"))
  84.     event.target.classList.add("selected")
  85.   }
  87.   /** 
  88.    * Fetch the data for years and months.
  89.    * 
  90.    * @instance
  91.    * @memberof Dashboard.YearsController
  92.    **/
  93.   yearsAndMonths() {
  94.     fetch("/.netlify/functions/supabase-get-functions", { 
  95.       headers: { "Function-Name": this.functionValue }
  96.     })
  97.       .then(responseCheck => {
  98.         if (!responseCheck.ok) { throw Error(responseCheck.status); }
  99.         return responseCheck;
  100.       })
  101.       .then(res => res.json())
  102.       .then(yearsAndMonths => {
  103.         this.editStore("yearsAndMonths", yearsAndMonths)
  104.       })
  105.       .catch(error => {
  106.         console.warn(error)
  107.         this.editStore("yearsAndMonths", undefined)
  108.       });
  109.   }
  111.   /** 
  112.    * Triggered by the store whenever any store data changes. Sets us the store when yearsAndMonths data
  113.    * has been set following the fetch statement
  114.    * 
  115.    * @instance
  116.    * @memberof Dashboard.YearsController
  117.    **/
  118.   storeUpdated(prop, storeId) {
  119.     if (prop === "yearsAndMonths" && storeId === this.storeIdValue) {
  120.       this.editStore("years", this.store("yearsAndMonths").map(data => data.year))
  121.       this.editStore("yearSelected", this.store("years")[this.store("years").length - 1])
  122.       this.editStore(
  123.         "months", this.store("yearsAndMonths").slice(-1).map(data => data.month_numbers).flat()
  124.       )
  125.       this.editStore("monthSelected", this.store("months")[this.store("months").length - 1])
  127.       this.statusValue = "loaded"
  128.     }
  129.   }
  131.   /** 
  132.    * Unsubscribe from the store
  133.    * 
  134.    * @instance
  135.    * @memberof Dashboard.YearsController
  136.    **/
  137.   disconnect() {
  138.     this.statusValue = "loading"
  139.     this.unsubscribe()
  140.   }
  141. }