From e13e6c5c0a7ffb74fe411871c3de6d8b4b09838a Mon Sep 17 00:00:00 2001 From: Buster Neece Date: Sun, 8 Jan 2023 21:56:44 -0600 Subject: [PATCH] More Vue fixes. --- frontend/vue/components/Admin/ApiKeys.vue | 5 ++- frontend/vue/components/Admin/Backups.vue | 5 ++- .../vue/components/Admin/CustomFields.vue | 5 ++- frontend/vue/components/Admin/Permissions.vue | 5 ++- frontend/vue/components/Admin/Stations.vue | 5 ++- .../vue/components/Admin/StorageLocations.vue | 5 ++- frontend/vue/components/Admin/Users.vue | 5 ++- .../vue/components/Stations/HlsStreams.vue | 7 ++-- .../components/Stations/LiquidsoapConfig.vue | 2 +- frontend/vue/components/Stations/Mounts.vue | 7 ++-- .../vue/components/Stations/Playlists.vue | 7 ++-- frontend/vue/components/Stations/Queue.vue | 5 ++- frontend/vue/components/Stations/Remotes.vue | 7 ++-- .../vue/components/Stations/SftpUsers.vue | 5 ++- .../components/Stations/StereoToolConfig.vue | 2 +- .../vue/components/Stations/Streamers.vue | 5 ++- frontend/vue/components/Stations/Webhooks.vue | 5 ++- frontend/vue/functions/confirmAndDelete.js | 29 ---------------- frontend/vue/functions/useConfirmAndDelete.js | 34 +++++++++++++++++++ frontend/vue/functions/useHasEditModal.js | 3 +- frontend/vue/functions/useMayNeedRestart.js | 7 ++-- 21 files changed, 76 insertions(+), 84 deletions(-) delete mode 100644 frontend/vue/functions/confirmAndDelete.js create mode 100644 frontend/vue/functions/useConfirmAndDelete.js diff --git a/frontend/vue/components/Admin/ApiKeys.vue b/frontend/vue/components/Admin/ApiKeys.vue index 764296c4c..4a4ad8bd5 100644 --- a/frontend/vue/components/Admin/ApiKeys.vue +++ b/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 ); diff --git a/frontend/vue/components/Admin/Backups.vue b/frontend/vue/components/Admin/Backups.vue index d183a220a..c74499cf1 100644 --- a/frontend/vue/components/Admin/Backups.vue +++ b/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, ); diff --git a/frontend/vue/components/Admin/CustomFields.vue b/frontend/vue/components/Admin/CustomFields.vue index 3e9f07a75..bd33c9d1e 100644 --- a/frontend/vue/components/Admin/CustomFields.vue +++ b/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 ); diff --git a/frontend/vue/components/Admin/Permissions.vue b/frontend/vue/components/Admin/Permissions.vue index 5e75f6efb..4cff8eeaf 100644 --- a/frontend/vue/components/Admin/Permissions.vue +++ b/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 ); diff --git a/frontend/vue/components/Admin/Stations.vue b/frontend/vue/components/Admin/Stations.vue index 228bcdf8e..211b43286 100644 --- a/frontend/vue/components/Admin/Stations.vue +++ b/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 ); diff --git a/frontend/vue/components/Admin/StorageLocations.vue b/frontend/vue/components/Admin/StorageLocations.vue index 1f9a9cd50..4b8c898b8 100644 --- a/frontend/vue/components/Admin/StorageLocations.vue +++ b/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 ); diff --git a/frontend/vue/components/Admin/Users.vue b/frontend/vue/components/Admin/Users.vue index 8ebe0ce07..937a83494 100644 --- a/frontend/vue/components/Admin/Users.vue +++ b/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 ); diff --git a/frontend/vue/components/Stations/HlsStreams.vue b/frontend/vue/components/Stations/HlsStreams.vue index 7465f8498..9a87aa2f9 100644 --- a/frontend/vue/components/Stations/HlsStreams.vue +++ b/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(); diff --git a/frontend/vue/components/Stations/LiquidsoapConfig.vue b/frontend/vue/components/Stations/LiquidsoapConfig.vue index 823f6287e..cb5257b4f 100644 --- a/frontend/vue/components/Stations/LiquidsoapConfig.vue +++ b/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(); diff --git a/frontend/vue/components/Stations/Mounts.vue b/frontend/vue/components/Stations/Mounts.vue index bd5462f62..4c79fb0b5 100644 --- a/frontend/vue/components/Stations/Mounts.vue +++ b/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(); diff --git a/frontend/vue/components/Stations/Playlists.vue b/frontend/vue/components/Stations/Playlists.vue index 727b23266..a024e2eaa 100644 --- a/frontend/vue/components/Stations/Playlists.vue +++ b/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(); diff --git a/frontend/vue/components/Stations/Queue.vue b/frontend/vue/components/Stations/Queue.vue index 69945ed9c..135d8f822 100644 --- a/frontend/vue/components/Stations/Queue.vue +++ b/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 ); diff --git a/frontend/vue/components/Stations/Remotes.vue b/frontend/vue/components/Stations/Remotes.vue index da5609d60..b02cb2a53 100644 --- a/frontend/vue/components/Stations/Remotes.vue +++ b/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(); diff --git a/frontend/vue/components/Stations/SftpUsers.vue b/frontend/vue/components/Stations/SftpUsers.vue index 9062064c4..605d4038b 100644 --- a/frontend/vue/components/Stations/SftpUsers.vue +++ b/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 ); diff --git a/frontend/vue/components/Stations/StereoToolConfig.vue b/frontend/vue/components/Stations/StereoToolConfig.vue index 1157d0bb0..9b0bdced4 100644 --- a/frontend/vue/components/Stations/StereoToolConfig.vue +++ b/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(); diff --git a/frontend/vue/components/Stations/Streamers.vue b/frontend/vue/components/Stations/Streamers.vue index 0cd934438..18d04cc94 100644 --- a/frontend/vue/components/Stations/Streamers.vue +++ b/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 ); diff --git a/frontend/vue/components/Stations/Webhooks.vue b/frontend/vue/components/Stations/Webhooks.vue index 0e92bf4fb..46e80f08b 100644 --- a/frontend/vue/components/Stations/Webhooks.vue +++ b/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 ); diff --git a/frontend/vue/functions/confirmAndDelete.js b/frontend/vue/functions/confirmAndDelete.js deleted file mode 100644 index 4ec822603..000000000 --- a/frontend/vue/functions/confirmAndDelete.js +++ /dev/null @@ -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); - } - }); - } - }); -} diff --git a/frontend/vue/functions/useConfirmAndDelete.js b/frontend/vue/functions/useConfirmAndDelete.js new file mode 100644 index 000000000..fa3102dc8 --- /dev/null +++ b/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 + }; +} diff --git a/frontend/vue/functions/useHasEditModal.js b/frontend/vue/functions/useHasEditModal.js index 929e2f8a1..fc47234fa 100644 --- a/frontend/vue/functions/useHasEditModal.js +++ b/frontend/vue/functions/useHasEditModal.js @@ -10,6 +10,5 @@ export default function useHasEditModal($modalRef) { return { doCreate, doEdit - } - + }; } diff --git a/frontend/vue/functions/useMayNeedRestart.js b/frontend/vue/functions/useMayNeedRestart.js index c5fcec162..2637cfed6 100644 --- a/frontend/vue/functions/useMayNeedRestart.js +++ b/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(); }