Cybrosys Technologies
6 months ago
@ -0,0 +1,47 @@ |
|||
.. image:: https://img.shields.io/badge/license-LGPL--3-green.svg |
|||
:target: https://www.gnu.org/licenses/lgpl-3.0-standalone.html |
|||
:alt: License: LGPL-3 |
|||
|
|||
Fountain Widget |
|||
=============== |
|||
* This module introduce a new widget that is used to select the many2one field in fountain manner. |
|||
|
|||
Configuration |
|||
============= |
|||
No additional configurations needed. |
|||
|
|||
License |
|||
------- |
|||
Lesser General Public License, Version 3 (LGPL v3). |
|||
|
|||
(https://www.gnu.org/licenses/lgpl-3.0-standalone.html) |
|||
|
|||
Company |
|||
------- |
|||
* `Cybrosys Techno Solutions <https://cybrosys.com/>`__ |
|||
|
|||
Credits |
|||
------- |
|||
Developer: (V18) Manasa T P ,Contact : odoo@cybrosys.com |
|||
|
|||
Contacts |
|||
-------- |
|||
* Mail Contact : odoo@cybrosys.com |
|||
* Website : https://cybrosys.com |
|||
|
|||
Bug Tracker |
|||
----------- |
|||
Bugs are tracked on GitHub Issues. In case of trouble, please check there if your issue has already been reported. |
|||
|
|||
Maintainer |
|||
========== |
|||
.. image:: https://cybrosys.com/images/logo.png |
|||
:target: https://cybrosys.com |
|||
|
|||
This module is maintained by Cybrosys Technologies. |
|||
|
|||
For support and more information, please visit https://www.cybrosys.com |
|||
|
|||
Further information |
|||
=================== |
|||
HTML Description: `<static/description/index.html>`__ |
|||
@ -0,0 +1,21 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################### |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Manasa T P (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################### |
|||
@ -0,0 +1,53 @@ |
|||
# -*- coding: utf-8 -*- |
|||
############################################################################### |
|||
# |
|||
# Cybrosys Technologies Pvt. Ltd. |
|||
# |
|||
# Copyright (C) 2025-TODAY Cybrosys Technologies(<https://www.cybrosys.com>) |
|||
# Author: Manasa T P (odoo@cybrosys.com) |
|||
# |
|||
# You can modify it under the terms of the GNU LESSER |
|||
# GENERAL PUBLIC LICENSE (LGPL v3), Version 3. |
|||
# |
|||
# This program is distributed in the hope that it will be useful, |
|||
# but WITHOUT ANY WARRANTY; without even the implied warranty of |
|||
# MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
|||
# GNU LESSER GENERAL PUBLIC LICENSE (LGPL v3) for more details. |
|||
# |
|||
# You should have received a copy of the GNU LESSER GENERAL PUBLIC LICENSE |
|||
# (LGPL v3) along with this program. |
|||
# If not, see <http://www.gnu.org/licenses/>. |
|||
# |
|||
############################################################################### |
|||
{ |
|||
"name": "Fountain Widget", |
|||
"version": "18.0.1.0.0", |
|||
"category": 'Extra Tools', |
|||
"summary": "This widget is used to select the many2one field in fountain " |
|||
"manner.", |
|||
"description": "This is a widget for many2one fields. By using this " |
|||
"widget we can select record in a fountain manner. It " |
|||
"generates dynamic dropdown menus with hierarchical options " |
|||
"and thus Supports parent-child relationships between " |
|||
"dropdown options.", |
|||
"author": "Cybrosys Techno Solutions", |
|||
'company': 'Cybrosys Techno Solutions', |
|||
'maintainer': 'Cybrosys Techno Solutions', |
|||
'website': 'https://www.cybrosys.com', |
|||
"depends": ['base'], |
|||
'assets': { |
|||
'web.assets_backend': [ |
|||
'fountain_widget_many2one/static/src/js/fountain_widget_many2one.js', |
|||
'fountain_widget_many2one/static/src/xml/fountain_widget_many2one.xml', |
|||
'fountain_widget_many2one/static/src/css/fountain_widget_many2one.css', |
|||
'fountain_widget_many2one/static/src/css/fountain_widget_many2one.scss', |
|||
'fountain_widget_many2one/static/src/xml/fountain_widget_component.xml', |
|||
'fountain_widget_many2one/static/src/js/fountain_widget_component.js', |
|||
], |
|||
}, |
|||
'images': ['static/description/banner.jpg'], |
|||
'license': 'LGPL-3', |
|||
'installable': True, |
|||
'auto_install': False, |
|||
'application': False, |
|||
} |
|||
@ -0,0 +1,6 @@ |
|||
## Module <fountain_widget_many2one> |
|||
#### 17.04.2025 |
|||
#### Version 18.0.1.0.0 |
|||
##### ADD |
|||
|
|||
- Initial Commit for Fountain Widget |
|||
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 28 KiB |
|
After Width: | Height: | Size: 628 KiB |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 210 KiB |
|
After Width: | Height: | Size: 209 KiB |
|
After Width: | Height: | Size: 109 KiB |
|
After Width: | Height: | Size: 495 B |
|
After Width: | Height: | Size: 1.0 KiB |
|
After Width: | Height: | Size: 624 B |
|
After Width: | Height: | Size: 136 KiB |
|
After Width: | Height: | Size: 214 KiB |
|
After Width: | Height: | Size: 36 KiB |
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 310 B |
|
After Width: | Height: | Size: 929 B |
|
After Width: | Height: | Size: 1.3 KiB |
|
After Width: | Height: | Size: 3.3 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 17 KiB |
|
After Width: | Height: | Size: 542 B |
|
After Width: | Height: | Size: 576 B |
|
After Width: | Height: | Size: 733 B |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 738 KiB |
|
After Width: | Height: | Size: 2.2 KiB |
|
After Width: | Height: | Size: 911 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 600 B |
|
After Width: | Height: | Size: 673 B |
|
After Width: | Height: | Size: 2.0 KiB |
|
After Width: | Height: | Size: 462 B |
|
After Width: | Height: | Size: 2.1 KiB |
|
After Width: | Height: | Size: 926 B |
|
After Width: | Height: | Size: 9.0 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 7.0 KiB |
|
After Width: | Height: | Size: 878 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 653 B |
|
After Width: | Height: | Size: 800 B |
|
After Width: | Height: | Size: 905 B |
|
After Width: | Height: | Size: 189 KiB |
|
After Width: | Height: | Size: 4.3 KiB |
|
After Width: | Height: | Size: 839 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 5.9 KiB |
|
After Width: | Height: | Size: 1.6 KiB |
|
After Width: | Height: | Size: 34 KiB |
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 3.8 KiB |
|
After Width: | Height: | Size: 23 KiB |
|
After Width: | Height: | Size: 1.9 KiB |
|
After Width: | Height: | Size: 2.3 KiB |
|
After Width: | Height: | Size: 427 B |
|
After Width: | Height: | Size: 627 B |
|
After Width: | Height: | Size: 1.1 KiB |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 988 B |
|
After Width: | Height: | Size: 3.7 KiB |
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 875 B |
|
After Width: | Height: | Size: 1.2 KiB |
|
After Width: | Height: | Size: 767 KiB |
|
After Width: | Height: | Size: 116 KiB |
|
After Width: | Height: | Size: 100 KiB |
|
After Width: | Height: | Size: 89 KiB |
|
After Width: | Height: | Size: 126 KiB |
|
After Width: | Height: | Size: 76 KiB |
|
After Width: | Height: | Size: 95 KiB |
|
After Width: | Height: | Size: 154 KiB |
|
After Width: | Height: | Size: 81 KiB |
|
After Width: | Height: | Size: 78 KiB |
|
After Width: | Height: | Size: 84 KiB |
|
After Width: | Height: | Size: 86 KiB |
|
After Width: | Height: | Size: 80 KiB |
|
After Width: | Height: | Size: 388 KiB |
|
After Width: | Height: | Size: 880 KiB |
|
After Width: | Height: | Size: 702 KiB |
|
After Width: | Height: | Size: 40 KiB |
@ -0,0 +1,11 @@ |
|||
.divMargin{ |
|||
margin-right: 11px; |
|||
border-right: 1px solid black; |
|||
padding-right: 10px; |
|||
} |
|||
.dropdown-item-text { |
|||
display: block; |
|||
padding: 3px 20px; |
|||
color: #495057; |
|||
position: relative; |
|||
} |
|||
@ -0,0 +1,8 @@ |
|||
.icon_style{ |
|||
&::after{ |
|||
content: "\f061"; |
|||
font-family: 'FontAwesome'; |
|||
position: absolute; |
|||
right: 0px; |
|||
} |
|||
} |
|||
@ -0,0 +1,46 @@ |
|||
/** @odoo-module **/ |
|||
import { Dropdown } from "@web/core/dropdown/dropdown"; |
|||
import { onMounted, onWillUnmount, useRef } from "@odoo/owl"; |
|||
|
|||
// Extending the Dropdown and adding the inputData into the props
|
|||
export class FountainDropdown extends Dropdown { |
|||
setup() { |
|||
super.setup(); |
|||
this.state.open = false; // Default state is closed
|
|||
|
|||
// Use OWL's useRef to reference the root element
|
|||
this.rootRef = useRef("root"); |
|||
|
|||
// Add click outside detection
|
|||
this.handleClickOutside = (event) => { |
|||
if ( |
|||
this.rootRef.el && |
|||
!this.rootRef.el.contains(event.target) && |
|||
this.state.open |
|||
) { |
|||
this.state.open = false; // Close dropdown if clicked outside
|
|||
} |
|||
}; |
|||
|
|||
onMounted(() => { |
|||
// Add event listener when component is mounted
|
|||
document.addEventListener('click', this.handleClickOutside); |
|||
}); |
|||
|
|||
onWillUnmount(() => { |
|||
// Remove event listener when component is unmounted
|
|||
document.removeEventListener('click', this.handleClickOutside); |
|||
}); |
|||
} |
|||
|
|||
onClick(event) { |
|||
event.preventDefault(); // Prevent default behavior
|
|||
this.state.open = !this.state.open; // Toggle dropdown visibility
|
|||
} |
|||
} |
|||
|
|||
FountainDropdown.template = "fountain.Dropdown"; |
|||
FountainDropdown.props = { |
|||
...Dropdown.props, |
|||
inputData: { type: Object, optional: true } |
|||
}; |
|||
@ -0,0 +1,87 @@ |
|||
/** @odoo-module **/ |
|||
import { Component, useEffect, useState, onWillStart } from "@odoo/owl"; |
|||
import { registry } from "@web/core/registry"; |
|||
import { standardFieldProps } from "@web/views/fields/standard_field_props"; |
|||
import { FountainDropdown } from "./fountain_widget_component"; |
|||
import { useService } from "@web/core/utils/hooks"; |
|||
|
|||
export class FountainWidget extends Component { |
|||
static template = "FountainWidgetField"; |
|||
static components = { |
|||
FountainDropdown, |
|||
}; |
|||
setup() { |
|||
this.orm = useService('orm'); |
|||
useEffect(() => { this.state.inputData = this.props.record.data[this.props.name] }, () => [this.props]); |
|||
this.state = useState({ |
|||
childMenu: {}, |
|||
inputData: this.props.record.data[this.props.name], |
|||
open: false // Control dropdown visibility
|
|||
}); |
|||
onWillStart(async () => { |
|||
this.state.category = await this.orm.searchRead(this.props.record.fields.categ_id.relation, []); |
|||
}); |
|||
this.index = 0; // Track the current depth of the dropdown
|
|||
|
|||
// Bind the onClickDropDown method to ensure `this` refers to the component instance
|
|||
this.onClickDropDown = this.onClickDropDown.bind(this); |
|||
} |
|||
|
|||
get inputData() { |
|||
return { |
|||
input: this.state.inputData ? this.state.inputData[1] : '' |
|||
}; |
|||
} |
|||
|
|||
get parentMenu() { |
|||
return this.state.category.filter(item => !item.parent_id); |
|||
} |
|||
|
|||
get childKeys() { |
|||
return Object.keys(this.state.childMenu); |
|||
} |
|||
|
|||
onClickDropDown(parent_id, index = 0) { |
|||
// Ensure index is a number, default to 0 if undefined
|
|||
index = Number(index) || 0; |
|||
|
|||
if (this.index >= index) { |
|||
let childLength = this.childKeys.length; |
|||
while (index < childLength) { |
|||
const keyIndex = this.childKeys[index]; |
|||
delete this.state.childMenu[keyIndex]; |
|||
childLength--; |
|||
} |
|||
} |
|||
let selectedCategory = this.state.category.find((item) => item.id === parent_id); |
|||
let obj = this.state.category.filter(item => item.parent_id && item.parent_id[0] === parent_id); |
|||
|
|||
if (!this.state.childMenu.hasOwnProperty(parent_id) && obj.length > 0) { |
|||
this.state.childMenu[parent_id] = obj; |
|||
this.index = index + 1; // Increment index for nested levels
|
|||
} |
|||
|
|||
if (this.props.record && this.props.record.update) { |
|||
this.state.inputData = [parent_id, selectedCategory.complete_name]; |
|||
this.props.record.update({ [this.props.name]: [parent_id, selectedCategory.complete_name] }); |
|||
} else { |
|||
console.error('Update function not found in record props:', this.props); |
|||
} |
|||
this.state.open = false; // Close dropdown after selection
|
|||
return obj; |
|||
} |
|||
|
|||
static props = { |
|||
...standardFieldProps, |
|||
inputData: { type: Object, optional: true, default: {} }, |
|||
}; |
|||
} |
|||
|
|||
// Define the widget field with the correct structure
|
|||
export const FountainWidgetField = { |
|||
component: FountainWidget, |
|||
supportedTypes: ["many2one"], |
|||
}; |
|||
|
|||
// Register the widget in the field registry
|
|||
registry.category("fields").add("fountain_widget", FountainWidgetField); |
|||
@ -0,0 +1,37 @@ |
|||
<?xml version="1.0" encoding="UTF-8" ?> |
|||
<templates id="template" xml:space="preserve"> |
|||
<!-- Changing the button into an input --> |
|||
<t t-name="fountain.Dropdown" owl="1"> |
|||
<div class="o-dropdown dropdown" |
|||
t-att-class="props.class" |
|||
t-attf-class=" |
|||
{{ directionCaretClass || ''}} |
|||
{{ state.open ? 'show' : ''}} |
|||
{{ !showCaret ? 'o-dropdown--no-caret' : '' }}" |
|||
t-ref="root"> |
|||
<input style="width:100%;" |
|||
class="dropdown-toggle" |
|||
t-att-class="{ |
|||
[props.togglerClass]: props.togglerClass, |
|||
'dropdown-item': parentDropdown }" |
|||
t-on-click.stop="onClick" |
|||
t-att-title="props.title" |
|||
t-att-value="props.inputData.input || ''" |
|||
t-att-data-tooltip="props.tooltip" |
|||
t-att-data-hotkey="props.hotkey" |
|||
t-att-aria-expanded="state.open ? 'true' : 'false'" |
|||
t-att-tabindex="props.skipTogglerTabbing ? -1 : 0" |
|||
t-ref="togglerRef"> |
|||
<t t-slot="default"/> |
|||
</input> |
|||
<div t-if="state.open" |
|||
class="o-dropdown--menu dropdown-menu d-block" |
|||
t-att-class="props.menuClass" |
|||
role="menu" |
|||
t-ref="menuRef" |
|||
style="min-width: unset;"> |
|||
<t t-slot="default"/> |
|||
</div> |
|||
</div> |
|||
</t> |
|||
</templates> |
|||
@ -0,0 +1,37 @@ |
|||
<?xml version="1.0" encoding="utf-8"?> |
|||
<templates> |
|||
<t t-name="FountainWidgetField" owl="1"> |
|||
<!-- Template containing the dropdown component --> |
|||
<FountainDropdown inputData="inputData"> |
|||
<div style="display: flex;"> |
|||
<div class="divMargin"> |
|||
<t t-foreach="parentMenu" t-as="category" t-key="category.id"> |
|||
<t t-if="category.child_id.length > 0"> |
|||
<t t-set="parent_class" t-value="'icon_style'"/> |
|||
</t> |
|||
<option class="dropdown-item-text" |
|||
t-on-click.stop.prevent="() => onClickDropDown(category.id, 0)" |
|||
t-attf-class="#{parent_class}"> |
|||
<t t-esc="category.name"/> |
|||
</option> |
|||
<li class="dropdown-divider" role="separator"/> |
|||
</t> |
|||
</div> |
|||
<div t-foreach="childKeys" t-as="cKeys" t-key="cKeys"> |
|||
<t t-foreach="state.childMenu[cKeys]" t-as="child" t-key="child.id"> |
|||
<t t-if="child.child_id.length > 0"> |
|||
<t t-set="child_class" t-value="'icon_style'"/> |
|||
</t> |
|||
<option class="dropdown-item-text" |
|||
t-on-click.stop.prevent="() => onClickDropDown(child.id, cKeys_index + 1)" |
|||
t-attf-class="#{child_class}"> |
|||
<t t-esc="child.name"/> |
|||
</option> |
|||
<t t-set="child_class" t-value=""/> |
|||
<li class="dropdown-divider" role="separator"/> |
|||
</t> |
|||
</div> |
|||
</div> |
|||
</FountainDropdown> |
|||
</t> |
|||
</templates> |
|||