Skip to content
Snippets Groups Projects
Commit e577c81d authored by Marc Hanisch's avatar Marc Hanisch
Browse files

reworks contacts page

parent 5c40a5a5
No related branches found
No related tags found
2 merge requests!90Draft: restructure frontend properties 2,!82Restructure frontend
Hide whitespace changes
Inline Side-by-side
pages/devices/_deviceId/contacts.vue
+ 179
− 5
View file @ e577c81d
<template>
<div>
<v-row>
<v-col>
<NuxtChild />
</v-col>
</v-row>
<NuxtChild />
<v-card-actions
v-if="!isAddContactPage"
>
<v-spacer />
<v-btn
v-if="isLoggedIn"
color="primary"
small
nuxt
:to="'/devices/' + deviceId + '/contacts/new'"
>
Add contact
</v-btn>
</v-card-actions>
<v-expansion-panels>
<v-expansion-panel
v-for="contact in contacts"
:key="contact.id"
>
<v-expansion-panel-header>
<v-row
no-gutters
>
<v-col class="text-subtitle-1">
{{ contact.toString() }}
</v-col>
<v-col
align-self="end"
class="text-right"
>
<v-menu
v-if="isLoggedIn"
close-on-click
close-on-content-click
offset-x
left
z-index="999"
>
<template v-slot:activator="{ on }">
<v-btn
data-role="property-menu"
icon
small
v-on="on"
>
<v-icon
dense
small
>
mdi-dots-vertical
</v-icon>
</v-btn>
</template>
<v-list>
<v-list-item
dense
@click="removeContact(contact.id)"
>
<v-list-item-content>
<v-list-item-title
class="red--text"
>
<v-icon
left
small
color="red"
>
mdi-delete
</v-icon>
Remove contact
</v-list-item-title>
</v-list-item-content>
</v-list-item>
</v-list>
</v-menu>
</v-col>
</v-row>
</v-expansion-panel-header>
<v-expansion-panel-content>
<template>
<div>
<v-row
dense
>
<v-col
cols="12"
md="3"
>
<label>Given name:</label>
{{ contact.givenName }}
</v-col>
<v-col
cols="12"
md="3"
>
<label>Family name:</label>
{{ contact.familyName }}
</v-col>
</v-row>
<v-row
dense
>
<v-col
cols="12"
md="3"
>
<label>E-Mail:</label>
{{ contact.email | orDefault }}
</v-col>
<v-col
cols="12"
md="6"
>
<label>Website:</label>
{{ contact.website | orDefault }}
</v-col>
</v-row>
</div>
</template>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
<v-card-actions
v-if="!isAddContactPage"
>
<v-spacer />
<v-btn
v-if="isLoggedIn"
color="primary"
small
nuxt
:to="'/devices/' + deviceId + '/contacts/new'"
>
Add contact
</v-btn>
</v-card-actions>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { Contact } from '@/models/Contact'
@Component({
})
export default class DeviceContactsPage extends Vue {
private contacts: Contact[] = []
private isLoading = true
mounted () {
this.$api.devices.findRelatedContacts(this.deviceId).then((foundContacts) => {
this.contacts = foundContacts
this.isLoading = false
})
}
get deviceId () {
return this.$route.params.deviceId
}
get isLoggedIn () {
return this.$store.getters['oidc/isAuthenticated']
}
get isAddContactPage (): boolean {
return this.$route.path === '/devices/' + this.deviceId + '/contacts/new'
}
removeContact (contactId: string) {
this.$api.devices.removeContact(this.deviceId, contactId).then(() => {
const searchIndex = this.contacts.findIndex(c => c.id === contactId)
if (searchIndex > -1) {
this.contacts.splice(searchIndex, 1)
}
}).catch((_error) => {
this.$store.commit('snackbar/setError', 'Removing contact failed')
})
}
}
</script>
pages/devices/_deviceId/contacts/index.vue deleted 100644 → 0
+ 0
− 167
View file @ 5c40a5a5
<template>
<div>
<v-row v-if="isLoggedIn">
<v-col>
<v-btn nuxt :to="'/devices/show/' + deviceId + '/contacts/new'">
Add contact
</v-btn>
</v-col>
</v-row>
<div v-if="isLoading">
<v-progress-circular indeterminate />
</div>
<div v-else>
<v-expansion-panels>
<v-expansion-panel
v-for="contact in contacts"
:key="contact.id"
>
<v-expansion-panel-header>
{{ contact.toString() }}
</v-expansion-panel-header>
<v-expansion-panel-content>
<template>
<div>
<v-row
dense
>
<v-col
cols="4"
xs="4"
sm="3"
md="2"
lg="2"
xl="1"
class="font-weight-medium"
>
Given name:
</v-col>
<v-col
cols="8"
xs="8"
sm="9"
md="4"
lg="4"
xl="5"
>
{{ contact.givenName }}
</v-col>
<v-col
cols="4"
xs="4"
sm="3"
md="2"
lg="2"
xl="1"
class="font-weight-medium"
>
Family name:
</v-col>
<v-col
cols="8"
xs="8"
sm="9"
md="4"
lg="4"
xl="5"
>
{{ contact.familyName }}
</v-col>
</v-row>
<v-row
dense
>
<v-col
cols="4"
xs="4"
sm="3"
md="2"
lg="2"
xl="1"
class="font-weight-medium"
>
E-Mail:
</v-col>
<v-col
cols="8"
xs="8"
sm="9"
md="4"
lg="4"
xl="5"
>
{{ contact.email }}
</v-col>
<v-col
cols="4"
xs="4"
sm="3"
md="2"
lg="2"
xl="1"
class="font-weight-medium"
>
Website:
</v-col>
<v-col
cols="8"
xs="8"
sm="9"
md="4"
lg="4"
xl="5"
>
{{ contact.website }}
</v-col>
</v-row>
<v-row v-if="isLoggedIn">
<v-btn @click="removeContact(contact.id)">
Remove from device
</v-btn>
</v-row>
</div>
</template>
</v-expansion-panel-content>
</v-expansion-panel>
</v-expansion-panels>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue } from 'nuxt-property-decorator'
import { Contact } from '@/models/Contact'
@Component({
})
export default class DeviceShowContactsPage extends Vue {
private contacts: Contact[] = []
private isLoading = true
mounted () {
this.$api.devices.findRelatedContacts(this.deviceId).then((foundContacts) => {
this.contacts = foundContacts
this.isLoading = false
})
}
get deviceId () {
return this.$route.params.deviceId
}
get isLoggedIn () {
return this.$store.getters['oidc/isAuthenticated']
}
removeContact (contactId: string) {
this.$api.devices.removeContact(this.deviceId, contactId).then(() => {
const searchIndex = this.contacts.findIndex(c => c.id === contactId)
if (searchIndex > -1) {
this.contacts.splice(searchIndex, 1)
}
}).catch((_error) => {
this.$store.commit('snackbar/setError', 'Removing contact failed')
})
}
}
</script>
pages/devices/_deviceId/contacts/new.vue
+ 31
− 23
View file @ e577c81d
......@@ -30,28 +30,36 @@ permissions and limitations under the Licence.
-->
<template>
<div>
<div v-if="isLoading">
<div class="text-center pt-2">
<v-progress-circular indeterminate />
</div>
</div>
<div v-else>
<v-row>
<v-col cols="3">
<v-autocomplete :items="allExceptSelected" :item-text="(x) => x" :item-value="(x) => x.id" label="New contact" @change="select" />
</v-col>
</v-row>
<v-row>
<v-col>
<v-btn :disabled="selectedContact == null" @click="addContact">
Add
</v-btn>
<v-btn nuxt :to="'/devices/show/' + deviceId + '/contacts'">
Cancel
</v-btn>
</v-col>
</v-row>
</div>
<v-row>
<v-col
cols="12"
md="5"
>
<v-autocomplete :items="allExceptSelected" :item-text="(x) => x" :item-value="(x) => x.id" label="New contact" @change="select" />
</v-col>
<v-col
cols="12"
md="2"
align-self="center"
>
<v-btn
small
color="primary"
:disabled="selectedContact == null"
@click="addContact"
>
Add
</v-btn>
<v-btn
small
text
nuxt
:to="'/devices/show/' + deviceId + '/contacts'"
>
Cancel
</v-btn>
</v-col>
</v-row>
</div>
</template>
......@@ -85,7 +93,7 @@ export default class DeviceAddContactPage extends Vue {
addContact () {
if (this.selectedContact && this.selectedContact.id && this.isLoggedIn) {
this.$api.devices.addContact(this.deviceId, this.selectedContact.id).then(() => {
this.$router.push('/devices/show/' + this.deviceId + '/contacts')
this.$router.push('/devices/' + this.deviceId + '/contacts')
})
}
}
......
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment

A HIFIS Service | Privacy | Imprint | Support | Documentation | Changelog