change id to key, save description
This commit is contained in:
parent
e528baa5b8
commit
ebc08ce2d6
22
src/App.vue
22
src/App.vue
|
|
@ -83,7 +83,6 @@ export default class App extends Vue {}
|
|||
}
|
||||
|
||||
.billi-bg-transparent {
|
||||
background-color: white;
|
||||
background-color: rgb(255 255 255 / 40%);
|
||||
}
|
||||
|
||||
|
|
@ -143,14 +142,16 @@ export default class App extends Vue {}
|
|||
|
||||
.billi-box-header {
|
||||
padding:0.5rem;
|
||||
border-radius: 0.5rem 0 0 0;
|
||||
grid-area: header;
|
||||
}
|
||||
|
||||
.billi-box-icon {
|
||||
padding-right: 0.5rem;
|
||||
padding: 0.5rem;
|
||||
grid-area: icon;
|
||||
border-radius: 0 0.5rem 0 0;
|
||||
align-self: center;
|
||||
justify-self: end;
|
||||
justify-self: stretch;
|
||||
}
|
||||
|
||||
.billi-box-icon svg {
|
||||
|
|
@ -158,7 +159,22 @@ export default class App extends Vue {}
|
|||
width: 2rem;
|
||||
}
|
||||
.billi-box-content {
|
||||
padding: 1rem;
|
||||
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>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
enter-active-class="animate__animated animate__fadeIn"
|
||||
mode="out-in"
|
||||
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>
|
||||
|
||||
|
||||
|
|
@ -17,10 +17,11 @@
|
|||
<img src="https://dummyimage.com/600x400/b2b1b1/fff" class="card-img" />
|
||||
</aside>
|
||||
<section>
|
||||
<button @click="toggleEdit">Bearbeiten</button>
|
||||
<InventoryItemHead :item="item"></InventoryItemHead>
|
||||
<CameraTechnicalDetail :item="item"></CameraTechnicalDetail>
|
||||
<InventoryItemCollectionInfo :item="item"></InventoryItemCollectionInfo>
|
||||
<InventoryItemDescription :item="item"></InventoryItemDescription>
|
||||
<InventoryItemCollectionInfo :globalEdit="globalEdit" :item="item"></InventoryItemCollectionInfo>
|
||||
<InventoryItemDescription :globalEdit="globalEdit" :item="item" @changedDescription="handleChangeEvent"></InventoryItemDescription>
|
||||
</section>
|
||||
</article>
|
||||
</transition>
|
||||
|
|
@ -47,6 +48,12 @@ export default {
|
|||
type:Camera,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
globalEdit: false,
|
||||
newCamera: {},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
...mapGetters(["activeItem","getIconName"]),
|
||||
|
|
@ -56,6 +63,17 @@ export default {
|
|||
editCamera() {
|
||||
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);
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,59 +1,119 @@
|
|||
<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">
|
||||
<div v-if="item.set_key" class="row">
|
||||
<div class="col-6">
|
||||
|
||||
|
||||
<section class="billi-box">
|
||||
<div class="billi-box-header billi-bg-50">Sammlung</div>
|
||||
<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
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="billi-value">
|
||||
{{ set(item.set_key).name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="billi-row-50-50">
|
||||
<div class="billi-label">
|
||||
Jahr des Kaufs
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="billi-value">
|
||||
{{ item.year_of_purchase }}
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="item.condition_key" class="row">
|
||||
<div class="col-6">
|
||||
<div v-if="item.condition_key" class="billi-row-50-50">
|
||||
<div class="billi-label">
|
||||
Zustand
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="billi-value">
|
||||
{{ condition(item.condition_key).name }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="billi-row-50-50">
|
||||
<div class="billi-label">
|
||||
Kaufpreis
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="billi-value">
|
||||
{{ item.price_purchased }} €
|
||||
</div>
|
||||
</div>
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="billi-row-50-50">
|
||||
<div class="billi-label">
|
||||
Zeitwert
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="billi-value">
|
||||
{{ item.price_purchased }} €
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="row">
|
||||
<div class="col-6">
|
||||
<div class="billi-row-50-50">
|
||||
<div class="billi-label">
|
||||
hist. Kaufpreis
|
||||
</div>
|
||||
<div class="col-6">
|
||||
<div class="billi-value">
|
||||
{{ item.price_historic }}
|
||||
</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>
|
||||
|
||||
<script>
|
||||
|
|
@ -62,16 +122,40 @@ import {mapGetters} from "vuex";
|
|||
|
||||
export default {
|
||||
name: "InventoryItemCollectionInfo",
|
||||
computed: {
|
||||
...mapGetters(["condition", "set"])
|
||||
},
|
||||
props: {
|
||||
item: {
|
||||
type: InventoryItem,
|
||||
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>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,27 +1,31 @@
|
|||
<template>
|
||||
<section class="billi-box billi-bg-50">
|
||||
<div class="billi-box-header ">Besonderheiten</div>
|
||||
<div class="billi-box-icon ">
|
||||
<section>
|
||||
<section class="billi-box">
|
||||
<div class="billi-box-header billi-bg-50">Besonderheiten</div>
|
||||
<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="!isEdit && !globalEdit" class="billi-box-content billi-bg-transparent">
|
||||
{{ item.description }}
|
||||
</div>
|
||||
<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>
|
||||
</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">
|
||||
<section class="billi-box ">
|
||||
<div class="billi-box-header billi-bg-50 ">Ausgeführte Arbeiten</div>
|
||||
<div class="billi-box-icon billi-bg-50">
|
||||
<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 }}
|
||||
</div>
|
||||
<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>
|
||||
|
||||
|
||||
</section>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
|
|
@ -34,18 +38,28 @@ export default {
|
|||
item: {
|
||||
type: InventoryItem,
|
||||
required: true
|
||||
|
||||
},
|
||||
emits: {
|
||||
changedDescription: (payload) => {
|
||||
if(payload.field && payload.value) return true;
|
||||
else return false;
|
||||
}
|
||||
},
|
||||
globalEdit: {
|
||||
type: Boolean,
|
||||
required: false,
|
||||
default: false
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
edit: false,
|
||||
newItem: {id:"",description:"", work_done:""},
|
||||
newItem: {id:"",description:this.item.description, work_done:this.item.work_done},
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
isEdit() {
|
||||
return this.edit;
|
||||
return this.edit || this.globalEdit;
|
||||
},
|
||||
getIconName() {
|
||||
if (!this.edit) return "pen"
|
||||
|
|
@ -60,9 +74,25 @@ export default {
|
|||
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});
|
||||
|
||||
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});
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue