reorder content in cards and design tweaks

plus eslint tabs

src/components/admin/gps/DriversInGrandPrix.vue

@@ -14,7 +14,7 @@
 
             <draggable
                 id="driversInSeason"
-                class="w-full h-full select-none space-y-2 flex flex-col text-white px-2 md:px-0"
+                class="w-full h-full select-none space-y-2 flex flex-col text-white"
                 :list="driversInSeason"
                 group="drivers"
                 itemKey="id"
@@ -42,7 +42,7 @@
                         <div class="card-content">
                             <draggable
                                 :id="`driversByConstructor-${constructor.id}`"
-                                class="w-full h-full select-none space-y-2 px-2 md:px-0"
+                                class="w-full h-full select-none space-y-2"
                                 :list="driversByConstructor[constructor.id]"
                                 group="drivers"
                                 itemKey="id"

src/components/admin/gps/EditGrid.vue

@@ -1,22 +1,43 @@
 <template>
-    <h3 class="subtitle">Parrilla de salida para {{ session.humanName() }}</h3>
+  <PCard>
+    <PTitle
+      tag="h3"
+      type="subtitle"
+    >
+      Parrilla de salida para {{ session.humanName() }}
+    </PTitle>
 
     <label class="label">Parrilla</label>
-    <PrognoAlert v-if="!hasSavedGrid" variant="warning" message="No hay parrilla guardada aún" />
+    <PrognoAlert
+      v-if="!hasSavedGrid"
+      variant="warning"
+      message="No hay parrilla guardada aún"
+    />
 
     <draggable
-        :id="`grid-${session.id}`"
-        class="w-full select-none space-y-3 px-2 md:px-0"
-        :list="sessionGrid"
-        group="grid"
-        itemKey="id"
+      :id="`grid-${session.id}`"
+      class="w-full select-none space-y-2"
+      :list="sessionGrid"
+      group="grid"
+      item-key="id"
     >
-        <template #item="{ element, index }">
-            <DraggableDriverCard :driver="element.driver" :index="index" showPosition />
-        </template>
+      <template #item="{ element, index }">
+        <DraggableDriverCard
+          :driver="element.driver"
+          :index="index"
+          show-position
+        />
+      </template>
     </draggable>
 
-    <button class="mt-2 button is-primary" @click="saveGrid()">Guardar parrilla</button>
+    <p-button
+      color="success"
+      class="mt-2"
+      @click="saveGrid()"
+    >
+      Guardar parrilla
+    </p-button>
+  </PCard>
 </template>
 
 <script lang="ts">
@@ -30,68 +51,70 @@ import draggable from "vuedraggable";
 import {StartGridPosition} from "@/types/StartGridPosition";
 import {grandPrixService, notificationService} from "@/_services";
 import PrognoAlert from "@/components/lib/PrognoAlert.vue";
+import PCard from "@/components/lib/PCard.vue";
+import PButton from "@/components/lib/forms/PButton.vue";
+import PTitle from "@/components/lib/PTitle.vue";
 
 export default defineComponent({
-    name: "EditGrid",
-    components: {
-        PrognoAlert,
-        draggable,
-        DraggableDriverCard,
+  name: "EditGrid",
+  components: {
+    PTitle,
+    PButton,
+    PCard,
+    PrognoAlert,
+    draggable,
+    DraggableDriverCard,
+  },
+  props: {
+    grandPrix: {
+      type: Object as PropType<GrandPrix>,
+      required: true,
+    },
+    session: {
+      type: Object as PropType<RaceSession>,
+      required: true,
     },
-    props: {
-        grandPrix: {
-            type: Object as PropType<GrandPrix>,
-            required: true,
-        },
-        session: {
-            type: Object as PropType<RaceSession>,
-            required: true,
-        },
-        grid: {
-            type: Object as PropType<Array<StartGridPosition>>,
-            required: true,
-        },
-        hasSavedGrid: {
-            type: Boolean,
-            default: false,
-        }
+    grid: {
+      type: Object as PropType<Array<StartGridPosition>>,
+      required: true,
     },
-    setup() {
-        const authStore = useAuthStore();
+    hasSavedGrid: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  setup() {
+    const authStore = useAuthStore();
 
-        const currentUser = authStore.loggedUser;
+    const currentUser = authStore.loggedUser;
 
-        return {currentUser};
-    },
-    data() {
-        return {
-            notSendNotification: false,
-            notOverrideGrid: false,
-            fastLap: {} as Driver,
-            sessionGrid: [...this.grid],
-        }
-    },
-    methods: {
-        async saveGrid() {
-            const payload = {
-                grid: this.sessionGrid.map((gridPosition: StartGridPosition, index: number, array: StartGridPosition[]) => {
-                    return {
-                        driver: gridPosition.driver.id,
-                        isFromPit: gridPosition.isFromPit,
-                        note: gridPosition.note,
-                        position: index + 1,
-                    }
-                })
-            };
-            console.log(payload)
+    return {currentUser};
+  },
+  data() {
+    return {
+      notSendNotification: false,
+      notOverrideGrid: false,
+      fastLap: {} as Driver,
+      sessionGrid: [...this.grid],
+    }
+  },
+  methods: {
+    async saveGrid() {
+      const payload = {
+        grid: this.sessionGrid.map((gridPosition: StartGridPosition, index: number, array: StartGridPosition[]) => {
+          return {
+            driver: gridPosition.driver.id,
+            isFromPit: gridPosition.isFromPit,
+            note: gridPosition.note,
+            position: index + 1,
+          }
+        })
+      };
+      console.log(payload)
 
-            await grandPrixService.saveGrid(this.grandPrix, this.session, payload)
-            notificationService.showNotification( "¡Has guardado la parrilla!");
-        }
+      await grandPrixService.saveGrid(this.grandPrix, this.session, payload)
+      notificationService.showNotification("¡Has guardado la parrilla!");
     }
+  }
 });
 </script>
-
-<style scoped>
-
-</style>

src/components/admin/gps/EditResults.vue

@@ -1,51 +1,82 @@
 <template>
-    <PTitle tag="h3" type="subtitle">Resultados en {{ session.humanName() }}</PTitle>
+  <PCard>
+    <PTitle
+      tag="h3"
+      type="subtitle"
+    >
+      Resultados en {{ session.humanName() }}
+    </PTitle>
 
-    <section v-if="session.hasFastLap" class="mb-4">
-        <o-field label="Vuelta rápida">
-            <o-select v-model="fastLap" placeholder="Selecciona un piloto" expanded>
-                <option
-                    v-for="driver in sessionResults"
-                    :value="driver"
-                    :key="driver.id">
-                    {{ driver.lastname}}, {{driver.firstname}} - {{ driver.team.name }} ({{ driver.team.carname }})
-                </option>
-            </o-select>
-        </o-field>
+    <section
+      v-if="session.hasFastLap"
+      class="mb-4"
+    >
+      <!-- ToDo: remove -->
+      <o-field label="Vuelta rápida">
+        <o-select
+          v-model="fastLap"
+          placeholder="Selecciona un piloto"
+          expanded
+        >
+          <option
+            v-for="driver in sessionResults"
+            :key="driver.id"
+            :value="driver"
+          >
+            {{ driver.lastname }}, {{ driver.firstname }} - {{ driver.team.name }} ({{ driver.team.carname }})
+          </option>
+        </o-select>
+      </o-field>
 
-        <hr/>
+      <hr>
     </section>
 
     <label class="label">Resultados</label>
-    <PrognoAlert v-if="!hasSavedResults" variant="warning" message="No hay resultados guardada aún" />
+    <PrognoAlert
+      v-if="!hasSavedResults"
+      variant="warning"
+      message="No hay resultados guardados aún"
+    />
     <draggable
-        :id="`results-${session.id}`"
-        class="w-full select-none space-y-3 px-2 md:px-0"
-        :list="sessionResults"
-        group="results"
-        itemKey="id"
+      :id="`results-${session.id}`"
+      class="w-full select-none space-y-2"
+      :list="sessionResults"
+      group="results"
+      item-key="id"
     >
-        <template #item="{ element, index }">
-            <DraggableDriverCard :driver="element" :index="index" showPosition />
-        </template>
+      <template #item="{ element, index }">
+        <DraggableDriverCard
+          :driver="element"
+          :index="index"
+          show-position
+        />
+      </template>
     </draggable>
 
     <section class="block mt-4">
-        <o-checkbox
-            v-model="notSendNotification"
-            variant="danger"
-            passive-variant="primary">
-            NO enviar notificación
-        </o-checkbox>
-        <o-checkbox
-            v-model="notOverrideGrid"
-            variant="danger"
-            passive-variant="primary">
-            NO sobreescribir parrilla
-        </o-checkbox>
+      <p-checkbox
+        id="notSendNotification"
+        v-model="notSendNotification"
+        color="danger"
+      >
+        NO enviar notificación
+      </p-checkbox>
+      <p-checkbox
+        id="notOverrideGrid"
+        v-model="notOverrideGrid"
+        color="danger"
+      >
+        NO sobreescribir parrilla
+      </p-checkbox>
     </section>
 
-    <PButton color="primary" @click="saveResults()">Guardar resultados</PButton>
+    <PButton
+      color="primary"
+      @click="saveResults()"
+    >
+      Guardar resultados
+    </PButton>
+  </PCard>
 </template>
 
 <script lang="ts">
@@ -60,10 +91,14 @@ import draggable from "vuedraggable";
 import PrognoAlert from "@/components/lib/PrognoAlert.vue";
 import PTitle from "@/components/lib/PTitle.vue";
 import PButton from "@/components/lib/forms/PButton.vue";
+import PCard from "@/components/lib/PCard.vue";
+import PCheckbox from "@/components/lib/forms/PCheckbox.vue";
 
 export default defineComponent({
     name: "EditResults",
     components: {
+      PCheckbox,
+      PCard,
         PButton,
         PTitle,
         PrognoAlert,