Commit b3638abf authored by Sonia Zorba's avatar Sonia Zorba
Browse files

Added global error handling; Added add/rename/delete group functionalities

parent 923e85e4

gms-ui/package-lock.json

+3 −4
Original line number Diff line number Diff line
@@ -2367,13 +2367,12 @@ 
      "integrity": "sha512-rXqOmH1VilAt2DyPzluTi2blhk17bO7ef+zLLPlWvG494pDxcM234pJ8wTc/6R40UWizAIIMgxjvxZg5kmsbag=="

    },

    "bootstrap-vue": {

      "version": "2.0.0-rc.24",

      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.0.0-rc.24.tgz",

      "integrity": "sha512-8rA/I9tOvpNVIuMKD3rdlrUqgVdPEw4vPI0X8OeFJcG2hHvCHeZDF7FmWqxSeehIrUHGDV17HlTGSuP/v1Sp5g==",

      "version": "2.0.0-rc.27",

      "resolved": "https://registry.npmjs.org/bootstrap-vue/-/bootstrap-vue-2.0.0-rc.27.tgz",

      "integrity": "sha512-gXdpt2IsKbmC3SU0bf/RgldWwgrXK7G47yslOtkk4OA1z6fOzb2orM2vU5L8NCNZQomYax9LapRucv+8PByfdA==",

      "requires": {

        "@nuxt/opencollective": "^0.2.2",

        "bootstrap": "^4.3.1",

        "core-js": ">=2.6.5 <3.0.0",

        "popper.js": "^1.15.0",

        "portal-vue": "^2.1.5",

        "vue-functional-data-merge": "^3.1.0"

gms-ui/package.json

+1 −1
Original line number Diff line number Diff line
@@ -11,7 +11,7 @@ 
    "@fortawesome/fontawesome-svg-core": "^1.2.19",

    "@fortawesome/free-solid-svg-icons": "^5.9.0",

    "@fortawesome/vue-fontawesome": "^0.1.6",

    "bootstrap-vue": "^2.0.0-rc.19",

    "bootstrap-vue": "^2.0.0-rc.27",

    "core-js": "^2.6.5",

    "vue": "^2.6.10",

    "vuex": "^3.1.1"

gms-ui/src/App.vue

+10 −0
Original line number Diff line number Diff line
@@ -11,6 +11,7 @@ 
import TopMenu from './components/TopMenu.vue';

import Main from './components/Main.vue';

import { mapState } from 'vuex';

//import { ToastPlugin } from 'bootstrap-vue';



export default {

  name: 'app',
@@ -23,6 +24,15 @@ export default { 
  }),

  mounted: function() {

    this.$store.commit('fetchGroupsModel');



    var self = this;

    document.addEventListener('apiError', function (event) {

      self.$bvToast.toast(event.message, {

        title: "Error",

        variant: 'danger',

        solid: true

      });

    })

  }

}

</script>

gms-ui/src/api/server/index.js

+86 −3
Original line number Diff line number Diff line 
const BASE_API_URL = "http://localhost:8081/"



function apiRequest(url, data) {

  return new Promise((resolve, reject) => {

    fetch(url, data)

      .then(response => {

        if([200, 201, 204, 400].includes(response.status)) { // valid status codes

          resolve(response.json());

        } else {

          response.json().then(jsonValue => dispatchApiErrorEvent(jsonValue));

        }

      })

      .catch(error => {

        dispatchApiErrorEvent(error);

      });

  });

}



function dispatchApiErrorEvent(error) {

  let message;

  if(error.message) {

    message = error.message;

  } else {

    message = 'Generic error';

  }



  let event = new CustomEvent('apiError');

  event.message = message;

  document.dispatchEvent(event);

}



export default {

  fetchGroupsModel (input) {

    let url = BASE_API_URL + 'groups?groupId=' + input.selectedGroupId + '&tab=' + input.selectedTab + '&paginatorPageSize=' + input.paginatorPageSize + '&paginatorPage=' + input.paginatorPage;

    return fetch(url, {

    let url = BASE_API_URL

            + 'groups?groupId=' + input.selectedGroupId

            + '&tab=' + input.selectedTab

            + '&paginatorPageSize=' + input.paginatorPageSize

            + '&paginatorPage=' + input.paginatorPage

            + '&page=' + input.page;

    return apiRequest(url, {

      method: 'GET',

      cache: 'no-cache',

      credentials: 'include',
@@ -11,6 +45,55 @@ export default { 
        'Content-Type': 'application/json',

        'Accept': 'application/json',

      }

    }).then(response => response.json());

    });

  },

  addGroup (newGroupName, input) {

    let url = BASE_API_URL + 'group';

    return apiRequest(url, {

      method: 'POST',

      cache: 'no-cache',

      credentials: 'include',

      headers: {

        'Content-Type': 'application/json',

        'Accept': 'application/json',

      },

      body: JSON.stringify({

        newGroupName: newGroupName,

        parentGroupId: input.selectedGroupId,

        paginatorPageSize: input.paginatorPageSize,

        paginatorPage: input.paginatorPage

      })

    });

  },

  renameGroup (groupId, newGroupName, input) {

    let url = BASE_API_URL + 'group/' + groupId;

    return apiRequest(url, {

      method: 'PUT',

      cache: 'no-cache',

      credentials: 'include',

      headers: {

        'Content-Type': 'application/json',

        'Accept': 'application/json',

      },

      body: JSON.stringify({

        newGroupName: newGroupName,

        paginatorPageSize: input.paginatorPageSize,

        paginatorPage: input.paginatorPage

      })

    });

  },

  deleteGroup (groupId, input) {

    let url = BASE_API_URL + 'group/' + groupId

            + '?paginatorPageSize=' + input.paginatorPageSize

            + '&paginatorPage=' + input.paginatorPage;

    return apiRequest(url, {

      method: 'DELETE',

      cache: 'no-cache',

      credentials: 'include',

      headers: {

        'Content-Type': 'application/json',

        'Accept': 'application/json',

      }

    });

  }

};

gms-ui/src/components/GroupsPanel.vue

+17 −8
Original line number Diff line number Diff line
@@ -8,12 +8,13 @@ 
    <div id="groups-list">

      <b-list-group v-for="group in model.groupsPanel.items">

        <b-list-group-item href="#" v-on:click="openGroup(group)">

          <span class="float-left">{{group.name}}</span>

          <span class="float-left">{{group.groupName}}</span>

          <span v-if="group.permissions.includes('ADMIN')" class="float-right">

            <a href="#" v-on:click="renameGroup(group)">

            <a href="#" v-on:click.stop="openRenameGroupModal(group)" title="Rename">

              <font-awesome-icon icon="edit"></font-awesome-icon>

            </a>

            <a href="#" v-on:click="deleteGroup(group)">

            &nbsp;

            <a href="#" v-on:click.stop="openDeleteGroupModal(group)" class="text-danger" title="Delete">

              <font-awesome-icon icon="trash"></font-awesome-icon>

            </a>

          </span>
@@ -46,14 +47,22 @@ 
    </div>

    <div class="text-center">

    </div>

    <RenameGroupModal ref="renameGroupModal" />

    <ConfirmDeleteGroupModal ref="confirmDeleteGroupModal" />

  </b-tab>

</template>



<script>

import RenameGroupModal from './modals/RenameGroupModal.vue'

import ConfirmDeleteGroupModal from './modals/ConfirmDeleteGroupModal.vue'

import { mapState, mapActions } from 'vuex'



export default {

  name: 'GroupsPanel',

  components: {

    RenameGroupModal,

    ConfirmDeleteGroupModal

  },

  computed: mapState({

    model: state => state.model,

    input: state => state.input
@@ -70,14 +79,14 @@ export default { 
  },

  methods: {

    openGroup: function(group) {

      this.$store.state.input.selectedGroupId = group.id;

      this.$store.state.input.selectedGroupId = group.groupId;

      this.$store.commit('fetchGroupsModel');

    },

    renameGroup: function(group) {

      console.log('rename ' + group.id);

    openRenameGroupModal: function(group) {

      this.$refs.renameGroupModal.openRenameGroupModal(group);

    },

    deleteGroup: function(group) {

      console.log('del ' + group.id);

    openDeleteGroupModal: function(group) {

      this.$refs.confirmDeleteGroupModal.openDeleteGroupModal(group);

    },

    setPage: function(page) {

      console.log('setPage ', page);