newDBField

Create a new DB field for modelproject (including challenge) objects

%field% will be used as a placeholder for your field name. As a general hint - have a look at other fields already defined

website-api

in src/models/ModelProject.ts

in the interface definition export interface IModelProject extends IAbstractProject { add an entry for your new field:
%field%: datatype;
Add a question mark behind your field's name to indicate that this field does not always need to exist (e.g. fields only relevant for challenges, but not for all models)

in the schema definition Object.assign(clonedRootFields, { create another entry further specifying your field. Here, we tell mongoose explicitly whether the field is required and, if applicable, provide a default
%field%: { type: DataType, required: true/false, default: <if applicable>

That's already it for adding a simple field to the ModelProject in our database. Next, we will need to look into the website frontend to use this new field.

website-frontend

in src/views/components/elementCards/IProjectCardData.ts

Here, we define what the frontend should expect to be getting from the API for each of our data types. Therefore, we want to extend the definition of export interface IModelProjectData extends IProjectCardData{ by our new field:
%field%: datatype;

finally, we want to be able to read/set the newly created field. Let's assume you are working in the file src/vies/admin/ChallengeOverviewPage.vue and let's have a look at the function private async _clickAction(tool: any, challenge: any): Promise<void>.

We can ignore the tool parameter for what we are doing right now. The challenge parameter, however, is exactly what we want to look at. This challenge variable contains an object adhering to the IModelProjectData interface we just modified. Therefore, if the challenge had the %field% set in our database, we could access its value as challenge.%field%. If the value was not set, this will return undefined or null, so be careful not to assume that a value exists just yet.

In order to set our new field for a challenge, we'll have a look at the line await axios.patch(/api/v1/modelProject/${challenge._id}, { tools: challenge.tools }); at the end of the click handling function and use it as a basis for our purposes. axios.patch will invoke a PATCH call to the given route, used to update a database object through our API. The route /api/v1/modelProject/${challenge._id} defines which object type and then which particular object to update. The particular object here is dependent on our challenge's ID. Finally, the last parameter is the only one we want to change. Here, we define, as an object, what to change in the database object. { tools: challenge.tools } means that the tools field will be overridden to now contain whatever is in challenge.tools. In our case, we therefore want to pass an object looking like { %field%: somevalue }.

Since we don't want to fetch all challenges again after updating only one of them, we simply set the new value for %field% on the challenge object in addition to passing it to the PATCH request, just like the tools array is both modified in place and sent to the API.