From 4e54d24f9f5e5893a9e69f4b323c2051b95f6314 Mon Sep 17 00:00:00 2001
From: Eghinner <eghinner@gmail.com>
Date: Mon, 15 May 2023 14:29:26 -0400
Subject: [PATCH 1/3] feat: cambiar foto en perfil

---
 src/App.vue                                   |  2 +
 src/components/ModalFile/ModalFile.vue        | 59 +++++++++++++++++++
 src/components/ModalFile/index.js             |  3 +
 .../User/components/UserHeader/UserHeader.vue | 19 ++++--
 4 files changed, 77 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ModalFile/ModalFile.vue
 create mode 100644 src/components/ModalFile/index.js

diff --git a/src/App.vue b/src/App.vue
index be2f985c..45abf32a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,5 +19,7 @@ html,
 body,
 #q-app {
   height: 100%;
+  position: relative;
+  min-height: 650px;
 }
 </style>
diff --git a/src/components/ModalFile/ModalFile.vue b/src/components/ModalFile/ModalFile.vue
new file mode 100644
index 00000000..2b0daf53
--- /dev/null
+++ b/src/components/ModalFile/ModalFile.vue
@@ -0,0 +1,59 @@
+<template>
+  <div class="q-pa-md q-gutter-sm">
+    <q-dialog ref="dialogRef">
+      <q-card>
+        <q-card-section class="row justify-end q-pb-none">
+          <q-btn icon="close" flat round dense v-close-popup />
+        </q-card-section>
+        <q-card-section class="column items-center text-center q-pt-none gap-sm"
+          >El tamaño ideal para las imágenes de avatar es de
+          <b>100x100 píxeles</b>. Te sugerimos ajustar tu imagen antes de
+          subirla
+          <q-space />
+          <q-file
+            label-color="white"
+            bg-color="dark"
+            standout
+            v-model="selectedFiles"
+            label="Subir imagen"
+            class="q-mt-md"
+            accept="image/png, image/jpeg, image/jpg"
+            @input="handleChange"
+          >
+            <template v-slot:append>
+              <q-icon name="upload" color="white" />
+            </template>
+          </q-file>
+        </q-card-section>
+      </q-card>
+    </q-dialog>
+  </div>
+</template>
+<script>
+import { useDialogPluginComponent } from 'quasar';
+
+export default {
+  props: {
+    id: {
+      type: String,
+      required: true,
+    },
+    uploadImage: {
+      type: Function,
+    },
+  },
+  emits: [...useDialogPluginComponent.emits],
+  methods: {
+    async handleChange(event) {
+      await this.uploadImage(event);
+      this.dialogRef.hide();
+    },
+  },
+  setup() {
+    const { dialogRef } = useDialogPluginComponent();
+    return {
+      dialogRef,
+    };
+  },
+};
+</script>
diff --git a/src/components/ModalFile/index.js b/src/components/ModalFile/index.js
new file mode 100644
index 00000000..b8bd4fe0
--- /dev/null
+++ b/src/components/ModalFile/index.js
@@ -0,0 +1,3 @@
+import ModalFile from './ModalFile.vue';
+
+export default ModalFile;
diff --git a/src/pages/User/components/UserHeader/UserHeader.vue b/src/pages/User/components/UserHeader/UserHeader.vue
index a5fdd6e9..2a5ae464 100644
--- a/src/pages/User/components/UserHeader/UserHeader.vue
+++ b/src/pages/User/components/UserHeader/UserHeader.vue
@@ -11,6 +11,7 @@
               class="UserHeader__avatar"
               color="black"
               text-color="white"
+              @click="openModal"
             >
               <q-img :src="showAvatar" />
               <q-icon
@@ -19,12 +20,6 @@
                 class="UserHeader__editIcon"
                 name="add"
               />
-              <input
-                type="file"
-                id="avatar"
-                accept="image/png, image/jpeg, image/jpg"
-                @change="uploadImage"
-              />
             </q-avatar>
           </q-btn>
           <div class="UserHeader__information">
@@ -64,6 +59,8 @@ import {
   updateImageGraqhql,
 } from './utils/handleAvatarUpload';
 import { ref, Ref } from 'vue';
+import { Dialog } from 'quasar';
+import ModalFile from 'src/components/ModalFile/ModalFile.vue';
 
 export interface UserHeaderProps {
   isMembershipActive: boolean;
@@ -85,4 +82,14 @@ const uploadImage = async (event: Event) => {
   onUpdateUserAvatar(props.id, uploadedImage);
   showAvatar.value = uploadedImage;
 };
+
+const openModal = async () => {
+  Dialog.create({
+    component: ModalFile,
+    componentProps: {
+      uploadImage: uploadImage,
+      id: props.id,
+    },
+  });
+};
 </script>

From 5dc85f66ddfc58bd7f4b135b6ff0f975ffe3779d Mon Sep 17 00:00:00 2001
From: Eghinner <eghinner@gmail.com>
Date: Mon, 15 May 2023 17:36:42 -0400
Subject: [PATCH 2/3] fix: input file custom button

---
 src/components/ModalFile/ModalFile.vue | 14 ++++++++------
 src/components/ModalFile/styles.scss   | 14 ++++++++++++++
 2 files changed, 22 insertions(+), 6 deletions(-)
 create mode 100644 src/components/ModalFile/styles.scss

diff --git a/src/components/ModalFile/ModalFile.vue b/src/components/ModalFile/ModalFile.vue
index 2b0daf53..d140798f 100644
--- a/src/components/ModalFile/ModalFile.vue
+++ b/src/components/ModalFile/ModalFile.vue
@@ -5,18 +5,19 @@
         <q-card-section class="row justify-end q-pb-none">
           <q-btn icon="close" flat round dense v-close-popup />
         </q-card-section>
-        <q-card-section class="column items-center text-center q-pt-none gap-sm"
-          >El tamaño ideal para las imágenes de avatar es de
-          <b>100x100 píxeles</b>. Te sugerimos ajustar tu imagen antes de
-          subirla
-          <q-space />
+        <q-card-section class="text-center q-pt-none">
+          <div class="q-mb-sm">
+            El tamaño ideal para las imágenes de avatar es de
+            <b>100x100 píxeles</b>.
+          </div>
+          Te sugerimos ajustar tu imagen antes de subirla
           <q-file
             label-color="white"
             bg-color="dark"
             standout
             v-model="selectedFiles"
             label="Subir imagen"
-            class="q-mt-md"
+            class="q-mt-md custom"
             accept="image/png, image/jpeg, image/jpg"
             @input="handleChange"
           >
@@ -31,6 +32,7 @@
 </template>
 <script>
 import { useDialogPluginComponent } from 'quasar';
+import './styles.scss';
 
 export default {
   props: {
diff --git a/src/components/ModalFile/styles.scss b/src/components/ModalFile/styles.scss
new file mode 100644
index 00000000..b355fce1
--- /dev/null
+++ b/src/components/ModalFile/styles.scss
@@ -0,0 +1,14 @@
+.custom {
+  .q-field__inner {
+    max-width: 180px;
+    margin: 0 auto;
+  }
+
+  .q-field__control {
+    padding: 0 25px;
+  }
+
+  .q-field__append {
+    padding-left: 8px;
+  }
+}

From a134c942851f7705b2ea7d6580383221b419c474 Mon Sep 17 00:00:00 2001
From: Eghinner <eghinner@gmail.com>
Date: Tue, 16 May 2023 19:05:14 -0400
Subject: [PATCH 3/3] feat: download requirement pdf

---
 src/pages/Event/Event.layout.vue | 11 +++++++++++
 src/services/fragments/Event.js  |  1 +
 src/utils/apollo.types.ts        |  1 +
 3 files changed, 13 insertions(+)

diff --git a/src/pages/Event/Event.layout.vue b/src/pages/Event/Event.layout.vue
index ef573ab9..4381afc2 100644
--- a/src/pages/Event/Event.layout.vue
+++ b/src/pages/Event/Event.layout.vue
@@ -16,6 +16,17 @@
         <div class="Event__description">
           {{ event.description }}
         </div>
+        <div class="q-mt-md">
+          <q-btn
+            v-if="event.requirements_url"
+            icon="cloud_download"
+            round
+            color="dark"
+            size="lg"
+            :href="event.requirements_url"
+            download
+          />
+        </div>
         <q-btn
           v-if="!userInscriptionId"
           @click="$emit('subscribeUserToEvent')"
diff --git a/src/services/fragments/Event.js b/src/services/fragments/Event.js
index 20ecae13..f7b606a8 100644
--- a/src/services/fragments/Event.js
+++ b/src/services/fragments/Event.js
@@ -6,6 +6,7 @@ export const EventInfo = gql`
     description
     image_url
     invitation_url
+    requirements_url
     title
     type
     id
diff --git a/src/utils/apollo.types.ts b/src/utils/apollo.types.ts
index ca285a27..57680c3c 100644
--- a/src/utils/apollo.types.ts
+++ b/src/utils/apollo.types.ts
@@ -151,6 +151,7 @@ export interface Event {
   date: string;
   type: EventType.PRIVATE | EventType.PUBLIC;
   inscriptions?: Inscriptions[];
+  requirements_url?: string;
 }
 
 // Query returns