From e866f9ac3268da510b075e93311148d49470546a Mon Sep 17 00:00:00 2001
From: Cadiducho <cadiducho@gmail.com>
Date: Fri, 25 Oct 2024 22:08:02 +0200
Subject: [PATCH] tweaks and unit some components

---
 .../gps/AdminGrandPrixPageHeader.vue          | 26 ++++++
 src/components/lib/forms/PButton.vue          |  2 +-
 src/components/lib/forms/PCheckbox.vue        | 90 +++++++++++--------
 src/components/lib/forms/PInput.vue           | 22 +++--
 src/components/lib/forms/PLabel.vue           | 22 +++++
 5 files changed, 115 insertions(+), 47 deletions(-)
 create mode 100644 src/components/gps/AdminGrandPrixPageHeader.vue
 create mode 100644 src/components/lib/forms/PLabel.vue

diff --git a/src/components/gps/AdminGrandPrixPageHeader.vue b/src/components/gps/AdminGrandPrixPageHeader.vue
new file mode 100644
index 0000000..f1c2533
--- /dev/null
+++ b/src/components/gps/AdminGrandPrixPageHeader.vue
@@ -0,0 +1,26 @@
+<template>
+  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+    <div class="md:col-span-2">
+      <PTitle :name="'Administración de ' + props.grandPrix.name + ' de ' + grandPrix.season.name" />
+    </div>
+    <div class="md:col-span-1">
+      <GrandPrixPagination
+        is-admin-pag
+        :competition="props.competition"
+        :grand-prix="props.grandPrix"
+      />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import PTitle from "@/components/lib/PTitle.vue";
+import GrandPrixPagination from "@/components/gps/GrandPrixPagination.vue";
+import {GrandPrix} from "@/types/GrandPrix";
+import {Competition} from "@/types/Competition";
+
+const props = defineProps({
+  grandPrix: { type: GrandPrix, required: true },
+  competition: { type: Competition, required: true },
+})
+</script>
diff --git a/src/components/lib/forms/PButton.vue b/src/components/lib/forms/PButton.vue
index f95d40b..6da2937 100644
--- a/src/components/lib/forms/PButton.vue
+++ b/src/components/lib/forms/PButton.vue
@@ -143,7 +143,7 @@ export default defineComponent({
         @apply bg-yellow-500 hover:bg-yellow-600 dark:focus:ring-offset-gray-800 text-white;
     }
     &.green, &.success {
-        @apply bg-green-400 hover:bg-green-600 dark:focus:ring-offset-gray-800 text-white;
+        @apply bg-green-500 hover:bg-green-600 dark:focus:ring-offset-gray-800 text-white;
     }
     &.blue, &.info {
         @apply bg-blue-500 hover:bg-blue-600 dark:focus:ring-offset-gray-800 text-white;
diff --git a/src/components/lib/forms/PCheckbox.vue b/src/components/lib/forms/PCheckbox.vue
index 7da282b..95893be 100644
--- a/src/components/lib/forms/PCheckbox.vue
+++ b/src/components/lib/forms/PCheckbox.vue
@@ -1,57 +1,69 @@
 <template>
-    <div class="flex items-center mb-4 me-4">
-        <input id="checkbox" type="checkbox"
-               :checked="modelValue"
-               @change="handleChange"
-               :class="checkboxClasses"
-        >
-        <label for="checkbox" class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-300">
-            <slot></slot>
-        </label>
-    </div>
+  <div class="flex items-center mb-4 me-4">
+    <input
+      :id="`checkbox-${id}`"
+      type="checkbox"
+      :checked="(modelValue) ? modelValue : checked"
+      :class="checkboxClasses"
+      @change="handleChange"
+    >
+    <label
+      :for="`checkbox-${id}`"
+      class="ms-2 text-sm font-medium text-gray-700 dark:text-gray-300"
+    >
+      <slot />
+    </label>
+  </div>
 </template>
 
 <script setup lang="ts">
 import {computed, defineModel} from 'vue';
 
-const modelValue = defineModel<boolean>({ required: true });
+const modelValue = defineModel<boolean>({required: false});
+
+const props = withDefaults(defineProps<{
+  color?: 'primary' | 'secondary' | 'gray' | 'warning' | 'danger';
+  id?: number;
+  checked?: boolean
+}>(), {
+  color: 'primary',
+  id: 0,
+  checked: false
+});
 
 const handleChange = (event: Event) => {
-    modelValue.value = (event.target as HTMLInputElement).checked;
+  modelValue.value = (event.target as HTMLInputElement).checked;
 };
 
-interface Props {
-    color?: 'primary' | 'secondary' | 'gray' | 'warning' | 'danger';
-}
-const props = withDefaults(defineProps<Props>(), {
-    color: 'primary'
-});
-
 const checkboxClasses = computed(() => ({
-    'checkbox': true, // Estilos base
-    [props.color]: true // Colores tienen el mismo nombre que las clases de css
+  'checkbox': true, // Estilos base
+  [props.color]: true // Colores tienen el mismo nombre que las clases de css
 }));
 
 </script>
 
 <style lang="scss" scoped>
 .checkbox {
-    @apply cursor-pointer w-5 h-5 rounded focus:ring-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800;
-
-    &.primary {
-        @apply text-purple-600 accent-purple-500 focus:ring-purple-500 dark:focus:ring-purple-600;
-    }
-    &.secondary {
-        @apply text-blue-600 accent-blue-500 focus:ring-blue-500 dark:focus:ring-blue-600;
-    }
-    &.gray {
-        @apply text-gray-600 accent-gray-500 focus:ring-gray-500 dark:focus:ring-gray-600;
-    }
-    &.warning {
-        @apply text-yellow-600 accent-yellow-500 focus:ring-yellow-500 dark:focus:ring-yellow-600;
-    }
-    &.danger {
-        @apply text-red-600 accent-red-500 focus:ring-red-500 dark:focus:ring-red-600;
-    }
+  @apply cursor-pointer w-5 h-5 rounded focus:ring-2 border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:ring-offset-gray-800;
+
+  &.primary {
+    @apply text-purple-600 accent-purple-500 focus:ring-purple-500 dark:focus:ring-purple-600;
+  }
+
+  &.secondary {
+    @apply text-blue-600 accent-blue-500 focus:ring-blue-500 dark:focus:ring-blue-600;
+  }
+
+  &.gray {
+    @apply text-gray-600 accent-gray-500 focus:ring-gray-500 dark:focus:ring-gray-600;
+  }
+
+  &.warning {
+    @apply text-yellow-600 accent-yellow-500 focus:ring-yellow-500 dark:focus:ring-yellow-600;
+  }
+
+  &.danger {
+    @apply text-red-600 accent-red-500 focus:ring-red-500 dark:focus:ring-red-600;
+  }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/components/lib/forms/PInput.vue b/src/components/lib/forms/PInput.vue
index 30ced49..ec30356 100644
--- a/src/components/lib/forms/PInput.vue
+++ b/src/components/lib/forms/PInput.vue
@@ -1,19 +1,27 @@
 <template>
   <fieldset class="w-full mb-3">
-    <label v-if="label" class="block tracking-wide text-gray-700 dark:text-gray-300 font-bold mb-2" :for="name">
-      {{ label }}
-    </label>
+    <p-label
+      v-if="label"
+      :for="name"
+    >
+      {{ name }}
+    </p-label>
     <input
-      class="appearance-none block w-full text-gray-700 dark:text-gray-200 border border-gray-200 rounded py-3 px-4 dark:bg-gray-700 dark:border-gray-600 leading-tight focus:ring-blue-500 focus:outline-none focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500"
-      :maxlength="maxLenght" :id="name" :name="name"
-      :type="type" :placeholder="placeholder"
+      :id="name"
       v-bind="$attrs"
       v-model="model"
-    />
+      class="appearance-none block w-full text-gray-700 dark:text-gray-200 border border-gray-200 rounded py-3 px-4 dark:bg-gray-700 dark:border-gray-600 leading-tight focus:ring-blue-500 focus:outline-none focus:border-blue-500 dark:focus:ring-blue-500 dark:focus:border-blue-500"
+      :maxlength="maxLenght"
+      :name="name"
+      :type="type"
+      :placeholder="placeholder"
+    >
   </fieldset>
 </template>
 
 <script setup lang="ts" generic="T">
+import PLabel from "@/components/lib/forms/PLabel.vue";
+
 const model = defineModel<T>();
 
 const props = withDefaults(defineProps<{
diff --git a/src/components/lib/forms/PLabel.vue b/src/components/lib/forms/PLabel.vue
new file mode 100644
index 0000000..581dabe
--- /dev/null
+++ b/src/components/lib/forms/PLabel.vue
@@ -0,0 +1,22 @@
+<template>
+  <label
+    class="block tracking-wide text-gray-700 dark:text-gray-300 font-bold mb-2"
+    :for="props.name"
+  >
+    {{ props.label }}
+  </label>
+</template>
+
+<script setup lang="ts">
+const props = withDefaults(defineProps<{
+  label?: string;
+  name?: string;
+}>(), {
+  label: '',
+  name: ''
+})
+</script>
+
+<style scoped lang="scss">
+
+</style>