Moves AlbumsList component to metadata tab, changes album picker behaviour (click to add, click checkmark icon to select)

Signed-off-by: Alexander Saltykov <temp.kroogi@gmail.com>

src/App.vue

@@ -79,7 +79,6 @@ import Settings from './components/Settings.vue';
 import FirstStart from './components/FirstStart.vue';
 import Viewer from './components/viewer/Viewer.vue';
 import Metadata from './components/Metadata.vue';
-import AlbumsList from './components/AlbumsList.vue';
 import Sidebar from './components/Sidebar.vue';
 import EditMetadataModal from './components/modal/EditMetadataModal.vue';
 import NodeShareModal from './components/modal/NodeShareModal.vue';
@@ -145,7 +144,6 @@ export default defineComponent({
   data: () => ({
     navItems: [] as NavItem[],
     metadataComponent: null as any,
-    albumsListComponent: null as any,
     settingsOpen: false,
   }),
 
@@ -275,28 +273,6 @@ export default defineComponent({
         },
       })
     );
-    // Register sidebar albums tab
-    globalThis.OCA?.Files?.Sidebar?.registerTab(
-      new globalThis.OCA.Files.Sidebar.Tab({
-        id: 'memories-albums',
-        name: this.t('memories', 'Albums'),
-        icon: 'icon-details',
-
-        mount(el, fileInfo, context) {
-          this.albumsListComponent?.$destroy?.();
-          this.albumsListComponent = new Vue(AlbumsList as any);
-          this.albumsListComponent.$mount(el);
-          this.albumsListComponent.update(fileInfo);
-        },
-        update(fileInfo) {
-          this.albumsListComponent.update(fileInfo);
-        },
-        destroy() {
-          this.albumsListComponent?.$destroy?.();
-          this.albumsListComponent = null;
-        },
-      })
-    );
 
     // Check for native interface
     if (this.native) {

src/components/AlbumsList.vue

@@ -3,6 +3,17 @@
       <div class="loading-icon fill-block" v-if="loadingAlbums">
         <XLoadingIcon />
       </div>
+      <NcButton
+        :aria-label="t('memories', 'Add to album.')"
+        class="new-album-button"
+        type="tertiary"
+        @click="addToAlbum"
+      >
+        <template #icon>
+          <Plus />
+        </template>
+        {{ t('memories', 'Add to album') }}
+      </NcButton>
       <span class="empty-state" v-if="albums.length === 0">{{ t('memories', 'No albums') }}</span>
       <ul v-else class="albums-container">
         <NcListItem
@@ -22,17 +33,6 @@
           
         </NcListItem>
       </ul>
-      <NcButton
-        :aria-label="t('memories', 'Add to album.')"
-        class="new-album-button"
-        type="tertiary"
-        @click="addToAlbum"
-      >
-        <template #icon>
-          <Plus />
-        </template>
-        {{ t('memories', 'Add to album') }}
-      </NcButton>
       <AddToAlbumModal ref="addToAlbumModal" @added="loadAlbums" />
     </div>
   </template>
@@ -61,9 +61,19 @@
       Plus,
       AddToAlbumModal,
     },
+
+    props: {
+      fileid: {
+        type: Number,
+        required: true,
+      },
+      filename: {
+        type: String,
+        required: true,
+      },
+    },
   
     data: () => ({
-      fileid: -1,
       photo: {} as { id: number, name: string },
       albums: [] as IAlbum[],
       loadingAlbums: false,
@@ -71,12 +81,13 @@
   
     mounted() {
       subscribe('files:file:updated', this.handleFileUpdated);
+      this.update({ id: this.$props.fileid, name: this.$props.filename });
     },
   
     beforeDestroy() {
       unsubscribe('files:file:updated', this.handleFileUpdated);
     },
-  
+
     methods: {
       update(photo: { id: number, name: string }){
         this.photo = photo;
@@ -184,6 +195,10 @@
       justify-content: center;
       display: flex;
     }
+
+    .new-album-button {
+      margin: auto;
+    }
   
   </style>
   

src/components/Metadata.vue

@@ -38,6 +38,8 @@
     <div v-if="lat && lon" class="map">
       <iframe class="fill-block" :src="mapUrl" />
     </div>
+
+    <AlbumsList :fileid="fileid" :filename="filename" />
   </div>
 
   <div class="loading-icon fill-block" v-else>
@@ -65,6 +67,7 @@ import ImageIcon from 'vue-material-design-icons/Image.vue';
 import InfoIcon from 'vue-material-design-icons/InformationOutline.vue';
 import LocationIcon from 'vue-material-design-icons/MapMarker.vue';
 import TagIcon from 'vue-material-design-icons/Tag.vue';
+import AlbumsList from './AlbumsList.vue';
 import { API } from '../services/API';
 import type { IImageInfo, IPhoto } from '../types';
 
@@ -82,10 +85,12 @@ export default defineComponent({
     NcActions,
     NcActionButton,
     EditIcon,
+    AlbumsList,
   },
 
   data: () => ({
     fileid: null as number | null,
+    filename: '',
     exif: {} as { [prop: string]: any },
     baseInfo: {} as IImageInfo,
     state: 0,
@@ -330,6 +335,7 @@ export default defineComponent({
       if (state !== this.state) return res.data;
 
       this.fileid = res.data.fileid;
+      this.filename = res.data.basename;
       this.exif = res.data.exif || {};
       this.baseInfo = res.data;
       return this.baseInfo;

src/components/modal/AlbumPicker.vue

@@ -13,7 +13,7 @@
             albumName: album.name,
           })
         "
-        @click.prevent="pickAlbum(album)"
+        @click.prevent="() => {}"
       >
         <template #icon>
           <XImg v-if="album.last_added_photo !== -1" class="album__image" :src="toCoverUrl(album.last_added_photo)" />
@@ -23,11 +23,24 @@
         </template>
 
         <template #subtitle>
-          {{ getSubtitle(album) }}
+          <div @click.prevent="pickAlbum(album)">
+            {{ getSubtitle(album) }}
+          </div>
         </template>
 
         <template #extra>
-          <div v-if="selectedAlbums.has(album)" class="check-circle-icon">
+          <div
+            v-if="!selectedAlbums.has(album)"
+            class="check-circle-icon check-circle-icon--inactive"
+            @click.prevent="toggleAlbumSelection(album)"
+          >
+            <XImg :src="checkmarkIcon" />
+          </div>
+          <div
+            v-if="selectedAlbums.has(album)"
+            class="check-circle-icon"
+            @click.prevent="toggleAlbumSelection(album)"
+          >
             <XImg :src="checkmarkIcon" />
           </div>
         </template>
@@ -175,7 +188,7 @@ export default defineComponent({
       }
     },
 
-    pickAlbum(album: IAlbum) {
+    toggleAlbumSelection(album: IAlbum) {
       if (this.selectedAlbums.has(album)) {
         this.selectedAlbums.delete(album);
         this.unselectedAlbums.add(album)
@@ -194,6 +207,10 @@ export default defineComponent({
       }, 0); this.selectedAlbums.size;
       this.selectedCount = this.selectedAlbums.size;
     },
+
+    pickAlbum(album: IAlbum) {
+      this.$emit('select', [album], []);
+    },
     
     submit() {
       this.$emit('select', Array.from(this.selectedAlbums), Array.from(this.unselectedAlbums));
@@ -259,6 +276,7 @@ export default defineComponent({
 
     .check-circle-icon {
       border-radius: 50%;
+      border: 1px solid rgba(0, 255, 0, 0.1882352941);
       background-color: rgba(0, 255, 0, 0.1882352941);
       height: 34px;
       width: 34px;
@@ -266,6 +284,11 @@ export default defineComponent({
       align-items: center;
       justify-content: center;
 
+      &--inactive {
+        border: 1px solid rgba($color: black, $alpha: 0.1);
+        background-color: transparent;
+      }
+
       & img {
         width: 50%;
         height: 50%;