From c8e18a7324a9be0593843729d906e08a0aac2408 Mon Sep 17 00:00:00 2001
From: Buster Neece <buster@busterneece.com>
Date: Wed, 4 Jan 2023 15:15:35 -0600
Subject: [PATCH] Vue fixes and Compositionification.

---
 .../Admin/Branding/CustomAssetForm.vue        | 123 +++++-----
 frontend/vue/components/Admin/Permissions.vue | 149 ++++++------
 frontend/vue/components/Admin/Stations.vue    | 144 +++++++-----
 .../components/Admin/Stations/EditModal.vue   |   8 -
 .../vue/components/Admin/StorageLocations.vue | 221 +++++++++---------
 frontend/vue/components/Admin/Users.vue       | 107 +++++----
 frontend/vue/components/Common/DataTable.vue  |   2 +-
 .../components/Form/BWrappedFormCheckbox.vue  |   2 +-
 8 files changed, 395 insertions(+), 361 deletions(-)

diff --git a/frontend/vue/components/Admin/Branding/CustomAssetForm.vue b/frontend/vue/components/Admin/Branding/CustomAssetForm.vue
index 1715169ba..998617222 100644
--- a/frontend/vue/components/Admin/Branding/CustomAssetForm.vue
+++ b/frontend/vue/components/Admin/Branding/CustomAssetForm.vue
@@ -38,70 +38,69 @@
     </b-media>
 </template>
 
-<script>
+<script setup>
+import {onMounted, ref, watch} from "vue";
+import {useAxios} from "~/vendor/axios";
+import {useNotify} from "~/vendor/bootstrapVue";
 
-export default {
-    name: 'CustomAssetForm',
-    props: {
-        id: {
-            type: String,
-            required: true
-        },
-        apiUrl: {
-            type: String,
-            required: true
-        },
-        caption: {
-            type: String,
-            required: true
-        }
+const props = defineProps({
+    id: {
+        type: String,
+        required: true
     },
-    data() {
-        return {
-            loading: true,
-            isUploaded: false,
-            url: null,
-            file: null,
-        };
+    apiUrl: {
+        type: String,
+        required: true
     },
-    watch: {
-        file(newFile) {
-            if (null === newFile) {
-                return;
-            }
-
-            let formData = new FormData();
-            formData.append('file', this.file);
-
-            this.$wrapWithLoading(
-                this.axios.post(this.apiUrl, formData)
-            ).finally(() => {
-                this.relist();
-            });
-        }
-    },
-    mounted() {
-        this.relist();
-    },
-    methods: {
-        relist() {
-            this.file = null;
-            this.loading = true;
-
-            this.axios.get(this.apiUrl).then((resp) => {
-                this.isUploaded = resp.data.is_uploaded;
-                this.url = resp.data.url;
-
-                this.loading = false;
-            });
-        },
-        clear() {
-            this.$wrapWithLoading(
-                this.axios.delete(this.apiUrl)
-            ).finally(() => {
-                this.relist();
-            });
-        },
+    caption: {
+        type: String,
+        required: true
     }
-}
+});
+
+const loading = ref(true);
+const isUploaded = ref(false);
+const url = ref(null);
+const file = ref(null);
+
+const {axios} = useAxios();
+
+const relist = () => {
+    file.value = null;
+    loading.value = true;
+
+    axios.get(this.apiUrl).then((resp) => {
+        isUploaded.value = resp.data.is_uploaded;
+        url.value = resp.data.url;
+
+        loading.value = false;
+    });
+};
+
+onMounted(relist);
+
+const {wrapWithLoading} = useNotify();
+
+watch(file, (newFile) => {
+    if (null === newFile) {
+        return;
+    }
+
+    let formData = new FormData();
+    formData.append('file', newFile);
+
+    wrapWithLoading(
+        axios.post(props.apiUrl, formData)
+    ).finally(() => {
+        relist();
+    });
+});
+
+const clear = () => {
+    wrapWithLoading(
+        axios.delete(props.apiUrl)
+    ).finally(() => {
+        relist();
+    });
+};
 </script>
diff --git a/frontend/vue/components/Admin/Permissions.vue b/frontend/vue/components/Admin/Permissions.vue
index ba0bf020f..03944c174 100644
--- a/frontend/vue/components/Admin/Permissions.vue
+++ b/frontend/vue/components/Admin/Permissions.vue
@@ -26,7 +26,7 @@
 
         <data-table
             id="permissions"
-            ref="datatable"
+            ref="$datatable"
             paginated
             :fields="fields"
             :api-url="listUrl"
@@ -71,7 +71,7 @@
     </b-card>
 
     <edit-modal
-        ref="editModal"
+        ref="$editModal"
         :create-url="listUrl"
         :station-permissions="stationPermissions"
         :stations="stations"
@@ -80,80 +80,93 @@
     />
 </template>
 
-<script>
+<script setup>
 import DataTable from '~/components/Common/DataTable';
 import EditModal from './Permissions/EditModal';
 import Icon from '~/components/Common/Icon';
 import InfoCard from '~/components/Common/InfoCard';
 import {filter, get, map} from 'lodash';
+import {useTranslate} from "~/vendor/gettext";
+import {ref} from "vue";
+import {useNotify} from "~/vendor/bootstrapVue";
+import {useAxios} from "~/vendor/axios";
+import {useSweetAlert} from "~/vendor/sweetalert";
 
-export default {
-    name: 'AdminPermissions',
-    components: {InfoCard, Icon, EditModal, DataTable},
-    props: {
-        listUrl: {
-            type: String,
-            required: true
-        },
-        stations: {
-            type: Array,
-            required: true
-        },
-        globalPermissions: {
-            type: Array,
-            required: true
-        },
-        stationPermissions: {
-            type: Array,
-            required: true
-        }
+const props = defineProps({
+    listUrl: {
+        type: String,
+        required: true
     },
-    data() {
-        return {
-            fields: [
-                {key: 'name', isRowHeader: true, label: this.$gettext('Role Name'), sortable: true},
-                {key: 'permissions', label: this.$gettext('Permissions'), sortable: false},
-                {key: 'actions', label: this.$gettext('Actions'), sortable: false, class: 'shrink'}
-            ]
-        };
+    stations: {
+        type: Array,
+        required: true
     },
-    methods: {
-        getGlobalPermissionNames(permissions) {
-            return filter(map(permissions, (permission) => {
-                return get(this.globalPermissions, permission, null);
-            }));
-        },
-        getStationPermissionNames(permissions) {
-            return filter(map(permissions, (permission) => {
-                return get(this.stationPermissions, permission, null);
-            }));
-        },
-        getStationName(stationId) {
-            return get(this.stations, stationId, null);
-        },
-        relist() {
-            this.$refs.datatable.refresh();
-        },
-        doCreate() {
-            this.$refs.editModal.create();
-        },
-        doEdit(url) {
-            this.$refs.editModal.edit(url);
-        },
-        doDelete(url) {
-            this.$confirmDelete({
-                title: this.$gettext('Delete Role?'),
-            }).then((result) => {
-                if (result.value) {
-                    this.$wrapWithLoading(
-                        this.axios.delete(url)
-                    ).then((resp) => {
-                        this.$notifySuccess(resp.data.message);
-                        this.relist();
-                    });
-                }
+    globalPermissions: {
+        type: Array,
+        required: true
+    },
+    stationPermissions: {
+        type: Array,
+        required: true
+    }
+});
+
+const {$gettext} = useTranslate();
+
+const fields = [
+    {key: 'name', isRowHeader: true, label: $gettext('Role Name'), sortable: true},
+    {key: 'permissions', label: $gettext('Permissions'), sortable: false},
+    {key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}
+];
+
+const getGlobalPermissionNames = (permissions) => {
+    return filter(map(permissions, (permission) => {
+        return get(props.globalPermissions, permission, null);
+    }));
+};
+
+const getStationPermissionNames = (permissions) => {
+    return filter(map(permissions, (permission) => {
+        return get(props.stationPermissions, permission, null);
+    }));
+};
+
+const getStationName = (stationId) => {
+    return get(props.stations, stationId, null);
+};
+
+const $datatable = ref(); // Template Ref
+
+const relist = () => {
+    $datatable.value.refresh();
+};
+
+const $editModal = ref(); // Template Ref
+
+const doCreate = () => {
+    $editModal.value.create();
+};
+
+const doEdit = (url) => {
+    $editModal.value.edit(url);
+};
+
+const {wrapWithLoading, notifySuccess} = useNotify();
+const {confirmDelete} = useSweetAlert();
+const {axios} = useAxios();
+
+const doDelete = (url) => {
+    confirmDelete({
+        title: $gettext('Delete Role?'),
+    }).then((result) => {
+        if (result.value) {
+            wrapWithLoading(
+                axios.delete(url)
+            ).then((resp) => {
+                notifySuccess(resp.data.message);
+                relist();
             });
         }
-    }
-};
+    });
+}
 </script>
diff --git a/frontend/vue/components/Admin/Stations.vue b/frontend/vue/components/Admin/Stations.vue
index 3f1c5b2d4..268d90243 100644
--- a/frontend/vue/components/Admin/Stations.vue
+++ b/frontend/vue/components/Admin/Stations.vue
@@ -18,7 +18,7 @@
 
         <data-table
             id="stations"
-            ref="datatable"
+            ref="$datatable"
             paginated
             :fields="fields"
             :api-url="listUrl"
@@ -72,87 +72,103 @@
     </b-card>
 
     <admin-stations-edit-modal
-        v-bind="$props"
-        ref="editModal"
+        v-bind="pickProps(props, stationFormProps)"
+        ref="$editModal"
         :create-url="listUrl"
         @relist="relist"
     />
 
     <admin-stations-clone-modal
-        ref="cloneModal"
+        ref="$cloneModal"
         @relist="relist"
     />
 </template>
 
-<script>
+<script setup>
 import DataTable from '~/components/Common/DataTable';
 import Icon from '~/components/Common/Icon';
 import AdminStationsEditModal from "./Stations/EditModal";
 import {get} from "lodash";
 import AdminStationsCloneModal from "./Stations/CloneModal";
 import stationFormProps from "./Stations/stationFormProps";
+import {pickProps} from "~/functions/pickProps";
+import {useTranslate} from "~/vendor/gettext";
+import {ref} from "vue";
+import {useNotify} from "~/vendor/bootstrapVue";
+import {useAxios} from "~/vendor/axios";
+import {useSweetAlert} from "~/vendor/sweetalert";
 
-export default {
-    name: 'AdminPermissions',
-    components: {AdminStationsCloneModal, AdminStationsEditModal, Icon, DataTable},
-    props: {
-        ...stationFormProps,
-        listUrl: {
-            type: String,
-            required: true
-        },
-        frontendTypes: {
-            type: Object,
-            required: true
-        },
-        backendTypes: {
-            type: Object,
-            required: true
-        }
+const props = defineProps({
+    ...stationFormProps,
+    listUrl: {
+        type: String,
+        required: true
     },
-    data() {
-        return {
-            fields: [
-                {key: 'name', isRowHeader: true, label: this.$gettext('Name'), sortable: true},
-                {key: 'frontend_type', label: this.$gettext('Broadcasting'), sortable: false},
-                {key: 'backend_type', label: this.$gettext('AutoDJ'), sortable: false},
-                {key: 'actions', label: this.$gettext('Actions'), sortable: false, class: 'shrink'}
-            ]
-        };
+    frontendTypes: {
+        type: Object,
+        required: true
     },
-    methods: {
-        relist() {
-            this.$refs.datatable.refresh();
-        },
-        doCreate() {
-            this.$refs.editModal.create();
-        },
-        doEdit(url) {
-            this.$refs.editModal.edit(url);
-        },
-        doClone(stationName, url) {
-            this.$refs.cloneModal.create(stationName, url);
-        },
-        doDelete(url) {
-            this.$confirmDelete({
-                title: this.$gettext('Delete Station?'),
-            }).then((result) => {
-                if (result.value) {
-                    this.$wrapWithLoading(
-                        this.axios.delete(url)
-                    ).then((resp) => {
-                        this.$notifySuccess(resp.data.message);
-                        this.relist();
-                    });
-                }
-            });
-        },
-        getFrontendName(frontend_type) {
-            return get(this.frontendTypes, [frontend_type, 'name'], '');
-        },
-        getBackendName(backend_type) {
-            return get(this.backendTypes, [backend_type, 'name'], '');
-        }
+    backendTypes: {
+        type: Object,
+        required: true
     }
+});
+
+const {$gettext} = useTranslate();
+
+const fields = [
+    {key: 'name', isRowHeader: true, label: $gettext('Name'), sortable: true},
+    {key: 'frontend_type', label: $gettext('Broadcasting'), sortable: false},
+    {key: 'backend_type', label: $gettext('AutoDJ'), sortable: false},
+    {key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}
+];
+
+const getFrontendName = (frontend_type) => {
+    return get(props.frontendTypes, [frontend_type, 'name'], '');
+};
+
+const getBackendName = (backend_type) => {
+    return get(props.backendTypes, [backend_type, 'name'], '');
+};
+
+const $datatable = ref(); // Template Ref
+
+const relist = () => {
+    $datatable.value.refresh();
+};
+
+const $editModal = ref(); // Template Ref
+
+const doCreate = () => {
+    $editModal.value.create();
+};
+
+const doEdit = (url) => {
+    $editModal.value.edit(url);
+};
+
+const $cloneModal = ref(); // Template Ref
+
+const doClone = (stationName, url) => {
+    $cloneModal.value.create(stationName, url);
+};
+
+const {wrapWithLoading, notifySuccess} = useNotify();
+const {confirmDelete} = useSweetAlert();
+const {axios} = useAxios();
+
+const doDelete = (url) => {
+    confirmDelete({
+        title: $gettext('Delete Station?'),
+    }).then((result) => {
+        if (result.value) {
+            wrapWithLoading(
+                axios.delete(url)
+            ).then((resp) => {
+                notifySuccess(resp.data.message);
+                relist();
+            });
+        }
+    });
 };
 </script>
diff --git a/frontend/vue/components/Admin/Stations/EditModal.vue b/frontend/vue/components/Admin/Stations/EditModal.vue
index a2cbd155f..a5b2f6cd0 100644
--- a/frontend/vue/components/Admin/Stations/EditModal.vue
+++ b/frontend/vue/components/Admin/Stations/EditModal.vue
@@ -126,11 +126,3 @@ defineExpose({
     edit
 });
 </script>
-
-<script>
-import {defineComponent} from "vue";
-
-export default defineComponent({
-    inheritAttrs: false,
-});
-</script>
diff --git a/frontend/vue/components/Admin/StorageLocations.vue b/frontend/vue/components/Admin/StorageLocations.vue
index 0aeeb77bf..a3a2d1678 100644
--- a/frontend/vue/components/Admin/StorageLocations.vue
+++ b/frontend/vue/components/Admin/StorageLocations.vue
@@ -32,7 +32,7 @@
 
         <data-table
             id="admin_storage_locations"
-            ref="datatable"
+            ref="$datatable"
             :show-toolbar="false"
             :fields="fields"
             :responsive="false"
@@ -87,130 +87,133 @@
     </b-card>
 
     <edit-modal
-        ref="editModal"
+        ref="$editModal"
         :create-url="listUrl"
         :type="activeType"
         @relist="relist"
     />
 </template>
 
-<script>
+<script setup>
 import DataTable from '~/components/Common/DataTable';
 import EditModal from './StorageLocations/EditModal';
 import Icon from '~/components/Common/Icon';
+import {computed, ref} from "vue";
+import {useTranslate} from "~/vendor/gettext";
+import {useNotify} from "~/vendor/bootstrapVue";
+import {useAxios} from "~/vendor/axios";
+import {useSweetAlert} from "~/vendor/sweetalert";
 
-export default {
-    name: 'AdminStorageLocations',
-    components: {Icon, EditModal, DataTable},
-    props: {
-        listUrl: {
-            type: String,
-            required: true
-        }
+const props = defineProps({
+    listUrl: {
+        type: String,
+        required: true
+    }
+});
+
+const activeType = ref('station_media');
+
+const listUrlForType = computed(() => {
+    return props.listUrl + '?type=' + activeType.value;
+});
+
+const {$gettext} = useTranslate();
+
+const fields = [
+    {key: 'adapter', label: $gettext('Adapter'), sortable: false},
+    {key: 'space', label: $gettext('Space Used'), class: 'text-nowrap', sortable: false},
+    {key: 'stations', label: $gettext('Station(s)'), sortable: false},
+    {key: 'actions', label: $gettext('Actions'), class: 'shrink', sortable: false}
+];
+
+const tabs = [
+    {
+        type: 'station_media',
+        title: $gettext('Station Media')
     },
-    data() {
-        return {
-            activeType: 'station_media',
-            fields: [
-                {key: 'adapter', label: this.$gettext('Adapter'), sortable: false},
-                {key: 'space', label: this.$gettext('Space Used'), class: 'text-nowrap', sortable: false},
-                {key: 'stations', label: this.$gettext('Station(s)'), sortable: false},
-                {key: 'actions', label: this.$gettext('Actions'), class: 'shrink', sortable: false}
-            ]
-        };
+    {
+        type: 'station_recordings',
+        title: $gettext('Station Recordings')
     },
-    computed: {
-        tabs() {
-            return [
-                {
-                    type: 'station_media',
-                    title: this.$gettext('Station Media')
-                },
-                {
-                    type: 'station_recordings',
-                    title: this.$gettext('Station Recordings')
-                },
-                {
-                    type: 'station_podcasts',
-                    title: this.$gettext('Station Podcasts'),
-                },
-                {
-                    type: 'backup',
-                    title: this.$gettext('Backups')
-                }
-            ]
-        },
-        listUrlForType() {
-            return this.listUrl + '?type=' + this.activeType;
-        }
+    {
+        type: 'station_podcasts',
+        title: $gettext('Station Podcasts'),
     },
-    methods: {
-        setType (type) {
-            this.activeType = type;
-            this.relist();
-        },
-        getAdapterName (adapter) {
-            switch (adapter) {
-                case 'local':
-                    return this.$gettext('Local');
+    {
+        type: 'backup',
+        title: $gettext('Backups')
+    }
+];
 
-                case 's3':
-                    return this.$gettext('Remote: S3 Compatible');
+const $datatable = ref(); // Template Ref
 
-                case 'dropbox':
-                    return this.$gettext('Remote: Dropbox');
-                    
-                case 'sftp':
-                    return this.$gettext('Remote: SFTP');
-            }
-        },
-        getSpaceUsed(item) {
-            return (item.storageAvailable)
-                ? item.storageUsed + ' / ' + item.storageAvailable
-                : item.storageUsed;
-        },
-        getProgressVariant(percent) {
-            if (percent > 85) {
-                return 'danger';
-            } else if (percent > 65) {
-                return 'warning';
-            } else {
-                return 'default';
-            }
-        },
-        relist() {
-            this.$refs.datatable.refresh();
-        },
-        doCreate() {
-            this.$refs.editModal.create();
-        },
-        doEdit(url) {
-            this.$refs.editModal.edit(url);
-        },
-        doModify(url) {
-            this.$notify(this.$gettext('Applying changes...'), {
-                variant: 'warning'
-            });
+const relist = () => {
+    $datatable.value.refresh();
+};
 
-            this.axios.put(url).then((resp) => {
-                this.$notifySuccess(resp.data.message);
-                this.relist();
-            });
-        },
-        doDelete (url) {
-            this.$confirmDelete({
-                title: this.$gettext('Delete Storage Location?'),
-            }).then((result) => {
-                if (result.value) {
-                    this.$wrapWithLoading(
-                        this.axios.delete(url)
-                    ).then((resp) => {
-                        this.$notifySuccess(resp.data.message);
-                        this.relist();
-                    });
-                }
-            });
-        }
+const $editModal = ref(); // Template Ref
+
+const doCreate = () => {
+    $editModal.value.create();
+};
+
+const doEdit = (url) => {
+    $editModal.value.edit(url);
+};
+
+const setType = (type) => {
+    activeType.value = type;
+    relist();
+};
+
+const getAdapterName = (adapter) => {
+    switch (adapter) {
+        case 'local':
+            return $gettext('Local');
+
+        case 's3':
+            return $gettext('Remote: S3 Compatible');
+
+        case 'dropbox':
+            return $gettext('Remote: Dropbox');
+
+        case 'sftp':
+            return $gettext('Remote: SFTP');
     }
 };
+
+const getSpaceUsed = (item) => {
+    return (item.storageAvailable)
+        ? item.storageUsed + ' / ' + item.storageAvailable
+        : item.storageUsed;
+};
+
+const getProgressVariant = (percent) => {
+    if (percent > 85) {
+        return 'danger';
+    } else if (percent > 65) {
+        return 'warning';
+    } else {
+        return 'default';
+    }
+};
+
+const {notifySuccess, wrapWithLoading} = useNotify();
+const {confirmDelete} = useSweetAlert();
+const {axios} = useAxios();
+
+const doDelete = (url) => {
+    confirmDelete({
+        title: $gettext('Delete Storage Location?'),
+    }).then((result) => {
+        if (result.value) {
+            wrapWithLoading(
+                axios.delete(url)
+            ).then((resp) => {
+                notifySuccess(resp.data.message);
+                relist();
+            });
+        }
+    });
+};
 </script>
diff --git a/frontend/vue/components/Admin/Users.vue b/frontend/vue/components/Admin/Users.vue
index 200cde352..42294ebe3 100644
--- a/frontend/vue/components/Admin/Users.vue
+++ b/frontend/vue/components/Admin/Users.vue
@@ -18,7 +18,7 @@
 
         <data-table
             id="users"
-            ref="datatable"
+            ref="$datatable"
             paginated
             :fields="fields"
             :api-url="listUrl"
@@ -79,64 +79,75 @@
     </b-card>
 
     <edit-modal
-        ref="editModal"
+        ref="$editModal"
         :create-url="listUrl"
         :roles="roles"
         @relist="relist"
     />
 </template>
 
-<script>
+<script setup>
 import DataTable from '~/components/Common/DataTable';
 import EditModal from './Users/EditModal';
 import Icon from '~/components/Common/Icon';
+import {useTranslate} from "~/vendor/gettext";
+import {ref} from "vue";
+import {useNotify} from "~/vendor/bootstrapVue";
+import {useSweetAlert} from "~/vendor/sweetalert";
+import {useAxios} from "~/vendor/axios";
 
-export default {
-    name: 'AdminPermissions',
-    components: {Icon, EditModal, DataTable},
-    props: {
-        listUrl: {
-            type: String,
-            required: true
-        },
-        roles: {
-            type: Object,
-            required: true
-        }
+const props = defineProps({
+    listUrl: {
+        type: String,
+        required: true
     },
-    data() {
-        return {
-            fields: [
-                {key: 'name', isRowHeader: true, label: this.$gettext('User Name'), sortable: true},
-                {key: 'roles', label: this.$gettext('Roles'), sortable: false},
-                {key: 'actions', label: this.$gettext('Actions'), sortable: false, class: 'shrink'}
-            ]
-        };
-    },
-    methods: {
-        relist() {
-            this.$refs.datatable.refresh();
-        },
-        doCreate() {
-            this.$refs.editModal.create();
-        },
-        doEdit(url) {
-            this.$refs.editModal.edit(url);
-        },
-        doDelete(url) {
-            this.$confirmDelete({
-                title: this.$gettext('Delete User?'),
-            }).then((result) => {
-                if (result.value) {
-                    this.$wrapWithLoading(
-                        this.axios.delete(url)
-                    ).then((resp) => {
-                        this.$notifySuccess(resp.data.message);
-                        this.relist();
-                    });
-                }
+    roles: {
+        type: Object,
+        required: true
+    }
+});
+
+const {$gettext} = useTranslate();
+
+const fields = [
+    {key: 'name', isRowHeader: true, label: $gettext('User Name'), sortable: true},
+    {key: 'roles', label: $gettext('Roles'), sortable: false},
+    {key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}
+];
+
+const $datatable = ref(); // Template Ref
+
+const relist = () => {
+    $datatable.value.refresh();
+};
+
+const $editModal = ref(); // Template Ref
+
+const doCreate = () => {
+    $editModal.value.create();
+};
+
+const doEdit = (url) => {
+    $editModal.value.edit(url);
+};
+
+const {wrapWithLoading, notifySuccess} = useNotify();
+const {confirmDelete} = useSweetAlert();
+const {axios} = useAxios();
+
+const doDelete = (url) => {
+    confirmDelete({
+        title: $gettext('Delete User?'),
+    }).then((result) => {
+        if (result.value) {
+            wrapWithLoading(
+                axios.delete(url)
+            ).then((resp) => {
+                notifySuccess(resp.data.message);
+                relist();
             });
         }
-    }
-};
+    });
+}
+
 </script>
diff --git a/frontend/vue/components/Common/DataTable.vue b/frontend/vue/components/Common/DataTable.vue
index d56293e3b..bacde2fda 100644
--- a/frontend/vue/components/Common/DataTable.vue
+++ b/frontend/vue/components/Common/DataTable.vue
@@ -227,7 +227,7 @@ export default defineComponent({
     props: {
         id: {
             type: String,
-            required: true
+            default: null
         },
         apiUrl: {
             type: String,
diff --git a/frontend/vue/components/Form/BWrappedFormCheckbox.vue b/frontend/vue/components/Form/BWrappedFormCheckbox.vue
index 0c75f538d..6b6fe71da 100644
--- a/frontend/vue/components/Form/BWrappedFormCheckbox.vue
+++ b/frontend/vue/components/Form/BWrappedFormCheckbox.vue
@@ -69,7 +69,7 @@ const props = defineProps({
     },
     name: {
         type: String,
-        required: true,
+        default: null
     },
     field: {
         type: Object,