Updated via schema editor on 2025-07-26 01:51

backend/src/db/api/recipes.js

@@ -26,11 +26,6 @@ module.exports = class RecipesDBApi {
         null
             ,
 
-        genre: data.genre
-        ||
-        null
-            ,
-
         difficulty_level: data.difficulty_level
         ||
         null
@@ -82,11 +77,6 @@ module.exports = class RecipesDBApi {
                 description: item.description
             ||
             null
-            ,
-
-                genre: item.genre
-            ||
-            null
             ,
 
                 difficulty_level: item.difficulty_level
@@ -138,8 +128,6 @@ module.exports = class RecipesDBApi {
 
         if (data.description !== undefined) updatePayload.description = data.description;
 
-        if (data.genre !== undefined) updatePayload.genre = data.genre;
-
         if (data.difficulty_level !== undefined) updatePayload.difficulty_level = data.difficulty_level;
 
         if (data.upload_date !== undefined) updatePayload.upload_date = data.upload_date;
@@ -346,13 +334,6 @@ module.exports = class RecipesDBApi {
                 };
             }
 
-            if (filter.genre) {
-                where = {
-                    ...where,
-                genre: filter.genre,
-            };
-            }
-
             if (filter.difficulty_level) {
                 where = {
                     ...where,

backend/src/db/migrations/1753494698719.js

@@ -0,0 +1,77 @@
+module.exports = {
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async up(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+                    await queryInterface.removeColumn(
+                        'recipes',
+                        'genre',
+                        { transaction }
+                    );
+
+                    await queryInterface.addColumn(
+                      'categories',
+                      'parentId',
+                      {
+                          type: Sequelize.DataTypes.UUID,
+
+                            references: {
+                                model: 'categories',
+                                key: 'id',
+                            },
+
+                      },
+                      { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    },
+    /**
+     * @param {QueryInterface} queryInterface
+     * @param {Sequelize} Sequelize
+     * @returns {Promise<void>}
+     */
+    async down(queryInterface, Sequelize) {
+        /**
+         * @type {Transaction}
+         */
+        const transaction = await queryInterface.sequelize.transaction();
+        try {
+
+                    await queryInterface.removeColumn(
+                        'categories',
+                        'parentId',
+                        { transaction }
+                    );
+
+                    await queryInterface.addColumn(
+                      'recipes',
+                      'genre',
+                      {
+                          type: Sequelize.DataTypes.ENUM,
+
+                            values: ['Electronic','HipHop','Rock','Jazz','Classical'],
+
+                      },
+                      { transaction }
+                    );
+
+            await transaction.commit();
+        } catch (err) {
+            await transaction.rollback();
+            throw err;
+        }
+    }
+};

backend/src/db/models/recipes.js

@@ -24,25 +24,6 @@ description: {
 
       },
 
-genre: {
-        type: DataTypes.ENUM,
-
-        values: [
-
-"Electronic",
-
-"HipHop",
-
-"Rock",
-
-"Jazz",
-
-"Classical"
-
-        ],
-
-      },
-
 difficulty_level: {
         type: DataTypes.ENUM,
 

backend/src/routes/recipes.js

@@ -32,7 +32,6 @@ const { parse } = require('json2csv');
  *            type: integer
  *            format: int64
 
- *          
  *          
  *          
  */

frontend/src/components/Categories/CardCategories.tsx

@@ -79,6 +79,15 @@ const CardCategories = ({
                     </dd>
                 </div>
 
+                <div className='flex justify-between gap-x-4 py-3'>
+                    <dt className='text-gray-500 dark:text-dark-600'>Parent</dt>
+                    <dd className='flex items-start gap-x-2'>
+                        <div className='font-medium line-clamp-4'>
+                            { dataFormatter.categoriesOneListFormatter(item.parent) }
+                        </div>
+                    </dd>
+                </div>
+
             </dl>
           </li>
         ))}

frontend/src/components/Categories/ListCategories.tsx

@@ -45,6 +45,11 @@ const ListCategories = ({ categories, loading, onDelete, currentPage, numPages,
                                 <p className={'line-clamp-2'}>{ item.description }</p>
                             </div>
 
+                            <div className={'flex-1 px-3'}>
+                                <p className={'text-xs text-gray-500'}>Parent</p>
+                                <p className={'line-clamp-2'}>{ dataFormatter.categoriesOneListFormatter(item.parent) }</p>
+                            </div>
+
                           </Link>
                             <ListActionsPopover
                               onDelete={onDelete}

frontend/src/components/Categories/configureCategoriesCols.tsx

@@ -53,6 +53,26 @@ export const loadColumns = async (
 
         },
 
+        {
+            field: 'parent',
+            headerName: 'Parent',
+            flex: 1,
+            minWidth: 120,
+            filterable: false,
+            headerClassName: 'datagrid--header',
+            cellClassName: 'datagrid--cell',
+
+            editable: true,
+            sortable: false,
+            type: 'singleSelect',
+            getOptionValue: (value: any) => value?.id,
+            getOptionLabel: (value: any) => value?.label,
+            valueOptions: await callOptionsApi('categories'),
+            valueGetter: (params: GridValueGetterParams) =>
+                params?.value?.id ?? params?.value,
+
+        },
+
         {
             field: 'actions',
             type: 'actions',

frontend/src/components/Recipes/CardRecipes.tsx

@@ -79,15 +79,6 @@ const CardRecipes = ({
                     </dd>
                 </div>
 
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='text-gray-500 dark:text-dark-600'>Genre</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.genre }
-                        </div>
-                    </dd>
-                </div>
-
                 <div className='flex justify-between gap-x-4 py-3'>
                     <dt className='text-gray-500 dark:text-dark-600'>DifficultyLevel</dt>
                     <dd className='flex items-start gap-x-2'>
@@ -98,7 +89,7 @@ const CardRecipes = ({
                 </div>
 
                 <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='text-gray-500 dark:text-dark-600'>DeviceChain</dt>
+                    <dt className='text-gray-500 dark:text-dark-600'>Device</dt>
                     <dd className='flex items-start gap-x-2'>
                         <div className='font-medium line-clamp-4'>
                             { item.device_chain }
@@ -106,15 +97,6 @@ const CardRecipes = ({
                     </dd>
                 </div>
 
-                <div className='flex justify-between gap-x-4 py-3'>
-                    <dt className='text-gray-500 dark:text-dark-600'>AudioDemo</dt>
-                    <dd className='flex items-start gap-x-2'>
-                        <div className='font-medium line-clamp-4'>
-                            { item.audio_demo }
-                        </div>
-                    </dd>
-                </div>
-
                 <div className='flex justify-between gap-x-4 py-3'>
                     <dt className='text-gray-500 dark:text-dark-600'>Creator</dt>
                     <dd className='flex items-start gap-x-2'>

frontend/src/components/Recipes/ListRecipes.tsx

@@ -45,26 +45,16 @@ const ListRecipes = ({ recipes, loading, onDelete, currentPage, numPages, onPage
                                 <p className={'line-clamp-2'}>{ item.description }</p>
                             </div>
 
-                            <div className={'flex-1 px-3'}>
-                                <p className={'text-xs text-gray-500'}>Genre</p>
-                                <p className={'line-clamp-2'}>{ item.genre }</p>
-                            </div>
-
                             <div className={'flex-1 px-3'}>
                                 <p className={'text-xs text-gray-500'}>DifficultyLevel</p>
                                 <p className={'line-clamp-2'}>{ item.difficulty_level }</p>
                             </div>
 
                             <div className={'flex-1 px-3'}>
-                                <p className={'text-xs text-gray-500'}>DeviceChain</p>
+                                <p className={'text-xs text-gray-500'}>Device</p>
                                 <p className={'line-clamp-2'}>{ item.device_chain }</p>
                             </div>
 
-                            <div className={'flex-1 px-3'}>
-                                <p className={'text-xs text-gray-500'}>AudioDemo</p>
-                                <p className={'line-clamp-2'}>{ item.audio_demo }</p>
-                            </div>
-
                             <div className={'flex-1 px-3'}>
                                 <p className={'text-xs text-gray-500'}>Creator</p>
                                 <p className={'line-clamp-2'}>{ dataFormatter.usersOneListFormatter(item.creator) }</p>

frontend/src/components/Recipes/configureRecipesCols.tsx

@@ -53,19 +53,6 @@ export const loadColumns = async (
 
         },
 
-        {
-            field: 'genre',
-            headerName: 'Genre',
-            flex: 1,
-            minWidth: 120,
-            filterable: false,
-            headerClassName: 'datagrid--header',
-            cellClassName: 'datagrid--cell',
-
-            editable: true,
-
-        },
-
         {
             field: 'difficulty_level',
             headerName: 'DifficultyLevel',
@@ -81,20 +68,7 @@ export const loadColumns = async (
 
         {
             field: 'device_chain',
-            headerName: 'DeviceChain',
+            headerName: 'Device',
-            flex: 1,
-            minWidth: 120,
-            filterable: false,
-            headerClassName: 'datagrid--header',
-            cellClassName: 'datagrid--cell',
-
-            editable: true,
-
-        },
-
-        {
-            field: 'audio_demo',
-            headerName: 'AudioDemo',
             flex: 1,
             minWidth: 120,
             filterable: false,

frontend/src/helpers/dataFormatter.js

@@ -58,6 +58,25 @@ export default {
             return {label: val.firstName, id: val.id}
         },
 
+        categoriesManyListFormatter(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => item.name)
+        },
+        categoriesOneListFormatter(val) {
+            if (!val) return ''
+            return val.name
+        },
+        categoriesManyListFormatterEdit(val) {
+            if (!val || !val.length) return []
+            return val.map((item) => {
+              return {id: item.id, label: item.name}
+            });
+        },
+        categoriesOneListFormatterEdit(val) {
+            if (!val) return ''
+            return {label: val.name, id: val.id}
+        },
+
         recipesManyListFormatter(val) {
             if (!val || !val.length) return []
             return val.map((item) => item.title)

frontend/src/pages/categories/[categoriesId].tsx

@@ -36,6 +36,8 @@ const EditCategories = () => {
 
     description: '',
 
+    parent: null,
+
   }
   const [initialValues, setInitialValues] = useState(initVals)
 
@@ -99,6 +101,19 @@ const EditCategories = () => {
         <Field name="description" as="textarea" placeholder="Description" />
     </FormField>
 
+    <FormField label='Parent' labelFor='parent'>
+        <Field
+            name='parent'
+            id='parent'
+            component={SelectField}
+            options={initialValues.parent}
+            itemRef={'categories'}
+
+            showField={'name'}
+
+        ></Field>
+    </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type="submit" color="info" label="Submit" />

frontend/src/pages/categories/categories-edit.tsx

@@ -37,6 +37,8 @@ const EditCategoriesPage = () => {
 
     description: '',
 
+    parent: null,
+
   }
   const [initialValues, setInitialValues] = useState(initVals)
 
@@ -97,6 +99,19 @@ const EditCategoriesPage = () => {
         <Field name="description" as="textarea" placeholder="Description" />
     </FormField>
 
+  <FormField label='Parent' labelFor='parent'>
+        <Field
+            name='parent'
+            id='parent'
+            component={SelectField}
+            options={initialValues.parent}
+            itemRef={'categories'}
+
+            showField={'name'}
+
+        ></Field>
+    </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type="submit" color="info" label="Submit" />

frontend/src/pages/categories/categories-new.tsx

@@ -29,6 +29,8 @@ const initialValues = {
 
     description: '',
 
+    parent: '',
+
 }
 
 const CategoriesNew = () => {
@@ -70,6 +72,10 @@ const CategoriesNew = () => {
         <Field name="description" as="textarea" placeholder="Description" />
     </FormField>
 
+  <FormField label="Parent" labelFor="parent">
+      <Field name="parent" id="parent" component={SelectField} options={[]} itemRef={'categories'}></Field>
+  </FormField>
+
               <BaseDivider />
               <BaseButtons>
                 <BaseButton type="submit" color="info" label="Submit" />

frontend/src/pages/categories/categories-view.tsx

@@ -58,6 +58,13 @@ const CategoriesView = () => {
                   <textarea className={'w-full'} disabled value={categories?.description} />
                 </FormField>
 
+                <div className={'mb-4'}>
+                    <p className={'block font-bold mb-2'}>Parent</p>
+
+                        <p>{categories?.parent?.name ?? 'No data'}</p>
+
+                </div>
+
                 <BaseDivider />
 
                 <BaseButton

frontend/src/pages/recipes/[recipesId].tsx

@@ -36,8 +36,6 @@ const EditRecipes = () => {
 
     description: '',
 
-    genre: '',
-
     difficulty_level: '',
 
     creator: null,
@@ -113,22 +111,6 @@ const EditRecipes = () => {
         <Field name="description" as="textarea" placeholder="Description" />
     </FormField>
 
-    <FormField label="Genre" labelFor="genre">
-        <Field name="genre" id="genre" component="select">
-
-            <option value="Electronic">Electronic</option>
-
-            <option value="HipHop">HipHop</option>
-
-            <option value="Rock">Rock</option>
-
-            <option value="Jazz">Jazz</option>
-
-            <option value="Classical">Classical</option>
-
-        </Field>
-    </FormField>
-
     <FormField label="DifficultyLevel" labelFor="difficulty_level">
         <Field name="difficulty_level" id="difficulty_level" component="select">
 

frontend/src/pages/recipes/recipes-edit.tsx

@@ -37,8 +37,6 @@ const EditRecipesPage = () => {
 
     description: '',
 
-    genre: '',
-
     difficulty_level: '',
 
     creator: null,
@@ -111,22 +109,6 @@ const EditRecipesPage = () => {
         <Field name="description" as="textarea" placeholder="Description" />
     </FormField>
 
-    <FormField label="Genre" labelFor="genre">
-        <Field name="genre" id="genre" component="select">
-
-            <option value="Electronic">Electronic</option>
-
-            <option value="HipHop">HipHop</option>
-
-            <option value="Rock">Rock</option>
-
-            <option value="Jazz">Jazz</option>
-
-            <option value="Classical">Classical</option>
-
-        </Field>
-    </FormField>
-
     <FormField label="DifficultyLevel" labelFor="difficulty_level">
         <Field name="difficulty_level" id="difficulty_level" component="select">
 

frontend/src/pages/recipes/recipes-list.tsx

@@ -27,7 +27,7 @@ const RecipesTablesPage = () => {
           {label: 'Rating', title: 'rating', number: 'true'},
           {label: 'UploadDate', title: 'upload_date', date: 'true'},
 
-          {label: 'Genre', title: 'genre', type: 'enum', options: ['Electronic','HipHop','Rock','Jazz','Classical']},{label: 'DifficultyLevel', title: 'difficulty_level', type: 'enum', options: ['Beginner','Intermediate','Advanced']},{label: 'LicenseType', title: 'license_type', type: 'enum', options: ['CreativeCommons','Commercial','Personal']},
+          {label: 'DifficultyLevel', title: 'difficulty_level', type: 'enum', options: ['Beginner','Intermediate','Advanced']},{label: 'LicenseType', title: 'license_type', type: 'enum', options: ['CreativeCommons','Commercial','Personal']},
   ]);
   const addFilter = () => {
         const newItem = {

frontend/src/pages/recipes/recipes-new.tsx

@@ -29,8 +29,6 @@ const initialValues = {
 
     description: '',
 
-    genre: 'Electronic',
-
     difficulty_level: 'Beginner',
 
     creator: '',
@@ -84,22 +82,6 @@ const RecipesNew = () => {
         <Field name="description" as="textarea" placeholder="Description" />
     </FormField>
 
-  <FormField label="Genre" labelFor="genre">
-      <Field name="genre" id="genre" component="select">
-
-        <option value="Electronic">Electronic</option>
-
-        <option value="HipHop">HipHop</option>
-
-        <option value="Rock">Rock</option>
-
-        <option value="Jazz">Jazz</option>
-
-        <option value="Classical">Classical</option>
-
-      </Field>
-  </FormField>
-
   <FormField label="DifficultyLevel" labelFor="difficulty_level">
       <Field name="difficulty_level" id="difficulty_level" component="select">
 

frontend/src/pages/recipes/recipes-table.tsx

@@ -27,7 +27,7 @@ const RecipesTablesPage = () => {
           {label: 'Rating', title: 'rating', number: 'true'},
           {label: 'UploadDate', title: 'upload_date', date: 'true'},
 
-    {label: 'Genre', title: 'genre', type: 'enum', options: ['Electronic','HipHop','Rock','Jazz','Classical']},{label: 'DifficultyLevel', title: 'difficulty_level', type: 'enum', options: ['Beginner','Intermediate','Advanced']},{label: 'LicenseType', title: 'license_type', type: 'enum', options: ['CreativeCommons','Commercial','Personal']},
+    {label: 'DifficultyLevel', title: 'difficulty_level', type: 'enum', options: ['Beginner','Intermediate','Advanced']},{label: 'LicenseType', title: 'license_type', type: 'enum', options: ['CreativeCommons','Commercial','Personal']},
   ]);
     const addFilter = () => {
         const newItem = {

frontend/src/pages/recipes/recipes-view.tsx

@@ -58,11 +58,6 @@ const RecipesView = () => {
                   <textarea className={'w-full'} disabled value={recipes?.description} />
                 </FormField>
 
-                <div className={'mb-4'}>
-                    <p className={'block font-bold mb-2'}>Genre</p>
-                    <p>{recipes?.genre ?? 'No data'}</p>
-                </div>
-
                 <div className={'mb-4'}>
                     <p className={'block font-bold mb-2'}>DifficultyLevel</p>
                     <p>{recipes?.difficulty_level ?? 'No data'}</p>

frontend/src/pages/users/users-view.tsx

@@ -252,8 +252,6 @@ const UsersView = () => {
 
                                 <th>Description</th>
 
-                                <th>Genre</th>
-
                                 <th>DifficultyLevel</th>
 
                                 <th>UploadDate</th>
@@ -279,10 +277,6 @@ const UsersView = () => {
                                         { item.description }
                                     </td>
 
-                                    <td data-label="genre">
-                                        { item.genre }
-                                    </td>
-
                                     <td data-label="difficulty_level">
                                         { item.difficulty_level }
                                     </td>