feat(ui): add edit reload resource view #3840 (#3886)

* feat(ui): reconnect view, and other ui/ux in table/variable pages * feat(ui): edit resource view * chore: fr translation
obiba · Aug 9, 2024 · b19056c · b19056c
1 parent 8809bf4
commit b19056c
Show file tree

Hide file tree

Showing 9 changed files with 171 additions and 69 deletions.
diff --git a/opal-ui/src/components/datasource/TableVariables.vue b/opal-ui/src/components/datasource/TableVariables.vue
@@ -29,7 +29,7 @@
               :title="$t('refresh')"
               outline
               size="sm"
-              @click="init"
+              @click="onRefresh"
             />
             <q-btn
               v-if="datasourceStore.perms.table?.canUpdate()"
@@ -213,16 +213,23 @@ function init() {
   selected.value = [];
   datasourceStore
     .initDatasourceTableVariables(dsName.value, tName.value)
-    .then(() => {
-      loading.value = false;
-    })
     .catch((err) => {
-      loading.value = false;
       notifyError(err);
+    })
+    .finally(() => {
+      loading.value = false;
     });
   taxonomiesStore.init();
 }
 
+function onRefresh() {
+  loading.value = true;
+  datasourceStore.loadTableVariables()
+    .finally(() => {
+      loading.value = false;
+    });
+}
+
 function getCategoryNames(categories: CategoryDto[]) {
   return categories ? categories.map((c) => c.name).join(', ') : undefined;
 }

diff --git a/opal-ui/src/components/datasource/VariableSummary.vue b/opal-ui/src/components/datasource/VariableSummary.vue
@@ -26,6 +26,7 @@
       @click="init"
       class="q-mt-lg"
       style="height: 2.5em;"
+      :disable="loading"
     />
     <q-btn
       color="primary"
@@ -35,10 +36,14 @@
       @click="onFullSummary"
       class="q-mt-lg"
       style="height: 2.5em;"
+      :disable="loading"
     />
   </div>
   <q-separator class="q-mt-md q-mb-md" />
-  <div v-if="summary['Math.CategoricalSummaryDto.categorical']">
+  <div v-if="loading">
+    <q-spinner-dots size="lg" class="q-mt-md" />
+  </div>
+  <div v-else-if="summary['Math.CategoricalSummaryDto.categorical']">
     <categorical-summary-chart :data="summary['Math.CategoricalSummaryDto.categorical']" class="q-mt-md"/>
   </div>
   <div v-else-if="summary['Math.TextSummaryDto.textSummary']">
@@ -74,16 +79,20 @@ const STEP_COUNT = 1000;
 
 const summary = ref({});
 const limit = ref(STEP_COUNT);
+const loading = ref(false);
 
 onMounted(() => {
   init();
 });
 
 function init() {
+  loading.value = true;
   datasourceStore
     .loadVariableSummary(props.variable, true, limit.value > props.total ? props.total : limit.value)
     .then((data) => {
       summary.value = data;
+    }).finally(() => {
+      loading.value = false;
     });
 }
 

diff --git a/...nents/resources/AddResourceViewDialog.vue → ...mponents/resources/ResourceViewDialog.vue b/...nents/resources/AddResourceViewDialog.vue → ...mponents/resources/ResourceViewDialog.vue
@@ -2,13 +2,14 @@
   <q-dialog v-model="showDialog" @hide="onHide">
       <q-card class="dialog-sm">
         <q-card-section>
-          <div class="text-h6">{{ $t('add_view') }}</div>
+          <div class="text-h6">{{ editMode ? $t('edit_view') : $t('add_view') }}</div>
         </q-card-section>
 
         <q-separator />
 
         <q-card-section>
           <q-select
+            v-show="!editMode"
             v-model="projectDestination"
             :options="projectNames"
             :label="$t('project_destination')"
@@ -22,6 +23,15 @@
             :hint="$t('resource_ref.view_destination_hint')"
             class="q-mb-md"
           />
+          <q-input
+            v-show="editMode"
+            v-model="resourceFullName"
+            dense
+            type="text"
+            :label="$t('resource')"
+            :hint="$t('resource_ref.from_hint')"
+            class="q-mb-md"
+          />
           <q-input
             v-model="id"
             dense
@@ -74,7 +84,7 @@
 
 <script lang="ts">
 export default defineComponent({
-  name: 'AddResourceViewDialog',
+  name: 'ResourceViewDialog',
 });
 </script>
 <script setup lang="ts">
@@ -84,7 +94,8 @@ import { notifyError } from 'src/utils/notify';
 
 interface DialogProps {
   modelValue: boolean;
-  resource: ResourceReferenceDto;
+  resource?: ResourceReferenceDto;
+  view?: ViewDto;
 }
 
 const props = defineProps<DialogProps>();
@@ -95,23 +106,37 @@ const projectsStore = useProjectsStore();
 const datasourceStore = useDatasourceStore();
 
 const projectNames = computed(() => projectsStore.projects.map((p) => p.name));
+const editMode = computed(() => props.view);
 
 const showDialog = ref(props.modelValue);
 const projectDestination = ref('');
 const name = ref('');
+const resourceFullName = ref('');
 const id = ref('');
 const entityType = ref('Participant');
 const allColumns = ref(true);
 const profile = ref('');
 
 watch(() => props.modelValue, (value) => {
   if (value) {
-    projectDestination.value = props.resource.project as string;
-    name.value = props.resource.name;
+    projectDestination.value = projectsStore.project.name || datasourceStore.datasource.name;
     id.value = '';
     entityType.value = 'Participant';
     allColumns.value = true;
     profile.value = '';
+    if (props.resource) {
+      name.value = props.resource.name;
+      resourceFullName.value = `${props.resource.project}.${props.resource.name}`;
+    }
+    if (props.view) {
+      name.value = props.view.name || '';
+      resourceFullName.value = props.view.from[0];
+      const resView = props.view['Magma.ResourceViewDto.view'] as ResourceViewDto;
+      id.value = resView.idColumn || '';
+      entityType.value = resView.entityType || 'Participant';
+      allColumns.value = resView.allColumns || true;
+      profile.value = resView.profile || '';
+    }
   }
   showDialog.value = value;
 });
@@ -129,8 +154,6 @@ function onSaveView() {
     return;
   }
 
-  const from = `${props.resource.project}.${props.resource.name}`;
-
   const resView = {
       entityType: entityType.value || 'Participant',
       idColumn: id.value,
@@ -140,23 +163,38 @@ function onSaveView() {
 
   const newViewPage = `/project/${projectDestination.value}/table/${name.value}`;
 
-
-  datasourceStore.getView(projectDestination.value, name.value)
-    .then((view: ViewDto) => {
-      view.from = [from];
-      view['Magma.ResourceViewDto.view'] = resView;
-      datasourceStore.updateView(projectDestination.value, name.value, view, 'Updated from resource')
-        .then(() => {
-          router.push(newViewPage);
-        })
-        .catch((error) => {
-          notifyError(error);
-        });
-    })
-    .catch((err) => {
-      datasourceStore.addResourceView(projectDestination.value, name.value, from, resView)
-        .then(() => router.push(newViewPage));
-    });
+  if (editMode.value) {
+    // update existing
+    const currentView = { ...props.view };
+    currentView.name = name.value;
+    currentView.from = [resourceFullName.value];
+    currentView['Magma.ResourceViewDto.view'] = resView;
+    datasourceStore.updateView(projectDestination.value, props.view?.name || name.value, currentView, 'Updated from resource view')
+      .then(() => {
+        router.push(newViewPage);
+      })
+      .catch((error) => {
+        notifyError(error);
+      });
+  } else {
+    // update existing or add
+    datasourceStore.getView(projectDestination.value, name.value)
+      .then((view: ViewDto) => {
+        view.from = [resourceFullName.value];
+        view['Magma.ResourceViewDto.view'] = resView;
+        datasourceStore.updateView(projectDestination.value, name.value, view, 'Updated from resource')
+          .then(() => {
+            router.push(newViewPage);
+          })
+          .catch((error) => {
+            notifyError(error);
+          });
+      })
+      .catch((err) => {
+        datasourceStore.addResourceView(projectDestination.value, name.value, resourceFullName.value, resView)
+          .then(() => router.push(newViewPage));
+      });
+  }
 
 }
 </script>
diff --git a/opal-ui/src/i18n/en/index.js b/opal-ui/src/i18n/en/index.js
@@ -886,6 +886,7 @@ export default {
   r_service: 'R service',
   range: 'Range',
   realm: 'Realm',
+  reconnect_view: 'Reconnect view',
   records: 'Records',
   referenced_entity_type_hint: 'When the value is an identifier, its entity type can be specified.',
   referenced_entity_type: 'Referenced entity type',
@@ -1034,5 +1035,6 @@ export default {
     all_columns_hint: 'When checked, all the observed resource\'s columns (except the identifier\'s column) will be mapped to a variable when the connection with the resource is established. This means that when a new column appears in the resource, a corresponding variable will be automatically added.',
     r_server_profile: 'R server profile',
     r_server_profile_hint: 'Optional R server profile name to be used for establishing the connection with the resource. If not specified, the profile will be guessed based on the R package associated to the resource.',
+    from_hint: 'The full name of the resource to be connected and coerced to its tabular representation.'
   }
 };
diff --git a/opal-ui/src/i18n/fr/index.js b/opal-ui/src/i18n/fr/index.js
@@ -886,6 +886,7 @@ export default {
   r_service: 'Service R',
   range: 'Plage',
   realm: 'Domaine',
+  reconnect_view: 'Reconnecter la vue',
   records: 'Enregistrements',
   referenced_entity_type_hint: 'Quand les valeurs sont des identifiants, la variable est une référence à une autre entité.',
   referenced_entity_type: "Type d'entité référencée",
@@ -1034,5 +1035,6 @@ export default {
     all_columns_hint: 'Quand sélectionné, toutes les colonnes observées (sauf la colonne des identifiants) seront décrites comme des variables quand la connexion avec la ressource sera établie. Cela signifie que quand une nouvelle colonne apparait dans la resource, une variable correspondante sera automatiquement ajoutée.',
     r_server_profile: 'Profile du serveur R',
     r_server_profile_hint: 'Nom (optionnel) du serveur R à utiliser pour établir la connexion avec la ressource. Si non spécifié, le profile sera deviné à partir du package R associé à la ressource.',
+    from_hint: 'Le nom complet de la ressource à laquelle se connecter et à représenter sous forme de tableau.'
   }
 };
diff --git a/opal-ui/src/pages/ProjectResourcePage.vue b/opal-ui/src/pages/ProjectResourcePage.vue
@@ -11,6 +11,7 @@
       <q-space />
       <q-btn
         outline
+        no-caps
         icon="navigate_before"
         size="sm"
         :label="previousReference?.name"
@@ -20,6 +21,7 @@
       />
       <q-btn
         outline
+        no-caps
         icon-right="navigate_next"
         size="sm"
         :label="nextReference?.name"
@@ -108,7 +110,7 @@
         </q-tab-panel>
       </q-tab-panels>
 
-      <add-resource-view-dialog v-if="resourceReference" v-model="showAddView" :resource="resourceReference" />
+      <resource-view-dialog v-if="resourceReference" v-model="showAddView" :resource="resourceReference" />
       <resource-reference-dialog v-model="showEdit" :provider="resourceProvider" :resource="selected" @saved="onSaved" />
       <confirm-dialog v-model="showDelete" :title="$t('delete')" :text="$t('delete_resources_confirm', { count: 1 })" @confirm="onDeleteResource" />
     </q-page>
@@ -122,7 +124,7 @@ import ResourceReference from 'src/components/resources/ResourceReference.vue';
 import AccessControlList from 'src/components/permissions/AccessControlList.vue';
 import ResourceReferenceDialog from 'src/components/resources/ResourceReferenceDialog.vue';
 import ConfirmDialog from 'src/components/ConfirmDialog.vue';
-import AddResourceViewDialog from 'src/components/resources/AddResourceViewDialog.vue';
+import ResourceViewDialog from 'src/components/resources/ResourceViewDialog.vue';
 import { notifyError, notifySuccess } from 'src/utils/notify';
 
 const route = useRoute();