add nova

nova/resources/js/components/Modals/PreviewResourceModal.vue

@@ -0,0 +1,147 @@
+<template>
+  <Modal
+    :show="show"
+    @close-via-escape="$emit('close')"
+    role="alertdialog"
+    size="2xl"
+    :use-focus-trap="false"
+  >
+    <LoadingView
+      :loading="loading"
+      class="mx-auto bg-white dark:bg-gray-800 rounded-lg shadow-lg overflow-hidden"
+    >
+      <slot>
+        <ModalHeader class="flex items-center">
+          <span>
+            {{ modalTitle }}
+            <span
+              v-if="resource && resource.softDeleted"
+              class="ml-auto bg-red-50 text-red-500 py-0.5 px-2 rounded-full text-xs"
+            >
+              {{ __('Soft Deleted') }}
+            </span>
+          </span>
+
+          <Link
+            dusk="detail-preview-button"
+            :href="$url(`/resources/${resourceName}/${resourceId}`)"
+            class="ml-auto"
+            :alt="__('View :resource', { resource: title })"
+          >
+            <Icon type="arrow-right" />
+          </Link>
+        </ModalHeader>
+        <ModalContent
+          class="px-8 divide-y divide-gray-100 dark:divide-gray-800 -mx-3"
+        >
+          <template v-if="resource">
+            <component
+              :key="index"
+              v-for="(field, index) in resource.fields"
+              :index="index"
+              :is="`detail-${field.component}`"
+              :resource-name="resourceName"
+              :resource-id="resourceId"
+              :resource="resource"
+              :field="field"
+            />
+
+            <div v-if="resource.fields.length == 0">
+              {{ __('There are no fields to display.') }}
+            </div>
+          </template>
+        </ModalContent>
+      </slot>
+
+      <ModalFooter>
+        <div class="ml-auto">
+          <Button
+            v-if="resource"
+            dusk="confirm-preview-button"
+            @click.prevent="$emit('close')"
+            :label="__('Close')"
+          />
+        </div>
+      </ModalFooter>
+    </LoadingView>
+  </Modal>
+</template>
+
+<script>
+import { mapProps } from '@/mixins'
+import { minimum } from '@/util'
+import { Button } from 'laravel-nova-ui'
+
+export default {
+  components: {
+    Button,
+  },
+
+  emits: ['close'],
+
+  props: {
+    show: { type: Boolean, default: false },
+
+    ...mapProps(['resourceName', 'resourceId']),
+  },
+
+  data: () => ({
+    loading: true,
+    title: null,
+    resource: null,
+  }),
+
+  async created() {
+    await this.getResource()
+  },
+
+  mounted() {
+    Nova.$emit('close-dropdowns')
+  },
+
+  methods: {
+    getResource() {
+      this.resource = null
+
+      return minimum(
+        Nova.request().get(
+          `/nova-api/${this.resourceName}/${this.resourceId}/preview`
+        )
+      )
+        .then(({ data: { title, resource } }) => {
+          this.title = title
+          this.resource = resource
+          this.loading = false
+        })
+        .catch(error => {
+          if (error.response.status >= 500) {
+            Nova.$emit('error', error.response.data.message)
+            return
+          }
+
+          if (error.response.status === 404) {
+            Nova.visit('/404')
+            return
+          }
+
+          if (error.response.status === 403) {
+            Nova.visit('/403')
+            return
+          }
+
+          if (error.response.status === 401) return Nova.redirectToLogin()
+
+          Nova.error(this.__('This resource no longer exists'))
+
+          Nova.visit(`/resources/${this.resourceName}`)
+        })
+    },
+  },
+
+  computed: {
+    modalTitle() {
+      return `${this.__('Previewing')} ${this.title}`
+    },
+  },
+}
+</script>