From 7ead02ad7e313e4705217cd2748015698b7dd301 Mon Sep 17 00:00:00 2001
From: Dan Elbert <dan.elbert@gmail.com>
Date: Wed, 2 Oct 2024 16:20:07 -0500
Subject: [PATCH] progress and autosize

---
 app/javascript/components/App.vue             | 10 +--
 app/javascript/components/AppProgressBar.vue  | 69 +++++++++++++++
 app/javascript/components/RecipeEdit.vue      |  7 +-
 .../components/RecipeEditIngredientItem.vue   |  2 +-
 app/javascript/components/TheLog.vue          |  4 +-
 app/javascript/components/TheRecipe.vue       |  4 +-
 app/javascript/lib/ClickStrike.js             | 35 ++++++++
 app/javascript/lib/GlobalMixins.js            | 83 -------------------
 app/javascript/lib/useAutosize.js             |  9 ++
 app/javascript/packs/application.js           |  4 +-
 config/webpack/rules/vue.js                   |  2 +-
 package.json                                  |  1 +
 yarn.lock                                     |  8 ++
 13 files changed, 139 insertions(+), 99 deletions(-)
 create mode 100644 app/javascript/components/AppProgressBar.vue
 create mode 100644 app/javascript/lib/ClickStrike.js
 delete mode 100644 app/javascript/lib/GlobalMixins.js
 create mode 100644 app/javascript/lib/useAutosize.js

diff --git a/app/javascript/components/App.vue b/app/javascript/components/App.vue
index 8e22aa6..9d226be 100644
--- a/app/javascript/components/App.vue
+++ b/app/javascript/components/App.vue
@@ -1,6 +1,6 @@
 <template>
   <div id="app">
-    <vue-progress-bar></vue-progress-bar>
+    <app-progress-bar></app-progress-bar>
     <app-navbar></app-navbar>
     <section id="main" class="">
       <div class="container">
@@ -24,6 +24,7 @@
   import { useAppConfigStore } from "../stores/appConfig";
   import { useLoadResource } from "../lib/useLoadResource";
   import { useCheckAuthentication } from "../lib/useCheckAuthentication";
+  import AppProgressBar from "./AppProgressBar.vue";
 
   const globalTweenGroup = useGlobalTweenGroup();
   let animationLoop = true;
@@ -44,13 +45,6 @@
       { immediate: true }
   );
 
-  watch(
-      () => appConfig.isLoading,
-      (val) => {
-        // Update Progress
-      }
-  )
-
   onMounted(() => {
     // Setup global animation loop
     function animate() {
diff --git a/app/javascript/components/AppProgressBar.vue b/app/javascript/components/AppProgressBar.vue
new file mode 100644
index 0000000..49e018c
--- /dev/null
+++ b/app/javascript/components/AppProgressBar.vue
@@ -0,0 +1,69 @@
+<template>
+  <div class="progress-bar" :style="progressStyle"></div>
+</template>
+
+<script setup>
+
+import { computed, ref, watch } from "vue";
+import { useAppConfigStore } from "../stores/appConfig";
+import TWEEN from '@tweenjs/tween.js';
+import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
+
+const appConfig = useAppConfigStore();
+
+const showProgress = ref(false);
+const loadingPercent = ref(0);
+let animation = null;
+
+const progressStyle = computed(() => {
+  return {
+    opacity: showProgress.value ? "1" : "0",
+    width: `${loadingPercent.value}%`,
+    height: "4px"
+  };
+});
+
+watch(() => appConfig.isLoading, val => {
+  if (val) {
+    start();
+  } else {
+    stop();
+  }
+});
+
+function start() {
+  if (!animation) {
+    showProgress.value = true;
+    animation = new TWEEN.Tween({ percent: 0 }, useGlobalTweenGroup())
+        .to({ percent: 90 })
+        .easing(TWEEN.Easing.Quartic.Out)
+        .duration(3000)
+        .onUpdate(({ percent }) => { loadingPercent.value = percent; })
+        .onComplete(({ percent }) => {})
+        .start();
+  }
+}
+
+function stop() {
+  if (animation) {
+    showProgress.value = false;
+    animation.stop();
+    animation = null;
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+  @use "bulma/sass/utilities" as bulma;
+
+  .progress-bar {
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 999999;
+    background-color: bulma.$blue;
+    transition: width 0.1s, opacity 0.3s;
+  }
+</style>
diff --git a/app/javascript/components/RecipeEdit.vue b/app/javascript/components/RecipeEdit.vue
index 291c923..ac7fc1a 100644
--- a/app/javascript/components/RecipeEdit.vue
+++ b/app/javascript/components/RecipeEdit.vue
@@ -208,8 +208,8 @@ _underline_
 
 <script setup>
 
-  import { computed, ref, watch } from "vue";
-  //import autosize from "autosize";
+  import { computed, ref, useTemplateRef, watch } from "vue";
+  import { useAutosize } from "../lib/useAutosize";
   import debounce from "lodash/debounce";
   import api from "../lib/Api";
   import RecipeEditIngredientEditor from "./RecipeEditIngredientEditor";
@@ -226,9 +226,12 @@ _underline_
     }
   });
 
+  const stepTextArea = useTemplateRef("step_text_area");
   const stepPreviewCache = ref(null);
   const isDescriptionHelpOpen = ref(false);
 
+  useAutosize(stepTextArea);
+
   const stepPreview = computed(() => {
     if (stepPreviewCache.value === null) {
       return props.recipe.rendered_steps;
diff --git a/app/javascript/components/RecipeEditIngredientItem.vue b/app/javascript/components/RecipeEditIngredientItem.vue
index 8703d15..781e841 100644
--- a/app/javascript/components/RecipeEditIngredientItem.vue
+++ b/app/javascript/components/RecipeEditIngredientItem.vue
@@ -64,7 +64,7 @@
 
   const autocompleteElement = useTemplateRef("autocomplete");
 
-  watch(props.ingredient.name, (val) => {
+  watch(props.ingredient, (val) => {
     if (props.ingredient.ingredient && props.ingredient.ingredient.name !== val) {
       props.ingredient.ingredient_id = null;
       props.ingredient.ingredient = null;
diff --git a/app/javascript/components/TheLog.vue b/app/javascript/components/TheLog.vue
index 7b829c3..c5d9f95 100644
--- a/app/javascript/components/TheLog.vue
+++ b/app/javascript/components/TheLog.vue
@@ -8,7 +8,7 @@
     </div>
 
     <div class="buttons">
-      <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_log', params: { id: logId }}">Edit</router-link>
+      <router-link v-if="appConfig.isLoggedIn" class="button" :to="{name: 'edit_log', params: { id: logId }}">Edit</router-link>
       <router-link class="button" to="/logs">Back</router-link>
     </div>
   </div>
@@ -21,9 +21,11 @@
   import LogShow from "./LogShow";
   import api from "../lib/Api";
   import { useLoadResource } from "../lib/useLoadResource";
+  import { useAppConfigStore } from "../stores/appConfig";
 
   const { loadResource } = useLoadResource();
   const route = useRoute();
+  const appConfig = useAppConfigStore();
 
   const log = ref(null);
   const logId = computed(() => route.params.id);
diff --git a/app/javascript/components/TheRecipe.vue b/app/javascript/components/TheRecipe.vue
index 0a1d535..f3426d3 100644
--- a/app/javascript/components/TheRecipe.vue
+++ b/app/javascript/components/TheRecipe.vue
@@ -17,7 +17,7 @@
       <recipe-show :recipe="recipe"></recipe-show>
     </div>
 
-    <router-link v-if="isLoggedIn" class="button" :to="{name: 'edit_recipe', params: { id: recipeId }}">Edit</router-link>
+    <router-link v-if="appConfig.isLoggedIn" class="button" :to="{name: 'edit_recipe', params: { id: recipeId }}">Edit</router-link>
     <router-link class="button" to="/">Back</router-link>
   </div>
 </template>
@@ -29,7 +29,9 @@
   import RecipeShow from "./RecipeShow";
   import api from "../lib/Api";
   import { useLoadResource } from "../lib/useLoadResource";
+  import { useAppConfigStore } from "../stores/appConfig";
 
+  const appConfig = useAppConfigStore();
   const route = useRoute();
   const { loadResource } = useLoadResource();
   const recipe = ref(null);
diff --git a/app/javascript/lib/ClickStrike.js b/app/javascript/lib/ClickStrike.js
new file mode 100644
index 0000000..9855788
--- /dev/null
+++ b/app/javascript/lib/ClickStrike.js
@@ -0,0 +1,35 @@
+
+function clickStrikeClick(evt) {
+  const isStrikable = el => el && el.tagName === "LI";
+  const strikeClass = "is-strikethrough";
+
+  let t = evt.target;
+
+  while (t !== null && t !== this && !isStrikable(t)) {
+    t = t.parentElement;
+  }
+
+  if (isStrikable(t)) {
+    const classList = t.className.split(" ");
+    const strIdx = classList.findIndex(c => c === strikeClass);
+    if (strIdx >= 0) {
+      classList.splice(strIdx, 1);
+    } else {
+      classList.push(strikeClass);
+    }
+
+    t.className = classList.join(" ");
+  }
+}
+
+export function installClickStrike(app) {
+  app.directive('click-strike', {
+    beforeMount(el) {
+      el.addEventListener("click", clickStrikeClick);
+    },
+
+    unmounted(el) {
+      el.removeEventListener("click", clickStrikeClick);
+    }
+  });
+}
diff --git a/app/javascript/lib/GlobalMixins.js b/app/javascript/lib/GlobalMixins.js
deleted file mode 100644
index 75f4415..0000000
--- a/app/javascript/lib/GlobalMixins.js
+++ /dev/null
@@ -1,83 +0,0 @@
-
-import { mapActions, mapState } from "pinia";
-import { useAppConfigStore } from "../stores/appConfig";
-
-function clickStrikeClick(evt) {
-  const isStrikable = el => el && el.tagName === "LI";
-  const strikeClass = "is-strikethrough";
-
-  let t = evt.target;
-
-  while (t !== null && t !== this && !isStrikable(t)) {
-    t = t.parentElement;
-  }
-
-  if (isStrikable(t)) {
-    const classList = t.className.split(" ");
-    const strIdx = classList.findIndex(c => c === strikeClass);
-    if (strIdx >= 0) {
-      classList.splice(strIdx, 1);
-    } else {
-      classList.push(strikeClass);
-    }
-
-    t.className = classList.join(" ");
-  }
-}
-
-export function installMixins(app) {
-  app.directive('click-strike', {
-    beforeMount(el) {
-      el.addEventListener("click", clickStrikeClick);
-    },
-
-    unmounted(el) {
-      el.removeEventListener("click", clickStrikeClick);
-    }
-  });
-
-  app.mixin({
-    data() {
-      return {
-        localLoadingCount: 0
-      };
-    },
-
-    computed: {
-      ...mapState(useAppConfigStore, [
-        "isLoading",
-        "isLoggedIn",
-        "isAdmin",
-        "user"
-      ]),
-
-      localLoading() {
-        return this.localLoadingCount > 0;
-      }
-    },
-    methods: {
-      ...mapActions(useAppConfigStore, [
-        'setError',
-        'setLoading',
-        'updateCurrentUser'
-      ]),
-
-      loadResource(promise) {
-        this.setLoading(true);
-        this.localLoadingCount = this.localLoadingCount + 1;
-
-        return promise
-          .catch(err => this.setError(err))
-          .then(res => {
-            this.setLoading(false);
-            this.localLoadingCount = this.localLoadingCount - 1;
-            return res;
-          });
-      },
-
-      checkAuthentication() {
-        return this.loadResource(this.updateCurrentUser());
-      }
-    }
-  });
-}
diff --git a/app/javascript/lib/useAutosize.js b/app/javascript/lib/useAutosize.js
new file mode 100644
index 0000000..a1dd170
--- /dev/null
+++ b/app/javascript/lib/useAutosize.js
@@ -0,0 +1,9 @@
+import { onBeforeUnmount } from "vue";
+import autosize from 'autosize';
+
+export function useAutosize(elementRef) {
+  autosize(elementRef.value);
+  onBeforeUnmount(() => {
+    autosize.destroy(elementRef.value);
+  });
+}
diff --git a/app/javascript/packs/application.js b/app/javascript/packs/application.js
index 871cdc5..b2eb4e8 100644
--- a/app/javascript/packs/application.js
+++ b/app/javascript/packs/application.js
@@ -3,7 +3,7 @@ import { createApp } from 'vue';
 import { createPinia } from 'pinia';
 import { swInit } from "../lib/ServiceWorker";
 import config from '../lib/config';
-import { installMixins } from "../lib/GlobalMixins";
+import { installClickStrike } from "../lib/ClickStrike";
 import router from '../router';
 
 import AppAutocomplete from "../components/AppAutocomplete";
@@ -39,7 +39,7 @@ document.addEventListener('DOMContentLoaded', () => {
   app.use(pinia);
   app.use(router);
   swInit();
-  installMixins(app);
+  installClickStrike(app);
 
   app.component("AppAutocomplete", AppAutocomplete);
   app.component("AppConfirm", AppConfirm);
diff --git a/config/webpack/rules/vue.js b/config/webpack/rules/vue.js
index 7ef3a22..46d557d 100644
--- a/config/webpack/rules/vue.js
+++ b/config/webpack/rules/vue.js
@@ -14,7 +14,7 @@ module.exports = {
   plugins: [
     new VueLoaderPlugin(),
     new DefinePlugin({
-      __VUE_OPTIONS_API__: true,
+      __VUE_OPTIONS_API__: false,
       __VUE_PROD_DEVTOOLS__: env.isDevelopment,
       __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: env.isDevelopment
     })
diff --git a/package.json b/package.json
index c41240f..743d820 100644
--- a/package.json
+++ b/package.json
@@ -25,6 +25,7 @@
     "@types/babel__core": "7",
     "@types/webpack": "5",
     "@vueuse/core": "^11.1.0",
+    "autosize": "^6.0.1",
     "babel-loader": "8",
     "bulma": "^1.0.2",
     "cheerio": "^1.0.0",
diff --git a/yarn.lock b/yarn.lock
index 446890f..81e37be 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2455,6 +2455,7 @@ __metadata:
     "@types/babel__core": "npm:7"
     "@types/webpack": "npm:5"
     "@vueuse/core": "npm:^11.1.0"
+    autosize: "npm:^6.0.1"
     babel-loader: "npm:8"
     bulma: "npm:^1.0.2"
     cheerio: "npm:^1.0.0"
@@ -2495,6 +2496,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"autosize@npm:^6.0.1":
+  version: 6.0.1
+  resolution: "autosize@npm:6.0.1"
+  checksum: 10c0/7d1b9823443c2cc3fc962a7c20ec60d62db6a98c889a39f71495b48decbfda2463e6561fb7a748f069d6778e419f2fa1a7ecd09baa02dc33c4a209f777da9ac8
+  languageName: node
+  linkType: hard
+
 "babel-loader@npm:8":
   version: 8.4.1
   resolution: "babel-loader@npm:8.4.1"