More Vue fixes.

frontend/vue/components/Admin/ApiKeys.vue

@@ -55,7 +55,7 @@ import {ref} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import InfoCard from "~/components/Common/InfoCard.vue";
 import Icon from "~/components/Common/Icon.vue";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 import useHasDatatable from "~/functions/useHasDatatable";
 
 defineProps({
@@ -94,8 +94,7 @@ const fields = ref([
 const $datatable = ref();
 const {relist} = useHasDatatable($datatable);
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete API Key?'),
     relist
 );

frontend/vue/components/Admin/Backups.vue

@@ -169,7 +169,7 @@ import {onMounted, ref} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     listUrl: {
@@ -280,8 +280,7 @@ const doRunBackup = () => {
     $runBackupModal.value.open();
 };
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Backup?'),
     relist,
 );

frontend/vue/components/Admin/CustomFields.vue

@@ -73,7 +73,7 @@ import {useTranslate} from "~/vendor/gettext";
 import {ref} from "vue";
 import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     listUrl: {
@@ -117,8 +117,7 @@ const {relist} = useHasDatatable($dataTable);
 const $editModal = ref(); // EditModal
 const {doCreate, doEdit} = useHasEditModal($editModal);
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Custom Field?'),
     relist
 );

frontend/vue/components/Admin/Permissions.vue

@@ -90,7 +90,7 @@ import {useTranslate} from "~/vendor/gettext";
 import {ref} from "vue";
 import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     listUrl: {
@@ -141,8 +141,7 @@ const {relist} = useHasDatatable($datatable);
 const $editModal = ref(); // Template Ref
 const {doCreate, doEdit} = useHasEditModal($editModal);
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Role?'),
     relist
 );

frontend/vue/components/Admin/Stations.vue

@@ -90,7 +90,7 @@ import {useTranslate} from "~/vendor/gettext";
 import {ref} from "vue";
 import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     ...stationFormProps,
@@ -153,8 +153,7 @@ const doClone = (stationName, url) => {
     $cloneModal.value.create(stationName, url);
 };
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Station?'),
     relist
 );

frontend/vue/components/Admin/StorageLocations.vue

@@ -102,7 +102,7 @@ import {computed, ref} from "vue";
 import {useTranslate} from "~/vendor/gettext";
 import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     listUrl: {
@@ -188,8 +188,7 @@ const getProgressVariant = (percent) => {
     }
 };
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Storage Location?'),
     relist
 );

frontend/vue/components/Admin/Users.vue

@@ -94,7 +94,7 @@ import {useTranslate} from "~/vendor/gettext";
 import {ref} from "vue";
 import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     listUrl: {
@@ -121,8 +121,7 @@ const {relist} = useHasDatatable($datatable);
 const $editModal = ref(); // Template Ref
 const {doCreate, doEdit} = useHasEditModal($editModal);
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete User?'),
     relist
 );

frontend/vue/components/Stations/HlsStreams.vue

@@ -81,7 +81,7 @@ import {ref} from "vue";
 import {mayNeedRestartProps, useMayNeedRestart} from "~/functions/useMayNeedRestart";
 import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     ...mayNeedRestartProps,
@@ -114,10 +114,9 @@ const {relist} = useHasDatatable($dataTable);
 const $editModal = ref(); // EditModal
 const {doCreate, doEdit} = useHasEditModal($editModal);
 
-const {mayNeedRestart, needsRestart} = useMayNeedRestart(props.restartStatusUrl);
+const {mayNeedRestart, needsRestart} = useMayNeedRestart(props);
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete HLS Stream?'),
     () => {
         needsRestart();

frontend/vue/components/Stations/LiquidsoapConfig.vue

@@ -115,7 +115,7 @@ const {form, resetForm, v$, ifValid} = useVuelidateOnForm(validations, blankForm
 
 const loading = ref(true);
 
-const {mayNeedRestart} = useMayNeedRestart(props.restartStatusUrl);
+const {mayNeedRestart} = useMayNeedRestart(props);
 
 const {axios} = useAxios();
 

frontend/vue/components/Stations/Mounts.vue

@@ -93,7 +93,7 @@ import {ref} from "vue";
 import showFormatAndBitrate from "~/functions/showFormatAndBitrate";
 import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     ...mayNeedRestartProps,
@@ -129,10 +129,9 @@ const {relist} = useHasDatatable($dataTable);
 const $editModal = ref(); // EditModal
 const {doCreate, doEdit} = useHasEditModal($editModal);
 
-const {needsRestart, mayNeedRestart} = useMayNeedRestart(props.restartStatusUrl);
+const {needsRestart, mayNeedRestart} = useMayNeedRestart(props);
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Mount Point?'),
     () => {
         needsRestart();

frontend/vue/components/Stations/Playlists.vue

@@ -233,7 +233,7 @@ import useHasEditModal from "~/functions/useHasEditModal";
 import {mayNeedRestartProps, useMayNeedRestart} from "~/functions/useMayNeedRestart";
 import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     ...mayNeedRestartProps,
@@ -363,7 +363,7 @@ const doClone = (name, url) => {
 const {
     mayNeedRestart: originalMayNeedRestart,
     needsRestart: originalNeedsRestart
-} = useMayNeedRestart(props.restartStatusUrl);
+} = useMayNeedRestart(props);
 
 const mayNeedRestart = () => {
     if (!props.useManualAutoDj) {
@@ -395,8 +395,7 @@ const doModify = (url) => {
     });
 };
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Playlist?'),
     () => {
         relist();

frontend/vue/components/Stations/Queue.vue

@@ -78,7 +78,7 @@ import {DateTime} from 'luxon';
 import {useAzuraCast} from "~/vendor/azuracast";
 import {useTranslate} from "~/vendor/gettext";
 import {ref} from "vue";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 import useHasDatatable from "~/functions/useHasDatatable";
 import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
@@ -126,8 +126,7 @@ const doShowLogs = (logs) => {
     $logsModal.value?.show(logs);
 };
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Queue Item?'),
     relist
 );

frontend/vue/components/Stations/Remotes.vue

@@ -92,7 +92,7 @@ import {ref} from "vue";
 import showFormatAndBitrate from "~/functions/showFormatAndBitrate";
 import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     ...mayNeedRestartProps,
@@ -116,10 +116,9 @@ const {relist} = useHasDatatable($dataTable);
 const $editModal = ref(); // EditModal
 const {doCreate, doEdit} = useHasEditModal($editModal);
 
-const {mayNeedRestart, needsRestart} = useMayNeedRestart(props.restartStatusUrl);
+const {mayNeedRestart, needsRestart} = useMayNeedRestart(props);
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Remote Relay?'),
     () => {
         needsRestart();

frontend/vue/components/Stations/SftpUsers.vue

@@ -90,7 +90,7 @@ import {useTranslate} from "~/vendor/gettext";
 import {ref} from "vue";
 import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     listUrl: {
@@ -116,8 +116,7 @@ const {relist} = useHasDatatable($datatable);
 const $editModal = ref(); // Template Ref
 const {doCreate, doEdit} = useHasEditModal($editModal);
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete SFTP User?'),
     relist
 );

frontend/vue/components/Stations/StereoToolConfig.vue

@@ -99,7 +99,7 @@ const props = defineProps({
 
 const hasStereoToolConfiguration = ref(props.recordHasStereoToolConfiguration);
 
-const {mayNeedRestart} = useMayNeedRestart(props.restartStatusUrl);
+const {mayNeedRestart} = useMayNeedRestart(props);
 
 const onFileSuccess = () => {
     mayNeedRestart();

frontend/vue/components/Stations/Streamers.vue

@@ -130,7 +130,7 @@ import {useTranslate} from "~/vendor/gettext";
 import {ref} from "vue";
 import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     listUrl: {
@@ -181,8 +181,7 @@ const doShowBroadcasts = (url) => {
     $broadcastsModal.value.open(url);
 };
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Streamer?'),
     relist
 );

frontend/vue/components/Stations/Webhooks.vue

@@ -109,7 +109,7 @@ import useHasDatatable from "~/functions/useHasDatatable";
 import useHasEditModal from "~/functions/useHasEditModal";
 import {useNotify} from "~/vendor/bootstrapVue";
 import {useAxios} from "~/vendor/axios";
-import confirmAndDelete from "~/functions/confirmAndDelete";
+import useConfirmAndDelete from "~/functions/useConfirmAndDelete";
 
 const props = defineProps({
     listUrl: {
@@ -206,8 +206,7 @@ const doTest = (url) => {
     });
 };
 
-const doDelete = (url) => confirmAndDelete(
-    url,
+const {doDelete} = useConfirmAndDelete(
     $gettext('Delete Web Hook?'),
     relist
 );

frontend/vue/functions/confirmAndDelete.js

@@ -1,29 +0,0 @@
-import {useSweetAlert} from "~/vendor/sweetalert";
-import {useNotify} from "~/vendor/bootstrapVue";
-import {useAxios} from "~/vendor/axios";
-
-export default function confirmAndDelete(
-    deleteUrl,
-    confirmMessage,
-    onSuccess = null
-) {
-    const {confirmDelete} = useSweetAlert();
-    const {wrapWithLoading, notifySuccess} = useNotify();
-    const {axios} = useAxios();
-
-    confirmDelete({
-        title: confirmMessage
-    }).then((result) => {
-        if (result.value) {
-            wrapWithLoading(
-                axios.delete(deleteUrl)
-            ).then((resp) => {
-                notifySuccess(resp.data.message);
-
-                if (typeof onSuccess === 'function') {
-                    onSuccess(resp.data);
-                }
-            });
-        }
-    });
-}

frontend/vue/functions/useConfirmAndDelete.js

@@ -0,0 +1,34 @@
+import {useSweetAlert} from "~/vendor/sweetalert";
+import {useNotify} from "~/vendor/bootstrapVue";
+import {useAxios} from "~/vendor/axios";
+
+export default function useConfirmAndDelete(
+    confirmMessage,
+    onSuccess = null
+) {
+    const {confirmDelete} = useSweetAlert();
+    const {wrapWithLoading, notifySuccess} = useNotify();
+    const {axios} = useAxios();
+
+    const doDelete = (deleteUrl) => {
+        confirmDelete({
+            title: confirmMessage
+        }).then((result) => {
+            if (result.value) {
+                wrapWithLoading(
+                    axios.delete(deleteUrl)
+                ).then((resp) => {
+                    notifySuccess(resp.data.message);
+
+                    if (typeof onSuccess === 'function') {
+                        onSuccess(resp.data);
+                    }
+                });
+            }
+        });
+    };
+
+    return {
+        doDelete
+    };
+}

frontend/vue/functions/useHasEditModal.js

@@ -10,6 +10,5 @@ export default function useHasEditModal($modalRef) {
     return {
         doCreate,
         doEdit
-    }
-
+    };
 }

frontend/vue/functions/useMayNeedRestart.js

@@ -1,4 +1,5 @@
 import {useAxios} from "~/vendor/axios";
+import {toRef} from "vue";
 
 export const mayNeedRestartProps = {
     restartStatusUrl: {
@@ -17,12 +18,14 @@ export function useNeedsRestart() {
     };
 }
 
-export function useMayNeedRestart(restartStatusUrl) {
+export function useMayNeedRestart(props) {
+    const restartStatusUrl = toRef(props, 'restartStatusUrl');
+
     const {needsRestart} = useNeedsRestart();
     const {axios} = useAxios();
 
     const mayNeedRestart = () => {
-        axios.get(restartStatusUrl).then((resp) => {
+        axios.get(restartStatusUrl.value).then((resp) => {
             if (resp.data.needs_restart) {
                 needsRestart();
             }