feat(web): favorite an asset (#939)

* feat(web): favorite an asset

* fix: test and linting

* fix: asset dto type

web/src/api/open-api/api.ts

@@ -1391,6 +1391,19 @@ export interface UpdateAlbumDto {
      */
     'albumThumbnailAssetId'?: string;
 }
+/**
+ * 
+ * @export
+ * @interface UpdateAssetDto
+ */
+export interface UpdateAssetDto {
+    /**
+     * 
+     * @type {boolean}
+     * @memberof UpdateAssetDto
+     */
+    'isFavorite': boolean;
+}
 /**
  * 
  * @export
@@ -3058,6 +3071,50 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
                 options: localVarRequestOptions,
             };
         },
+        /**
+         * Update an asset
+         * @summary 
+         * @param {string} assetId 
+         * @param {UpdateAssetDto} updateAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateAssetById: async (assetId: string, updateAssetDto: UpdateAssetDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
+            // verify required parameter 'assetId' is not null or undefined
+            assertParamExists('updateAssetById', 'assetId', assetId)
+            // verify required parameter 'updateAssetDto' is not null or undefined
+            assertParamExists('updateAssetById', 'updateAssetDto', updateAssetDto)
+            const localVarPath = `/asset/assetById/{assetId}`
+                .replace(`{${"assetId"}}`, encodeURIComponent(String(assetId)));
+            // use dummy base URL string because the URL constructor only accepts absolute URLs.
+            const localVarUrlObj = new URL(localVarPath, DUMMY_BASE_URL);
+            let baseOptions;
+            if (configuration) {
+                baseOptions = configuration.baseOptions;
+            }
+
+            const localVarRequestOptions = { method: 'PUT', ...baseOptions, ...options};
+            const localVarHeaderParameter = {} as any;
+            const localVarQueryParameter = {} as any;
+
+            // authentication bearer required
+            // http bearer authentication required
+            await setBearerAuthToObject(localVarHeaderParameter, configuration)
+
+
+    
+            localVarHeaderParameter['Content-Type'] = 'application/json';
+
+            setSearchParams(localVarUrlObj, localVarQueryParameter);
+            let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
+            localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
+            localVarRequestOptions.data = serializeDataIfNeeded(updateAssetDto, localVarRequestOptions, configuration)
+
+            return {
+                url: toPathString(localVarUrlObj),
+                options: localVarRequestOptions,
+            };
+        },
         /**
          * 
          * @param {any} assetData 
@@ -3279,6 +3336,18 @@ export const AssetApiFp = function(configuration?: Configuration) {
             const localVarAxiosArgs = await localVarAxiosParamCreator.serveFile(aid, did, isThumb, isWeb, options);
             return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
         },
+        /**
+         * Update an asset
+         * @summary 
+         * @param {string} assetId 
+         * @param {UpdateAssetDto} updateAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        async updateAssetById(assetId: string, updateAssetDto: UpdateAssetDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetResponseDto>> {
+            const localVarAxiosArgs = await localVarAxiosParamCreator.updateAssetById(assetId, updateAssetDto, options);
+            return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
+        },
         /**
          * 
          * @param {any} assetData 
@@ -3450,6 +3519,17 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
         serveFile(aid: string, did: string, isThumb?: boolean, isWeb?: boolean, options?: any): AxiosPromise<object> {
             return localVarFp.serveFile(aid, did, isThumb, isWeb, options).then((request) => request(axios, basePath));
         },
+        /**
+         * Update an asset
+         * @summary 
+         * @param {string} assetId 
+         * @param {UpdateAssetDto} updateAssetDto 
+         * @param {*} [options] Override http request option.
+         * @throws {RequiredError}
+         */
+        updateAssetById(assetId: string, updateAssetDto: UpdateAssetDto, options?: any): AxiosPromise<AssetResponseDto> {
+            return localVarFp.updateAssetById(assetId, updateAssetDto, options).then((request) => request(axios, basePath));
+        },
         /**
          * 
          * @param {any} assetData 
@@ -3652,6 +3732,19 @@ export class AssetApi extends BaseAPI {
         return AssetApiFp(this.configuration).serveFile(aid, did, isThumb, isWeb, options).then((request) => request(this.axios, this.basePath));
     }
 
+    /**
+     * Update an asset
+     * @summary 
+     * @param {string} assetId 
+     * @param {UpdateAssetDto} updateAssetDto 
+     * @param {*} [options] Override http request option.
+     * @throws {RequiredError}
+     * @memberof AssetApi
+     */
+    public updateAssetById(assetId: string, updateAssetDto: UpdateAssetDto, options?: AxiosRequestConfig) {
+        return AssetApiFp(this.configuration).updateAssetById(assetId, updateAssetDto, options).then((request) => request(this.axios, this.basePath));
+    }
+
     /**
      * 
      * @param {any} assetData 

web/src/lib/components/asset-viewer/asset-viewer-nav-bar.svelte

@@ -9,6 +9,14 @@
 	import CircleIconButton from '../shared-components/circle-icon-button.svelte';
 	import ContextMenu from '../shared-components/context-menu/context-menu.svelte';
 	import MenuOption from '../shared-components/context-menu/menu-option.svelte';
+	import Star from 'svelte-material-icons/Star.svelte';
+	import StarOutline from 'svelte-material-icons/StarOutline.svelte';
+	import { page } from '$app/stores';
+	import { AssetResponseDto } from '../../../api';
+
+	export let asset: AssetResponseDto;
+
+	const isOwner = asset.ownerId === $page.data.user.id;
 
 	const dispatch = createEventDispatcher();
 
@@ -38,8 +46,15 @@
 	</div>
 	<div class="text-white flex gap-2">
 		<CircleIconButton logo={CloudDownloadOutline} on:click={() => dispatch('download')} />
-		<CircleIconButton logo={DeleteOutline} on:click={() => dispatch('delete')} />
 		<CircleIconButton logo={InformationOutline} on:click={() => dispatch('showDetail')} />
+		{#if isOwner}
+			<CircleIconButton
+				logo={asset.isFavorite ? Star : StarOutline}
+				on:click={() => dispatch('favorite')}
+				title="Favorite"
+			/>
+		{/if}
+		<CircleIconButton logo={DeleteOutline} on:click={() => dispatch('delete')} />
 		<CircleIconButton logo={DotsVertical} on:click={(event) => showOptionsMenu(event)} />
 	</div>
 </div>

web/src/lib/components/asset-viewer/asset-viewer.svelte

@@ -178,6 +178,14 @@
 		}
 	};
 
+	const toggleFavorite = async () => {
+		const { data } = await api.assetApi.updateAssetById(asset.id, {
+			isFavorite: !asset.isFavorite
+		});
+
+		asset.isFavorite = data.isFavorite;
+	};
+
 	const openAlbumPicker = (shared: boolean) => {
 		isShowAlbumPicker = true;
 		addToSharedAlbum = shared;
@@ -218,10 +226,12 @@
 >
 	<div class="col-start-1 col-span-4 row-start-1 row-span-1 z-[1000] transition-transform">
 		<AsserViewerNavBar
+			{asset}
 			on:goBack={closeViewer}
 			on:showDetail={showDetailInfoHandler}
 			on:download={downloadFile}
 			on:delete={deleteAsset}
+			on:favorite={toggleFavorite}
 			on:addToAlbum={() => openAlbumPicker(false)}
 			on:addToSharedAlbum={() => openAlbumPicker(true)}
 		/>