toking
/
billibox-vue
1
0
Fork 0
Code Issues 4 Pull Requests Projects Releases Wiki Activity

change id to key, save description

This commit is contained in:
Thomas Mack 2022-04-03 13:53:17 +02:00
parent e528baa5b8
commit ebc08ce2d6
4 changed files with 198 additions and 50 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

22
src/App.vue
View File

@ -83,7 +83,6 @@ export default class App extends Vue {}
} }
.billi-bg-transparent { .billi-bg-transparent {
background-color: white;
background-color: rgb(255 255 255 / 40%); background-color: rgb(255 255 255 / 40%);
} }
@ -143,14 +142,16 @@ export default class App extends Vue {}
.billi-box-header { .billi-box-header {
padding:0.5rem; padding:0.5rem;
border-radius: 0.5rem 0 0 0;
grid-area: header; grid-area: header;
} }
.billi-box-icon { .billi-box-icon {
padding-right: 0.5rem; padding: 0.5rem;
grid-area: icon; grid-area: icon;
border-radius: 0 0.5rem 0 0;
align-self: center; align-self: center;
justify-self: end; justify-self: stretch;
} }
.billi-box-icon svg { .billi-box-icon svg {
@ -158,7 +159,22 @@ export default class App extends Vue {}
width: 2rem; width: 2rem;
} }
.billi-box-content { .billi-box-content {
padding: 1rem;
grid-area: billi-ct grid-area: billi-ct
} }
.billi-box-content textarea {
width:100%;
}
.billi-row-50-50 {
display:grid;
grid-template-columns: 50% 50%;
}
.billi-label {
font-weight: bold;
}
</style> </style>

24
src/components/camera/CameraReadDetail.vue
View File

@ -3,7 +3,7 @@
enter-active-class="animate__animated animate__fadeIn" enter-active-class="animate__animated animate__fadeIn"
mode="out-in" mode="out-in"
appear> appear>
<font-awesome-icon class="billi-icon-as-bg" :icon="getIconName(item.item_type)" color="#eee" size="xxl"/> <font-awesome-icon class="billi-icon-as-bg" :icon="getIconName(item.item_type)" color="#eee"/>
</transition> </transition>
@ -17,10 +17,11 @@
<img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" /> <img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" />
</aside> </aside>
<section> <section>
<button @click="toggleEdit">Bearbeiten</button>
<InventoryItemHead :item="item"></InventoryItemHead> <InventoryItemHead :item="item"></InventoryItemHead>
<CameraTechnicalDetail :item="item"></CameraTechnicalDetail> <CameraTechnicalDetail :item="item"></CameraTechnicalDetail>
<InventoryItemCollectionInfo :item="item"></InventoryItemCollectionInfo> <InventoryItemCollectionInfo :globalEdit="globalEdit" :item="item"></InventoryItemCollectionInfo>
<InventoryItemDescription :item="item"></InventoryItemDescription> <InventoryItemDescription :globalEdit="globalEdit" :item="item" @changedDescription="handleChangeEvent"></InventoryItemDescription>
</section> </section>
</article> </article>
</transition> </transition>
@ -47,6 +48,12 @@ export default {
type:Camera, type:Camera,
required: true required: true
} }
},
data() {
return {
globalEdit: false,
newCamera: {},
}
}, },
computed: { computed: {
...mapGetters(["activeItem","getIconName"]), ...mapGetters(["activeItem","getIconName"]),
@ -56,6 +63,17 @@ export default {
editCamera() { editCamera() {
this.$store.dispatch("setCameraEditState", {cameraId:this.activeCamera.id, edit:true}) this.$store.dispatch("setCameraEditState", {cameraId:this.activeCamera.id, edit:true})
}, },
toggleEdit() {
this.globalEdit = !this.globalEdit;
if (this.globalEdit) {
this.newCamera = this.item;
}
},
handleChangeEvent(value) {
console.log("handleChangedDescription" , value)
this.newCamera[value.field] = value.value.trim();
console.log("newCamera", this.newCamera);
}
} }
} }

136
src/components/camera/parts/InventoryItemCollectionInfo.vue
View File

@ -1,59 +1,119 @@
<template> <template>
<div class="card mt-2 billi-bg-transparent">
<div class="card-header billi-bg-50">Sammlung</div>
<div class="card-body billi-bg-transparent"> <section class="billi-box">
<div v-if="item.set_key" class="row"> <div class="billi-box-header billi-bg-50">Sammlung</div>
<div class="col-6"> <div class="billi-box-icon billi-bg-50">
<font-awesome-icon @click="toggleEdit" :icon="getIconName" color="#fff" />
</div>
<div v-if="!isEdit" class="billi-box-content billi-bg-transparent">
<div v-if="item.set_key" class="billi-row-50-50">
<div class="billi-label">
Teil des Sets Teil des Sets
</div> </div>
<div class="col-6"> <div class="billi-value">
{{ set(item.set_key).name }} {{ set(item.set_key).name }}
</div> </div>
</div> </div>
<div class="row"> <div class="billi-row-50-50">
<div class="col-6"> <div class="billi-label">
Jahr des Kaufs Jahr des Kaufs
</div> </div>
<div class="col-6"> <div class="billi-value">
{{ item.year_of_purchase }} {{ item.year_of_purchase }}
</div> </div>
</div> </div>
<div v-if="item.condition_key" class="row"> <div v-if="item.condition_key" class="billi-row-50-50">
<div class="col-6"> <div class="billi-label">
Zustand Zustand
</div> </div>
<div class="col-6"> <div class="billi-value">
{{ condition(item.condition_key).name }} {{ condition(item.condition_key).name }}
</div> </div>
</div> </div>
<div class="row"> <div class="billi-row-50-50">
<div class="col-6"> <div class="billi-label">
Kaufpreis Kaufpreis
</div> </div>
<div class="col-6"> <div class="billi-value">
{{ item.price_purchased }} € {{ item.price_purchased }} €
</div> </div>
</div> </div>
<div class="row"> <div class="billi-row-50-50">
<div class="col-6"> <div class="billi-label">
Zeitwert Zeitwert
</div> </div>
<div class="col-6"> <div class="billi-value">
{{ item.price_purchased }} € {{ item.price_purchased }} €
</div> </div>
</div> </div>
<div class="row"> <div class="billi-row-50-50">
<div class="col-6"> <div class="billi-label">
hist. Kaufpreis hist. Kaufpreis
</div> </div>
<div class="col-6"> <div class="billi-value">
{{ item.price_historic }} {{ item.price_historic }}
</div> </div>
</div> </div>
</div> </div>
</div>
<div v-else class="billi-box-content billi-bg-transparent">
<div v-if="item.set_key" class="billi-row-50-50">
<div class="billi-label">
Teil des Sets
</div>
<div class="billi-value">
{{ set(item.set_key).name }}
</div>
</div>
<div class="billi-row-50-50">
<div class="billi-label">
Jahr des Kaufs
</div>
<div class="billi-value">
<input name="year_of_purchase" id="year_of_purchase" v-model="newItem.year_of_purchase" type="number"/>
</div>
</div>
<div v-if="item.condition_key" class="billi-row-50-50">
<div class="billi-label">
Zustand
</div>
<div class="billi-value">
{{ condition(item.condition_key).name }}
</div>
</div>
<div class="billi-row-50-50">
<div class="billi-label">
Kaufpreis
</div>
<div class="billi-value">
<input name="price_purchased" id="price_purchased" v-model="newItem.price_purchased" type="money"/>
</div>
</div>
<div class="billi-row-50-50">
<div class="billi-label">
Zeitwert
</div>
<div class="billi-value">
<input name="price_current" id="price_current" v-model="newItem.price_current" type="money"/>
</div>
</div>
<div class="billi-row-50-50">
<div class="billi-label">
hist. Kaufpreis
</div>
<div class="billi-value">
<input name="price_historic" id="price_historic" v-model="newItem.price_historic" type="money"/>
</div>
</div>
</div>
</section>
</template> </template>
<script> <script>
@ -62,16 +122,40 @@ import {mapGetters} from "vuex";
export default { export default {
name: "InventoryItemCollectionInfo", name: "InventoryItemCollectionInfo",
computed: {
...mapGetters(["condition", "set"])
},
props: { props: {
item: { item: {
type: InventoryItem, type: InventoryItem,
required: true required: true
},
globalEdit: {
type: Boolean,
required: false,
default: false
} }
} },
data() {
return {
newItem: {
year_of_purchase: this.item.year_of_purchase,
price_current: this.item.price_current,
price_purchased: this.item.price_purchased,
price_historic: this.item.price_historic,
condition_key: this.item.condition_key
}
}
},
computed: {
...mapGetters(["condition", "set"]),
getIconName() {
if (!this.edit) return "pen"
else return "floppy-disk"
},
isEdit() {
return this.edit || this.globalEdit;
},
},
} }
</script> </script>

66
src/components/camera/parts/InventoryItemDescription.vue
View File

@ -1,27 +1,31 @@
<template> <template>
<section class="billi-box billi-bg-50"> <section>
<div class="billi-box-header ">Besonderheiten</div> <section class="billi-box">
<div class="billi-box-icon "> <div class="billi-box-header billi-bg-50">Besonderheiten</div>
<font-awesome-icon @click="toggleEdit" :icon="getIconName" color="#fff" /> <div class="billi-box-icon billi-bg-50">
<font-awesome-icon @click="toggleEdit" :icon="getIconName" color="#fff" />
</div> </div>
<div v-if="!isEdit" class="billi-box-content billi-bg-transparent"> <div v-if="!isEdit && !globalEdit" class="billi-box-content billi-bg-transparent">
{{ item.description }} {{ item.description }}
</div> </div>
<div v-else class="billi-box-content billi-bg-transparent"> <div v-else class="billi-box-content billi-bg-transparent">
<textarea id="description" name="description" v-model="newItem.description"></textarea> <textarea id="description" name="description" v-model="newItem.description" @change="changeHandler('description')"></textarea>
</div> </div>
</section> </section>
<section class="billi-box billi-bg-transparent"> <section class="billi-box ">
<div class="billi-box-header billi-bg-50">Ausgeführte Arbeiten</div> <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 class="billi-box-icon billi-bg-50">
<div v-if="!isEdit" class="billi-box-content billi-bg-transparent"> <font-awesome-icon @click="toggleEdit" :icon="getIconName" color="#fff" />
</div>
<div v-if="!isEdit && !globalEdit" class="billi-box-content billi-bg-transparent">
{{ item.work_done }} {{ item.work_done }}
</div> </div>
<div v-else class="billi-box-content billi-bg-transparent"> <div v-else class="billi-box-content billi-bg-transparent">
<textarea id="work_done" name="work_done" v-model="newItem.work_done"></textarea> <textarea id="work_done" name="work_done" v-model="newItem.work_done"
@change="changeHandler('work_done')"></textarea>
</div> </div>
</section>
</section> </section>
</template> </template>
@ -34,18 +38,28 @@ export default {
item: { item: {
type: InventoryItem, type: InventoryItem,
required: true required: true
},
emits: {
changedDescription: (payload) => {
if(payload.field && payload.value) return true;
else return false;
}
},
globalEdit: {
type: Boolean,
required: false,
default: false
} }
}, },
data() { data() {
return { return {
edit: false, edit: false,
newItem: {id:"",description:"", work_done:""}, newItem: {id:"",description:this.item.description, work_done:this.item.work_done},
} }
}, },
computed: { computed: {
isEdit() { isEdit() {
return this.edit; return this.edit || this.globalEdit;
}, },
getIconName() { getIconName() {
if (!this.edit) return "pen" if (!this.edit) return "pen"
@ -60,9 +74,25 @@ export default {
this.newItem.description = this.item.description; this.newItem.description = this.item.description;
this.newItem.work_done = this.item.work_done; this.newItem.work_done = this.item.work_done;
} else { } else {
this.$store.dispatch("storeInventoryDescription", {key:this.newItem.key, description:this.newItem.description});
if(this.newItem.description.trim() != this.item.description) {
this.$store.dispatch("storeInventoryDescription", {
key: this.newItem.key,
description: this.newItem.description.trim()
});
}
} }
},
changeHandler(field) {
console.log("changeHanlder", field);
if(field === "description") {
console.log("changeHandler emitting");
this.$emit("changedDescription", {field:'description', value: this.newItem.description});
} else if(field === "work_done") {
console.log("changeHandler emitting");
this.$emit("changedDescription", {field:'work_done', value: this.newItem.work_done});
}
} }
} }
} }