Skip to content

[ADD] week columns, prev and next buttons in dynamic view #11

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

Open
gfcapalbo wants to merge 4 commits into
base: 14.0
Choose a base branch
from
Open

[ADD] week columns, prev and next buttons in dynamic view #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
648bd9d
[ADD] week columns to dynamic view
gfcapalbo Jun 8, 2023
ea2f3e3
[IMP] improvements
gfcapalbo Jun 9, 2023
89acfb5
[ADD] some functionality to prev ad next buttons in dynamic mode
gfcapalbo Jul 20, 2023
90c6835
[IMP] next and prev move range by a week
gfcapalbo Jul 24, 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
42 changes: 41 additions & 1 deletion dynamic_gantt/static/src/js/gantt_controller.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -53,7 +53,47 @@ odoo.define("dynamic_gantt.DynamicGanttController", function (require) {
this._super(ev);
}
},

_get_future_and_past: function () {
var future = parseInt(this.$(".js_days_future").val());
var past = parseInt(this.$(".js_days_past").val());
if (isNaN(future)) { future = 1}
if (isNaN(past)) { past = 1}
return [future, past]
},
_onPrevPeriodClicked: function (ev) {
/* Give Prev button a meaning in dynamic mode */
ev.preventDefault();
var state = this.model.get();
if (state.scale === "dynamic") {
var [future, past] = this._get_future_and_past()
past = past + 7
if (future < 8) {
future = 1
} else { future = future - 7 }
this.$(".js_days_future").val(future.toString());
this.$(".js_days_past").val(past.toString());
this._onEnteredDays()
} else {
this._super.apply(this, arguments);
}
},
_onNextPeriodClicked: function (ev) {
/* Give Next button a meaning in dynamic mode */
ev.preventDefault();
var state = this.model.get();
if (state.scale === "dynamic") {
var [future, past] = this._get_future_and_past()
future = future + 7
if (past < 8 ) {
past = 1
} else { past = past - 7 }
this.$(".js_days_future").val(future.toString());
this.$(".js_days_past").val(past.toString());
this._onEnteredDays()
} else {
this._super.apply(this, arguments);
}
},
_onEnteredDays: function () {
/* Add new method on days entered and click on reload button to write the
input fields value in the user level and render according to buttons
Expand Down
21 changes: 21 additions & 0 deletions dynamic_gantt/static/src/scss/gantt_view.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,12 +15,33 @@

.o_gantt_view .o_gantt_header_container .o_gantt_header_cell {
min-width: 100px;
border-left:1px solid lightgrey;
}

.col.o_gantt_header_slots, .col.o_gantt_cell, .col.o_gantt_slots_container, .col.o_gantt_total_row_container, .col.o_gantt_row_container, .col.o_gantt_header_cell, .col.text-center{
width: unset!important;
max-width: unset!important;
}

col.o_gantt_header_cell_dynamic {
padding-left: 0px !important;
padding-right: 0px !important;
}

.col.text-center, .col.o_gantt_header_scale {
background-color: #FFFFFF !important;
display: grid;
grid-auto-rows: 1fr
}


.weekInsert {
background-color: LightGrey !important;
width: 100%;
height:100%;
padding-left:10px;
}

.firstDayOfWeek {
border-left:1px solid black;
}
62 changes: 32 additions & 30 deletions dynamic_gantt/static/src/xml/web_gantt.xml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,39 +3,41 @@

<!-- extend GanttView template for adding 'days_future' and 'days_past' date
format -->
<div t-extend="GanttView">
<div t-jquery="div.o_gantt_header_scale" t-operation="replace">
<div class="row no-gutters o_gantt_header_scale">
<!-- Add format for days_past and days_future -->
<t
t-set="formats"
t-value="{'week': 'dddd, Do', 'month': 'DD', 'year': 'MMMM', 'dynamic': 'DD'}"
/>
<div t-extend="GanttView">
<div t-jquery="div.o_gantt_header_scale" t-operation="replace">
<t t-set="formats" t-value="{'week': 'dddd, Do', 'month': 'DD', 'year': 'MMMM', 'dynamic': 'DD MMMM'}" />
<div class="row no-gutters o_gantt_header_scale">
<t t-foreach="widget.viewInfo.slots" t-as="slot">
<t t-set="isToday" t-value="slot.isSame(new Date(), 'day') &amp;&amp; widget.state.scale !== 'day'" />
<div t-attf-class="col o_gantt_header_cell text-center #{isToday? 'o_gantt_today' : ''} o_gantt_header_cell_dynamic ">
<t t-if="slot_index == 0" t-set="lastWeek" t-value="slot.format('ww')" />
<t t-if="slot_index != 0" t-set="lastWeek" t-value="thisWeek" />
<t t-set="thisWeek" t-value="slot.format('ww')" />
<t t-set="showWeek" t-value="thisWeek != lastWeek or slot_index == 0" />

<t t-foreach="widget.viewInfo.slots" t-as="slot">
<t
t-set="isToday"
t-value="slot.isSame(new Date(), 'day') &amp;&amp; widget.state.scale !== 'day'"
/>
<div
t-attf-class="col o_gantt_header_cell text-center p-2 #{isToday? 'o_gantt_today' : ''} "
>
<t
t-if="widget.state.scale in formats"
t-esc="slot.format(formats[widget.state.scale])"
/>
<small t-else="">
<b t-esc="slot.format('k')" />
<span
class="d-block d-xl-inline-block"
t-esc="slot.format('a')"
/>
</small>
</div>
</t>
</div>
<t t-if="widget.state.scale == 'dynamic'" >
<div t-attf-class="weekInsert text-left #{showWeek? 'firstDayOfWeek' :''} ">
<t t-if="showWeek">
<b>
<t t-esc=" 'Week ' + thisWeek" />
</b>
</t>
</div>
</t>
<t t-if="widget.state.scale in formats" t-esc=" slot.format(formats[widget.state.scale])" />
<small t-else="">
<b t-esc="slot.format('k')" />
<span class="d-block d-xl-inline-block" t-esc="slot.format('a')" />
</small>
<t t-if="widget.state.scale == 'dynamic'">
<br/>
<span t-esc="slot.format('dddd')"></span>
</t>
</div>
</t>
</div>
</div>
</div>
<div t-extend="GanttView.buttons">
<!-- Add buttons Days Past and Days Future Input field on Gantt view -->
<t t-jquery="div.btn-group" t-operation="after">
Expand Down