fix: incorrect API calls and failing to refresh InternshipStatusHistoryView and InternshipStatusEditor

frontend/app/components/InternshipStatusEditor.vue

@@ -14,10 +14,10 @@ const user = useSanctumUser<User>();
 const rules = {
     required: (v: any) => (!!v && String(v).trim().length > 0) || 'Povinné pole',
 };
-const possible_states = possibleNextStates(props.internship.status.status, user.value!.role).map((state) => ({
+const possible_states = computed(() => possibleNextStates(props.internship.status.status, user.value!.role).map((state) => ({
     title: prettyInternshipStatus(state),
     value: state
-}));
+})));
 
 const isValid = ref(false);
 const new_state = ref(null as InternshipStatus | null);
@@ -26,7 +26,6 @@ const note = ref("");
 const loading = ref(false);
 const error = ref(null as null | string);
 
-const route = useRoute();
 const client = useSanctumClient();
 
 async function submit() {
@@ -39,7 +38,7 @@ async function submit() {
     };
 
     try {
-        await client(`/api/internships/${route.params.id}/status`, {
+        await client(`/api/internships/${props.internship.id}/status`, {
             method: 'PUT',
             body: new_status
         });

frontend/app/components/InternshipStatusHistoryView.vue

@@ -1,13 +1,10 @@
 <script setup lang="ts">
 import { prettyInternshipStatus, type InternshipStatusData } from '~/types/internship_status';
+import type { Internship } from '~/types/internships';
 
-const props = defineProps({
-    internship: {
-        type: Number,
-        required: true,
-        default: -1
-    },
-});
+const props = defineProps<{
+    internship: Internship
+}>();
 
 const headers = [
     { title: 'Stav', key: 'status', align: 'left' },
@@ -16,8 +13,11 @@ const headers = [
     { title: 'Zmenu vykonal', key: 'modified_by', align: 'left' },
 ];
 
-const route = useRoute();
-const { data, error, pending } = await useSanctumFetch<InternshipStatusData[]>(`/api/internships/${route.params.id}/statuses`);
+const { data, error, pending, refresh } = await useSanctumFetch<InternshipStatusData[]>(`/api/internships/${props.internship.id}/statuses`);
+
+watch(() => props.internship, () => {
+    refresh();
+});
 </script>
 
 <template>

frontend/app/pages/dashboard/admin/internships/edit/[id].vue

@@ -72,7 +72,7 @@ const { data, error, refresh } = await useSanctumFetch<Internship>(`/api/interns
                         <hr />
                     </div>
 
-                    <div :key="refreshKey">
+                    <div>
                         <h2>Stav</h2>
                         <h4>Aktuálny stav</h4>
                         <p>{{ prettyInternshipStatus(data?.status.status!) }}</p>
@@ -82,12 +82,12 @@ const { data, error, refresh } = await useSanctumFetch<Internship>(`/api/interns
                         <br />
 
                         <h4>História</h4>
-                        <InternshipStatusHistoryView :internship="data?.id" />
+                        <InternshipStatusHistoryView :internship="data!" />
 
                         <br />
 
                         <h4>Zmena stavu</h4>
-                        <InternshipStatusEditor :internship="data!"
+                        <InternshipStatusEditor :key="`e-${refreshKey}`" :internship="data!"
                             @successful-submit="() => { refresh(); refreshKey++; }" />
                     </div>