Appearance

Page Types ​

File Information ​

  • Path: app/types/pages.ts
  • Purpose: TypeScript interfaces for page composables (useFolders, useCollage, useSharing, useSearch, useExternalShare)
  • Exported From: ~/types (via index.ts)

Overview ​

This file contains TypeScript interfaces for page-level composables including sharing, folders, collage, search, and external share pages. These types define return types, props, and data structures for page composables.

Type Definitions ​

Sharing Page Types ​

ShareItem ​

Share link item structure.

typescript
interface ShareItem {
  id: number | string
  title: string
  description?: string
  created_at: string
  source: number
  user_name?: string
  share_url: string
  generated_source: string
  is_selected?: boolean
  user?: any
  thumbnail_file?: string
  compress_file?: string
  preview_image?: string
  display_file_name?: string
  [key: string]: any
}

ShareHeader ​

Share table header structure.

typescript
interface ShareHeader {
  name: string
  slug: string
  is_hover: boolean
  togle_sort: boolean
  enable_sort: boolean
}

ShareMenuItem ​

Share menu item structure.

typescript
interface ShareMenuItem {
  icon: string
  title: string
  slug: string
}

ShareFilterOption ​

Share filter option structure.

typescript
interface ShareFilterOption {
  text: string
  id: string
  name: string
}

ShareTogglePayload ​

Share toggle selection payload.

typescript
interface ShareTogglePayload {
  event: Event
  file: ShareItem
  index: number
}

ShareShowArrowSort ​

Share sort arrow visibility state.

typescript
interface ShareShowArrowSort {
  title: boolean
  generated_source: boolean
  user_name: boolean
  created_at: boolean
}

Folders Page Types ​

FoldersPageFolder ​

Folder data structure for folders page.

typescript
interface FoldersPageFolder {
  id: number | string
  folder_name: string
  description?: string
  modified_at?: string
  updated_at?: string
  created_at?: string
  total_assets?: number
  sub_category_count?: number
  is_uncategorised?: boolean
  is_selected?: boolean
  is_downloading?: boolean
  sub_category_data?: any[]
  [key: string]: any
}

FolderSortArrowState ​

Folder sort arrow visibility state.

typescript
interface FolderSortArrowState {
  folder_name: boolean
  sub_category_count: boolean
  modified_at: boolean
  created_at: boolean
}

UseFoldersReturn ​

Return type for useFolders composable.

typescript
interface UseFoldersReturn {
  viewMode: any
  loading: Ref<boolean>
  selectedFolder: Ref<FoldersPageFolder | null>
  shareDialog: Ref<boolean>
  selected_items: Ref<FoldersPageFolder[]>
  download_items: Ref<FoldersPageFolder[]>
  share_items: Ref<FoldersPageFolder[]>
  foldersList: Ref<FoldersPageFolder[]>
  select_all: Ref<boolean>
  pageScrolling: Ref<boolean>
  download_all: Ref<boolean>
  hover_name: Ref<boolean>
  hover_total: Ref<boolean>
  hover_modified_at: Ref<boolean>
  hover_created_at: Ref<boolean>
  showArrowSort: Ref<FolderSortArrowState>
  setCachedViewMode: (mode: string) => void
  toggleSelect: (folder: FoldersPageFolder) => void
  toggleSelectAll: () => void
  fileSelect: (asset: any) => void
  downloadFolder: (flag?: string) => Promise<void>
  sortFolders: (sortField: keyof FolderSortArrowState, isSort: boolean) => void
  trackFolderClick: (folder: FoldersPageFolder) => void
  isActiveSort: (field: string) => string
  formatDate: (date: string | undefined) => string
  listContainer: Ref<HTMLElement | null>
  scrollContainer: Ref<HTMLElement | null>
  getTotalAssets: (folder: FoldersPageFolder) => number
  closeShareDialog: () => void
  getShareTitle: ComputedRef<string>
  getShareDescription: ComputedRef<string>
}

Collage Page Types ​

CollagePreviewImage ​

Collage preview image structure.

typescript
interface CollagePreviewImage {
  url: string
  file_type?: string
  uuid?: string
}

Collage ​

Collage data structure.

typescript
interface Collage {
  id: string | number
  assets_count: number
  assets_id: (string | number)[]
  preview_images: CollagePreviewImage[]
  name?: string
  collection_name?: string
  [key: string]: any
}

CollageStates ​

Collage page state structure.

typescript
interface CollageStates {
  collagesList: Collage[]
  loading: boolean
  collage: Collage | Record<string, never>
  workspace_id: string
  downloadColgId: number | string
  page_sort_value: string
  page_sort_by: string
  hover_name: boolean
  showArrowSort: {
    name: boolean
    [key: string]: boolean
  }
  shareDialog?: boolean
}

Search Page Types ​

SearchDigitalAsset ​

Search digital asset structure.

typescript
interface SearchDigitalAsset {
  document: {
    id: string | number
    display_file_name: string
    modified_at: string
    created_at: string
    file_size: number
    file_type: string
    display_file: string
    is_selected?: boolean
    is_downloading?: boolean
  }
}

SearchPagination ​

Search pagination structure.

typescript
interface SearchPagination {
  totalPages: number
  currentPage: number
}

SearchSortingState ​

Search sorting state structure.

typescript
interface SearchSortingState {
  sortByName: boolean
  sortOrderName: 'asc' | 'desc'
  sortByDateModified: boolean
  sortOrderDateModified: 'asc' | 'desc'
  sortByDateAdded: boolean
  sortOrderDateAdded: 'asc' | 'desc'
  sortByFileSize: boolean
  sortOrderFileSize: 'asc' | 'desc'
  sortByFileType: boolean
  sortOrderFileType: 'asc' | 'desc'
}

SearchColumn ​

Search table column structure.

typescript
interface SearchColumn {
  key: string
  label: string
  minWidthClass: string
  sortingShow: boolean
}

TagPagination ​

Tag pagination structure.

typescript
interface TagPagination {
  start: number
  end: number
}

External Share Page Types ​

ExternalSharedAsset ​

External shared asset structure.

typescript
interface ExternalSharedAsset {
  id: string | number
  is_selected: boolean
  is_downloading: boolean
  folder_name?: string
  total_assets?: number
  sub_category_count?: number
  display_file_name?: string
  file_size?: number
  file_type?: string
  modified_at?: string
  created_at?: string
  description?: string
  parent_id?: string | number
  [key: string]: any
}

ExternalBreadcrumb ​

External share breadcrumb structure.

typescript
interface ExternalBreadcrumb {
  id: string | number
  folder_name: string
  parent?: ExternalBreadcrumb
}

SharedAssetsResponse ​

Shared assets API response.

typescript
interface SharedAssetsResponse {
  data: {
    share_id: string
    workspace_id: string
    brand_favicon?: string
    collection_id?: string
    collection_name?: string
    collection_description?: string
    user?: { name: string }
    assets?: any
    category?: any
    breadcrumb?: ExternalBreadcrumb
    total_assets?: number
    sub_category_count?: number
    title?: string
    description?: string
  }
}

Form Data Types ​

ResetPasswordFormData ​

Reset password form data.

typescript
interface ResetPasswordFormData {
  email: string
  password: string
  confirm_password: string
  company_name?: string
  brand_logo?: string
  brand_url?: string
  primary_color?: string
  secondary_color?: string
  brand_name?: string
  email_token?: string
  token?: string
  brand_favicon?: string
}

ForgotPasswordFormData ​

Forgot password form data.

typescript
interface ForgotPasswordFormData {
  email: string
  workspace_id?: string
}

GeneratePasswordFormData ​

Generate password form data.

typescript
interface GeneratePasswordFormData {
  name: string
  email: string
  password: string
  confirm_password: string
  logo?: string
  reset_token?: string
  invitation_token?: string
  timezone?: string
}

GeneratePasswordResponse ​

Generate password API response.

typescript
interface GeneratePasswordResponse {
  success: boolean
  message?: string
}

Usage Examples ​

Using Page Composable Types ​

typescript
import type { UseFoldersReturn, FoldersPageFolder } from '~/types'

export function useFolders(): UseFoldersReturn {
  const foldersList = ref<FoldersPageFolder[]>([])
  // ... implementation
  return {
    foldersList,
    loading: ref(false),
    // ... other properties
  }
}

Using Share Types ​

typescript
import type { ShareItem, ShareFilterOption } from '~/types'

const shareItem: ShareItem = {
  id: 123,
  title: 'My Share',
  description: 'Shared assets',
  created_at: '2024-01-01',
  source: 1,
  share_url: '/shared-assets/type?token=abc',
  generated_source: 'user'
}

const filterOption: ShareFilterOption = {
  text: 'Active',
  id: 'active',
  name: 'active'
}

Using Form Data Types ​

typescript
import type { ResetPasswordFormData } from '~/types'

const formData: ResetPasswordFormData = {
  email: '[email protected]',
  password: 'newpassword',
  confirm_password: 'newpassword',
  token: 'reset-token'
}
  • Ref, ComputedRef - From Vue
  • Used by page composables

Import Example ​

typescript
import type {
  ShareItem,
  FoldersPageFolder,
  UseFoldersReturn,
  Collage,
  SearchDigitalAsset,
  ExternalSharedAsset,
  ResetPasswordFormData
} from '~/types'

Notes ​

  • All page types are exported from ~/types
  • Return types include both state (Refs) and methods
  • Form data types used for authentication pages
  • Search types support Typesense integration
  • External share types for public share pages