From 8fb20999f2f99cc6ccd82421bede98d5d8263575 Mon Sep 17 00:00:00 2001
From: Cadiducho <cadiducho@gmail.com>
Date: Sat, 26 Oct 2024 14:20:26 +0200
Subject: [PATCH] admin: set session defining grid from panel

---
 src/_services/session.service.ts              |   9 +-
 .../seasons/gps/EditGrandPrixInSeason.vue     | 560 ++++++++++--------
 .../seasons/gps/EditSessionGrandPrix.vue      | 461 ++++++++------
 3 files changed, 588 insertions(+), 442 deletions(-)

diff --git a/src/_services/session.service.ts b/src/_services/session.service.ts
index 3fb6326..542f9f8 100644
--- a/src/_services/session.service.ts
+++ b/src/_services/session.service.ts
@@ -60,11 +60,14 @@ export class SessionService extends PrognoService<IRaceSession, RaceSession> {
         return this.postObjectToAPI(`/gps/${gp.competition.id}/${gp.season.id}/${gp.id}/sessions`, data);
     }
 
-    public async updateSessionInGrandPrix(gp: GrandPrix, session: RaceSession): Promise<Array<RaceSession>> {
-        return await axios.put(`/gps/${gp.competition.id}/${gp.season.id}/${gp.id}/sessions/${session.id}`, session);
+    public async updateSessionInGrandPrix(gp: GrandPrix, session: RaceSession, data: {
+      date: Date;
+      defineGridOf: number[]
+    }): Promise<Array<RaceSession>> {
+        return await axios.put(`/gps/${gp.competition.id}/${gp.season.id}/${gp.id}/sessions/${session.id}`, data);
     }
 
     public async removeSessionFromGrandPrix(gp: GrandPrix, session: RaceSession): Promise<Array<RaceSession>> {
         return await axios.delete(`/gps/${gp.competition.id}/${gp.season.id}/${gp.id}/sessions/${session.id}`);
     }
-}
\ No newline at end of file
+}
diff --git a/src/pages/admin/seasons/gps/EditGrandPrixInSeason.vue b/src/pages/admin/seasons/gps/EditGrandPrixInSeason.vue
index 65a2c75..3cebfd3 100644
--- a/src/pages/admin/seasons/gps/EditGrandPrixInSeason.vue
+++ b/src/pages/admin/seasons/gps/EditGrandPrixInSeason.vue
@@ -1,148 +1,216 @@
 <template>
-    <div id="adminDrivers" class="box">
-
-        <loading v-if="isLoadingGrandPrix"/>
-        <template v-else-if="!thereIsGrandPrix">
-            <p>El Gran Premio {{ id }} no ha sido encontrado</p>
-        </template>
-        <template v-else>
-
-            <div class="columns is-variable is-5">
-                <div class="column">
-                    <PTitle :name="'Administración de ' + grandPrix.name + ' de ' + grandPrix.season.name"/>
-                </div>
-                <div class="column is-3">
-                    <GrandPrixPagination isAdminPag :competition="grandPrix.competition" :grand-prix="grandPrix"/>
-                </div>
+  <nav
+    id="adminDrivers"
+    class="box"
+  >
+    <loading v-if="isLoadingGrandPrix" />
+    <template v-else-if="!thereIsGrandPrix">
+      <p>El Gran Premio {{ id }} no ha sido encontrado</p>
+    </template>
+    <template v-else>
+      <AdminGrandPrixPageHeader
+        :grand-prix="grandPrix"
+        :competition="competition"
+      />
+
+      <nav class="flex my-4">
+        <p-button
+          tag="router-link"
+          color="success"
+          icon="fa fa-eye"
+          class="mr-2"
+          :to="{ name: 'gpdetails', params: {gp: grandPrix.id, season: grandPrix.season.name, competition: grandPrix.competition.code} }"
+        >
+          Ir al Gran Premio
+        </p-button>
+        <p-button
+          tag="router-link"
+          color="blue"
+          icon="fa fa-list"
+          class="mr-2"
+          :to="{ name: 'adminGps' }"
+        >
+          Lista de grandes premios
+        </p-button>
+        <p-button
+          tag="router-link"
+          color="purple"
+          icon="fa fa-cogs"
+          class="mr-2"
+          :to="{ name: 'adminSeasonEdit', params: {season: grandPrix.season.name} }"
+        >
+          Admin de temporada
+        </p-button>
+      </nav>
+
+      <div class="columns">
+        <div class="column is-one-fifth">
+          <SessionsInGrandPrix
+            :grand-prix="grandPrix"
+            :sessions="grandPrix.sessions"
+          />
+        </div>
+        <div class="column">
+          <h2 class="title">
+            Datos del {{ grandPrix.name }}
+          </h2>
+
+          <div class="columns">
+            <div class="column is-four-fifths">
+              <o-field label="Nombre">
+                <o-input
+                  v-model="grandPrix.name"
+                  name="name"
+                  expanded
+                  lazy
+                />
+              </o-field>
             </div>
-
-            <div class="block">
-                <p-button tag="router-link" color="success" icon="fa fa-eye"
-                          :to="{ name: 'gpdetails', params: {gp: grandPrix.id, season: grandPrix.season.name, competition: grandPrix.competition.code} }">
-                    Ir al Gran Premio
-                </p-button>
-                <p-button tag="router-link" color="blue" icon="fa fa-list"
-                          :to="{ name: 'adminGps' }">
-                    Lista de grandes premios
-                </p-button>
-                <p-button tag="router-link" color="purple" icon="fa fa-cogs"
-                          :to="{ name: 'adminSeasonEdit', params: {season: grandPrix.season.name} }">
-                    Admin de temporada
-                </p-button>
-
+            <div class="column">
+              <o-field label="Estado">
+                <o-switch
+                  v-model="grandPrix.suspended"
+                  class="mt-2"
+                  variant="danger"
+                  passive-variant="primary"
+                >
+                  {{ grandPrix.suspended ? "Suspendido" : "Activo" }}
+                </o-switch>
+              </o-field>
             </div>
-
-                <div class="columns">
-                    <div class="column is-one-fifth">
-                        <SessionsInGrandPrix :grand-prix="grandPrix" :sessions="grandPrix.sessions"/>
-                    </div>
-                    <div class="column">
-                        <h2 class="title">Datos del {{ grandPrix.name }}</h2>
-
-                        <div class="columns">
-                            <div class="column is-four-fifths">
-                                <o-field label="Nombre">
-                                    <o-input v-model="grandPrix.name" name="name" expanded lazy></o-input>
-                                </o-field>
-                            </div>
-                            <div class="column">
-                                <o-field label="Estado">
-                                    <o-switch
-                                        class="mt-2"
-                                        v-model="grandPrix.suspended"
-                                        variant="danger"
-                                        passive-variant="primary">
-                                        {{ grandPrix.suspended ? "Suspendido" : "Activo" }}
-                                    </o-switch>
-                                </o-field>
-                            </div>
-                        </div>
-
-                        <div class="columns">
-                            <div class="column">
-                                <o-field label="Código del Gran Premio">
-                                    <o-input v-model="grandPrix.code" name="code" expanded lazy></o-input>
-                                </o-field>
-
-                                <o-field label="Ronda del Gran Premio">
-                                    <o-input v-model="grandPrix.round" name="round" expanded lazy :min=0 type="number"></o-input>
-                                </o-field>
-
-                                <button class="button is-primary mt-2" :disabled="!isDataOk()" @click="editGrandPrix()">Editar datos del gran premio</button>
-
-                            </div>
-                            <div class="column">
-                                <o-field label="Circuito del Gran Premio">
-                                    <o-select v-model="grandPrix.circuit" placeholder="Selecciona un circuito" expanded>
-                                        <option
-                                            v-for="circuit in circuitList"
-                                            :value="circuit"
-                                            :key="circuit.id">
-                                            {{ circuit.name }}
-                                        </option>
-                                    </o-select>
-                                </o-field>
-
-                                <o-field label="Variante del circuito">
-                                    <o-select v-model="grandPrix.variant" placeholder="Selecciona un circuito" expanded>
-                                        <option
-                                            v-for="variant in variantsList"
-                                            :value="variant"
-                                            :key="variant.name">
-                                            {{ variant.name }}
-                                        </option>
-                                    </o-select>
-                                </o-field>
-
-                                <o-field label="Vueltas del Gran Premio">
-                                    <o-input v-model="grandPrix.laps" name="laps" expanded lazy :min=0 type="number"></o-input>
-                                </o-field>
-                            </div>
-                        </div>
-
-                        <div class="columns">
-                            <div class="column is-half">
-
-                                <label class="label mt-2">Imagen promocional del Gran Premio</label>
-                                <figure class="image is-16by9">
-                                    <img :src="grandPrix.promoImage()" alt="Promo image"/>
-
-                                    <label class="icon edit-icon">
-                                        <i class="fa fa-camera"></i>
-                                        <input @change="onFileChange" accept="image/*" tabindex="-1" type="file" hidden>
-                                    </label>
-                                </figure>
-                            </div>
-                        </div>
-
-                    </div>
-                </div>
-
-                <hr/>
-
-                <DriversInGrandPrix v-if="thereIsGrandPrix" :grand-prix="grandPrix"/>
-
-        </template>
-    </div>
-
-    <UploadFileModal v-show="showEditImageModal" @close="showEditImageModal = false"
-                     :stencilProps="{
-                        aspectRatio: 16/9
-                     }"
-                     :canvas="{
-                        maxWidth: 1080,
-                        maxHeight: 1024
-                     }"
-                     :file="selectedFile" stencil-component="rectangle"
-                     @submit-file="uploadPromoImage">
-        <template v-slot:title>Cambiar imagen de promoción del Gran Premio</template>
+          </div>
+
+          <div class="columns">
+            <div class="column">
+              <o-field label="Código del Gran Premio">
+                <o-input
+                  v-model="grandPrix.code"
+                  name="code"
+                  expanded
+                  lazy
+                />
+              </o-field>
+
+              <o-field label="Ronda del Gran Premio">
+                <o-input
+                  v-model="grandPrix.round"
+                  name="round"
+                  expanded
+                  lazy
+                  :min="0"
+                  type="number"
+                />
+              </o-field>
+
+              <button
+                class="button is-primary mt-2"
+                :disabled="!isDataOk()"
+                @click="editGrandPrix()"
+              >
+                Editar datos del gran premio
+              </button>
+            </div>
+            <div class="column">
+              <o-field label="Circuito del Gran Premio">
+                <o-select
+                  v-model="grandPrix.circuit"
+                  placeholder="Selecciona un circuito"
+                  expanded
+                >
+                  <option
+                    v-for="circuit in circuitList"
+                    :key="circuit.id"
+                    :value="circuit"
+                  >
+                    {{ circuit.name }}
+                  </option>
+                </o-select>
+              </o-field>
+
+              <o-field label="Variante del circuito">
+                <o-select
+                  v-model="grandPrix.variant"
+                  placeholder="Selecciona un circuito"
+                  expanded
+                >
+                  <option
+                    v-for="variant in variantsList"
+                    :key="variant.name"
+                    :value="variant"
+                  >
+                    {{ variant.name }}
+                  </option>
+                </o-select>
+              </o-field>
+
+              <o-field label="Vueltas del Gran Premio">
+                <o-input
+                  v-model="grandPrix.laps"
+                  name="laps"
+                  expanded
+                  lazy
+                  :min="0"
+                  type="number"
+                />
+              </o-field>
+            </div>
+          </div>
+
+          <div class="columns">
+            <div class="column is-half">
+              <label class="label mt-2">Imagen promocional del Gran Premio</label>
+              <figure class="image is-16by9">
+                <img
+                  :src="grandPrix.promoImage()"
+                  alt="Promo image"
+                >
+
+                <label class="icon edit-icon">
+                  <i class="fa fa-camera" />
+                  <input
+                    accept="image/*"
+                    tabindex="-1"
+                    type="file"
+                    hidden
+                    @change="onFileChange"
+                  >
+                </label>
+              </figure>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <hr>
+
+      <DriversInGrandPrix
+        v-if="thereIsGrandPrix"
+        :grand-prix="grandPrix"
+      />
+    </template>
+
+    <UploadFileModal
+      v-show="showEditImageModal"
+      :stencil-props="{
+        aspectRatio: 16/9
+      }"
+      :canvas="{
+        maxWidth: 1080,
+        maxHeight: 1024
+      }"
+      :file="selectedFile"
+      stencil-component="rectangle"
+      @close="showEditImageModal = false"
+      @submit-file="uploadPromoImage"
+    >
+      <template #title>
+        Cambiar imagen de promoción del Gran Premio
+      </template>
     </UploadFileModal>
-
+  </nav>
 </template>
 
 <script lang="ts">
-import PTitle from "@/components/lib/PTitle.vue";
-import AlertNoPermission from "@/components/lib/AlertNoPermission.vue";
 import {circuitService, grandPrixService, notificationService, seasonService} from "@/_services";
 import {Season} from "@/types/Season";
 import {GrandPrix} from "@/types/GrandPrix";
@@ -152,127 +220,127 @@ import {defineComponent} from "vue";
 import {useAuthStore} from "@/store/authStore";
 import SessionsInGrandPrix from "@/components/admin/gps/SessionsInGrandPrix.vue";
 import DriversInGrandPrix from "@/components/admin/gps/DriversInGrandPrix.vue";
-import GrandPrixPagination from "@/components/gps/GrandPrixPagination.vue";
 import UploadFileModal from "@/components/lib/UploadFileModal.vue";
 import {CircuitVariant} from "@/types/CircuitVariant";
 import PButton from "@/components/lib/forms/PButton.vue";
+import AdminGrandPrixPageHeader from "@/components/gps/AdminGrandPrixPageHeader.vue";
 
 export default defineComponent({
-    name: "EditGrandPrixInSeason",
-    components: {
-        PButton,
-        DriversInGrandPrix,
-        PTitle,
-        SessionsInGrandPrix,
-        GrandPrixPagination,
-        UploadFileModal
-    },
-    setup() {
-        const authStore = useAuthStore();
-        const currentUser = authStore.loggedUser;
-        return {currentUser};
-    },
-    data() {
-        return {
-            season: {name: this.$route.params.season} as Season,
-            id: this.$route.params.gp,
-
-            grandPrix: {} as GrandPrix,
-            thereIsGrandPrix: false,
-            isLoadingGrandPrix: true,
-
-            showEditImageModal: false,
-            selectedFile: null,
+  name: "EditGrandPrixInSeason",
+  components: {
+    AdminGrandPrixPageHeader,
+    PButton,
+    DriversInGrandPrix,
+    SessionsInGrandPrix,
+    UploadFileModal
+  },
+  setup() {
+    const authStore = useAuthStore();
+    const currentUser = authStore.loggedUser;
+    return {currentUser};
+  },
+  data() {
+    return {
+      season: {name: this.$route.params.season} as Season,
+      id: this.$route.params.gp,
+
+      grandPrix: {} as GrandPrix,
+      thereIsGrandPrix: false,
+      isLoadingGrandPrix: true,
+
+      showEditImageModal: false,
+      selectedFile: null,
+
+      circuitList: new Array<Circuit>(),
+      seasonList: new Array<Season>(),
+    }
+  },
+  computed: {
+    variantsList(): Array<CircuitVariant> {
+      return this.grandPrix.circuit?.variants ?? [];
+    }
+  },
+  mounted() {
+    grandPrixService.getGrandPrixInSeason(this.season, this.id.toString())
+      .then(gp => {
+        this.grandPrix = gp;
+        this.thereIsGrandPrix = true;
+
+        circuitService.getCircuitList().then((list) => {
+          this.circuitList = [];
+          this.circuitList.push(...list);
+        });
+        seasonService.getSeasonList().then((list) => {
+          this.seasonList = [];
+          this.seasonList.push(...list);
+        });
 
-            circuitList: new Array<Circuit>(),
-            seasonList: new Array<Season>(),
-        }
+        this.season = gp.season;
+      }).catch((error) => {
+      notificationService.showNotification("No se ha encontrado el gran premio", "error");
+      console.log(error)
+    }).finally(() => {
+      this.isLoadingGrandPrix = false;
+    });
+  },
+  methods: {
+    isDataOk(): boolean {
+      return !(this.grandPrix!.id == undefined
+        && this.grandPrix!.code == undefined
+        && this.grandPrix!.name == undefined
+        && this.grandPrix!.circuit!.id == undefined
+        && this.grandPrix!.laps == undefined
+        && this.grandPrix!.round == undefined
+        && this.grandPrix!.season!.id == undefined
+      )
     },
-    methods: {
-        isDataOk(): boolean {
-            return !(this.grandPrix!.id == undefined
-                && this.grandPrix!.code == undefined
-                && this.grandPrix!.name == undefined
-                && this.grandPrix!.circuit!.id == undefined
-                && this.grandPrix!.laps == undefined
-                && this.grandPrix!.round == undefined
-                && this.grandPrix!.season!.id == undefined
-            )
-        },
-        editGrandPrix(): void {
-            let data = {
-                id: this.grandPrix!.id,
-                season: this.season.id,
-                round: this.grandPrix!.round,
-                name: this.grandPrix!.name,
-                code: this.grandPrix!.code,
-                circuit: this.grandPrix!.circuit.id,
-                variant: this.grandPrix!.circuit.variant.name,
-                laps: this.grandPrix!.laps,
-                suspended: this.grandPrix!.suspended
-            };
-
-            grandPrixService.editGrandPrix(data).then((result) => {
-                notificationService.showNotification("Se ha editado correctamente el gran premio `" + result.name + "`", "error");
-
-                this.$router.push({
-                    name: 'adminGps'
-                })
-            }).catch((error) => {
-                notificationService.showNotification(error.message, "error");
-            });
-        },
-        onFileChange(e: any) {
-            this.showEditImageModal = false;
-            this.selectedFile = null;
-
-            let file = e.target.files[0];
-            if (file) {
-                this.selectedFile = file;
-                this.showEditImageModal = true;
-            }
-        },
-        uploadPromoImage(blob: Blob) {
-            grandPrixService.changePromoImage(this.grandPrix, blob).then(() => {
-                notificationService.showNotification("Has cambiado la imagen de promoción");
-            }).catch(() => {
-                notificationService.showNotification("Ha ocurrido un error cambiando la imagen de promoción", "error");
-            });
-        }
+    editGrandPrix(): void {
+      let data = {
+        id: this.grandPrix!.id,
+        season: this.season.id,
+        round: this.grandPrix!.round,
+        name: this.grandPrix!.name,
+        code: this.grandPrix!.code,
+        circuit: this.grandPrix!.circuit.id,
+        variant: this.grandPrix!.circuit.variant.name,
+        laps: this.grandPrix!.laps,
+        suspended: this.grandPrix!.suspended
+      };
+
+      grandPrixService.editGrandPrix(data).then((result) => {
+        notificationService.showNotification("Se ha editado correctamente el gran premio `" + result.name + "`", "error");
+
+        this.$router.push({
+          name: 'adminGps'
+        })
+      }).catch((error) => {
+        notificationService.showNotification(error.message, "error");
+      });
     },
-    computed: {
-        variantsList(): Array<CircuitVariant> {
-            return this.grandPrix.circuit?.variants ?? [];
-        }
+    onFileChange(e: any) {
+      this.showEditImageModal = false;
+      this.selectedFile = null;
+
+      let file = e.target.files[0];
+      if (file) {
+        this.selectedFile = file;
+        this.showEditImageModal = true;
+      }
     },
-    mounted() {
-        grandPrixService.getGrandPrixInSeason(this.season, this.id.toString())
-            .then(gp => {
-                this.grandPrix = gp;
-                this.thereIsGrandPrix = true;
-
-                circuitService.getCircuitList().then((list) => {
-                    this.circuitList = [];
-                    this.circuitList.push(...list);
-                });
-                seasonService.getSeasonList().then((list) => {
-                    this.seasonList = [];
-                    this.seasonList.push(...list);
-                });
-
-                this.season = gp.season;
-            }).catch((error) => {
-                notificationService.showNotification("No se ha encontrado el gran premio", "error");
-                console.log(error)
-            }).finally(() => {
-                this.isLoadingGrandPrix = false;
-        });
+    uploadPromoImage(blob: Blob) {
+      grandPrixService.changePromoImage(this.grandPrix, blob).then(() => {
+        notificationService.showNotification("Has cambiado la imagen de promoción");
+      }).catch(() => {
+        notificationService.showNotification("Ha ocurrido un error cambiando la imagen de promoción", "error");
+      });
     }
+  }
 });
 </script>
+
 <style>
 .image.is-256x256 {
-    height: 256px;
-    width: 256px;
+  height: 256px;
+  width: 256px;
 }
 </style>
diff --git a/src/pages/admin/seasons/gps/EditSessionGrandPrix.vue b/src/pages/admin/seasons/gps/EditSessionGrandPrix.vue
index dc01abf..6f701b0 100644
--- a/src/pages/admin/seasons/gps/EditSessionGrandPrix.vue
+++ b/src/pages/admin/seasons/gps/EditSessionGrandPrix.vue
@@ -1,84 +1,142 @@
 <template>
+  <loading v-if="isLoadingData" />
+  <template v-else-if="!dataLoaded">
+    <p>El Gran Premio {{ id }} de {{ season.name }} en {{ session.name }} no ha sido encontrado</p>
+  </template>
+  <template v-else>
+    <AdminGrandPrixPageHeader
+      :grand-prix="grandPrix"
+      :competition="competition"
+    />
 
-    <loading v-if="isLoadingData"/>
-    <template v-else-if="!dataLoaded">
-        <p>El Gran Premio {{ id }} de {{ season.name }} en {{ session.name }} no ha sido encontrado</p>
-    </template>
-    <template v-else>
+    <nav class="flex my-4">
+      <p-button
+        color="info"
+        icon="fa fa-chevron-left"
+        :to="{ name: 'adminGpEditInSeason' }"
+        tag="router-link"
+        class="mr-2"
+      >
+        Volver a administración del Gran Premio
+      </p-button>
+      <p-button
+        color="success"
+        icon="fa fa-eye"
+        :to="{ name: 'gpdetails', params: {gp: grandPrix.id, season: grandPrix.season.name, competition: grandPrix.competition.code} }"
+        tag="router-link"
+        class="mr-2"
+      >
+        Ir al Gran Premio
+      </p-button>
+    </nav>
 
-        <div class="columns is-variable is-5">
-            <div class="column">
-                <PTitle :name="'Administración de ' + grandPrix.name + ' de ' + grandPrix.season.name"/>
-            </div>
-            <div class="column is-3">
-                <GrandPrixPagination isAdminPag :competition="competition" :grand-prix="grandPrix"/>
-            </div>
+    <p v-if="!dataLoaded">
+      El Gran Premio {{ id }} {{ session }} no ha sido encontrado
+    </p>
+    <template v-else>
+      <div class="grid grid-cols-1 md:grid-cols-5 gap-4">
+        <div class="md:col-span-1">
+          <SessionsInGrandPrix
+            :grand-prix="grandPrix"
+            :sessions="grandPrix.sessions"
+            :current-session="session"
+          />
         </div>
 
-        <div class="block">
-            <o-button variant="success" :to="{ name: 'gpdetails', params: {gp: grandPrix.id, season: grandPrix.season.name, competition: grandPrix.competition.code} }"
-                      tag="router-link" class="mr-2">
-                Ir al Gran Premio
-            </o-button>
-            <o-button variant="link" :to="{ name: 'adminGpEditInSeason' }" tag="router-link">
-                Volver a administración del Gran Premio
-            </o-button>
-        </div>
+        <div class="md:col-span-4">
+          <PTitle tag="h2">
+            {{ session.humanName() }} en {{ grandPrix.name }}
+          </PTitle>
+
+          <PrognoAlert
+            v-if="session.defineGridOf?.length"
+            variant="info"
+          >
+            Esta sesión define la parrilla de la sesión: {{
+              session.defineGridOf.map(ses => ses.humanName()).join(', ')
+            }}
+          </PrognoAlert>
+          <PrognoAlert
+            v-else
+            variant="danger"
+          >
+            Esta sesión no define la parrilla de ninguna sesión
+          </PrognoAlert>
+
+          <form class="mb-4">
+            <PLabel label="Fecha de la sesión" />
+            <Calendar
+              :value="session.date"
+              :options="calendarOptions"
+              @input="session.date = $event;"
+            />
 
-        <p v-if="!dataLoaded">El Gran Premio {{ id }} {{ session }} no ha sido encontrado</p>
-        <template v-else>
-
-            <div class="columns">
-                <div class="column is-one-fifth">
-                    <SessionsInGrandPrix :grand-prix="grandPrix" :sessions="grandPrix.sessions" :current-session="session"/>
-                </div>
-
-                <div class="column">
-                    <PTitle tag="h2">{{ session.humanName() }} en {{ grandPrix.name }}</PTitle>
-
-                    <o-field label="Fecha de la sesión">
-                        <Calendar :value="session.date" :options="calendarOptions"
-                                        v-on:input="session.date = $event;"/>
-                    </o-field>
-
-                    <button class="button is-primary mt-0 mb-4" @click="changeSessionData()">
-                        Editar datos de la sesión
-                    </button>
-
-                    <PrognoAlert v-if="session.defineGridOf?.length" variant="info">
-                        Esta sesión define la parrilla de la sesión: {{ session.defineGridOf.map(ses => ses.humanName()).join(', ') }}
-                    </PrognoAlert>
-                    <PrognoAlert v-else variant="danger">
-                        Esta sesión no define la parrilla de ninguna sesión
-                    </PrognoAlert>
-                    <hr/>
-
-
-                    <!-- Si no es quali, hay resultados y grid-->
-                    <div v-if="session.hasGrid" class="columns">
-                        <section class="column">
-                            <EditGrid :grandPrix="grandPrix" :session="session" :grid="startGrid" :hasSavedGrid="hasSavedGrid"/>
-                        </section>
-                        <section class="column">
-                            <EditResults :grandPrix="grandPrix" :session="session" :resultsInSession="resultsInSession" :hasSavedResults="hasSavedResults"/>
-                        </section>
-                    </div>
-
-                    <!-- En caso contrario mostrar solo selector de resultados -->
-                    <EditResults v-else :grandPrix="grandPrix" :session="session" :resultsInSession="resultsInSession"/>
-
-                </div>
+            <div class="flex flex-wrap mt-2">
+              <PLabel
+                class="w-full"
+                label="Define la parrilla de salida de las siguientes sesiones:"
+              />
+              <p-checkbox
+                v-for="ses in grandPrix.sessions.filter(gps => gps.id !== session.id)"
+                :id="ses.id"
+                :key="ses.id"
+                :checked="session.defineGridOf.map(dfg => dfg.id).includes(ses.id)"
+                @change="toggleDefiningGridSelection(ses, $event.target.checked)"
+              >
+                {{ ses.humanName() }}
+              </p-checkbox>
             </div>
-        </template>
+
+            <p-button
+              label="Actualizar datos de la sesión"
+              @click="changeSessionData"
+            />
+          </form>
+
+          <hr>
+
+          <!-- Si es sesión con grid, mostrar resultados y grid-->
+          <div
+            v-if="session.hasGrid"
+            class="grid grid-cols-1 md:grid-cols-2 gap-4"
+          >
+            <section class="md:col-span-1">
+              <EditGrid
+                :grand-prix="grandPrix"
+                :session="session"
+                :grid="startGrid"
+                :has-saved-grid="hasSavedGrid"
+              />
+            </section>
+            <section class="md:col-span-1">
+              <EditResults
+                :grand-prix="grandPrix"
+                :session="session"
+                :results-in-session="resultsInSession"
+                :has-saved-results="hasSavedResults"
+              />
+            </section>
+          </div>
+
+          <!-- En caso contrario mostrar solo selector de resultados -->
+          <EditResults
+            v-else
+            :grand-prix="grandPrix"
+            :session="session"
+            :results-in-session="resultsInSession"
+          />
+        </div>
+      </div>
     </template>
+  </template>
 </template>
 
 <script lang="ts">
 import PTitle from "@/components/lib/PTitle.vue";
 import {
-    driversService,
-    grandPrixService, notificationService,
-    sessionService
+  driversService,
+  grandPrixService, notificationService,
+  sessionService
 } from "@/_services";
 import {Competition} from "@/types/Competition";
 import {Season} from "@/types/Season";
@@ -91,142 +149,159 @@ import {RaceSession} from "@/types/RaceSession";
 import {Driver} from "@/types/Driver";
 import {useStyles} from "@/composables/useStyles";
 import {StartGridPosition} from "@/types/StartGridPosition";
-import GrandPrixPagination from "@/components/gps/GrandPrixPagination.vue";
 import EditResults from "@/components/admin/gps/EditResults.vue";
 import Calendar from "@/components/lib/Calendar.vue";
 import EditGrid from "@/components/admin/gps/EditGrid.vue";
 import PrognoAlert from "@/components/lib/PrognoAlert.vue";
 import PCheckbox from "@/components/lib/forms/PCheckbox.vue";
+import PButton from "@/components/lib/forms/PButton.vue";
+import PLabel from "@/components/lib/forms/PLabel.vue";
+import AdminGrandPrixPageHeader from "@/components/gps/AdminGrandPrixPageHeader.vue";
 
 export default defineComponent({
-    name: "EditSessionGrandPrix",
-    components: {
-        PCheckbox,
-        PrognoAlert,
-        EditGrid,
-        EditResults,
-        PTitle,
-        SessionsInGrandPrix,
-        GrandPrixPagination,
-        Calendar
-    },
-    setup() {
-        const authStore = useAuthStore();
-        const styles = useStyles();
+  name: "EditSessionGrandPrix",
+  components: {
+    AdminGrandPrixPageHeader,
+    PLabel,
+    PButton,
+    PCheckbox,
+    PrognoAlert,
+    EditGrid,
+    EditResults,
+    PTitle,
+    SessionsInGrandPrix,
+    Calendar
+  },
+  setup() {
+    const authStore = useAuthStore();
+    const styles = useStyles();
 
-        const currentUser = authStore.loggedUser;
-        const styleDriverCard = styles.styleDriverCard;
-        const styleDorsal = styles.styleDorsal;
+    const currentUser = authStore.loggedUser;
+    const styleDriverCard = styles.styleDriverCard;
+    const styleDorsal = styles.styleDorsal;
 
-        return {currentUser, styleDriverCard, styleDorsal};
-    },
-    data() {
-        return {
-            competition: {code: this.$route.params.competition} as Competition,
-            season: {name: this.$route.params.season} as Season,
-            id: this.$route.params.gp as string,
-            session: {id: parseInt(this.$route.params.session.toString())} as RaceSession,
-
-            notSendNotification: false,
-            notOverrideGrid: false,
-            fastLap: {} as Driver,
-            resultsInSession: new Array<Driver>(),
-            hasSavedResults: false,
-            startGrid: new Array<StartGridPosition>(),
-            hasSavedGrid: false,
-
-            grandPrix: {} as GrandPrix,
-            dataLoaded: false,
-            isLoadingData: true,
-
-            calendarOptions: {
-                dateFormat: 'dd/MM/yyyy',
-                lang: 'es',
-                showTodayButton: false,
-                showClearButton: false,
-                weekStart: 1,
-                validateLabel: 'Confirmar',
-                minuteSteps: 1,
-            }
-        }
-    },
-    methods: {
-        changeSessionData() {
-            sessionService.updateSessionInGrandPrix(this.grandPrix, this.session).then(() => {
-                notificationService.showNotification("Datos de la sesión actualizados.");
-            });
-        },
-        saveResults() {
-            const payload = {
-                results: new Map(this.resultsInSession.map((driver, index, array) => [index + 1, driver.id])),
-                notSendNotification: this.notSendNotification,
-            };
-            grandPrixService.saveResults(this.grandPrix, this.session, payload).then(() => {
-                notificationService.showNotification("¡Has guardado los resultados!");
+    return {currentUser, styleDriverCard, styleDorsal};
+  },
+  data() {
+    return {
+      competition: {code: this.$route.params.competition} as Competition,
+      season: {name: this.$route.params.season} as Season,
+      id: this.$route.params.gp as string,
+      session: {id: parseInt(this.$route.params.session.toString())} as RaceSession,
+
+      notSendNotification: false,
+      notOverrideGrid: false,
+      fastLap: {} as Driver,
+      resultsInSession: new Array<Driver>(),
+      hasSavedResults: false,
+      startGrid: new Array<StartGridPosition>(),
+      hasSavedGrid: false,
+
+      grandPrix: {} as GrandPrix,
+      sessionsToDefineGrid: [] as Array<RaceSession>,
+      dataLoaded: false,
+      isLoadingData: true,
+
+      calendarOptions: {
+        dateFormat: 'dd/MM/yyyy',
+        lang: 'es',
+        showTodayButton: false,
+        showClearButton: false,
+        weekStart: 1,
+        validateLabel: 'Confirmar',
+        minuteSteps: 1,
+      }
+    }
+  },
+  async mounted() {
+    try {
+      const gp = await grandPrixService.getGrandPrixInSeason(this.season, this.id);
+      this.grandPrix = gp;
+      this.competition = gp.competition;
+      this.season = gp.season;
+
+      const result = await Promise.all([
+        sessionService.getOneSessionInGrandPrix(this.grandPrix, this.session.id),
+        driversService.getDriversInGrandPrix(gp),
+        grandPrixService.getGrandPrixGrid(this.grandPrix, this.session),
+        grandPrixService.getResults(this.grandPrix, this.session)
+      ])
+      const ses = result[0];
+      const driversInGP = result[1];
+      const startGridRes = result[2];
+      const rawResultsInSession = result[3];
+
+      this.session = ses;
+
+      this.startGrid = [];
+      this.startGrid.push(...startGridRes);
+      this.hasSavedGrid = this.startGrid.length != 0;
+      this.sessionsToDefineGrid = [...this.session.defineGridOf];
+
+      // Si hay resultados, agregarlos a la lista de resultados
+      this.resultsInSession = [];
+      if (rawResultsInSession && rawResultsInSession.length) {
+        this.hasSavedResults = true;
+        rawResultsInSession.forEach((rs) => {
+          this.resultsInSession.push(rs.driver);
+        });
+      } else {
+        // Si hay una grid para esa sesión, ordeno los pilotos en base a eso
+        // Facilita posteriormente ordenar los resultados de la sesión
+        if (this.startGrid && this.startGrid.length) {
+          this.startGrid.forEach((gridPos) => {
+            this.resultsInSession.push(gridPos.driver);
+          });
+        } else {
+          this.resultsInSession.push(...driversInGP);
+
+          // Si no hay grid, relleno esta por defecto con la lista de pilotos para poder ordenarla después
+          driversInGP.forEach((driver, index) => {
+            this.startGrid.push({
+              gp: gp,
+              driver: driver,
+              position: index + 1,
+              isFromPit: false,
+              note: ''
             });
+          });
         }
+      }
+
+      this.dataLoaded = true;
+    } catch (error: any) {
+      notificationService.showNotification("No se ha encontrado el gran premio", "error");
+      console.log(error);
+    } finally {
+      this.isLoadingData = false;
+    }
+  },
+  methods: {
+    toggleDefiningGridSelection(session: RaceSession, checked: boolean) {
+      if (checked) {
+        this.sessionsToDefineGrid.push(session)
+      } else {
+        this.sessionsToDefineGrid = this.sessionsToDefineGrid.filter((i: RaceSession) => i.id !== session.id)
+      }
     },
-    async mounted() {
-        try {
-            const gp = await grandPrixService.getGrandPrixInSeason(this.season, this.id);
-            this.grandPrix = gp;
-            this.competition = gp.competition;
-            this.season = gp.season;
-
-            const result = await Promise.all([
-                sessionService.getOneSessionInGrandPrix(this.grandPrix, this.session.id),
-                driversService.getDriversInGrandPrix(gp),
-                grandPrixService.getGrandPrixGrid(this.grandPrix, this.session),
-                grandPrixService.getResults(this.grandPrix, this.session)
-            ])
-            const ses = result[0];
-            const driversInGP = result[1];
-            const startGridRes = result[2];
-            const rawResultsInSession = result[3];
-
-            this.session = ses;
-
-            this.startGrid = [];
-            this.startGrid.push(...startGridRes);
-            this.hasSavedGrid = this.startGrid.length != 0;
-
-            // Si hay resultados, agregarlos a la lista de resultados
-            this.resultsInSession = [];
-            if (rawResultsInSession && rawResultsInSession.length) {
-                this.hasSavedResults = true;
-                rawResultsInSession.forEach((rs) => {
-                    this.resultsInSession.push(rs.driver);
-                });
-            } else {
-                // Si hay una grid para esa sesión, ordeno los pilotos en base a eso
-                // Facilita posteriormente ordenar los resultados de la sesión
-                if (this.startGrid && this.startGrid.length) {
-                    this.startGrid.forEach((gridPos) => {
-                        this.resultsInSession.push(gridPos.driver);
-                    });
-                } else {
-                    this.resultsInSession.push(...driversInGP);
-
-                    // Si no hay grid, relleno esta por defecto con la lista de pilotos para poder ordenarla después
-                    driversInGP.forEach((driver, index) => {
-                        this.startGrid.push({
-                            gp: gp,
-                            driver: driver,
-                            position: index + 1,
-                            isFromPit: false,
-                            note: ''
-                        });
-                    });
-                }
-            }
-
-            this.dataLoaded = true;
-        } catch (error: any) {
-            notificationService.showNotification("No se ha encontrado el gran premio", "error");
-            console.log(error);
-        } finally {
-            this.isLoadingData = false;
-        }
+    changeSessionData() {
+      const data = {
+        date: this.session.date,
+        defineGridOf: this.sessionsToDefineGrid.map((session: RaceSession) => session.id)
+      }
+      sessionService.updateSessionInGrandPrix(this.grandPrix, this.session, data).then(() => {
+        notificationService.showNotification("Datos de la sesión actualizados.");
+      });
+    },
+    saveResults() {
+      const payload = {
+        results: new Map(this.resultsInSession.map((driver, index, array) => [index + 1, driver.id])),
+        notSendNotification: this.notSendNotification,
+      };
+      grandPrixService.saveResults(this.grandPrix, this.session, payload).then(() => {
+        notificationService.showNotification("¡Has guardado los resultados!");
+      });
     }
+  }
 });
-</script>
\ No newline at end of file
+</script>