Show very basic account list

This is the first step. Only shows name and email so far (because we don't have more data). Was necessary to change the request type of the list request to POST because it is not supported by microweb to have GET requests.
2020-07-01 11:05:33 +02:00
parent f883c5bd0b
commit 352b633e84
13 changed files with 293 additions and 186 deletions
@@ -1,15 +1,13 @@
 import 'regenerator-runtime/runtime'
 import App from './components/App.vue'
+import store from './store'

 const appInfo = {
  name: 'Accounts',
  id: 'accounts',
  icon: 'text-vcard',
  isFileEditor: false,
-  extensions: [],
-  config: {
-    url: 'https://localhost:9200'
-  }
+  extensions: []
 }

 const routes = [
@@ -36,5 +34,6 @@ const navItems = [
 export default {
  appInfo,
  routes,
-  navItems
+  navItems,
+  store
 }
@@ -28,82 +28,43 @@ export const request = (method, url, body, queryParameters, form, config) => {
 *                    
 ==========================================================*/
 /**
-* Lists accounts
-* request: AccountsService_ListAccounts
-* url: AccountsService_ListAccountsURL
-* method: AccountsService_ListAccounts_TYPE
-* raw_url: AccountsService_ListAccounts_RAW_URL
-     * @param pageSize - Optional. The maximum number of accounts to return in the response.
-     * @param pageToken - Optional. A pagination token returned from a previous call to `Get`
-that indicates from where search should continue.
-     * @param fieldMaskPaths - The set of field mask paths.
-     * @param query - Optional. Search criteria used to select the accounts to return.
-If no search criteria is specified then all accounts will be
-returned. TODO update query language
-Query expressions can be used to restrict results based upon
-the account properties where the operators `=`, `NOT`, `AND` and `OR`
-can be used along with the suffix wildcard symbol `*`.
-
-The string properties in a query expression should use escaped quotes
-for values that include whitespace to prevent unexpected behavior.
-
-Some example queries are:
-
-* Query `display_name=Th*` returns accounts whose display_name
-starts with "Th"
-* Query `email=foo@example.com` returns accounts with
-`email` set to `foo@example.com`
-* Query `display_name=\\"Test String\\"` returns accounts with
-display names that include both "Test" and "String"
-*/
+ * Lists accounts
+ * request: AccountsService_ListAccounts
+ * url: AccountsService_ListAccountsURL
+ * method: AccountsService_ListAccounts_TYPE
+ * raw_url: AccountsService_ListAccounts_RAW_URL
+ * @param body - 
+ */
 export const AccountsService_ListAccounts = function(parameters = {}) {
  const domain = parameters.$domain ? parameters.$domain : getDomain()
  const config = parameters.$config
-  let path = '/v0/accounts'
+  let path = '/api/v0/accounts/accounts-list'
  let body
  let queryParameters = {}
  let form = {}
-  if (parameters['pageSize'] !== undefined) {
-    queryParameters['page_size'] = parameters['pageSize']
+  if (parameters['body'] !== undefined) {
+    body = parameters['body']
  }
-  if (parameters['pageToken'] !== undefined) {
-    queryParameters['page_token'] = parameters['pageToken']
-  }
-  if (parameters['fieldMaskPaths'] !== undefined) {
-    queryParameters['field_mask.paths'] = parameters['fieldMaskPaths']
-  }
-  if (parameters['query'] !== undefined) {
-    queryParameters['query'] = parameters['query']
+  if (parameters['body'] === undefined) {
+    return Promise.reject(new Error('Missing required  parameter: body'))
  }
  if (parameters.$queryParameters) {
    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
    });
  }
-  return request('get', domain + path, body, queryParameters, form, config)
+  return request('post', domain + path, body, queryParameters, form, config)
 }
 export const AccountsService_ListAccounts_RAW_URL = function() {
-  return '/v0/accounts'
+  return '/api/v0/accounts/accounts-list'
 }
 export const AccountsService_ListAccounts_TYPE = function() {
-  return 'get'
+  return 'post'
 }
 export const AccountsService_ListAccountsURL = function(parameters = {}) {
  let queryParameters = {}
  const domain = parameters.$domain ? parameters.$domain : getDomain()
-  let path = '/v0/accounts'
-  if (parameters['pageSize'] !== undefined) {
-    queryParameters['page_size'] = parameters['pageSize']
-  }
-  if (parameters['pageToken'] !== undefined) {
-    queryParameters['page_token'] = parameters['pageToken']
-  }
-  if (parameters['fieldMaskPaths'] !== undefined) {
-    queryParameters['field_mask.paths'] = parameters['fieldMaskPaths']
-  }
-  if (parameters['query'] !== undefined) {
-    queryParameters['query'] = parameters['query']
-  }
+  let path = '/api/v0/accounts/accounts-list'
  if (parameters.$queryParameters) {
    Object.keys(parameters.$queryParameters).forEach(function(parameterName) {
      queryParameters[parameterName] = parameters.$queryParameters[parameterName]
@@ -1,15 +1,34 @@
 <template>
  <div>
-    <div class="uk-width-3-4@m uk-container uk-padding">
+    <div class="uk-container uk-padding">
      <h1>
        Accounts
      </h1>
+      <template v-if="isInitialized">
+        <accounts-list :accounts="accounts" />
+      </template>
+      <oc-loader v-else />
    </div>
  </div>
 </template>

 <script>
+import { mapGetters, mapActions } from 'vuex'
+import AccountsList from './accounts/AccountsList.vue'
 export default {
-  name: 'App'
+  name: 'App',
+  components: { AccountsList },
+  computed: {
+    ...mapGetters('Accounts', ['isInitialized', 'getAccountsSorted']),
+    accounts () {
+      return this.getAccountsSorted
+    }
+  },
+  methods: {
+    ...mapActions('Accounts', ['initialize'])
+  },
+  created () {
+    this.initialize()
+  }
 }
 </script>
@@ -0,0 +1,34 @@
+<template>
+  <div>
+    <oc-table middle divider>
+      <oc-table-group>
+        <oc-table-row>
+          <oc-table-cell shrink type="head" />
+          <oc-table-cell type="head" v-text="$gettext('Name')" />
+          <oc-table-cell type="head" v-text="$gettext('Email')" />
+        </oc-table-row>
+      </oc-table-group>
+      <oc-table-group>
+        <oc-table-row v-for="account in accounts" :key="`account-list-row-${account.id}`">
+          <oc-table-cell>
+            <oc-avatar :userName="account.preferredName" />
+          </oc-table-cell>
+          <oc-table-cell v-text="account.preferredName" />
+          <oc-table-cell v-text="account.mail" />
+        </oc-table-row>
+      </oc-table-group>
+    </oc-table>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AccountsList',
+  props: {
+    accounts: {
+      type: Array,
+      required: true
+    }
+  }
+}
+</script>
@@ -0,0 +1,81 @@
+import {
+  // eslint-disable-next-line camelcase
+  AccountsService_ListAccounts
+} from '../client/accounts'
+import axios from 'axios'
+
+const state = {
+  config: null,
+  initialized: false,
+  accounts: {}
+}
+
+const getters = {
+  config: state => state.config,
+  isInitialized: state => state.initialized,
+  getAccountsSorted: state => {
+    // FIXME: look at data fields for available sorting options
+    return Object.values(state.accounts)
+  }
+}
+
+const mutations = {
+  LOAD_CONFIG (state, config) {
+    state.config = config
+  },
+  SET_INITIALIZED (state, value) {
+    state.initialized = value
+  },
+  SET_ACCOUNTS (state, accounts) {
+    state.accounts = accounts
+  }
+}
+
+const actions = {
+  loadConfig ({ commit }, config) {
+    commit('LOAD_CONFIG', config)
+  },
+
+  async initialize ({ commit, dispatch }) {
+    await dispatch('fetchAccounts')
+    commit('SET_INITIALIZED', true)
+  },
+
+  async fetchAccounts ({ commit, dispatch, getters, rootGetters }) {
+    injectAuthToken(rootGetters)
+    const response = await AccountsService_ListAccounts({
+      $domain: rootGetters.configuration.server,
+      body: {}
+    })
+    if (response.status === 201) {
+      const accounts = response.data.accounts
+      commit('SET_ACCOUNTS', accounts || [])
+    } else {
+      dispatch('showMessage', {
+        title: 'Failed to fetch accounts.',
+        desc: response.statusText,
+        status: 'danger'
+      }, { root: true })
+    }
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  getters,
+  actions,
+  mutations
+}
+
+function injectAuthToken (rootGetters) {
+  axios.interceptors.request.use(config => {
+    if (typeof config.headers.Authorization === 'undefined') {
+      const token = rootGetters.user.token
+      if (token) {
+        config.headers.Authorization = `Bearer ${token}`
+      }
+    }
+    return config
+  })
+}