From a071e6b21ef38b5a40c9d8dc75fb0abca2fcbd2d Mon Sep 17 00:00:00 2001
From: Dan Elbert <dan.elbert@gmail.com>
Date: Sun, 29 Sep 2024 13:35:49 -0500
Subject: [PATCH] Begin converting to composition api

---
 .gitignore                                    |   2 +-
 app/javascript/components/App.vue             |  86 ++---
 app/javascript/components/AppAutocomplete.vue | 308 +++++++++---------
 app/javascript/components/AppConfirm.vue      |  58 ++--
 app/javascript/components/AppDatePicker.vue   |  46 ++-
 app/javascript/components/AppDateTime.vue     |  78 ++---
 app/javascript/components/AppDropdown.vue     |  98 +++---
 .../components/AppExpandTransition.vue        | 160 +++++----
 app/javascript/components/AppIcon.vue         |  48 +--
 app/javascript/components/AppIconicIcon.vue   | 123 ++++---
 app/javascript/components/AppLoading.vue      |   5 +-
 app/javascript/components/AppModal.vue        |  46 +--
 app/javascript/components/AppNavbar.vue       |  50 +--
 app/javascript/lib/useCheckAuthentication.js  |  12 +
 app/javascript/lib/useLoadResource.js         |  27 ++
 package.json                                  |   1 +
 yarn.lock                                     |  38 ++-
 17 files changed, 574 insertions(+), 612 deletions(-)
 create mode 100644 app/javascript/lib/useCheckAuthentication.js
 create mode 100644 app/javascript/lib/useLoadResource.js

diff --git a/.gitignore b/.gitignore
index baafb3d..6b11b7f 100644
--- a/.gitignore
+++ b/.gitignore
@@ -9,7 +9,7 @@
 
 # Ignore the default SQLite database.
 /db/*.sqlite3
-/db/*.sqlite3-journal
+/db/*.sqlite3*
 
 # Ignore all logfiles and tempfiles.
 /log/*
diff --git a/app/javascript/components/App.vue b/app/javascript/components/App.vue
index 5f1f39c..8e22aa6 100644
--- a/app/javascript/components/App.vue
+++ b/app/javascript/components/App.vue
@@ -9,7 +9,7 @@
             <component v-if="!hasError" :is="Component" />
             <div v-else>
               <h1>Error!</h1>
-              <p>{{ error }}</p>
+              <p>{{ appConfig.error }}</p>
             </div>
           </transition>
         </router-view>
@@ -18,70 +18,56 @@
   </div>
 </template>
 
-<script>
-
-  import { mapState } from "pinia";
+<script setup>
+  import { computed, nextTick, onMounted, onUnmounted, ref, watch } from "vue";
   import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
   import { useAppConfigStore } from "../stores/appConfig";
+  import { useLoadResource } from "../lib/useLoadResource";
+  import { useCheckAuthentication } from "../lib/useCheckAuthentication";
 
   const globalTweenGroup = useGlobalTweenGroup();
+  let animationLoop = true;
 
-  export default {
-    data() {
-      return {
-      };
-    },
+  const appConfig = useAppConfigStore();
+  const hasError = computed(() => appConfig.error !== null);
 
-    computed: {
-      ...mapState(useAppConfigStore, {
-        hasError: store => store.error !== null,
-        error: store => store.error,
-        authChecked: store => store.authChecked,
-        initialLoad: store => store.initialLoad
-      })
-    },
+  const { loadResource } = useLoadResource();
+  const { checkAuthentication } = useCheckAuthentication(loadResource);
 
-    watch: {
-      isLoading(val) {
+  watch(
+      () => appConfig.initialLoad,
+      (val) => {
         if (val) {
-          // this.$Progress.start();
-        } else {
-          // this.$Progress.finish();
+          nextTick(() => document.body.classList.remove("loading"));
         }
       },
+      { immediate: true }
+  );
 
-      initialLoad(val) {
-        if (val) {
-          this.$nextTick(() => {
-            document.body.classList.remove("loading");
-          });
-        }
+  watch(
+      () => appConfig.isLoading,
+      (val) => {
+        // Update Progress
       }
-    },
+  )
 
-    created() {
-      // Setup global animation loop
-      function animate(time) {
-        globalTweenGroup.update(time);
+  onMounted(() => {
+    // Setup global animation loop
+    function animate() {
+      if (animationLoop) {
+        globalTweenGroup.update();
         requestAnimationFrame(animate);
       }
-      animate();
-
-      if (this.user === null && this.authChecked === false) {
-        this.checkAuthentication();
-      }
-    },
-
-    mounted() {
-      if (this.initialLoad) {
-        this.$nextTick(() => {
-          document.body.classList.remove("loading");
-        });
-      }
-    },
-
-    components: {
     }
-  }
+    animate();
+
+    if (appConfig.user === null && appConfig.authChecked === false) {
+      checkAuthentication();
+    }
+  });
+
+  onUnmounted(() => {
+    animationLoop = false;
+  });
 
 </script>
\ No newline at end of file
diff --git a/app/javascript/components/AppAutocomplete.vue b/app/javascript/components/AppAutocomplete.vue
index 3288ba0..af5f595 100644
--- a/app/javascript/components/AppAutocomplete.vue
+++ b/app/javascript/components/AppAutocomplete.vue
@@ -27,195 +27,179 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
+  import { computed, ref, watch } from "vue";
   import debounce from 'lodash/debounce';
 
-  export default {
-    props: {
-      modelValue: String,
-      id: String,
-      placeholder: String,
-      name: String,
-      inputClass: {
-        type: [String, Object, Array],
-        required: false,
-        default: null
-      },
-      minLength: {
-        type: Number,
-        default: 0
-      },
-      debounce: {
-        type: Number,
-        required: false,
-        default: 250
-      },
+  const emit = defineEmits(["update:modelValue", "inputClick", "optionSelected"]);
 
-      valueAttribute: String,
-      labelAttribute: String,
-      keyAttribute: String,
-
-      onGetOptions: Function,
-      searchOptions: Array
+  const props = defineProps({
+    modelValue: String,
+    id: String,
+    placeholder: String,
+    name: String,
+    inputClass: {
+      type: [String, Object, Array],
+      required: false,
+      default: null
+    },
+    minLength: {
+      type: Number,
+      default: 0
+    },
+    debounce: {
+      type: Number,
+      required: false,
+      default: 250
     },
 
-    data() {
-      return {
-        options: [],
-        rawValue: "",
-        isListOpen: false,
-        activeListIndex: 0
-      }
-    },
+    valueAttribute: String,
+    labelAttribute: String,
+    keyAttribute: String,
 
-    created() {
-      this.rawValue = this.modelValue;
+    onGetOptions: Function,
+    searchOptions: Array
+  });
 
-    },
+  const options = ref([]);
+  const rawValue = ref("");
+  const isListOpen = ref(false);
+  const activeListIndex = ref(0);
 
-    watch: {
-      modelValue(newValue) {
-        this.rawValue = newValue;
-      }
-    },
+  const finalInputClass = computed(() => {
+    let cls = ['input'];
+    if (props.inputClass === null) {
+      return cls;
+    } else if (Array.isArray(props.inputClass)) {
+      return cls.concat(props.inputClass);
+    } else {
+      cls.push(props.inputClass);
+      return cls;
+    }
+  });
 
-    computed: {
-      finalInputClass() {
-        let cls = ['input'];
-        if (this.inputClass === null) {
-          return cls;
-        } else if (Array.isArray(this.inputClass)) {
-          return cls.concat(this.inputClass);
-        } else {
-          cls.push(this.inputClass);
-          return cls;
-        }
-      },
+  watch(
+      () => props.modelValue,
+      (newValue) => { rawValue.value = newValue; },
+      { immediate: true }
+  );
 
-      debouncedUpdateOptions() {
-        return debounce(this.updateOptions, this.debounce);
-      }
-    },
+  function optionClass(idx) {
+    return activeListIndex.value === idx ? 'option active' : 'option';
+  }
 
-    methods: {
-      optionClass(idx) {
-        return this.activeListIndex === idx ? 'option active' : 'option';
-      },
+  function optionClick(opt) {
+    selectOption(opt);
+  }
 
-      optionClick(opt) {
-        this.selectOption(opt);
-      },
+  function optionKey(opt) {
+    if (props.keyAttribute) {
+      return opt[props.keyAttribute]
+    } else if (props.valueAttribute) {
+      return opt[props.valueAttribute];
+    } else {
+      return opt.toString();
+    }
+  }
 
-      optionKey(opt) {
-        if (this.keyAttribute) {
-          return opt[this.keyAttribute]
-        } else if (this.valueAttribute) {
-          return opt[this.valueAttribute];
-        } else {
-          return opt.toString();
-        }
-      },
+  function optionValue(opt) {
+    if (props.valueAttribute) {
+      return opt[props.valueAttribute];
+    } else {
+      return opt.toString();
+    }
+  }
 
-      optionValue(opt) {
-        if (this.valueAttribute) {
-          return opt[this.valueAttribute];
-        } else {
-          return opt.toString();
-        }
-      },
+  function optionLabel(opt) {
+    if (props.labelAttribute) {
+      return opt[props.labelAttribute];
+    } else {
+      return null;
+    }
+  }
 
-      optionLabel(opt) {
-        if (this.labelAttribute) {
-          return opt[this.labelAttribute];
-        } else {
-          return null;
-        }
-      },
+  function optionMousemove(idx) {
+    activeListIndex.value = idx;
+  }
 
-      optionMousemove(idx) {
-        this.activeListIndex = idx;
-      },
+  function clickHandler(evt) {
+    emit('inputClick', evt);
+  }
 
-      clickHandler(evt) {
-        this.$emit("inputClick", evt);
-      },
+  function blurHandler(evt) {
+    // blur fires before click.  If the blur was fired because the user clicked a list item, immediately hiding the list here
+    // would prevent the click event from firing
+    setTimeout(() => {
+      isListOpen.value = false;
+    },250);
+  }
 
-      blurHandler(evt) {
-        // blur fires before click.  If the blur was fired because the user clicked a list item, immediately hiding the list here
-        // would prevent the click event from firing
-        setTimeout(() => {
-          this.isListOpen = false;
-        },250);
-      },
+  function inputHandler(evt) {
+    const newValue = evt.target.value;
 
-      inputHandler(evt) {
-        const newValue = evt.target.value;
+    if (rawValue.value !== newValue) {
 
-        if (this.rawValue !== newValue) {
+      rawValue.value = newValue;
 
-          this.rawValue = newValue;
+      emit("update:modelValue", newValue);
 
-          this.$emit("update:modelValue", newValue);
-
-          if (newValue.length >= Math.max(1, this.minLength)) {
-            this.debouncedUpdateOptions(newValue);
-          } else {
-            this.isListOpen = false;
-          }
-        }
-      },
-
-      keydownHandler(evt) {
-        if (this.isListOpen === false)
-          return;
-
-        switch (evt.key) {
-          case "ArrowUp":
-            evt.preventDefault();
-            this.activeListIndex = Math.max(0, this.activeListIndex - 1);
-            break;
-          case "ArrowDown":
-            evt.preventDefault();
-            this.activeListIndex = Math.min(this.options.length - 1, this.activeListIndex + 1);
-            break;
-          case "Enter":
-            evt.preventDefault();
-            this.selectOption(this.options[this.activeListIndex]);
-            break;
-          case "Escape":
-            evt.preventDefault();
-            this.isListOpen = false;
-            break;
-        }
-      },
-
-      selectOption(opt) {
-        this.rawValue = this.optionValue(opt);
-        this.$emit("update:modelValue", this.rawValue);
-        this.$emit("optionSelected", opt);
-        this.isListOpen = false;
-      },
-
-      updateOptions(value) {
-        let p = null;
-        if (this.searchOptions) {
-          const reg = new RegExp("^" + value, "i");
-          const matcher = o => reg.test(this.optionValue(o));
-          p = Promise.resolve(this.searchOptions.filter(matcher));
-        } else {
-          p = this.onGetOptions(value)
-        }
-
-        p.then(opts => {
-          this.options = opts;
-          this.isListOpen = opts.length > 0;
-          this.activeListIndex = 0;
-        })
+      if (newValue.length >= Math.max(1, props.minLength)) {
+        this.updateOptions(newValue);
+      } else {
+        isListOpen.value = false;
       }
     }
   }
 
+  function keydownHandler(evt) {
+    if (isListOpen.value === false)
+      return;
+
+    switch (evt.key) {
+      case "ArrowUp":
+        evt.preventDefault();
+        activeListIndex.value = Math.max(0, activeListIndex.value - 1);
+        break;
+      case "ArrowDown":
+        evt.preventDefault();
+        activeListIndex.value = Math.min(options.value.length - 1, activeListIndex.value + 1);
+        break;
+      case "Enter":
+        evt.preventDefault();
+        selectOption(options.value[activeListIndex.value]);
+        break;
+      case "Escape":
+        evt.preventDefault();
+        isListOpen.value = false;
+        break;
+    }
+  }
+
+  function selectOption(opt) {
+    rawValue.value = optionValue(opt);
+    emit("update:modelValue", rawValue.value);
+    emit("optionSelected", opt);
+    isListOpen.value = false;
+  }
+
+  const updateOptions = debounce(function(value) {
+    let p = null;
+    if (props.searchOptions) {
+      const reg = new RegExp("^" + value, "i");
+      const matcher = o => reg.test(optionValue(o));
+      p = Promise.resolve(props.searchOptions.filter(matcher));
+    } else {
+      p = props.onGetOptions(value)
+    }
+
+    p.then(opts => {
+      options.value = opts;
+      isListOpen.value = opts.length > 0;
+      activeListIndex.value = 0;
+    })
+  }, props.debounce);
+
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/javascript/components/AppConfirm.vue b/app/javascript/components/AppConfirm.vue
index 5ddca85..d73946b 100644
--- a/app/javascript/components/AppConfirm.vue
+++ b/app/javascript/components/AppConfirm.vue
@@ -7,41 +7,37 @@
   </app-modal>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
-      cancel: {
-        type: Function,
-        required: true
-      },
+const props = defineProps({
+  cancel: {
+    type: Function,
+    required: true
+  },
 
-      confirm: {
-        type: Function,
-        required: true
-      },
+  confirm: {
+    type: Function,
+    required: true
+  },
 
-      message: {
-        type: String,
-        required: false,
-        default: 'Are you sure?'
-      },
+  message: {
+    type: String,
+    required: false,
+    default: 'Are you sure?'
+  },
 
-      open: {
-        type: Boolean,
-        required: true
-      }
-    },
-
-    methods: {
-      runConfirm() {
-        this.confirm();
-      },
-
-      runCancel() {
-        this.cancel();
-      }
-    }
+  open: {
+    type: Boolean,
+    required: true
   }
+});
+
+function runConfirm() {
+  props.confirm();
+}
+
+function runCancel() {
+  props.cancel();
+}
 
 </script>
\ No newline at end of file
diff --git a/app/javascript/components/AppDatePicker.vue b/app/javascript/components/AppDatePicker.vue
index 15319dd..1141547 100644
--- a/app/javascript/components/AppDatePicker.vue
+++ b/app/javascript/components/AppDatePicker.vue
@@ -2,37 +2,33 @@
   <app-text-field :value="stringValue" @input="input" :label="label" type="date"></app-text-field>
 </template>
 
-<script>
+<script setup>
 
+  import { computed } from "vue";
   import DateTimeUtils from "../lib/DateTimeUtils";
 
-  export default {
-    props: {
-      modelValue: {
-        required: false,
-        type: [Date, String]
-      },
-
-      label: {
-        required: false,
-        type: String,
-        default: null
-      }
+  const emit = defineEmits(["update:modelValue"]);
+  const props = defineProps({
+    modelValue: {
+      required: false,
+      type: [Date, String]
     },
 
-    computed: {
-      stringValue() {
-        const d = DateTimeUtils.toDate(this.modelValue);
-        return DateTimeUtils.formatDateForEdit(d);
-      }
-    },
-
-    methods: {
-      input(val) {
-        let d = DateTimeUtils.toDate(val + " 00:00");
-        this.$emit("update:modelValue", d);
-      }
+    label: {
+      required: false,
+      type: String,
+      default: null
     }
+  });
+
+  const stringValue = computed(() => {
+    const d = DateTimeUtils.toDate(props.modelValue);
+    return DateTimeUtils.formatDateForEdit(d);
+  });
+
+  function input(val) {
+    let d = DateTimeUtils.toDate(val + " 00:00");
+    emit("update:modelValue", d);
   }
 
 </script>
diff --git a/app/javascript/components/AppDateTime.vue b/app/javascript/components/AppDateTime.vue
index c118690..0b858e3 100644
--- a/app/javascript/components/AppDateTime.vue
+++ b/app/javascript/components/AppDateTime.vue
@@ -5,57 +5,49 @@
   </span>
 </template>
 
-<script>
+<script setup>
 
+  import { computed } from "vue";
   import DateTimeUtils from "../lib/DateTimeUtils";
 
-  export default {
-    props: {
-      dateTime: {
-        required: true,
-        type: [Date, String]
-      },
-
-      showDate: {
-        required: false,
-        type: Boolean,
-        default: true
-      },
-
-      showTime: {
-        required: false,
-        type: Boolean,
-        default: true
-      },
-
-      useInput: {
-        required: false,
-        type: Boolean,
-        default: false
-      }
+  const props = defineProps({
+    dateTime: {
+      required: true,
+      type: [Date, String]
     },
 
-    computed: {
-      dateObj() {
-        return DateTimeUtils.toDate(this.dateTime);
-      },
+    showDate: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
 
-      friendlyString() {
-        const parts = [];
-        if (this.showDate) {
-          parts.push(DateTimeUtils.formatDate(this.dateObj));
-        }
-        if (this.showTime) {
-          parts.push(DateTimeUtils.formatTime(this.dateObj, true));
-        }
-        return parts.join(" ");
-      },
+    showTime: {
+      required: false,
+      type: Boolean,
+      default: true
+    },
 
-      fullString() {
-        return DateTimeUtils.formatTimestamp(this.dateObj);
-      }
+    useInput: {
+      required: false,
+      type: Boolean,
+      default: false
     }
-  }
+  });
+
+  const dateObj = computed(() => DateTimeUtils.toDate(props.dateTime));
+  const fullString = computed(() => DateTimeUtils.formatTimestamp(dateObj.value));
+
+  const friendlyString = computed(() => {
+    const parts = [];
+    if (props.showDate) {
+      parts.push(DateTimeUtils.formatDate(dateObj.value));
+    }
+    if (props.showTime) {
+      parts.push(DateTimeUtils.formatTime(dateObj.value, true));
+    }
+    return parts.join(" ");
+  });
 
 </script>
 
diff --git a/app/javascript/components/AppDropdown.vue b/app/javascript/components/AppDropdown.vue
index c37dfb7..7ab9ab3 100644
--- a/app/javascript/components/AppDropdown.vue
+++ b/app/javascript/components/AppDropdown.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="dropdown" :class="{'is-active': open, 'is-hoverable': hover}">
+  <div ref="dropdown" class="dropdown" :class="{'is-active': open, 'is-hoverable': hover}">
     <div class="dropdown-trigger">
       <slot name="button">
         <button type="button" class="button" :class="buttonClass" @click="toggle">
@@ -19,67 +19,63 @@
   </div>
 </template>
 
-<script>
+<script setup>
 
-  export default {
-    props: {
-      open: {
-        required: false,
-        type: Boolean,
-        default: false
-      },
+import { useTemplateRef } from "vue";
+import { onClickOutside } from '@vueuse/core'
 
-      hover: {
-        required: false,
-        type: Boolean,
-        default: false
-      },
+const emit = defineEmits(["close", "open"]);
+const props = defineProps({
+  open: {
+    required: false,
+    type: Boolean,
+    default: false
+  },
 
-      label: {
-        required: false,
-        type: String,
-        default: 'Select'
-      },
+  hover: {
+    required: false,
+    type: Boolean,
+    default: false
+  },
 
-      buttonClass: {
-        required: false,
-        default: ""
-      }
-    },
+  label: {
+    required: false,
+    type: String,
+    default: 'Select'
+  },
 
-    methods: {
-      toggle() {
-        if (this.open) {
-          this.triggerClose();
-        } else {
-          this.triggerOpen();
-        }
-      },
+  buttonClass: {
+    required: false,
+    default: ""
+  }
+});
 
-      triggerOpen() {
-        this.$emit("open");
-      },
+const dropdownElement = useTemplateRef("dropdown");
 
-      triggerClose() {
-        this.$emit("close");
-      },
+onClickOutside(dropdownElement, event => handleOutsideClick(event))
 
-      handleOutsideClick(evt) {
-        if (this.open) {
-          if (!this.$el.contains(evt.target)) {
-            this.triggerClose();
-          }
-        }
-      }
-    },
+function toggle() {
+  if (props.open) {
+    triggerClose();
+  } else {
+    triggerOpen();
+  }
+}
 
-    mounted() {
-      document.addEventListener("click", this.handleOutsideClick);
-    },
+function triggerOpen() {
+  emit("open");
+}
 
-    beforeDestroy() {
-      document.removeEventListener("click", this.handleOutsideClick);
+function triggerClose() {
+  emit("close");
+}
+
+function handleOutsideClick(evt) {
+  if (props.open) {
+    if (!dropdownElement.value.contains(evt.target)) {
+      triggerClose();
     }
   }
+}
 
 </script>
\ No newline at end of file
diff --git a/app/javascript/components/AppExpandTransition.vue b/app/javascript/components/AppExpandTransition.vue
index a83fb30..32c37f3 100644
--- a/app/javascript/components/AppExpandTransition.vue
+++ b/app/javascript/components/AppExpandTransition.vue
@@ -9,95 +9,87 @@
   </transition>
 </template>
 
-<script>
+<script setup>
 
   import TWEEN from '@tweenjs/tween.js';
   import { useGlobalTweenGroup } from "../lib/useGlobalTweenGroup";
 
-  export default {
-    props: {
-      expandTime: {
-        type: Number,
-        default: 250
-      }
-    },
-
-    data() {
-      return {
-        animation: null
-      }
-    },
-
-    methods: {
-      cancel () {
-        if (this.animation) {
-          this.animation.stop();
-          this.animation = null;
-        }
-      },
-
-      enter(element, done) {
-        const width = parseInt(getComputedStyle(element).width);
-        const paddingTop = parseInt(getComputedStyle(element).paddingTop);
-        const paddingBottom = parseInt(getComputedStyle(element).paddingBottom);
-
-        element.style.width = width;
-        element.style.position = 'absolute';
-        element.style.visibility = 'hidden';
-        element.style.height = 'auto';
-
-        const height = parseInt(getComputedStyle(element).height);
-
-        element.style.width = null;
-        element.style.position = null;
-        element.style.visibility = null;
-        element.style.overflow = 'hidden';
-        element.style.height = 0;
-
-        this.animation = new TWEEN.Tween({height: 0, paddingTop: 0, paddingBottom: 0})
-          .to({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom}, this.expandTime)
-          .onUpdate(obj => {
-            element.style.height = obj.height + "px";
-            element.style.paddingBottom = obj.paddingBottom + "px";
-            element.style.paddingTop = obj.paddingTop + "px";
-          })
-          .onComplete(() => {
-            this.animation = null;
-            element.removeAttribute('style');
-            element.style.opacity = 0.99;
-            setTimeout(() => {
-              // Fixes odd drawing bug in Chrome
-              element.style.opacity = 1.0;
-            }, 1000);
-            done();
-          })
-          .group(useGlobalTweenGroup())
-          .start();
-      },
-
-      leave(element, done) {
-        const height = parseInt(getComputedStyle(element).height);
-        const paddingTop = parseInt(getComputedStyle(element).paddingTop);
-        const paddingBottom = parseInt(getComputedStyle(element).paddingBottom);
-
-        element.style.overflow = 'hidden';
-
-        this.animation = new TWEEN.Tween({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom})
-          .to({height: 0, paddingTop: 0, paddingBottom: 0}, this.expandTime)
-          .onUpdate(obj => {
-            element.style.height = obj.height + "px";
-            element.style.paddingBottom = obj.paddingBottom + "px";
-            element.style.paddingTop = obj.paddingTop + "px";
-          })
-          .onComplete(() => {
-            this.animation = null;
-            element.removeAttribute('style');
-            done();
-          })
-          .group(useGlobalTweenGroup())
-          .start();
-      }
+  const props = defineProps({
+    expandTime: {
+      type: Number,
+      default: 250
     }
+  });
+
+  let animation = null;
+
+  function cancel () {
+    if (animation) {
+      animation.stop();
+      animation = null;
+    }
+  }
+
+  function enter(element, done) {
+    const width = parseInt(getComputedStyle(element).width);
+    const paddingTop = parseInt(getComputedStyle(element).paddingTop);
+    const paddingBottom = parseInt(getComputedStyle(element).paddingBottom);
+
+    element.style.width = width;
+    element.style.position = 'absolute';
+    element.style.visibility = 'hidden';
+    element.style.height = 'auto';
+
+    const height = parseInt(getComputedStyle(element).height);
+
+    element.style.width = null;
+    element.style.position = null;
+    element.style.visibility = null;
+    element.style.overflow = 'hidden';
+    element.style.height = 0;
+
+    animation = new TWEEN.Tween({height: 0, paddingTop: 0, paddingBottom: 0})
+        .to({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom}, props.expandTime)
+        .onUpdate(obj => {
+          element.style.height = obj.height + "px";
+          element.style.paddingBottom = obj.paddingBottom + "px";
+          element.style.paddingTop = obj.paddingTop + "px";
+        })
+        .onComplete(() => {
+          animation = null;
+          element.removeAttribute('style');
+          element.style.opacity = 0.99;
+          setTimeout(() => {
+            // Fixes odd drawing bug in Chrome
+            element.style.opacity = 1.0;
+          }, 1000);
+          done();
+        })
+        .group(useGlobalTweenGroup())
+        .start();
+  }
+
+  function leave(element, done) {
+    const height = parseInt(getComputedStyle(element).height);
+    const paddingTop = parseInt(getComputedStyle(element).paddingTop);
+    const paddingBottom = parseInt(getComputedStyle(element).paddingBottom);
+
+    element.style.overflow = 'hidden';
+
+    animation = new TWEEN.Tween({height: height, paddingTop: paddingTop, paddingBottom: paddingBottom})
+        .to({height: 0, paddingTop: 0, paddingBottom: 0}, props.expandTime)
+        .onUpdate(obj => {
+          element.style.height = obj.height + "px";
+          element.style.paddingBottom = obj.paddingBottom + "px";
+          element.style.paddingTop = obj.paddingTop + "px";
+        })
+        .onComplete(() => {
+          animation = null;
+          element.removeAttribute('style');
+          done();
+        })
+        .group(useGlobalTweenGroup())
+        .start();
   }
 
 </script>
diff --git a/app/javascript/components/AppIcon.vue b/app/javascript/components/AppIcon.vue
index bc51e7a..acd4a11 100644
--- a/app/javascript/components/AppIcon.vue
+++ b/app/javascript/components/AppIcon.vue
@@ -6,6 +6,8 @@
 
 <script>
 
+  import { computed } from "vue";
+
   class IconData {
     constructor(iconicIcon, dataAttributes) {
       this.iconicIcon = iconicIcon;
@@ -49,6 +51,7 @@
   };
 
   export default {
+    emits: ["click"],
     props: {
       icon: {
         validator: (i) => iconMap[i] !== undefined
@@ -66,38 +69,21 @@
       }
     },
 
-    data() {
+    setup(props) {
+      const iconData = computed(() => iconMap[props.icon]);
+      const sizeData = computed(() => sizeMap[props.size]);
+      const iconClasses = computed(() => [sizeData.value.bulmaIconClass, sizeData.value.customIconClass]);
+      const iconicSize = computed(() => sizeData.value.iconicSize);
+      const iconicIcon = computed(() => iconData.value.iconicIcon);
+      const iconicAttributes = computed(() => iconData.value.dataAttributes);
+
       return {
-        injectedSvg: null
-      }
-    },
-
-    computed: {
-      iconData() {
-        return iconMap[this.icon];
-      },
-
-      sizeData() {
-        return sizeMap[this.size];
-      },
-
-      iconClasses() {
-        return [
-          this.sizeData.bulmaIconClass,
-          this.sizeData.customIconClass
-        ]
-      },
-
-      iconicSize() {
-        return this.sizeData.iconicSize;
-      },
-
-      iconicIcon() {
-        return this.iconData.iconicIcon;
-      },
-
-      iconicAttributes() {
-        return this.iconData.dataAttributes;
+        iconClasses,
+        iconData,
+        sizeData,
+        iconicAttributes,
+        iconicIcon,
+        iconicSize
       }
     }
   }
diff --git a/app/javascript/components/AppIconicIcon.vue b/app/javascript/components/AppIconicIcon.vue
index 8eae284..e1c1f3a 100644
--- a/app/javascript/components/AppIconicIcon.vue
+++ b/app/javascript/components/AppIconicIcon.vue
@@ -1,9 +1,11 @@
 <template>
-  <svg v-bind="svgAttributes" v-html="svgContent" :class="calculatedClasses"></svg>
+  <svg ref="svg" v-bind="svgAttributes" v-html="svgContent" :class="calculatedClasses"></svg>
 </template>
 
 <script>
 
+  import { computed, nextTick, useTemplateRef, watch } from "vue";
+
   import Caret from "../iconic/svg/smart/caret";
   import Check from "../iconic/svg/smart/check";
   import CircleCheck from "../iconic/svg/smart/circle-check";
@@ -68,29 +70,15 @@
       }
     },
 
-    data() {
-      return {
-        calculatedClasses: []
-      }
-    },
+    setup(props) {
+      const svgElement = useTemplateRef("svg");
+      const svgData = computed(() => iconMap[props.icon]);
+      const svgAttributes = computed(() => svgData.value.attributes);
+      const svgName = computed(() => svgAttributes.value['data-icon']);
+      const svgContent = computed(() => {
+        let content = String(svgData.value.content);
 
-    computed: {
-      svgData() {
-        return iconMap[this.icon];
-      },
-
-      svgAttributes() {
-        return this.svgData.attributes;
-      },
-
-      svgName() {
-        return this.svgAttributes['data-icon'];
-      },
-
-      svgContent() {
-        let content = String(this.svgData.content);
-
-        for (let idRep of this.svgData.idReplacements) {
+        for (let idRep of svgData.value.idReplacements) {
           let newId = `__new_id_${globalIdCounter}`;
           globalIdCounter += 1;
 
@@ -98,63 +86,66 @@
         }
 
         return content;
-      }
-    },
+      });
 
-    methods: {
+      const calculatedClasses = computed(() => {
+        const classes = (svgAttributes.value.class || "").split(" ");
 
-      rebind() {
-        const apis = APIS;
+        classes.push(`iconic-${props.size}`);
 
-        if (apis && this.svgName && apis[this.svgName]) {
-          const iconApi = apis[this.svgName](this.$el);
-          for (let func in iconApi) this.$el[func] = iconApi[func]
-        } else {
-          this.$el.update = function() {}
+        if (props.iconSizeOverride) {
+          classes.push(`iconic-icon-${props.iconSizeOverride}`);
         }
 
-        this.calculatedClasses = (this.svgAttributes.class || "").split(" ");
-
-        this.calculatedClasses.push(`iconic-${this.size}`);
-
-        if (this.iconSizeOverride) {
-          this.calculatedClasses.push(`iconic-icon-${this.iconSizeOverride}`);
+        if (props.displaySizeOverride) {
+          classes.push(`iconic-size-${props.displaySizeOverride}`);
         }
 
-        if (this.displaySizeOverride) {
-          this.calculatedClasses.push(`iconic-size-${this.displaySizeOverride}`);
-        }
+        return classes;
+      });
 
-        this.$el.update();
-      }
-    },
-
-    created() {
-      if (LOADED_APIS[this.svgName] !== true) {
-        for (let sb of this.svgData.scriptBlocks) {
-          try {
-            new Function(sb)(window);
-          } catch (e) {
-            console.log(sb);
-            console.log(e);
+      function ensureSvgApi(name, scripts) {
+        if (!name) { return; }
+        if (LOADED_APIS[name] !== true) {
+          for (let sb of scripts) {
+            try {
+              new Function(sb)(window);
+            } catch (e) {
+              console.log(sb);
+              console.log(e);
+            }
           }
-
+          LOADED_APIS[name] = true;
         }
-        LOADED_APIS[this.svgName] = true;
       }
-    },
 
-    mounted() {
-
-      this.$watch(
-        function() { return [this.$attrs, this.icon, this.fluid] },
-        function() {
-          this.rebind()
-        },
-        {
-          immediate: true
+      function setupSvgApi(name) {
+        const apis = APIS;
+        if (apis && apis[name]) {
+          const iconApi = apis[name](svgElement.value);
+          for (let func in iconApi) svgElement.value[func] = iconApi[func]
+        } else {
+          svgElement.value.update = function() {}
         }
+        svgElement.value.update();
+      }
+
+      watch(
+          () => props.icon,
+          () => {
+            ensureSvgApi(svgName.value, svgData.value.scriptBlocks);
+            nextTick(() => setupSvgApi(svgName.value));
+          },
+          { immediate: true }
       );
+
+      return {
+        svgData,
+        svgAttributes,
+        svgName,
+        svgContent,
+        calculatedClasses
+      };
     }
   }
   
diff --git a/app/javascript/components/AppLoading.vue b/app/javascript/components/AppLoading.vue
index 118b290..fa1732e 100644
--- a/app/javascript/components/AppLoading.vue
+++ b/app/javascript/components/AppLoading.vue
@@ -4,10 +4,7 @@
   </div>
 </template>
 
-<script>
-  export default {
-
-  }
+<script setup>
 </script>
 
 <style lang="scss" scoped>
diff --git a/app/javascript/components/AppModal.vue b/app/javascript/components/AppModal.vue
index 73d8e0d..a0f6649 100644
--- a/app/javascript/components/AppModal.vue
+++ b/app/javascript/components/AppModal.vue
@@ -18,40 +18,30 @@
   </Teleport>
 </template>
 
-<script>
+<script setup>
 
-  import { mapState } from "pinia";
+  import { computed } from "vue";
   import { useAppConfigStore } from "../stores/appConfig";
 
-  export default {
-    emits: ["dismiss"],
+  const emit = defineEmits(["dismiss"]);
 
-    props: {
-      open: {
-        type: Boolean,
-        default: false
-      },
-      title: String,
-      wide: {
-        type: Boolean,
-        default: false
-      }
+  const props = defineProps({
+    open: {
+      type: Boolean,
+      default: false
     },
-
-    computed: {
-      ...mapState(useAppConfigStore, [
-        'error'
-      ])
-    },
-
-    methods: {
-      close() {
-        this.$emit("dismiss");
-      }
-    },
-
-    components: {
+    title: String,
+    wide: {
+      type: Boolean,
+      default: false
     }
+  });
+
+  const appConfig = useAppConfigStore();
+  const error = computed(() => appConfig.error);
+
+  function close() {
+    emit("dismiss");
   }
 
 </script>
diff --git a/app/javascript/components/AppNavbar.vue b/app/javascript/components/AppNavbar.vue
index d2e91db..d9a7e29 100644
--- a/app/javascript/components/AppNavbar.vue
+++ b/app/javascript/components/AppNavbar.vue
@@ -51,47 +51,27 @@
   </nav>
 </template>
 
-<script>
+<script setup>
 
+  import { ref, watch } from "vue";
   import UserLogin from "./UserLogin";
-  import { mapState } from "pinia";
+  import { storeToRefs } from "pinia";
   import { useAppConfigStore } from "../stores/appConfig";
   import { swUpdate } from "../lib/ServiceWorker";
+  import { useRoute } from "vue-router";
 
-  export default {
-    data() {
-      return {
-        menuActive: false
-      };
-    },
+  const appConfig = useAppConfigStore();
+  const menuActive = ref(false);
+  const route = useRoute();
+  const { isAdmin, isLoggedIn, updateAvailable, user } = storeToRefs(appConfig);
 
-    computed: {
-      ...mapState(useAppConfigStore, [
-        'route',
-        'user',
-        'updateAvailable'
-      ])
-    },
-
-    methods: {
-      updateApp() {
-        swUpdate();
-      }
-    },
-
-    watch: {
-      route() {
-        this.menuActive = false;
-      },
-
-      user() {
-        this.menuActive = false;
-      }
-    },
-
-    components: {
-      UserLogin
-    }
+  function updateApp() {
+    swUpdate();
   }
 
+  watch(
+      () => [route, appConfig.user],
+      () => menuActive.value = false
+  );
+
 </script>
\ No newline at end of file
diff --git a/app/javascript/lib/useCheckAuthentication.js b/app/javascript/lib/useCheckAuthentication.js
new file mode 100644
index 0000000..5630eae
--- /dev/null
+++ b/app/javascript/lib/useCheckAuthentication.js
@@ -0,0 +1,12 @@
+import { useAppConfigStore } from "../stores/appConfig";
+
+export function useCheckAuthentication(loadResource) {
+  const appConfig = useAppConfigStore();
+  const checkAuthentication = function() {
+    return loadResource(appConfig.updateCurrentUser());
+  }
+
+  return {
+    checkAuthentication
+  }
+}
diff --git a/app/javascript/lib/useLoadResource.js b/app/javascript/lib/useLoadResource.js
new file mode 100644
index 0000000..f682015
--- /dev/null
+++ b/app/javascript/lib/useLoadResource.js
@@ -0,0 +1,27 @@
+import { computed, ref } from "vue";
+import { useAppConfigStore } from "../stores/appConfig";
+
+export function useLoadResource() {
+  const appConfig = useAppConfigStore();
+  const localLoadingCount = ref(0);
+  const localLoading = computed(() => localLoadingCount.value > 0);
+
+  const loadResource = async (promise) => {
+    appConfig.setLoading(true);
+    localLoadingCount.value = localLoadingCount.value + 1;
+    try {
+      return await promise;
+    } catch (error) {
+      appConfig.setError(error);
+    } finally {
+      appConfig.setLoading(false);
+      localLoadingCount.value = localLoadingCount.value - 1;
+    }
+  };
+
+  return {
+    loadResource,
+    localLoading,
+    localLoadingCount
+  };
+}
diff --git a/package.json b/package.json
index e5a1b90..c41240f 100644
--- a/package.json
+++ b/package.json
@@ -24,6 +24,7 @@
     "@tweenjs/tween.js": "^25.0.0",
     "@types/babel__core": "7",
     "@types/webpack": "5",
+    "@vueuse/core": "^11.1.0",
     "babel-loader": "8",
     "bulma": "^1.0.2",
     "cheerio": "^1.0.0",
diff --git a/yarn.lock b/yarn.lock
index 2261eb0..446890f 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1895,6 +1895,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/web-bluetooth@npm:^0.0.20":
+  version: 0.0.20
+  resolution: "@types/web-bluetooth@npm:0.0.20"
+  checksum: 10c0/3a49bd9396506af8f1b047db087aeeea9fe4301b7fad4fe06ae0f6e00d331138caae878fd09e6410658b70b4aaf10e4b191c41c1a5ff72211fe58da290c7d003
+  languageName: node
+  linkType: hard
+
 "@types/webpack@npm:5":
   version: 5.28.5
   resolution: "@types/webpack@npm:5.28.5"
@@ -2038,6 +2045,34 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@vueuse/core@npm:^11.1.0":
+  version: 11.1.0
+  resolution: "@vueuse/core@npm:11.1.0"
+  dependencies:
+    "@types/web-bluetooth": "npm:^0.0.20"
+    "@vueuse/metadata": "npm:11.1.0"
+    "@vueuse/shared": "npm:11.1.0"
+    vue-demi: "npm:>=0.14.10"
+  checksum: 10c0/ecbeb277de81608c78aa4ebc7e4cae8a6d5f0650e2ee5ed71bf387676df4725bd2e8bcfeadcc0798ab6850e6317ff79822ef32adef4646184086764fe7f684ac
+  languageName: node
+  linkType: hard
+
+"@vueuse/metadata@npm:11.1.0":
+  version: 11.1.0
+  resolution: "@vueuse/metadata@npm:11.1.0"
+  checksum: 10c0/5063d8b81c31e3c7ea24ff7fad0d0ec43a951540066329f36daf96fc0e8780ed902282d36c6df856288f07d0c5edb525f551cf9e8b84837782e2ac0a1988c498
+  languageName: node
+  linkType: hard
+
+"@vueuse/shared@npm:11.1.0":
+  version: 11.1.0
+  resolution: "@vueuse/shared@npm:11.1.0"
+  dependencies:
+    vue-demi: "npm:>=0.14.10"
+  checksum: 10c0/ed9a4625537825fe783c66823592560696604f5301e8dcef12dda3a816b85334e7c70ccbaaf1c0c62ea2b8efcce58893b780210162374d2e9bc1e4c5889e066b
+  languageName: node
+  linkType: hard
+
 "@webassemblyjs/ast@npm:1.12.1, @webassemblyjs/ast@npm:^1.12.1":
   version: 1.12.1
   resolution: "@webassemblyjs/ast@npm:1.12.1"
@@ -2419,6 +2454,7 @@ __metadata:
     "@tweenjs/tween.js": "npm:^25.0.0"
     "@types/babel__core": "npm:7"
     "@types/webpack": "npm:5"
+    "@vueuse/core": "npm:^11.1.0"
     babel-loader: "npm:8"
     bulma: "npm:^1.0.2"
     cheerio: "npm:^1.0.0"
@@ -6606,7 +6642,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"vue-demi@npm:^0.14.10":
+"vue-demi@npm:>=0.14.10, vue-demi@npm:^0.14.10":
   version: 0.14.10
   resolution: "vue-demi@npm:0.14.10"
   peerDependencies: