Reintroduce editable columns in SubuserGrantsTable.vue with EditableTableColumn and implement showEditObjectFieldForm in SubuserGrants.vue

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

@@ -3,6 +3,10 @@ import ActionSettingsWheelButton from "@/components/displays/buttons/ActionSetti
 import ActionSettingsWheelItem from "@/components/displays/buttons/ActionSettingsWheelItem.vue";
 import EditableTableColumn from "@/components/displays/buttons/EditableTableColumn.vue";
 import SubuserGrantPermissionNodes from "@/components/displays/selectors/SubuserGrantPermissionNodes.vue";
+import { usePaginatedListInstance } from "@/components/pagination/paginatedList.vue";
+import { SessionUser } from "@/components/session/token/SessionUser.vue";
+
+const { loadList } = usePaginatedListInstance();
 
 defineProps(['objects']);
 
@@ -29,15 +33,37 @@ const formatDateTime = (dateString) => {
     </thead>
     <tbody>
       <tr v-for="grant in objects" :key="grant.id">
-        <td>{{ grant.id }}</td>
-        <td>{{ grant.subuser }}</td>
-        <td>{{ grant.billing_customer_number }}</td>
-        <td>
-          <span class="tag" :class="grant.enabled ? 'is-success' : 'is-danger'">
-            {{ grant.enabled ? 'Ja' : 'Nej' }}
-          </span>
-        </td>
-        <td>{{ grant.note || '-' }}</td>
+        <EditableTableColumn
+            :object="grant"
+            :loadList="loadList"
+            column="id"
+        />
+        <EditableTableColumn
+            :object="grant"
+            :loadList="loadList"
+            column="subuser"
+            :edit-function="SessionUser.objects.subuser_grants.showEditObjectFieldForm"
+        />
+        <EditableTableColumn
+            :object="grant"
+            :loadList="loadList"
+            column="billing_customer_number"
+            :edit-function="SessionUser.objects.subuser_grants.showEditObjectFieldForm"
+        />
+        <EditableTableColumn
+            :object="grant"
+            :loadList="loadList"
+            column="enabled"
+            :parse-function="(value) => value ? 'Ja' : 'Nej'"
+            :edit-function="SessionUser.objects.subuser_grants.showEditObjectFieldForm"
+        />
+        <EditableTableColumn
+            :object="grant"
+            :loadList="loadList"
+            column="note"
+            :parse-function="(value) => value || '-'"
+            :edit-function="SessionUser.objects.subuser_grants.showEditObjectFieldForm"
+        />
         <td>
           <div class="tags">
             <span class="tag is-info is-light" v-for="permission in (grant.permissions || []).slice(0, 3)" :key="permission">
@@ -48,8 +74,18 @@ const formatDateTime = (dateString) => {
             </span>
           </div>
         </td>
-        <td>{{ formatDateTime(grant.created_at) }}</td>
-        <td>{{ formatDateTime(grant.updated_at) }}</td>
+        <EditableTableColumn
+            :object="grant"
+            :loadList="loadList"
+            column="created_at"
+            :parse-function="formatDateTime"
+        />
+        <EditableTableColumn
+            :object="grant"
+            :loadList="loadList"
+            column="updated_at"
+            :parse-function="formatDateTime"
+        />
         <td>
           <div class="buttons is-float-right">
             <ActionSettingsWheelButton :subuser-grant="grant">

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

@@ -174,5 +174,22 @@ export const SubuserGrants = {
       return ObjectsGlobal.get.object(SubuserGrants.meta.endpoint, parseInt(id));
     }
   },
+  /**
+   * Show the edit object field form
+   * @param id
+   * @param column
+   * @param value
+   * @param onAfterSubmit
+   * @returns {Promise<SweetAlertResult<Awaited<any>>>}
+   */
+  showEditObjectFieldForm: (id, column, value, onAfterSubmit = null) => {
+    return ObjectsGlobal.showEditObjectFieldForm(
+        SubuserGrants,
+        id,
+        column,
+        value,
+        onAfterSubmit
+    );
+  }
 }
 </script>