[front/rwd] Improve RWD on all pages (home, sale, register, auth)

close #5
celestialaly · Feb 22, 2025 · 916e6dd · 916e6dd
1 parent d184960
commit 916e6dd
Show file tree

Hide file tree

Showing 11 changed files with 218 additions and 523 deletions.
diff --git a/assets/vue/package-lock.json b/assets/vue/package-lock.json
diff --git a/assets/vue/package.json b/assets/vue/package.json
@@ -18,6 +18,7 @@
     "@primevue/themes": "^4.2.5",
     "@vuelidate/core": "^2.0.3",
     "@vuelidate/validators": "^2.0.4",
+    "@vueuse/core": "^12.7.0",
     "bootstrap": "^5.3.3",
     "bootstrap-vue-next": "^0.26.19",
     "pinia": "^2.3.0",

diff --git a/assets/vue/src/App.vue b/assets/vue/src/App.vue
@@ -14,7 +14,7 @@ useToastStore()
 
   <div class="footer mt-auto mb-3">
     <div class="m-0 mt-4 p-0 border-top-1 border-100">&nbsp;</div>
-    <div class="flex px-4">
+    <div class="flex px-4 gap-4">
       <div class="flex align-items-center gap-3">
         <div><strong>Autres outils</strong></div>
         <div><a href="https://dofusdb.fr/fr/" title="DofusDB"><img src="@/assets/favicons/dofusdb.png" style="width: 24px;"></a></div>

diff --git a/assets/vue/src/package/sales/component/AddSaleComponent.vue b/assets/vue/src/package/sales/component/AddSaleComponent.vue
@@ -74,7 +74,7 @@ const closeAndResetForm = () => {
 <template>
     <Button label="Ajouter une vente" @click="visible = true" />
 
-    <Dialog v-model:visible="visible" modal header="Ajouter une vente" style="width: 50%;">
+    <Dialog v-model:visible="visible" modal header="Ajouter une vente" class="w-11 lg:w-7">
         <form @submit.prevent="submitForm">
             <div class="grid mt-0.5">
                 <InputGroup class="col-12">

diff --git a/assets/vue/src/package/sales/component/SaleComponent.vue b/assets/vue/src/package/sales/component/SaleComponent.vue
@@ -11,6 +11,7 @@ import RefreshPricePopoverComponent from './popover/RefreshPricePopoverComponent
 import MarkAsSoldPopoverComponent from './popover/MarkAsSoldPopoverComponent.vue';
 import UndoSaleConfirmComponent from './popover/UndoSaleConfirmComponent.vue';
 import { ApiPaginator } from '@/package/common/api/ApiPaginator';
+import { breakpointsTailwind, useBreakpoints } from '@vueuse/core';
 
 const queryController = new QuerySaleController()
 const salePriceRefreshRef = ref<InstanceType<typeof RefreshPricePopoverComponent>>()
@@ -28,6 +29,11 @@ const filters = ref({
 });
 const paginator = new ApiPaginator()
 
+// display columns on specific breakpoints
+const breakpoints = useBreakpoints(breakpointsTailwind);
+const smAndLarger = breakpoints.greaterOrEqual("sm");
+const onlyLg = breakpoints.greaterOrEqual("lg");
+
 onMounted(() => {
   refreshSalesData()
 })
@@ -70,14 +76,14 @@ async function onFilter() {
             <InputIcon>
               <i class="pi pi-search" />
             </InputIcon>
-            <InputText v-model="filters['global'].value" placeholder="Rechercher par équipement" @input="onFilter" />
+            <InputText v-model="filters['global'].value" placeholder="Rechercher par objet" @input="onFilter" />
           </IconField>
         </div>
       </template>
       <template #empty>Aucune vente listée.</template>
       <template #loading>Récupération des données en cours...</template>
 
-      <Column header="Equipement" field="item.title" sortable>
+      <Column header="Objet" field="item.title" sortable>
         <template #body="slotProps">
           <div class="flex gap-2">
             <div class="table-indicator" :class="[slotProps.data.sold ? 'bg-green-600' : 'bg-red-600']">
@@ -91,22 +97,22 @@ async function onFilter() {
           {{ (slotProps.data.sellPrice - slotProps.data.price - slotProps.data.taxPrice).toLocaleString() }}k
         </template>
       </Column>
-      <Column header="Investissement" field="price" sortable>
+      <Column header="Investissement" field="price" sortable  v-if="smAndLarger">
         <template #body="slotProps">
           {{ slotProps.data.price.toLocaleString() }}k
         </template>
       </Column>
-      <Column header="Prix de vente" field="sellPrice" sortable>
+      <Column header="Prix de vente" field="sellPrice" sortable  v-if="smAndLarger">
         <template #body="slotProps">
           {{ slotProps.data.sellPrice.toLocaleString() }}k
         </template>
       </Column>
-      <Column header="Taxe HDV (cumulé)" field="taxPrice" sortable>
+      <Column header="Taxe HDV (cumulé)" field="taxPrice" sortable v-if="onlyLg">
         <template #body="slotProps">
           {{ slotProps.data.taxPrice.toLocaleString() }}k
         </template>
       </Column>
-      <Column header="Vendu ?" field="sold" sortable>
+      <Column header="Vendu ?" field="sold" sortable v-if="onlyLg">
         <template #body="slotProps">
           {{ slotProps.data.sold ? 'Oui' : 'Non' }}
         </template>

diff --git a/assets/vue/src/package/sales/component/submodals/CalculateInvestment.vue b/assets/vue/src/package/sales/component/submodals/CalculateInvestment.vue
@@ -15,6 +15,11 @@ const chatlog = ref('');
 const craftInvestment = ref(0);
 const runeInvestment = ref(0);
 const totalInvestment = ref(0);
+const chatlogPlaceholder = "Exemple: \n \
+1 x [Poing-virgule de Shinlam] (14 995 kamas)\n \
+1 x [Poing-virgule de Shinlam] (14 995 kamas)\n \
+1 x [Carapace circonflexe de Rokoram] (26 494 kamas)\n \
+1 x [Carapace circonflexe de Rokoram] (26 494 kamas)";
 
 const calculateTotal = () => {
     const re = /\] \(([\d\s\xa0]+)/g;
@@ -50,17 +55,17 @@ const submitForm = () => {
 <template>
     <Button icon="pi pi-calculator" severity="contrast" variant="text" @click="visible = true" />
 
-    <Dialog v-model:visible="visible" modal header="Calcul de l'investissement" style="width: 60%;">
+    <Dialog v-model:visible="visible" modal header="Calcul de l'investissement" class="w-11 lg:w-8">
         <form @submit.prevent="submitForm">
             <div class="grid">
-                <div class="col-6">
+                <div class="col-12 lg:col-6">
                     <IftaLabel>
-                        <Textarea id="chatlog" v-model="chatlog" rows="14" class="w-full" @input="calculateTotal" />
+                        <Textarea id="chatlog" v-model="chatlog" rows="14" class="w-full" @input="calculateTotal" :placeholder="chatlogPlaceholder" />
                         <label for="chatlog">Données de votre chat</label>
                     </IftaLabel>
                 </div>
 
-                <div class="col-6">
+                <div class="hidden lg:block lg:col-6">
                     <p class="mt-0">Vous pouvez copier/coller les achats faits à l'HDV pour calculer automatiquement la
                         somme dépensée :</p>
                     <img src="@/assets/images/investment_chatlog.png" alt="Chat Log" class=" border-1" />

diff --git a/assets/vue/src/package/security/component/LoginComponent.vue b/assets/vue/src/package/security/component/LoginComponent.vue
@@ -56,7 +56,7 @@ const loginUser = async () => {
 <template>
     <Suspense>
         <form @submit.prevent="submitForm">
-            <Card style="width: 65rem; margin: auto; margin-top: 15px;">
+            <Card class="m-auto mt-2 lg:w-9">
                 <template #title>Connexion</template>
                 <template #content>
                     <div class="flex flex-column gap-2 mt-0.5">

diff --git a/assets/vue/src/package/security/component/RegisterComponent.vue b/assets/vue/src/package/security/component/RegisterComponent.vue
@@ -2,7 +2,7 @@
 import { computed, reactive } from 'vue';
 import router from '@/router';
 import { useVuelidate } from '@vuelidate/core';
-import { required, email, sameAs } from '@vuelidate/validators';
+import { required, email, minLength, sameAs } from '@vuelidate/validators';
 import CommandUserController from '../infrastructure/command/CommandUserController';
 import User from '../domain/User';
 import { useToastStore } from '@/package/common/stores/toastStore';
@@ -24,7 +24,7 @@ const state = reactive({ ...initialState })
 const rules = computed(() => (
     {
         email: { required, email },
-        password: { required },
+        password: { required, minLength: minLength(8) },
         repeatedPassword: { required, sameAsRef: sameAs(state.password) },
     }
 ));
@@ -52,16 +52,16 @@ const resetForm = () => {
 const registerUser = async () => {
     const user = User.new(state.email, state.password)
     await commandUserController.register(user)
-    useToastStore().add({ severity: 'success', summary: `Compte créé`, detail: `Votre compte vient d'être créé, bienvenue !`, life: 3000 });
+    useToastStore().add({ severity: 'success', summary: `Compte créé`, detail: `Votre compte vient d'être créé, bienvenue ! Connectez-vous pour accéder aux fonctionnalités.`, life: 3000 });
     resetForm()
-    router.push('/auth');
+    router.push({path: '/auth'});
 }
 </script>
 
 <template>
     <Suspense>
         <form @submit.prevent="submitForm">
-            <Card style="width: 65rem; margin: auto; margin-top: 15px;">
+            <Card class="m-auto mt-2 lg:w-9">
                 <template #title>Créer mon compte</template>
                 <template #content>
                     <div class="flex flex-column gap-2 mt-0.5">
@@ -85,6 +85,10 @@ const registerUser = async () => {
                                 <label for="password">Mot de passe</label>
                             </IftaLabel>
                         </InputGroup>
+                        <div v-if="v$.password.$errors.length > 0">
+                            <Message v-for="error of v$.password.$errors" v-bind:key="error.$uid" size="small"
+                                severity="error" variant="simple">{{ error.$message }}</Message>
+                        </div>
 
                         <InputGroup>
                             <InputGroupAddon>

diff --git a/assets/vue/src/views/HomeView.vue b/assets/vue/src/views/HomeView.vue
@@ -5,69 +5,65 @@ const authStore = useAuthStore();
 </script>
 
 <template>
-  <div class="min-h-[40rem] lg:min-h-0 bg-surface-0 dark:bg-surface-900 flex lg:flex-row flex-col">
-    <div class="flex lg:flex lg:flex-row flex-col justify-center md:justify-normal h-full flex-1">
-      <div class="relative flex-1 z-20 flex items-center justify-center">
-        <div class="flex items-center justify-center h-full">
-          <div class="w-full max-w-2xl px-6 py-12 lg:p-12 xl:p-16 text-center lg:text-left">
-            <h1
-              class="text-4xl xl:text-5xl font-bold text-surface-0 lg:text-surface-900 dark:text-surface-0 mb-4 !leading-tight">
-              <span class="block">Gérer plus simplement</span>
-              <span class="block text-primary">vos ventes Dofus</span>
-            </h1>
+  <div class="flex lg:flex-row flex-column">
+    <div class="flex items-center justify-center h-full">
+      <div class="w-full max-w-2xl px-6 py-12 lg:p-12 xl:p-16 text-center lg:text-left">
+        <h1
+          class="text-4xl xl:text-5xl font-bold text-surface-0 lg:text-surface-900 dark:text-surface-0 mb-4 !leading-tight">
+          <span class="block">Gérer plus simplement</span>
+          <span class="block text-primary">vos ventes Dofus</span>
+        </h1>
 
-            <p
-              class="text-surface-0/90 lg:text-surface-700 dark:text-surface-200 text-xl leading-normal mb-4 max-w-xl lg:max-w-none">
-            <ul class="list-none line-height-3 p-0">
-              <li>Modification du prix avec recalcul automatique de la taxe HDV</li>
-              <li>Statistiques de ventes (investissement, profit...)</li>
-            </ul>
-            </p>
+        <p
+          class="text-surface-0/90 lg:text-surface-700 dark:text-surface-200 text-xl leading-normal mb-4 max-w-xl lg:max-w-none">
+        <ul class="list-none line-height-3 p-0">
+          <li>Modification du prix avec recalcul automatique de la taxe HDV</li>
+          <li>Statistiques de ventes (investissement, profit...)</li>
+        </ul>
+        </p>
 
-            <div class="flex items-center gap-4 justify-center lg:justify-start" v-if="!authStore.user">
-              <RouterLink to="/register">
-                <Button label="S'inscrire" icon="pi pi-user" />
-              </RouterLink>
-            </div>
-          </div>
+        <div class="lg:mgb-0 mb-2" v-if="!authStore.user">
+          <RouterLink to="/register">
+            <Button label="S'inscrire" icon="pi pi-user" />
+          </RouterLink>
         </div>
       </div>
+    </div>
 
-      <div class="absolute lg:relative inset-0 lg:inset-auto flex-1 mt-2">
-        <div class="absolute lg:hidden inset-0 bg-surface-900/60 dark:bg-surface-900/80 z-10" />
-        <img src="@/assets/images/sales.png" alt="Ventes" class="h-full object-cover border-2" />
-      </div>
+    <div class="flex-1 w-full mt-2" style="min-width: 60%;">
+      <img src="@/assets/images/sales.png" alt="Ventes" class="w-full object-cover border-2" />
     </div>
   </div>
 
   <hr class="mt-4 border-primary-500">
 
-  <div class="min-h-[40rem] lg:min-h-0 bg-surface-0 dark:bg-surface-900 flex lg:flex-row flex-col mt-4">
-    <div class="flex lg:flex lg:flex-row flex-col justify-center md:justify-normal h-full flex-1">
-      <div class="absolute lg:relative inset-0 lg:inset-auto flex-1 mt-2">
-        <div class="absolute lg:hidden inset-0 bg-surface-900/60 dark:bg-surface-900/80 z-10" />
-        <img src="@/assets/images/sales_investment.png" alt="Ventes" class="h-full object-cover border-1 border-gray-500" style="max-width: 800px;" />
-      </div>
+  <div class="flex lg:flex-row flex-column">
+    <div class="w-full mt-2" style="min-width: 60%;">
+      <img src="@/assets/images/sales_investment.png" alt="Ventes" class="w-full object-cover border-2" />
     </div>
 
-    <div class="relative flex-1 z-20 flex items-center justify-center">
-        <div class="flex items-center justify-center h-full">
-          <div class="w-full max-w-2xl px-6 py-12 lg:p-12 xl:p-16 text-center lg:text-left">
-            <h1
-              class="text-4xl xl:text-5xl font-bold text-surface-0 lg:text-surface-900 dark:text-surface-0 mb-4 !leading-tight">
-              <span class="block">Calculer automatiquement</span>
-              <span class="block text-primary">l'investissement des crafts</span>
-            </h1>
+    <div class="flex items-center justify-center h-full">
+      <div class="w-full max-w-2xl px-6 py-12 lg:p-12 xl:p-16 text-center lg:text-left">
+        <h1
+          class="text-4xl xl:text-5xl font-bold text-surface-0 lg:text-surface-900 dark:text-surface-0 mb-4 !leading-tight">
+          <span class="block">Calculer automatiquement</span>
+          <span class="block text-primary">l'investissement des crafts</span>
+        </h1>
 
-            <p
-              class="text-surface-0/90 lg:text-surface-700 dark:text-surface-200 text-xl leading-normal mb-4 max-w-xl lg:max-w-none">
-            <ul class="list-none line-height-3 p-0">
-              <li>Calcul auto des achats effectués en HDV via un simple copier/coller</li>
-              <li>Prise en compte du paiement du coût du craft + dépenses en runes</li>
-            </ul>
-            </p>
-          </div>
+        <p
+          class="text-surface-0/90 lg:text-surface-700 dark:text-surface-200 text-xl leading-normal mb-4 max-w-xl lg:max-w-none">
+        <ul class="list-none line-height-3 p-0">
+          <li>Calcul auto des achats effectués en HDV via un simple copier/coller</li>
+          <li>Prise en compte du paiement du coût du craft + dépenses en runes</li>
+        </ul>
+        </p>
+
+        <div class="lg:mgb-0 mb-2" v-if="!authStore.user">
+          <RouterLink to="/register">
+            <Button label="S'inscrire" icon="pi pi-user" />
+          </RouterLink>
         </div>
       </div>
+    </div>
   </div>
 </template>