mirror of
https://github.com/lubosz/overte.git
synced 2025-08-07 19:21:16 +02:00
Form validation functionality enabled.
This commit is contained in:
Kasen IO
parent
d6793f79ba
commit
1a348d02f9
1 changed files with 225 additions and 162 deletions
|
|
@ -80,11 +80,6 @@
|
||||||
<v-list-item-subtitle>{{item.url}}</v-list-item-subtitle>
|
<v-list-item-subtitle>{{item.url}}</v-list-item-subtitle>
|
||||||
</v-list-item-content>
|
</v-list-item-content>
|
||||||
|
|
||||||
<!-- <v-card-actions>
|
|
||||||
<v-btn class="" color="purple">Share</v-btn>
|
|
||||||
<v-btn class="" color="red" @click="removeDialog.show = true;">Remove</v-btn>
|
|
||||||
</v-card-actions> -->
|
|
||||||
|
|
||||||
<v-menu bottom left>
|
<v-menu bottom left>
|
||||||
<template v-slot:activator="{ on }">
|
<template v-slot:activator="{ on }">
|
||||||
<v-btn
|
<v-btn
|
||||||
|
|
@ -193,50 +188,62 @@
|
||||||
>
|
>
|
||||||
<v-card>
|
<v-card>
|
||||||
<v-card-title class="headline">Edit Item</v-card-title>
|
<v-card-title class="headline">Edit Item</v-card-title>
|
||||||
|
|
||||||
<v-text-field
|
|
||||||
class="px-2"
|
|
||||||
label="Type"
|
|
||||||
v-model="editDialog.data.type"
|
|
||||||
required
|
|
||||||
></v-text-field>
|
|
||||||
|
|
||||||
<v-text-field
|
|
||||||
class="px-2"
|
|
||||||
label="Name"
|
|
||||||
v-model="editDialog.data.name"
|
|
||||||
required
|
|
||||||
></v-text-field>
|
|
||||||
|
|
||||||
<v-text-field
|
|
||||||
class="px-2"
|
|
||||||
label="URL"
|
|
||||||
v-model="editDialog.data.url"
|
|
||||||
required
|
|
||||||
></v-text-field>
|
|
||||||
|
|
||||||
<v-card-actions>
|
|
||||||
|
|
||||||
<v-btn
|
|
||||||
color="red"
|
|
||||||
class="px-3"
|
|
||||||
@click="editDialog.show = false"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
|
||||||
|
|
||||||
<v-btn
|
|
||||||
color="blue"
|
|
||||||
class="px-3"
|
|
||||||
@click="editDialog.show = false; editItem(editDialog.url);"
|
|
||||||
>
|
|
||||||
Yes
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
</v-card-actions>
|
|
||||||
|
|
||||||
|
<v-form
|
||||||
|
ref="editForm"
|
||||||
|
v-model="editDialog.valid"
|
||||||
|
:lazy-validation="false"
|
||||||
|
>
|
||||||
|
|
||||||
|
<v-text-field
|
||||||
|
class="px-2"
|
||||||
|
label="Type"
|
||||||
|
v-model="editDialog.data.type"
|
||||||
|
:rules="[v => !!v || 'Type is required.']"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
|
||||||
|
<v-text-field
|
||||||
|
class="px-2"
|
||||||
|
label="Name"
|
||||||
|
v-model="editDialog.data.name"
|
||||||
|
:rules="[v => !!v || 'Name is required.']"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
|
||||||
|
<v-text-field
|
||||||
|
class="px-2"
|
||||||
|
label="URL"
|
||||||
|
v-model="editDialog.data.url"
|
||||||
|
:rules="[v => !!v || 'URL is required.']"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
|
||||||
|
<v-card-actions>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
color="red"
|
||||||
|
class="px-3"
|
||||||
|
@click="editDialog.show = false"
|
||||||
|
>
|
||||||
|
Cancel
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
color="blue"
|
||||||
|
class="px-3"
|
||||||
|
:disabled="!editDialog.valid"
|
||||||
|
@click="editDialog.show = false; editItem(editDialog.url);"
|
||||||
|
>
|
||||||
|
Done
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
</v-card-actions>
|
||||||
|
|
||||||
|
</v-form>
|
||||||
|
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
|
|
||||||
|
|
@ -250,46 +257,57 @@
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
Enter the name of the item.
|
Enter the name of the item.
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
|
|
||||||
|
<v-form
|
||||||
|
ref="addForm"
|
||||||
|
v-model="addDialog.valid"
|
||||||
|
:lazy-validation="false"
|
||||||
|
>
|
||||||
|
|
||||||
<v-text-field
|
<v-text-field
|
||||||
class="px-2"
|
class="px-2"
|
||||||
label="Name"
|
label="Name"
|
||||||
v-model="addDialog.data.name"
|
v-model="addDialog.data.name"
|
||||||
required
|
:rules="[v => !!v || 'Name is required.']"
|
||||||
></v-text-field>
|
required
|
||||||
|
></v-text-field>
|
||||||
|
|
||||||
<v-card-text>
|
<v-card-text>
|
||||||
Enter the URL of the item.
|
Enter the URL of the item.
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
|
|
||||||
<v-text-field
|
<v-text-field
|
||||||
class="px-2"
|
class="px-2"
|
||||||
label="URL"
|
label="URL"
|
||||||
v-model="addDialog.data.url"
|
v-model="addDialog.data.url"
|
||||||
required
|
:rules="[v => !!v || 'URL is required.']"
|
||||||
></v-text-field>
|
required
|
||||||
|
></v-text-field>
|
||||||
|
|
||||||
<v-card-actions>
|
<v-card-actions>
|
||||||
|
|
||||||
<v-btn
|
<v-btn
|
||||||
color="red"
|
color="red"
|
||||||
class="px-3"
|
class="px-3"
|
||||||
@click="addDialog.show = false"
|
@click="addDialog.show = false"
|
||||||
>
|
>
|
||||||
Cancel
|
Cancel
|
||||||
</v-btn>
|
</v-btn>
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
<v-spacer></v-spacer>
|
||||||
|
|
||||||
<v-btn
|
<v-btn
|
||||||
color="blue"
|
color="blue"
|
||||||
class="px-3"
|
class="px-3"
|
||||||
@click="addDialog.show = false; addItem(addDialog.data.name, addDialog.data.url)"
|
:disabled="!addDialog.valid"
|
||||||
>
|
@click="addDialog.show = false; addItem(addDialog.data.name, addDialog.data.url)"
|
||||||
Add
|
>
|
||||||
</v-btn>
|
Add
|
||||||
|
</v-btn>
|
||||||
</v-card-actions>
|
|
||||||
|
</v-card-actions>
|
||||||
|
|
||||||
|
</v-form>
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
|
|
||||||
|
|
@ -305,48 +323,60 @@
|
||||||
{{receiveDialog.data.user}} is sending you an item.
|
{{receiveDialog.data.user}} is sending you an item.
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
|
|
||||||
<v-text-field
|
<v-form
|
||||||
class="px-2"
|
ref="receiveForm"
|
||||||
label="Type"
|
v-model="receiveDialog.valid"
|
||||||
v-model="receiveDialog.data.type"
|
:lazy-validation="false"
|
||||||
required
|
>
|
||||||
></v-text-field>
|
|
||||||
|
|
||||||
<v-text-field
|
<v-text-field
|
||||||
class="px-2"
|
class="px-2"
|
||||||
label="Name"
|
label="Type"
|
||||||
v-model="receiveDialog.data.name"
|
:rules="[v => !!v || 'Type is required.']"
|
||||||
required
|
v-model="receiveDialog.data.type"
|
||||||
></v-text-field>
|
required
|
||||||
|
></v-text-field>
|
||||||
<v-text-field
|
|
||||||
class="px-2"
|
|
||||||
label="URL"
|
|
||||||
v-model="receiveDialog.data.url"
|
|
||||||
required
|
|
||||||
></v-text-field>
|
|
||||||
|
|
||||||
<v-card-actions>
|
|
||||||
|
|
||||||
<v-btn
|
|
||||||
color="red"
|
|
||||||
class="px-3"
|
|
||||||
@click="receiveDialog.show = false"
|
|
||||||
>
|
|
||||||
Reject
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
<v-text-field
|
||||||
|
class="px-2"
|
||||||
|
label="Name"
|
||||||
|
:rules="[v => !!v || 'Name is required.']"
|
||||||
|
v-model="receiveDialog.data.name"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
|
||||||
|
<v-text-field
|
||||||
|
class="px-2"
|
||||||
|
label="URL"
|
||||||
|
:rules="[v => !!v || 'URL is required.']"
|
||||||
|
v-model="receiveDialog.data.url"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
|
||||||
|
<v-card-actions>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
color="red"
|
||||||
|
class="px-3"
|
||||||
|
@click="receiveDialog.show = false"
|
||||||
|
>
|
||||||
|
Reject
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
<v-spacer></v-spacer>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
color="blue"
|
||||||
|
class="px-3"
|
||||||
|
:disabled="!receiveDialog.valid"
|
||||||
|
@click="receiveDialog.show = false; acceptItem();"
|
||||||
|
>
|
||||||
|
Accept
|
||||||
|
</v-btn>
|
||||||
|
|
||||||
|
</v-card-actions>
|
||||||
|
|
||||||
<v-btn
|
</v-form>
|
||||||
color="blue"
|
|
||||||
class="px-3"
|
|
||||||
@click="receiveDialog.show = false; acceptItem();"
|
|
||||||
>
|
|
||||||
Accept
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
|
|
||||||
|
|
@ -362,47 +392,67 @@
|
||||||
Select a user to send this item to.
|
Select a user to send this item to.
|
||||||
</v-card-text>
|
</v-card-text>
|
||||||
|
|
||||||
<v-list>
|
<v-form
|
||||||
<v-list-item-group v-model="shareDialog.data.recipient" color="primary">
|
ref="shareForm"
|
||||||
<v-list-item
|
v-model="shareDialog.valid"
|
||||||
v-for="user in nearbyUsers"
|
:lazy-validation="false"
|
||||||
v-bind:key="user.uuid"
|
>
|
||||||
|
|
||||||
|
<!-- <v-list>
|
||||||
|
<v-list-item-group v-model="shareDialog.data.recipient" color="primary">
|
||||||
|
<v-list-item
|
||||||
|
v-for="user in nearbyUsers"
|
||||||
|
v-bind:key="user.uuid"
|
||||||
|
>
|
||||||
|
<v-list-item-content>
|
||||||
|
<v-list-item-title v-text="user.name"></v-list-item-title>
|
||||||
|
</v-list-item-content>
|
||||||
|
</v-list-item>
|
||||||
|
</v-list-item-group>
|
||||||
|
</v-list> -->
|
||||||
|
|
||||||
|
<v-select
|
||||||
|
v-model="shareDialog.data.recipient"
|
||||||
|
:items="nearbyUsers"
|
||||||
|
item-text="name"
|
||||||
|
item-value="uuid"
|
||||||
|
:rules="[v => !!v || 'A user is required']"
|
||||||
|
label="Nearby Users"
|
||||||
|
required
|
||||||
|
></v-select>
|
||||||
|
|
||||||
|
<v-text-field
|
||||||
|
class="px-2"
|
||||||
|
label="URL"
|
||||||
|
:rules="[v => !!v || 'URL is required.']"
|
||||||
|
v-model="shareDialog.data.url"
|
||||||
|
required
|
||||||
|
></v-text-field>
|
||||||
|
|
||||||
|
<v-card-actions>
|
||||||
|
|
||||||
|
<v-btn
|
||||||
|
color="red"
|
||||||
|
class="px-3"
|
||||||
|
@click="shareDialog.show = false"
|
||||||
>
|
>
|
||||||
<v-list-item-content>
|
Cancel
|
||||||
<v-list-item-title v-text="user.name"></v-list-item-title>
|
</v-btn>
|
||||||
</v-list-item-content>
|
|
||||||
</v-list-item>
|
<v-spacer></v-spacer>
|
||||||
</v-list-item-group>
|
|
||||||
</v-list>
|
<v-btn
|
||||||
|
color="blue"
|
||||||
<v-text-field
|
class="px-3"
|
||||||
class="px-2"
|
:disabled="!shareDialog.valid"
|
||||||
label="URL"
|
@click="shareDialog.show = false; shareItem();"
|
||||||
v-model="shareDialog.data.url"
|
>
|
||||||
required
|
Send
|
||||||
></v-text-field>
|
</v-btn>
|
||||||
|
|
||||||
<v-card-actions>
|
</v-card-actions>
|
||||||
|
|
||||||
<v-btn
|
|
||||||
color="red"
|
|
||||||
class="px-3"
|
|
||||||
@click="shareDialog.show = false"
|
|
||||||
>
|
|
||||||
Cancel
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
<v-spacer></v-spacer>
|
</v-form>
|
||||||
|
|
||||||
<v-btn
|
|
||||||
color="blue"
|
|
||||||
class="px-3"
|
|
||||||
@click="shareDialog.show = false; shareItem();"
|
|
||||||
>
|
|
||||||
Send
|
|
||||||
</v-btn>
|
|
||||||
|
|
||||||
</v-card-actions>
|
|
||||||
</v-card>
|
</v-card>
|
||||||
</v-dialog>
|
</v-dialog>
|
||||||
</v-app>
|
</v-app>
|
||||||
|
|
@ -488,6 +538,7 @@ new Vue({
|
||||||
},
|
},
|
||||||
addDialog: {
|
addDialog: {
|
||||||
show: false,
|
show: false,
|
||||||
|
valid: false,
|
||||||
data: {
|
data: {
|
||||||
"name": null,
|
"name": null,
|
||||||
"url": null,
|
"url": null,
|
||||||
|
|
@ -495,6 +546,7 @@ new Vue({
|
||||||
},
|
},
|
||||||
editDialog: {
|
editDialog: {
|
||||||
show: false,
|
show: false,
|
||||||
|
valid: false,
|
||||||
url: null, // This is the key, the URL in data is what will overwrite this key.
|
url: null, // This is the key, the URL in data is what will overwrite this key.
|
||||||
data: {
|
data: {
|
||||||
"type": null,
|
"type": null,
|
||||||
|
|
@ -504,6 +556,7 @@ new Vue({
|
||||||
},
|
},
|
||||||
receiveDialog: {
|
receiveDialog: {
|
||||||
show: false,
|
show: false,
|
||||||
|
valid: false,
|
||||||
data: {
|
data: {
|
||||||
"user": null,
|
"user": null,
|
||||||
"name": null,
|
"name": null,
|
||||||
|
|
@ -513,6 +566,7 @@ new Vue({
|
||||||
},
|
},
|
||||||
shareDialog: {
|
shareDialog: {
|
||||||
show: false,
|
show: false,
|
||||||
|
valid: false,
|
||||||
data: {
|
data: {
|
||||||
"url": null, // The item you want to share.
|
"url": null, // The item you want to share.
|
||||||
"recipient": null,
|
"recipient": null,
|
||||||
|
|
@ -642,7 +696,7 @@ new Vue({
|
||||||
this.sendAppMessage("test", "testData");
|
this.sendAppMessage("test", "testData");
|
||||||
},
|
},
|
||||||
sendInventory: function() {
|
sendInventory: function() {
|
||||||
|
alert("SAVING INVENTORY.");
|
||||||
},
|
},
|
||||||
receiveInventory: function() {
|
receiveInventory: function() {
|
||||||
|
|
||||||
|
|
@ -664,6 +718,15 @@ new Vue({
|
||||||
// EventBridge.emitWebEvent(JSON.stringify(JSONtoSend));
|
// EventBridge.emitWebEvent(JSON.stringify(JSONtoSend));
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
watch: {
|
||||||
|
// Whenever the item list changes, this will notice and then send it to the script to be saved.
|
||||||
|
items: {
|
||||||
|
deep: true,
|
||||||
|
handler() {
|
||||||
|
this.sendInventory();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
computed: {
|
computed: {
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
Loading…
Reference in a new issue