Press n or j to go to the next uncovered block, b, p or k for the previous block.
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 | <template>
<div>
<div class="svg-container cursor-pointer" data-bs-toggle="modal" :data-bs-target="`#modalEdit${modalSpecs['fields']['id']}`">
<svg xmlns="http://www.w3.org/2000/svg" fill="black" class="bi bi-pencil-fill icon" viewBox="0 0 16 16">
<path
d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708l-3-3zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207l6.5-6.5zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.499.499 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11l.178-.178z"/>
</svg>
</div>
<div class="modal fade" :id="`modalEdit${modalSpecs['fields']['id']}`" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1" :aria-labelledby="`modalEditLabel${modalSpecs['fields']['id']}`" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" :id="`modalEditLabel${modalSpecs['fields']['id']}`">{{ `Editare ${this.modalSpecs['type']}` }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<form>
<div class="modal-body">
<div v-for="(field, index) in Object.keys(info).filter(elem => elem !== 'id')" :key="index" class="d-flex flex-column" :class="{'full-item': index === 2, 'half-item': index !== 2}">
<label class="text-start" :for="`${field + modalSpecs['fields']['id']}`">{{ `${field[0].toUpperCase() + field.substring(1,)}:` }}</label>
<input
:id="`${field + modalSpecs['fields']['id']}`"
v-model="info[field]"
:placeholder="`${field[0].toUpperCase() + field.substring(1,)}: `">
</div>
</div>
</form>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" @click="sendEdit">Salveaza</button>
<button type="button" class="btn btn-primary" data-bs-dismiss="modal">Inchide</button>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import Pagination from "../pagination";
export default {
components: {Pagination},
props: ['modalSpecs'],
data() {
return {
info: {
...this.modalSpecs['fields']
}
}
},
methods: {
/**
* Sends the edited fields
* @see sendEdit
* @return void
*/
sendEdit() {
console.log(this.info);
}
}
}
</script>
<style lang="scss" scoped>
.cursor-pointer {
cursor: pointer;
}
.svg-container {
width: 1.1rem;
}
.btn-close {
opacity: 1;
width: 2rem;
height: 2rem;
background-size: 2rem 2rem;
}
.modal-header {
background-color: #85f680;
}
.modal-body {
display: grid;
grid-column-gap: 1rem;
grid-row-gap: 1rem;
grid-template-columns: repeat(6, 1fr);
}
.half-item {
grid-column: span 3;
}
.third-item {
grid-column: span 2;
}
.full-item {
grid-column: span 6;
}
</style>
|