From bdfe7c3c9443079232533fc5499d208a01d71057 Mon Sep 17 00:00:00 2001
From: Vincent59 <vincent.pierin@outlook.fr>
Date: Fri, 1 Jul 2022 16:16:09 +0200
Subject: [PATCH] Added front view

---
 code/web-ui/src/components/top-menu.vue       |  36 +-
 code/web-ui/src/routes.js                     |  29 ++
 code/web-ui/src/styles/common.css             |   8 +
 .../src/views/admin-management-members.vue    | 390 ++++++++++++++++++
 code/web-ui/src/views/admin-management.vue    | 280 +++++++++++++
 .../src/views/admin-project-details.vue       | 251 +++++++++++
 6 files changed, 989 insertions(+), 5 deletions(-)
 create mode 100644 code/web-ui/src/views/admin-management-members.vue
 create mode 100644 code/web-ui/src/views/admin-management.vue
 create mode 100644 code/web-ui/src/views/admin-project-details.vue

diff --git a/code/web-ui/src/components/top-menu.vue b/code/web-ui/src/components/top-menu.vue
index 628a82e46..d9b3ed4dc 100644
--- a/code/web-ui/src/components/top-menu.vue
+++ b/code/web-ui/src/components/top-menu.vue
@@ -22,7 +22,7 @@
       So we use Menu classes with router-links.
     -->
     <div style="background-color: #0082C3; display: flex;">
-      <div style="flex: 0 0 auto;">
+      <div style="flex: 0 0 auto;" v-if="!adminRight">
         <router-link :to="{ name: 'redirecter' }" id="home-logo">
           <Tooltip placement="bottom-start" :transfer="true">
             <div slot="content">
@@ -42,8 +42,14 @@
 
       <div style="flex: 1 0 auto;">
         <!-- After deleting the demo project, if no other project exists, `projectCode` still exists but we should hide the menu anyway  -->
-        <ul v-if="projectCode && projects && projects.length" class="ivu-menu ivu-menu-primary ivu-menu-horizontal">
-          <router-link v-for="link in links" :key="link.name" :to="to(link)" class="ivu-menu-item" active-class="ivu-menu-item-active ivu-menu-item-selected">
+        <ul v-if="projectCode && projects && projects.length && !adminRight" class="ivu-menu ivu-menu-primary ivu-menu-horizontal">
+          <router-link v-for="link in links" @click.native="changeAdminState(link.routeName)" :key="link.name" :to="to(link)" class="ivu-menu-item" active-class="ivu-menu-item-active ivu-menu-item-selected">
+            {{link.name}}
+          </router-link>
+        </ul>
+
+        <ul v-else class="ivu-menu ivu-menu-primary ivu-menu-horizontal">
+          <router-link v-for="link in adminMenu" @click.native="changeAdminState(link.routeName)" :key="link.name" :to="to(link)" class="ivu-menu-item" active-class="ivu-menu-item-active ivu-menu-item-selected">
             {{link.name}}
           </router-link>
         </ul>
@@ -198,7 +204,8 @@
         webUIVersion: process.env.VERSION,
         latestChangelogVersion: this.getCookie(LATEST_CHANGELOG_VERSION_COOKIE_NAME),
         projectCode: this.$route.params.projectCode || this.defaultProjectCode,
-        isLoggedIn: AuthenticationService.isAlreadyLoggedIn()
+        isLoggedIn: AuthenticationService.isAlreadyLoggedIn(),
+        adminRight: false
       }
     },
 
@@ -249,7 +256,16 @@
           { params: { projectCode: this.projectCode }, name: 'PROBLEMS', routeName: 'problems' },
           { params: { projectCode: this.projectCode }, name: 'FUNCTIONALITIES', routeName: 'functionalities' },
           { params: { projectCode: this.projectCode }, name: 'SCENARIOS', routeName: 'scenario-writing-helps' },
-          { params: { projectCode: this.projectCode }, name: 'SETTINGS', routeName: 'management' }
+          { params: { projectCode: this.projectCode }, name: 'SETTINGS', routeName: 'admin-management' }
+        ]
+      },
+
+      adminMenu () {
+        return [
+          { params: { projectCode: this.projectCode }, name: 'PROJECTS', routeName: 'admin-management' },
+          { params: { projectCode: this.projectCode }, name: 'MEMBERS', routeName: 'members' },
+          { params: { projectCode: this.projectCode }, name: 'CONFIGURATION', routeName: 'management' },
+          { params: { projectCode: this.projectCode }, name: 'DASHBOARD', routeName: 'dashboard' }
         ]
       },
 
@@ -360,6 +376,12 @@
         }
       },
 
+      changeAdminState  (routeName) {
+        if (this.adminRight === true && routeName === 'dashboard') {
+          this.adminRight = false
+        } else { this.adminRight = true }
+      },
+
       logout () {
         AuthenticationService.logout()
       }
@@ -402,6 +424,10 @@
     display: inline-block;
   }
 
+  .ivu-menu-horizontal .ivu-menu-item:last-child {
+    float: right;
+  }
+
   .selected-project-management div {
     background-color: #135b95;
     border-radius: 50%;
diff --git a/code/web-ui/src/routes.js b/code/web-ui/src/routes.js
index 96b1d9121..566867a35 100644
--- a/code/web-ui/src/routes.js
+++ b/code/web-ui/src/routes.js
@@ -173,6 +173,35 @@ const routes = [
     name: 'management',
     redirect: '/projects/:projectCode/management/communications' // First tab
   },
+  {
+    path: '/projects/:projectCode/admin-management',
+    name: 'admin-management',
+    meta: {
+      title: 'Admin Management'
+    },
+    component: (resolve) => require(['./views/admin-management.vue'], resolve)
+  },
+  {
+    path: '/projects/:projectCode/members',
+    name: 'members',
+    meta: {
+      title: 'Members'
+    },
+    component: (resolve) => require(['./views/admin-management-members.vue'], resolve)
+  },
+  {
+    path: '/projects/:projectCode/dashboard',
+    name: 'dashboard',
+    redirect: '/projects/:projectCode/executions'
+  },
+  {
+    path: '/projects/:projectCode/admin-project-details',
+    name: 'admin-project-details',
+    meta: {
+      title: 'Admin project details'
+    },
+    component: (resolve) => require(['./views/admin-project-details.vue'], resolve)
+  },
   {
     path: '/projects/:projectCode/management/communications',
     name: 'management-communications',
diff --git a/code/web-ui/src/styles/common.css b/code/web-ui/src/styles/common.css
index e47dc6f24..0e5d98345 100644
--- a/code/web-ui/src/styles/common.css
+++ b/code/web-ui/src/styles/common.css
@@ -276,3 +276,11 @@ pre code {
   line-height: 1.2;
   margin-top: 4px;
 }
+
+.darkGrey {
+  background-color: #D9DDE1;
+}
+
+.lightGrey {
+  background-color: #F7F8F9;
+}
diff --git a/code/web-ui/src/views/admin-management-members.vue b/code/web-ui/src/views/admin-management-members.vue
new file mode 100644
index 000000000..fc8d8895b
--- /dev/null
+++ b/code/web-ui/src/views/admin-management-members.vue
@@ -0,0 +1,390 @@
+<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright (C) 2019 by the ARA Contributors
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ 	 http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
+<template>
+  <div>
+    <h1>Members management</h1>
+
+    <div v-if="!showGroup" class="tableContent">
+      <table>
+        <thead>
+          <tr>
+            <th>Name</th>
+            <th>Users</th>
+            <th></th>
+          </tr>
+        </thead>
+
+        <tbody v-if="members">
+          <tr v-for="member in sortedMembers" :key="member">
+            <td>{{ member.name }}</td>
+            <td>{{ member.users ? member.users : '' }}</td>
+            <td>
+              <Icon type="md-close-circle" size="24" @click="openProjectDetails(project)"/>
+              <Icon type="md-create" size="24" @click="showGroupInfo(member.name)"/>
+            </td>
+          </tr>
+        </tbody>
+        <button class="addMember" @click="memberToAdd = true">
+          <Icon type="md-add" size="24"/>
+        </button>
+      </table>
+    </div>
+
+    <div v-if="showGroup" class="tableContent groupManagement">
+      <h2>{{ groupName.name }}</h2>
+      <table>
+        <div class="tabTitle">
+          <p>Identity</p>
+        </div>
+        <tbody>
+          <tr>
+            <td>
+              <span>Name</span>
+              <input type="text" :value="groupName.name">
+            </td>
+          </tr>
+        </tbody>
+      </table>
+
+      <table>
+        <div class="tabTitle">
+          <p>Users</p>
+        </div>
+        <tbody>
+          <tr v-for="member in groupMembers" :key="member">
+            <td>{{ member.name }}</td>
+            <td>{{ member.role }}</td>
+            <td>
+              <Icon type="md-close-circle" size="24"/>
+              <Icon type="md-create" size="24"/>
+            </td>
+          </tr>
+        </tbody>
+        <button class="addMember" @click="memberToGroup = true">
+          <Icon type="md-add" size="24"/>
+        </button>
+      </table>
+    </div>
+
+    <Modal v-model="memberToAdd" title="Add Group" okText="Add" @on-ok="createMember" @close="memberToAdd = false" :width="900"
+      :loading="loadingSaving" ref="editPopup">
+      <Form :label-width="128">
+        <Form-item v-for="field in fields"
+                   :key="field.code"
+                   :label="(field.type === 'boolean' ? '' : field.name + ':')"
+                   :required="field.required && (editingNew || (!field.primaryKey && !field.createOnly))">
+          <form-field :field="field" v-model="editingData[field.code]" :editingNew="editingNew" :ref="field.code" v-on:enter="createMember"/>
+        </Form-item>
+      </Form>
+    </Modal>
+
+    <Modal v-model="memberToGroup" title="Add Member" okText="Add" @on-ok="addMemberToGroup" @close="memberToGroup = false" :width="900"
+      :loading="loadingSaving" ref="editPopup">
+      <Form :label-width="128">
+        <Form-item v-for="field in groupFields"
+                   :key="field.code"
+                   :label="(field.type === 'boolean' ? '' : field.name + ':')"
+                   :required="field.required && (editingNew || (!field.primaryKey && !field.createOnly))">
+          <form-field :field="field" v-model="editingData[field.code]" :editingNew="editingNew" :ref="field.code" v-on:enter="addMemberToGroup"/>
+        </Form-item>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import api from '../libs/api'
+  import formField from '../components/form-field'
+
+  export default {
+    name: 'admin-management-members',
+
+    components: {
+      formField
+    },
+
+    data () {
+      return {
+        members: [],
+        groups: [],
+        groupDetails: [],
+        memberToAdd: false,
+        memberToGroup: false,
+        fields: [
+          {
+            code: 'name',
+            name: 'Group name',
+            columnTitle: 'Name',
+            type: 'string',
+            required: true,
+            newValue: '',
+            width: undefined,
+            businessKey: true
+          }
+        ],
+        groupFields: [
+          {
+            code: 'name',
+            name: 'Group name',
+            columnTitle: 'Name',
+            type: 'string',
+            required: true,
+            newValue: '',
+            width: undefined,
+            businessKey: true,
+            help: 'Type a name of a user that already exist'
+          },
+          {
+            code: 'role',
+            name: 'Role',
+            columnTitle: 'Role',
+            type: 'select',
+            options: [
+              { value: 'Member', label: 'Member' },
+              { value: 'Maintainer', label: 'Maintainer' }
+            ],
+            required: true,
+            newValue: '',
+            businessKey: true,
+            width: undefined
+          }
+        ],
+        editingData: {},
+        editingNew: false,
+        editing: false,
+        showGroup: false,
+        groupName: '',
+        groupMembers: []
+      }
+    },
+
+    methods: {
+      newRowData () {
+        let row = {}
+        for (let field of this.fields) {
+          row[field.code] = field.newValue
+        }
+        return row
+      },
+
+      addMember () {
+        this.memberToAdd = true
+        this.doEdit(this.newRowData(), true)
+      },
+
+      doEdit (row, editingNew) {
+        this.editingData = { ...row }
+        this.editingNew = editingNew
+        this.editing = true
+        this.$nextTick(() => this.$refs[this.firstVisibleFieldCode(editingNew)][0].focus())
+      },
+
+      firstVisibleFieldCode (editingNew) {
+        for (let field of this.fields) {
+          if (field.type !== 'hidden' && field.type !== 'select' && !field.readOnly && !field.readOnly && (editingNew)) {
+            return field.code
+          }
+        }
+        throw new Error('The table ' + this.name + ' has no field, or they are all either of type hidden, selects, read-only or non-modifiable primary key')
+      },
+
+      showGroupInfo (name) {
+        Vue.http
+          .get('/api/groups/' + name + '/members')
+          .then((response) => {
+            console.log(response)
+            this.groupMembers = response.body
+          })
+        this.showGroup = !this.showGroup
+        this.groupName = name
+        console.log(this.groupName.name)
+        this.$http.get('/api/groups/MaintainerGroup', api.REQUEST_OPTIONS).then((response) => {
+          this.groupDetails = response.body
+        })
+      },
+
+      createMember () {
+        Vue.http
+          .post('/api/groups', this.editingData, api.REQUEST_OPTIONS)
+      },
+
+      addMemberToGroup () {
+        Vue.http
+          .post('/api/groups/' + this.groupName + '/members', this.editingData, api.REQUEST_OPTIONS)
+      }
+    },
+
+    created () {
+      Vue.http
+        .get('api/groups', api.REQUEST_OPTIONS)
+        .then((response) => {
+          if (response.body.length > 0) {
+            for (let i = 0; i < response.body.length; i++) {
+              this.members.push({
+                'name': response.body[i].name,
+                'users': ''
+              })
+              Vue.http
+                .get('/api/groups/' + response.body[i].name + '/members')
+                .then((response) => {
+                  for (let j = 0; j < response.body.length; j++) {
+                    this.members[i].users = response.body[j].name
+                  }
+                })
+            }
+          }
+
+          return this.members
+        })
+      Vue.http
+        .get('api/users', api.REQUEST_OPTIONS)
+        .then((response) => {
+          this.members.push(response.body[0])
+
+          return { ...this.members }
+        })
+    },
+
+    computed: {
+      sortedMembers () {
+        return this.members.map(item => item).sort((a, b) => a.id - b.id)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  h1 {
+    text-align: center;
+    font-weight: bold;
+    margin-top: 3rem;
+  }
+
+  h2 {
+    text-align: left;
+    top: 0;
+    margin: 1rem auto;
+    width: 90%;
+  } 
+
+  table {
+    width: 90%;
+    margin: 0 auto;
+    border-collapse: collapse;
+    position: relative;
+  }
+
+  thead tr {
+    background-color: #3880BE;
+  }
+
+  thead tr th {
+    padding: 10px;
+    text-align: center;
+    color: #ffffff;
+  }
+
+  thead tr th:first-child {
+    border-radius: 10px 0 0 0;
+  }
+
+  thead tr th:last-child {
+    border-radius: 0 10px 0 0;
+  }
+
+  tbody {
+    text-align: center;
+    font-weight: bold;
+  }
+
+  tbody tr td {
+    padding: 10px;
+  }
+
+  tbody tr td i {
+    float: right;
+    margin-right: 1rem;
+  }
+
+  i {
+    cursor: pointer;
+  }
+
+  .ivu-icon-md-close-circle {
+    color: rgb(188, 188, 188);
+  }
+
+  .ivu-icon-md-create {
+    color: #AC8DAF;
+  }
+
+  .tableContent {
+    margin-top: 3rem;
+  }
+
+  .addMember {
+    position: absolute;
+    top: -20px;
+    right: 20px;
+    background-color: #ffffff;
+    padding: 8px;
+    border-radius: 100px;
+    border: 2px solid #3780be;
+    color: #ff5600;
+  }
+
+  .groupManagement table {
+    margin: 3rem auto;
+    position: relative;
+  }
+
+  .tabTitle {
+    position: absolute;
+    top: -28px;
+    background-color: #ffffff;
+    padding: 5px 15px;
+    border-radius: 5px 5px 0 0;
+    font-weight: 900;
+  }
+
+  .groupManagement tbody {
+    background-color: #ffffff;
+    box-shadow: 1px 1px 1px 1px #cfcfcf;
+    text-align: left;
+  }
+
+  .groupManagement tbody td {
+    padding: 34px 25px;
+  }
+
+  .groupManagement tbody td span {
+    display: flex;
+  }
+
+  .groupManagement tbody td input {
+    padding: 8px 15px;
+    border: 1px solid #d8d8d8;
+    border-radius: 5px;
+  }
+
+  .groupManagement .addMember {
+    background-color: #ff7d00;
+    border: none;
+    color: #ffffff;
+  }
+</style>
diff --git a/code/web-ui/src/views/admin-management.vue b/code/web-ui/src/views/admin-management.vue
new file mode 100644
index 000000000..85be7b76b
--- /dev/null
+++ b/code/web-ui/src/views/admin-management.vue
@@ -0,0 +1,280 @@
+<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright (C) 2019 by the ARA Contributors
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ 	 http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
+<template>
+  <div>
+    <h1>Projects management</h1>
+
+    <table>
+      <thead>
+        <tr>
+          <th>Code</th>
+          <th>Name</th>
+          <th>Member(s)</th>
+          <th>Default</th>
+          <th></th>
+        </tr>
+      </thead>
+
+      <tbody>
+        <tr v-for="project in sortedProjects" :class="project.id %2 !== 0 ? 'darkGrey' : 'lightGrey'" :key="project.id">
+          <td>{{ project.code }}</td>
+          <td>{{ project.name }}</td>
+          <td v-for="member in project.members" :key="member.name">
+            {{ member.name }}
+          </td>
+          <td>
+            <input type="radio" :checked="project.defaultAtStartup === true ? true : false">
+          </td>
+          <td>
+            <Icon type="md-eye" size="24" @click="openProjectDetails(project)"/>
+          </td>
+        </tr>
+      </tbody>
+      <button class="addProject" @click="add">
+        <Icon type="md-add" size="24"/>
+      </button>
+    </table>
+    <Modal v-model="addOrChangeProject" title="Add Project" okText="Add" @on-ok="save" @close="addOrChangeProject = false" :width="900"
+      :loading="loadingSaving" ref="editPopup">
+      <Form :label-width="128"
+        v-if="fields.type !== 'hidden'">
+        <Form-item v-for="field in fields"
+          :key="field.code"
+          :label="(field.type === 'boolean' ? '' : field.name + ':')"
+          :required="field.required && (editingNew || (!field.primaryKey && !field.createOnly))">
+          <form-field :field="field" v-model="editingData[field.code]" :editingNew="editingNew" :ref="field.code" v-on:enter="save"/>
+          <div class="hints">
+            {{field.help}}
+          </div>
+        </Form-item>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import api from '../libs/api'
+  import manangementProjects from '../views/management-projects.vue'
+  import formField from '../components/form-field'
+
+  export default {
+    name: 'admin-management',
+
+    components: {
+      manangementProjects,
+      formField
+    },
+
+    data () {
+      return {
+        projects: [],
+        addOrChangeProject: false,
+        introduction: 'Projects are isolated areas in ARA to manage test reports of several applications or standalone components.',
+        fields: [
+          {
+            code: 'code',
+            name: 'Code',
+            columnTitle: 'Code',
+            type: 'string',
+            required: true,
+            createOnly: true,
+            createOnlyBecause: 'the code ends-up in URLs of ARA, and people should be allowed to bookmark fixed URLs or copy/past them in other services (defect tracking system, wiki, etc.)',
+            newValue: '',
+            width: undefined,
+            help: 'The technical code of the project, to use in ARA URLs (as well as API URLs used by continuous integration to push data to ARA). Eg. "phoenix-front".',
+            primaryKey: true
+          },
+          {
+            code: 'name',
+            name: 'Name',
+            columnTitle: 'Project',
+            type: 'string',
+            required: true,
+            newValue: '',
+            businessKey: true,
+            width: undefined,
+            help: 'The name of the project, visible in the top-left combobox in ARA\'s header. Eg. "Phoenix - Front".'
+          },
+          {
+            code: 'defaultAtStartup',
+            name: 'Default',
+            columnTitle: 'Default',
+            type: 'boolean',
+            required: false,
+            newValue: false,
+            width: 96,
+            help: '' +
+              'Check to use that project as the default one when arriving at ARA homepage without any specified project. ' +
+              'Only one project can be declared as the default.'
+          }
+        ],
+        editingData: {},
+        editingNew: false,
+        editing: false
+      }
+    },
+
+    methods: {
+      newRowData () {
+        let row = {}
+        for (let field of this.fields) {
+          row[field.code] = field.newValue
+        }
+        return row
+      },
+
+      add () {
+        this.addOrChangeProject = true
+        this.doEdit(this.newRowData(), true)
+      },
+
+      doEdit (row, editingNew) {
+        this.editingData = { ...row }
+        this.editingNew = editingNew
+        this.editing = true
+        this.$nextTick(() => this.$refs[this.firstVisibleFieldCode(editingNew)][0].focus())
+      },
+
+      firstVisibleFieldCode (editingNew) {
+        for (let field of this.fields) {
+          if (field.type !== 'hidden' && field.type !== 'select' && !field.readOnly && !field.readOnly && (editingNew || (!field.primaryKey && !field.createOnly))) { // Primary-key is read-only when editing
+            return field.code
+          }
+        }
+        throw new Error('The table ' + this.name + ' has no field, or they are all either of type hidden, selects, read-only or non-modifiable primary key')
+      },
+
+      save () {
+        let row = { ...this.editingData }
+        row.id = undefined
+        Vue.http
+          .post('/api/projects', row, api.REQUEST_OPTIONS)
+          .then((response) => {
+            const newProject = response.body
+            Vue.http
+              .get('/api/projects/' + newProject.code + '/members/users')
+              .then((response) => {
+                newProject.members = response.body
+                this.projects.push(newProject)
+              })
+            this.$refs.editPopup.close()
+          }, (error) => {
+            this.loadingSaving = false
+            api.handleError(error, () => {
+              this.loadingSaving = true
+            })
+          })
+      },
+
+      openProjectDetails (projectInfo) {
+        this.$router.push({ name: 'admin-project-details', params: { projectInfo } })
+      }
+    },
+
+    mounted () {
+      Vue.http
+        .get('api/admin/projects', api.REQUEST_OPTIONS)
+        .then((response) => {
+          const project = response.body
+
+          for (let i = 0; i < project.length; i++) {
+            Vue.http
+              .get('/api/projects/' + project[i].code + '/members/users')
+              .then((response) => {
+                project[i].members = response.body
+                this.projects = Array.from(project)
+              })
+          }
+          return this.projects
+        })
+    },
+
+    computed: {
+      sortedProjects () {
+        return this.projects.map(item => item).sort((a, b) => a.id - b.id)
+      }
+    }
+  }
+</script>
+
+<style scoped>
+  h1 {
+    text-align: center;
+    font-weight: bold;
+    margin-top: 3rem;
+  }
+
+  h2 {
+    text-align: left;
+    top: 0;
+    margin: 0 0 2rem;
+  } 
+
+  table {
+    width: 90%;
+    margin: 3rem auto;
+    border-collapse: collapse;
+    position: relative;
+  }
+
+  thead tr {
+    background-color: #3880BE;
+  }
+
+  thead tr th {
+    padding: 10px;
+    text-align: center;
+    color: #ffffff;
+  }
+
+  thead tr th:first-child {
+    border-radius: 10px 0 0 0;
+  }
+
+  thead tr th:last-child {
+    border-radius: 0 10px 0 0;
+  }
+
+  tbody {
+    text-align: center;
+    font-weight: bold;
+  }
+
+  tbody tr td {
+    padding: 10px;
+  }
+
+  tbody tr td i {
+    color: #AC8DAF;
+  }
+
+  i {
+    cursor: pointer;
+  }
+
+  .addProject {
+    position: absolute;
+    top: -20px;
+    right: 20px;
+    background-color: #ffffff;
+    padding: 8px;
+    border-radius: 100px;
+    border: 2px solid #3780be;
+    color: #ff5600;
+  }
+</style>
diff --git a/code/web-ui/src/views/admin-project-details.vue b/code/web-ui/src/views/admin-project-details.vue
new file mode 100644
index 000000000..09012caa8
--- /dev/null
+++ b/code/web-ui/src/views/admin-project-details.vue
@@ -0,0 +1,251 @@
+<!--~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
+  ~ Copyright (C) 2019 by the ARA Contributors
+  ~
+  ~ Licensed under the Apache License, Version 2.0 (the "License");
+  ~ you may not use this file except in compliance with the License.
+  ~ You may obtain a copy of the License at
+  ~
+  ~ 	 http://www.apache.org/licenses/LICENSE-2.0
+  ~
+  ~ Unless required by applicable law or agreed to in writing, software
+  ~ distributed under the License is distributed on an "AS IS" BASIS,
+  ~ WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  ~ See the License for the specific language governing permissions and
+  ~ limitations under the License.
+  ~
+  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~-->
+<template>
+  <div>
+    <h1>Projects details</h1>
+
+    <div class="tableContent">
+      <h2>{{ projectInfo.name }}</h2>
+
+      <table>
+        <thead>
+          <tr>
+            <th>Members</th>
+            <th>Role</th>
+            <th></th>
+          </tr>
+        </thead>
+
+        <tbody>
+          <tr v-for="member in projectInfo.members" :key="member.name" :class="member.name %2 !== 0 ? 'darkGrey' : 'lightGrey'">
+            <td >{{ member.name }}</td>
+            <td>{{ member.role }}</td>
+            <td>
+              <Icon type="md-close-circle" size="24" @click="openProjectDetails(project)"/>
+              <Icon type="md-create" size="24" @click="openProjectDetails(project)"/>
+            </td>
+          </tr>
+        </tbody>
+        <button class="addMember" @click="addMember">
+          <Icon type="md-add" size="24"/>
+        </button>
+      </table>
+    </div>
+
+    <Modal v-model="memberToAdd" title="Add Member" okText="Add" @on-ok="createMember" @close="memberToAdd = false" :width="900"
+      :loading="loadingSaving" ref="editPopup">
+      <Form :label-width="128">
+        <Form-item v-for="field in fields"
+                   :key="field.code"
+                   :label="(field.type === 'boolean' ? '' : field.name + ':')"
+                   :required="field.required && (editingNew || (!field.primaryKey && !field.createOnly))">
+          <form-field :field="field" v-model="editingData[field.code]" :editingNew="editingNew" :ref="field.code" v-on:enter="createMember"/>
+        </Form-item>
+      </Form>
+    </Modal>
+  </div>
+</template>
+
+<script>
+  import Vue from 'vue'
+  import api from '../libs/api'
+  import formField from '../components/form-field'
+
+  export default {
+    name: 'admin-project-details',
+
+    components: {
+      formField
+    },
+
+    data () {
+      return {
+        projectInfo: [],
+        currentMember: [],
+        newMember: {
+          name: '',
+          role: ''
+        },
+        memberToAdd: false,
+        fields: [
+          {
+            code: 'name',
+            name: 'Name',
+            columnTitle: 'Name',
+            type: 'string',
+            required: true,
+            createOnly: true,
+            createOnlyBecause: 'the code ends-up in URLs of ARA, and people should be allowed to bookmark fixed URLs or copy/past them in other services (defect tracking system, wiki, etc.)',
+            newValue: '',
+            width: undefined,
+            help: 'The technical code of the project, to use in ARA URLs (as well as API URLs used by continuous integration to push data to ARA). Eg. "phoenix-front".',
+            primaryKey: true
+          },
+          {
+            code: 'role',
+            name: 'Role',
+            columnTitle: 'Role',
+            type: 'select',
+            options: [
+              { value: 'MEMBER', label: 'Member' },
+              { value: 'MAINTAINER', label: 'Maintainer' },
+              { value: 'ADMIN', label: 'Admin' }
+            ],
+            required: true,
+            newValue: '',
+            businessKey: true,
+            width: undefined,
+            help: 'The name of the project, visible in the top-left combobox in ARA\'s header. Eg. "Phoenix - Front".'
+          }
+        ],
+        editingData: {},
+        editingNew: false,
+        editing: false
+      }
+    },
+
+    methods: {
+      newRowData () {
+        let row = {}
+        for (let field of this.fields) {
+          row[field.code] = field.newValue
+        }
+        return row
+      },
+
+      addMember () {
+        this.memberToAdd = true
+        this.doEdit(this.newRowData(), true)
+      },
+
+      doEdit (row, editingNew) {
+        this.editingData = { ...row }
+        this.editingNew = editingNew
+        this.editing = true
+        this.$nextTick(() => this.$refs[this.firstVisibleFieldCode(editingNew)][0].focus())
+      },
+
+      firstVisibleFieldCode (editingNew) {
+        for (let field of this.fields) {
+          if (field.type !== 'hidden' && field.type !== 'select' && !field.readOnly && !field.readOnly && (editingNew)) {
+            return field.code
+          }
+        }
+        throw new Error('The table ' + this.name + ' has no field, or they are all either of type hidden, selects, read-only or non-modifiable primary key')
+      },
+
+      createMember () {
+        console.log(this)
+        let row = {
+          name: 'MEMBER 1',
+          role: 'MEMBER'
+        }
+        Vue.http
+          .post('/api/projects/' + this.projectInfo.code + '/members/users', row, api.REQUEST_OPTIONS)
+          .then((response) => {
+            console.log(response)
+          })
+      }
+    },
+
+    created () {
+      this.projectInfo = this.$route.params.projectInfo
+      console.log(this.projectInfo)
+    }
+  }
+</script>
+
+<style scoped>
+  h1 {
+    text-align: center;
+    font-weight: bold;
+    margin-top: 3rem;
+  }
+
+  h2 {
+    text-align: left;
+    top: 0;
+    margin: 1rem auto;
+    width: 90%;
+  } 
+
+  table {
+    width: 90%;
+    margin: 0 auto;
+    border-collapse: collapse;
+    position: relative;
+  }
+
+  thead tr {
+    background-color: #3880BE;
+  }
+
+  thead tr th {
+    padding: 10px;
+    text-align: center;
+    color: #ffffff;
+  }
+
+  thead tr th:first-child {
+    border-radius: 10px 0 0 0;
+  }
+
+  thead tr th:last-child {
+    border-radius: 0 10px 0 0;
+  }
+
+  tbody {
+    text-align: center;
+    font-weight: bold;
+  }
+
+  tbody tr td {
+    padding: 10px;
+  }
+
+  tbody tr td i {
+    float: right;
+    margin-right: 1rem;
+  }
+
+  i {
+    cursor: pointer;
+  }
+
+  .ivu-icon-md-close-circle {
+    color: rgb(188, 188, 188);
+  }
+
+  .ivu-icon-md-create {
+    color: #AC8DAF;
+  }
+
+  .tableContent {
+    margin-top: 3rem;
+  }
+
+  .addMember {
+    position: absolute;
+    top: -20px;
+    right: 20px;
+    background-color: #ffffff;
+    padding: 8px;
+    border-radius: 100px;
+    border: 2px solid #3780be;
+    color: #ff5600;
+  }
+</style>