adjust mat selection

client/src/app/features/recipes/recipes.component.html

@@ -141,6 +141,7 @@
                   <th>Comment</th>
                   <th>Editor</th>
                   <th>Date</th>
+                  <th>Based on</th>
                 </tr>
                 <tr
                   class="row hover:bg-secondary"
@@ -150,6 +151,7 @@
                   <td>{{ file.Msg }}</td>
                   <td>{{ file.Editor }}</td>
                   <td>{{ file.Created_at }}</td>
+                  <td>{{ file.Relation }}</td>
                   <button class="btn bg-blue-400" (click)="loadSavedFile(file)">Select</button>
                 </tr>
               </table>
@@ -223,7 +225,7 @@
                   (input)="setSearch($event)"
                   (keydown.enter)="search($event)"
                 />
-                <ng-select
+                <!-- <ng-select
                   [items]="materialList"
                   class="join-item text-base"
                   bindLabel="name"
@@ -236,6 +238,24 @@
                     <p class="text-xs">{{ item.name }}</p>
                     <small class="text-xs text-gray-500">{{ item.id }}</small>
                   </ng-template>
+                </ng-select> -->
+
+                <!-- test material setting -->
+                <ng-select
+                  [items]="materialDetail"
+                  class="join-item text-base"
+                  bindLabel="name"
+                  bindValue="materialId"
+                  [searchable]="true"
+                  [multiple]="true"
+                  [searchFn]="filterMaterial"
+                  [closeOnSelect]="false"
+                  [(ngModel)]="selectMaterialFilter"
+                >
+                  <ng-template ng-option-tmp let-item="item">
+                    <p class="text-xs">{{ item.name }} ({{ item.materialId }})</p>
+                    <small class="text-xs text-gray-500">{{ item.materialId }}</small>
+                  </ng-template>
                 </ng-select>
                 <button class="btn join-item" (click)="search($event)">
                   Search