Răsfoiți Sursa

feat: ajusta estudante media

ebagabee 1 lună în urmă
părinte
comite
aed3e54c9e

+ 8 - 0
src/api/student_media.js

@@ -14,6 +14,14 @@ export const createStudentMedia = async (formData) => {
   return data.payload;
 };
 
+export const updateStudentMedia = async (id, formData) => {
+  formData.append("_method", "PUT");
+  const { data } = await api.post(`/media/${id}`, formData, {
+    headers: { "Content-Type": "multipart/form-data" },
+  });
+  return data.payload;
+};
+
 export const deleteStudentMedia = async (id) => {
   const { data } = await api.delete(`/media/${id}`);
   return data;

+ 77 - 0
src/pages/students/components/EditStudentMediaDialog.vue

@@ -0,0 +1,77 @@
+<template>
+  <q-dialog ref="dialogRef" @hide="onDialogHide">
+    <q-card class="q-dialog-plugin" style="width: 480px; max-width: 95vw">
+      <DefaultDialogHeader title="Editar Mídia" @close="onDialogCancel" />
+
+      <q-form ref="formRef" @submit="onSubmit">
+        <q-card-section class="q-pt-none">
+          <div class="column q-gutter-sm">
+            <DefaultInput
+              v-model="form.name"
+              label="Nome do documento"
+              :rules="[inputRules.required]"
+            />
+
+            <q-file
+              v-model="selectedFile"
+              label="Arquivo (opcional)"
+              outlined
+              accept="image/*,video/*,.pdf"
+              clearable
+            >
+              <template #prepend>
+                <q-icon name="mdi-paperclip" />
+              </template>
+            </q-file>
+          </div>
+        </q-card-section>
+
+        <q-card-actions align="right" class="q-pa-md">
+          <q-btn outline color="primary" label="Cancelar" @click="onDialogCancel" />
+          <q-btn color="primary" label="Salvar" type="submit" :loading="loading" />
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
+
+<script setup>
+import { ref } from "vue";
+import { useDialogPluginComponent } from "quasar";
+import { useInputRules } from "src/composables/useInputRules";
+import { useSubmitHandler } from "src/composables/useSubmitHandler";
+import { updateStudentMedia } from "src/api/student_media";
+import DefaultDialogHeader from "src/components/defaults/DefaultDialogHeader.vue";
+import DefaultInput from "src/components/defaults/DefaultInput.vue";
+
+defineEmits([...useDialogPluginComponent.emits]);
+
+const { media } = defineProps({
+  media: { type: Object, required: true },
+});
+
+const { inputRules } = useInputRules();
+const { dialogRef, onDialogHide, onDialogOK, onDialogCancel } = useDialogPluginComponent();
+
+const formRef = ref(null);
+const selectedFile = ref(null);
+const form = ref({ name: media.name ?? "" });
+
+const { loading, execute } = useSubmitHandler({
+  formRef,
+  onSuccess: (result) => onDialogOK(result),
+});
+
+async function onSubmit() {
+  await execute(() => {
+    const formData = new FormData();
+    formData.append("name", form.value.name);
+    formData.append("origem", media.origem);
+    formData.append("origem_id", media.origem_id);
+    if (selectedFile.value) {
+      formData.append("file", selectedFile.value);
+    }
+    return updateStudentMedia(media.id, formData);
+  });
+}
+</script>

+ 19 - 0
src/pages/students/tabs/MediaTab.vue

@@ -23,6 +23,14 @@
           :disable="!row.file_url"
           @click.stop="openFile(row.file_url)"
         />
+        <q-btn
+          flat
+          round
+          dense
+          icon="mdi-file-edit-outline"
+          class="q-mr-xs"
+          @click.stop="openEditDialog(row)"
+        />
         <q-btn
           flat
           round
@@ -40,6 +48,7 @@ import { ref, onMounted } from "vue";
 import { useQuasar } from "quasar";
 import DefaultTable from "src/components/defaults/DefaultTable.vue";
 import AddStudentMediaDialog from "src/pages/students/components/AddStudentMediaDialog.vue";
+import EditStudentMediaDialog from "src/pages/students/components/EditStudentMediaDialog.vue";
 import { getStudentMedias, deleteStudentMedia } from "src/api/student_media";
 
 const props = defineProps({
@@ -73,6 +82,16 @@ function openAddDialog() {
   });
 }
 
+function openEditDialog(row) {
+  $q.dialog({
+    component: EditStudentMediaDialog,
+    componentProps: { media: row },
+  }).onOk((updated) => {
+    const index = rows.value.findIndex((r) => r.id === updated.id);
+    if (index !== -1) rows.value[index] = updated;
+  });
+}
+
 function openFile(url) {
   window.open(url, "_blank");
 }