-
Notifications
You must be signed in to change notification settings - Fork 55
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.
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
List multi level #1181
Open
seballot
wants to merge
42
commits into
doryphore-dev
Choose a base branch
from
list-multi-level
base: doryphore-dev
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
List multi level #1181
Changes from all commits
Commits
Show all changes
42 commits
Select commit
Hold shift + click to select a range
325071d
Change List data structure
seballot c1058a4
disable eslint rule (we use new for Vue)
seballot 6bacbc8
Refactor ListController to use VueJs
seballot 4bde79e
list-form: ability to add children
seballot 7640e1d
list-node-id: check of presence and uniquness
seballot 0c7c4af
list: do not save vueRef in DB
seballot 24d5145
list-form: specific label for child node
seballot 6069864
Fix list import checkbox width
seballot 287a790
feat(bazar-entry-form): Improve display for filter and check all
seballot 7ed620d
Flatten the option tree so it work with all existing fields
seballot 8a89e7c
Move fields/inputs js & css is dedicate folder
seballot 5f07d35
Adds dedicate input (checkbox-tree) to render multi level list
seballot f5dffd5
linting
seballot a940706
wip
seballot e73b160
linting
seballot f804d49
facette: handle multi level list
seballot 549e7e9
Only display option actually used by the entries list
seballot e39a169
Refactor formatFilters -> getFilters, calle the filter options "nodes"
seballot 617e49a
Make all calculation recursive
seballot ec4b62f
Adds both parent and parents to each node
seballot 6ad3e25
simplify tree logic by pre calculating all parents and descendants
seballot e92741a
hide icon in panel title beause it has a margin
seballot 1625fe8
fix(bazar): field enum with empty children
mrflos 3214b55
Refactor getFilters
seballot e121bb5
handle missing node
seballot 146c84e
doc(README): fix typos
mrflos 8287808
ListForm: abilty to drag and drop
seballot 13d3e4a
checkbox tree: expandable children
seballot b69caec
chekcbox-tree adds "check all"
seballot f98e8fe
Rearrange bazar css and js file for more clarity
seballot aeb9a90
better throbber
seballot 76d0c48
dynamic-filter: expandable checkboxes
seballot 65b879c
Adds CollapseTransition and apply it to Panel
seballot 1514099
bazar-indexfilters css refactor
seballot b75aa21
fix(bazar): php warning when empty children array
mrflos d28de48
lint
seballot 06ee712
handle null data
seballot 8d2804b
Change separator
seballot 16d7362
Adjust default values to display select all button
seballot c4fa524
EnumField: propertyName to use the identifier provided in the form (n…
seballot 996d3f4
hide filter without corresponding entries
seballot 058830e
entry-show: better display for checkbox tree
seballot File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
26 changes: 26 additions & 0 deletions
26
includes/migrations/20240502083251_RefactorListStruture.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| <?php | ||
|
|
||
| use YesWiki\Bazar\Service\ListManager; | ||
| use YesWiki\Core\Service\PageManager; | ||
| use YesWiki\Core\Service\TripleStore; | ||
| use YesWiki\Core\YesWikiMigration; | ||
|
|
||
| // Convert old List { titre_liste: "My List", label: { id1: "first Key", id2: "second id" } } | ||
| // to { title: "My List", values: [{ id: "id1", label: "first id"}, { id: "id2", label: "second id"}]} | ||
| class RefactorListStruture extends YesWikiMigration | ||
| { | ||
| public function run() | ||
| { | ||
| $tripleStore = $this->wiki->services->get(TripleStore::class); | ||
| $pageManager = $this->wiki->services->get(PageManager::class); | ||
| $listManager = $this->wiki->services->get(ListManager::class); | ||
| $lists = $tripleStore->getMatching(null, TripleStore::TYPE_URI, ListManager::TRIPLES_LIST_ID, '', ''); | ||
| foreach ($lists as $list) { | ||
| $tag = $list['resource']; | ||
| $page = $pageManager->getOne($tag); | ||
| $oldJson = json_decode($page['body'], true); | ||
| $newJson = $listManager->convertDataStructure($oldJson); | ||
| $pageManager->save($tag, json_encode($newJson)); | ||
| } | ||
| } | ||
| } |
28 changes: 28 additions & 0 deletions
28
includes/migrations/20240621202127_RefactorEnumFieldPropertyName.php
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,28 @@ | ||
| <?php | ||
|
|
||
| use YesWiki\Bazar\Field\EnumField; | ||
| use YesWiki\Bazar\Service\FieldFactory; | ||
| use YesWiki\Bazar\Service\FormManager; | ||
| use YesWiki\Core\YesWikiMigration; | ||
|
|
||
| class RefactorEnumFieldPropertyName extends YesWikiMigration | ||
| { | ||
| public function run() | ||
| { | ||
| $formManager = $this->getService(FormManager::class); | ||
| $fieldFactory = $this->getService(FieldFactory::class); | ||
| $forms = $formManager->getAll(); | ||
| foreach ($forms as $form) { | ||
| $newTemplate = []; | ||
| foreach ($form['template'] as $fieldArray) { | ||
| $field = $fieldFactory->create($fieldArray); | ||
| if ($field instanceof EnumField) { | ||
| $fieldArray[EnumField::FIELD_NAME] = $field->getType() . $field->getLinkedObjectName() . $field->getName(); | ||
| } | ||
| $newTemplate[] = $fieldArray; | ||
| } | ||
| $form['bn_template'] = $formManager->encodeTemplate($newTemplate); | ||
| $formManager->update($form); | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,223 @@ | ||
| // This code come from https://github.com/BinarCode/vue2-transitions | ||
|
|
||
| const BaseTransitionMixin = { | ||
| inheritAttrs: false, | ||
| props: { | ||
| /** | ||
| * Transition duration. Number for specifying the same duration for enter/leave transitions | ||
| * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave | ||
| */ | ||
| duration: { | ||
| type: [Number, Object], | ||
| default: 200 | ||
| }, | ||
| /** | ||
| * Transition delay. Number for specifying the same delay for enter/leave transitions | ||
| * Object style {enter: 300, leave: 300} for specifying explicit durations for enter/leave | ||
| */ | ||
| delay: { | ||
| type: [Number, Object], | ||
| default: 0 | ||
| }, | ||
| /** | ||
| * Whether the component should be a `transition-group` component. | ||
| */ | ||
| group: Boolean, | ||
| /** | ||
| * Transition tag, in case the component is a `transition-group` | ||
| */ | ||
| tag: { | ||
| type: String, | ||
| default: 'span' | ||
| }, | ||
| /** | ||
| * Transform origin property https://tympanus.net/codrops/css_reference/transform-origin/. | ||
| * Can be specified with styles as well but it's shorter with this prop | ||
| */ | ||
| origin: { | ||
| type: String, | ||
| default: '' | ||
| }, | ||
| /** | ||
| * Element styles that are applied during transition. These styles are applied on @beforeEnter and @beforeLeave hooks | ||
| */ | ||
| styles: { | ||
| type: Object, | ||
| default: () => ({ | ||
| animationFillMode: 'both', | ||
| animationTimingFunction: 'ease-out' | ||
| }) | ||
| } | ||
| }, | ||
| computed: { | ||
| componentType() { | ||
| return this.group ? 'transition-group' : 'transition' | ||
| }, | ||
| hooks() { | ||
| return { | ||
| ...this.$listeners, | ||
| beforeEnter: this.beforeEnter, | ||
| afterEnter: (el) => { | ||
| this.cleanUpStyles(el) | ||
| this.$emit('after-enter', el) | ||
| }, | ||
| beforeLeave: this.beforeLeave, | ||
| leave: this.leave, | ||
| afterLeave: (el) => { | ||
| this.cleanUpStyles(el) | ||
| this.$emit('after-leave', el) | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| methods: { | ||
| beforeEnter(el) { | ||
| const enterDuration = this.duration.enter ? this.duration.enter : this.duration | ||
| el.style.animationDuration = `${enterDuration}ms` | ||
|
|
||
| const enterDelay = this.delay.enter ? this.delay.enter : this.delay | ||
| el.style.animationDelay = `${enterDelay}ms` | ||
|
|
||
| this.setStyles(el) | ||
| this.$emit('before-enter', el) | ||
| }, | ||
| cleanUpStyles(el) { | ||
| Object.keys(this.styles).forEach((key) => { | ||
| const styleValue = this.styles[key] | ||
| if (styleValue) { | ||
| el.style[key] = '' | ||
| } | ||
| }) | ||
| el.style.animationDuration = '' | ||
| el.style.animationDelay = '' | ||
| }, | ||
| beforeLeave(el) { | ||
| const leaveDuration = this.duration.leave ? this.duration.leave : this.duration | ||
| el.style.animationDuration = `${leaveDuration}ms` | ||
|
|
||
| const leaveDelay = this.delay.leave ? this.delay.leave : this.delay | ||
| el.style.animationDelay = `${leaveDelay}ms` | ||
|
|
||
| this.setStyles(el) | ||
| this.$emit('before-leave', el) | ||
| }, | ||
| leave(el, done) { | ||
| this.setAbsolutePosition(el) | ||
| this.$emit('leave', el, done) | ||
| }, | ||
| setStyles(el) { | ||
| this.setTransformOrigin(el) | ||
| Object.keys(this.styles).forEach((key) => { | ||
| const styleValue = this.styles[key] | ||
| if (styleValue) { | ||
| el.style[key] = styleValue | ||
| } | ||
| }) | ||
| }, | ||
| setAbsolutePosition(el) { | ||
| if (this.group) { | ||
| el.style.position = 'absolute' | ||
| } | ||
| return this | ||
| }, | ||
| setTransformOrigin(el) { | ||
| if (this.origin) { | ||
| el.style.transformOrigin = this.origin | ||
| } | ||
| return this | ||
| } | ||
| } | ||
| } | ||
|
|
||
| export default { | ||
| name: 'collapse-transition', | ||
| mixins: [BaseTransitionMixin], | ||
| methods: { | ||
| transitionStyle(duration = 300) { | ||
| const durationInSeconds = duration / 1000 | ||
| const style = `${durationInSeconds}s height ease-in-out, ${durationInSeconds}s padding-top ease-in-out, ${durationInSeconds}s padding-bottom ease-in-out` | ||
| return style | ||
| }, | ||
| beforeEnter(el) { | ||
| const enterDuration = this.duration.enter ? this.duration.enter : this.duration | ||
| el.style.transition = this.transitionStyle(enterDuration) | ||
| if (!el.dataset) el.dataset = {} | ||
|
|
||
| el.dataset.oldPaddingTop = el.style.paddingTop | ||
| el.dataset.oldPaddingBottom = el.style.paddingBottom | ||
|
|
||
| el.style.height = '0' | ||
| el.style.paddingTop = 0 | ||
| el.style.paddingBottom = 0 | ||
| this.setStyles(el) | ||
| }, | ||
|
|
||
| enter(el) { | ||
| el.dataset.oldOverflow = el.style.overflow | ||
| if (el.scrollHeight !== 0) { | ||
| el.style.height = `${el.scrollHeight}px` | ||
| el.style.paddingTop = el.dataset.oldPaddingTop | ||
| el.style.paddingBottom = el.dataset.oldPaddingBottom | ||
| } else { | ||
| el.style.height = '' | ||
| el.style.paddingTop = el.dataset.oldPaddingTop | ||
| el.style.paddingBottom = el.dataset.oldPaddingBottom | ||
| } | ||
|
|
||
| el.style.overflow = 'hidden' | ||
| }, | ||
|
|
||
| afterEnter(el) { | ||
| // for safari: remove class then reset height is necessary | ||
| el.style.transition = '' | ||
| el.style.height = '' | ||
| el.style.overflow = el.dataset.oldOverflow | ||
| }, | ||
|
|
||
| beforeLeave(el) { | ||
| if (!el.dataset) el.dataset = {} | ||
| el.dataset.oldPaddingTop = el.style.paddingTop | ||
| el.dataset.oldPaddingBottom = el.style.paddingBottom | ||
| el.dataset.oldOverflow = el.style.overflow | ||
|
|
||
| el.style.height = `${el.scrollHeight}px` | ||
| el.style.overflow = 'hidden' | ||
| this.setStyles(el) | ||
| }, | ||
|
|
||
| leave(el) { | ||
| const leaveDuration = this.duration.leave ? this.duration.leave : this.duration | ||
| if (el.scrollHeight !== 0) { | ||
| // for safari: add class after set height, or it will jump to zero height suddenly, weired | ||
| el.style.transition = this.transitionStyle(leaveDuration) | ||
| el.style.height = 0 | ||
| el.style.paddingTop = 0 | ||
| el.style.paddingBottom = 0 | ||
| } | ||
| // necessary for transition-group | ||
| this.setAbsolutePosition(el) | ||
| }, | ||
|
|
||
| afterLeave(el) { | ||
| el.style.transition = '' | ||
| el.style.height = '' | ||
| el.style.overflow = el.dataset.oldOverflow | ||
| el.style.paddingTop = el.dataset.oldPaddingTop | ||
| el.style.paddingBottom = el.dataset.oldPaddingBottom | ||
| } | ||
| }, | ||
| template: ` | ||
| <component :is="componentType" | ||
| :tag="tag" | ||
| v-bind="$attrs" | ||
| v-on="$listeners" | ||
| @before-enter="beforeEnter" | ||
| @after-enter="afterEnter" | ||
| @enter="enter" | ||
| @before-leave="beforeLeave" | ||
| @leave="leave" | ||
| @after-leave="afterLeave" | ||
| move-class="collapse-move"> | ||
| <slot></slot> | ||
| </component>` | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
i definitely prefer jquery and vanilla css transitions 🧓