members-api-integration #3
12
17th Website/package-lock.json
generated
12
17th Website/package-lock.json
generated
@@ -2591,9 +2591,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/caniuse-lite": {
|
"node_modules/caniuse-lite": {
|
||||||
"version": "1.0.30001486",
|
"version": "1.0.30001616",
|
||||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz",
|
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
|
||||||
"integrity": "sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==",
|
"integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"funding": [
|
"funding": [
|
||||||
{
|
{
|
||||||
@@ -11644,9 +11644,9 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
"caniuse-lite": {
|
"caniuse-lite": {
|
||||||
"version": "1.0.30001486",
|
"version": "1.0.30001616",
|
||||||
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001486.tgz",
|
"resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001616.tgz",
|
||||||
"integrity": "sha512-uv7/gXuHi10Whlj0pp5q/tsK/32J2QSqVRKQhs2j8VsDCjgyruAh/eEXHF822VqO9yT6iZKw3nRwZRSPBE9OQg==",
|
"integrity": "sha512-RHVYKov7IcdNjVHJFNY/78RdG4oGVjbayxv8u5IO74Wv7Hlq4PnJE6mo/OjFijjVFNy5ijnCt6H3IIo4t+wfEw==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"case-sensitive-paths-webpack-plugin": {
|
"case-sensitive-paths-webpack-plugin": {
|
||||||
|
|||||||
@@ -1,7 +1,5 @@
|
|||||||
<script>
|
<script>
|
||||||
import { Listbox, ListboxButton, ListboxOptions, ListboxOption } from '@headlessui/vue'
|
|
||||||
import { Icon } from '@iconify/vue'
|
import { Icon } from '@iconify/vue'
|
||||||
import QueryApolloGraphQL from '../api/request'
|
|
||||||
import Dropdown from '../components/dropdown/Dropdown.vue'
|
import Dropdown from '../components/dropdown/Dropdown.vue'
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
@@ -13,8 +11,8 @@ export default {
|
|||||||
|
|
||||||
statusFilters: [
|
statusFilters: [
|
||||||
{ id: 1, name: 'All Groups', filter: 'none', disabled: false },
|
{ id: 1, name: 'All Groups', filter: 'none', disabled: false },
|
||||||
{ id: 2, name: 'Alpha', filter: 'Alpha Company', disabled: false },
|
{ id: 2, name: 'Alpha', filter: 'Alpha', disabled: false },
|
||||||
{ id: 3, name: 'Echo', filter: 'Echo Company', disabled: false },
|
{ id: 3, name: 'Echo', filter: 'Echo', disabled: false },
|
||||||
{ id: 4, name: 'HHC', filter: 'HHC', disabled: false },
|
{ id: 4, name: 'HHC', filter: 'HHC', disabled: false },
|
||||||
{ id: 5, name: 'Recruit', filter: 'Recruit', disabled: false },
|
{ id: 5, name: 'Recruit', filter: 'Recruit', disabled: false },
|
||||||
],
|
],
|
||||||
@@ -40,25 +38,25 @@ export default {
|
|||||||
},
|
},
|
||||||
filterByName(item) {
|
filterByName(item) {
|
||||||
if (this.search != '')
|
if (this.search != '')
|
||||||
return item.member_name.toLowerCase().includes(this.search.toLowerCase());
|
return item.name.toLowerCase().includes(this.search.toLowerCase());
|
||||||
else
|
else
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
filterByUnit(item) {
|
filterByUnit(item) {
|
||||||
|
// console.log(item, this.statusFilters[this.currentStatusFilterIndex]);
|
||||||
|
|
||||||
if (this.statusFilters[this.currentStatusFilterIndex].filter != 'none')
|
if (this.statusFilters[this.currentStatusFilterIndex].filter != 'none')
|
||||||
return item.status == this.unitFilter.filter;
|
//do the filter
|
||||||
|
return item.company.toLowerCase() == this.statusFilters[this.currentStatusFilterIndex].filter.toLowerCase();
|
||||||
else
|
else
|
||||||
|
//no filter applied
|
||||||
return true;
|
return true;
|
||||||
},
|
},
|
||||||
filterByRole(item) { //THIS IS NOT IMPLEMENTED YET
|
filterByRole(item) { //THIS IS NOT IMPLEMENTED YET
|
||||||
return true;
|
return true;
|
||||||
}
|
},
|
||||||
},
|
},
|
||||||
components: {
|
components: {
|
||||||
Listbox,
|
|
||||||
ListboxButton,
|
|
||||||
ListboxOption,
|
|
||||||
ListboxOptions,
|
|
||||||
Icon,
|
Icon,
|
||||||
Dropdown,
|
Dropdown,
|
||||||
},
|
},
|
||||||
@@ -67,6 +65,15 @@ export default {
|
|||||||
// this.items = fetch("http://iceberg-gaming.com:1323/api/members");
|
// this.items = fetch("http://iceberg-gaming.com:1323/api/members");
|
||||||
|
|
||||||
//make API request here
|
//make API request here
|
||||||
|
|
||||||
|
fetch('http://iceberg-gaming.com:1323/api/v1/member').then(res => {
|
||||||
|
console.log(res);
|
||||||
|
res.json().then(list => {
|
||||||
|
this.items = list;
|
||||||
|
console.log(this.items);
|
||||||
|
|
||||||
|
});
|
||||||
|
});
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
filteredTable() {
|
filteredTable() {
|
||||||
@@ -110,7 +117,7 @@ export default {
|
|||||||
<thead>
|
<thead>
|
||||||
<tr>
|
<tr>
|
||||||
<th>Member</th>
|
<th>Member</th>
|
||||||
<th>Unit</th>
|
<th>Status</th>
|
||||||
<th>Rank</th>
|
<th>Rank</th>
|
||||||
<th>Join Date</th>
|
<th>Join Date</th>
|
||||||
<th>LOA Until</th>
|
<th>LOA Until</th>
|
||||||
@@ -119,10 +126,13 @@ export default {
|
|||||||
</thead>
|
</thead>
|
||||||
<tbody id="tableBody">
|
<tbody id="tableBody">
|
||||||
<tr v-for="(item, index) in filteredTable"
|
<tr v-for="(item, index) in filteredTable"
|
||||||
v-on:click="$router.push({ path: `/profile/${item.member_name}/home` })">
|
v-on:click="$router.push({ path: `/profile/${item.id}/home` })">
|
||||||
<td>{{ item.member_name }}</td>
|
<td>{{ item.name }}</td>
|
||||||
<td>{{ item.status }}</td>
|
<td>{{ item.company }}</td>
|
||||||
<td>{{ item.rank }}</td>
|
<td>{{ item.rank.name }}</td>
|
||||||
|
<td>{{ item.created_at.split('T')[0] }}</td>
|
||||||
|
<td>hello</td>
|
||||||
|
<td>hello</td>
|
||||||
</tr>
|
</tr>
|
||||||
</tbody>
|
</tbody>
|
||||||
</table>
|
</table>
|
||||||
|
|||||||
Reference in New Issue
Block a user