Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Make NovaSortable compatible with ExpandableTableRow #186

Open
wants to merge 3 commits into
base: main
Choose a base branch
from
Open

Make NovaSortable compatible with ExpandableTableRow #186

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
3e33be2
Make it compatible with dcasia/expandable-table-row, removing unneces…
Oct 14, 2023
3d1800b
Hide moveTo buttons, temporarly
Oct 14, 2023
347d7b2
Add config parameter to hid/show move to button
Oct 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions config/nova-sortable.php
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
<?php

return [
"displayMoveToButtons" => true
];
108 changes: 107 additions & 1 deletion dist/css/tool.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1 +1,107 @@
.o1-sr-only{clip:rect(0,0,0,0);border-width:0;height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.o1-ml-4{margin-left:1rem}.o1-flex{display:flex}.o1-cursor-default{cursor:default}.o1-cursor-move{cursor:move}.o1-cursor-pointer{cursor:pointer}.o1-flex-col{flex-direction:column}.o1-items-center{align-items:center}.o1-justify-end{justify-content:flex-end}.o1-space-x-0>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-left:calc(0px*(1 - var(--tw-space-x-reverse)));margin-right:calc(0px*var(--tw-space-x-reverse))}.o1-divide-x>:not([hidden])~:not([hidden]){--tw-divide-x-reverse:0;border-left-width:calc(1px*(1 - var(--tw-divide-x-reverse)));border-right-width:calc(1px*var(--tw-divide-x-reverse))}.o1-divide-y>:not([hidden])~:not([hidden]){--tw-divide-y-reverse:0;border-bottom-width:calc(1px*var(--tw-divide-y-reverse));border-top-width:calc(1px*(1 - var(--tw-divide-y-reverse)))}.o1-divide-gray-100>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(243 244 246/var(--tw-divide-opacity))}.o1-whitespace-nowrap{white-space:nowrap}.o1-border-r{border-right-width:1px}.o1-border-t{border-top-width:1px}.o1-px-2{padding-left:.5rem;padding-right:.5rem}.o1-px-6{padding-left:1.5rem;padding-right:1.5rem}.o1-py-2{padding-bottom:.5rem;padding-top:.5rem}.o1-pl-5{padding-left:1.25rem}.o1-pr-2{padding-right:.5rem}.o1-pr-5{padding-right:1.25rem}.o1-text-right{text-align:right}.o1-align-middle{vertical-align:middle}.o1-uppercase{text-transform:uppercase}.o1-leading-normal{line-height:1.5}.o1-tracking-wide{letter-spacing:.025em}*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: }.disabled\:o1-pointer-events-none:disabled{pointer-events:none}.disabled\:o1-opacity-50:disabled{opacity:.5}.o1-dark .dark\:o1-divide-gray-700>:not([hidden])~:not([hidden]){--tw-divide-opacity:1;border-color:rgb(55 65 81/var(--tw-divide-opacity))}
.o1-flex {
display: flex
}
.o1-cursor-default {
cursor: default
}
.o1-cursor-move {
cursor: move
}
.o1-cursor-pointer {
cursor: pointer
}
.o1-flex-col {
flex-direction: column
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia:
}
23,058 changes: 23,056 additions & 2 deletions dist/js/entry.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions dist/js/entry.js.LICENSE.txt
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/*!
* vue-draggable-next v2.1.0
* (c) 2021 Anish George
* vue-draggable-next v2.2.0
* (c) 2023 Anish George
* @license MIT
*/

Expand Down
6 changes: 3 additions & 3 deletions nova.mix.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,9 +25,9 @@ class NovaExtension {

webpackConfig.resolve.alias = {
...(webpackConfig.resolve.alias || {}),
'laravel-nova': path.join(__dirname, 'vendor/laravel/nova/resources/js/mixins/packages.js'),
'laravel-nova-mixins': path.join(__dirname, 'vendor/laravel/nova/resources/js/mixins/index.js'),
'@': path.join(__dirname, 'vendor/laravel/nova/resources/js/'),
'laravel-nova': path.join(__dirname, '../../vendor/laravel/nova/resources/js/mixins/packages.js'),
'laravel-nova-mixins': path.join(__dirname, '../../vendor/laravel/nova/resources/js/mixins/index.js'),
'@': path.join(__dirname, '../../vendor/laravel/nova/resources/js/'),
};
webpackConfig.output = {
uniqueName: this.name,
Expand Down
10 changes: 5 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@
"dependencies": {
"@inertiajs/inertia": "^0.11.1",
"vue": "^3.2.41",
"vue-draggable-next": "^2.1.1",
"vue-draggable-next": "^2.2.1",
"vuex": "^4.1.0"
}
}
24 changes: 9 additions & 15 deletions resources/js/components/ReorderButtons.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
<template>
<div class="o1-flex o1-items-center">
<slot></slot>
<div class="o1-flex o1-items-center o1-ml-4" v-tooltip="reorderDisabledTooltip" v-if="canSeeReorderButtons">
<div class="o1-flex o1-flex-col">
<div class="ml-2 inline-block align-middle" v-tooltip="reorderDisabledTooltip" v-if="canSeeReorderButtons">
<div class="inline-flex flex-col align-middle mr-1" v-if="displayMoveToButtons">
<ChevronUpIcon
@click.stop="!reorderDisabled && $emit('moveToStart')"
:custom-class="{
'o1-cursor-pointer text-gray-400 hover:text-primary-400 active:text-primary-500': !reorderDisabled,
'o1-cursor-pointer text-gray-400 hover:text-primary-500 active:text-primary-500': !reorderDisabled,
'o1-cursor-default text-gray-200 dark:text-gray-600': reorderDisabled,
}"
v-tooltip="moveToStartTooltip"
Expand All @@ -15,34 +13,30 @@
<ChevronDownIcon
@click.stop="!reorderDisabled && $emit('moveToEnd')"
:custom-class="{
'o1-cursor-pointer text-gray-400 hover:text-primary-400 active:text-primary-500': !reorderDisabled,
'o1-cursor-pointer text-gray-400 hover:text-primary-500 active:text-primary-500': !reorderDisabled,
'o1-cursor-default text-gray-200 dark:text-gray-600': reorderDisabled,
}"
v-tooltip="moveToEndTooltip"
/>
</div>

<BurgerIcon
style="min-width: 22px; width: 22px"
:custom-class="{
'handle o1-cursor-move text-gray-400 hover:text-primary-400 active:text-primary-500': !reorderDisabled,
<heroicons-outline-menu class="inline-flex flex-col align-middle" width="24" height="24" href="/"
:class="{
'handle o1-cursor-move text-gray-400 hover:text-primary-500 active:text-primary-500': !reorderDisabled,
'o1-cursor-default text-gray-200 dark:text-gray-600': reorderDisabled,
}"
/>
</div>
</div>
</template>

<script>
import ChevronUpIcon from '../icons/ChevronUpIcon';
import ChevronDownIcon from '../icons/ChevronDownIcon';
import BurgerIcon from '../icons/BurgerIcon';
import { canSortResource } from '../mixins/canSortResource';

export default {
components: { ChevronUpIcon, ChevronDownIcon, BurgerIcon },
components: { ChevronUpIcon, ChevronDownIcon },

props: ['resource', 'viaResourceId', 'relationshipType', 'viaRelationship', 'resourceName'],
props: ['resource', 'viaResourceId', 'relationshipType', 'viaRelationship', 'resourceName', 'displayMoveToButtons'],

computed: {
canSeeReorderButtons() {
Expand Down
31 changes: 14 additions & 17 deletions resources/js/components/ResourceTable.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,16 @@
<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"
>
<draggable
v-if="resources.length > 0"
tag="table"
v-model="fakeResources"
handle=".handle"
filter="thead"
draggable="tbody"
@end="updateOrder"
:move="handleMove"
data-testid="resource-table"
>
<ResourceTableHeader
:resource-name="resourceName"
:fields="fields"
Expand All @@ -15,16 +21,8 @@
@reset-order-by="resetOrderBy"
:resource="{ ...(fakeResources[0] || {}) }"
/>
<draggable
tag="tbody"
v-model="fakeResources"
handle=".handle"
draggable="tr"
@update="updateOrder"
class="o1-divide-y o1-divide-gray-100 dark:o1-divide-gray-700"
>
<tbody class="draggable" v-for="(resource, index) in fakeResources" :index="index">
<ResourceTableRow
v-for="(resource, index) in fakeResources"
@actionExecuted="$emit('actionExecuted')"
:testId="`${resourceName}-items-${index}`"
:key="`${resourceName}-items-${index}-${resource.id.value}`"
Expand All @@ -48,8 +46,8 @@
@moveToStart="moveToStart(resource)"
@moveToEnd="moveToEnd(resource)"
/>
</draggable>
</table>
</tbody>
</draggable>
</div>
</template>

Expand Down Expand Up @@ -153,7 +151,6 @@ export default {
this.$emit('reset-order-by', field)
},
},

computed: {
/**
* Get all of the available fields for the resources.
Expand Down
84 changes: 0 additions & 84 deletions resources/js/components/ResourceTableHeader.vue
View file
Open in desktop

This file was deleted.

Loading