[ui] add TeamModal component

This commit adds a modal component to the Organizations
table. On clicking the View teams button in the table,
this modal opens up displaying all the top level teams
of the organization.

Signed-off-by: Rashmi-K-A <k.a.rashmi04@gmail.com>

ui/src/apollo/mutations.js

@@ -175,6 +175,17 @@ const ADD_ORGANIZATION = gql`
     }
   }
 `;
+
+const ADD_TEAM = gql`
+  mutation addTeam($teamName: String!, $organization: String, $parentName: String) {
+    addTeam(teamName: $teamName, organization: $organization, parentName: $parentName) {
+      team {
+        name
+      }
+    }
+  }
+`;
+
 const ADD_IDENTITY = gql`
   mutation addIdentity(
     $email: String
@@ -306,6 +317,16 @@ const DELETE_ORGANIZATION = gql`
   }
 `;
 
+const DELETE_TEAM = gql`
+  mutation deleteTeam($teamName: String!, $organization: String!) {
+    deleteTeam(teamName: $teamName, organization: $organization) {
+      team {
+        name
+      }
+    }
+  }
+`;
+
 const UPDATE_ENROLLMENT = gql`
   mutation updateEnrollment(
     $fromDate: DateTime!
@@ -469,8 +490,20 @@ const addOrganization = (apollo, name) => {
   let response = apollo.mutate({
     mutation: ADD_ORGANIZATION,
     variables: {
-      name: name
-    }
+      name: name,
+    },
+  });
+  return response;
+};
+
+const addTeam = (apollo, teamName, organization, parentName) => {
+  let response = apollo.mutate({
+    mutation: ADD_TEAM,
+    variables: {
+      teamName: teamName,
+      organization: organization,
+      parentName: parentName,
+    },
   });
   return response;
 };
@@ -510,7 +543,18 @@ const withdraw = (apollo, uuid, organization, fromDate, toDate) => {
 const deleteOrganization = (apollo, name) => {
   let response = apollo.mutate({
     mutation: DELETE_ORGANIZATION,
-    variables: { name: name }
+    variables: { name: name },
+  });
+  return response;
+};
+
+const deleteTeam = (apollo, teamName, organization) => {
+  let response = apollo.mutate({
+    mutation: DELETE_TEAM,
+    variables: {
+      teamName: teamName,
+      organization: organization,
+    },
   });
   return response;
 };
@@ -543,6 +587,8 @@ export {
   deleteOrganization,
   addDomain,
   deleteDomain,
+  addTeam,
+  deleteTeam,
   addIdentity,
   updateProfile,
   withdraw,

ui/src/apollo/queries.js

@@ -183,6 +183,17 @@ const GET_COUNTRIES = gql`
   }
 `;
 
+const GET_TEAMS = gql`
+  query GetTeams($filters: TeamFilterType) {
+    teams(pageSize: 500, filters: $filters) {
+      entities {
+        name
+        numchild
+      }
+    }
+  }
+`;
+
 const GET_JOBS = gql`
   query getJobs($page: Int!, $pageSize: Int!) {
     jobs(page: $page, pageSize: $pageSize) {
@@ -292,8 +303,19 @@ const getJobs = (apollo, page, pageSize) => {
     query: GET_JOBS,
     variables: {
       page: page,
-      pageSize: pageSize
-    }
+      pageSize: pageSize,
+    },
+  });
+  return response;
+};
+
+const getTeams = (apollo, filters) => {
+  let response = apollo.query({
+    query: GET_TEAMS,
+    variables: {
+      filters: filters,
+    },
+    fetchPolicy: 'no-cache',
   });
   return response;
 };
@@ -305,5 +327,6 @@ export {
   getProfileByUuid,
   getPaginatedIndividuals,
   getPaginatedOrganizations,
-  getJobs
+  getTeams,
+  getJobs,
 };

ui/src/components/ExpandedOrganization.stories.js

@@ -1,24 +1,157 @@
-import ExpandedOrganization from "./ExpandedOrganization.vue";
+import ExpandedOrganization from './ExpandedOrganization.vue';
 
 export default {
-  title: "ExpandedOrganization",
-  excludeStories: /.*Data$/
+  title: 'ExpandedOrganization',
+  excludeStories: /.*Data$/,
 };
 
-const ExpandedOrganizationTemplate = `<expanded-organization :domains="domains" />`;
+const ExpandedOrganizationTemplate = `<expanded-organization :domains="domains" :organization="organization" :add-team="addTeam" :delete-team="deleteTeam" :fetch-teams="fetchTeams"/>`;
 
 export const Default = () => ({
   components: { ExpandedOrganization },
   template: ExpandedOrganizationTemplate,
   data: () => ({
-    domains: [{ domain: "hogwarts.edu" }, { domain: "hogwarts.com" }]
-  })
+    domains: [{ domain: 'hogwarts.edu' }, { domain: 'hogwarts.com' }],
+    organization: 'Hogwarts',
+    query: [
+      {
+        data: {
+          teams: {
+            entities: [
+              {
+                name: 'BU1',
+                numchild: 2,
+              },
+              {
+                name: 'BU2',
+                numchild: 0,
+              },
+              {
+                name: 'BU3',
+                numchild: 1,
+              },
+              {
+                name: 'Team1',
+                parent: 'BU1',
+                numchild: 0,
+              },
+              {
+                name: 'Team2',
+                parent: 'BU1',
+                numchild: 0,
+              },
+              {
+                name: 'Team4',
+                parent: 'BU3',
+                numchild: 0,
+              },
+            ],
+          },
+        },
+      },
+    ],
+  }),
+  methods: {
+    fetchTeams(filters) {
+      let data = [];
+      if (Object.keys(filters).includes('parent')) {
+        this.query[0].data.teams.entities.forEach((team) => {
+          if (team['parent'] === filters['parent']) {
+            data.push(team);
+          }
+        });
+      } else {
+        this.query[0].data.teams.entities.forEach((team) => {
+          if (team['parent'] === undefined) {
+            data.push(team);
+          }
+        });
+      }
+      const resp = {
+        data: {
+          teams: {
+            entities: data
+          },
+        },
+      };
+      return resp;
+    },
+    addTeam(team, organization, parent) {
+      const insertData = {
+        name: team,
+      };
+      if (parent) {
+        insertData['parent'] = parent;
+      }
+      this.query[0].data.teams.entities.push(insertData);
+      return true;
+    },
+    deleteTeam(team, organization) {
+      this.query[0].data.teams.entities = this.query[0].data.teams.entities.filter(
+        (elem) => elem.name != team,
+      );
+      return true;
+    },
+  },
 });
 
 export const Empty = () => ({
   components: { ExpandedOrganization },
   template: ExpandedOrganizationTemplate,
   data: () => ({
-    domains: []
-  })
+    domains: [],
+    organization: 'Hogwarts',
+    query: [
+      {
+        data: {
+          teams: {
+            entities: [],
+          },
+        },
+      },
+    ],
+  }),
+  methods: {
+    fetchTeams(filters) {
+      let data = [];
+      if (Object.keys(filters).includes('parent')) {
+        this.query[0].data.teams.entities.forEach((team) => {
+          if (team['parent'] === filters['parent']) {
+            data.push(team);
+          }
+        });
+      } else {
+        this.query[0].data.teams.entities.forEach((team) => {
+          if (team['parent'] === undefined) {
+            data.push(team);
+          }
+        });
+      }
+      const resp = {
+        data: {
+          teams: {
+            entities: data,
+          },
+        },
+      };
+
+      return resp;
+    },
+    addTeam(team, organization, parent) {
+      const insertData = {
+        name: team,
+      };
+      if (parent) {
+        insertData['parent'] = parent;
+      }
+      this.query[0].data.teams.entities.push(insertData);
+      return true;
+    },
+    deleteTeam(team, organization) {
+      this.query[0].data.teams.entities = this.query[0].data.teams.entities.filter(
+        (elem) => elem.name != team,
+      );
+      return true;
+    },
+  },
 });

ui/src/components/ExpandedOrganization.vue

@@ -8,17 +8,80 @@
         </v-list-item-content>
       </v-list-item>
     </v-list>
+    <v-list dense>
+      <v-subheader>
+        Teams ({{ teams.length }}<span v-if="teams.length > 0">+</span>)
+        <v-btn depressed small height="34" @click.stop="openModal" text>
+          View all
+        </v-btn>
+      </v-subheader>
+      <v-list-item v-for="(item, index) in teams" :key="index">
+        <v-list-item-content>
+          <v-list-item-title>{{ item.name }}</v-list-item-title>
+        </v-list-item-content>
+      </v-list-item>
+    </v-list>
+    <team-modal
+      :is-open.sync="modal.open"
+      :organization="organization"
+      :add-team="addTeam"
+      :delete-team="deleteTeam"
+      :fetch-teams="fetchTeams"
+      @updateTeams="getTeams"
+    />
   </td>
 </template>
 
 <script>
+import TeamModal from './TeamModal.vue';
+
 export default {
-  name: "ExpandedOrganization",
+  name: 'ExpandedOrganization',
+  components: {
+    TeamModal,
+  },
   props: {
     domains: {
       type: Array,
-      required: true
-    }
-  }
+      required: true,
+    },
+    organization: {
+      type: String,
+      required: true,
+    },
+    addTeam: {
+      type: Function,
+      required: true,
+    },
+    deleteTeam: {
+      type: Function,
+      required: true,
+    },
+    fetchTeams: {
+      type: Function,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      teams: [],
+      modal: {
+        open: false,
+      },
+    };
+  },
+  methods: {
+    openModal() {
+      Object.assign(this.modal, { open: true });
+    },
+    async getTeams() {
+      const filters = { organization: this.organization };
+      const response = await this.fetchTeams(filters);
+      this.teams = response.data.teams.entities;
+    },
+  },
+  async created() {
+    await this.getTeams();
+  },
 };
 </script>