mirror of
https://github.com/immich-app/immich
synced 2025-11-14 17:36:12 +00:00
refactor(server,web): time buckets for main timeline, archived, and favorites (1) (#3537)
* refactor: time buckets * feat(web): use new time bucket api * feat(web): use asset grid in archive/favorites * chore: open api * chore: clean up uuid validation * refactor(web): move memory lane to photos page * Update web/src/routes/(user)/archive/+page.svelte Co-authored-by: Sergey Kondrikov <sergey.kondrikov@gmail.com> * fix: hide archived photos on main timeline * fix: select exif info --------- Co-authored-by: Sergey Kondrikov <sergey.kondrikov@gmail.com>
This commit is contained in:
Jason Rasmussen
GitHub
parent
e5bdf671b5
commit
c6abef186c
51 changed files with 1516 additions and 1862 deletions
627
web/src/api/open-api/api.ts
generated
627
web/src/api/open-api/api.ts
generated
|
|
@ -410,44 +410,6 @@ export const AssetBulkUploadCheckResultReasonEnum = {
|
|||
|
||||
export type AssetBulkUploadCheckResultReasonEnum = typeof AssetBulkUploadCheckResultReasonEnum[keyof typeof AssetBulkUploadCheckResultReasonEnum];
|
||||
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface AssetCountByTimeBucket
|
||||
*/
|
||||
export interface AssetCountByTimeBucket {
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetCountByTimeBucket
|
||||
*/
|
||||
'count': number;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetCountByTimeBucket
|
||||
*/
|
||||
'timeBucket': string;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface AssetCountByTimeBucketResponseDto
|
||||
*/
|
||||
export interface AssetCountByTimeBucketResponseDto {
|
||||
/**
|
||||
*
|
||||
* @type {Array<AssetCountByTimeBucket>}
|
||||
* @memberof AssetCountByTimeBucketResponseDto
|
||||
*/
|
||||
'buckets': Array<AssetCountByTimeBucket>;
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof AssetCountByTimeBucketResponseDto
|
||||
*/
|
||||
'totalCount': number;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
|
|
@ -1286,58 +1248,6 @@ export interface ExifResponseDto {
|
|||
*/
|
||||
'timeZone'?: string | null;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface GetAssetByTimeBucketDto
|
||||
*/
|
||||
export interface GetAssetByTimeBucketDto {
|
||||
/**
|
||||
*
|
||||
* @type {Array<string>}
|
||||
* @memberof GetAssetByTimeBucketDto
|
||||
*/
|
||||
'timeBucket': Array<string>;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof GetAssetByTimeBucketDto
|
||||
*/
|
||||
'userId'?: string;
|
||||
/**
|
||||
* Include assets without thumbnails
|
||||
* @type {boolean}
|
||||
* @memberof GetAssetByTimeBucketDto
|
||||
*/
|
||||
'withoutThumbs'?: boolean;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface GetAssetCountByTimeBucketDto
|
||||
*/
|
||||
export interface GetAssetCountByTimeBucketDto {
|
||||
/**
|
||||
*
|
||||
* @type {TimeGroupEnum}
|
||||
* @memberof GetAssetCountByTimeBucketDto
|
||||
*/
|
||||
'timeGroup': TimeGroupEnum;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof GetAssetCountByTimeBucketDto
|
||||
*/
|
||||
'userId'?: string;
|
||||
/**
|
||||
* Include assets without thumbnails
|
||||
* @type {boolean}
|
||||
* @memberof GetAssetCountByTimeBucketDto
|
||||
*/
|
||||
'withoutThumbs'?: boolean;
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
|
|
@ -2850,18 +2760,37 @@ export const ThumbnailFormat = {
|
|||
export type ThumbnailFormat = typeof ThumbnailFormat[keyof typeof ThumbnailFormat];
|
||||
|
||||
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @interface TimeBucketResponseDto
|
||||
*/
|
||||
export interface TimeBucketResponseDto {
|
||||
/**
|
||||
*
|
||||
* @type {number}
|
||||
* @memberof TimeBucketResponseDto
|
||||
*/
|
||||
'count': number;
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof TimeBucketResponseDto
|
||||
*/
|
||||
'timeBucket': string;
|
||||
}
|
||||
/**
|
||||
*
|
||||
* @export
|
||||
* @enum {string}
|
||||
*/
|
||||
|
||||
export const TimeGroupEnum = {
|
||||
Day: 'day',
|
||||
Month: 'month'
|
||||
export const TimeBucketSize = {
|
||||
Day: 'DAY',
|
||||
Month: 'MONTH'
|
||||
} as const;
|
||||
|
||||
export type TimeGroupEnum = typeof TimeGroupEnum[keyof typeof TimeGroupEnum];
|
||||
export type TimeBucketSize = typeof TimeBucketSize[keyof typeof TimeBucketSize];
|
||||
|
||||
|
||||
/**
|
||||
|
|
@ -5047,94 +4976,6 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
|
|||
options: localVarRequestOptions,
|
||||
};
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {GetAssetByTimeBucketDto} getAssetByTimeBucketDto
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getAssetByTimeBucket: async (getAssetByTimeBucketDto: GetAssetByTimeBucketDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||
// verify required parameter 'getAssetByTimeBucketDto' is not null or undefined
|
||||
assertParamExists('getAssetByTimeBucket', 'getAssetByTimeBucketDto', getAssetByTimeBucketDto)
|
||||
const localVarPath = `/asset/time-bucket`;
|
||||
// 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: 'POST', ...baseOptions, ...options};
|
||||
const localVarHeaderParameter = {} as any;
|
||||
const localVarQueryParameter = {} as any;
|
||||
|
||||
// authentication cookie required
|
||||
|
||||
// authentication api_key required
|
||||
await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
|
||||
|
||||
// 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(getAssetByTimeBucketDto, localVarRequestOptions, configuration)
|
||||
|
||||
return {
|
||||
url: toPathString(localVarUrlObj),
|
||||
options: localVarRequestOptions,
|
||||
};
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {GetAssetCountByTimeBucketDto} getAssetCountByTimeBucketDto
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getAssetCountByTimeBucket: async (getAssetCountByTimeBucketDto: GetAssetCountByTimeBucketDto, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||
// verify required parameter 'getAssetCountByTimeBucketDto' is not null or undefined
|
||||
assertParamExists('getAssetCountByTimeBucket', 'getAssetCountByTimeBucketDto', getAssetCountByTimeBucketDto)
|
||||
const localVarPath = `/asset/count-by-time-bucket`;
|
||||
// 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: 'POST', ...baseOptions, ...options};
|
||||
const localVarHeaderParameter = {} as any;
|
||||
const localVarQueryParameter = {} as any;
|
||||
|
||||
// authentication cookie required
|
||||
|
||||
// authentication api_key required
|
||||
await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
|
||||
|
||||
// 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(getAssetCountByTimeBucketDto, localVarRequestOptions, configuration)
|
||||
|
||||
return {
|
||||
url: toPathString(localVarUrlObj),
|
||||
options: localVarRequestOptions,
|
||||
};
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
|
|
@ -5264,6 +5105,83 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
|
|||
|
||||
|
||||
|
||||
setSearchParams(localVarUrlObj, localVarQueryParameter);
|
||||
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
|
||||
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
|
||||
|
||||
return {
|
||||
url: toPathString(localVarUrlObj),
|
||||
options: localVarRequestOptions,
|
||||
};
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {TimeBucketSize} size
|
||||
* @param {string} timeBucket
|
||||
* @param {string} [userId]
|
||||
* @param {string} [albumId]
|
||||
* @param {boolean} [isArchived]
|
||||
* @param {boolean} [isFavorite]
|
||||
* @param {string} [key]
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getByTimeBucket: async (size: TimeBucketSize, timeBucket: string, userId?: string, albumId?: string, isArchived?: boolean, isFavorite?: boolean, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||
// verify required parameter 'size' is not null or undefined
|
||||
assertParamExists('getByTimeBucket', 'size', size)
|
||||
// verify required parameter 'timeBucket' is not null or undefined
|
||||
assertParamExists('getByTimeBucket', 'timeBucket', timeBucket)
|
||||
const localVarPath = `/asset/time-bucket`;
|
||||
// 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: 'GET', ...baseOptions, ...options};
|
||||
const localVarHeaderParameter = {} as any;
|
||||
const localVarQueryParameter = {} as any;
|
||||
|
||||
// authentication cookie required
|
||||
|
||||
// authentication api_key required
|
||||
await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
|
||||
|
||||
// authentication bearer required
|
||||
// http bearer authentication required
|
||||
await setBearerAuthToObject(localVarHeaderParameter, configuration)
|
||||
|
||||
if (size !== undefined) {
|
||||
localVarQueryParameter['size'] = size;
|
||||
}
|
||||
|
||||
if (userId !== undefined) {
|
||||
localVarQueryParameter['userId'] = userId;
|
||||
}
|
||||
|
||||
if (albumId !== undefined) {
|
||||
localVarQueryParameter['albumId'] = albumId;
|
||||
}
|
||||
|
||||
if (isArchived !== undefined) {
|
||||
localVarQueryParameter['isArchived'] = isArchived;
|
||||
}
|
||||
|
||||
if (isFavorite !== undefined) {
|
||||
localVarQueryParameter['isFavorite'] = isFavorite;
|
||||
}
|
||||
|
||||
if (timeBucket !== undefined) {
|
||||
localVarQueryParameter['timeBucket'] = timeBucket;
|
||||
}
|
||||
|
||||
if (key !== undefined) {
|
||||
localVarQueryParameter['key'] = key;
|
||||
}
|
||||
|
||||
|
||||
|
||||
setSearchParams(localVarUrlObj, localVarQueryParameter);
|
||||
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
|
||||
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
|
||||
|
|
@ -5507,6 +5425,76 @@ export const AssetApiAxiosParamCreator = function (configuration?: Configuration
|
|||
|
||||
|
||||
|
||||
setSearchParams(localVarUrlObj, localVarQueryParameter);
|
||||
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
|
||||
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
|
||||
|
||||
return {
|
||||
url: toPathString(localVarUrlObj),
|
||||
options: localVarRequestOptions,
|
||||
};
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {TimeBucketSize} size
|
||||
* @param {string} [userId]
|
||||
* @param {string} [albumId]
|
||||
* @param {boolean} [isArchived]
|
||||
* @param {boolean} [isFavorite]
|
||||
* @param {string} [key]
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getTimeBuckets: async (size: TimeBucketSize, userId?: string, albumId?: string, isArchived?: boolean, isFavorite?: boolean, key?: string, options: AxiosRequestConfig = {}): Promise<RequestArgs> => {
|
||||
// verify required parameter 'size' is not null or undefined
|
||||
assertParamExists('getTimeBuckets', 'size', size)
|
||||
const localVarPath = `/asset/time-buckets`;
|
||||
// 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: 'GET', ...baseOptions, ...options};
|
||||
const localVarHeaderParameter = {} as any;
|
||||
const localVarQueryParameter = {} as any;
|
||||
|
||||
// authentication cookie required
|
||||
|
||||
// authentication api_key required
|
||||
await setApiKeyToObject(localVarHeaderParameter, "x-api-key", configuration)
|
||||
|
||||
// authentication bearer required
|
||||
// http bearer authentication required
|
||||
await setBearerAuthToObject(localVarHeaderParameter, configuration)
|
||||
|
||||
if (size !== undefined) {
|
||||
localVarQueryParameter['size'] = size;
|
||||
}
|
||||
|
||||
if (userId !== undefined) {
|
||||
localVarQueryParameter['userId'] = userId;
|
||||
}
|
||||
|
||||
if (albumId !== undefined) {
|
||||
localVarQueryParameter['albumId'] = albumId;
|
||||
}
|
||||
|
||||
if (isArchived !== undefined) {
|
||||
localVarQueryParameter['isArchived'] = isArchived;
|
||||
}
|
||||
|
||||
if (isFavorite !== undefined) {
|
||||
localVarQueryParameter['isFavorite'] = isFavorite;
|
||||
}
|
||||
|
||||
if (key !== undefined) {
|
||||
localVarQueryParameter['key'] = key;
|
||||
}
|
||||
|
||||
|
||||
|
||||
setSearchParams(localVarUrlObj, localVarQueryParameter);
|
||||
let headersFromBaseOptions = baseOptions && baseOptions.headers ? baseOptions.headers : {};
|
||||
localVarRequestOptions.headers = {...localVarHeaderParameter, ...headersFromBaseOptions, ...options.headers};
|
||||
|
|
@ -5969,26 +5957,6 @@ export const AssetApiFp = function(configuration?: Configuration) {
|
|||
const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetById(id, key, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {GetAssetByTimeBucketDto} getAssetByTimeBucketDto
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
async getAssetByTimeBucket(getAssetByTimeBucketDto: GetAssetByTimeBucketDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetResponseDto>>> {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetByTimeBucket(getAssetByTimeBucketDto, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {GetAssetCountByTimeBucketDto} getAssetCountByTimeBucketDto
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
async getAssetCountByTimeBucket(getAssetCountByTimeBucketDto: GetAssetCountByTimeBucketDto, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<AssetCountByTimeBucketResponseDto>> {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetCountByTimeBucket(getAssetCountByTimeBucketDto, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
|
|
@ -6021,6 +5989,22 @@ export const AssetApiFp = function(configuration?: Configuration) {
|
|||
const localVarAxiosArgs = await localVarAxiosParamCreator.getAssetThumbnail(id, format, key, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {TimeBucketSize} size
|
||||
* @param {string} timeBucket
|
||||
* @param {string} [userId]
|
||||
* @param {string} [albumId]
|
||||
* @param {boolean} [isArchived]
|
||||
* @param {boolean} [isFavorite]
|
||||
* @param {string} [key]
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
async getByTimeBucket(size: TimeBucketSize, timeBucket: string, userId?: string, albumId?: string, isArchived?: boolean, isFavorite?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<AssetResponseDto>>> {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.getByTimeBucket(size, timeBucket, userId, albumId, isArchived, isFavorite, key, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
|
|
@ -6075,6 +6059,21 @@ export const AssetApiFp = function(configuration?: Configuration) {
|
|||
const localVarAxiosArgs = await localVarAxiosParamCreator.getMemoryLane(timestamp, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {TimeBucketSize} size
|
||||
* @param {string} [userId]
|
||||
* @param {string} [albumId]
|
||||
* @param {boolean} [isArchived]
|
||||
* @param {boolean} [isFavorite]
|
||||
* @param {string} [key]
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
async getTimeBuckets(size: TimeBucketSize, userId?: string, albumId?: string, isArchived?: boolean, isFavorite?: boolean, key?: string, options?: AxiosRequestConfig): Promise<(axios?: AxiosInstance, basePath?: string) => AxiosPromise<Array<TimeBucketResponseDto>>> {
|
||||
const localVarAxiosArgs = await localVarAxiosParamCreator.getTimeBuckets(size, userId, albumId, isArchived, isFavorite, key, options);
|
||||
return createRequestFunction(localVarAxiosArgs, globalAxios, BASE_PATH, configuration);
|
||||
},
|
||||
/**
|
||||
* Get all asset of a device that are in the database, ID only.
|
||||
* @param {string} deviceId
|
||||
|
|
@ -6242,24 +6241,6 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
|
|||
getAssetById(id: string, key?: string, options?: any): AxiosPromise<AssetResponseDto> {
|
||||
return localVarFp.getAssetById(id, key, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {GetAssetByTimeBucketDto} getAssetByTimeBucketDto
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getAssetByTimeBucket(getAssetByTimeBucketDto: GetAssetByTimeBucketDto, options?: any): AxiosPromise<Array<AssetResponseDto>> {
|
||||
return localVarFp.getAssetByTimeBucket(getAssetByTimeBucketDto, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {GetAssetCountByTimeBucketDto} getAssetCountByTimeBucketDto
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getAssetCountByTimeBucket(getAssetCountByTimeBucketDto: GetAssetCountByTimeBucketDto, options?: any): AxiosPromise<AssetCountByTimeBucketResponseDto> {
|
||||
return localVarFp.getAssetCountByTimeBucket(getAssetCountByTimeBucketDto, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
|
|
@ -6289,6 +6270,21 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
|
|||
getAssetThumbnail(id: string, format?: ThumbnailFormat, key?: string, options?: any): AxiosPromise<File> {
|
||||
return localVarFp.getAssetThumbnail(id, format, key, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {TimeBucketSize} size
|
||||
* @param {string} timeBucket
|
||||
* @param {string} [userId]
|
||||
* @param {string} [albumId]
|
||||
* @param {boolean} [isArchived]
|
||||
* @param {boolean} [isFavorite]
|
||||
* @param {string} [key]
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getByTimeBucket(size: TimeBucketSize, timeBucket: string, userId?: string, albumId?: string, isArchived?: boolean, isFavorite?: boolean, key?: string, options?: any): AxiosPromise<Array<AssetResponseDto>> {
|
||||
return localVarFp.getByTimeBucket(size, timeBucket, userId, albumId, isArchived, isFavorite, key, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
|
|
@ -6338,6 +6334,20 @@ export const AssetApiFactory = function (configuration?: Configuration, basePath
|
|||
getMemoryLane(timestamp: string, options?: any): AxiosPromise<Array<MemoryLaneResponseDto>> {
|
||||
return localVarFp.getMemoryLane(timestamp, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
*
|
||||
* @param {TimeBucketSize} size
|
||||
* @param {string} [userId]
|
||||
* @param {string} [albumId]
|
||||
* @param {boolean} [isArchived]
|
||||
* @param {boolean} [isFavorite]
|
||||
* @param {string} [key]
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
*/
|
||||
getTimeBuckets(size: TimeBucketSize, userId?: string, albumId?: string, isArchived?: boolean, isFavorite?: boolean, key?: string, options?: any): AxiosPromise<Array<TimeBucketResponseDto>> {
|
||||
return localVarFp.getTimeBuckets(size, userId, albumId, isArchived, isFavorite, key, options).then((request) => request(axios, basePath));
|
||||
},
|
||||
/**
|
||||
* Get all asset of a device that are in the database, ID only.
|
||||
* @param {string} deviceId
|
||||
|
|
@ -6586,34 +6596,6 @@ export interface AssetApiGetAssetByIdRequest {
|
|||
readonly key?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Request parameters for getAssetByTimeBucket operation in AssetApi.
|
||||
* @export
|
||||
* @interface AssetApiGetAssetByTimeBucketRequest
|
||||
*/
|
||||
export interface AssetApiGetAssetByTimeBucketRequest {
|
||||
/**
|
||||
*
|
||||
* @type {GetAssetByTimeBucketDto}
|
||||
* @memberof AssetApiGetAssetByTimeBucket
|
||||
*/
|
||||
readonly getAssetByTimeBucketDto: GetAssetByTimeBucketDto
|
||||
}
|
||||
|
||||
/**
|
||||
* Request parameters for getAssetCountByTimeBucket operation in AssetApi.
|
||||
* @export
|
||||
* @interface AssetApiGetAssetCountByTimeBucketRequest
|
||||
*/
|
||||
export interface AssetApiGetAssetCountByTimeBucketRequest {
|
||||
/**
|
||||
*
|
||||
* @type {GetAssetCountByTimeBucketDto}
|
||||
* @memberof AssetApiGetAssetCountByTimeBucket
|
||||
*/
|
||||
readonly getAssetCountByTimeBucketDto: GetAssetCountByTimeBucketDto
|
||||
}
|
||||
|
||||
/**
|
||||
* Request parameters for getAssetStats operation in AssetApi.
|
||||
* @export
|
||||
|
|
@ -6663,6 +6645,62 @@ export interface AssetApiGetAssetThumbnailRequest {
|
|||
readonly key?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Request parameters for getByTimeBucket operation in AssetApi.
|
||||
* @export
|
||||
* @interface AssetApiGetByTimeBucketRequest
|
||||
*/
|
||||
export interface AssetApiGetByTimeBucketRequest {
|
||||
/**
|
||||
*
|
||||
* @type {TimeBucketSize}
|
||||
* @memberof AssetApiGetByTimeBucket
|
||||
*/
|
||||
readonly size: TimeBucketSize
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetApiGetByTimeBucket
|
||||
*/
|
||||
readonly timeBucket: string
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetApiGetByTimeBucket
|
||||
*/
|
||||
readonly userId?: string
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetApiGetByTimeBucket
|
||||
*/
|
||||
readonly albumId?: string
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {boolean}
|
||||
* @memberof AssetApiGetByTimeBucket
|
||||
*/
|
||||
readonly isArchived?: boolean
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {boolean}
|
||||
* @memberof AssetApiGetByTimeBucket
|
||||
*/
|
||||
readonly isFavorite?: boolean
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetApiGetByTimeBucket
|
||||
*/
|
||||
readonly key?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Request parameters for getDownloadInfo operation in AssetApi.
|
||||
* @export
|
||||
|
|
@ -6747,6 +6785,55 @@ export interface AssetApiGetMemoryLaneRequest {
|
|||
readonly timestamp: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Request parameters for getTimeBuckets operation in AssetApi.
|
||||
* @export
|
||||
* @interface AssetApiGetTimeBucketsRequest
|
||||
*/
|
||||
export interface AssetApiGetTimeBucketsRequest {
|
||||
/**
|
||||
*
|
||||
* @type {TimeBucketSize}
|
||||
* @memberof AssetApiGetTimeBuckets
|
||||
*/
|
||||
readonly size: TimeBucketSize
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetApiGetTimeBuckets
|
||||
*/
|
||||
readonly userId?: string
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetApiGetTimeBuckets
|
||||
*/
|
||||
readonly albumId?: string
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {boolean}
|
||||
* @memberof AssetApiGetTimeBuckets
|
||||
*/
|
||||
readonly isArchived?: boolean
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {boolean}
|
||||
* @memberof AssetApiGetTimeBuckets
|
||||
*/
|
||||
readonly isFavorite?: boolean
|
||||
|
||||
/**
|
||||
*
|
||||
* @type {string}
|
||||
* @memberof AssetApiGetTimeBuckets
|
||||
*/
|
||||
readonly key?: string
|
||||
}
|
||||
|
||||
/**
|
||||
* Request parameters for getUserAssetsByDeviceId operation in AssetApi.
|
||||
* @export
|
||||
|
|
@ -7038,28 +7125,6 @@ export class AssetApi extends BaseAPI {
|
|||
return AssetApiFp(this.configuration).getAssetById(requestParameters.id, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {AssetApiGetAssetByTimeBucketRequest} requestParameters Request parameters.
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
* @memberof AssetApi
|
||||
*/
|
||||
public getAssetByTimeBucket(requestParameters: AssetApiGetAssetByTimeBucketRequest, options?: AxiosRequestConfig) {
|
||||
return AssetApiFp(this.configuration).getAssetByTimeBucket(requestParameters.getAssetByTimeBucketDto, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {AssetApiGetAssetCountByTimeBucketRequest} requestParameters Request parameters.
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
* @memberof AssetApi
|
||||
*/
|
||||
public getAssetCountByTimeBucket(requestParameters: AssetApiGetAssetCountByTimeBucketRequest, options?: AxiosRequestConfig) {
|
||||
return AssetApiFp(this.configuration).getAssetCountByTimeBucket(requestParameters.getAssetCountByTimeBucketDto, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
|
|
@ -7092,6 +7157,17 @@ export class AssetApi extends BaseAPI {
|
|||
return AssetApiFp(this.configuration).getAssetThumbnail(requestParameters.id, requestParameters.format, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {AssetApiGetByTimeBucketRequest} requestParameters Request parameters.
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
* @memberof AssetApi
|
||||
*/
|
||||
public getByTimeBucket(requestParameters: AssetApiGetByTimeBucketRequest, options?: AxiosRequestConfig) {
|
||||
return AssetApiFp(this.configuration).getByTimeBucket(requestParameters.size, requestParameters.timeBucket, requestParameters.userId, requestParameters.albumId, requestParameters.isArchived, requestParameters.isFavorite, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {*} [options] Override http request option.
|
||||
|
|
@ -7145,6 +7221,17 @@ export class AssetApi extends BaseAPI {
|
|||
return AssetApiFp(this.configuration).getMemoryLane(requestParameters.timestamp, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
*
|
||||
* @param {AssetApiGetTimeBucketsRequest} requestParameters Request parameters.
|
||||
* @param {*} [options] Override http request option.
|
||||
* @throws {RequiredError}
|
||||
* @memberof AssetApi
|
||||
*/
|
||||
public getTimeBuckets(requestParameters: AssetApiGetTimeBucketsRequest, options?: AxiosRequestConfig) {
|
||||
return AssetApiFp(this.configuration).getTimeBuckets(requestParameters.size, requestParameters.userId, requestParameters.albumId, requestParameters.isArchived, requestParameters.isFavorite, requestParameters.key, options).then((request) => request(this.axios, this.basePath));
|
||||
}
|
||||
|
||||
/**
|
||||
* Get all asset of a device that are in the database, ID only.
|
||||
* @param {AssetApiGetUserAssetsByDeviceIdRequest} requestParameters Request parameters.
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
import { AssetStore } from '$lib/stores/assets.store';
|
||||
import { locale } from '$lib/stores/preferences.store';
|
||||
import { openFileUploadDialog } from '$lib/utils/file-uploader';
|
||||
import { TimeGroupEnum, type AssetResponseDto } from '@api';
|
||||
import { TimeBucketSize, type AssetResponseDto } from '@api';
|
||||
import { createEventDispatcher, onMount } from 'svelte';
|
||||
import { quintOut } from 'svelte/easing';
|
||||
import { fly } from 'svelte/transition';
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
const assetStore = new AssetStore({ timeGroup: TimeGroupEnum.Month });
|
||||
const assetStore = new AssetStore({ size: TimeBucketSize.Month });
|
||||
const assetInteractionStore = createAssetInteractionStore();
|
||||
const { selectedAssets, assetsInAlbumState } = assetInteractionStore;
|
||||
|
||||
|
|
|
|||
|
|
@ -7,6 +7,9 @@
|
|||
export let hideNavbar = false;
|
||||
export let showUploadButton = false;
|
||||
export let title: string | undefined = undefined;
|
||||
export let scrollbar = true;
|
||||
|
||||
$: scrollbarClass = scrollbar ? 'immich-scrollbar p-4 pb-8' : 'scrollbar-hidden pl-4';
|
||||
</script>
|
||||
|
||||
<header>
|
||||
|
|
@ -32,7 +35,7 @@
|
|||
<slot name="buttons" />
|
||||
</div>
|
||||
|
||||
<div class="immich-scrollbar absolute top-16 h-[calc(100%-theme(spacing.16))] w-full overflow-y-auto p-4 pb-8">
|
||||
<div class="{scrollbarClass} absolute top-16 h-[calc(100%-theme(spacing.16))] w-full overflow-y-auto">
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -274,7 +274,7 @@
|
|||
<!-- Right margin MUST be equal to the width of immich-scrubbable-scrollbar -->
|
||||
<section
|
||||
id="asset-grid"
|
||||
class="scrollbar-hidden ml-4 mr-[60px] overflow-y-auto pb-4"
|
||||
class="scrollbar-hidden ml-4 mr-[60px] h-full overflow-y-auto pb-4"
|
||||
bind:clientHeight={viewport.height}
|
||||
bind:clientWidth={viewport.width}
|
||||
bind:this={element}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<script lang="ts">
|
||||
import empty1Url from '$lib/assets/empty-1.svg';
|
||||
|
||||
export let actionHandler: undefined | (() => Promise<void>) = undefined;
|
||||
export let actionHandler: undefined | (() => unknown) = undefined;
|
||||
export let text = '';
|
||||
export let alt = '';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
import { api, AssetResponseDto, GetAssetCountByTimeBucketDto } from '@api';
|
||||
import { api, AssetApiGetTimeBucketsRequest, AssetResponseDto } from '@api';
|
||||
import { writable } from 'svelte/store';
|
||||
import { handleError } from '../utils/handle-error';
|
||||
|
||||
|
|
@ -9,7 +9,7 @@ export enum BucketPosition {
|
|||
Unknown = 'unknown',
|
||||
}
|
||||
|
||||
export type AssetStoreOptions = GetAssetCountByTimeBucketDto;
|
||||
export type AssetStoreOptions = AssetApiGetTimeBucketsRequest;
|
||||
|
||||
export interface Viewport {
|
||||
width: number;
|
||||
|
|
@ -51,11 +51,9 @@ export class AssetStore {
|
|||
subscribe = this.store$.subscribe;
|
||||
|
||||
async init(viewport: Viewport) {
|
||||
const { data } = await api.assetApi.getAssetCountByTimeBucket({
|
||||
getAssetCountByTimeBucketDto: { ...this.options, withoutThumbs: true },
|
||||
});
|
||||
const { data: buckets } = await api.assetApi.getTimeBuckets(this.options);
|
||||
|
||||
this.buckets = data.buckets.map((bucket) => {
|
||||
this.buckets = buckets.map((bucket) => {
|
||||
const unwrappedWidth = (3 / 2) * bucket.count * THUMBNAIL_HEIGHT * (7 / 10);
|
||||
const rows = Math.ceil(unwrappedWidth / viewport.width);
|
||||
const height = rows * THUMBNAIL_HEIGHT;
|
||||
|
|
@ -101,14 +99,8 @@ export class AssetStore {
|
|||
|
||||
bucket.cancelToken = new AbortController();
|
||||
|
||||
const { data: assets } = await api.assetApi.getAssetByTimeBucket(
|
||||
{
|
||||
getAssetByTimeBucketDto: {
|
||||
timeBucket: [bucketDate],
|
||||
...this.options,
|
||||
withoutThumbs: true,
|
||||
},
|
||||
},
|
||||
const { data: assets } = await api.assetApi.getByTimeBucket(
|
||||
{ ...this.options, timeBucket: bucketDate },
|
||||
{ signal: bucket.cancelToken.signal },
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -6,70 +6,55 @@
|
|||
import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
|
||||
import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
|
||||
import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
|
||||
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||
import SelectAll from 'svelte-material-icons/SelectAll.svelte';
|
||||
import { archivedAsset } from '$lib/stores/archived-asset.store';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { api, AssetResponseDto } from '@api';
|
||||
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
|
||||
import { AssetStore } from '$lib/stores/assets.store';
|
||||
import { api, TimeBucketSize } from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import Plus from 'svelte-material-icons/Plus.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
|
||||
export let data: PageData;
|
||||
let assetCount = 1;
|
||||
|
||||
let selectedAssets: Set<AssetResponseDto> = new Set();
|
||||
$: isMultiSelectionMode = selectedAssets.size > 0;
|
||||
$: isAllFavorite = Array.from(selectedAssets).every((asset) => asset.isFavorite);
|
||||
const assetStore = new AssetStore({ size: TimeBucketSize.Month, isArchived: true });
|
||||
const assetInteractionStore = createAssetInteractionStore();
|
||||
const { isMultiSelectState, selectedAssets } = assetInteractionStore;
|
||||
|
||||
$: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const { data: assets } = await api.assetApi.getAllAssets({
|
||||
isArchived: true,
|
||||
withoutThumbs: true,
|
||||
});
|
||||
$archivedAsset = assets;
|
||||
} catch {
|
||||
handleError(Error, 'Unable to load archived assets');
|
||||
}
|
||||
const { data: stats } = await api.assetApi.getAssetStats({ isArchived: true });
|
||||
assetCount = stats.total;
|
||||
});
|
||||
|
||||
const onAssetDelete = (assetId: string) => {
|
||||
$archivedAsset = $archivedAsset.filter((a) => a.id !== assetId);
|
||||
};
|
||||
const handleSelectAll = () => {
|
||||
selectedAssets = new Set($archivedAsset);
|
||||
};
|
||||
</script>
|
||||
|
||||
<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode} title={data.meta.title}>
|
||||
<!-- Empty Message -->
|
||||
{#if $archivedAsset.length === 0}
|
||||
{#if $isMultiSelectState}
|
||||
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
|
||||
<ArchiveAction unarchive onAssetArchive={(asset) => assetStore.removeAsset(asset.id)} />
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {assetStore} {assetInteractionStore} />
|
||||
<AssetSelectContextMenu icon={Plus} title="Add">
|
||||
<AddToAlbum />
|
||||
<AddToAlbum shared />
|
||||
</AssetSelectContextMenu>
|
||||
<DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
|
||||
<AssetSelectContextMenu icon={DotsVertical} title="Add">
|
||||
<DownloadAction menuItem />
|
||||
<FavoriteAction menuItem removeFavorite={isAllFavorite} />
|
||||
</AssetSelectContextMenu>
|
||||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
|
||||
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={!assetCount}>
|
||||
{#if assetCount}
|
||||
<AssetGrid {assetStore} {assetInteractionStore} />
|
||||
{:else}
|
||||
<EmptyPlaceholder text="Archive photos and videos to hide them from your Photos view" alt="Empty archive" />
|
||||
{/if}
|
||||
|
||||
<svelte:fragment slot="header">
|
||||
{#if isMultiSelectionMode}
|
||||
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
|
||||
<ArchiveAction unarchive onAssetArchive={(asset) => onAssetDelete(asset.id)} />
|
||||
<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
|
||||
<CreateSharedLink />
|
||||
<AssetSelectContextMenu icon={Plus} title="Add">
|
||||
<AddToAlbum />
|
||||
<AddToAlbum shared />
|
||||
</AssetSelectContextMenu>
|
||||
<DeleteAssets {onAssetDelete} />
|
||||
<AssetSelectContextMenu icon={DotsVertical} title="Add">
|
||||
<DownloadAction menuItem />
|
||||
<FavoriteAction menuItem removeFavorite={isAllFavorite} />
|
||||
</AssetSelectContextMenu>
|
||||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
|
||||
<GalleryViewer assets={$archivedAsset} bind:selectedAssets viewFrom="archive-page" />
|
||||
</UserPageLayout>
|
||||
|
|
|
|||
|
|
@ -6,60 +6,45 @@
|
|||
import DeleteAssets from '$lib/components/photos-page/actions/delete-assets.svelte';
|
||||
import DownloadAction from '$lib/components/photos-page/actions/download-action.svelte';
|
||||
import FavoriteAction from '$lib/components/photos-page/actions/favorite-action.svelte';
|
||||
import SelectAllAssets from '$lib/components/photos-page/actions/select-all-assets.svelte';
|
||||
import AssetGrid from '$lib/components/photos-page/asset-grid.svelte';
|
||||
import AssetSelectContextMenu from '$lib/components/photos-page/asset-select-context-menu.svelte';
|
||||
import AssetSelectControlBar from '$lib/components/photos-page/asset-select-control-bar.svelte';
|
||||
import EmptyPlaceholder from '$lib/components/shared-components/empty-placeholder.svelte';
|
||||
import GalleryViewer from '$lib/components/shared-components/gallery-viewer/gallery-viewer.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { api, AssetResponseDto } from '@api';
|
||||
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
|
||||
import { AssetStore } from '$lib/stores/assets.store';
|
||||
import { api, TimeBucketSize } from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import Plus from 'svelte-material-icons/Plus.svelte';
|
||||
import Error from '../../+error.svelte';
|
||||
import type { PageData } from './$types';
|
||||
import CircleIconButton from '$lib/components/elements/buttons/circle-icon-button.svelte';
|
||||
import SelectAll from 'svelte-material-icons/SelectAll.svelte';
|
||||
|
||||
let favorites: AssetResponseDto[] = [];
|
||||
let selectedAssets: Set<AssetResponseDto> = new Set();
|
||||
|
||||
export let data: PageData;
|
||||
let assetCount = 1;
|
||||
|
||||
$: isMultiSelectionMode = selectedAssets.size > 0;
|
||||
$: isAllArchive = Array.from(selectedAssets).every((asset) => asset.isArchived);
|
||||
const assetStore = new AssetStore({ size: TimeBucketSize.Month, isFavorite: true });
|
||||
const assetInteractionStore = createAssetInteractionStore();
|
||||
const { isMultiSelectState, selectedAssets } = assetInteractionStore;
|
||||
|
||||
$: isAllArchive = Array.from($selectedAssets).every((asset) => asset.isArchived);
|
||||
|
||||
onMount(async () => {
|
||||
try {
|
||||
const { data: assets } = await api.assetApi.getAllAssets({
|
||||
isFavorite: true,
|
||||
withoutThumbs: true,
|
||||
});
|
||||
favorites = assets;
|
||||
} catch {
|
||||
handleError(Error, 'Unable to load favorites');
|
||||
}
|
||||
const { data: stats } = await api.assetApi.getAssetStats({ isFavorite: true });
|
||||
assetCount = stats.total;
|
||||
});
|
||||
|
||||
const handleSelectAll = () => {
|
||||
selectedAssets = new Set(favorites);
|
||||
};
|
||||
|
||||
const onAssetDelete = (assetId: string) => {
|
||||
favorites = favorites.filter((a) => a.id !== assetId);
|
||||
};
|
||||
</script>
|
||||
|
||||
<!-- Multiselection mode app bar -->
|
||||
{#if isMultiSelectionMode}
|
||||
<AssetSelectControlBar assets={selectedAssets} clearSelect={() => (selectedAssets = new Set())}>
|
||||
<FavoriteAction removeFavorite onAssetFavorite={(asset) => onAssetDelete(asset.id)} />
|
||||
{#if $isMultiSelectState}
|
||||
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
|
||||
<FavoriteAction removeFavorite onAssetFavorite={(asset) => assetStore.removeAsset(asset.id)} />
|
||||
<CreateSharedLink />
|
||||
<CircleIconButton title="Select all" logo={SelectAll} on:click={handleSelectAll} />
|
||||
<SelectAllAssets {assetStore} {assetInteractionStore} />
|
||||
<AssetSelectContextMenu icon={Plus} title="Add">
|
||||
<AddToAlbum />
|
||||
<AddToAlbum shared />
|
||||
</AssetSelectContextMenu>
|
||||
<DeleteAssets {onAssetDelete} />
|
||||
<DeleteAssets onAssetDelete={(assetId) => assetStore.removeAsset(assetId)} />
|
||||
<AssetSelectContextMenu icon={DotsVertical} title="Menu">
|
||||
<DownloadAction menuItem />
|
||||
<ArchiveAction menuItem unarchive={isAllArchive} />
|
||||
|
|
@ -67,13 +52,10 @@
|
|||
</AssetSelectControlBar>
|
||||
{/if}
|
||||
|
||||
<UserPageLayout user={data.user} hideNavbar={isMultiSelectionMode} title={data.meta.title}>
|
||||
<section>
|
||||
<!-- Empty Message -->
|
||||
{#if favorites.length === 0}
|
||||
<EmptyPlaceholder text="Add favorites to quickly find your best pictures and videos" alt="Empty favorites" />
|
||||
{/if}
|
||||
|
||||
<GalleryViewer assets={favorites} bind:selectedAssets viewFrom="favorites-page" />
|
||||
</section>
|
||||
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} title={data.meta.title} scrollbar={!assetCount}>
|
||||
{#if assetCount}
|
||||
<AssetGrid {assetStore} {assetInteractionStore} />
|
||||
{:else}
|
||||
<EmptyPlaceholder text="Add favorites to quickly find your best pictures and videos" alt="Empty favorites" />
|
||||
{/if}
|
||||
</UserPageLayout>
|
||||
|
|
|
|||
|
|
@ -10,7 +10,7 @@
|
|||
import { AppRoute } from '$lib/constants';
|
||||
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
|
||||
import { AssetStore } from '$lib/stores/assets.store';
|
||||
import { TimeGroupEnum } from '@api';
|
||||
import { TimeBucketSize } from '@api';
|
||||
import { onDestroy } from 'svelte';
|
||||
import ArrowLeft from 'svelte-material-icons/ArrowLeft.svelte';
|
||||
import Plus from 'svelte-material-icons/Plus.svelte';
|
||||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
export let data: PageData;
|
||||
|
||||
const assetStore = new AssetStore({ timeGroup: TimeGroupEnum.Month, userId: data.partner.id });
|
||||
const assetStore = new AssetStore({ size: TimeBucketSize.Month, userId: data.partner.id });
|
||||
const assetInteractionStore = createAssetInteractionStore();
|
||||
const { isMultiSelectState, selectedAssets } = assetInteractionStore;
|
||||
|
||||
|
|
|
|||
|
|
@ -15,8 +15,8 @@
|
|||
import { createAssetInteractionStore } from '$lib/stores/asset-interaction.store';
|
||||
import { AssetStore } from '$lib/stores/assets.store';
|
||||
import { openFileUploadDialog } from '$lib/utils/file-uploader';
|
||||
import { TimeGroupEnum, api } from '@api';
|
||||
import { onDestroy, onMount } from 'svelte';
|
||||
import { TimeBucketSize, api } from '@api';
|
||||
import { onMount } from 'svelte';
|
||||
import DotsVertical from 'svelte-material-icons/DotsVertical.svelte';
|
||||
import Plus from 'svelte-material-icons/Plus.svelte';
|
||||
import type { PageData } from './$types';
|
||||
|
|
@ -24,30 +24,22 @@
|
|||
export let data: PageData;
|
||||
let assetCount = 1;
|
||||
|
||||
const assetStore = new AssetStore({ timeGroup: TimeGroupEnum.Month });
|
||||
const assetStore = new AssetStore({ size: TimeBucketSize.Month, isArchived: false });
|
||||
const assetInteractionStore = createAssetInteractionStore();
|
||||
const { isMultiSelectState, selectedAssets } = assetInteractionStore;
|
||||
|
||||
$: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
|
||||
|
||||
onMount(async () => {
|
||||
const { data: stats } = await api.assetApi.getAssetStats();
|
||||
assetCount = stats.total;
|
||||
});
|
||||
|
||||
onDestroy(() => {
|
||||
assetInteractionStore.clearMultiselect();
|
||||
});
|
||||
|
||||
$: isAllFavorite = Array.from($selectedAssets).every((asset) => asset.isFavorite);
|
||||
|
||||
const handleUpload = async () => {
|
||||
openFileUploadDialog();
|
||||
};
|
||||
</script>
|
||||
|
||||
<UserPageLayout user={data.user} hideNavbar={$isMultiSelectState} showUploadButton>
|
||||
<svelte:fragment slot="header">
|
||||
{#if $isMultiSelectState}
|
||||
<AssetSelectControlBar assets={$selectedAssets} clearSelect={assetInteractionStore.clearMultiselect}>
|
||||
<AssetSelectControlBar assets={$selectedAssets} clearSelect={() => assetInteractionStore.clearMultiselect()}>
|
||||
<CreateSharedLink />
|
||||
<SelectAllAssets {assetStore} {assetInteractionStore} />
|
||||
<AssetSelectContextMenu icon={Plus} title="Add">
|
||||
|
|
@ -69,7 +61,7 @@
|
|||
<MemoryLane />
|
||||
</AssetGrid>
|
||||
{:else}
|
||||
<EmptyPlaceholder text="CLICK TO UPLOAD YOUR FIRST PHOTO" actionHandler={handleUpload} />
|
||||
<EmptyPlaceholder text="CLICK TO UPLOAD YOUR FIRST PHOTO" actionHandler={() => openFileUploadDialog()} />
|
||||
{/if}
|
||||
</svelte:fragment>
|
||||
</UserPageLayout>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue