tobias/lrc-frontend
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

added user repo and group management working now

Browse Source
This commit is contained in:
Tobias
2019-04-11 16:18:18 +02:00
parent 654c78ff7c
commit 98f5d3f39b
11 changed files with 236 additions and 97 deletions
Download Patch File Download Diff File Expand all files Collapse all files

105
src/components/Group.vue
View File

@@ -30,39 +30,18 @@
</div>
</div>
<div id="sixthTable">
<table>
<thead>
<tr>
<th v-for="col in columns" v-on:click="sortTable(col)">{{col}}
<div class="arrow" v-if="col == sortColumn" v-bind:class="[ascending ? 'arrow_up' : 'arrow_down']"></div>
</th>
</tr>
</thead>
<tbody>
<tr v-for="row in get_rows()">
<td v-for="col in columns">{{row[col]}}</td>
</tr>
</tbody>
</table>
<div class="pagination">
<div class="number"
v-for="i in num_pages()"
v-bind:class="[i == currentPage ? 'active' : '']"
v-on:click="change_page(i)">{{i}}</div>
</div>
</div>
<p class="subtitle error-msg">{{ errorMsg }}</p>
<h3 class="title">Add Group</h3>
<input v-model="group.name" placeholder="Group name">
<label>
<input v-model="group.name" placeholder="Group name">
</label>
<p>Name is: {{ group.name }}</p>
<span>Multiline message is:</span>
<p style="white-space: pre-line;">{{ group.description }}</p>
<br>
<textarea v-model="group.message" placeholder="Description for group"></textarea>
<button v-on:click="create_group">{{$t('create_group')}}</button>
<textarea v-model="group.description" placeholder="Description for group"></textarea>
<button v-on:click="createGroup">{{$t('create_group')}}</button>
</div>
</div>
</section>
@@ -79,28 +58,19 @@
data () {
return {
isLoading: false,
errorMsg: '',
groups: [],
group: {},
currentPage: 1,
elementsPerPage: 3,
ascending: false,
errorMsg: '',
group: {name:'', description:''},
sortColumn: '',
rows: [
{ id: 1, name: "Chandler Bing", phone: '305-917-1301', profession: 'IT Manager' },
{ id: 2, name: "Ross Geller", phone: '210-684-8953', profession: 'Paleontologist' },
{ id: 3, name: "Rachel Green", phone: '765-338-0312', profession: 'Waitress'},
{ id: 4, name: "Monica Geller", phone: '714-541-3336', profession: 'Head Chef' },
{ id: 5, name: "Joey Tribbiani", phone: '972-297-6037', profession: 'Actor' },
{ id: 6, name: "Phoebe Buffay", phone: '760-318-8376', profession: 'Masseuse' }
],
currentPage: 1,
elementsPerPage: 5,
};
},
methods: {
fetch(){
fetch() {
this.isLoading = true;
// const { data } = await GroupRepository.get();
GroupRepository.get()
GroupRepository.getGroups()
.then(response => {
this.groups = response.data;
this.isLoading = false;
@@ -108,6 +78,17 @@
});
},
get_group_rows() {
var start = (this.currentPage-1) * this.elementsPerPage;
var end = start + this.elementsPerPage;
return this.groups.slice(start, end);
},
num_group_pages() {
return Math.ceil(this.groups.length / this.elementsPerPage);
},
change_page(page) {
this.currentPage = page;
},
sortTable(col) {
if (this.sortColumn === col) {
this.ascending = !this.ascending;
@@ -118,7 +99,7 @@
var ascending = this.ascending;
this.rows.sort(function(a, b) {
this.groups.sort(function(a, b) {
if (a[col] > b[col]) {
return ascending ? 1 : -1
} else if (a[col] < b[col]) {
@@ -127,44 +108,24 @@
return 0;
})
},
num_pages() {
return Math.ceil(this.rows.length / this.elementsPerPage);
createGroup(){
this.$log.info("Creating new group...");
GroupRepository.createGroup(this.group);
this.fetch();
},
num_group_pages() {
return Math.ceil(this.groups.length / this.elementsPerPage);
},
get_rows() {
var start = (this.currentPage-1) * this.elementsPerPage;
var end = start + this.elementsPerPage;
return this.rows.slice(start, end);
},
get_group_rows() {
var start = (this.currentPage-1) * this.elementsPerPage;
var end = start + this.elementsPerPage;
return this.groups.slice(start, end);
},
change_page(page) {
this.currentPage = page;
},
},
mounted () {
mounted() {
this.fetch();
},
beforeDestroy() {
},
computed: {
columns() {
if (this.rows.length === 0) {
return [];
}
return Object.keys(this.rows[0])
},
group_columns() {
if (this.groups.length === 0) {
return [];
}
return Object.keys(this.groups[0])
}
return Object.keys(this.groups[0]);
},
},
}
</script>