Booleans sur Brands et Ranges pour définir si on affiche les enfant sur une étagere ou non (avec labels et prise en compte des ascendants)

2024-02-01 13:06:34 +01:00 · 2024-02-01 13:06:34 +01:00 · a1aa2252ba
commit a1aa2252ba
parent 22221ec0ea
7 changed files with 121 additions and 67 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -4,13 +4,13 @@

 ### Evo - Bugfix à faire

- [ ] **[FO]** Rajouter la Feature manquante : si une seule gamme -> afficher directement les produits de la gamme dans ranges.index (pour le header et footer)
+- [x] **[FO]** Rajouter la Feature manquante : si une seule gamme -> afficher directement les produits de la gamme dans ranges.index (pour le header et footer)
 - [x] **[BO]** Rajouter status sur Brands,Ranges,Products avec labels si non publiés (prise en compte des ascendants)
 - [x] **[BO/FO]** Booleans sur Brands et Ranges pour définir si on affiche les enfant sur une étagere ou non (avec labels et prise en compte des ascendants)
 - Sur la home :
  - [x] **[BO/FO]** Rajouter une phrase de sous-titre I18N en dessous du logo LDC
  - [ ] **[FO]** Masquer le footer de la home
-  - [ ] **[FO]** Layout Brands 2 par 2 avec Logo et en dessous title
+  - [x] **[FO]** Layout Brands 2 par 2 avec Logo et en dessous title
 - [x] **[FO]** Changer ordre langues FR|NL|EN
 - [x] **[FO]** drapeau US -> UK
 - [x] **[BO/FO]** Footer: "Découvrez nos autres marques" passe dans settings et i18n
--- a/assets/scss/_variables.scss
+++ b/assets/scss/_variables.scss
@ -19,3 +19,12 @@ $line-default-height-base: 1.5;

 // * TOAST
 $toast-max-width: 950px;
+
+// * Containers
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1520px
+);
--- a/assets/scss/style.scss
+++ b/assets/scss/style.scss
@ -23,12 +23,11 @@
        z-index: 1;
        right: 0;
        bottom: -3.1rem;
-        left: calc(50% - 2rem);
-        width: calc(150% + 4rem); /* IE9+ */
+        left: -2rem;
+        width: calc(100% + 4rem); /* IE9+ */
        height: 0.6rem;
        background: #686868;
        content: '';
-        transform: translateX(-50%);
    }
 }

--- a/components/ProductDescriptionModal.vue
+++ b/components/ProductDescriptionModal.vue
@ -96,7 +96,7 @@ export default defineComponent({
      this.$nextTick(() => {
        if(this.show) {
          this.modal.show();
-        } else {
+        } else if(this.modal.hide) {
          this.modal.hide();
        }
      });
@ -115,7 +115,9 @@ export default defineComponent({
    });
  },
  beforeUnmount() {
-    this.modal.hide();
+    if(this.modal.hide) {
+      this.modal.hide();
+    }
  },
  methods: {
    t(text: string, params: Record<string,string> = {}, localeToUse: string|null = null): string {
--- a/components/ProductList.vue
+++ b/components/ProductList.vue
@ -1,13 +1,21 @@
 <template>
  <div class="container justify-content-center d-flex flex-column">
    <div v-if="range.products" ref="rangeList" class="row justify-content-around">
-      <template
-        v-for="(product, productIndex) of range.products"
+      <div
+        v-for="(productPair, productIndex) of chunkInefficient(range.products, 2)"
        :key="productIndex"
+        :class="{
+          'row justify-content-center': true,
+          'shelf': displayShelves
+        }"
      >
-        <div class="col-12 col-md-6 product text-center">
+        <div
+          v-for="(product, productPairIndex) of productPair"
+          :key="productPairIndex"
+          class="'col-12 col-md-6 product text-center"
+        >
          <button
-            class="d-inline-block btn rounded bg-body position-relative"
+            class="d-inline-block btn bg-body position-relative"
            :title="t('more_about_this_product')"
            @click.stop="showProduct(product, $event)"
          >
@ -44,7 +52,7 @@
            </div>
          </button>
        </div>
-      </template>
+      </div>
    </div>
    <div v-else class="row">
      <div class="col">
@ -88,16 +96,33 @@ export default defineComponent({
  },
  data(): {
    route: RouteLocationNormalizedLoaded;
+    displayShelves: boolean;
  } {
    return {
      route: useRoute(),
+      displayShelves: this.range.shelf
    };
  },
+  watch: {
+    range() {
+      this.displayShelves = this.range.shelf;
+    }
+  },
  mounted() {
    this.$nextTick(bsTooltips.methods.initTooltips);
    this.$nextTick(this.applySameHeight);
  },
  methods: {
+    chunkInefficient(products: Array<TypeProduct>, chunkSize: number):Array<Array<TypeProduct>> {
+      const out:Array<Array<TypeProduct>> = [];
+      // eslint-disable-next-line @typescript-eslint/no-unused-vars
+      products.forEach((elem: TypeProduct, i: number) => {
+        if (i % chunkSize) {
+          out.push(products.slice(i, i + chunkSize));
+        }
+      });
+      return out;
+    },
    t(text: string, params: Record<string, string> = {}, localeToUse: string | null = null): string {
      return ToolboxHelper.trans(text, params, localeToUse);
    },
@ -156,16 +181,13 @@ export default defineComponent({

 .product {
  transition: all 0.2s ease-out allow-discrete;
-  @include rfs(1.5rem, padding-top);
-  @include rfs(1.5rem, padding-bottom);
+  @include rfs(3.5rem, padding-top);

  @include media-breakpoint-up(md) {
-    @include rfs(2.5rem, padding-top);
-    @include rfs(2.5rem, padding-bottom);
+    @include rfs(4.5rem, padding-top);
  }
  @include media-breakpoint-up(xxl) {
-    @include rfs(4rem, padding-top);
-    @include rfs(4rem, padding-bottom);
+    @include rfs(6rem, padding-top);
  }

  .product-title {
@ -181,16 +203,6 @@ export default defineComponent({
      @include rfs(6rem, padding-bottom);
    }
  }
-  > button {
-    @include rfs(1.5rem, padding-bottom);
-
-    @include media-breakpoint-up(md) {
-      @include rfs(3rem, padding-bottom);
-    }
-    @include media-breakpoint-up(xxl) {
-      @include rfs(6rem, padding-bottom);
-    }
-  }
 }
 </style>

--- a/pages/brands/[slug].vue
+++ b/pages/brands/[slug].vue
@ -1,51 +1,58 @@
 <template>
  <div class="page-brands-show d-flex">
    <div class="container justify-content-center d-flex flex-column">
-      <div v-if="brand.ranges" class="row justify-content-center">
+      <template v-if="brand.ranges">
        <div
-          v-for="(range, rangeIndex) of brand.ranges"
-          :key="rangeIndex"
+          v-for="(rangePair, rangePairIndex) of chunkInefficientCustom(brand.ranges, 2)"
+          :key="rangePairIndex"
          :class="{
-            'col-12 text-center my-5 py-5': true,
-            'col-md-6': range.width === 1
+            'row justify-content-center mt-5 pt-5': true,
+            'mb-5 pb-5': !displayShelves,
+            'shelf': displayShelves
          }"
        >
-          <button
-            :class="{
-              'd-inline-block btn position-relative': true,
-            }"
-            :title="t('view_range_products', {'range_name': transField(range, 'name')})"
-            data-bs-toggle="tooltip"
-            @click.stop="gotoRange(range)"
+          <div
+            v-for="(range, rangeIndex) of rangePair"
+            :key="rangeIndex"
+            class="col text-center"
          >
-            <div>
-              <img
-                class="img-fluid"
-                :src="`/data/${range.picture}`"
-                :alt="t('ranges_logo', {'range_name': transField(range, 'name')})"
-                :title="t('ranges_logo', {'range_name': transField(range, 'name')})"
-              >
-            </div>
-            <span
+            <button
              :class="{
-                ...{
-                  'range-title fs-2 fw-bold mt-5 d-inline-block px-5 py-3 rounded shadow text-capitalize animate__animated': true,
-                  'text-dark': getContrastYIQ(range.color) === '#000000',
-                  'text-light': getContrastYIQ(range.color) === '#FFFFFF',
-                },
-                ...titleAnimations(rangeIndex),
-                ...rangeFont(range.font_id)
-              }"
-              :style="{
-                'background-color': range.color,
-                'text-shadow': `0 0 0.2rem ${toRGBA(getContrastYIQ(range.color), 0.8)}`,
+                'd-inline-block btn position-relative': true,
              }"
+              :title="t('view_range_products', {'range_name': transField(range, 'name')})"
+              data-bs-toggle="tooltip"
+              @click.stop="gotoRange(range)"
            >
-              {{ transField(range, 'name') }}
-            </span>
-          </button>
+              <div>
+                <img
+                  class="img-fluid"
+                  :src="`/data/${range.picture}`"
+                  :alt="t('ranges_logo', {'range_name': transField(range, 'name')})"
+                  :title="t('ranges_logo', {'range_name': transField(range, 'name')})"
+                >
+              </div>
+              <span
+                :class="{
+                  ...{
+                    'range-title fs-2 fw-bold mt-5 d-inline-block px-5 py-3 rounded shadow text-capitalize animate__animated': true,
+                    'text-dark': getContrastYIQ(range.color) === '#000000',
+                    'text-light': getContrastYIQ(range.color) === '#FFFFFF',
+                  },
+                  ...titleAnimations(rangeIndex),
+                  ...rangeFont(range.font_id)
+                }"
+                :style="{
+                  'background-color': range.color,
+                  'text-shadow': `0 0 0.2rem ${toRGBA(getContrastYIQ(range.color), 0.8)}`,
+                }"
+              >
+                {{ transField(range, 'name') }}
+              </span>
+            </button>
+          </div>
        </div>
-      </div>
+      </template>
      <div v-else class="row">
        <div class="col">
          <span>{{ t('no_ranges_available') }}</span>
@ -74,6 +81,7 @@ export default defineComponent({
    animateTimeout: NodeJS.Timeout|undefined;
    animateIndex: number|null;
    animations: Array<string>;
+    displayShelves: boolean;
  } {
    return {
      appState: {} as AppState,
@ -81,7 +89,8 @@ export default defineComponent({
      brand: {} as TypeBrand,
      animateTimeout: undefined,
      animateIndex: null,
-      animations: ["heartBeat", "tada", "shakeX", "rubberBand"]
+      animations: ["heartBeat", "tada", "shakeX", "rubberBand"],
+      displayShelves: false
    };
  },
  beforeMount() {
@ -94,6 +103,7 @@ export default defineComponent({
      return ;
    }
    this.brand = brand;
+    this.displayShelves = this.brand.shelf;

    const firstRange = this.brand.ranges.at(0);

@ -123,6 +133,26 @@ export default defineComponent({
    clearTimeout(this.animateTimeout);
  },
  methods: {
+    chunkInefficientCustom(ranges: Array<TypeRange>, chunkSize: number):Array<Array<TypeRange>> {
+      const out: Array<Array<TypeRange>> = [];
+      let row: Array<TypeRange> = [];
+      ranges.forEach((range: TypeRange, i: number) => {
+        if (range.width === 2) {
+          if(row.length) {
+            out.push(row);
+            row = [];
+          }
+          out.push([range]);
+          return;
+        }
+        row.push(range);
+        if (i % chunkSize) {
+          out.push(row);
+          row = [];
+        }
+      });
+      return out;
+    },
    t(text: string, params: Record<string,string> = {}, localeToUse: string|null = null): string {
      return ToolboxHelper.trans(text, params, localeToUse);
    },
--- a/pages/ranges/[slug].vue
+++ b/pages/ranges/[slug].vue
@ -47,8 +47,7 @@ export default defineComponent({
      activeProduct: null
    };
  },
-  mounted() {
-    this.$nextTick(() => bsTooltips.methods.initTooltips());
+  beforeMount() {
    const range = useAppStore().activeRange;
    if (!range) {
      Toast.toast("range", ToastTypeEnum.error, this.t("error_occured"));
@ -57,6 +56,9 @@ export default defineComponent({
    }
    this.range = range;
  },
+  mounted() {
+    this.$nextTick(() => bsTooltips.methods.initTooltips());
+  },
  methods: {
    t(text: string, params: Record<string, string> = {}, localeToUse: string | null = null): string {
      return ToolboxHelper.trans(text, params, localeToUse);