Fix alignment of data in product feed table when all destination do n…

…ot have the same status
PrestaShopCorp · Mar 27, 2023 · 7a77694 · 7a77694
1 parent ac6f693
commit 7a77694
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 6 deletions.
diff --git a/_dev/apps/ui/src/components/product-feed-page/product-feed-table-status-details-row.vue b/_dev/apps/ui/src/components/product-feed-page/product-feed-table-status-details-row.vue
@@ -2,14 +2,14 @@
   <b-tr>
     <b-td
       class="align-top"
-      :rowspan="product.statuses.length"
+      :rowspan="numberOfDisapprovedDestinations"
       v-if="!indexStatus"
     >
       {{ product.id }}{{ +product.attribute > 0 ? '&#8209;' + product.attribute : '' }}
     </b-td>
     <b-td
       class="align-top b-table-sticky-column"
-      :rowspan="product.statuses.length"
+      :rowspan="numberOfDisapprovedDestinations"
       v-if="!indexStatus"
     >
       <a
@@ -24,7 +24,7 @@
     </b-td>
     <b-td
       class="align-top"
-      :rowspan="countriesAndStatusAreTheSame ? product.statuses.length : 0"
+      :rowspan="countriesAndStatusAreTheSame ? numberOfDisapprovedDestinations : 0"
       v-if="!indexStatus || !countriesAndStatusAreTheSame"
     >
       <b-badge
@@ -38,7 +38,7 @@
     </b-td>
     <b-td
       class="align-top"
-      :rowspan="countriesAndStatusAreTheSame ? product.statuses.length : 0"
+      :rowspan="countriesAndStatusAreTheSame ? numberOfDisapprovedDestinations : 0"
       v-if="!indexStatus || !countriesAndStatusAreTheSame"
     >
       <span>
@@ -53,7 +53,7 @@
 
     <b-td
       class="align-top"
-      :rowspan="countriesAndStatusAreTheSame ? product.statuses.length : 0"
+      :rowspan="countriesAndStatusAreTheSame ? numberOfDisapprovedDestinations : 0"
       v-if="!indexStatus || !countriesAndStatusAreTheSame"
     >
       <b-badge
@@ -154,6 +154,9 @@ export default defineComponent({
           && JSON.stringify(anotherStatus.countries) === JSON.stringify(this.status.countries),
         );
     },
+    numberOfDisapprovedDestinations(): number {
+      return this.product.statuses.filter((s) => s.status === ProductStatus.Disapproved).length;
+    },
     merchantCenterWebsitePageUrl() {
       const {id} = this.$store.state.accounts.googleMerchantAccount;
 

diff --git a/_dev/apps/ui/stories/product-feed-table-status-details.stories.ts b/_dev/apps/ui/stories/product-feed-table-status-details.stories.ts
@@ -165,7 +165,7 @@ TableStatusDetails.parameters = {
                 statuses: [
                   {
                     destination: "Shopping",
-                    status: "disapproved",
+                    status: "approved",
                     countries: ["GB"],
                   },
                   {