j3d1/toolshed
2
1
Fork 0
Code Issues 9 Pull requests 1 Projects Releases Packages Wiki Activity

stash

Browse source
This commit is contained in:
j3d1 2026-09-05 15:37:39 +02:00
parent eb7fd65d6b
commit 9814ec7ecd
2 changed files with 107 additions and 25 deletions
Download patch file Download diff file Expand all files Collapse all files

106
frontend/src/views/Inventory.vue
View file

@ -23,9 +23,12 @@
<div class="btn-group"> <div class="btn-group">
<button class="btn" @click="fetchItemsForOwner">Refresh</button> <button class="btn" @click="fetchItemsForOwner">Refresh</button>
<router-link v-if="canEdit" :to="addItemRoute" class="btn btn-primary">Add</router-link> <router-link v-if="canEdit" :to="addItemRoute" class="btn btn-primary">Add</router-link>
<button v-if="layout === 'grid'" @click="layout = 'table'" class="btn"> <button v-if="layout === 'grid'" @click="layout = 'masonry'" class="btn">
<b-icon-list></b-icon-list> <b-icon-list></b-icon-list>
</button> </button>
<button v-else-if="layout === 'masonry'" @click="layout = 'table'" class="btn">
<b-icon-columns-gap></b-icon-columns-gap>
</button>
<button v-else @click="layout = 'grid'" class="btn"> <button v-else @click="layout = 'grid'" class="btn">
<b-icon-grid></b-icon-grid> <b-icon-grid></b-icon-grid>
</button> </button>
@ -55,32 +58,30 @@
</td> </td>
<td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td> <td class="d-none d-md-table-cell">{{ item.owned_quantity }}</td>
<td class="table-action"> <td class="table-action">
<router-link v-if="canEdit" :to="itemEditRoute(item)"> <router-link v-if="canEdit" :to="itemEditRoute(item)" title="Edit">
<b-icon-pencil-square></b-icon-pencil-square> <b-icon-pencil-square></b-icon-pencil-square>
</router-link> </router-link>
<a v-if="canEdit" href="#" @click.prevent="tryDeleteItem(item)"> <a v-if="canEdit" href="#" title="Delete" @click.prevent="tryDeleteItem(item)">
<b-icon-trash></b-icon-trash> <b-icon-trash></b-icon-trash>
</a> </a>
<router-link v-if="shortIdLink(item)" :to="shortIdLink(item)"> <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)">
<b-icon-link></b-icon-link> <b-icon-link></b-icon-link>
</router-link> </router-link>
<router-link v-if="printLinkFor(item)" :to="printLinkFor(item)"> <router-link v-if="printLinkFor(item)" :to="printLinkFor(item)" title="Print Label">
<b-icon-qr-code></b-icon-qr-code> <b-icon-qr-code></b-icon-qr-code>
</router-link> </router-link>
</td> </td>
</tr> </tr>
</tbody> </tbody>
</table> </table>
<div class="card-body" v-else> <div class="card-body" v-else-if="layout === 'masonry'">
<div class="row"> <div class="masonry-grid">
<div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="item in items" <div class="masonry-item" v-for="item in items" :key="item.id">
:key="item.id">
<div class="card"> <div class="card">
<img :src="item.image" class="" :alt="item.image">
<authenticated-image v-if="only_images(item.files).length > 0" <authenticated-image v-if="only_images(item.files).length > 0"
:src="only_images(item.files)[0].name" :src="only_images(item.files)[0].name"
:owner="only_images(item.files)[0].owner" :owner="only_images(item.files)[0].owner"
class="card-img-top img-preview"/> class="card-img-top img-preview-masonry"/>
<div class="card-body"> <div class="card-body">
<h5 class="card-title mb-0"> <h5 class="card-title mb-0">
<router-link :to="itemRoute(item)"> <router-link :to="itemRoute(item)">
@ -93,17 +94,61 @@
</div> </div>
<div class="btn-group"> <div class="btn-group">
<button v-if="canEdit" class="btn btn-danger btn-sm" <button v-if="canEdit" class="btn btn-danger btn-sm"
@click="tryDeleteItem(item)">Delete title="Delete" @click="tryDeleteItem(item)">
<b-icon-trash></b-icon-trash>
</button> </button>
<router-link v-if="canEdit" :to="itemEditRoute(item)" <router-link v-if="canEdit" :to="itemEditRoute(item)"
class="btn btn-primary btn-sm">Edit class="btn btn-primary btn-sm" title="Edit">
<b-icon-pencil-square></b-icon-pencil-square>
</router-link> </router-link>
<router-link v-if="shortIdLink(item)" :to="shortIdLink(item)" <router-link v-if="shortIdLink(item)" :to="shortIdLink(item)"
class="btn btn-secondary btn-sm"> class="btn btn-secondary btn-sm">
<b-icon-link></b-icon-link> <b-icon-link></b-icon-link>
</router-link> </router-link>
<router-link v-if="printLinkFor(item)" :to="printLinkFor(item)" <router-link v-if="printLinkFor(item)" :to="printLinkFor(item)"
class="btn btn-secondary btn-sm" title="Print Label">
<b-icon-qr-code></b-icon-qr-code>
</router-link>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card-body" v-else>
<div class="row">
<div class="col-12 col-sm-6 col-md-4 col-lg-3 col-xl-2 d-flex" v-for="item in items"
:key="item.id">
<div class="card w-100 d-flex flex-column">
<authenticated-image v-if="only_images(item.files).length > 0"
:src="only_images(item.files)[0].name"
:owner="only_images(item.files)[0].owner"
class="card-img-top img-preview-grid"/>
<div class="card-body d-flex flex-column flex-grow-1">
<h5 class="card-title mb-0">
<router-link :to="itemRoute(item)">
{{ item.name }}
</router-link></h5>
<div class="card-text text-black-50">
<span class="badge bg-secondary text-white">{{ item.availability_policy }}</span>
<span class="badge bg-secondary text-white">{{ item.visibility_policy }}</span>
<span class="float-right">{{ item.owned_quantity }}</span>
</div>
<div class="btn-group mt-auto">
<button v-if="canEdit" class="btn btn-danger btn-sm"
title="Delete" @click="tryDeleteItem(item)">
<b-icon-trash></b-icon-trash>
</button>
<router-link v-if="canEdit" :to="itemEditRoute(item)"
class="btn btn-primary btn-sm" title="Edit">
<b-icon-pencil-square></b-icon-pencil-square>
</router-link>
<router-link v-if="shortIdLink(item)" :to="shortIdLink(item)"
class="btn btn-secondary btn-sm"> class="btn btn-secondary btn-sm">
<b-icon-link></b-icon-link>
</router-link>
<router-link v-if="printLinkFor(item)" :to="printLinkFor(item)"
class="btn btn-secondary btn-sm" title="Print Label">
<b-icon-qr-code></b-icon-qr-code> <b-icon-qr-code></b-icon-qr-code>
</router-link> </router-link>
</div> </div>
@ -248,7 +293,42 @@ export default {
</script> </script>
<style scoped> <style scoped>
.img-preview { .img-preview-grid {
height: 160px;
object-fit: cover; object-fit: cover;
} }
.img-preview-masonry {
width: 100%;
height: auto;
object-fit: cover;
}
.masonry-grid {
column-count: 2;
column-gap: 1rem;
}
.masonry-item {
break-inside: avoid;
margin-bottom: 1rem;
}
@media (min-width: 768px) {
.masonry-grid {
column-count: 3;
}
}
@media (min-width: 992px) {
.masonry-grid {
column-count: 4;
}
}
@media (min-width: 1200px) {
.masonry-grid {
column-count: 6;
}
}
</style> </style>

26
frontend/src/views/StorageLocation.vue
View file

@ -55,16 +55,16 @@
<span class="badge bg-secondary text-white">{{ location.visibility_policy }}</span> <span class="badge bg-secondary text-white">{{ location.visibility_policy }}</span>
</td> </td>
<td class="table-action"> <td class="table-action">
<router-link :to="locationEditRoute(location)"> <router-link :to="locationEditRoute(location)" title="Edit">
<b-icon-pencil-square></b-icon-pencil-square> <b-icon-pencil-square></b-icon-pencil-square>
</router-link> </router-link>
<a href="#" @click.prevent="tryDeleteLocation(location)"> <a href="#" title="Delete" @click.prevent="tryDeleteLocation(location)">
<b-icon-trash></b-icon-trash> <b-icon-trash></b-icon-trash>
</a> </a>
<router-link v-if="shortIdLink(location)" :to="shortIdLink(location)"> <router-link v-if="shortIdLink(location)" :to="shortIdLink(location)">
<b-icon-link></b-icon-link> <b-icon-link></b-icon-link>
</router-link> </router-link>
<router-link v-if="printLinkFor(location)" :to="printLinkFor(location)"> <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)" title="Print Label">
<b-icon-qr-code></b-icon-qr-code> <b-icon-qr-code></b-icon-qr-code>
</router-link> </router-link>
</td> </td>
@ -73,10 +73,10 @@
</table> </table>
<div class="card-body" v-else> <div class="card-body" v-else>
<div class="row"> <div class="row">
<div class="col-12 col-md-4 col-lg-3 col-xl-2" v-for="location in locations" <div class="col-12 col-md-4 col-lg-3 col-xl-2 d-flex" v-for="location in locations"
:key="location.id"> :key="location.id">
<div class="card"> <div class="card w-100 d-flex flex-column">
<div class="card-body"> <div class="card-body d-flex flex-column flex-grow-1">
<h5 class="card-title mb-0"> <h5 class="card-title mb-0">
<router-link :to="locationRoute(location)"> <router-link :to="locationRoute(location)">
{{ location.name }} {{ location.name }}
@ -90,19 +90,21 @@
<div class="card-text" v-if="location.description"> <div class="card-text" v-if="location.description">
<small>{{ location.description }}</small> <small>{{ location.description }}</small>
</div> </div>
<div class="btn-group mt-2"> <div class="btn-group mt-auto">
<button class="btn btn-danger btn-sm" <button class="btn btn-danger btn-sm"
@click="tryDeleteLocation(location)">Delete title="Delete" @click="tryDeleteLocation(location)">
<b-icon-trash></b-icon-trash>
</button> </button>
<router-link :to="locationEditRoute(location)" <router-link :to="locationEditRoute(location)"
class="btn btn-primary btn-sm">Edit class="btn btn-primary btn-sm" title="Edit">
<b-icon-pencil-square></b-icon-pencil-square>
</router-link> </router-link>
<router-link v-if="shortIdLink(location)" :to="shortIdLink(location)" <router-link v-if="shortIdLink(location)" :to="shortIdLink(location)"
class="btn btn-secondary btn-sm"> class="btn btn-secondary btn-sm">
<b-icon-link></b-icon-link> <b-icon-link></b-icon-link>
</router-link> </router-link>
<router-link v-if="printLinkFor(location)" :to="printLinkFor(location)" <router-link v-if="printLinkFor(location)" :to="printLinkFor(location)"
class="btn btn-secondary btn-sm"> class="btn btn-secondary btn-sm" title="Print Label">
<b-icon-qr-code></b-icon-qr-code> <b-icon-qr-code></b-icon-qr-code>
</router-link> </router-link>
</div> </div>
@ -233,11 +235,11 @@ export default {
font-size: 0.8rem; font-size: 0.8rem;
} }
.btn-group.mt-2 { .btn-group.mt-auto {
width: 100%; width: 100%;
} }
.btn-group.mt-2 .btn { .btn-group.mt-auto .btn {
flex: 1; flex: 1;
} }
</style> </style>