Skip to content

Geo Primary Verification List: Hookup single actions to UI

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 - closed) and hooking up the single item actions that will be supported in the API Geo Primary Verification API: POST api/v4/admin... (#537712 - closed).

Relevant links

Implementation plan

  1. Define the ACTION_TYPES in the constants.js file
export const ACTION_TYPES = {
  CHECKSUM: 'checksum'
}
  1. Add commitSingleModelAction method to the ee/api/data_management_api.js 
const DATA_MANAGEMENT_SINGLE_ACTION_PATH = '/api/:version/data_management/:model/:id/:action';

export const commitSingleModelAction = (model, id, action) => {
  const url = buildApiUrl(DATA_MANAGEMENT_SINGLE_ACTION_PATH)
    .replace(':model', model)
    .replace(':id', id)
    .replace(':action', action)

  return axios.post(url);
};
  1. Define the actions in the actionsArray in data_management_list_item.vue and pass it in the template
<script>
export default {
  computed: {
    actionsArray() {
      return [
        {
          id: 'geo-checksum-item',
          value: ACTION_TYPES.CHECKSUM,
          text: this.$options.i18n.checksum,
        },
      ];
    },
  },
}
</script>

<template>
  <geo-list-item
    :actions-array="actionsArray"
  >
  </geo-list-item>
</template>
  1. Define an event handler for actionClicked in the data_management_list_item.vue 
<script>
export default {
  methods: {
    onActionClicked(action) {
      this.$emit('actionClicked', { id: this.item.id, action: action.value })
    }
  }
}
</script>

<template>
  <geo-list-item
    @actionClicked="onActionClicked"
  >
  </geo-list-item>
</template>
  1. Pass along the actionClicked event in data_management_view.vue 
<script>
export default {
  methods: {
    onActionClicked(data) {
      this.$emit('actionClicked', data)
    }
  }
}
</script>

<template>
  <data-management-list-item
    @actionClicked="onActionClicked"
  />
</template>
  1. Handle actionClicked in the app.vue and fire the commitSingleModelAction API method
<script>
export default {
  methods: {
    async onSingleAction({ id, action }) {
      try {
        this.isLoading = true

        await commitSingleModelAction(this.activeModel, id, action)
      } catch (error) {
        createAlert({
          message: sprintf(this.$options.i18n.singleModelActionError, { id }),
          captureError: true,
          error,
        });
      } finally {
        this.isLoading = false
      }
    },
  }
}
</script>

<template>
  <data-management-view @actionClicked="onSingleAction" />
</template>
Edited by 🤖 GitLab Bot 🤖