#57 - crud actions to links (#137)

* #57 - fix: fixed crud links * #57 - fix: imports fix
blumilksoftware · Aug 30, 2024 · be0a970 · be0a970
1 parent 2f34f50
commit be0a970
Show file tree

Hide file tree

Showing 12 changed files with 97 additions and 64 deletions.
diff --git a/resources/js/Pages/Dashboard/ContactInfo/Index.vue b/resources/js/Pages/Dashboard/ContactInfo/Index.vue
@@ -12,6 +12,7 @@ import { ref } from 'vue'
 import { PencilSquareIcon, XCircleIcon } from '@heroicons/vue/24/outline'
 import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
 import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
+import StyledLink from '@/Shared/Components/StyledLink.vue'
 defineProps({
   contactInfos: Object,
   total: Number,
@@ -41,9 +42,9 @@ const contactInfoToDeleteId = ref(0)
           </ManagementHeaderItem>
         </template>
         <template #actions>
-          <Button :href="`/dashboard/contact-infos/create`">
+          <StyledLink :href="`/dashboard/contact-infos/create`">
             Dodaj
-          </Button>
+          </StyledLink>
         </template>
       </ManagementHeader>
       <div v-if="contactInfos.length" class="flex flex-col gap-8">
@@ -72,9 +73,9 @@ const contactInfoToDeleteId = ref(0)
                 {{ contact.identifier }}
               </TableCell>
               <TableCell class="flex justify-end gap-2">
-                <Button :href="`contact-infos/${contact.id}/edit`">
+                <StyledLink :href="`contact-infos/${contact.id}/edit`">
                   <PencilSquareIcon class="w-5" />
-                </Button>
+                </StyledLink>
                 <Button class="text-red-600" @click="[showModal = true, contactInfoToDeleteId = contact.id]">
                   <XCircleIcon class="w-5" />
                 </Button>

diff --git a/resources/js/Pages/Dashboard/Course/Index.vue b/resources/js/Pages/Dashboard/Course/Index.vue
@@ -11,6 +11,7 @@ import { ref } from 'vue'
 import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
 import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
 import { PencilSquareIcon, XCircleIcon } from '@heroicons/vue/24/outline'
+import StyledLink from '@/Shared/Components/StyledLink.vue'
 
 defineProps({
   courses: Object,
@@ -38,9 +39,9 @@ const courseToDeleteId = ref(0)
         </template>
         <template #actions>
           <span class="hidden sm:block">
-            <Button :href="`/dashboard/courses/create`">
+            <StyledLink :href="`/dashboard/courses/create`">
               Dodaj
-            </Button>
+            </StyledLink>
           </span>
         </template>
       </ManagementHeader>
@@ -82,9 +83,9 @@ const courseToDeleteId = ref(0)
                 {{ course.type }}
               </TableCell>
               <TableCell class="flex justify-end gap-2">
-                <Button :href="`/dashboard/courses/${course.id}/edit`">
+                <StyledLink :href="`/dashboard/courses/${course.id}/edit`">
                   <PencilSquareIcon class="w-5" />
-                </Button>
+                </StyledLink>
                 <Button class="text-red-600" @click="[showModal = true, courseToDeleteId = course.id]">
                   <XCircleIcon class="w-5" />
                 </Button>

diff --git a/resources/js/Pages/Dashboard/CourseSemester/Grade/Index.vue b/resources/js/Pages/Dashboard/CourseSemester/Grade/Index.vue
@@ -46,22 +46,22 @@ const editForm = useForm({
 })
 
 function createGradeColumn() {
-  form.post(`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/grades`, {
+  form.post(`/dashboard/semester-courses/${props.course.id}/groups/${props.group.id}/grades`, {
     preserveScroll: true,
   })
   form.reset()
 }
 
 function updateGradeColumn() {
-  editForm.patch(`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/grades/${columnToEdit.value.id}`, {
+  editForm.patch(`/dashboard/semester-courses/${props.course.id}/groups/${props.group.id}/grades/${columnToEdit.value.id}`, {
     preserveScroll: true,
   })
   showEditForm.value = false
   editForm.reset()
 }
 
 function updateGrade(gradeColumnId, studentId, value, status) {
-  Inertia.patch(`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/grades/${gradeColumnId}/update`, {
+  Inertia.patch(`/dashboard/semester-courses/${props.course.id}/groups/${props.group.id}/grades/${gradeColumnId}/update`, {
     status: status,
     value: value,
     student_id: studentId,
@@ -71,7 +71,7 @@ function updateGrade(gradeColumnId, studentId, value, status) {
 }
 
 function createGrade(gradeColumnId, studentId, status, value) {
-  Inertia.post(`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/grades/${gradeColumnId}/store`, {
+  Inertia.post(`/dashboard/semester-courses/${props.course.id}/groups/${props.group.id}/grades/${gradeColumnId}/store`, {
     status: status,
     student_id: studentId,
     value: value,
@@ -89,7 +89,7 @@ function editColumn(column) {
 }
 
 function reorder(id, down) {
-  Inertia.post(`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/grades/${id}/reorder/${down}`, {}, {
+  Inertia.post(`/dashboard/semester-courses/${props.course.id}/groups/${props.group.id}/grades/${id}/reorder/${down}`, {}, {
     preserveScroll: true,
   })
 }
@@ -99,7 +99,7 @@ const searchForm = useForm({
 })
 
 watch(searchForm, debounce(() => {
-  Inertia.get(`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/grades`, {
+  Inertia.get(`/dashboard/semester-courses/${props.course.id}/groups/${props.group.id}/grades`, {
     search: searchForm.search,
   }, {
     preserveState: true,
@@ -114,7 +114,7 @@ watch(searchForm, debounce(() => {
       <ManagementHeader>
         <template #header>
           Zarządzanie ocenami w grupie <span class="text-gray-500">{{ group.name }}</span><br>
-          dla kursu <span class="text-gray-500">{{ course.data.course }}</span>
+          dla kursu <span class="text-gray-500">{{ course.course }}</span>
         </template>
         <template #statistics>
           <ManagementHeaderItem>
@@ -220,15 +220,15 @@ watch(searchForm, debounce(() => {
             </TableHeader>
           </template>
           <template #body>
-            <TableRow v-for="student in students.data" :key="student.id">
+            <TableRow v-for="student in students.data" :key="student?.id">
               <TableCell class="h-[70px] w-[120px] min-w-[120px] cursor-pointer flex-row border-2">
                 <div class="font-bold">
-                  {{ student.first_name }} {{ student.surname }}
+                  {{ student?.first_name }} {{ student?.surname }}
                 </div>
-                <div>({{ student.index_number }})</div>
+                <div>({{ student?.index_number }})</div>
               </TableCell>
               <GradeCell v-for="column in gradeColumns" :key="column.id"
-                         :grade="column.grades.find(obj => obj.student_id === student.id)" :grade-column="column"
+                         :grade="column.grades.find(obj => obj.student_id === student?.id)" :grade-column="column"
                          :student="student" class="cursor-pointer border-2"
                          @create-grade="createGrade" @update-grade="updateGrade"
               />
@@ -240,7 +240,7 @@ watch(searchForm, debounce(() => {
     </div>
   </DashboardLayout>
   <RemoveModal
-    :href="`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/grades/${columnToDeleteId}`"
+    :href="`/dashboard/semester-courses/${props.course.id}/groups/${props.group.id}/grades/${columnToDeleteId}`"
     :show="showModal"
     @close="showModal = false"
   />

diff --git a/resources/js/Pages/Dashboard/CourseSemester/Index.vue b/resources/js/Pages/Dashboard/CourseSemester/Index.vue
@@ -11,6 +11,7 @@ import { ref } from 'vue'
 import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
 import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
 import { PencilSquareIcon, XCircleIcon, EyeIcon } from '@heroicons/vue/24/outline'
+import StyledLink from '@/Shared/Components/StyledLink.vue'
 
 defineProps({
   courses: Object,
@@ -39,9 +40,9 @@ const courseToDeleteId = ref(0)
         </template>
         <template #actions>
           <span class="hidden sm:block">
-            <Button :href="`/dashboard/semester-courses/create`">
+            <StyledLink :href="`/dashboard/semester-courses/create`">
               Dodaj
-            </Button>
+            </StyledLink>
           </span>
         </template>
       </ManagementHeader>
@@ -84,12 +85,12 @@ const courseToDeleteId = ref(0)
                 {{ course.groupsCount }}
               </TableCell>
               <TableCell class="flex justify-end gap-2">
-                <Button :href="`/dashboard/semester-courses/${course.id}`">
+                <StyledLink :href="`/dashboard/semester-courses/${course.id}`">
                   <EyeIcon class="w-5" />
-                </Button>
-                <Button :href="`/dashboard/semester-courses/${course.id}/edit`">
+                </StyledLink>
+                <StyledLink :href="`/dashboard/semester-courses/${course.id}/edit`">
                   <PencilSquareIcon class="w-5" />
-                </Button>
+                </StyledLink>
                 <Button class="text-red-600" @click="[showModal = true, courseToDeleteId = course.id]">
                   <XCircleIcon class="w-5" />
                 </Button>

diff --git a/resources/js/Pages/Dashboard/CourseSemester/Show.vue b/resources/js/Pages/Dashboard/CourseSemester/Show.vue
@@ -14,6 +14,7 @@ import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
 import RemoveModal from '@/Shared/Modals/RemoveModal.vue'
 import { PencilSquareIcon, UsersIcon, XCircleIcon, ChartBarIcon } from '@heroicons/vue/24/outline'
 import { ref } from 'vue'
+import StyledLink from '@/Shared/Components/StyledLink.vue'
 
 const props = defineProps({
   course: Object,
@@ -41,15 +42,15 @@ function editGroup(group) {
 }
 
 function createGroup() {
-  form.post(`/dashboard/semester-courses/${props.course.data.id}/groups`, {
+  form.post(`/dashboard/semester-courses/${props.course.id}/groups`, {
     onSuccess: () => {
       form.reset()
     },
   })
 }
 
 function updateGroup() {
-  editForm.patch(`/dashboard/semester-courses/${props.course.data.id}/groups/${groupToEdit.value.id}`, {
+  editForm.patch(`/dashboard/semester-courses/${props.course.id}/groups/${groupToEdit.value.id}`, {
     onSuccess: () => {
       showEditForm.value = false
     },
@@ -77,25 +78,25 @@ function updateGroup() {
               <FormLabel for="id">
                 Id
               </FormLabel>
-              <TextInput :placeholder="course.data.id" autocomplete="off" disabled />
+              <TextInput :placeholder="course.id" autocomplete="off" disabled />
             </FormGroup>
             <FormGroup>
               <FormLabel for="course">
                 Kurs
               </FormLabel>
-              <TextInput :placeholder="course.data.course" autocomplete="off" disabled />
+              <TextInput :placeholder="course.course" autocomplete="off" disabled />
             </FormGroup>
             <FormGroup>
               <FormLabel for="semester">
                 Semestr
               </FormLabel>
-              <TextInput :placeholder="course.data.semester" autocomplete="off" disabled />
+              <TextInput :placeholder="course.semester" autocomplete="off" disabled />
             </FormGroup>
             <FormGroup>
               <FormLabel for="semester">
                 Liczba grup
               </FormLabel>
-              <TextInput :placeholder="course.data.groupsCount" autocomplete="off" disabled />
+              <TextInput :placeholder="course.groupsCount" autocomplete="off" disabled />
             </FormGroup>
           </div>
         </Section>
@@ -182,19 +183,19 @@ function updateGroup() {
           </form>
         </Section>
         <div class="grid grid-cols-2 gap-4">
-          <div v-for="group in groups.data" :key="group.id"
+          <div v-for="group in groups" :key="group.id"
                class="flex h-max cursor-pointer items-center justify-between overflow-x-auto bg-white p-4 text-center sm:rounded-lg"
           >
             {{ group.name }}[{{ group.formAbbreviation }}]
             <div class="flex gap-2">
-              <Button class="has-tooltip" :href="`/dashboard/semester-courses/${course.data.id}/groups/${group.id}/grades`">
+              <StyledLink class="has-tooltip" :href="`/dashboard/semester-courses/${course.id}/groups/${group.id}/grades`">
                 <ChartBarIcon class="w-5" />
                 <span class="tooltip -ml-6 -mt-16 rounded bg-gray-500 p-1 text-white">Oceny</span>
-              </Button>
-              <Button class="has-tooltip" :href="`/dashboard/semester-courses/${course.data.id}/groups/${group.id}/students`">
+              </StyledLink>
+              <StyledLink class="has-tooltip" :href="`/dashboard/semester-courses/${course.id}/groups/${group.id}/students`">
                 <UsersIcon class="w-5" />
                 <span class="tooltip -ml-8 -mt-16 rounded bg-gray-500 p-1 text-white">Studenci</span>
-              </Button>
+              </StyledLink>
               <Button class="has-tooltip">
                 <PencilSquareIcon class="w-5" @click="editGroup(group)" />
                 <span class="tooltip -ml-10 -mt-16 rounded bg-gray-500 p-1 text-white">Edytuj grupę</span>
@@ -210,7 +211,7 @@ function updateGroup() {
     </div>
   </DashboardLayout>
 
-  <RemoveModal :show="showModal" :href="`/dashboard/semester-courses/${course.data.id}/groups/${groupToDeleteId}`"
+  <RemoveModal :show="showModal" :href="`/dashboard/semester-courses/${course.id}/groups/${groupToDeleteId}`"
                @close="showModal = false"
   />
 </template>
diff --git a/resources/js/Pages/Dashboard/CourseSemester/Student/Index.vue b/resources/js/Pages/Dashboard/CourseSemester/Student/Index.vue
@@ -33,15 +33,15 @@ const form = useForm({
 })
 
 function addStudent(id) {
-  Inertia.post(`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/students`, {
+  Inertia.post(`/dashboard/semester-courses/${props.course.id}/groups/${props.group.id}/students`, {
     student: id,
   }, {
     preserveState: true,
   })
 }
 
 watch(form, debounce(() => {
-  Inertia.get(`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/students`, {
+  Inertia.get(`/dashboard/semester-courses/${props.course.id}/groups/${props.group.id}/students`, {
     search: form.search,
   }, {
     preserveState: true,
@@ -56,7 +56,7 @@ watch(form, debounce(() => {
       <ManagementHeader>
         <template #header>
           Zarządzanie studentami w grupie <span class="text-gray-500">{{ group.name }}</span><br>
-          dla kursu <span class="text-gray-500">{{ course.data.course }}</span>
+          dla kursu <span class="text-gray-500">{{ course.course }}</span>
         </template>
         <template #statistics>
           <ManagementHeaderItem>
@@ -138,5 +138,5 @@ watch(form, debounce(() => {
     </div>
   </DashboardLayout>
 
-  <RemoveModal :show="showModal" :href="`/dashboard/semester-courses/${props.course.data.id}/groups/${props.group.id}/students/${studentToDeleteId}`" @close="showModal = false" />
+  <RemoveModal :show="showModal" :href="`/dashboard/semester-courses/${props.course.id}/groups/${props.group.id}/students/${studentToDeleteId}`" @close="showModal = false" />
 </template>
diff --git a/resources/js/Pages/Dashboard/FAQ/Index.vue b/resources/js/Pages/Dashboard/FAQ/Index.vue
@@ -11,6 +11,7 @@ import { ref } from 'vue'
 import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
 import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
 import { PencilSquareIcon, XCircleIcon } from '@heroicons/vue/24/outline'
+import StyledLink from '@/Shared/Components/StyledLink.vue'
 
 defineProps({
   faqs: Object,
@@ -38,9 +39,9 @@ const faqToDeleteId = ref(0)
         </template>
         <template #actions>
           <span class="hidden sm:block">
-            <Button :href="`/dashboard/faqs/create`">
+            <StyledLink :href="`/dashboard/faqs/create`">
               Dodaj
-            </Button>
+            </StyledLink>
           </span>
         </template>
       </ManagementHeader>
@@ -64,9 +65,9 @@ const faqToDeleteId = ref(0)
                 {{ faq.question }}
               </TableCell>
               <TableCell class="flex justify-end gap-2">
-                <Button :href="`/dashboard/faqs/${faq.id}/edit`">
+                <StyledLink :href="`/dashboard/faqs/${faq.id}/edit`">
                   <PencilSquareIcon class="w-5" />
-                </Button>
+                </StyledLink>
                 <Button class="text-red-600" @click="[showModal = true, faqToDeleteId = faq.id]">
                   <XCircleIcon class="w-5" />
                 </Button>

diff --git a/resources/js/Pages/Dashboard/Field/Index.vue b/resources/js/Pages/Dashboard/Field/Index.vue
@@ -11,6 +11,7 @@ import { ref } from 'vue'
 import ManagementHeader from '@/Shared/Components/ManagementHeader.vue'
 import ManagementHeaderItem from '@/Shared/Components/ManagementHeaderItem.vue'
 import { PencilSquareIcon, XCircleIcon } from '@heroicons/vue/24/outline'
+import StyledLink from '@/Shared/Components/StyledLink.vue'
 
 defineProps({
   fields: Object,
@@ -38,9 +39,9 @@ const fieldToDeleteId = ref(0)
         </template>
         <template #actions>
           <span class="hidden sm:block">
-            <Button :href="`/dashboard/fields/create`">
+            <StyledLink :href="`/dashboard/fields/create`">
               Dodaj
-            </Button>
+            </StyledLink>
           </span>
         </template>
       </ManagementHeader>
@@ -70,9 +71,9 @@ const fieldToDeleteId = ref(0)
                 {{ field.name }}
               </TableCell>
               <TableCell class="flex justify-end gap-2">
-                <Button :href="`/dashboard/fields/${field.id}/edit`">
+                <StyledLink :href="`/dashboard/fields/${field.id}/edit`">
                   <PencilSquareIcon class="w-5" />
-                </Button>
+                </StyledLink>
                 <Button class="text-red-600" @click="[showModal = true, fieldToDeleteId = field.id]">
                   <XCircleIcon class="w-5" />
                 </Button>