net
/
ProjectGrid.frontend
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

init

This commit is contained in:
net 2021-06-03 20:46:16 +02:00
commit b868f86759
18 changed files with 12749 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
.gitignore vendored Normal file
View File

@ -0,0 +1,22 @@
.DS_Store
node_modules
/dist
# local env files
.env.local
.env.*.local
# Log files
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# Editor directories and files
.idea
.vscode
*.suo
*.ntvs*
*.njsproj
*.sln
*.sw?

24
README.md Normal file
View File

@ -0,0 +1,24 @@
# clientapp
## Project setup
```
npm install
```
### Compiles and hot-reloads for development
```
npm run serve
```
### Compiles and minifies for production
```
npm run build
```
### Lints and fixes files
```
npm run lint
```
### Customize configuration
See [Configuration Reference](https://cli.vuejs.org/config/).

5
babel.config.js Normal file
View File

@ -0,0 +1,5 @@
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
]
}

12360
package-lock.json generated Normal file
View File

File diff suppressed because it is too large Load Diff

44
package.json Normal file
View File

@ -0,0 +1,44 @@
{
"name": "clientapp",
"version": "0.1.0",
"private": true,
"scripts": {
"serve": "vue-cli-service serve",
"build": "vue-cli-service build",
"lint": "vue-cli-service lint"
},
"dependencies": {
"bootstrap": "^4.6.0",
"bootstrap-vue": "^2.21.2",
"core-js": "^3.6.5",
"vue": "^3.0.0"
},
"devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0",
"babel-eslint": "^10.1.0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0"
},
"eslintConfig": {
"root": true,
"env": {
"node": true
},
"extends": [
"plugin:vue/vue3-essential",
"eslint:recommended"
],
"parserOptions": {
"parser": "babel-eslint"
},
"rules": {}
},
"browserslist": [
"> 1%",
"last 2 versions",
"not dead"
]
}

BIN
public/favicon.ico Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 4.2 KiB

17
public/index.html Normal file
View File

@ -0,0 +1,17 @@
<!DOCTYPE html>
<html lang="">
<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><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> 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>

23
src/App.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div id="app">
<Dashboard />
</div>
</template>
<script>
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import Dashboard from './components/Dashboard.vue'
export default {
name: 'App',
components: {
Dashboard
}
}
</script>
<style>
@import './assets/styles/global.css';
</style>

BIN
src/assets/logo.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.7 KiB

40
src/assets/styles/global.css Normal file
View File

@ -0,0 +1,40 @@
.header {
padding: 2%;
background-color: rgb(131, 53, 241);
font-size: 50px;
text-align: center;
width: 100%;
color: white;
}
.footer {
padding: 2%;
background-color: red;
font-size: 50px;
text-align: center;
width: 100%
}
.dashboard {
padding: 3% 1%;
}
h1 {
text-align: center;
}
.display-board {
width: 100%;
background-color: rgba(179, 242, 163, 0.719);
padding: 5%;
}
.number {
color: red;
font-size: 75px;
text-align: center;
}
.mrgnbtm {
margin-top: 20px;
}

58
src/components/CreateUser.vue Normal file
View File

@ -0,0 +1,58 @@
<template>
<div class="container">
<div class="row">
<div class="col-md-7 mrgnbtm">
<h2>Create User</h2>
<form>
<div class="row">
<div class="form-group col-md-6">
<label htmlFor="exampleInputEmail1">First Name</label>
<input type="text" class="form-control" v-model="firstName" name="firstname" id="firstname" aria-describedby="emailHelp" placeholder="First Name" />
</div>
<div class="form-group col-md-6">
<label htmlFor="exampleInputPassword1">Last Name</label>
<input type="text" class="form-control" v-model="lastName" name="lastname" id="lastname" placeholder="Last Name" />
</div>
</div>
<div class="row">
<div class="form-group col-md-12">
<label htmlFor="exampleInputEmail1">Email</label>
<input type="text" class="form-control" v-model="email" name="email" id="email" aria-describedby="emailHelp" placeholder="Email" />
</div>
</div>
<button type="button" @click='createUser()' class="btn btn-danger">Create</button>
</form>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'CreateUser',
data() {
return {
firstName: '',
lastName: '',
email: ''
}
},
methods: {
createUser() {
console.log(this.firstName)
const payload = {
firstName: this.firstName,
lastName: this.lastName,
email: this.email
}
this.$emit('createUser', payload)
this.clearForm();
},
clearForm() {
this.firstName = "";
this.lastName = "";
this.email = "";
}
}
}
</script>

61
src/components/Dashboard.vue Normal file
View File

@ -0,0 +1,61 @@
<template>
<div class="hello">
<Header />
<div class="container mrgnbtm">
<div class="row">
<div class="col-md-8">
<CreateUser @createUser="userCreate($event)" />
</div>
<div class="col-md-4">
<DisplayBoard :numberOfUsers="numberOfUsers" @getAllUsers="getUsers()" />
</div>
</div>
</div>
<div class="row mrgnbtm">
<Users v-if="users.length > 0" :users="users" />
</div>
</div>
</template>
<script>
import Header from './Header.vue'
import CreateUser from './CreateUser.vue'
import DisplayBoard from './DisplayBoard.vue'
import Users from './Users.vue'
import { getAllUsers, createUser } from '../services/UserService'
export default {
name: 'Dashboard',
components: {
Header,
CreateUser,
DisplayBoard,
Users
},
data() {
return {
users: [],
numberOfUsers: 0
}
},
methods: {
getUsers() {
getAllUsers().then(res => {
this.users = res;
console.log(this.users)
this.numberOfUsers = this.users.length
});
},
userCreate(data) {
console.log(data);
createUser(data).then(res => {
this.getUsers();
console.log('res:::', res);
});
}
},
mounted () {
this.getUsers();
}
}
</script>

23
src/components/DisplayBoard.vue Normal file
View File

@ -0,0 +1,23 @@
<template>
<div class="display-board">
<h4>Users Created</h4>
<div class="number">
{{numberOfUsers}}
</div>
<div class="btn">
<button @click='getAllUsers()' type="button" class="btn btn-warning">Get all Users</button>
</div>
</div>
</template>
<script>
export default {
name: 'DisplayBoard',
props: ['numberOfUsers'],
methods: {
getAllUsers() {
this.$emit('getAllUsers')
}
}
}
</script>

11
src/components/Header.vue Normal file
View File

@ -0,0 +1,11 @@
<template>
<div class="header">
Vue.js With .NET
</div>
</template>
<script>
export default {
name: 'Header'
}
</script>

31
src/components/Users.vue Normal file
View File

@ -0,0 +1,31 @@
<template>
<div class="container">
<h2>Users</h2>
<table class="table table-bordered">
<thead>
<tr>
<th>User Id</th>
<th>Firstname</th>
<th>Lastname</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr v-for="(item, index) in users" :key="index">
<td>{{ index + 1 }}</td>
<td>{{ item.firstName }}</td>
<td>{{ item.lastName }}</td>
<td>{{ item.email }}</td>
</tr>
</tbody>
</table>
</div>
</template>
<script>
export default {
name: 'Users',
props: ['users']
}
</script>

4
src/main.js Normal file
View File

@ -0,0 +1,4 @@
import { createApp } from 'vue'
import App from './App.vue'
createApp(App).mount('#app')

14
src/services/UserService.js Normal file
View File

@ -0,0 +1,14 @@
export async function getAllUsers() {
const response = await fetch('/api/users');
return await response.json();
}
export async function createUser(data) {
const response = await fetch(`/api/user`, {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify(data)
})
return await response.json();
}

12
vue.config.js Normal file
View File

@ -0,0 +1,12 @@
module.exports = {
devServer: {
"public": "vue.hello-world.games",
"port": 10002,
proxy: {
'^/api': {
target: 'https://localhost:5001',
changeOrigin: true
}
}
}
}