wip

nova-components/InlineRelationship/resources/js/DataTables/InlineResourceTable.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="overflow-hidden overflow-x-auto relative">
+    <table
+      v-if="resources.length > 0"
+      class="w-full divide-y divide-gray-100 dark:divide-gray-700"
+      data-testid="resource-table"
+    >
+      <table-header
+        :resource-name="resourceName"
+        :fields="fields"
+      />
+      <tbody class="divide-y divide-gray-100 dark:divide-gray-700">
+        <table-row
+          v-for="(resource, index) in resources"
+          @actionExecuted="$emit('actionExecuted')"
+          :testId="`${resourceName}-items-${index}`"
+          :key="`${resource.id.value}-items-${index}`"
+          :resource="resource"
+          :resource-name="resourceName"
+        />
+      </tbody>
+    </table>
+  </div>
+</template>
+
+<script>
+import TableHeader from './TableHeader.vue'
+import TableRow from './TableRow.vue'
+
+export default {
+  components: {
+    'table-header': TableHeader,
+    'table-row': TableRow,
+  },
+
+  props: {
+    resourceName: { default: null },
+    resources: { default: [] },
+    singularName: { type: String, required: true },
+  },
+
+  computed: {
+    /**
+     * Get all of the available fields for the resources.
+     */
+    fields() {
+      if (this.resources) {
+        return this.resources[0].fields
+      }
+    },
+  },
+
+  methods: {
+    
+  }
+}
+</script>

nova-components/InlineRelationship/resources/js/DataTables/TableHeader.vue

@@ -0,0 +1,33 @@
+<template>
+  <thead class="bg-gray-50 dark:bg-gray-800">
+    <tr>
+      <th
+        v-for="(field, index) in fields"
+        :key="field.uniqueKey"
+        :class="{
+          [`text-${field.textAlign}`]: true,
+          'whitespace-nowrap': !field.wrapping,
+        }"
+        class="uppercase text-gray-500 text-xxs tracking-wide py-2 px-2"
+      >
+        <span>{{ field.indexName }}</span>
+      </th>
+
+      <!-- View, Edit, and Delete -->
+      <th class="uppercase text-xxs tracking-wide px-2 py-2">
+        <span class="sr-only">{{ __('Controls') }}</span>
+      </th>
+    </tr>
+  </thead>
+</template>
+
+<script>
+export default {
+  props: {
+    resourceName: String,
+    fields: {
+      type: [Object, Array],
+    }, 
+  }
+}
+</script>

nova-components/InlineRelationship/resources/js/DataTables/TableRow.vue

@@ -0,0 +1,169 @@
+<template>
+  <tr
+    :data-pivot-id="resource.id.pivotValue"
+    :dusk="`${resource.id.value}-row`"
+    class="group"
+  >
+    <!-- Fields -->
+    <td
+      v-for="(field, index) in resource.fields"
+      :key="field.uniqueKey"
+      class="dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900 px-2"
+    >
+      <component
+        :is="'index-' + field.component"
+        :class="`text-${field.textAlign}`"
+        :field="field"
+        :resource="resource"
+        :resource-name="resourceName"
+        :via-resource="viaResource"
+        :via-resource-id="viaResourceId"
+      />
+    </td>
+
+    <td class="px-2 td-fit text-right align-middle dark:bg-gray-800 group-hover:bg-gray-50 dark:group-hover:bg-gray-900 py-2">
+      <div class="flex items-center justify-end space-x-0 text-gray-400">
+        <!-- Preview Resource Link -->
+        <button
+          type="button"
+          v-tooltip.click="__('View')"
+          :aria-label="__('View')"
+          :dusk="`${resource['id'].value}-edit-button`"
+          class="toolbar-button hover:text-primary-500 px-2 disabled:opacity-50 disabled:pointer-events-none"
+          @click="openPreviewModal"
+        >
+          <Icon type="eye" />
+        </button>
+
+        <!-- Edit Resource Link -->
+        <!-- <button
+          type="button"
+          v-tooltip.click="__('Edit')"
+          :aria-label="__('Edit')"
+          :data-testid="`${testId}-delete-button`"
+          :dusk="`${resource['id'].value}-edit-button`"
+          class="toolbar-button hover:text-primary-500 px-2 disabled:opacity-50 disabled:pointer-events-none"
+          @click.stop="openEditModal"
+        >
+          <Icon type="pencil-alt" />
+        </button> -->
+
+        <!-- Delete Resource Link -->
+        <button
+          type="button"
+          v-tooltip.click="__('Delete')"
+          :aria-label="__('Delete')"
+          :data-testid="`${testId}-delete-button`"
+          :dusk="`${resource['id'].value}-delete-button`"
+          class="toolbar-button hover:text-primary-500 px-2 disabled:opacity-50 disabled:pointer-events-none"
+          @click.stop="openDeleteModal"
+        >
+          <Icon type="trash" />
+        </button>
+
+        <DeleteResourceModal
+          mode="delete"
+          :show="deleteModalOpen"
+          @close="closeDeleteModal"
+          @confirm="confirmDelete"
+        />
+      </div>
+    </td>
+  </tr>
+
+  <PreviewResourceModal
+    v-if="previewModalOpen"
+    :resource-id="resource.id.value"
+    :resource-name="resourceName"
+    :show="previewModalOpen"
+    @close="closePreviewModal"
+    @confirm="closePreviewModal"
+  />
+</template>
+
+<script>
+import { Localization } from 'laravel-nova'
+
+export default {
+  emits: ['actionExecuted'],
+
+  mixins: [Localization],
+
+  props: [
+    'testId',
+    'restoreResource',
+    'resource',
+    'resourcesSelected',
+    'resourceName',
+    'relationshipType',
+    'viaRelationship',
+    'viaResource',
+    'viaResourceId',
+    'viaManyToMany',
+    'checked',
+    'shouldShowCheckboxes',
+    'shouldShowColumnBorders',
+    'tableStyle',
+    'updateSelectionStatus',
+    'queryString',
+    'clickAction',
+  ],
+
+  data: () => ({
+    previewModalOpen: false,
+    editModalOpen: false,
+    deleteModalOpen: false,
+  }),
+
+  methods: {
+    openPreviewModal() {
+      this.previewModalOpen = true;
+    },
+
+    closePreviewModal() {
+      this.previewModalOpen = false;
+    },
+
+    openEditModal() {
+      this.editModalOpen = true;
+    },
+
+    closeEditModal() {
+      this.editModalOpen = false;
+    },
+
+    openDeleteModal() {
+      this.deleteModalOpen = true
+    },
+
+    closeDeleteModal() {
+      this.deleteModalOpen = false
+    },
+
+    confirmDelete() {
+      this.deleteResource(this.resource)
+      this.closeDeleteModal()
+    },
+
+    /**
+     * Delete the given resource.
+     */
+    deleteResource(resource) {
+      return Nova.request({
+        url: '/nova-api/' + this.resourceName,
+        method: 'delete',
+        params: {
+          'resources[]': resource.id.value
+        },
+      }).then(response => {
+        this.deleteModalOpen = false
+
+        Nova.success(this.__('The :resource was deleted!', { resource: this.resourceName }))
+      }).catch(exception => {
+        console.log({exception});
+      })
+    },
+  },
+
+}
+</script>