Add toggle to show/hide subgroups (#952)

* add subgroup toggle, still needs to refresh tabledata

* add subgroup toggle

* default to hide

* Update src/components/ListOrgs.vue

Co-authored-by: Maximilian Oertel <info@maximilianoertel.de>

* import const org_types

---------

Co-authored-by: Maximilian Oertel <info@maximilianoertel.de>

src/components/ListOrgs.vue

@@ -50,6 +50,14 @@
               </span>
             </div>
           </div>
+          <div v-if="activeOrgType === ORG_TYPES.GROUPS" class="mx-2">
+            <PvToggleButton
+              v-model="hideSubgroups"
+              offLabel="Hide Subgroups"
+              onLabel="Show Subgroups"
+              class="p-2 rounded"
+            />
+          </div>
           <RoarDataTable
             v-if="tableData"
             :key="tableKey"
@@ -163,6 +171,7 @@ import PvInputText from 'primevue/inputtext';
 import PvTabPanel from 'primevue/tabpanel';
 import PvTabView from 'primevue/tabview';
 import PvToast from 'primevue/toast';
+import PvToggleButton from 'primevue/togglebutton';
 import _get from 'lodash/get';
 import _head from 'lodash/head';
 import _kebabCase from 'lodash/kebabCase';
@@ -180,6 +189,7 @@ import RoarModal from './modals/RoarModal.vue';
 import { CSV_EXPORT_MAX_RECORD_COUNT } from '@/constants/csvExport';
 import { TOAST_SEVERITIES, TOAST_DEFAULT_LIFE_DURATION } from '@/constants/toasts.js';
 import RoarDataTable from '@/components/RoarDataTable.vue';
+import { ORG_TYPES } from '../constants/orgTypes';
 
 const initialized = ref(false);
 const selectedDistrict = ref(undefined);
@@ -192,6 +202,7 @@ const isEditModalEnabled = ref(false);
 const currentEditOrgId = ref(null);
 const localOrgData = ref(null);
 const isSubmitting = ref(false);
+const hideSubgroups = ref(false);
 
 const districtPlaceholder = computed(() => {
   if (isLoadingDistricts.value) {
@@ -451,7 +462,7 @@ const tableColumns = computed(() => {
 
 const tableData = computed(() => {
   if (isLoading.value) return [];
-  return orgData?.value?.map((org) => {
+  const tableData = orgData?.value?.map((org) => {
     return {
       ...org,
       routeParams: {
@@ -462,6 +473,11 @@ const tableData = computed(() => {
       },
     };
   });
+  if (activeOrgType.value === ORG_TYPES.GROUPS && !hideSubgroups.value) {
+    return tableData.filter((org) => !org.parentOrgId && !org.parentOrgType);
+  }
+
+  return tableData;
 });
 
 const showCode = async (selectedOrg) => {

src/helpers/query/orgs.js

@@ -37,6 +37,8 @@ export const getOrgsRequestBody = ({
     'name',
     'ncesId',
     'tags',
+    'parentOrgId',
+    'parentOrgType',
   ],
 }) => {
   const requestBody = {