Skip to content

Commit

Permalink
Update App.vue
Browse files Browse the repository at this point in the history
  • Loading branch information
@knoxydev
knoxydev authored Sep 20, 2021
1 parent d7c7815 commit a82a6a9
Showing 1 changed file with 71 additions and 88 deletions.
159 changes: 71 additions & 88 deletions src/App.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,7 @@
<div id="main-block">
<div id="all_data_main_block">
<br>

<button id="show-add-blc-btn" @click="showAddBlock()">Add Data</button>

<br>

<my-add-block v-model:show="add_block_visible">
Expand All @@ -31,36 +29,8 @@

<br><br>

<div id="edit_data_block">
<div>Edit data to database</div>

<my-input
v-model="edit_inp_data_id"
type="number"
placeholder="Enter ID" /><br>

<my-input
v-model="edit_inp_data_name"
type="text"
placeholder="Enter new Name" /><br>

<my-input
v-model="edit_inp_data_address"
type="text"
placeholder="Enter new Address" /><br>

<my-input
v-model="edit_inp_data_cost"
type="number"
placeholder="Enter new Cost" /><br>

<button @click="editDataBtn()"><b>Edit</b></button>
</div>

<br><br>

<div id="data-block">
<div id="all_data_blc_title">All Data ({{this.base.length}})</div><br>
<div id="all_data_blc_title">All Data ({{this.base.length}}) | Page {{this.pageInt}}</div><br>
<div id="all_data_len_btn_block">
<button id="all_data_len_btn" @click="pagiButtons($event)" v-for="item in this.pagiDB.length">{{item}}</button>
</div><br>
Expand All @@ -72,13 +42,36 @@
<li>Name: <b>{{item.name_uz}}</b></li>
<li>Cost: <b>{{item.cost}}</b></li>
<li>Product type ID: <b>{{item.product_type_id}}</b></li>
</ul><br>
</ul><br><br>

<button @click="showEditBlock($event)">Edit<span>{{item.id}}</span></button>
<button @click="deleteItemBtn($event)">Delete<span>{{item.id}}</span></button>

<my-edit-block v-model:show="edit_block_visible">
<div>Edit data to database</div>

<my-input
v-model="edit_inp_data_name"
type="text"
placeholder="Enter new Name" /><br>

<my-input
v-model="edit_inp_data_address"
type="text"
placeholder="Enter new Address" /><br>

<my-input
v-model="edit_inp_data_cost"
type="number"
placeholder="Enter new Cost" /><br>

<button id="edit-data-btn" @click="editDataBtn()"><b>Edit</b></button>
</my-edit-block>

</div>
</div><br><br>
</div>

</div>
<br>
</div>

</template>
Expand All @@ -91,7 +84,6 @@ export default {
pagination: [],
pagiDB: [],
pageInt: Number(1),
lastBtn: Number(0),
inp_data_name: String(""),
inp_data_address: String(""),
Expand All @@ -103,11 +95,16 @@ export default {
edit_inp_data_address: String(""),
edit_inp_data_cost: Number(0),
add_block_visible: Boolean(false)
add_block_visible: Boolean(false),
edit_block_visible: Boolean(false)
}
},
methods: {
showAddBlock() {this.add_block_visible = true;},
showEditBlock(event) {
this.edit_block_visible = true;
this.edit_inp_data_id = Number(event.target.childNodes[1].innerHTML);
},
createPagination() {
let array = this.base;
let size = 3;
Expand All @@ -129,12 +126,6 @@ export default {
pagiButtons(event) {
this.pageInt = Number(event.target.innerHTML);
this.pagination = this.pagiDB[this.pageInt - 1];
try {this.lastBtn.style = "border: 2px solid transparent; background: white";}
catch (e) {console.log(e.message)}
event.target.style = "border: 2px solid springgreen; background: springgreen";
this.lastBtn = event.target;
},
generateProductID(min, max) {
let rand = min + Math.random() * (max + 1 - min);
Expand Down Expand Up @@ -201,6 +192,7 @@ export default {
});
} catch (error) {}
this.edit_block_visible = false;
this.updateDB();
},
async fetch_data() {
Expand All @@ -224,8 +216,6 @@ export default {
:root {
--main-bg-clr: #032b43;
--blocks-shadow: rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px;
--blue-clr: #032b43;
--delete-btn-clr: #d00000;
--radius-int: 10px;
}
Expand All @@ -246,6 +236,8 @@ ul, li {
input:focus {outline: none;}
button:focus {outline: none;}
body {background: var(--main-bg-clr);}
#main-block {
background: transparent;
padding: 8px;
Expand All @@ -266,16 +258,30 @@ button:focus {outline: none;}
width: 130px;
box-shadow: var(--blocks-shadow);
}
#show-add-blc-btn:hover {background: var(--blue-clr);color: white;}
#edit-data-btn {
padding: 8px;
border: 2px solid var(--main-bg-clr);
border-radius: 6px;
background: var(--main-bg-clr);
color: white;
font-size: 16px;
letter-spacing: 2px;
width: 130px;
}
#edit-data-btn:hover {
background: white;
color: black;
}
#all_data_blc_title {
background: white;
font-size: 17pt;
padding: 12px;
font-weight: bold;
}
#show-add-blc-btn:hover {background: var(--blue-clr);color: white;}
#data-block {
background: white;
padding: 12px;
Expand All @@ -289,7 +295,7 @@ button:focus {outline: none;}
justify-content: flex-start;
padding: 6px;
}
#all_data_len_btn_block button {
#all_data_len_btn_block > button {
border: 2px solid transparent;
padding: 8px;
background: white;
Expand All @@ -299,23 +305,29 @@ button:focus {outline: none;}
border-radius: var(--radius-int);
transform: translateY(0px);
}
#all_data_len_btn_block button:active {transform: translateY(-15px);}
#all_data_len_btn_block button:hover {background: var(--main-bg-clr); color: white;}
#all_data_len_btn_block > button:active {transform: translateY(-15px);}
#all_data_len_btn_block > button:hover {background: var(--main-bg-clr); color: white;}
#data-block-item {
padding: 12px;
border-left: 4px solid var(--main-bg-clr);
border: 4px solid var(--main-bg-clr);
margin-bottom: 24px;
border-radius: 0px;
border-radius: var(--radius-int);
display: inline-block;
margin-right: 15px;
}
#data-block-item ul {
display: flex;
flex-direction: row;
display: inline-flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: flex-start;
}
#data-block-item ul li {padding: 8px;padding-bottom: 4px;}
#data-block-item button {
#data-block-item ul li {
padding: 8px;
font-size: 14pt;
padding-bottom: 4px;
}
#data-block-item > button {
border: 2px solid transparent;
background: white;
color: black;
Expand All @@ -325,38 +337,9 @@ button:focus {outline: none;}
border-radius: 6px;
letter-spacing: 2px;
}
#data-block-item button:hover {background: var(--delete-btn-clr);color: white;}
#data-block-item button span {display: none;}
#edit_data_block {
background: white;
padding: 12px;
display: flex;
flex-direction: column;
justify-content: flex-start;
border: 2px solid white;
border-radius: var(--radius-int);
box-shadow: var(--blocks-shadow);
}
#edit_data_block div {
font-size: 17pt;
padding: 12px;
font-weight: bold;
}
#edit_data_block button {
padding: 8px;
border: 2px solid var(--blue-clr);
border-radius: 6px;
background: var(--blue-clr);
color: white;
font-size: 16px;
letter-spacing: 2px;
width: 130px;
}
#edit_data_block button:hover {
background: white;
color: black;
}
#data-block-item > button:nth-of-type(1) {margin-right: 10px;}
#data-block-item > button:hover {background: var(--main-bg-clr);color: white;}
#data-block-item > button span {display: none;}
</style>

0 comments on commit a82a6a9

Please sign in to comment.