[ui/authorization] feature: simple data browsing

Co-authored-by: elf Pavlik <elf-pavlik@hackers4peace.net>
janeirodigital · Oct 26, 2023 · dc0eec0 · dc0eec0
1 parent 2d1605e
commit dc0eec0
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 22 deletions.
diff --git a/ui/authorization/src/components/AuthorizeApp.vue b/ui/authorization/src/components/AuthorizeApp.vue
@@ -160,9 +160,9 @@ span.label {
                           <v-btn class="flex-grow-1" icon="mdi-checkbox-outline" value="all"></v-btn>
                         </v-btn-toggle>
                         <template v-if="registrationsIndex[registration.id].scope === 'some'">
-                          <v-list v-if="dataInstancesLoaded(registration.id)">
+                          <v-list v-if="appStore.loadedDataInstances[registration.id]">
                             <v-list-item
-                              v-for="dataInstance of loadedDataInstances[registration.id]"
+                              v-for="dataInstance of appStore.loadedDataInstances[registration.id]"
                               :key="dataInstance.id"
                               :disabled="registrationsIndex[registration.id].scope !== 'some'"
                               @click="toggleOneInstance(dataInstance.id)"
@@ -235,8 +235,6 @@ const props = defineProps<{
   authorizationData: AuthorizationData;
 }>();
 
-const loadedDataInstances: Record<string, DataInstance[]> = {};
-
 type PropagatingScope = 'none' | 'all';
 type Scope = PropagatingScope | 'some';
 
@@ -347,25 +345,19 @@ function setScopeForAgentRegistrations(agentId: string, scope: PropagatingScope)
   }
 }
 
-// TODO optimise for empty data registrations
-function dataInstancesLoaded(registrationId: string): boolean {
-  return Object.values(dataInstancesIndex).some((i) => i.registration == registrationId);
-}
-
 function registrationScopeChanged(agentId: string, registrationId: string, scope: Scope) {
   if (scope !== 'some') {
     setSelectedForRegistrationInstances(registrationId, scope === 'all');
-  } else if (!dataInstancesLoaded(registrationId)) {
+  } else if (!appStore.loadedDataInstances[registrationId]) {
     const previousScope = registrationsIndex[registrationId].scope;
     loadDataInstances(agentId, registrationId, previousScope === 'all');
   }
   registrationsIndex[registrationId].scope = scope;
 }
 
 async function loadDataInstances(agentId: string, registrationId: string, selected: boolean): Promise<void> {
-  const dataInstances = await appStore.listDataInstances(registrationId);
-  loadedDataInstances[registrationId] = dataInstances;
-  addDataInstancesToIndex(agentId, registrationId, dataInstances, selected);
+  await appStore.listDataInstances(registrationId);
+  addDataInstancesToIndex(agentId, registrationId, appStore.loadedDataInstances[registrationId], selected);
 }
 
 function setSelectedForRegistrationInstances(registrationId: string, selected: boolean): void {

diff --git a/ui/authorization/src/store/app.ts b/ui/authorization/src/store/app.ts
@@ -23,7 +23,7 @@ export const useAppStore = defineStore('app', () => {
   const accessAuthorization = ref<AccessAuthorization | null>(null);
   const socialAgentList = ref<SocialAgent[]>([]);
   const application = ref<Partial<Application> | null>(null);
-  const loadedDataInstances = reactive<DataInstance[]>([]);
+  const loadedDataInstances = reactive<Record<string, DataInstance[]>>({});
   const applicationList = reactive<Application[]>([]);
   const dataRegistryList = reactive<DataRegistry[]>([]);
 
@@ -41,11 +41,10 @@ export const useAppStore = defineStore('app', () => {
     authorizationData.value = await backend.getAuthorization(clientId, lang.value);
   }
 
-  // TODO change to computed in component
+  // TODO rename list with load
   async function listDataInstances(registrationId: string) {
     const dataInstances = await backend.listDataInstances(registrationId);
-    loadedDataInstances.push(...dataInstances);
-    return dataInstances;
+    loadedDataInstances[registrationId] = [...dataInstances];
   }
 
   async function authorizeApp(authorization: Authorization) {

diff --git a/ui/authorization/src/views/Dashboard.vue b/ui/authorization/src/views/Dashboard.vue
@@ -16,7 +16,7 @@
     </v-btn>
 
     <v-btn :to="{name: 'data-registry-list'}">
-      <v-icon>mdi-hexagon-outline</v-icon>
+      <v-icon>mdi-hexagon-multiple-outline</v-icon>
 
       <span>Data</span>
     </v-btn>

diff --git a/ui/authorization/src/views/DataRegistryList.vue b/ui/authorization/src/views/DataRegistryList.vue
@@ -1,8 +1,41 @@
+<style>
+span.label {
+  padding-left: 6px;
+}
+</style>
 <template>
-  <v-list>
-    <v-list-item v-for="registry in appStore.dataRegistryList" :key="registry.id" :title="registry.id">
-    </v-list-item>
-  </v-list>
+  <v-expansion-panels>
+    <v-expansion-panel v-for="registry in appStore.dataRegistryList">
+      <v-expansion-panel-title class="d-flex flex-row">
+        <v-icon color="primary" icon="mdi-hexagon-outline"></v-icon>
+        <span class="label flex-grow-1">{{ registry.id }}</span>
+      </v-expansion-panel-title>
+      <v-expansion-panel-text>
+        <v-expansion-panels>
+        <v-expansion-panel 
+          v-for="registration in registry.registrations" 
+          :title="registration.label"
+          :key="registration.id"
+          @click="appStore.listDataInstances(registration.id)"
+          >
+          <v-expansion-panel-text>
+            <v-list v-if="appStore.loadedDataInstances[registration.id]">
+              <v-list-item
+                v-for="dataInstance of appStore.loadedDataInstances[registration.id]"
+                :key="dataInstance.id">
+                <v-list-item-title>
+                  <v-icon color="secondary" icon="mdi-star-three-points-outline"></v-icon>
+                  {{ dataInstance.label }}
+                </v-list-item-title>
+              </v-list-item>
+            </v-list>
+            <v-skeleton-loader v-else type="list-item@2"></v-skeleton-loader>
+          </v-expansion-panel-text>
+        </v-expansion-panel>
+      </v-expansion-panels>
+      </v-expansion-panel-text>
+    </v-expansion-panel>
+  </v-expansion-panels>
 </template>
 
 <script lang="ts" setup>