nextcloud
/
contacts
mirror of https://github.com/nextcloud/contacts
0
0
Fork 0
Code Issues Releases Wiki Activity

Custom props update and details layout first init 

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>
This commit is contained in:
John Molakvoæ (skjnldsv) 2018-08-13 18:46:52 +02:00
parent 875814742a
commit 32a2fb1332
No known key found for this signature in database
GPG Key ID: 60C25B8C072916CF
9 changed files with 156 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
css/details.scss
View File

@ -113,5 +113,58 @@
}
}
$grid-height-unit: 40px;
$grid-input-padding: 7px;
$grid-input-margin: 3px;
$grid-column-width: 380px;
$grid-input-height-with-margin: #{$grid-height-unit - $grid-input-margin * 2};
@mixin generate-grid-span($default-unit) {
/* we only supports 10 props of the same type */
@for $i from 1 through 10 {
&.grid-span-#{$i} {
/* default unit + title + bottom padding */
grid-row-start: span #{$i * $default-unit};
}
}
}
// contact details
section.contact-details {
display: grid;
/* unquote is a strange hack to avoid removal of the comma by the scss compiler */
grid-template-columns: repeat(auto-fit, minmax(unquote('#{$grid-column-width}'), 1fr));
grid-column-gap: 20px;
.contact-details-property {
@include generate-grid-span(1);
display: flex;
flex-wrap: wrap;
position: relative;
width: $grid-column-width;
.icon-delete {
position: absolute;
top: 0;
right: 0;
width: 44px;
height: 44px;
}
}
.contact-details-label {
margin: $grid-input-margin;
margin-left: 0;
display: inline-block;
width: 100px;
height: $grid-input-height-with-margin;
padding: $grid-input-padding 0;
text-align: right;
opacity: .5;
white-space: nowrap;
overflow: hidden;
overflow-x: hidden;
text-overflow: ellipsis;
vertical-align: middle;
}
.contact-details-property-row {
}
}
}

2
src/components/ContactDetails.vue
View File

@ -79,7 +79,7 @@
</header>
<!-- contact details -->
<section>
<section class="contact-details">
<contact-details-property v-for="(property, index) in contact.properties" :key="index" :property="property" />
</section>
</template>

5
src/components/ContactDetails/ContactDetailsProperty.vue
View File

@ -31,6 +31,7 @@ import { Property } from 'ical.js'
import rfcProps from '../../models/rfcProps.js'
import PropertyText from '../properties/PropertyText'
import PropertyMultipleText from '../properties/PropertyMultipleText'
import PropertyDateTime from '../properties/PropertyDateTime'
// import PropertySelect from '../properties/PropertyMultipleText'
export default {
@ -48,6 +49,8 @@ export default {
componentInstance() {
if (this.property.isMultiValue && this.propType === 'text') {
return PropertyMultipleText
} else if (this.propType && ['date-and-or-time', 'date-time', 'time', 'date'].indexOf(this.propType) > -1) {
return PropertyDateTime
} else if (this.propType && this.propType !== 'unknown') {
return PropertyText
}
@ -111,7 +114,7 @@ export default {
value: {
get() {
if (this.property.isMultiValue) {
return this.property.getValues()
return this.property.getValues().flatten()
}
return this.property.getFirstValue()
},

2
src/components/SettingsSection.vue
View File

@ -39,7 +39,7 @@ import importContacts from '../components/Settings/SettingsImportContacts'
import sortContacts from '../components/Settings/SettingsSortContacts'
export default {
name: 'ContentList',
name: 'SettingsSection',
components: {
addressBook,
addAddressBook,

73
src/components/properties/PropertyDateTime.vue Normal file
View File

@ -0,0 +1,73 @@
<!--
- @copyright Copyright (c) 2018 John Molakvoæ <skjnldsv@protonmail.com>
-
- @author John Molakvoæ <skjnldsv@protonmail.com>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<div v-if="propModel" class="contact-details-property grid-span-1">
<!-- type selector -->
<multiselect v-if="propModel.options" v-model="selectType"
:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
class="multiselect-vue contact-details-label" track-by="id" label="name" />
<!-- if we do not support any type on our model but one is set anyway -->
<div v-else-if="selectType" class="contact-details-label">{{ selectType.name }}</div>
<!-- delete the prop -->
<button :title="t('contacts', 'Delete')" class="icon-delete" @click="deleteProperty" />
<input v-model="value" type="text">
</div>
</template>
<script>
import Multiselect from 'vue-multiselect'
import { VCardTime } from 'ical.js'
export default {
name: 'PropertyDateTime',
components: {
Multiselect
},
props: {
selectType: {
type: Object,
default: () => {}
},
propModel: {
type: Object,
default: () => {}
},
value: {
type: [String],
default: ''
}
},
methods: {
deleteProperty() {
alert('deleted')
}
}
}
</script>

12
src/components/properties/PropertyMultipleText.vue
View File

@ -21,7 +21,7 @@
-->
<template>
<div v-if="propModel" class="contact-details-property">
<div v-if="propModel" :class="`grid-span-${gridLength}`" class="contact-details-property">
<!-- type selector -->
<multiselect v-if="propModel.options" v-model="selectType"
:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
@ -33,7 +33,7 @@
<!-- delete the prop -->
<button :title="t('contacts', 'Delete')" class="icon-delete" @click="deleteProperty" />
<div v-for="(data, index) in value" :key="index">
<div v-for="index in propModel.displayOrder" :key="index" class="contact-details-property-row">
<div class="contact-details-label">{{ propModel.readableValues[index] }}</div>
<input v-model="value[index]" type="text">
</div>
@ -60,11 +60,17 @@ export default {
default: () => {}
},
value: {
type: [Array, String],
type: [Array, String, Object],
default: ''
}
},
computed: {
gridLength() {
return this.propModel.displayOrder ? this.propModel.displayOrder.length : this.value.length
}
},
methods: {
deleteProperty() {
alert('deleted')

4
src/components/properties/PropertyText.vue
View File

@ -21,7 +21,7 @@
-->
<template>
<div v-if="propModel" class="contact-details-property">
<div v-if="propModel" class="contact-details-property grid-span-1">
<!-- type selector -->
<multiselect v-if="propModel.options" v-model="selectType"
:options="propModel.options" :searchable="false" :placeholder="t('contacts', 'Select type')"
@ -57,7 +57,7 @@ export default {
default: () => {}
},
value: {
type: [Array, String],
type: [String],
default: ''
}
},

9
src/models/rfcProps.js
View File

@ -28,12 +28,13 @@ const properties = {
n: {
readableName: t('contacts', 'Detailed name'),
readableValues: [
t('contacts', 'Prefix'),
t('contacts', 'Last name'),
t('contacts', 'First name'),
t('contacts', 'Additional names'),
t('contacts', 'Last name'),
t('contacts', 'Prefix'),
t('contacts', 'Suffix')
],
displayOrder: [3, 1, 2, 0, 4],
defaultValue: {
value: ['', '', '', '', '']
},
@ -66,12 +67,14 @@ const properties = {
readableName: t('contacts', 'Address'),
readableValues: [
t('contacts', 'Post office box'),
t('contacts', 'Extended address'),
t('contacts', 'Address'),
t('contacts', 'Postal code'),
t('contacts', 'City'),
t('contacts', 'State or province'),
t('contacts', 'Postal code'),
t('contacts', 'Country')
],
displayOrder: [0, 2, 1, 5, 3, 4, 6],
icon: 'icon-address',
defaultValue: {
value: ['', '', '', '', '', '', ''],

8
src/store/FakeName.vcf
View File

@ -1457,6 +1457,7 @@ VERSION:3.0
N:Snorrason;Aðalbjörn;;Mr.;
URL:http://google.com
FN:Aðalbjörn Snorrason
UID:1vvc54ds156vv1fv156fd16
NICKNAME:Shaltarea
BDAY;VALUE=text:7/31/1950
GENDER;TYPE=HOME:male
@ -1469,6 +1470,9 @@ EMAIL;TYPE=HOME,pref:AalbjornSnorrason@einrot.com
CATEGORIES:Family
TEL;TYPE=VOICE,HOME;PREF=1;VALUE=text:021 511 81 18
ADR;TYPE=home:;;Sédeilles;;1554;Switzerland
ADR;GEO="geo:12.3457,78.910";LABEL="Mr. John Q. Public, Esq.
Mail Drop: TNE QB\n123 Main Street\nAny Town, CA 91921-1234
U.S.A.":;;123 Main Street;Any Town;CA;91921-1234;U.S.A.
END:VCARD
BEGIN:VCARD
VERSION:3.0
@ -2703,11 +2707,13 @@ TEL;TYPE=VOICE,HOME;VALUE=text:94 32 06
ADR;TYPE=HOME:;;Ilulissat;QA;3952;Greenland
END:VCARD
BEGIN:VCARD
VERSION:3.0
VERSION:4.0
N:McIntosh;Abdul;;Mr.;
FN:Abdul McIntosh
NICKNAME:Lifen1934
BDAY;VALUE=text:7/31/1934
ANNIVERSARY:19960415
REV:19951031T222710Z
GENDER:male
ORG:Penn Fruit;
TITLE:Medical social worker