Initial commit. Added GMS UI.

88449b98 · Sonia Zorba · zonia3000 · 88449b98 · 88449b98 · 88449b98
Commit 88449b98 authored 5 years ago by Sonia Zorba Committed by zonia3000 5 years ago
--- a/.gitignore
+++ b/.gitignore
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?
--- a/gms-ui/.env.development
+++ b/gms-ui/.env.development
+VUE_APP_API_CLIENT = 'mock'
--- a/gms-ui/.env.production
+++ b/gms-ui/.env.production
+VUE_APP_API_CLIENT = 'server'
--- a/gms-ui/README.md
+++ b/gms-ui/README.md
+# gms-ui
+
+## Project setup
+```
+npm install
+```
+
+### Compiles and hot-reloads for development
+```
+npm run serve
+```
+
+### Compiles and minifies for production
+```
+npm run build
+```
+
+### Run your tests
+```
+npm run test
+```
+
+### Lints and fixes files
+```
+npm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).
--- a/gms-ui/babel.config.js
+++ b/gms-ui/babel.config.js
+module.exports = {
+  "presets": [
+    [
+      "@vue/app",
+      {
+        "useBuiltIns": "entry"
+      }
+    ]
+  ]
+}
\ No newline at end of file
--- a/gms-ui/package-lock.json
+++ b/gms-ui/package-lock.json
--- a/gms-ui/package.json
+++ b/gms-ui/package.json
+{
+  "name": "gms-ui",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint"
+  },
+  "dependencies": {
+    "@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",
+    "core-js": "^2.6.5",
+    "vue": "^2.6.10"
+  },
+  "devDependencies": {
+    "@babel/polyfill": "^7.4.4",
+    "@vue/cli-plugin-babel": "^3.8.0",
+    "@vue/cli-plugin-eslint": "^3.8.0",
+    "@vue/cli-service": "^3.8.0",
+    "babel-eslint": "^10.0.1",
+    "bootstrap": "^4.3.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.0.0",
+    "mutationobserver-shim": "^0.3.3",
+    "node-sass": "^4.12.0",
+    "popper.js": "^1.15.0",
+    "portal-vue": "^2.1.4",
+    "sass-loader": "^7.1.0",
+    "vue-cli-plugin-bootstrap-vue": "^0.4.0",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions"
+  ]
+}
--- a/gms-ui/public/favicon.ico
+++ b/gms-ui/public/favicon.ico
--- a/gms-ui/public/index.html
+++ b/gms-ui/public/index.html
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width,initial-scale=1.0">
+    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
+    <title>GMS</title>
+  </head>
+  <body>
+    <noscript>
+      <strong>We're sorry but GMS doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
+    </noscript>
+    <div id="app"></div>
+    <!-- built files will be auto injected -->
+  </body>
+</html>
--- a/gms-ui/src/App.vue
+++ b/gms-ui/src/App.vue
+<template>
+  <div id="app" v-if="model">
+    <TopMenu v-bind:user="model.user" />
+    <div class="container">
+      <Main v-bind:model="model" />
+    </div>
+  </div>
+</template>
+
+<script>
+import TopMenu from './components/TopMenu.vue'
+import Main from './components/Main.vue'
+import client from 'api-client'
+
+export default {
+  name: 'app',
+  components: {
+    TopMenu,
+    Main
+  },
+  data: function() {
+    return {
+      model: null
+    }
+  },
+  mounted: function() {
+    client
+      .fetchMainModel()
+      .then(model => this.$data.model = model);
+  }
+}
+</script>
+
+<style>
+#app {
+  font-family: 'Avenir', Helvetica, Arial, sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  color: #2c3e50;
+}
+</style>
--- a/gms-ui/src/api/mock/data/groups.json
+++ b/gms-ui/src/api/mock/data/groups.json
+{
+  "breadcrumb": ["LBT","INAF"],
+  "groups": [
+    {
+      "id": "1",
+      "name": "G1",
+      "hasChildren": true,
+      "permission": "ADMIN"
+    }
+  ],
+  "page": 2,
+  "paginator": [1, 2, 3],
+  "pageSize": 3
+}
--- a/gms-ui/src/api/mock/data/main-model.json
+++ b/gms-ui/src/api/mock/data/main-model.json
+{
+  "breadcrumbs": [
+    {
+      "id": "1",
+      "name": "LBT"
+    },
+    {
+      "id": "2",
+      "name": "INAF"
+    }
+  ],
+  "groupsPanel": {
+    "groups": [
+      {
+        "id": "1",
+        "name": "G1",
+        "permission": "ADMIN"
+      },
+      {
+        "id": "2",
+        "name": "G2",
+        "permission": "TRAVERSE"
+      },
+      {
+        "id": "3",
+        "name": "G3",
+        "permission": "PI"
+      },
+      {
+        "id": "4",
+        "name": "G4",
+        "permission": "COI"
+      }
+    ],
+    "paginator": {
+      "page": 2,
+      "links": [1, 2, 3],
+      "totalItems": 200,
+      "pageSize": 20
+    }
+  },
+  "membersPanel": {
+    "members": [
+      {
+        "user": {
+          "id": "1",
+          "label": "NC1 (mail)",
+          "identities": ["EDUGAIN"]
+        },
+        "permission": "ADMIN"
+      }
+    ],
+    "paginator": {
+      "page": 1,
+      "links": [1],
+      "totalItems": 4,
+      "pageSize": 3
+    }
+  },
+  "permission": "ADMIN",
+  "user": "pippo",
+  "page": "main"
+}
--- a/gms-ui/src/api/mock/data/preferences-model.json
+++ b/gms-ui/src/api/mock/data/preferences-model.json
--- a/gms-ui/src/api/mock/data/search-result-model.json
+++ b/gms-ui/src/api/mock/data/search-result-model.json
--- a/gms-ui/src/api/mock/data/user-model.json
+++ b/gms-ui/src/api/mock/data/user-model.json
--- a/gms-ui/src/api/mock/index.js
+++ b/gms-ui/src/api/mock/index.js
+import mainModel from './data/main-model'
+
+const fetch = (mockData, time = 0) => {
+  return new Promise((resolve) => {
+    setTimeout(() => {
+      resolve(mockData)
+    }, time)
+  })
+}
+
+export default {
+  fetchMainModel () {
+    return fetch(mainModel, 500) // wait 500ms before returning data
+  }
+}
--- a/gms-ui/src/api/server/index.js
+++ b/gms-ui/src/api/server/index.js
+//import axios from 'axios'
+
+export default {
+  fetchPosts () {
+    return null;//axios
+      //.get('https://jsonplaceholder.typicode.com/posts')
+      //.then(response => response.data)
+  }
+}
--- a/gms-ui/src/assets/logo.png
+++ b/gms-ui/src/assets/logo.png
--- a/gms-ui/src/components/GroupsBreadcrumb.vue
+++ b/gms-ui/src/components/GroupsBreadcrumb.vue
+<template>
+  <nav aria-label="breadcrumb">
+    <ol class="breadcrumb">
+      <li class="breadcrumb-item" v-for="group in groups" v-bind:class="{ active: group.active }">
+        <a href="#" v-on:click="changeBreadcrumb(group.id)" v-if="!group.active">{{group.name}}</a>
+        <span v-if="group.active">{{group.name}}</span>
+      </li>
+    </ol>
+  </nav>
+</template>
+
+<script>
+  function buildItems(values) {
+    let groups = [];
+
+    groups.push({
+      name: 'Root',
+      id: null,
+      active: false
+    });
+
+    for(let i = 0; i < values.length; i++) {
+      let group = values[i];
+      group.active = false;
+      groups.push(group);
+    }
+
+    // Activate the last item
+    groups[groups.length - 1].active = true;
+
+    return groups;
+  }
+
+  export default {
+    name: 'GroupsBreadcrumb',
+    props: {
+      values: Array
+    },
+    data() {
+      return {
+        groups: buildItems(this.values)
+      };
+    },
+    methods: {
+      changeBreadcrumb: function(groupId) {
+        console.log('changeBreadcrumb', groupId);
+      }
+    }
+  }
+</script>
+
+<style scoped>
+nav {
+  margin-top: 10px;
+}
+</style>
--- a/gms-ui/src/components/GroupsPanel.vue
+++ b/gms-ui/src/components/GroupsPanel.vue
+<template>
+  <b-tab title="Groups" active>
+    <b-row>
+      <b-col xs="12">
+        <b-form-input placeholder="Search group" v-model="groupFilter" v-on:input="filterGroups"></b-form-input>
+      </b-col>
+    </b-row>
+    <div id="groups-list">
+      <b-list-group v-for="group in model.groupsPanel.groups">
+        <b-list-group-item href="#">
+          <span class="float-left">{{group.name}}</span>
+          <span v-if="group.permission === 'ADMIN'" class="float-right">
+            <a href="#" v-on:click="renameGroup(group)">
+              <font-awesome-icon icon="edit"></font-awesome-icon>
+            </a>
+            <a href="#" v-on:click="deleteGroup(group)">
+              <font-awesome-icon icon="trash"></font-awesome-icon>
+            </a>
+          </span>
+        </b-list-group-item>
+      </b-list-group>
+    </div>
+    <div class="row">
+      <div class="col-md-9">
+        <b-pagination
+          v-model="model.groupsPanel.paginator.page"
+          :total-rows="model.groupsPanel.paginator.totalItems"
+          :per-page="model.groupsPanel.paginator.pageSize"
+          aria-controls="groups-list"
+          align="center"
+          v-on:change="setPage"
+        ></b-pagination>
+      </div>
+      <div class="col-md-3">
+        <b-container fluid>
+          <b-row>
+            <b-col sm="5">
+              <label for="page-size">Page size:</label>
+            </b-col>
+            <b-col sm="6">
+              <b-form-select id="page-size" v-model="selectedPageSize" :options="pageSizeOptions" v-on:change="changePageSize"></b-form-select>
+            </b-col>
+          </b-row>
+        </b-container>
+      </div>
+    </div>
+    <div class="text-center">
+    </div>
+  </b-tab>
+</template>
+
+<script>
+export default {
+  name: 'GroupsPanel',
+  props: {
+    model: Object
+  },
+  data: function() {
+    return {
+      selectedPageSize: this.model.groupsPanel.paginator.pageSize,
+      pageSizeOptions: [
+        { value: 20, text: "20" },
+        { value: 50, text: "50" },
+        { value: 100, text: "100" }
+      ],
+      groupFilter: ''
+    };
+  },
+  methods: {
+    renameGroup: function(group) {
+      console.log('rename ' + group.id);
+    },
+    deleteGroup: function(group) {
+      console.log('del ' + group.id);
+    },
+    setPage: function(page) {
+      console.log('setPage ', page);
+    },
+    changePageSize: function(pageSize) {
+      console.log('changePageSize', pageSize);
+    },
+    filterGroups: function() {
+      console.log('filterGroups', this.groupFilter);
+    }
+  }
+}
+</script>
+
+<style scoped>
+#groups-list {
+  margin-top: 10px;
+  margin-bottom: 10px;
+}
+</style>