Minor: Migrate to script setup

assets/vue/components/glossary/GlossaryExportForm.vue

@@ -13,22 +13,20 @@
 </template>
 
 
-<script>
+<script setup>
-import axios from "axios";
+import axios from "axios"
-import { ENTRYPOINT } from "../../config/entrypoint";
+import {ENTRYPOINT} from "../../config/entrypoint"
-import { RESOURCE_LINK_PUBLISHED } from "../resource_links/visibility";
+import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility"
-import { useRoute, useRouter } from 'vue-router';
+import {useRoute, useRouter} from 'vue-router'
-import { useI18n } from "vue-i18n";
+import {useI18n} from "vue-i18n"
-import { ref, onMounted } from "vue";
+import {ref, onMounted} from "vue"
 
-export default {
+const route = useRoute()
-  setup() {
+const router = useRouter()
-    const route = useRoute();
+const {t} = useI18n()
-    const router = useRouter();
-    const { t } = useI18n();
 
-    const selectedFormat = ref('csv');
+const selectedFormat = ref('csv')
-    const parentResourceNodeId = ref(Number(route.params.node));
+const parentResourceNodeId = ref(Number(route.params.node))
 const resourceLinkList = ref(
   JSON.stringify([
     {
@@ -40,34 +38,27 @@ export default {
 );
 
 const submitForm = () => {
-      const format = selectedFormat.value;
+  const format = selectedFormat.value
 
-      const formData = new FormData();
+  const formData = new FormData()
-      formData.append('format', format);
+  formData.append('format', format)
-      formData.append("sid", route.query.sid);
+  formData.append("sid", route.query.sid)
-      formData.append("cid", route.query.cid);
+  formData.append("cid", route.query.cid)
 
-      const endpoint = `${ENTRYPOINT}glossaries/export`;
+  const endpoint = `${ENTRYPOINT}glossaries/export`
   axios.post(endpoint, formData, {responseType: 'blob'})
     .then(response => {
-          const fileUrl = window.URL.createObjectURL(new Blob([response.data]));
+      const fileUrl = window.URL.createObjectURL(new Blob([response.data]))
-          const link = document.createElement('a');
+      const link = document.createElement('a')
       link.href = fileUrl;
-          link.setAttribute('download', `glossary.${format}`);
+      link.setAttribute('download', `glossary.${format}`)
-          document.body.appendChild(link);
+      document.body.appendChild(link)
       link.click();
-          document.body.removeChild(link);
+      document.body.removeChild(link)
     })
     .catch(error => {
-          console.error('Error exporting glossary:', error);
+      console.error('Error exporting glossary:', error)
-        });
+    })
-    };
-
-    return {
-      selectedFormat,
-      submitForm,
-    };
-  },
 };
 </script>
 

assets/vue/components/glossary/GlossaryForm.vue

@@ -3,7 +3,8 @@
     <form @submit.prevent="submitGlossaryForm" name="glossary" id="glossary">
       <div class="field">
         <div class="p-float-label">
-          <input v-model="formData.name" id="glossary_title" name="name" type="text" class="p-inputtext p-component p-filled" />
+          <input v-model="formData.name" id="glossary_title" name="name" type="text"
+                 class="p-inputtext p-component p-filled"/>
 
           <label for="glossary_title">
             <span class="form_required">*</span>
@@ -46,7 +47,7 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import axios from "axios";
 import {ENTRYPOINT} from "../../config/entrypoint";
 import {useRoute, useRouter} from 'vue-router';
@@ -54,17 +55,16 @@ import { useI18n } from "vue-i18n";
 import {ref, onMounted} from "vue";
 import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility";
 
-export default {
+const route = useRoute()
-  props: {
+const router = useRouter()
+const {t} = useI18n()
+
+const props = defineProps({
   termId: {
     type: Number,
     default: null
   }
-  },
+})
-  setup(props) {
-    const route = useRoute();
-    const router = useRouter();
-    const { t } = useI18n();
 
 const parentResourceNodeId = ref(Number(route.params.node));
 
@@ -76,30 +76,30 @@ export default {
       visibility: RESOURCE_LINK_PUBLISHED, // visible by default
     },
   ])
-    );
+)
 
 const formData = ref({
   name: '',
   description: '',
-    });
+})
+
+onMounted(() => {
+  fetchTerm();
+})
 
 const fetchTerm = () => {
   if (props.termId) {
     axios.get(ENTRYPOINT + 'glossaries/' + props.termId)
       .then(response => {
-            const glossary = response.data;
+        const glossary = response.data
-            formData.value.name = glossary.name;
+        formData.value.name = glossary.name
-            formData.value.description = glossary.description;
+        formData.value.description = glossary.description
       })
       .catch(error => {
-            console.error('Error fetching link:', error);
+        console.error('Error fetching link:', error)
-          });
+      })
+  }
 }
-    };
-
-    onMounted(() => {
-      fetchTerm();
-    });
 
 const submitGlossaryForm = () => {
 
@@ -110,28 +110,28 @@ export default {
     resourceLinkList: resourceLinkList.value,
     sid: route.query.sid,
     cid: route.query.cid,
-      };
+  }
 
   if (props.termId) {
-        const endpoint = `${ENTRYPOINT}glossaries/${props.termId}`;
+    const endpoint = `${ENTRYPOINT}glossaries/${props.termId}`
     axios.put(endpoint, postData)
       .then(response => {
-            console.log('Glossary updated:', response.data);
+        console.log('Glossary updated:', response.data)
 
         router.push({
           name: "GlossaryList",
           query: route.query,
-            });
+        })
       })
       .catch(error => {
         console.error('Error updating Glossary:', error);
-          });
+      })
 
   } else {
-        const endpoint = `${ENTRYPOINT}glossaries`;
+    const endpoint = `${ENTRYPOINT}glossaries`
     axios.post(endpoint, postData)
       .then(response => {
-            console.log('Glossary created:', response.data);
+        console.log('Glossary created:', response.data)
 
         router.push({
           name: "GlossaryList",
@@ -139,16 +139,8 @@ export default {
         });
       })
       .catch(error => {
-            console.error('Error creating Glossary:', error);
+        console.error('Error creating Glossary:', error)
-          });
+      })
-
+  }
 }
-    };
-
-    return {
-      formData,
-      submitGlossaryForm,
-    };
-  },
-};
 </script>

assets/vue/components/glossary/GlossaryImportForm.vue

@@ -22,7 +22,8 @@
     <div class="field 2">
       <div class="8">
         <div id="replace" class="field-checkbox">
-          <input class="appearance-none checked:bg-support-4 outline-none" name="replace" type="checkbox" value="1" id="qf_5b8df0" v-model="replace" />
+          <input class="appearance-none checked:bg-support-4 outline-none" name="replace" type="checkbox" value="1"
+                 id="qf_5b8df0" v-model="replace"/>
           <label for="qf_5b8df0" class="">
             Delete all terms before import.
           </label>
@@ -32,7 +33,8 @@
     <div class="field 2">
       <div class="8">
         <div id="update" class="field-checkbox">
-          <input class="appearance-none checked:bg-support-4 outline-none" name="update" type="checkbox" value="1" id="qf_594e6e" v-model="update" />
+          <input class="appearance-none checked:bg-support-4 outline-none" name="update" type="checkbox" value="1"
+                 id="qf_594e6e" v-model="update"/>
           <label for="qf_594e6e" class="">
             Update existing terms.
           </label>
@@ -49,7 +51,7 @@
   </form>
 </template>
 
-<script>
+<script setup>
 import axios from 'axios';
 import {ENTRYPOINT} from "../../config/entrypoint";
 import {useRoute, useRouter} from "vue-router";
@@ -57,17 +59,15 @@ import { useI18n } from "vue-i18n";
 import {ref} from "vue";
 import {RESOURCE_LINK_PUBLISHED} from "../resource_links/visibility";
 
-export default {
+const route = useRoute()
-  setup() {
+const router = useRouter()
-    const route = useRoute();
+const {t} = useI18n()
-    const router = useRouter();
-    const { t } = useI18n();
 
-    const fileInputRef = ref(null);
+const fileInputRef = ref(null)
-    const fileType = ref("csv");
+const fileType = ref("csv")
-    const replace = ref(false);
+const replace = ref(false)
-    const update = ref(false);
+const update = ref(false)
-    const parentResourceNodeId = ref(Number(route.params.node));
+const parentResourceNodeId = ref(Number(route.params.node))
 
 const resourceLinkList = ref(
   JSON.stringify([
@@ -77,51 +77,41 @@ export default {
       visibility: RESOURCE_LINK_PUBLISHED, // visible by default
     },
   ])
-    );
+)
 
 const submitForm = async () => {
-      const fileInput = document.getElementById('glossary_file');
+  const fileInput = document.getElementById('glossary_file')
-      const file = fileInput.files[0];
+  const file = fileInput.files[0]
-      const formData = new FormData();
+  const formData = new FormData()
-      formData.append("file", file);
+  formData.append("file", file)
-      formData.append("file_type", fileType.value);
+  formData.append("file_type", fileType.value)
-      formData.append("replace", replace.value);
+  formData.append("replace", replace.value)
-      formData.append("update", update.value);
+  formData.append("update", update.value)
-      formData.append("sid", route.query.sid);
+  formData.append("sid", route.query.sid)
-      formData.append("cid", route.query.cid);
+  formData.append("cid", route.query.cid)
-      formData.append("parentResourceNodeId", parentResourceNodeId.value);
+  formData.append("parentResourceNodeId", parentResourceNodeId.value)
-      formData.append("resourceLinkList", resourceLinkList.value);
+  formData.append("resourceLinkList", resourceLinkList.value)
 
-      console.log('formData', formData);
+  console.log('formData', formData)
 
-      console.log(ENTRYPOINT + 'glossaries/import');
+  console.log(ENTRYPOINT + 'glossaries/import')
   try {
     // eslint-disable-next-line no-unused-vars
     const response = await axios.post(ENTRYPOINT + 'glossaries/import', formData, {
       headers: {
         'Content-Type': 'multipart/form-data'
       }
-        });
+    })
 
     router.push({
       name: "GlossaryList",
       query: route.query,
-        });
+    })
   } catch (error) {
-        fileInputRef.value = null;
+    fileInputRef.value = null
-        fileType.value = "csv";
+    fileType.value = "csv"
-        replace.value = false;
+    replace.value = false
-        update.value = false;
+    update.value = false
+  }
 }
-    };
-
-    return {
-      fileInputRef,
-      fileType,
-      replace,
-      update,
-      submitForm,
-    };
-  },
-};
 </script>

assets/vue/components/glossary/GlossaryLayout.vue

@@ -2,8 +2,5 @@
   <router-view></router-view>
 </template>
 
-<script>
+<script setup>
-export default {
-  name: 'GlossaryLayout'
-}
 </script>

assets/vue/views/glossary/GlossaryExport.vue

@@ -8,30 +8,19 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import GlossaryExportForm from '../../components/glossary/GlossaryExportForm.vue';
+import GlossaryExportForm from '../../components/glossary/GlossaryExportForm.vue'
-import {useRoute, useRouter} from "vue-router";
+import {useRoute, useRouter} from "vue-router"
 
-export default {
+const router = useRouter()
-  components: {
+const route = useRoute()
-    GlossaryExportForm
-  },
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
 
 const goBack = () => {
   router.push({
     name: "GlossaryList",
     query: route.query,
-      });
+  })
-    };
+}
-
-    return {
-      goBack,
-    };
-  },
-};
 </script>
 
 <style scoped>

assets/vue/views/glossary/GlossaryImport.vue

@@ -8,28 +8,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import GlossaryImportForm from "../../components/glossary/GlossaryImportForm.vue";
+import GlossaryImportForm from "../../components/glossary/GlossaryImportForm.vue"
-import {useRoute, useRouter} from "vue-router";
+import {useRoute, useRouter} from "vue-router"
 
-export default {
+const router = useRouter()
-  components: {
+const route = useRoute()
-    GlossaryImportForm,
-  },
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
 
 const goBack = () => {
   router.push({
     name: "GlossaryList",
     query: route.query,
-      });
+  })
-    };
+}
-
-    return {
-      goBack,
-    };
-  },
-};
 </script>

assets/vue/views/glossary/GlossaryTermCreate.vue

@@ -8,28 +8,17 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import GlossaryForm from "../../components/glossary/GlossaryForm.vue";
+import GlossaryForm from "../../components/glossary/GlossaryForm.vue"
-import { useRouter, useRoute } from 'vue-router';
+import { useRouter, useRoute } from 'vue-router'
 
-export default {
+const router = useRouter()
-  components: {
+const route = useRoute()
-    GlossaryForm,
-  },
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
 
 const goBack = () => {
   router.push({
     name: "GlossaryList",
     query: route.query,
-      });
+  })
-    };
+}
-
-    return {
-      goBack,
-    };
-  },
-};
 </script>

assets/vue/views/glossary/GlossaryTermUpdate.vue

@@ -8,33 +8,20 @@
   </div>
 </template>
 
-<script>
+<script setup>
-import GlossaryForm from "../../components/glossary/GlossaryForm.vue";
+import GlossaryForm from "../../components/glossary/GlossaryForm.vue"
-import {useRoute, useRouter} from "vue-router";
+import {useRoute, useRouter} from "vue-router"
+import {computed} from "vue"
 
-export default {
+const router = useRouter()
-  components: {
+const route = useRoute()
-    GlossaryForm,
+
-  },
+const termId = computed(() => route.params.id)
-  setup() {
-    const router = useRouter();
-    const route = useRoute();
 
 const goBack = () => {
   router.push({
     name: "GlossaryList",
     query: route.query,
-      });
+  })
-    };
+}
-
-    return {
-      goBack,
-    };
-  },
-  computed: {
-    termId() {
-      return this.$route.params.id;
-    },
-  },
-};
 </script>