Add support for hiding product column in product addons

Introduced a new `hideProductColumn` prop to manage the visibility of the product column across related components. Updated table logic, pagination components, and create object functionality to respect this prop. Enhanced flexibility for use cases where visibility of the product column is not required.

src/components/displays/pagination/models/SuperUserDashboard/ProductAddonsPagination.vue

@@ -1,6 +1,25 @@
 <script setup>
-
-let props = defineProps(["setProductFilter", "hideSearch", "autoLoad"]);
+const props = defineProps(
+  {
+    setProductFilter: {
+      type: Number,
+      default: null,
+    },
+    hideSearch: {
+      type: Boolean,
+      default: false,
+    },
+    hideProductColumn: {
+      type: Boolean,
+      default: false,
+    },
+    autoLoad: {
+      type: Boolean,
+      default: false,
+    },
+  }
+);
+//const props = defineProps(["setProductFilter", "hideSearch", "autoLoad"]);
 import { defineProps } from "vue";
 import { useRouter } from "vue-router";
 import {
@@ -48,9 +67,8 @@ if (props.autoLoad) {
 </script>
 
 <template>
-  <input @input="search($event.target.value)" class="input" type="text" :placeholder="'Søg efter ' + SessionUser.objects.collectedOrderInvoices.meta.labels.single" v-if="!hideSearchField"/>
   <PaginationDisplay :metaItemsPerPage="metaItemsPerPage" :loadFunction="loadList" :isLoading="isLoading" :setMetaItemsPerPage="setMetaItemsPerPage"/>
-  <ProductAddonsTable :objects="list" />
+  <ProductAddonsTable :objects="list" :hideProductColumn="props.hideProductColumn" :product_id="props.setProductFilter ? props.setProductFilter : null" />
   <PaginationNavigation :currentPage="metaCurrentPage" :totalPages="Math.ceil(metaTotalItems / metaItemsPerPage)" :loadFunction="loadList" :setPage="setPage" :isLoading="isLoading" />
   <LoadButtonWhileAwait class="is-dark" :isLoading="isLoading" :loadFunction="loadList" icon="fas fa-sync-alt">Reload</LoadButtonWhileAwait>
 </template>

src/components/displays/superuser/tables/productAddonsTable.vue

@@ -2,7 +2,22 @@
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
 import {getCustomerName} from "@/components/shop/POSDepartmentProcess.vue";
 
-defineProps(['objects']);
+const props = defineProps(
+    {
+        product_id: {
+            type: Number,
+            default: null
+        },
+        objects: {
+            type: Array,
+            required: true
+        },
+        hideProductColumn: {
+            type: Boolean,
+            default: false
+        }
+    }
+);
 import { ref } from 'vue';
 import { loadList } from "@/components/pagination/paginatedList.vue";
 import { SessionUser } from "@/components/session/token/SessionUser.vue";
@@ -29,6 +44,15 @@ const getProductNames = (id) => {
 
 getProductNames();
 
+const lockedValuesOnCreate = ref({});
+
+// Check if the product_id is set
+if (props.product_id !== null) {
+  lockedValuesOnCreate.value = {
+    product_id: props.product_id
+  };
+}
+
 </script>
 
 <template>
@@ -38,7 +62,7 @@ getProductNames();
         <th>{{ SessionUser.objects.product_options.columns.id.label }}</th>
         <th>{{ SessionUser.objects.product_options.columns.name.label }}</th>
         <th>{{ SessionUser.objects.product_options.columns.option_id.label }}</th>
-        <th>{{ SessionUser.objects.product_options.columns.product_id.label }}</th>
+        <th v-if="!props.hideProductColumn">{{ SessionUser.objects.product_options.columns.product_id.label }}</th>
         <th><!-- Actions --></th>
       </tr>
       </thead>
@@ -63,6 +87,7 @@ getProductNames();
         />
         <!-- Product ID -->
         <EditableTableColumn
+            v-if="!props.hideProductColumn"
             :object="object"
             :loadList="loadList"
             column="product_id"
@@ -72,14 +97,23 @@ getProductNames();
           <ActionSettingsWheelButton>
             <template #actions>
               <ActionSettingsWheelItem
-                icon="fas fa-eye"
-                @click="redirect('/superuser/invoices/' + object.id)"
-                label="Vis"
+                icon="fas fa-trash"
+                @click="SessionUser.objects.product_options.delete(object.id).then(() => loadList())"
+                label="Slet"
+                template="danger"
               />
             </template>
           </ActionSettingsWheelButton>
         </td>
       </tr>
+      <!-- Add a row for creating a new object -->
+      <tr @click="SessionUser.objects.product_options.showCreateObjectForm(() => loadList(), lockedValuesOnCreate)">
+        <td colspan="9">
+          <button class="button is-text is-small" style="text-decoration-line: none">
+            <span>Opret {{ SessionUser.objects.product_options.meta.labels.single }}</span>
+          </button>
+        </td>
+      </tr>
       <!-- If the list is empty -->
       <tr v-if="objects.length === 0">
         <td colspan="9">

src/components/session/token/SessionUser/Objects/ProductOptions.vue

@@ -76,7 +76,7 @@ export const getProductOptions = async (id) => {
           }
         },
         name: {
-          label: "Navn",
+          label: "Kaldenavn for tilvalg",
           type: "string",
           sortable: true,
           creation: {
@@ -119,6 +119,9 @@ export const getProductOptions = async (id) => {
           return ObjectsGlobal.get.object(ProductOptions.meta.endpoint, id);
         }
       },
+      delete: async (id) => {
+        return ObjectsGlobal.delete.object(ProductOptions.meta.endpoint, id);
+      },
       functions: {
         getProductOptions: getProductOptions,
         getProductOptionName: (id) => {
@@ -127,11 +130,12 @@ export const getProductOptions = async (id) => {
       },
       /**
        * Show the create object form
-       * @param onAfterSubmit
+       * @param onAfterSubmit {function}
+       * @param lockedValues {object}
        * @returns {Promise<SweetAlertResult<Awaited<any>>>}
        */
-      showCreateObjectForm: (onAfterSubmit = null) => {
-        return ObjectsGlobal.showCreateObjectForm(ProductOptions, onAfterSubmit);
+      showCreateObjectForm: (onAfterSubmit = null, lockedValues = {}) => {
+        return ObjectsGlobal.showCreateObjectForm(ProductOptions, onAfterSubmit, lockedValues);
       },
       /**
        * Show the edit object field form

src/views/dashboards/superUserDashboard/products/displays/SuperUserDashboardProductAddons.vue

@@ -11,7 +11,7 @@ const props = defineProps({
 </script>
 
 <template>
-  <ProductAddonsPagination :set-product-filter="product_id" :auto-load="true" />
+  <ProductAddonsPagination :set-product-filter="product_id" :auto-load="true" :hideProductColumn="true" />
 </template>
 
 <style scoped>