Add TZ & LANG

Signed-off-by: John Molakvoæ (skjnldsv) <skjnldsv@protonmail.com>

README.md

@@ -81,7 +81,8 @@ If you contribute, participate or interact with this community, please respect [
 This guide will help you get started: 
 - :dancer: :smile: [Opening a pull request](https://opensource.guide/how-to-contribute/#opening-a-pull-request) 
 
-
+# Thanks
+- language icon by [nociconist](https://thenounproject.com/nociconist/)
 
 
 

css/icons.scss

@@ -28,6 +28,7 @@
 @include icon-black-white('eye', 'contacts', 1);
 @include icon-black-white('up', 'contacts', 1);
 @include icon-black-white('no-calendar', 'contacts', 1);
+@include icon-black-white('language', 'contacts', 2);
 
 .icon-up-force-white {
 	// using #fffffe to trick the accessibility dark theme icon invert

lib/Controller/PageController.php

@@ -25,17 +25,29 @@
 
 use OCP\AppFramework\Controller;
 use OCP\AppFramework\Http\TemplateResponse;
+use OCP\IInitialStateService;
+use OCP\L10N\IFactory;
 use OCP\IRequest;
 
 class PageController extends Controller {
 
 	protected $appName;
 
+	/** @var IInitialStateService */
+	private $initialStateService;
+
+	/** @var IFactory */
+	protected $languageFactory;
+
 	public function __construct(string $AppName,
-								IRequest $request) {
+								IRequest $request,
+								IInitialStateService $initialStateService,
+								IFactory $languageFactory) {
 		parent::__construct($AppName, $request);
 
 		$this->appName = $AppName;
+		$this->initialStateService = $initialStateService;
+		$this->languageFactory = $languageFactory;
 	}
 
 	/**
@@ -45,6 +57,8 @@ public function __construct(string $AppName,
 	 * Default routing
 	 */
 	public function index(): TemplateResponse {
+		$locales = $this->languageFactory->findAvailableLocales();
+		$this->initialStateService->provideInitialState($this->appName, 'locales', $locales);
 		return new TemplateResponse('contacts', 'main'); // templates/main.php
 	}
 }

src/components/Properties/PropertySelect.vue

@@ -85,7 +85,15 @@ export default {
 		// matching value to the options we provide
 		matchedOptions: {
 			get() {
-				let selected = this.propModel.options.find(option => option.id === this.localValue)
+				// match lowercase as well
+				let selected = this.propModel.options.find(option => option.id === this.localValue
+					|| option.id === this.localValue.toLowerCase())
+
+				// if the model provided a custom match fallback, use it
+				if (!selected && this.propModel.greedyMatch) {
+					selected = this.propModel.greedyMatch(this.localValue, this.propModel.options)
+				}
+
 				// properly display array as a string
 				if (Array.isArray(this.localValue)) {
 					return selected || {

src/models/rfcProps.js

@@ -22,6 +22,15 @@
 import { VCardTime } from 'ical.js'
 import ActionCopyNtoFN from '../components/Actions/ActionCopyNtoFN'
 import ActionToggleYear from '../components/Actions/ActionToggleYear'
+import zones from './zones'
+
+const localesState = OCP.InitialState.loadState('contacts', 'locales')
+const locales = localesState
+	? localesState.map(({ code, name }) => ({
+		id: code.toLowerCase().replace('_', '-'),
+		name
+	}))
+	: []
 
 const properties = {
 	nickname: {
@@ -279,6 +288,37 @@ const properties = {
 			{ id: 'N', name: t('contacts', 'None') },
 			{ id: 'U', name: t('contacts', 'Unknown') }
 		]
+	},
+	tz: {
+		readableName: t('contacts', 'Timezone'),
+		force: 'select',
+		icon: 'icon-timezone',
+		options: zones.map(zone => ({
+			id: zone,
+			name: zone
+		}))
+	},
+	lang: {
+		readableName: t('contacts', 'Spoken languages'),
+		icon: 'icon-language',
+		defaultValue: {
+			value: 'en'
+		},
+		multiple: true
+	}
+}
+
+if (locales.length > 0) {
+	properties.lang.force = 'select'
+	properties.lang.options = locales
+	properties.lang.greedyMatch = function(value, options) {
+		// each locale already have the base code (e.g. fr in fr_ca)
+		// in the list, meaning the only use case for this is a more
+		// complete language tag than the short one we have
+		// value: fr-ca-xxx... will be matched with option fr
+		return options.find(({ id }) => {
+			return id === value.split('-')[0]
+		})
 	}
 }