Skip to content

Commit

Permalink
wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@sertxudev
sertxudev committed Jul 18, 2023
1 parent 43bba8a commit a3113de
Show file tree
Hide file tree
Showing 17 changed files with 55,109 additions and 49,882 deletions.
104,479 changes: 54,737 additions & 49,742 deletions publishable/assets/js/app.js
View file

Large diffs are not rendered by default.

3 changes: 3 additions & 0 deletions resources/icons/sort-asc.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/icons/sort-desc.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions resources/icons/sort-none.svg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
41 changes: 36 additions & 5 deletions resources/js/components/Panel.vue
View file
Original file line number Diff line number Diff line change
@@ -1,17 +1,48 @@
<template>
<div class="mt-5 md:mt-0 md:col-span-3 shadow rounded-md">
<div class="px-4 py-5 bg-white space-y-6 sm:p-6 rounded-t-md">
<slot></slot>
<div class="md:grid md:grid-cols-4 md:gap-6">
<div class="md:col-span-1">
<div class="px-4 sm:px-0">
<h3 class="text-xl font-medium leading-6 text-gray-900">{{ title }}</h3>
<p class="mt-2 text-sm text-gray-600">{{ description }}</p>
</div>
</div>

<div class="bg-gray-50 flex items-center justify-end px-4 py-3 rounded-b-md space-x-2">
<slot name="footer"></slot>
<!-- <div class="mt-5 md:mt-0 md:col-span-3 shadow rounded-md">
<div class="px-4 py-5 bg-white space-y-6 sm:p-6 rounded-t-md">
<div v-for="field in fields" class="gap-6 grid grid-cols-3">
<Component :is="`form-${field.component}`" :field="field"/>
</div>
</div>
<div class="bg-gray-50 flex items-center justify-end px-4 py-3 rounded-b-md space-x-2">
<slot name="footer"></slot>
</div>
</div>-->

<div class="mt-5 md:mt-0 md:col-span-3 shadow rounded-md px-4 py-5 bg-white space-y-6">
<div v-for="field in fields" class="gap-6 grid grid-cols-3">
<Component :is="`form-${field.component}`" :field="field"/>
</div>
</div>
</div>
</template>

<script>
export default {
name: "Panel",
props: {
title: {
type: String,
required: true,
},
description: {
type: String,
required: true,
},
fields: {
type: Array,
required: true,
},
},
}
</script>
8 changes: 4 additions & 4 deletions resources/js/components/Resources/Datatable.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
<th class="px-6 py-4 w-0" scope="col">&nbsp;</th>

<!-- Resource columns -->
<th v-for="field in resources.header"
<th v-for="field in resources.data[0].fields"
class="px-6 py-4 font-medium"
:class="[{ 'cursor-pointer': field.sortable }, `text-${field.align}`]"
scope="col"
Expand All @@ -17,17 +17,17 @@

<!-- Sort asc icon -->
<template v-if="field.order === 'asc'">
<svg height="12" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M13.516 5.06606L8.73323 0.283346C8.35544 -0.0944486 7.74454 -0.0944486 7.37076 0.283346L2.58403 5.06606C1.97714 5.67295 2.40719 6.71389 3.26727 6.71389H12.8327C13.6928 6.71389 14.1228 5.67295 13.516 5.06606Z"/></svg>
<Icon name="sort-asc" class="w-3" />
</template>

<!-- Sort desc icon -->
<template v-else-if="field.order === 'desc'">
<svg height="12" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M3.26727 9.28613H12.8327C13.6928 9.28613 14.1228 10.3271 13.516 10.934L8.73323 15.7167C8.35544 16.0945 7.74454 16.0945 7.37076 15.7167L2.58403 10.934C1.97714 10.3271 2.40719 9.28613 3.26727 9.28613Z"/></svg>
<Icon name="sort-desc" class="w-3" />
</template>

<!-- Sort none icon -->
<template v-else>
<svg height="12" viewBox="0 0 16 16" fill="currentColor" xmlns="http://www.w3.org/2000/svg"><path d="M3.26727 9.28611H12.8327C13.6928 9.28611 14.1228 10.3271 13.516 10.9339L8.73323 15.7167C8.35544 16.0944 7.74454 16.0944 7.37076 15.7167L2.58403 10.9339C1.97714 10.3271 2.40719 9.28611 3.26727 9.28611ZM13.516 5.06606L8.73323 0.283346C8.35544 -0.0944486 7.74454 -0.0944486 7.37076 0.283346L2.58403 5.06606C1.97714 5.67295 2.40719 6.71389 3.26727 6.71389H12.8327C13.6928 6.71389 14.1228 5.67295 13.516 5.06606Z"/></svg>
<Icon name="sort-none" class="w-3" />
</template>
</div>
</div>
Expand Down
143 changes: 64 additions & 79 deletions resources/js/views/Resources/Create.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,8 @@
</div>

<!-- Fields -->
<form ref="form" @submit.prevent="submit">
<div class="md:grid md:grid-cols-4 md:gap-6">
<form ref="form" @submit.prevent="submit" class="space-y-4">
<!-- <div class="md:grid md:grid-cols-4 md:gap-6">
<div class="md:col-span-1">
<div class="px-4 sm:px-0">
<h3 class="text-xl font-medium leading-6 text-gray-900">
Expand All @@ -26,91 +26,78 @@
</div>
</div>
<Panel>
<div v-for="field in resource.data.fields" class="gap-6 grid grid-cols-3">
<Component :is="`form-${field.component}`" :field="field"/>
</div>
<template v-slot:footer>
<button class="btn-secondary" type="button" @click.prevent="cancel">Cancel</button>

<div class="btn-group-primary">
<button v-if="saveMode === 'create'" @click="changeMode = false"
name="create" type="submit">
<span>Create {{ resource?.labels?.singular.toLowerCase() }}</span>
</button>

<button v-if="saveMode === 'create-and-edit'" @click="changeMode = false"
name="create-and-edit" type="submit">
<span>Create & edit</span>
</button>

<div v-click-away="() => this.changeMode = false">
<button type="button" @click.prevent="changeMode = !changeMode">
<Icon name="chevron-down" class="w-3"/>
</button>

<Transition
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
enter-active-class="transition ease-out duration-100"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
leave-active-class="transition ease-in duration-75">

<!-- <div class="dropdown-menu" v-if="changeMode">
<div class="py-1 flex flex-col">
&lt;!&ndash; Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" &ndash;&gt;
<button @click.prevent="saveMode = 'create'" class="dropdown-item">
<span class="text-blue-700 w-3.5">
<Icon name="check" class="w-3.5"
v-show="saveMode === 'create'"/>
</span>
</div>-->

<span class="lowercase first-letter:uppercase -mt-0.5">
Create {{ resource?.labels?.singular }}
</span>
</button>
<!-- <Panel
:title="'Create ' + resource.labels.singular"
:description="'This is the basic information of the resource.'"
:fields="resource.data.fields" />-->

<button class="dropdown-item"
@click.prevent="saveMode = 'create-and-edit'">
<span class="text-blue-700 w-3.5">
<Icon name="check" class="w-3.5"
v-show="saveMode === 'create-and-edit'"/>
</span>
<div class="space-y-6">
<template v-for="panel in resource.data.panels">
<Panel
:title="panel.title"
:description="panel.description"
:fields="panel.fields" />
</template>
</div>

<span class="lowercase first-letter:uppercase">Create & edit</span>
</button>
</div>
</div>-->
<DropdownMenu>
<button @click.prevent="saveMode = 'create'"
class="flex items-center space-x-3 px-4 py-2 text-gray-700 text-sm w-full">
<div class="flex items-center justify-end space-x-2">
<button class="btn-secondary" type="button" @click.prevent="cancel">Cancel</button>

<div class="btn-group-primary">
<button v-if="saveMode === 'create'" @click="changeMode = false"
name="create" type="submit">
<span>Create {{ resource?.labels?.singular.toLowerCase() }}</span>
</button>

<button v-if="saveMode === 'create-and-edit'" @click="changeMode = false"
name="create-and-edit" type="submit">
<span>Create & edit</span>
</button>

<div v-click-away="() => this.changeMode = false">
<button type="button" @click.prevent="changeMode = !changeMode">
<Icon name="chevron-down" class="w-3"/>
</button>

<Transition
enter-from-class="transform opacity-0 scale-95"
enter-to-class="transform opacity-100 scale-100"
enter-active-class="transition ease-out duration-100"
leave-from-class="transform opacity-100 scale-100"
leave-to-class="transform opacity-0 scale-95"
leave-active-class="transition ease-in duration-75">

<div class="dropdown-menu" v-if="changeMode">
<div class="py-1 flex flex-col">
<!-- Active: "bg-gray-100 text-gray-900", Not Active: "text-gray-700" -->
<button @click.prevent="saveMode = 'create'" class="dropdown-item">
<span class="text-blue-700 w-3.5">
<Icon name="check" class="w-3.5"
v-show="saveMode === 'create'"/>
</span>

<span class="lowercase first-letter:uppercase -mt-0.5">
<span class="lowercase first-letter:uppercase -mt-0.5">
Create {{ resource?.labels?.singular }}
</span>
</button>
</button>

<button class="flex items-center space-x-3 px-4 py-2 text-gray-700 text-sm w-full"
@click.prevent="saveMode = 'create-and-edit'">
<button class="dropdown-item"
@click.prevent="saveMode = 'create-and-edit'">
<span class="text-blue-700 w-3.5">
<Icon name="check" class="w-3.5"
v-show="saveMode === 'create-and-edit'"/>
</span>

<span class="lowercase first-letter:uppercase">Create & edit</span>
</button>
</DropdownMenu>
</Transition>
<span class="lowercase first-letter:uppercase">Create & edit</span>
</button>
</div>
</div>
</div>
</template>
</Panel>
</Transition>
</div>
</div>
</div>
</form>
</div>
Expand All @@ -133,9 +120,7 @@ export default {
methods: {
getResource() {
this.$http.get(`/resources/${this.$route.params.resourceName}/create`)
.then(response => {
this.resource = response.data
})
.then(response => this.resource = response.data)
},
cancel() {
this.$router.push({name: 'resource-index', params: {resourceName: this.$route.params.resourceName}})
Expand All @@ -153,14 +138,14 @@ export default {
timeout: 4000
})

if (isCreateAndEdit) {
this.$router.replace({
name: 'resource-edit',
params: {resourceName: this.$route.params.resourceName, resourceId: response.data.data.key}
})
} else {
this.$router.back()
if (!isCreateAndEdit) {
return this.$router.back()
}

this.$router.replace({
name: 'resource-edit',
params: {resourceName: this.$route.params.resourceName, resourceId: response.data.data.key}
})
})
}
}
Expand Down
2 changes: 1 addition & 1 deletion resources/js/views/Resources/Index.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@
<!-- Datatable -->
<div class="bg-white flex flex-col max-w-0 min-w-full rounded-lg shadow w-full">
<!-- Datatable tools -->
<div class="flex items-center justify-between h-9 m-4">
<div class="flex items-center justify-between h-9 mx-4 my-2.5">
<!-- Tools left -->
<div class="flex items-center space-x-4 h-full">
<!-- Selection tool -->
Expand Down
6 changes: 3 additions & 3 deletions routes/api.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,13 +14,13 @@
*
* @see https://laravel.com/docs/8.x/controllers#actions-handled-by-resource-controller
*/
Route::get('/resources/{resource}', [Controllers\ResourceIndexController::class, 'index'])
Route::get('/resources/{resource}', Controllers\ResourceIndexController::class)
->name('resources.index');

Route::get('/resources/{resource}/create', [Controllers\ResourceCreateController::class, 'create'])
Route::get('/resources/{resource}/create', Controllers\ResourceCreateController::class)
->name('resources.create');

Route::post('/resources/{resource}', [Controllers\ResourceCreateController::class, 'store'])
Route::post('/resources/{resource}', [Controllers\ResourceStoreController::class, 'store'])
->name('resources.store');

Route::get('/resources/{resource}/{id}', [Controllers\ResourceShowController::class, 'show'])
Expand Down
17 changes: 16 additions & 1 deletion src/Fields/Field.php
View file
Original file line number Diff line number Diff line change
Expand Up @@ -153,7 +153,7 @@ public function save(Model $model, array $data): void {
/**
* Transform the field into an array.
*/
public function toArray(Model $model): array {
public function toArray(Request $request, Model $model): array {
$field = [
'key' => $this->getKey(),
'component' => $this->component,
Expand All @@ -171,6 +171,21 @@ public function toArray(Model $model): array {
$field['align'] = $this->align;
}

/** @see Sortable */
if (isset($this->sortable)) {
$field['sortable'] = $this->sortable;
}

$sortBy = explode(',', $request->query('sortBy'));
$sortOrder = explode(',', $request->query('sortOrder'));

$sortIndex = array_search($this->getKey(), $sortBy);
if ($sortIndex !== false) {
$order = $sortOrder[$sortIndex];

$field['order'] = $order;
}

return array_merge($field, $this->additional($model));
}

Expand Down
Loading

0 comments on commit a3113de

Please sign in to comment.