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

editpane before drag and drop

This commit is contained in:
Thomas Mack 2022-04-14 15:18:49 +02:00
parent ebc08ce2d6
commit ba8b8b94cf
5 changed files with 82 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
src/App.vue
View File

@ -175,6 +175,17 @@ export default class App extends Vue {}
.billi-label {
font-weight: bold;
}
.billi-value {
padding-top: 0.5rem;
justify-self: stretch;
font-weight: bold;
}
.billi-value input,
.billi-value select{
width: 100%
}
</style>

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

@ -20,7 +20,7 @@
<button @click="toggleEdit">Bearbeiten</button>
<InventoryItemHead :item="item"></InventoryItemHead>
<CameraTechnicalDetail :item="item"></CameraTechnicalDetail>
<InventoryItemCollectionInfo :globalEdit="globalEdit" :item="item"></InventoryItemCollectionInfo>
<InventoryItemCollectionInfo :globalEdit="globalEdit" :item="item" @changedInput="handleChangeEvent"></InventoryItemCollectionInfo>
<InventoryItemDescription :globalEdit="globalEdit" :item="item" @changedDescription="handleChangeEvent"></InventoryItemDescription>
</section>
</article>
@ -71,7 +71,8 @@ export default {
},
handleChangeEvent(value) {
console.log("handleChangedDescription" , value)
this.newCamera[value.field] = value.value.trim();
if(typeof value.value =="string") this.newCamera[value.field] = value.value.trim();
else this.newCamera[value.field] = value.value
console.log("newCamera", this.newCamera);
}

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

@ -64,7 +64,7 @@
<div class="billi-label">
Teil des Sets
</div>
<div class="billi-value">
<div class="billi-value form-group">
{{ set(item.set_key).name }}
</div>
</div>
@ -72,8 +72,11 @@
<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 class="billi-value form-group">
<input name="year_of_purchase" id="year_of_purchase"
v-model="newItem.year_of_purchase"
@change="changeHandler('year_of_purchase')"
type="number"/>
</div>
</div>
<div v-if="item.condition_key" class="billi-row-50-50">
@ -81,15 +84,25 @@
Zustand
</div>
<div class="billi-value">
{{ condition(item.condition_key).name }}
<select v-model="newItem.condition_key" >
<option
v-for="condition in conditions"
:value="condition.key"
:key="condition.key"
@change="changeHandler('condition_key')"
>{{condition.name}}</option>
</select>
</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 class="billi-value form-group">
<input name="price_purchased" id="price_purchased"
v-model="newItem.price_purchased"
@change="changeHandler('price_purchased')"
type="number"/>
</div>
</div>
<div class="billi-row-50-50">
@ -97,7 +110,10 @@
Zeitwert
</div>
<div class="billi-value">
<input name="price_current" id="price_current" v-model="newItem.price_current" type="money"/>
<input name="price_current" id="price_current"
v-model="newItem.price_current"
@change="changeHandler('price_current')"
type="number"/>
</div>
</div>
@ -106,7 +122,10 @@
hist. Kaufpreis
</div>
<div class="billi-value">
<input name="price_historic" id="price_historic" v-model="newItem.price_historic" type="money"/>
<input name="price_historic" id="price_historic"
v-model="newItem.price_historic"
@change="changeHandler('price_historic')"
type="number"/>
</div>
</div>
@ -134,8 +153,15 @@ export default {
default: false
}
},
emits: {
changedInput: (payload) => {
if(payload.field && payload.value) return true;
else return false;
}
},
data() {
return {
edit: false,
newItem: {
year_of_purchase: this.item.year_of_purchase,
price_current: this.item.price_current,
@ -147,7 +173,7 @@ export default {
},
computed: {
...mapGetters(["condition", "set"]),
...mapGetters(["condition", "conditions", "set"]),
getIconName() {
if (!this.edit) return "pen"
else return "floppy-disk"
@ -156,6 +182,30 @@ export default {
return this.edit || this.globalEdit;
},
},
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 {
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);
this.$emit("changedInput", {field:field, value: this.newItem[field]});
}
}
}
</script>

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

@ -39,18 +39,18 @@ export default {
type: InventoryItem,
required: true
},
emits: {
changedDescription: (payload) => {
if(payload.field && payload.value) return true;
else return false;
}
},
globalEdit: {
type: Boolean,
required: false,
default: false
}
},
emits: {
changedDescription: (payload) => {
if(payload.field && payload.value) return true;
else return false;
}
},
data() {
return {
edit: false,

6
src/store/classes/InventoryItem.ts
View File

@ -179,15 +179,15 @@ export default class InventoryItem {
}
set price_purchased(value: number) {
this._price_purchased = value;
this._price_purchased = Number(value);
}
set price_historic(value: number) {
this._price_historic = value;
this._price_historic = Number(value);
}
set price_current(value: number) {
this._price_current = value;
this._price_current = Number(value);
}
set year_of_production(value: number) {