138 lines
No EOL
6.7 KiB
Vue
138 lines
No EOL
6.7 KiB
Vue
<template>
|
|
<BaseLayout>
|
|
<main class="content">
|
|
<div class="container-fluid p-0">
|
|
<h1 class="h3 mb-3">Inventory Own & Friends"</h1>
|
|
<div class="row">
|
|
<div class="col-12 col-xl-6">
|
|
<div class="card">
|
|
<div class="card-header">
|
|
<h5 class="card-title">{{ user }}'s Inventory</h5>
|
|
<button v-if="layout === 'grid'" @click="layout = 'table'" class="btn">
|
|
<b-icon-list></b-icon-list>
|
|
</button>
|
|
<button v-else @click="layout = 'grid'" class="btn">
|
|
<b-icon-grid></b-icon-grid>
|
|
</button>
|
|
</div>
|
|
<table class="table table-striped" v-if="layout === 'table'">
|
|
<thead>
|
|
<tr>
|
|
<th style="width:40%;">Name</th>
|
|
<th style="width:25%">Availability Policy</th>
|
|
<th class="d-none d-md-table-cell" style="width:25%">Amount</th>
|
|
<th>Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr v-for="item in inventory_items" :key="item.id">
|
|
<td>
|
|
<router-link :to="`/inventory/${item.id}`">{{ item.name }}</router-link>
|
|
</td>
|
|
<td>{{ item.owner }}</td>
|
|
<td class="d-none d-md-table-cell">
|
|
<span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
|
|
</td>
|
|
<td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
|
|
<td class="table-action">
|
|
<router-link :to="`/inventory/${item.id}/edit`">
|
|
<b-icon-pencil-square></b-icon-pencil-square>
|
|
</router-link>
|
|
<a :href="`/inventory/${item.id}/delete`" @click.prevent="deleteInventoryItem(item)">
|
|
<b-icon-trash></b-icon-trash>
|
|
</a>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
<div class="card-body" v-else>
|
|
<div class="row">
|
|
<div class="col-12 col-md-6 col-lg-4 col-xl-3" v-for="item in inventory_items"
|
|
:key="item.id">
|
|
<div class="card">
|
|
<img :src="item.image" class="card-img-top" :alt="item.image || '...'">
|
|
<div class="card-body">
|
|
<h5 class="card-title mb-0">{{ item.name }}</h5>
|
|
<div class="card-text text-black-50">
|
|
<span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
|
|
<span class="float-right">{{ item.owned_quantity }}</span>
|
|
</div>
|
|
<div class="btn-group">
|
|
<!--router-link :to="`/inventory/${item.id}`"
|
|
class="btn btn-primary btn-sm">
|
|
View
|
|
</router-link>
|
|
<button class="btn btn-danger btn-sm"
|
|
@click="deleteInventoryItem(item.id)">Delete
|
|
</button>
|
|
<router-link :to="`/inventory/${item.id}/edit`"
|
|
class="btn btn-primary btn-sm">Edit
|
|
</router-link-->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="card">
|
|
<button class="btn" @click="getInventoryItems">Refresh</button>
|
|
<router-link to="/inventory/new" class="btn btn-primary">Add</router-link>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
</BaseLayout>
|
|
</template>
|
|
|
|
<script>
|
|
import {mapActions, mapGetters, mapMutations, mapState} from "vuex";
|
|
import * as BIcons from "bootstrap-icons-vue";
|
|
import BaseLayout from "@/components/BaseLayout.vue";
|
|
|
|
export default {
|
|
name: "Inventory",
|
|
data() {
|
|
return {
|
|
layout: "grid",
|
|
}
|
|
},
|
|
components: {
|
|
BaseLayout,
|
|
...BIcons
|
|
},
|
|
computed: {
|
|
...mapGetters(["inventory_items"]),
|
|
username() {
|
|
return this.$route.params.username
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(["apiFederatedGet", "getFriends", "getFriendServer"]),
|
|
...mapMutations(["setInventoryItems"]),
|
|
async getInventoryItems() {
|
|
try {
|
|
const servers = await this.getFriends().then(friends => friends.map(friend => this.getFriendServer({username: friend})))
|
|
const urls = servers.map(server => server.then(s => {
|
|
return {host: `http://${s}`, target: "/api/inventory_items/"}
|
|
}))
|
|
urls.map(url => url.then(u => this.apiFederatedGet(u).then(items => {
|
|
this.setInventoryItems({url: u.domain, items})
|
|
}).catch(e => {
|
|
}))) // TODO: handle error
|
|
} catch (e) {
|
|
console.error(e)
|
|
}
|
|
},
|
|
},
|
|
async mounted() {
|
|
await this.getInventoryItems()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
</style> |