wip

nova-components/InlineRelationship/.gitignore

@@ -0,0 +1,10 @@
+/.idea
+/vendor
+/node_modules
+package-lock.json
+composer.phar
+composer.lock
+phpunit.xml
+.phpunit.result.cache
+.DS_Store
+Thumbs.db

nova-components/InlineRelationship/composer.json

@@ -0,0 +1,29 @@
+{
+    "name": "nurmuhammet/inline-relationship",
+    "description": "A Laravel Nova field.",
+    "keywords": [
+        "laravel",
+        "nova"
+    ],
+    "license": "MIT",
+    "require": {
+        "php": "^7.3|^8.0"
+    },
+    "autoload": {
+        "psr-4": {
+            "Nurmuhammet\\InlineRelationship\\": "src/"
+        }
+    },
+    "extra": {
+        "laravel": {
+            "providers": [
+                "Nurmuhammet\\InlineRelationship\\FieldServiceProvider"
+            ]
+        }
+    },
+    "config": {
+        "sort-packages": true
+    },
+    "minimum-stability": "dev",
+    "prefer-stable": true
+}

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

@@ -0,0 +1 @@
+

nova-components/InlineRelationship/dist/js/field.js.LICENSE.txt

@@ -0,0 +1,5 @@
+/*!
+ * vuex v4.1.0
+ * (c) 2022 Evan You
+ * @license MIT
+ */

nova-components/InlineRelationship/dist/mix-manifest.json

@@ -0,0 +1,4 @@
+{
+    "/js/field.js": "/js/field.js",
+    "/css/field.css": "/css/field.css"
+}

nova-components/InlineRelationship/nova.mix.js

@@ -0,0 +1,40 @@
+const mix = require('laravel-mix')
+const webpack = require('webpack')
+const path = require('path')
+
+class NovaExtension {
+  name() {
+    return 'nova-extension'
+  }
+
+  register(name) {
+    this.name = name
+  }
+
+  webpackPlugins() {
+    return new webpack.ProvidePlugin({
+      _: 'lodash',
+      Errors: 'form-backend-validation',
+    })
+  }
+
+  webpackConfig(webpackConfig) {
+    webpackConfig.externals = {
+      vue: 'Vue',
+    }
+
+    webpackConfig.resolve.alias = {
+      ...(webpackConfig.resolve.alias || {}),
+      'laravel-nova': path.join(
+        __dirname,
+        '../../vendor/laravel/nova/resources/js/mixins/packages.js'
+      ),
+    }
+
+    webpackConfig.output = {
+      uniqueName: this.name,
+    }
+  }
+}
+
+mix.extend('nova', new NovaExtension())

nova-components/InlineRelationship/package.json

@@ -0,0 +1,22 @@
+{
+  "private": true,
+  "scripts": {
+    "dev": "npm run development",
+    "development": "mix",
+    "watch": "mix watch",
+    "watch-poll": "mix watch -- --watch-options-poll=1000",
+    "hot": "mix watch --hot",
+    "prod": "npm run production",
+    "production": "mix --production",
+    "nova:install": "npm --prefix='../../vendor/laravel/nova' ci"
+  },
+  "devDependencies": {
+    "@vue/compiler-sfc": "^3.2.22",
+    "form-backend-validation": "^2.3.3",
+    "laravel-mix": "^6.0.41",
+    "lodash": "^4.17.21",
+    "postcss": "^8.3.11",
+    "vue-loader": "^16.8.3"
+  },
+  "dependencies": {}
+}

nova-components/InlineRelationship/postcss.config.js

@@ -0,0 +1 @@
+module.exports = {}

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)
+})

nova-components/InlineRelationship/routes/api.php

@@ -0,0 +1,5 @@
+<?php
+
+use Illuminate\Support\Facades\Route;
+
+// Route::post('{resource}', [InlineRelationshipController::class, 'store']);

nova-components/InlineRelationship/src/FieldServiceProvider.php

@@ -0,0 +1,52 @@
+<?php
+
+namespace Nurmuhammet\InlineRelationship;
+
+use Illuminate\Support\Facades\Route;
+use Illuminate\Support\ServiceProvider;
+use Laravel\Nova\Events\ServingNova;
+use Laravel\Nova\Nova;
+
+class FieldServiceProvider extends ServiceProvider
+{
+    /**
+     * Bootstrap any application services.
+     *
+     * @return void
+     */
+    public function boot()
+    {
+        $this->app->booted(function () {
+            $this->routes();
+        });
+
+        Nova::serving(function (ServingNova $event) {
+            Nova::script('inline-relationship', __DIR__.'/../dist/js/field.js');
+            Nova::style('inline-relationship', __DIR__.'/../dist/css/field.css');
+        });
+    }
+
+    /**
+     * Register any application services.
+     *
+     * @return void
+     */
+    public function register()
+    {
+        //
+    }
+
+    /**
+     * Package Routes
+     */
+    protected function routes(): void
+    {
+        if ($this->app->routesAreCached()) {
+            return;
+        }
+
+        Route::middleware(['nova'])
+            ->prefix('nova-vendor/nurmuhammet/inline-relationship')
+            ->group(__DIR__.'/../routes/api.php');
+    }
+}

nova-components/InlineRelationship/src/Http/Controllers/InlineRelationshipController.php

@@ -0,0 +1,5 @@
+<?php
+
+namespace Nurmuhammet\InlineRelationship\Http\Controllers;
+
+class InlineRelationshipController {}

nova-components/InlineRelationship/src/InlineRelationship.php

@@ -0,0 +1,115 @@
+<?php
+
+namespace Nurmuhammet\InlineRelationship;
+
+use Exception;
+use Laravel\Nova\Fields\Field;
+use Laravel\Nova\Fields\SupportsDependentFields;
+
+class InlineRelationship extends Field
+{
+    use SupportsDependentFields;
+
+    /**
+     * The field's component.
+     *
+     * @var string
+     */
+    public $component = 'inline-relationship';
+
+    /**
+     * Related resource name
+     */
+    protected string $relatedResourceName;
+
+    /**
+     * Resource relationship attribute to related resource
+     */
+    protected string $relationshipAttribute;
+
+    /**
+     * Related resource
+     */
+    protected string $relatedResource;
+
+    /**
+     * Relationship type
+     */
+    protected string $relationshipType;
+
+    /**
+     * Create a new field.
+     *
+     * @param  string|null  $attribute
+     * @param  class-string<\Laravel\Nova\Resource>|null  $resource
+     * @return void
+     */
+    public function __construct(string $name, string $attribute, string $resource)
+    {
+        parent::__construct($name, $attribute);
+
+        $this->relatedResourceName = $name;
+        $this->relationshipAttribute = $attribute;
+        $this->relatedResource = $resource;
+        $this->relatedResourceURI = $resource::uriKey();
+        $this->relationshipType = $this->guessRelationshipType();
+
+        $this->validate();
+
+        $this->fullWidth();
+        $this->transformDataForFrontend();
+    }
+
+    /**
+     * Validate user's arguments
+     */
+    public function validate(): void
+    {
+        in_array($this->relationshipType, $this->allowedRelationships())
+            ? true
+            : throw new Exception("Selected relationship ({$relationshipType}) is not allowed");
+    }
+
+    /**
+     * Alloed relationships
+     */
+    public function allowedRelationships(): array
+    {
+        return [
+            'Illuminate\\Database\\Eloquent\\Relations\\HasMany',
+        ];
+    }
+
+    /**
+     * Guess relationship type from related resource
+     */
+    public function guessRelationshipType(): string
+    {
+        return get_class((new $this->relatedResource::$model)->{$this->relationshipAttribute}());
+    }
+
+    /**
+     * Formatted relationship name
+     */
+    public function formattedRelatioshipName(): string
+    {
+        return match ($this->relationshipType) {
+            'Illuminate\\Database\\Eloquent\\Relations\\HasMany' => 'hasMany',
+        };
+    }
+
+    /**
+     * Transform data to frontend
+     */
+    public function transformDataForFrontend(): self
+    {
+        return $this->withMeta([
+            'singularLabel' => $this->relatedResource::singularLabel(),
+            'relatedResourceName' => $this->relatedResourceName,
+            'relationshipAttribute' => $this->relationshipAttribute,
+            'relatedResource' => $this->relatedResource,
+            'relatedResourceURI' => $this->relatedResourceURI,
+            'relationshipType' => $this->formattedRelatioshipName(),
+        ]);
+    }
+}

nova-components/InlineRelationship/webpack.mix.js

@@ -0,0 +1,10 @@
+let mix = require('laravel-mix')
+
+require('./nova.mix')
+
+mix
+  .setPublicPath('dist')
+  .js('resources/js/field.js', 'js')
+  .vue({ version: 3 })
+  .css('resources/css/field.css', 'css')
+  .nova('nurmuhammet/inline-relationship')