nsinnovations/erpnext
2
0
Fork 0
mirror of https://github.com/frappe/erpnext.git synced 2026-05-22 22:49:19 +00:00
Code Issues Packages Projects Releases Wiki Activity

Refactor UI

Browse Source
This commit is contained in:
Pranav Nachanekar
2019-09-09 15:41:20 +05:30
parent 63dbacd7c0
commit 10711dd09d
4 changed files with 171 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
erpnext/crm/doctype/appointment/appointment.json
View File

@@ -28,12 +28,14 @@
{ {
"fieldname": "customer_phone_number", "fieldname": "customer_phone_number",
"fieldtype": "Data", "fieldtype": "Data",
"label": "Phone Number" "label": "Phone Number",
"reqd": 1
}, },
{ {
"fieldname": "customer_skype", "fieldname": "customer_skype",
"fieldtype": "Data", "fieldtype": "Data",
"label": "Skype ID" "label": "Skype ID",
"reqd": 1
}, },
{ {
"fieldname": "customer_details", "fieldname": "customer_details",
@@ -48,7 +50,7 @@
"reqd": 1 "reqd": 1
} }
], ],
"modified": "2019-09-09 12:23:33.611408", "modified": "2019-09-09 15:40:21.881421",
"modified_by": "Administrator", "modified_by": "Administrator",
"module": "CRM", "module": "CRM",
"name": "Appointment", "name": "Appointment",

21
erpnext/www/book-appointment/index.css
View File

@@ -1,7 +1,12 @@
.time-slot { .time-slot {
margin: 0 0; margin-bottom: 2em;
margin-left: 0.5em;
margin-right: 0.5em;
border-radius: 0.4em;
cursor: pointer;
border: 0.5px solid #cccccc; border: 0.5px solid #cccccc;
min-height: 100px; min-height: 75px;
padding: 0.5em 1em;
} }
.time-slot:hover { .time-slot:hover {
@@ -9,9 +14,13 @@
} }
.time-slot.unavailable { .time-slot.unavailable {
background: #bbb; background: #CBD5E0;
cursor: not-allowed;
color: #718096
}
color: #777777 .time-slot.unavailable .text-muted {
color: #718096
} }
input[type="radio"] { input[type="radio"] {
@@ -23,3 +32,7 @@ input[type="radio"] {
color: white; color: white;
background: #5e64ff; background: #5e64ff;
} }
.time-slot.selected .text-muted {
color: #EDF2F7 !important;
}

83
erpnext/www/book-appointment/index.html
View File

@@ -2,69 +2,60 @@
{% block title %}{{ _("Book Appointment") }}{% endblock %} {% block title %}{{ _("Book Appointment") }}{% endblock %}
{% block script %}
<script src="assets/js/moment-bundle.min.js"></script>
<script src="book-appointment/index.js"></script>
{% endblock %}
{% block page_content %} {% block page_content %}
<div class="container"> <div class="container">
<!-- title: Book an appointment --> <!-- title: Book an appointment -->
<div id="select-date"> <div id="select-date-time">
<div class="text-center mb-5"> <div class="text-center mb-5">
<h3>Book an appointment</h3> <h3>Book an appointment</h3>
<p class="lead">Select the date and your timezone</p> <p class="lead text-muted">Select the date and your timezone</p>
</div> </div>
<div class="row justify-content-center mt-3"> <div class="row justify-content-center mt-3">
<div class="col-md-4 align-self-center "> <div class="col-md-6 align-self-center ">
<form name="myform"> <div class="row">
<input type="date" onchange="validate_date()" name="appointment-date" id="appointment-date" <input type="date" oninput="on_date_or_timezone_select()" name="appointment-date" id="appointment-date"
class="form-control mt-3"> class="form-control mt-3 col-md m-3">
<select name="appointment-timezone" id="appointment-timezone" class="form-control mt-3"> <select name="appointment-timezone" oninput="on_date_or_timezone_select()" id="appointment-timezone" class="form-control mt-3 col-md">
</select> </select>
</form>
<button class="form-control mt-3 btn btn-dark" id="next-button" onclick="navigate_to_time_select()">
Next
</button>
</div>
</div>
</div>
<!--Select Time Slot-->
<div id="select-time">
<div class="text-center mb-5">
<h3>Pick A Time Slot</h3>
<p class="lead">Selected date is <span class="date-span">Date Span</span></p>
</div>
<div class="mt-3 justify-content-center">
<div class="row" id="timeslot-container">
</div>
<div class="row justify-content-center">
<div class="col-md-4 align-self-center">
<button class="form-control mt-5 btn btn-dark" onclick="initialise_enter_details()">
Next
</button>
</div> </div>
</div> </div>
</div> </div>
</div> <div class="row mt-3" id="timeslot-container" >
<!--Enter Details-->
<div id="enter-details">
<div class="text-center mb-5">
<h3>Add details</h3>
<p class="lead">Selected date is <span class="date-span">Date Span</span> at <span class="time-span"> time </span></p>
</div> </div>
<div class="row justify-content-center mt-3"> <div class="row justify-content-center mt-3">
<div class="col-md-4 align-items-center"> <div class="col-md-4">
<input class="form-control mt-3" type="text" name="customer_name" id="customer_name" placeholder="Your Name" <button class="btn btn-primary form-control" id="next-button">Next</button>
required>
<input class="form-control mt-3" type="tel" name="customer_number" id="customer_number"
placeholder="Contact Number" required>
<input class="form-control mt-3" type="text" name="customer_skype" id="customer_skype" placeholder="Skype"
required>
<textarea class="form-control mt-3" name="customer_notes" id="customer_notes" cols="30" rows="10"
placeholder="Notes"></textarea>
<button class="btn btn-primary form-control mt-3" onclick="submit()">Submit</button>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!--Enter Details-->
<div id="enter-details">
<div class="text-center mb-5">
<h3>Add details</h3>
<p class="lead">Selected date is <span class="date-span"></span> at <span class="time-span">
</span></p>
</div>
<div class="row justify-content-center mt-3">
<div class="col-md-4 align-items-center">
<input class="form-control mt-3" type="text" name="customer_name" id="customer_name" placeholder="Your Name"
required>
<input class="form-control mt-3" type="tel" name="customer_number" id="customer_number"
placeholder="Contact Number" required>
<input class="form-control mt-3" type="text" name="customer_skype" id="customer_skype" placeholder="Skype"
required>
<textarea class="form-control mt-3" name="customer_notes" id="customer_notes" cols="30" rows="10"
placeholder="Notes"></textarea>
<button class="btn btn-primary form-control mt-3" onclick="submit()" id="submit-button">Submit</button>
</div>
</div>
</div>
</div>
{% endblock %} {% endblock %}

181
erpnext/www/book-appointment/index.js
View File

@@ -2,47 +2,35 @@
frappe.ready(() => { frappe.ready(() => {
initialise_select_date() initialise_select_date()
}) })
var holiday_list = []; window.holiday_list = [];
function navigator(page_no) { async function initialise_select_date() {
let select_date_div = document.getElementById('select-date'); document.getElementById('enter-details').style.display = 'none';
select_date_div.style.display = 'none'; await get_global_variables();
let select_time_div = document.getElementById('select-time'); setup_date_picker();
select_time_div.style.display = 'none'; setup_timezone_selector();
let contact_details_div = document.getElementById('enter-details'); hide_next_button();
contact_details_div.style.display = 'none';
let page;
switch (page_no) {
case 1: page = select_date_div; break;
case 2: page = select_time_div; break;
case 3: page = contact_details_div; break;
}
page.style.display = 'block'
} }
// Page 1 async function get_global_variables() {
async function initialise_select_date() { window.appointment_settings = (await frappe.call({
navigator(1);
let timezones, settings;
settings = (await frappe.call({
method: 'erpnext.www.book-appointment.index.get_appointment_settings' method: 'erpnext.www.book-appointment.index.get_appointment_settings'
})).message })).message
timezones = (await frappe.call({ window.timezones = (await frappe.call({
method: 'erpnext.www.book-appointment.index.get_timezones' method: 'erpnext.www.book-appointment.index.get_timezones'
})).message; })).message;
holiday_list = (await frappe.call({ window.holiday_list = (await frappe.call({
method: 'erpnext.www.book-appointment.index.get_holiday_list', method: 'erpnext.www.book-appointment.index.get_holiday_list',
args: { args: {
'holiday_list_name': settings.holiday_list 'holiday_list_name': window.appointment_settings.holiday_list
} }
})).message; })).message;
let date_picker = document.getElementById('appointment-date'); }
date_picker.max = holiday_list.to_date;
date_picker.min = holiday_list.from_date; function setup_timezone_selector() {
date_picker.value = (new Date()).toISOString().substr(0, 10);
let timezones_element = document.getElementById('appointment-timezone'); let timezones_element = document.getElementById('appointment-timezone');
var offset = new Date().getTimezoneOffset(); var offset = new Date().getTimezoneOffset();
timezones.forEach(timezone => { window.timezones.forEach(timezone => {
var opt = document.createElement('option'); var opt = document.createElement('option');
opt.value = timezone.offset; opt.value = timezone.offset;
opt.innerHTML = timezone.timezone_name; opt.innerHTML = timezone.timezone_name;
@@ -51,56 +39,90 @@ async function initialise_select_date() {
}); });
} }
function validate_date() { function setup_date_picker() {
let date_picker = document.getElementById('appointment-date'); let date_picker = document.getElementById('appointment-date');
if (date_picker.value === '') { let today = new Date();
frappe.throw('Please select a date') date_picker.min = today.toISOString().substr(0, 10);
} date_picker.max = window.holiday_list.to_date;
} }
// Page 2 function hide_next_button(){
async function navigate_to_time_select() { let next_button = document.getElementById('next-button');
navigator(2); next_button.disabled = true;
timezone = document.getElementById('appointment-timezone').value next_button.onclick = ()=>{frappe.msgprint("Please select a date and time")};
date = document.getElementById('appointment-date').value; }
var date_spans = document.getElementsByClassName('date-span');
for (var i = 0; i < date_spans.length; i++) date_spans[i].innerHTML = date; function show_next_button(){
// date_span.addEventListener('click',initialise_select_date) let next_button = document.getElementById('next-button');
// date_span.style.color = '#5e64ff'; next_button.disabled = false;
// date_span.style.textDecoration = 'underline'; next_button.onclick = setup_details_page;
// date_span.style.cursor = 'pointer'; }
var slots = (await frappe.call({
function on_date_or_timezone_select() {
let date_picker = document.getElementById('appointment-date');
let timezone = document.getElementById('appointment-timezone');
if (date_picker.value === '') {
clear_time_slots();
hide_next_button();
frappe.throw('Please select a date');
}
window.selected_date = date_picker.value;
window.selected_timezone = timezone.value;
update_time_slots(date_picker.value, timezone.value);
}
async function get_time_slots(date, timezone) {
debugger
let slots = (await frappe.call({
method: 'erpnext.www.book-appointment.index.get_appointment_slots', method: 'erpnext.www.book-appointment.index.get_appointment_slots',
args: { args: {
date: date, date: date,
timezone: timezone timezone: timezone
} }
})).message; })).message;
let timeslot_container = document.getElementById('timeslot-container'); return slots;
console.log(slots) }
if (slots.length <= 0) {
let message_div = document.createElement('p');
async function update_time_slots(selected_date, selected_timezone) {
let timeslot_container = document.getElementById('timeslot-container');
window.slots = await get_time_slots(selected_date, selected_timezone);
clear_time_slots();
if (window.slots.length <= 0) {
let message_div = document.createElement('p');
message_div.innerHTML = "There are no slots available on this date"; message_div.innerHTML = "There are no slots available on this date";
timeslot_container.appendChild(message_div); timeslot_container.appendChild(message_div);
return
} }
for (let i = 0; i < slots.length; i++) { window.slots.forEach(slot => {
const slot = slots[i]; let start_time = new Date(slot.time)
var timeslot_div = document.createElement('div'); var timeslot_div = document.createElement('div');
timeslot_div.classList.add('time-slot'); timeslot_div.classList.add('time-slot');
timeslot_div.classList.add('col-md'); timeslot_div.classList.add('col-md');
if (!slot.availability) { if (!slot.availability) {
timeslot_div.classList.add('unavailable') timeslot_div.classList.add('unavailable')
} }
timeslot_div.innerHTML = slot.time.substr(11, 20); timeslot_div.innerHTML = get_slot_layout(start_time);
timeslot_div.id = slot.time.substr(11, 20); timeslot_div.id = slot.time.substr(11, 20);
timeslot_div.addEventListener('click', select_time);
timeslot_container.appendChild(timeslot_div); timeslot_container.appendChild(timeslot_div);
});
set_default_timeslot();
show_next_button();
}
function clear_time_slots() {
let timeslot_container = document.getElementById('timeslot-container');
while (timeslot_container.firstChild) {
timeslot_container.removeChild(timeslot_container.firstChild)
} }
set_default_timeslot() }
let time_slot_divs = document.getElementsByClassName('time-slot');
for (var i = 0; i < time_slot_divs.length; i++) { function get_slot_layout(time) {
time_slot_divs[i].addEventListener('click', select_time); time = new Date(time)
} let start_time_string = moment(time).format("LT");
let end_time = moment(time).add('1','hours');
let end_time_string = end_time.format("LT");
return `<span style="font-size: 1.2em;">${start_time_string}</span><br><span class="text-muted small">to ${end_time_string}</span>`;
} }
function select_time() { function select_time() {
@@ -110,8 +132,10 @@ function select_time() {
try { try {
selected_element = document.getElementsByClassName('selected')[0] selected_element = document.getElementsByClassName('selected')[0]
} catch (e) { } catch (e) {
debugger
this.classList.add("selected") this.classList.add("selected")
} }
window.selected_time = this.id
selected_element.classList.remove("selected"); selected_element.classList.remove("selected");
this.classList.add("selected"); this.classList.add("selected");
} }
@@ -127,23 +151,23 @@ function set_default_timeslot() {
} }
} }
function initialise_enter_details() { function setup_details_page(){
navigator(3); let page1 = document.getElementById('select-date-time');
let time_div = document.getElementsByClassName('selected')[0]; let page2 = document.getElementById('enter-details');
let time_span = document.getElementsByClassName('time-span')[0]; page1.style.display = 'none';
time_span.innerHTML = time_div.id page2.style.display = 'block';
let date_container = document.getElementsByClassName('date-span')[0];
let time_container = document.getElementsByClassName('time-span')[0];
date_container.innerHTML = new Date(window.selected_date).toLocaleDateString();
time_container.innerHTML = moment(window.selected_time,"HH:mm:ss").format("LT");
} }
async function submit() { async function submit() {
var date = document.getElementById('appointment-date').value; // form validation here
var time = document.getElementsByClassName('selected')[0].id; form_validation();
contact = {}; let appointment = (await frappe.call({
contact.name = document.getElementById('customer_name').value;
contact.number = document.getElementById('customer_number').value;
contact.skype = document.getElementById('customer_skype').value;
contact.notes = document.getElementById('customer_notes').value;
console.log({ date, time, contact });
let abc = (await frappe.call({
method: 'erpnext.www.book-appointment.index.create_appointment', method: 'erpnext.www.book-appointment.index.create_appointment',
args: { args: {
'date': date, 'date': date,
@@ -151,5 +175,20 @@ async function submit() {
'contact': contact 'contact': contact
} }
})).message; })).message;
console.log(abc) frappe.msgprint(__('Appointment Created Successfully'));
let button = document.getElementById('submit-button');
button.disabled = true;
button.onclick = () => { console.log('This should never have happened') }
}
function form_validation(){
var date = window.selected_date;
var time = document.getElementsByClassName('selected')[0].id;
contact = {};
contact.name = document.getElementById('customer_name').value;
contact.number = document.getElementById('customer_number').value;
contact.skype = document.getElementById('customer_skype').value;
contact.notes = document.getElementById('customer_notes').value;
window.contact = contact
console.log({ date, time, contact });
} }