Make pagination to work and integrate with backend

cloudblue · Jan 8, 2024 · 6368fa3 · 6368fa3
1 parent 069c9bf
commit 6368fa3
Show file tree

Hide file tree

Showing 19 changed files with 281 additions and 205 deletions.
diff --git a/...eployment-details.6821e06b1fbacca9d4c7.js → ...eployment-details.fd87698951c89fbe5e69.js b/...eployment-details.6821e06b1fbacca9d4c7.js → ...eployment-details.fd87698951c89fbe5e69.js
diff --git a/..._ppr/static/index.8af7ae08238431f57421.js → ..._ppr/static/index.00751d4e28bf7cf9b010.js b/..._ppr/static/index.8af7ae08238431f57421.js → ..._ppr/static/index.00751d4e28bf7cf9b010.js
diff --git a/connect_ext_ppr/static/index.078542b7141079d77ac1.css b/connect_ext_ppr/static/index.078542b7141079d77ac1.css
diff --git a/connect_ext_ppr/static/index.html b/connect_ext_ppr/static/index.html
@@ -12,7 +12,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto+Mono&family=Roboto:ital,wght@0,400;0,500;0,700;1,400;1,500;1,700&display=swap" rel="stylesheet">
     <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
     <title>Index</title>
-<script defer src="vendors.d43ac28a3eb5fa40c6ce.js"></script><script defer src="index.8af7ae08238431f57421.js"></script><link href="index.078542b7141079d77ac1.css" rel="stylesheet"></head>
+<script defer src="vendors.d43ac28a3eb5fa40c6ce.js"></script><script defer src="index.00751d4e28bf7cf9b010.js"></script><link href="index.078542b7141079d77ac1.css" rel="stylesheet"></head>
 
 <body>
     <div id="app"></div>

diff --git a/...c/request-details.eba3a5545dfa7b83b78d.js → ...c/request-details.d2e1e1181d6531e0ff8b.js b/...c/request-details.eba3a5545dfa7b83b78d.js → ...c/request-details.d2e1e1181d6531e0ff8b.js
diff --git a/ui/src/components/CreateDeploymentRequestDialog/MarketplacesTab.vue b/ui/src/components/CreateDeploymentRequestDialog/MarketplacesTab.vue
@@ -137,7 +137,8 @@ export default {
   async created() {
     try {
       this.loading = true;
-      this.marketplaces = await getDeploymentMarketplaces(this.deploymentId);
+      const depMktps = await getDeploymentMarketplaces(this.deploymentId);
+      this.marketplaces = depMktps.collection;
       if (this.value.all) this.isAllSelected = true;
       else if (this.value.choices.length) this.selectedMarketplaces = this.value.choices;
     } catch (e) {

diff --git a/ui/src/components/CreateDeploymentRequestDialog/PprTab.vue b/ui/src/components/CreateDeploymentRequestDialog/PprTab.vue
@@ -110,7 +110,8 @@ export default {
   async created() {
     try {
       this.loading = true;
-      this.pprs = await getPPRs(this.deploymentId);
+      const pprs = await getPPRs(this.deploymentId);
+      this.pprs = pprs.collection;
       if (this.localValue?.id) this.selectedPprVersion = this.localValue.id;
     } catch (e) {
       this.pprs = [];

diff --git a/ui/src/components/CreateDeploymentRequestDialog/index.vue b/ui/src/components/CreateDeploymentRequestDialog/index.vue
@@ -260,12 +260,13 @@ export default {
 
     async fetchDeployment() {
       if (this.deployment) return;
-
-      [this.localDeployment] = await getDeployments({
+      const deployments = await getDeployments({
         hubId: this.form.hub.id,
         productId: this.form.product.id,
       });
 
+      [this.localDeployment] = deployments.collection;
+
       this.goToNextStep();
     },
 

diff --git a/ui/src/components/DeploymentConfigurationTab.vue b/ui/src/components/DeploymentConfigurationTab.vue
@@ -6,7 +6,8 @@
     hide-go-to-page-section,
     :prepare-row="prepareRow",
     :updating="loading",
-    showManagePanel,
+    show-manage-panel,
+    :update="load",
   )
     template(#buttons="")
       c-button(
@@ -202,6 +203,7 @@ export default {
       uploadErrorText: '',
       showErrorSnackbar: false,
       errorSnackbarText: '',
+      localParams: { limit: 10, offset: 0 },
     };
   },
 
@@ -264,7 +266,8 @@ export default {
     async getConfigs() {
       this.loading = true;
       try {
-        this.localValue = await getDeploymentConfigurations(this.deploymentId);
+        const conf = await getDeploymentConfigurations(this.deploymentId, this.localParams);
+        this.localValue = conf.collection;
       } catch (e) {
         this.showErrorSnackbar = true;
         this.errorSnackbarText = e.message;
@@ -282,6 +285,12 @@ export default {
         this.errorSnackbarText = e.message;
       }
     },
+
+    load(params) {
+      this.localParams = params;
+
+      return getDeploymentConfigurations(this.deploymentId, params);
+    },
   },
 
   created() {

diff --git a/ui/src/components/DeploymentMarketplacesTab.vue b/ui/src/components/DeploymentMarketplacesTab.vue
@@ -5,7 +5,7 @@
     :headers="headers",
     :prepare-row="prepareRow",
     :updating="loading",
-    hide-all-pagination-sections,
+    :update="load",
   )
     template(#items="{ row, visibleHeaders }")
       tr.table__row.hoverable(:id="row.id")
@@ -61,20 +61,13 @@
 
 <script>
 import {
-  getDeploymentBatches,
   getDeploymentMarketplaces,
 } from '@/utils';
 
 import cDataTable from '~components/cDataTable.vue';
 import DetailItem from '~components/DetailItem.vue';
 import Pic from '~components/Pic.vue';
 
-import {
-  enrich,
-} from '~utils';
-
-
-const enrichByBatchInfo = enrich('id', ['pricelist', 'id'], 'pricelist');
 
 export default {
   components: {
@@ -109,15 +102,13 @@ export default {
         priceList: item.pricelist,
       };
     },
+
+    load(params) {
+      return getDeploymentMarketplaces(this.deploymentId, params);
+    },
   },
 
-  async created() {
-    const marketplaces = await getDeploymentMarketplaces(this.deploymentId);
-    const batches = await getDeploymentBatches(this.deploymentId);
 
-    this.marketplaces = enrichByBatchInfo(batches, marketplaces);
-    this.loading = false;
-  },
 };
 
 </script>
diff --git a/ui/src/components/DeploymentRequestsTab.vue b/ui/src/components/DeploymentRequestsTab.vue
@@ -5,9 +5,9 @@
     :headers="headers",
     :prepare-row="prepareRow",
     :updating="loading",
-    hide-all-pagination-sections,
     fix-layout,
     show-manage-panel,
+    :update="load",
   )
     template(#buttons="")
       c-button.ppr-table__upload-btn(
@@ -132,6 +132,8 @@ export default {
         width: 140,
       },
     ],
+
+    localParams: { limit: 10, offset: 0 },
   }),
 
   computed: {
@@ -155,13 +157,16 @@ export default {
 
     async loadRequests() {
       this.loading = true;
-      this.requests = await getDeploymentRequests(this.deploymentId);
+      const rq = await getDeploymentRequests(this.deploymentId, this.localParams);
+      this.requests = rq.collection;
       this.loading = false;
     },
-  },
 
-  created() {
-    this.loadRequests();
+    load(params) {
+      this.localParams = params;
+
+      return getDeploymentRequests(this.deploymentId, params);
+    },
   },
 };
 

diff --git a/ui/src/components/DeploymentRequestsTable.vue b/ui/src/components/DeploymentRequestsTable.vue
@@ -5,6 +5,7 @@ c-data-table(
   hide-go-to-page-section,
   :prepare-row="prepareRow",
   :updating="localUpdating",
+  :update="load",
 )
   template(#items="{ row, visibleHeaders}")
     tr.table__row.hoverable(:id="row.id")
@@ -166,17 +167,25 @@ export default {
           align: 'left',
         },
       ],
+
+      localParams: { limit: 10, offset: 0 },
     };
   },
 
   methods: {
     prepareRow,
+
+    load(params) {
+      this.localParams = params;
+
+      return getDeploymentsRequests(params);
+    },
   },
 
   watch: {
     async localUpdating(v) {
       if (v) {
-        this.localValue = await getDeploymentsRequests();
+        await getDeploymentsRequests(this.localParams);
         this.localUpdating = false;
       }
     },

diff --git a/ui/src/components/DeploymentsTable.vue b/ui/src/components/DeploymentsTable.vue
@@ -3,6 +3,7 @@ c-data-table(
   v-model="localValue",
   :headers="headers",
   hide-go-to-page-section,
+  :update="load",
   :prepare-row="prepareRow",
   :updating="loading",
 )
@@ -155,13 +156,12 @@ export default {
 
   methods: {
     prepareRow,
-  },
 
-  async created() {
-    this.loading = true;
-    const allDeployments = await getDeployments();
-    this.localValue = allDeployments;
-    this.loading = false;
+    load(params) {
+      return getDeployments({
+        queryParameters: params,
+      });
+    },
   },
 };
 </script>
diff --git a/ui/src/components/PprTab.vue b/ui/src/components/PprTab.vue
@@ -5,9 +5,9 @@
     :headers="headers",
     :prepare-row="prepareRow",
     :updating="loading",
-    hide-all-pagination-sections,
-    fix-layout,
+    :update="load",
     show-manage-panel,
+    hide-go-to-page-section,
   )
     template(#buttons="")
       c-button.ppr-table__upload-btn(
@@ -236,6 +236,7 @@ export default {
 
       showErrorSnackbar: false,
       errorSnackbarText: '',
+      localParams: { limit: 10, offset: 0 },
     };
   },
 
@@ -267,7 +268,8 @@ export default {
     async loadPPRs() {
       try {
         this.loading = true;
-        this.localValue = await getPPRs(this.deploymentId);
+        const pprs = await getPPRs(this.deploymentId, this.localParams);
+        this.localValue = pprs.collection;
       } catch (e) {
         this.showErrorSnackbar = true;
         this.errorSnackbarText = e.message;
@@ -279,10 +281,12 @@ export default {
     openUploadPPRDialog() {
       this.isUploadPPRDialogOpen = true;
     },
-  },
 
-  created() {
-    this.loadPPRs();
+    load(params) {
+      this.localParams = params;
+
+      return getPPRs(this.deploymentId, params);
+    },
   },
 };
 </script>

diff --git a/ui/src/components/RequestMarketplacesTab.vue b/ui/src/components/RequestMarketplacesTab.vue
@@ -5,7 +5,7 @@
     :headers="headers",
     :prepare-row="prepareRow",
     :updating="loading",
-    hide-all-pagination-sections,
+    :update="load",
   )
     template(#items="{ row, visibleHeaders }")
       tr.table__row.hoverable(:id="row.id")
@@ -64,18 +64,10 @@ import DetailItem from '~components/DetailItem.vue';
 import Pic from '~components/Pic.vue';
 
 import {
-  enrich,
-} from '@/tools/utils';
-
-import {
-  getDeploymentBatches,
   getDeploymentRequestMarketplaces,
 } from '@/utils';
 
 
-const enrichByBatchInfo = enrich('id', ['pricelist', 'id'], 'pricelist');
-
-
 export default {
   components: {
     cDataTable,
@@ -120,14 +112,10 @@ export default {
         pricelist: item.pricelist,
       };
     },
-  },
-
-  async created() {
-    this.marketplaces = await getDeploymentRequestMarketplaces(this.requestId);
-    const batches = await getDeploymentBatches(this.deploymentId);
 
-    this.marketplacesWithBatchesInfo = enrichByBatchInfo(batches, this.marketplaces);
-    this.loading = false;
+    load(params) {
+      return getDeploymentRequestMarketplaces(this.requestId, this.deploymentId, params);
+    },
   },
 };
 

diff --git a/ui/src/components/RequestTasksTab.vue b/ui/src/components/RequestTasksTab.vue
@@ -5,7 +5,7 @@
     :headers="headers",
     :prepare-row="prepareRow",
     :updating="loading",
-    hide-all-pagination-sections,
+    :update="load",
   )
     template(#items="{ row, visibleHeaders }")
       tr.table__row.hoverable(:id="row.id")
@@ -156,6 +156,7 @@ export default {
     isInfoDialogOpen: false,
     currentError: '',
     isErrorDialogOpen: false,
+    localParams: { limit: 10, offset: 0 },
   }),
 
   methods: {
@@ -191,11 +192,10 @@ export default {
       this.isErrorDialogOpen = true;
     },
 
-    async loadTasks() {
-      this.loading = true;
-      this.tasks = await getDeploymentRequestTasks(this.requestId);
-      this.loading = false;
-      this.localUpdating = false;
+    load(params) {
+      this.localParams = params;
+
+      return getDeploymentRequestTasks(this.requestId, params);
     },
   },
 
@@ -204,14 +204,12 @@ export default {
       if (!v) this.currentItem = null;
     },
 
-    localUpdating(v) {
-      if (v) this.loadTasks();
+    async localUpdating(v) {
+      if (v) {
+        this.tasks = await getDeploymentRequestTasks(this.requestId, this.localParams);
+      }
     },
   },
-
-  created() {
-    this.loadTasks();
-  },
 };
 
 </script>