wip

nova-components/InlineRelationship/resources/css/field.css

@@ -0,0 +1 @@
+/* Nova Field CSS */

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>

nova-components/InlineRelationship/resources/js/components/DetailField.vue

@@ -0,0 +1,9 @@
+<template>
+  <PanelItem :index="index" :field="field" />
+</template>
+
+<script>
+export default {
+  props: ['index', 'resource', 'resourceName', 'resourceId', 'field'],
+}
+</script>

nova-components/InlineRelationship/resources/js/components/FormField.vue

@@ -0,0 +1,114 @@
+<template>
+  <DefaultField
+    :field="currentField"
+    :errors="errors"
+    :show-help-text="showHelpText"
+    :full-width-content="fullWidthContent"
+  >
+    <template #field>
+      <inline-resource-table
+        :resourceName="currentField.relatedResourceURI"
+        :resources="resources"
+        :singularName="currentField.singularLabel"
+        @delete="deleteResources"
+       />
+
+      <CreateRelationButton
+        v-tooltip="__('Create :resource', { resource: currentField.singularLabel })"
+        @click="openRelationModal"
+        :dusk="`${currentField.attribute}-inline-create`"
+        />
+
+        <CreateRelationModal
+          :show="relationModalOpen"
+          @set-resource="handleSetResource"
+          @create-cancelled="closeRelationModal"
+          size="7xl"
+          :resource-name="currentField.relatedResourceURI"
+          :resource-id="resourceId"
+          :via-relationship="currentField.relationshipType"
+          :via-resource="currentField.relatedResourceURI"
+          :via-resource-id="viaResourceId"
+        />
+
+      <p v-if="hasError" class="my-2 text-danger">
+        {{ firstError }}
+      </p>
+    </template>
+  </DefaultField>
+</template>
+
+<script>
+import { DependentFormField, HandlesValidationErrors } from 'laravel-nova'
+import InlineResourceTable from '../DataTables/InlineResourceTable.vue'
+
+export default {
+  mixins: [DependentFormField, HandlesValidationErrors],
+
+  props: ['resourceName', 'resourceId', 'field'],
+
+  components: {
+    'inline-resource-table': InlineResourceTable
+  },
+
+  data: () => ({
+    relationModalOpen: false,
+    viaResourceId: null,
+    resources: [],
+    createdResourceIds: [],
+  }),
+
+  methods: {
+    /*
+     * Set the initial, internal value for the field.
+     */
+    setInitialValue() {
+      this.value = this.field.value || ''
+    },
+
+    /**
+     * Open the relation modal
+     */
+    openRelationModal() {
+      Nova.$emit('create-relation-modal-opened')
+      this.relationModalOpen = true
+    },
+
+    /**
+     * Close the relation modal
+     */
+    closeRelationModal() {
+      this.relationModalOpen = false
+      Nova.$emit('create-relation-modal-closed') 
+    },
+
+    /**
+     * Handle setting the selected resource
+     * @param  int options.id
+     */
+    handleSetResource({ id }) {
+      this.closeRelationModal()
+
+      this.createdResourceIds.push(id)
+
+      this.fetchResources()
+    },
+
+    fetchResources() {
+      Nova.request().get(`/nova-api/product-variants?ids=${this.createdResourceIds.join()}`).then(response => {
+        this.resources = response.data.resources
+      })
+    },
+
+    /**
+     * Fill the given FormData object with the field's internal value.
+     */
+    fill(formData) {
+      formData.append(this.fieldAttribute, this.createdResourceIds || [])
+    },
+  },
+
+  mounted() {
+  }
+}
+</script>

nova-components/InlineRelationship/resources/js/components/IndexField.vue

@@ -0,0 +1,15 @@
+<template>
+  <span>{{ fieldValue }}</span>
+</template>
+
+<script>
+export default {
+  props: ['resourceName', 'field'],
+
+  computed: {
+    fieldValue() {
+      return this.field.displayedAs || this.field.value
+    },
+  }
+}
+</script>

nova-components/InlineRelationship/resources/js/field.js

@@ -0,0 +1,9 @@
+import IndexField from './components/IndexField'
+import DetailField from './components/DetailField'
+import FormField from './components/FormField'
+
+Nova.booting((app, store) => {
+  app.component('index-inline-relationship', IndexField)
+  app.component('detail-inline-relationship', DetailField)
+  app.component('form-inline-relationship', FormField)
+})