Skip to content

What is a project data collection?

Project Data Collections are those data types build upon the IAbstractProject interface (website-api). This kind of data comes with the advantage of having a lot of existing code allowing it to be easily used in the Kyub frontend. Many objects you may find through the search are project data collections (e.g. models, materials, lasercutter...).

The disadvantage of creating your collection as a project data collection is that you may not need or use all features available to you, leading to more code and database fields than needed for your purpose. Additionally, the type you created has to be plugged in to many locations throughout the website-api and website-frontend to work as expected.

Integrating a new project data collection

This section will only cover integrating an existing project-based collection on the website-frontend side. To see how to create this collection in the first place, have a look at the corresponding README in the website-api repository.

General Definitions

The following keywords will be used throughout the walkthrough:

keyword What does it mean? Example
class name This describes what the collection represents. All lowercase. Will be used in-code to reference this collection and behavior specific to it. Also used in the search to filter by type. materialcategory, lasercutter, group
class Name of the mongoose Model (api). Effectively simply a CamelCase version of the class name. MaterialCategory, LaserCutter, Group

Coding Process

  1. Define the data interfaces to match what you need in the frontend and what is provided from the api/MongoDB. This is done in src/views/components/elementCards/IProjectCardData.ts. Your interface will extend the IProjectCardData interface. For more specific code inspiration simply look at other interface definitions and how they impact the project pages you see when opening, for example, a material page.
  2. Create a new project page in the src/views/projectPages directory, naming the file classPage.vue. The Vue component you create builds upon the ProjectPageSkeleton component, adding in class-specific flavor such as properties or group assigning logic. For inspiration and help look into other pages and how they solve specific things you may want to use for your own objects. A fairly minimal project page is the MaterialCategoryPage.
  3. Hook into various different files as listed below:
File Location Content
src/router.ts routes array (routes: [) add a route to your project page, look at existing code for project pages and adapt accordingly
src/router.ts Switch Case (in router.afterEach((to: Route, from: Route) => {) add a case convering your class case "%class%": ref=to-params.projectId; refType="%$class%"; break;
src/utils/FeedUtils.ts Switch Case (in private static _getRefType(elementType: ElementType)) add a case case "%class name": return "%class%"
src/views/MyProjectPage.vue Vue template in mdb-dropdown-menu add a way to create your project objects (if applicable) mdb-dropdown-item(@click="_createNew%class%" v-if="canCreateWorkshopProject") New %class%
src/views/MyProjectPage.vue search term definition for favoritesDataProvider (this.favoritesDataProvier=) add your class name to the list of types searched for (comma separation is handled as an "or" in search)
src/views/MyProjectPage.vue search term definition for myProjectsDataProver (this.myProjectsDataProvider =) add your class name to the list of types searched for
src/views/MyProjectPage.vue search term definition for mostRecentFeedDataProviders (this.mostRecentFeedDataProviders =) add your class name to the list of types searched for
src/views/MyProjectPage.vue somewhere inside of class add the function private async _createNew%class%(event: MouseEvent): Promise<void> which is invoked to create a new instance of your class in the database, look at similar functions for code
src/views/MyProjectPage.vue _createNew function parameter type hint (private async _createNew() add your class name to the hint for the "type" parameter
src/views/MyProjectsPageLocked.vue search term definition for favoritesDataProvider (this.favoritesDataProvider =) add your class name to the list of types searched for
src/views/MyProjectsPageLocked.vue search term definition for myProjectsDataProvider (this.myProjectsDataProvider =) add your class name to the list of types searched for
src/views/components/elementCards/IElementCardData.ts definition of ElementType (export type ElementType) add your class name to the list of possible values
src/views/projectPages/WorkshopPage.vue Switch Case (in private async _copyStarterKit(element: IElementCardData) add a case for your class name (case "%class name":) with fallthrough to a simple break;