Merge branch 'ASDFGamer-translate-tag-names'

src/components/Explore.vue

@@ -59,6 +59,7 @@ import CogIcon from 'vue-material-design-icons/Cog.vue';
 
 import config from '../services/static-config';
 import { API } from '../services/API';
+import * as dav from '../services/dav';
 
 import type { ICluster, IConfig } from '../types';
 
@@ -160,25 +161,19 @@ export default defineComponent({
     },
 
     async getRecognize() {
-      const res = await axios.get<ICluster[]>(API.FACE_LIST('recognize'));
-      this.recognize = res.data.slice(0, 10);
+      this.recognize = (await dav.getFaceList('recognize')).slice(0, 10);
     },
 
     async getFaceRecognition() {
-      const res = await axios.get<ICluster[]>(API.FACE_LIST('facerecognition'));
-      this.facerecognition = res.data.slice(0, 10);
+      this.facerecognition = (await dav.getFaceList('facerecognition')).slice(0, 10);
     },
 
     async getPlaces() {
-      const res = await axios.get<ICluster[]>(API.PLACE_LIST());
-      const places = res.data; // FIXME: performance
-      this.places = places.slice(0, 10);
+      this.places = (await dav.getPlaces()).slice(0, 10);
     },
 
     async getTags() {
-      const res = await axios.get<ICluster[]>(API.TAG_LIST());
-      const tags = res.data.sort((a, b) => b.count - a.count); // FIXME: performance
-      this.tags = tags.slice(0, 10);
+      this.tags = (await dav.getTags()).sort((a, b) => b.count - a.count).slice(0, 10);
     },
   },
 });

src/components/frame/Cluster.vue

@@ -79,11 +79,7 @@ export default defineComponent({
     },
 
     title() {
-      if (this.tag) {
-        return this.t('recognize', this.tag.name);
-      }
-
-      return this.data.name;
+      return this.data.display_name || this.data.name;
     },
 
     subtitle() {
@@ -109,26 +105,28 @@ export default defineComponent({
       return '';
     },
 
+    type() {
+      return this.data.cluster_type;
+    },
+
     plus() {
-      return this.data.cluster_type === 'plus';
+      return this.type === 'plus';
     },
 
     tag() {
-      return this.data.cluster_type === 'tags' && this.data;
+      return this.type === 'tags' && this.data;
     },
 
     face() {
-      return (
-        (this.data.cluster_type === 'recognize' || this.data.cluster_type === 'facerecognition') && (this.data as IFace)
-      );
+      return (this.type === 'recognize' || this.type === 'facerecognition') && (this.data as IFace);
     },
 
     place() {
-      return this.data.cluster_type === 'places' && this.data;
+      return this.type === 'places' && this.data;
     },
 
     album() {
-      return this.data.cluster_type === 'albums' && (this.data as IAlbum);
+      return this.type === 'albums' && (this.data as IAlbum);
     },
 
     /** Target URL to navigate to */

src/components/modal/FaceList.vue

@@ -90,10 +90,8 @@ export default defineComponent({
       this.list = null;
       this.search = '';
 
-      this.list = (await dav.getFaceList(this.$route.name as any)).filter((c: IFace) => {
-        const clusterName = String(c.name || c.cluster_id);
-        return c.user_id === this.user && clusterName !== this.name;
-      });
+      const faces = await dav.getFaceList(this.$route.name as any);
+      this.list = faces.filter((c: IFace) => c.user_id === this.user && String(c.name || c.cluster_id) !== this.name);
 
       this.fuse = new Fuse(this.list, { keys: ['name'] });
     },

src/components/top-matter/ClusterTopMatter.vue

@@ -35,7 +35,7 @@ export default defineComponent({
     name(): string | null {
       switch (this.$route.name) {
         case 'tags':
-          return this.$route.params.name;
+          return this.t('recognize', this.$route.params.name);
         case 'places':
           return this.$route.params.name?.split('-').slice(1).join('-');
         default:

src/components/viewer/ImageEditor.vue

@@ -5,8 +5,9 @@
 <script lang="ts">
 import { defineComponent, PropType } from 'vue';
 
-import { showError, showSuccess } from '@nextcloud/dialogs';
 import axios from '@nextcloud/axios';
+import { showError, showSuccess } from '@nextcloud/dialogs';
+import { getLanguage } from '@nextcloud/l10n';
 
 import { FilerobotImageEditorConfig } from 'react-filerobot-image-editor';
 
@@ -71,7 +72,7 @@ export default defineComponent({
         // Displayed tabs, disabling watermark and draw
         tabsIds: Object.values(TABS)
           .filter((tab) => ![TABS.WATERMARK, TABS.ANNOTATE].includes(tab))
-          .sort((a: string, b: string) => a.localeCompare(b)) as any[],
+          .sort((a: string, b: string) => a.localeCompare(b, getLanguage())) as any[],
 
         // onBeforeSave: this.onBeforeSave,
         onClose: this.onClose,

src/services/dav/albums.ts

@@ -2,7 +2,7 @@ import * as base from './base';
 
 import axios from '@nextcloud/axios';
 import { showError } from '@nextcloud/dialogs';
-import { translate as t } from '@nextcloud/l10n';
+import { translate as t, getLanguage } from '@nextcloud/l10n';
 
 import { IAlbum, IFileInfo, IPhoto } from '../../types';
 
@@ -35,7 +35,7 @@ export async function getAlbums(sort: 1 | 2 = 1, fileid?: number) {
   // Sort the response
   switch (sort) {
     case 2:
-      data.sort((a, b) => a.name.localeCompare(b.name, undefined, { sensitivity: 'base' }));
+      data.sort((a, b) => a.name.localeCompare(b.name, getLanguage(), { numeric: true }));
       break;
     default:
       data.sort((a, b) => b.created - a.created);

src/services/dav/tags.ts

@@ -2,7 +2,7 @@ import { ICluster } from '../../types';
 import { API } from '../API';
 import client from './client';
 
-import { translate as t } from '@nextcloud/l10n';
+import { translate as t, getLanguage } from '@nextcloud/l10n';
 import axios from '@nextcloud/axios';
 
 export interface ITag {
@@ -17,7 +17,15 @@ export interface ITag {
  * Get list of tags.
  */
 export async function getTags() {
-  return (await axios.get<ICluster[]>(API.TAG_LIST())).data;
+  const tags = (await axios.get<ICluster[]>(API.TAG_LIST())).data;
+
+  // Translate tag names
+  tags.forEach((tag) => (tag.display_name = t('recognize', tag.name)));
+
+  // Sort tags by display name (locale aware)
+  tags.sort((a, b) => a.display_name!.localeCompare(b.display_name!, getLanguage(), { numeric: true }));
+
+  return tags;
 }
 
 /**

src/services/file-utils.ts

@@ -21,6 +21,7 @@
  */
 import camelcase from 'camelcase';
 import { isNumber } from './utils/algo';
+import { getLanguage } from '@nextcloud/l10n';
 
 /**
  * Get an url encoded path
@@ -90,8 +91,8 @@ const sortCompare = function (fileInfo1, fileInfo2, key, asc = true) {
 
   // finally sort by name
   return asc
-    ? fileInfo1[key]?.toString()?.localeCompare(fileInfo2[key].toString(), globalThis.OC.getLanguage()) || 1
-    : -fileInfo1[key]?.toString()?.localeCompare(fileInfo2[key].toString(), globalThis.OC.getLanguage()) || -1;
+    ? fileInfo1[key]?.toString()?.localeCompare(fileInfo2[key].toString(), getLanguage()) || 1
+    : -fileInfo1[key]?.toString()?.localeCompare(fileInfo2[key].toString(), getLanguage()) || -1;
 };
 
 const genFileInfo = function (obj) {

src/types.ts

@@ -167,6 +167,8 @@ export interface ICluster {
   /** Name of cluster */
   name: string;
 
+  /** Display name, e.g. translated */
+  display_name?: string;
   /** Preview loading failed */
   previewError?: boolean;
 }