From c23225750be3ba20939c880a482e300330e93370 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Wed, 13 Dec 2023 23:58:13 +0100
Subject: [PATCH] feat(frontend): finish delivery
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>
---
 .docker/nginx.conf                            |  5 +--
 .docker/run.sh                                |  2 +-
 backend/traineerbook/settings.py              |  2 +-
 .../src/components/layout/CarritoHeader.vue   | 11 +++---
 .../pages/clase/ComentariosActividad.vue      | 33 +++++++++++++++--
 .../components/pages/clase/TablaActividad.vue | 19 +++++++---
 frontend/src/composables/use-cart.ts          | 16 ++++++---
 frontend/src/pages/cart.vue                   | 36 +++++++++++++++++++
 frontend/src/pages/clase/[id].vue             |  9 +++--
 frontend/src/pages/index.vue                  |  2 --
 frontend/src/pages/register.vue               |  2 --
 frontend/src/plugins/server/index.ts          |  3 +-
 frontend/types/global/components.d.ts         |  1 +
 frontend/types/global/routes.d.ts             |  1 +
 14 files changed, 112 insertions(+), 30 deletions(-)
 create mode 100644 frontend/src/pages/cart.vue

diff --git a/.docker/nginx.conf b/.docker/nginx.conf
index 6502937..78b1135 100644
--- a/.docker/nginx.conf
+++ b/.docker/nginx.conf
@@ -24,8 +24,9 @@ server {
     }
 
     location /admin/ {
-        rewrite ^/admin/(.*) /admin/$1 break;
-        proxy_pass http://127.0.0.1:8080/;
+        #rewrite ^/admin/(.*) /admin/$1 break;
+        #rewrite ^/admin/(.*) /$1 break;
+        proxy_pass http://127.0.0.1:8080/$request_uri;
         include                 uwsgi_params;
         uwsgi_param             UWSGI_SCHEME   $scheme;
         proxy_pass_request_headers on;
diff --git a/.docker/run.sh b/.docker/run.sh
index 04c9794..71237c5 100644
--- a/.docker/run.sh
+++ b/.docker/run.sh
@@ -4,4 +4,4 @@ echo "Starting TraineerBook.."
 echo ""
 service nginx start
 echo ""
-exec python manage.py runserver 127.0.0.1:8080
+exec python manage.py runserver 0.0.0.0:8080
diff --git a/backend/traineerbook/settings.py b/backend/traineerbook/settings.py
index db39921..524ed2f 100644
--- a/backend/traineerbook/settings.py
+++ b/backend/traineerbook/settings.py
@@ -81,7 +81,7 @@
 CORS_ALLOW_ALL_ORIGINS = True
 CORS_ALLOW_CREDENTIALS = True
 CORS_ALLOW_PRIVATE_NETWORK = True
-CSRF_TRUSTED_ORIGINS=['http://*', 'https://*']
+CSRF_TRUSTED_ORIGINS=['https://localhost:80', 'https://*']
 
 MIDDLEWARE = [
     'traineerbook.middlewares.AddHeaderMiddleware',
diff --git a/frontend/src/components/layout/CarritoHeader.vue b/frontend/src/components/layout/CarritoHeader.vue
index 0833cd8..35cd43b 100644
--- a/frontend/src/components/layout/CarritoHeader.vue
+++ b/frontend/src/components/layout/CarritoHeader.vue
@@ -3,18 +3,15 @@
     v-slot="{ navigate }"
     to="/cart"
     custom>
-    <QAvatar
-      color="green"
-      class="mr-2 cursor-pointer"
-      @click="navigate">
+    <QBtn :disable="cart.cart.length === 0" @click="() => navigate">
       <IMdiCart />
       <QBadge
-        v-if="cart.length > 0"
+        v-if="cart.cart.length > 0"
         color="red"
         floating>
-        {{ cart.length }}
+        {{ cart.cart.length }}
       </QBadge>
-    </QAvatar>
+    </QBtn>
   </RouterLink>
 </template>
 
diff --git a/frontend/src/components/pages/clase/ComentariosActividad.vue b/frontend/src/components/pages/clase/ComentariosActividad.vue
index 1962524..a1582ee 100644
--- a/frontend/src/components/pages/clase/ComentariosActividad.vue
+++ b/frontend/src/components/pages/clase/ComentariosActividad.vue
@@ -1,5 +1,7 @@
 <template>
-  <QForm class="pa-10">
+  <QForm
+    v-if="$server.user"
+    class="pa-10">
     <QInput
       v-model="commentBody"
       filled
@@ -7,9 +9,11 @@
       label="Deja un comentario" />
     <div class="flex justify-end">
       <QBtn
+        :loading="loading"
         label="Enviar"
         type="submit"
-        color="primary" />
+        color="primary"
+        @click.prevent="submitComment" />
     </div>
   </QForm>
 
@@ -36,8 +40,31 @@
 
 <script setup lang="ts">
 import { Comment } from '@/api';
+import { useServer } from '@/composables';
 import { ref } from 'vue';
 
-const props = defineProps<{ comments: Comment[] }>();
+const props = defineProps<{ comments: Comment[], id: number }>();
+const emit = defineEmits<{
+  'update': [];
+}>();
+const server = useServer();
 const commentBody = ref('');
+const loading = ref(false);
+
+/**
+ * Send comment
+ */
+async function submitComment(): Promise<void> {
+  try {
+    loading.value = true;
+    await server.api.comment.commentCreateCreate({
+      activity: props.id,
+      content: commentBody.value
+    });
+    emit('update');
+  } catch {} finally {
+    loading.value = false;
+  }
+
+}
 </script>
diff --git a/frontend/src/components/pages/clase/TablaActividad.vue b/frontend/src/components/pages/clase/TablaActividad.vue
index 7bc2e07..5ac4174 100644
--- a/frontend/src/components/pages/clase/TablaActividad.vue
+++ b/frontend/src/components/pages/clase/TablaActividad.vue
@@ -7,7 +7,7 @@
       bordered
       :rows="rows"
       :columns="columns"
-      row-key="name"
+      row-key="key"
       hide-bottom
       virtual-scroll
       selection="multiple" />
@@ -18,7 +18,7 @@
         class="ma-3"
         :label="selected.length > 0 ? `Añadir al carrito (${selected.length} elementos)` : 'Añadir al carrito'"
         color="purple"
-        @click="cart.concat(selected)">
+        @click="addToCart">
         <IMdiCart />
       </QBtn>
       <RouterLink
@@ -31,7 +31,7 @@
           text-color="black"
           :label="selected.length > 0 ? `Comprar ya (${selected.length} elementos)` : 'Comprar ya'"
           @click="() => {
-            cart.concat(selected)
+            addToCart()
             navigate()
           }" />
       </RouterLink>
@@ -46,7 +46,7 @@ import { computed, ref } from 'vue';
 
 const props = defineProps<{ products: Product[] }>();
 
-const selected = ref([]);
+const selected = ref<typeof rows.value>([]);
 const cart = useCart();
 
 interface Column {
@@ -85,6 +85,7 @@ const rows = computed(() => {
     const stringHoraFin = `${horaFin}:${minutosFin}`;
 
     return {
+      key: product.id,
       'dia_start': stringInicio,
       'dia_fin': stringFin,
       'hora_start': stringHoraInicio,
@@ -94,4 +95,14 @@ const rows = computed(() => {
   });
 });
 
+function addToCart() {
+  const cartsId = cart.value.cart.map((item) => item.id);
+  const productsToAdd = selected.value.map((item) =>
+    props.products.find((product) => product.id === item.key))
+    .filter((i) => i !== undefined)
+    .filter((i) => !cartsId.includes(i?.id));
+
+  cart.value.cart = [...cart.value.cart, ...productsToAdd as Product[]];
+}
+
 </script>
diff --git a/frontend/src/composables/use-cart.ts b/frontend/src/composables/use-cart.ts
index b941555..ca09b51 100644
--- a/frontend/src/composables/use-cart.ts
+++ b/frontend/src/composables/use-cart.ts
@@ -1,10 +1,18 @@
 import { Product } from '@/api';
-import { Ref, ref } from 'vue';
+import { useStorage } from '@vueuse/core';
+
+export const cart = useStorage(
+  'cart',
+  {
+    cart: [] as Product[],
+    quantityMap: new Map<number, number>()
+  },
+  localStorage
+);
 
-export const cart = ref<Product[]>([]);
 /**
- *
+ * Retuns cart store
  */
-export function useCart(): Ref<Product[]> {
+export function useCart(): typeof cart {
   return cart;
 }
diff --git a/frontend/src/pages/cart.vue b/frontend/src/pages/cart.vue
new file mode 100644
index 0000000..d622372
--- /dev/null
+++ b/frontend/src/pages/cart.vue
@@ -0,0 +1,36 @@
+<template>
+  <h3 style="text-align: center">
+    CARRITO
+  </h3>
+  <QList>
+    <QItem
+      v-for="item in cart.cart"
+      :key="item.id">
+      <QItemSection>
+        <QImg
+          v-if="getActivityFromProduct(item.id)?.image.data"
+          :src="getActivityFromProduct(item.id)?.image.data" />
+        <QItemLabel v-if="getActivityFromProduct(item.id)?.name">{{ getActivityFromProduct(item.id)?.name }}</QItemLabel>
+      </QItemSection>
+      <QItemSection side>
+        <QItemLabel>{{ item.price }}€</QItemLabel>
+      </QItemSection>
+    </QItem>
+  </QList>
+</template>
+
+<script setup lang="ts">
+import { Activity } from '@/api';
+import { activities } from '@/composables/use-activities';
+import { useCart } from '@/composables/use-cart';
+
+const cart = useCart();
+
+function getActivityFromProduct(id: number | undefined): Activity | undefined {
+  return activities.value.find(i => i.id === id);
+}
+
+function updateQuantity(productId: number, quantity: number) {
+  cart.value.quantityMap.set(productId, quantity);
+}
+</script>
diff --git a/frontend/src/pages/clase/[id].vue b/frontend/src/pages/clase/[id].vue
index 62c4ce3..ab88530 100644
--- a/frontend/src/pages/clase/[id].vue
+++ b/frontend/src/pages/clase/[id].vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    v-if="activity"
+    v-if="activity && activity.id"
     style="margin-top: 5%;">
     <div class="row">
       <div class="col-6">
@@ -21,7 +21,10 @@
     <h3 style="margin-left: 20px;">
       Comentarios
     </h3>
-    <ComentariosActividad :comments="comments" />
+    <ComentariosActividad
+      :id="activity.id"
+      :comments="comments"
+      @update="useActivities" />
   </div>
   <h1 v-else>
     No se ha encontrado la actividad
@@ -31,7 +34,7 @@
 <script setup lang="ts">
 import { Comment, Product } from '@/api';
 import { useServer } from '@/composables';
-import { activities } from '@/composables/use-activities';
+import { activities, useActivities } from '@/composables/use-activities';
 import { computed, ref, watch } from 'vue';
 import { useRoute } from 'vue-router/auto';
 
diff --git a/frontend/src/pages/index.vue b/frontend/src/pages/index.vue
index 2185923..aab57f1 100644
--- a/frontend/src/pages/index.vue
+++ b/frontend/src/pages/index.vue
@@ -38,8 +38,6 @@
 
 <script setup lang="ts">
 import { activities } from '@/composables/use-activities';
-
-console.log(activities.value);
 </script>
 
 <style scoped>
diff --git a/frontend/src/pages/register.vue b/frontend/src/pages/register.vue
index 0caf19d..ad54b31 100644
--- a/frontend/src/pages/register.vue
+++ b/frontend/src/pages/register.vue
@@ -101,8 +101,6 @@ async function submitForm(): Promise<void> {
 
     await server.signUpUser(username.value, password.value, email.value, rememberMe.value);
 
-    console.log(server.user);
-
     if (server.user) {
       await router.replace('/');
     }
diff --git a/frontend/src/plugins/server/index.ts b/frontend/src/plugins/server/index.ts
index 4f8545f..ade5809 100644
--- a/frontend/src/plugins/server/index.ts
+++ b/frontend/src/plugins/server/index.ts
@@ -32,7 +32,8 @@ class ServerPlugin {
   private _defaultState: AuthState = {
     token: undefined,
     user: undefined,
-    rememberMe: false }; private _state = useStorage(
+    rememberMe: false };
+  private _state = useStorage(
     'auth',
     structuredClone(this._defaultState),
     localStorage,
diff --git a/frontend/types/global/components.d.ts b/frontend/types/global/components.d.ts
index d68fd13..b015a8c 100644
--- a/frontend/types/global/components.d.ts
+++ b/frontend/types/global/components.d.ts
@@ -30,6 +30,7 @@ declare module 'vue' {
     QImg: typeof import('quasar')['QImg']
     QInput: typeof import('quasar')['QInput']
     QItem: typeof import('quasar')['QItem']
+    QItemLabel: typeof import('quasar')['QItemLabel']
     QItemSection: typeof import('quasar')['QItemSection']
     QLayout: typeof import('quasar')['QLayout']
     QList: typeof import('quasar')['QList']
diff --git a/frontend/types/global/routes.d.ts b/frontend/types/global/routes.d.ts
index 45a1a39..4ec7589 100644
--- a/frontend/types/global/routes.d.ts
+++ b/frontend/types/global/routes.d.ts
@@ -40,6 +40,7 @@ import type {
 declare module 'vue-router/auto/routes' {
   export interface RouteNamedMap {
     '/': RouteRecordInfo<'/', '/', Record<never, never>, Record<never, never>>,
+    '/cart': RouteRecordInfo<'/cart', '/cart', Record<never, never>, Record<never, never>>,
     '/clase/[id]': RouteRecordInfo<'/clase/[id]', '/clase/:id', { id: ParamValue<true> }, { id: ParamValue<false> }>,
     '/issues': RouteRecordInfo<'/issues', '/issues', Record<never, never>, Record<never, never>>,
     '/issues/new': RouteRecordInfo<'/issues/new', '/issues/new', Record<never, never>, Record<never, never>>,