Edit.vue
4.91 KB
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
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<template>
<div>
<h1 class="mb-8 font-bold text-3xl">
<inertia-link class="text-indigo-400 hover:text-indigo-600" :href="route('tokens')">Tokens</inertia-link>
<span class="text-indigo-400 font-medium">/</span>
{{ form.login }}
</h1>
<div class="bg-white rounded-md shadow overflow-hidden max-w-3xl">
<form @submit.prevent="update">
<div class="p-8 -mr-6 -mb-8 flex flex-wrap">
<text-input v-model="form.login" :error="form.errors.login" :readonly="true" class="pr-6 pb-8 w-full lg:w-1/2"
label="Login"/>
<text-input v-model="form.token" :error="form.errors.token" :readonly="true" class="pr-6 pb-8 w-full lg:w-1/2"
label="Token"/>
<text-input v-model="form.api" :error="form.errors.api" :readonly="true" class="pr-6 pb-8 w-full lg:w-1/2"
label="API"/>
<select-input v-model="form.type" :error="form.errors.type"
:readonly="form.type"
class="pr-6 pb-8 w-full lg:w-1/2"
label="Type">
<option :value="null"/>
<option v-for="type,key in types" :value="key">{{ type }}</option>
</select-input>
</div>
<div class="px-8 py-4 bg-gray-50 border-t border-gray-100 flex items-center">
<button class="text-red-600 hover:underline" tabindex="-1"
type="button" @click="destroy">Delete Token
</button>
<loading-button :loading="form.processing" v-if="!this.token.type" class="btn-indigo ml-auto" type="submit">Update
Token
</loading-button>
</div>
</form>
</div>
<div v-if="token.campaigns">
<h2 class="mt-12 font-bold text-2xl">Campaigns</h2>
<div class="mt-6 bg-white rounded shadow overflow-x-auto">
<table class="w-full whitespace-nowrap">
<tr class="text-left font-bold">
<th class="px-6 pt-6 pb-4">Name</th>
</tr>
<tr v-for="campaign in token.campaigns" :key="campaign.id"
class="hover:bg-gray-100 focus-within:bg-gray-100">
<td class="border-t">
{{ campaign.name }}
</td>
</tr>
<tr v-if="token.campaigns.length === 0">
<td class="border-t px-6 py-4" colspan="4">No campaigns found.</td>
</tr>
</table>
</div>
</div>
<div v-if="token.cities">
<h2 class="mt-12 font-bold text-2xl">Cities</h2>
<div class="mt-6 bg-white rounded shadow overflow-x-auto">
<table class="w-full whitespace-nowrap">
<tr class="text-left font-bold">
<th class="px-6 pt-6 pb-4">Name</th>
</tr>
<tr v-for="city in token.cities" :key="city.id"
class="hover:bg-gray-100 focus-within:bg-gray-100">
<td class="border-t">
{{ city.name }}
</td>
</tr>
<tr v-if="token.cities.length === 0">
<td class="border-t px-6 py-4" colspan="4">No City found.</td>
</tr>
</table>
</div>
</div>
</div>
</template>
<script>
import Icon from '@/Shared/Icon'
import Layout from '@/Shared/Layout'
import TextInput from '@/Shared/TextInput'
import SelectInput from '@/Shared/SelectInput'
import LoadingButton from '@/Shared/LoadingButton'
import TrashedMessage from '@/Shared/TrashedMessage'
export default {
metaInfo() {
return {title: this.form.login}
},
components: {
Icon,
LoadingButton,
SelectInput,
TextInput,
TrashedMessage,
},
layout: Layout,
props: {
token: Object,
types: Object
},
remember: 'form',
data() {
return {
form: this.$inertia.form({
id: this.token.id,
login: this.token.login,
token: this.token.token,
api: this.token.api,
type: this.token.type,
}),
}
},
methods: {
update() {
this.form.post(this.route('token.update', this.token.id))
},
destroy() {
if (confirm('Are you sure you want to delete this token?')) {
this.$inertia.delete(this.route('token.destroy', this.token.id))
}
},
},
}
</script>