change id to key, save description

This commit is contained in:
Thomas Mack 2022-04-03 06:38:59 +02:00
parent 1cd8f3933d
commit e528baa5b8
21 changed files with 501 additions and 208 deletions

19
package-lock.json generated
View File

@ -5,6 +5,7 @@
"requires": true,
"packages": {
"": {
"name": "billibox-vue",
"version": "0.1.0",
"dependencies": {
"@dsb-norge/vue-keycloak-js": "*",
@ -14286,6 +14287,7 @@
"integrity": "sha512-vf4KqrmuOSnoEYGUiHPeMoxhh6wpiucLWXISn7xYFU80pK1lqcuhbl6tpurAanUIyRO/ENDUQBH7RAdbLNq1bA==",
"dev": true,
"requires": {
"@babel/core": "^7.12.16",
"@babel/helper-compilation-targets": "^7.12.16",
"@babel/helper-module-imports": "^7.12.13",
"@babel/plugin-proposal-class-properties": "^7.12.13",
@ -14298,6 +14300,7 @@
"@vue/babel-plugin-jsx": "^1.0.3",
"@vue/babel-preset-jsx": "^1.1.2",
"babel-plugin-dynamic-import-node": "^2.3.3",
"core-js": "^3.8.3",
"core-js-compat": "^3.8.3",
"semver": "^7.3.4"
},
@ -15983,7 +15986,9 @@
"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
"dev": true,
"requires": {}
"requires": {
"ajv": "^8.0.0"
}
},
"ajv-keywords": {
"version": "5.1.0",
@ -18462,7 +18467,9 @@
"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
"dev": true,
"requires": {}
"requires": {
"ajv": "^8.0.0"
}
},
"ajv-keywords": {
"version": "5.1.0",
@ -21140,7 +21147,9 @@
"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
"dev": true,
"requires": {}
"requires": {
"ajv": "^8.0.0"
}
},
"ajv-keywords": {
"version": "5.1.0",
@ -21226,7 +21235,9 @@
"resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
"integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
"dev": true,
"requires": {}
"requires": {
"ajv": "^8.0.0"
}
},
"ajv-keywords": {
"version": "5.1.0",

View File

@ -104,7 +104,6 @@ export default class App extends Vue {}
}
.billi-read-detail section {
padding-left: 1rem;
border-left: 1px solid grey;
z-index: 0;
grid-area: haupt
@ -115,6 +114,7 @@ export default class App extends Vue {}
position: absolute;
bottom: -50px;
left: -50px;
z-index: -100;
}
.billi-icon-filter {
@ -129,5 +129,36 @@ export default class App extends Vue {}
grid-template-columns: repeat(4, 1fr);
}
.billi-box {
margin-top: 1rem;
border-radius: 0.5rem;
padding-left: 0rem;
display: grid;
grid-template-columns: auto 60px;
grid-template-areas:
"header icon"
"billi-ct billi-ct"
;
}
.billi-box-header {
padding:0.5rem;
grid-area: header;
}
.billi-box-icon {
padding-right: 0.5rem;
grid-area: icon;
align-self: center;
justify-self: end;
}
.billi-box-icon svg {
height: 2rem;
width: 2rem;
}
.billi-box-content {
grid-area: billi-ct
}
</style>

View File

@ -12,7 +12,7 @@
mode="out-in"
appear
>
<article class="billi-read-detail" :key="item.id">
<article class="billi-read-detail" :key="item.key">
<aside>
<img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" />
</aside>
@ -27,7 +27,7 @@
<script>
import { mapGetters} from "vuex";
import Set from "@/store/classes/Set";
import InventorySet from "@/store/classes/InventorySet";
import InventoryItemDescription from "@/components/camera/parts/InventoryItemDescription";
import InventoryItemCollectionInfo from "@/components/camera/parts/InventoryItemCollectionInfo";
import InventoryItemHead from "@/components/camera/parts/InventoryItemHead";
@ -41,7 +41,7 @@ export default {
},
props: {
item: {
type:Set,
type:InventorySet,
required: true
}
},

View File

@ -12,7 +12,7 @@
mode="out-in"
appear
>
<article class="billi-read-detail" :key="item.id">
<article class="billi-read-detail" :key="item.key">
<aside>
<img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" />
</aside>

View File

@ -30,7 +30,7 @@
<FilterButtonItemType
itemType="set"
typeName="Set"
typeName="InventorySet"
:active="isFilterByType('set')"
@click="setFilterByType('set')"
icon="fa-box-open-full"
@ -38,14 +38,12 @@
</div>
<div class="row" >
<component
:is="componentName"
:item=item
v-for="item in filteredItems" :key="item.id"
></component>
</div>
</template>

View File

@ -1,40 +1,37 @@
<template>
<transition
enter-active-class="animate__animated animate__fadeIn"
leave-active-class="animate__animated animate__fadeOut"
mode="out-in"
appear
>
<div class="card mt-3" :class="`${getActiveStyle}`"
<section class="billi-inventory-card"
@click="toggleActive"
:key="item.id"
:key="item.key"
>
<div class="row no-gutters">
<div class="col-3 text-center text-white ">
<i class="mx-2 mt-3 text-sm-center " :class="`${getIconClass}`"></i>
</div>
<div class="col-9 bg-white text-black">
<div class="col-md-12"
>
<div class="row mt-2 bottom-50">
<div class="col-md-8 "> {{ item.name }} {{ setCounter }}</div>
<div class="col-md-4 text-end"><i class="fa-solid fa-tag text-black-50"></i> {{ item.inventory_number }}</div>
</div>
</div>
<div class="card-body">
<small> {{shortDescription}} </small>
</div>
</div>
<div class="billi-icon-inventory" :class="getActiveStyle">
<font-awesome-icon :icon="getIconName(item.item_type)" color="#eee" />
</div>
</div>
<div class="billi-label"> {{ item.name }} {{ setCounter }}</div>
<div class="billi-number">
<font-awesome-icon icon="tag" color="rgba( 0, 0, 0, 0.5)" /> {{ item.inventory_number }}
</div>
<div class="billi-description"><small> {{shortDescription}} </small></div>
<font-awesome-icon title="Teil eines Sets" v-if="item.set_key" class="billi-icon-setindicator" icon="box-open-full" color="#eee" />
<font-awesome-icon v-if="false" class="billi-icon-newindicator" :class="getActiveStyle" :icon="getIconName(item.item_type)" color="#eee" />
</section>
</transition>
</template>
<script>
import InventoryItem from "@/store/classes/InventoryItem";
import {mapGetters} from "vuex";
export default {
name: "InventoryListItem",
@ -45,15 +42,8 @@ export default {
}
},
computed: {
getIconClass() {
const icons = ["fa-solid", "fa-3x"];
if(this.item.item_type === "camera") icons.push("fa-camera");
else if(this.item.item_type === "set") icons.push("fa-box-open-full");
else if(this.item.item_type === "lens") icons.push("fa-aperture");
else if(this.item.item_type === "accessoire") icons.push("fa-telescope");
else icons.push("fa-circle-question");
return icons.join(' ');
},
...mapGetters(["activeItem","getIconName"]),
getActiveStyle() {
if(this.isActive) return ["billi-primary"] ;
else return ["billi-secondary"];
@ -61,7 +51,7 @@ export default {
isActive() {
const activeItem = this.$store.getters.activeItem;
if(activeItem && activeItem.id === this.item.id) return true;
if(activeItem && activeItem.key === this.item.key) return true;
else return false;
},
shortDescription() {
@ -82,7 +72,7 @@ export default {
methods: {
toggleActive() {
console.log("click toggleActive ")
this.$store.dispatch("setItemActiveState", {id: this.item.id , active:!this.isActive})
this.$store.dispatch("setItemActiveState", {key: this.item.key , active:!this.isActive})
}
}
@ -92,4 +82,61 @@ export default {
<style scoped>
.billi-icon-inventory {
padding: 1em;
border-radius: 0.5rem 0 0 0.5rem;
align-self: stretch;
align-content: center;
grid-area: icon
}
.billi-icon-inventory svg {
height: 40px;
width: 40px;
}
.billi-inventory-card {
display: grid;
margin: 0.5rem;
background-color: white;
border-radius:0.5rem;
grid-template-columns: 70px auto 50px 20px;
grid-template-areas:
"icon label number number"
"icon description iconSet iconNew"
;
}
.billi-number {
grid-area: number;
align-self: center;
align-content: center;
}
.billi-label {
padding-left:1rem;
padding-top:0.5rem;
grid-area: label
}
.billi-description {
padding-left:1rem;
grid-area: description
}
.billi-icon-setindicator {
color: rgba(0,0,0,0.5);
grid-area: iconSet;
align-self: center;
align-content: center;
}
.billi-icon-newindicator {
grid-area: iconNew;
align-self: center;
align-content: center;
}
</style>

View File

@ -11,7 +11,7 @@
mode="out-in"
appear
>
<article class="billi-read-detail" :key="item.id">
<article class="billi-read-detail" :key="item.key">
<aside>
<img src="https://dummyimage.com/600x400/#b2b1b1/fff" class="card-img" />
</aside>

View File

@ -12,7 +12,7 @@
mode="out-in"
appear
>
<article class="billi-read-detail" :key="item.id">
<article class="billi-read-detail" :key="item.key">
<aside>
<img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" />
</aside>
@ -27,7 +27,7 @@
<script>
import { mapGetters} from "vuex";
import Set from "@/store/classes/Set";
import InventorySet from "@/store/classes/InventorySet";
import InventoryItemDescription from "@/components/camera/parts/InventoryItemDescription";
import InventoryItemCollectionInfo from "@/components/camera/parts/InventoryItemCollectionInfo";
import InventoryItemHead from "@/components/camera/parts/InventoryItemHead";
@ -41,7 +41,7 @@ export default {
},
props: {
item: {
type:Set,
type:InventorySet,
required: true
}
},

View File

@ -2,6 +2,14 @@
<div class="card mt-2 billi-bg-transparent">
<div class="card-header billi-bg-50">Sammlung</div>
<div class="card-body billi-bg-transparent">
<div v-if="item.set_key" class="row">
<div class="col-6">
Teil des Sets
</div>
<div class="col-6">
{{ set(item.set_key).name }}
</div>
</div>
<div class="row">
<div class="col-6">
Jahr des Kaufs
@ -55,7 +63,7 @@ import {mapGetters} from "vuex";
export default {
name: "InventoryItemCollectionInfo",
computed: {
...mapGetters(["condition"])
...mapGetters(["condition", "set"])
},
props: {
item: {

View File

@ -1,22 +1,28 @@
<template>
<div class="row">
<div class="col-12">
<div v-if="true" class="card mt-2 billi-bg-transparent">
<div class="card-header billi-bg-50 ">Besonderheiten</div>
<div class="card-body billi-bg-transparent">
<section class="billi-box billi-bg-50">
<div class="billi-box-header ">Besonderheiten</div>
<div class="billi-box-icon ">
<font-awesome-icon @click="toggleEdit" :icon="getIconName" color="#fff" />
</div>
<div v-if="!isEdit" class="billi-box-content billi-bg-transparent">
{{ item.description }}
</div>
</div>
<div class="card mt-2 billi-bg-transparent">
<div class="card-header billi-bg-50">Ausgeführte Arbeiten</div>
<div class="card-body billi-bg-transparent">
<div v-else class="billi-box-content billi-bg-transparent">
<textarea id="description" name="description" v-model="newItem.description"></textarea>
</div>
</section>
<section class="billi-box billi-bg-transparent">
<div class="billi-box-header billi-bg-50">Ausgeführte Arbeiten</div>
<font-awesome-icon class="billi-box-icon billi-bg-50" :icon="getIconName" color="#fff" />
<div v-if="!isEdit" class="billi-box-content billi-bg-transparent">
{{ item.work_done }}
</div>
</div>
<div v-else class="billi-box-content billi-bg-transparent">
<textarea id="work_done" name="work_done" v-model="newItem.work_done"></textarea>
</div>
</div>
</div>
</section>
</template>
<script>
@ -30,10 +36,40 @@ export default {
required: true
}
}
},
data() {
return {
edit: false,
newItem: {id:"",description:"", work_done:""},
}
},
computed: {
isEdit() {
return this.edit;
},
getIconName() {
if (!this.edit) return "pen"
else return "floppy-disk"
}
},
methods: {
toggleEdit() {
this.edit = !this.edit;
if(this.edit) {
this.newItem.key = this.item.key;
this.newItem.description = this.item.description;
this.newItem.work_done = this.item.work_done;
} else {
this.$store.dispatch("storeInventoryDescription", {key:this.newItem.key, description:this.newItem.description});
}
}
}
}
</script>
<style scoped>
.card_body textarea {
width: 100%
}
</style>

View File

@ -1,14 +1,40 @@
export default class BilliDB {
private DB_VERSION: number;
private DB_NAME: string;
DB_VERSION: number;
DB_NAME: string;
constructor(dbName:string, dbVersion:number) {
this.DB_NAME = dbName;
this.DB_VERSION = dbVersion;
}
async initDb(stores: NameKeyStore[]):Promise<IDBOpenDBRequest> {
return new Promise((resolve, reject) => {
const request = window.indexedDB.open(this.DB_NAME, this.DB_VERSION);
request.onerror = e => {
console.log("Error opening db", e);
reject("Error");
}
request.onsuccess =e => {
console.log("connect erfolgreich");
// @ts-ignore
resolve(e.target.result)
}
request.onupgradeneeded = e => {
console.log("onupgradeneeded");
// @ts-ignore
const db = e.target.result;
stores.forEach((store) => {
db.createObjectStore(store.id, {autoIncrement:false, keyPath: store.identifier});
})
}
})
}
async getDb():Promise<IDBOpenDBRequest> {
return new Promise((resolve, reject) => {
@ -21,33 +47,15 @@ export default class BilliDB {
}
request.onsuccess =e => {
console.log("connect erfolgreich");
// @ts-ignore
resolve(e.target.result)
}
request.onupgradeneeded = e => {
console.log("onupgradeneeded");
// @ts-ignore
const db = e.target.result;
const stores =
db.createObjectStore("inventory", {autoIncrement: false, keyPath: 'id'});
db.createObjectStore("sets", {autoIncrement: false, keyPath: 'id'});
db.createObjectStore("conditions", {autoIncrement: false, keyPath: 'key'});
db.createObjectStore("buildtypes", {autoIncrement: false, keyPath: 'key'});
db.createObjectStore("mounts", {autoIncrement: false, keyPath: 'key'});
db.createObjectStore("brands", {autoIncrement: false, keyPath: 'key'});
db.createObjectStore("manufacturers", {autoIncrement: false, keyPath: 'key'});
db.createObjectStore("medias", {autoIncrement: false, keyPath: 'key'});
db.createObjectStore("assets", {autoIncrement: false, keyPath: 'key'});
db.createObjectStore("filtermounts", {autoIncrement: false, keyPath: 'key'});
}
})
}
async saveItem(item, storeId:string) {
const db = await this.getDb();
@ -66,8 +74,8 @@ export default class BilliDB {
reject(e);
};
const store = trans.objectStore(storeId);
store.add(item);
console.log("ITEM.STRING", JSON.stringify(item.getDBVersion()));
store.put(item.getDBVersion());
store.onerror = (e) => {
console.log("Error on Store", e)
@ -122,7 +130,7 @@ export default class BilliDB {
// @ts-ignore
const trans = db.transaction([storeId], 'readonly');
trans.oncomplete = (e) => {
trans.oncomplete = (_) => {
console.log(`${storeId}: oncomplete`, items.length)
resolve(items);
@ -143,7 +151,6 @@ export default class BilliDB {
}
}
store.onerror = (e) => {
console.log("Error on getAll", e)
}
@ -152,7 +159,6 @@ export default class BilliDB {
}
})
}
}

View File

@ -16,6 +16,8 @@ import { faUserSecret,faTelescope,
faToggleOff,
faPlus,
faXmark,
faPen,
faFloppyDisk,
faToggleOn } from "@fortawesome/pro-solid-svg-icons";
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
@ -33,6 +35,8 @@ library.add(faToggleOff);
library.add(faToggleOn);
library.add(faPlus);
library.add(faXmark);
library.add(faPen);
library.add(faFloppyDisk);
const app =
createApp(App);

View File

@ -1,4 +1,4 @@
export const SEED_VERSION = 7;
export const SEED_VERSION = 8;
export const medias = [
{key: "kb", name: "Kleinbild", description: ''},
@ -422,7 +422,7 @@ export const manufacturers = [
export const lenses = [
{
id: "pentax-zoom",
key: "pentax-zoom",
inventory_number: '200',
item_type: "lens",
name: "Pentax Zoom",
@ -444,13 +444,13 @@ export const lenses = [
special: "",
year_of_production: 2000,
year_of_purchase: 1980,
set_key: "pentax"
set_key: "pentax-set"
}
];
export const cameras = [
{
id: "pentax_19",
key: "pentax_19",
inventory_number: '109',
item_type: "camera",
brand_key: "pentax",
@ -473,7 +473,7 @@ export const cameras = [
set_key: "pentax"
},
{
id: "pentax_20",
key: "pentax_20",
inventory_number: '108',
item_type: "camera",
brand_key: "pentax",
@ -494,7 +494,7 @@ export const cameras = [
year_of_purchase: 2022,
},
{
id: "pentax_21",
key: "pentax_21",
inventory_number: '107',
item_type: "camera",
brand_key: "pentax",
@ -515,7 +515,7 @@ export const cameras = [
year_of_purchase: 2022,
},
{
id: "agfa_01",
key: "agfa_01",
inventory_number: '106',
item_type: "camera",
brand_key: "agfa",
@ -536,7 +536,7 @@ export const cameras = [
year_of_purchase: 2000,
},
{
id: "agfa_02",
key: "agfa_02",
inventory_number: '105',
item_type: "camera",
brand_key: "agfa",
@ -557,7 +557,7 @@ export const cameras = [
year_of_purchase: 1980,
},
{
id: "cancon_02",
key: "cancon_02",
inventory_number: '104',
item_type: "camera",
brand_key: "canon",
@ -578,7 +578,7 @@ export const cameras = [
year_of_purchase: 1980,
},
{
id: "agfa_03",
key: "agfa_03",
inventory_number: '103',
item_type: "camera",
brand_key: "agfa",
@ -599,7 +599,7 @@ export const cameras = [
year_of_purchase: 2000,
},
{
id: "agfa_05",
key: "agfa_05",
inventory_number: '102',
item_type: "camera",
brand_key: "agfa",
@ -620,7 +620,7 @@ export const cameras = [
year_of_purchase: 1980,
},
{
id: "cancon_07",
key: "cancon_07",
inventory_number: '101',
item_type: "camera",
brand_key: "canon",
@ -645,13 +645,13 @@ export const cameras = [
export const sets = [
{
id: "minox-set",
key: "minox-set",
inventory_number: '300',
item_type: "set",
name: "minox Set"
},
{
id: "pentax-set",
key: "pentax-set",
inventory_number: 'B-1300',
item_type: "set",
name: "Pentax K30 Set",
@ -664,7 +664,7 @@ export const assets = []
export const accessories = [
{
id: "stat11",
key: "stat11",
inventory_number: '300',
item_type: "accessoire",
name: "Stativ"

View File

@ -2,7 +2,7 @@ import InventoryItem from "@/store/classes/InventoryItem";
export default class Camera extends InventoryItem {
private ADD_FIELDS = ['_light_measure_method', 'mount_key',
private ADD_FIELDS = ['light_measure_method', 'mount_key',
'buildtype_key', 'media_key', 'year_manufactured_from', 'year_manufactured_to']
private _light_measure_method: string;
@ -25,6 +25,36 @@ export default class Camera extends InventoryItem {
}
}
getDBVersion():object {
const obj = {
key: this.key,
item_type: this._item_type,
manufacturer_key: this.manufacturer_key,
brand_key: this.brand_key,
condition_key: this.condition_key,
name: this.name,
description: this.description,
work_done: this.work_done,
special: this.special,
price_purchased: this.price_purchased,
price_historic: this.price_historic,
price_current: this.price_current,
year_of_production: this.year_of_production,
year_of_purchase: this.year_of_purchase,
inventory_number: this.inventory_number,
set_key: this.set_key,
light_measure_method: this._light_measure_method,
mount_key: this._mount_key,
buildtype_key: this._buildtype_key,
media_key: this._media_key,
year_manufactured_from: this._year_manufactured_from,
year_manufactured_to: this._year_manufactured_to,
}
return obj
}
get light_measure_method(): string {
return this._light_measure_method;

View File

@ -1,17 +1,17 @@
import {date} from "yup";
export default class InventoryItem {
private FIELDS = ['manufacturer_key', 'brand_key', 'condition_key',
private FIELDS = ['item_type', 'manufacturer_key', 'brand_key', 'condition_key',
'name', 'description', 'work_done', 'special',
'price_purchased', 'price_historic', 'price_current',
'year_of_production', 'year_of_purchase', 'inventory_number' ];
'year_of_production', 'year_of_purchase', 'inventory_number', 'set_key' ];
private _id: string;
protected _inventory_number: string;
private _key: string;
private _inventory_number: string;
protected _item_type: "camera" | "accessoire" | "lens";
protected _item_type: "camera" | "accessoire" | "lens" | "set";
private _active: boolean;
private _edit: boolean;
@ -32,15 +32,20 @@ export default class InventoryItem {
private _year_of_production: number;
private _year_of_purchase: number;
private _set_key: string
private _set_key: string;
private _created: Date;
private _changed: Date;
constructor( id:string, name:string, values?:Object ) {
this._id = id;
constructor( key:string, name:string, values?:Object ) {
this._key = key;
this._name = name;
this._active = false;
this._edit = false;
this._created = new Date();
this._changed = new Date();
if(typeof values != "undefined") {
for (const field of this.FIELDS) {
@ -49,9 +54,31 @@ export default class InventoryItem {
}
}
getDBVersion():object {
const obj = {
key: this._key,
item_type: this._item_type,
manufacturer_key: this._manufacturer_key,
brand_key: this._brand_key,
condition_key: this._condition_key,
name: this._name,
description: this._description,
work_done: this._work_done,
special: this._special,
price_purchased: this._price_purchased,
price_historic: this._price_historic,
price_current: this._price_current,
year_of_production: this._year_of_production,
year_of_purchase: this._year_of_purchase,
inventory_number: this._inventory_number,
set_key: this._set_key
}
return obj
}
get id(): string {
return this._id;
get key(): string {
return this._key;
}
get active(): boolean {
@ -62,7 +89,7 @@ export default class InventoryItem {
return this._edit;
}
get item_type(): "camera" | "accessoire" | "lens" {
get item_type(): "camera" | "accessoire" | "lens" | "set" {
return this._item_type;
}
@ -179,5 +206,22 @@ export default class InventoryItem {
set set_key(value: string) {
this._set_key = value;
}
get inventory_number(): string {
return this._inventory_number;
}
get created(): Date {
return this._created;
}
get changed(): Date {
return this._changed;
}
set changed(value: Date) {
this._changed = value;
}
}

View File

@ -0,0 +1,46 @@
import InventoryItem from "@/store/classes/InventoryItem";
export default class InventorySet extends InventoryItem {
private ADD_FIELDS = ['inventory_keys'];
private _inventory_keys: string[];
constructor(id:string, name:string, values?:Object) {
super(id, name, values);
this._item_type = "lens";
if(typeof values != "undefined") {
for (const field of this.ADD_FIELDS) {
if(field in values) this["_" + field] = values[field];
}
}
}
getDBVersion():object {
const obj = {
key: this.key,
item_type: this._item_type,
manufacturer_key: this.manufacturer_key,
brand_key: this.brand_key,
condition_key: this.condition_key,
name: this.name,
description: this.description,
work_done: this.work_done,
special: this.special,
price_purchased: this.price_purchased,
price_historic: this.price_historic,
price_current: this.price_current,
year_of_production: this.year_of_production,
year_of_purchase: this.year_of_purchase,
inventory_number: this.inventory_number,
set_key: this.set_key,
inventory_keys: this._inventory_keys
}
return obj
}
get inventory_keys(): string[] {
return this._inventory_keys;
}
}

View File

@ -2,13 +2,14 @@ import InventoryItem from "@/store/classes/InventoryItem";
export default class Lens extends InventoryItem {
private ADD_FIELDS = ['mount_key', 'autofocus', 'aperture_max', 'focal_length_min', 'focal_length_max' ];
private ADD_FIELDS = ['mount_key', 'filtermount_key', 'autofocus', 'aperture_max', 'focal_length_min', 'focal_length_max' ];
private _mount_key: string;
private _autofocus: boolean;
private _aperture_max: number;
private _focal_length_min: number;
private _focal_length_max: number;
private _filtermount_key: string;
constructor(id:string, name:string, values?:Object) {
super(id, name, values);
@ -20,7 +21,34 @@ export default class Lens extends InventoryItem {
}
}
}
getDBVersion():object {
const obj = {
key: this.key,
item_type: this._item_type,
manufacturer_key: this.manufacturer_key,
brand_key: this.brand_key,
condition_key: this.condition_key,
name: this.name,
description: this.description,
work_done: this.work_done,
special: this.special,
price_purchased: this.price_purchased,
price_historic: this.price_historic,
price_current: this.price_current,
year_of_production: this.year_of_production,
year_of_purchase: this.year_of_purchase,
inventory_number: this.inventory_number,
set_key: this.set_key,
mount_key: this._mount_key,
filtermount_key: this._filtermount_key,
autofocus: this._autofocus,
aperture_max: this._aperture_max,
focal_length_min: this._focal_length_min,
focal_length_max: this._focal_length_max,
}
return obj
}
get mount_key(): string {
return this._mount_key;
@ -41,6 +69,11 @@ export default class Lens extends InventoryItem {
get focal_length_max(): number {
return this._focal_length_max;
}
get filtermount_key(): string {
return this._filtermount_key;
}
}

View File

@ -1,45 +0,0 @@
import InventoryItem from "@/store/classes/InventoryItem";
export default class Set extends InventoryItem {
private ADD_FIELDS = ['mount_key', 'autofocus', 'aperture_max', 'focal_length_min', 'focal_length_max' ];
private _mount_key: string;
private _autofocus: boolean;
private _aperture_max: number;
private _focal_length_min: number;
private _focal_length_max: number;
constructor(id:string, name:string, values?:Object) {
super(id, name, values);
this._item_type = "lens";
if(typeof values != "undefined") {
for (const field of this.ADD_FIELDS) {
if(field in values) this["_" + field] = values[field];
}
}
}
get mount_key(): string {
return this._mount_key;
}
get autofocus(): boolean {
return this._autofocus;
}
get aperture_max(): number {
return this._aperture_max;
}
get focal_length_min(): number {
return this._focal_length_min;
}
get focal_length_max(): number {
return this._focal_length_max;
}
}

View File

@ -0,0 +1,6 @@
interface NameKeyStore {
name:string;
id:string;
identifier:string;
type:( "nameKey" | "filestore" | "object")
}

View File

@ -131,7 +131,7 @@ const actions = {
"mounts",
"sets"
];
db.getDb();
db.getDb(stores);
const promises = [];
const seedVersion = localStorage.getItem("SEED_VERSION") || 0;
if (payload.seed && seedVersion < SEED_VERSION) {

View File

@ -6,22 +6,23 @@ import {SEED_VERSION} from "@/seed";
import NameKey from "@/store/classes/NameKey";
import InventoryItem from "@/store/classes/InventoryItem";
import Camera from "@/store/classes/Camera";
import Lens from "@/store/classes/Lens";
import InventorySet from "@/store/classes/InventorySet";
const db = new BilliDB("billibox", 3);
const stores = [
{id: "inventory", name: 'Inventar', type: 'object'},
{id: "brands", name: "Marken", type: "nameKey"},
{id: "conditions", name: "Zustände", type: "nameKey"},
{id: "buildtypes", name: "Bauformen", type: "nameKey"},
{id: "manufacturers", name: "Hersteller", type: "nameKey"},
{id: "medias", name: "Medien", type: "nameKey"},
{id: "mounts", name: "Anschlüsse", type: "nameKey"},
{id: "filtermounts", name: "Filteranschlüsse", type: "nameKey"},
{id: "assets", name: "Dateien", type: "filestore"},
const stores:NameKeyStore[] = [
{id: "inventory", identifier:"key", name: 'Inventar', type: 'object'},
{id: "brands", identifier:"key", name: "Marken", type: "nameKey"},
{id: "conditions", identifier:"key", name: "Zustände", type: "nameKey"},
{id: "buildtypes", identifier:"key", name: "Bauformen", type: "nameKey"},
{id: "manufacturers", identifier:"key", name: "Hersteller", type: "nameKey"},
{id: "medias", identifier:"key", name: "Medien", type: "nameKey"},
{id: "mounts", identifier:"key", name: "Anschlüsse", type: "nameKey"},
{id: "filtermounts", identifier:"key", name: "Filteranschlüsse", type: "nameKey"},
{id: "assets", identifier:"key", name: "Dateien", type: "filestore"},
];
@ -31,6 +32,7 @@ const state = {
inventory: [],
assets:[],
brands: [],
sets: [],
manufacturers: [],
conditions: [],
medias: [],
@ -46,48 +48,52 @@ const getters = {
},
stores: (state?:any) => stores,
store: (state:any) => (id: any) => {
console.log("Query store:", id);
return state[id]
store: (state:any) => (key: any) => {
console.log("Query store:", key);
return state[key]
},
cameras: (state: any) => {
return state.inventory.find((item:InventoryItem) => item.item_type ==="camera");
},
camera: (state: any) => (id: any) => state.inventory.find((item: any) => item.item_type==="camera" &&item.id === id),
camera: (state: any) => (key: any) => state.inventory.find((item: any) => item.item_type==="camera" &&item.key === key),
activeItem: (state: any) => state.inventory.find((item:any) => item.active ),
lenses: (state: any) => {
return state.inventory.find((item:InventoryItem) => item.item_type ==="lens");
},
lens: (state: any) => (id: any) => state.inventory.find((item: any) => item.item_type==="lens" &&item.id === id),
lens: (state: any) => (key: any) => state.inventory.find((item: any) => item.item_type==="lens" &&item.key === key),
accessories: (state: any) => {
return state.inventory.find((item:InventoryItem) => item.item_type ==="accessoire");
},
accessoire: (state: any) => (id: any) => state.inventory.find((item: any) => item.item_type==="accessoire" &&item.id === id),
accessoire: (state: any) => (key: any) => state.inventory.find((item: any) => item.item_type==="accessoire" &&item.key === key),
brands: (state: any) => state.brands,
brand: (state: any) => (id: any) => state.brands.find((brand: any) => brand.key === id),
brand: (state: any) => (key: any) => state.brands.find((brand: any) => brand.key === key),
manufacturers: (state: any) => state.manufacturers,
manufacturer: (state: any) => (id: any) => state.manufacturers.find((item: any) => item.key === id),
manufacturer: (state: any) => (key: any) => state.manufacturers.find((item: any) => item.key === key),
mounts: (state: any) => state.mounts,
mount: (state: any) => (id: any) => state.mounts.find((item: any) => item.key === id),
mount: (state: any) => (key: any) => state.mounts.find((item: any) => item.key === key),
filtermounts: (state: any) => state.filtermounts,
filtermount: (state: any) => (id: any) => state.filtermounts.find((item: any) => item.key === id),
filtermount: (state: any) => (key: any) => state.filtermounts.find((item: any) => item.key === key),
conditions: (state: any) => state.conditions,
condition: (state: any) => (id: any) => state.conditions.find((condition: any) => condition.key === id),
condition: (state: any) => (key: any) => state.conditions.find((condition: any) => condition.key === key),
sets: (state: any) => state.inventory.find((item:InventoryItem) => item.item_type === "set" ),
set: (state: any) => (key: any) => state.inventory.find((item: any) => item.key === key),
medias: (state: any) => state.medias,
media: (state: any) => (id: any) => state.medias.find((media: any) => media.key === id),
media: (state: any) => (key: any) => state.medias.find((media: any) => media.key === key),
buildtypes: (state: any) => state.buildtypes,
buildtype: (state: any) => (id: any) => state.buildtypes.find((buildtype: any) => buildtype.key === id),
buildtype: (state: any) => (key: any) => state.buildtypes.find((buildtype: any) => buildtype.key === key),
isInitialized: (state:any ) => state.isInitialized,
@ -110,17 +116,28 @@ const mutations = {
setInventory(state:any, payload:any) {
console.log("mutation.setInventory");
payload.map((item:InventoryItem) => {
state.inventory.push({
...item,
edit: false,
active: false
})
let newInventoryItem:InventoryItem;
switch(item.item_type) {
case "set":
newInventoryItem = new InventorySet(item.key, item.name, item);
break;
case "camera":
newInventoryItem = new Camera(item.key, item.name, item);
break;
case "lens":
newInventoryItem = new Lens(item.key, item.name, item);
break;
default:
newInventoryItem = new InventoryItem(item.key, item.name, item);
}
state.inventory.push(newInventoryItem)
})
console.log("STORE", state.inventory.length);
},
storeCamera(sate:any, payload:any) {
const objCamera = state.inventory.find((camera:Camera) => camera.id === payload.id);
const objCamera = state.inventory.find((camera:Camera) => camera.key === payload.key);
if(objCamera) {
payload.edit =false;
objCamera.name = payload.name;
@ -128,7 +145,7 @@ const mutations = {
payload.edit = false;
state.inventory.push(payload);
}
return payload.id;
return payload.key;
},
storeNameKey(state:any, payload:any) {
@ -145,17 +162,17 @@ const mutations = {
},
setItemActiveState(state:any, payload:any) {
setItemActiveState(state:any, payload:any) {
console.log("mutation.setItemActiveState");
state.inventory.map((item:InventoryItem) => item.active= false);
const objItem = state.inventory.find((itemId:InventoryItem) => itemId.id === payload.id);
const objItem = state.inventory.find((itemId:InventoryItem) => itemId.key === payload.key);
objItem.active = payload.active;
console.log("Result of mutation", objItem);
},
setItemEditState(state:any, payload:any) {
state.inventory.map((item:InventoryItem) => item.edit= false);
const objItem = state.inventory.find((camera:any) => camera.id === payload.id);
const objItem = state.inventory.find((camera:any) => camera.key === payload.key);
objItem.edit = payload.edit;
},
@ -166,7 +183,23 @@ const mutations = {
setInitialized(state:any, payload:boolean) {
state.isInitialized = payload;
},
storeInventoryDescription(state:any, payload:any) {
const objItem = <InventoryItem>state.inventory.find((item:InventoryItem) => item.key === payload.key);
objItem.description = payload.description;
objItem.changed = new Date();
db.saveItem(objItem , "inventory").then( (res) => {
console.log("DB-Save resolved", res )}
).catch((e)=> console.log(e));
}
};
const actions = {
@ -212,38 +245,43 @@ const actions = {
},
setItemActiveState(context:ActionContext<any, any>, payload:any) {
context.commit("setItemActiveState", {id: payload.id, active:payload.active});
context.commit("setItemActiveState", {key: payload.key, active:payload.active});
},
setItemEditState(context:ActionContext<any, any>, payload:any) {
console.log("action.setItemEditState", payload)
context.commit("setItemEditState", {id: payload.id, edit:payload.edit});
context.commit("setItemEditState", {key: payload.key, edit:payload.edit});
},
storeCamera(context:ActionContext<any, any>, payload:any) {
// console.log("action.storeCamera", payload)
if(!payload.id) payload.id = uuidv4();
//console.log(" ... with id ", payload.id);
if(!payload.key) payload.key = uuidv4();
//console.log(" ... with key ", payload.key);
//console.log("Try to save to indexDB");
db.saveItem(payload , "inventory").then( (res) => {
console.log("DB-Save resolved", res )}
)
).catch((e)=> console.log(e));
context.commit("storeCamera", payload);
context.commit("setCameraActiveState", {cameraId:payload.id, active:true})
context.commit("setCameraActiveState", {cameraId:payload.key, active:true})
},
storeInventoryDescription(context:ActionContext<any, any>, payload:any) {
context.commit("storeInventoryDescription", payload);
},
loadDataFromLocalDB(context:ActionContext<any, any>) {
console.log("action.loadDataFromLocalDB")
const storeActions = [];
for (const store of stores) {
if(store.type !="nameKey") {
if(store.type =="object") {
storeActions.push(context.dispatch("fetchInventory"));
}
else {
@ -258,7 +296,7 @@ const actions = {
initialize(context:ActionContext<any, any>, payload) {
db.getDb().then( () => {
db.initDb(stores).then( () => {
const promises = [];
const seedVersion = localStorage.getItem("SEED_VERSION") || 0;
if(payload.seed && seedVersion < SEED_VERSION ) {