feat(frontend): finish delivery

Signed-off-by: Fernando Fernández <ferferga@hotmail.com>

.docker/nginx.conf

@@ -24,7 +24,8 @@ server {
  }
 
  location /admin/ {
- rewrite ^/admin/(.*) /admin/$1 break;
+ #rewrite ^/admin/(.*) /admin/$1 break;
+ rewrite ^/admin/(.*) /$1 break;
  proxy_pass http://127.0.0.1:8080/;
  include uwsgi_params;
  uwsgi_param UWSGI_SCHEME $scheme;

.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

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',

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>
 

frontend/src/components/pages/clase/ComentariosActividad.vue

@@ -1,15 +1,19 @@
 <template>
- <QForm class="pa-10">
+ <QForm
+ v-if="$server.user"
+ class="pa-10">
  <QInput
  v-model="commentBody"
  filled
  type="textarea"
  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>

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>

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;
 }

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>

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';
 

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>

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('/');
  }

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,

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']

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>>,