Geo Primary Verification List: Hookup API to UI

Everyone can contribute. Help move this issue forward while earning points, leveling up and collecting rewards.

• Work on this issue
• Close this issue

Why are we doing this work

This work will be behind feature flag geo_primary_verification_view

This work is focused on taking the UI added as as part of Geo Primary Verification List: Hookup `geo_shar... (#538023) and hooking up the API implemented as part of Geo Primary Verification API: GET `api/v4/admin... (#537707 - closed)

Relevant links

• UI issue: Geo Primary Verification List: Hookup `geo_shar... (#538023)
• API Endpoint Issue: Geo Primary Verification API: GET `api/v4/admin... (#537707 - closed)

Implementation plan

1. Add fetchModelList to ee/api/data_management_api.js (if not created, create it and import it to ee/rest_api.js)

const DATA_MANAGEMENT_PATH = '/api/:version/data_management/:model';

export const fetchModelList = (model, options = {}) => {
  const url = buildApiUrl(DATA_MANAGEMENT_PATH).replace(':model', model);

  return axios.get(url, {
    params: {
      ...options,
    },
  });
};

2. Call fetchModelList from app.vue on mount after getFiltersFromQuery and ensure to pass activeFilters to the query.

<script>
export default {
  created() {
    this.getFiltersFromQuery();
    this.getModelList();
  },
  methods: {
    async getModelList() {
      try {
        this.isLoading = true

        const { query } = processFilters(this.activeFilters)

        const { data } = await fetchModelList(this.activeModel, query);
        this.modelItems = data
      } catch (error) {
        createAlert({
          message: this.$options.i18n.modelListFetchError,
          captureError: true,
          error,
        });
      } finally {
        this.isLoading = false
      }
    },
  }
}
</script>

3. Add list as raw data to template for MVC in app.vue

<template>
  <geo-list :is-loading="isLoading" :has-items="Boolean(modelItems.length)" :empty-state="emptyState">
    {{ modelItems }}
  </geo-list>
</template>