generator-upendodnn
Version:
Scaffolds DNN extensions, including Modules (Webforms, SPA, and MVC), Persona Bar, Skin Object, Library, Scheduler, and Hotcakes Commerce projects (based on the generator built by Matt Rutledge).
222 lines (208 loc) • 8.77 kB
JSX
import React from "react";
import { useState, useEffect } from "react";
const moduleId = window.getmoduleId();
const serviceFramework = window.$.ServicesFramework(moduleId);
const token = serviceFramework.getAntiForgeryValue();
const tabId = serviceFramework.getTabId();
const baseUrl ="/DesktopModules/<%= friendlyName %>/API/";
const Items = () => {
const [modal, setModal] = useState(false);
const [items, setItems] = useState(null);
const [users, setUsers] = useState(null);
const [description, setDescription] = useState('');
const [name, setName] = useState('');
const [assignedUser, setUser] = useState(null);
const [id, setId] = useState(0);
// SETTINGS
const [idSetting, setIdSetting] = useState(false);
const [nameSetting, setNameSetting] = useState(false);
const [descriptionSetting, setDescriptionSetting] = useState(false);
const [createdOnDateSetting, setCreatedOnDateSetting] = useState(false);
const loadItems = () => {
const url = baseUrl+"Item/GetList";
fetch(url,
{
method: "GET",
headers: {
"ModuleId": moduleId,
"RequestVerificationToken": token,
"TabId": tabId
}
}).then(res => {
return res.json();
}).then(data => {
setItems(data);
});
};
const loadSettings = () => {
const url = baseUrl+"Settings/LoadSettings";
fetch(url,
{
method: "GET",
headers: {
"ModuleId": moduleId,
"RequestVerificationToken": token,
"TabId": tabId
}
}).then(res => {
return res.json();
}).then(data => {
setIdSetting(data.itemId === "true" ? true : false);
setNameSetting(data.name === "true" ? true : false);
setDescriptionSetting(data.description === "true" ? true : false);
setCreatedOnDateSetting(data.createdOnDate === "true" ? true : false);
});
};
const cancelAdd = () => {
setModal(false);
resetItem();
};
const resetItem = () => {
setName(null);
setId(0);
setDescription(null);
setUser(null);
};
const editItem = (item) => {
setName(item.name);
setUser(item.assignedUser);
setDescription(item.description);
setId(item.id);
setModal(true);
};
const saveChanges = () => {
const item = { id, name, description, assignedUser };
const url = baseUrl + "Item/Save";
fetch(url,
{
method: "POST",
headers: {
"ModuleId": moduleId,
"RequestVerificationToken": token,
"TabId": tabId,
"Content-Type": "application/json"
},
body: JSON.stringify(item)
}).then(res => {
if (res.ok) {
resetItem();
setModal(false);
loadItems();
}
});
};
const loadUsers = () => {
const url = baseUrl + "User/GetList";
fetch(url,
{
method: "GET",
headers: {
"ModuleId": moduleId,
"RequestVerificationToken": token,
"TabId": tabId
}
}).then(res => {
return res.json();
}).then(data => {
setUsers(data);
});
};
useEffect(() => {
loadItems();
loadSettings();
loadUsers();
}, []);
const removeItem = (itemId) => {
const url = baseUrl + "Item/Delete?itemId=" + itemId;
if (confirm("Do you want to remove this item?")) {
fetch(url,
{
method: "DELETE",
headers: {
"ModuleId": moduleId,
"RequestVerificationToken": token,
"TabId": tabId
}
}).then(res => {
if (!res.ok) {
throw new Error("HTTP status " + res.status);
} else {
loadItems();
}
});
}
};
return (<div>
<div className="col-xs-12">
<h3>Item list </h3>
</div>
<button type="button" onClick={() => setModal(true)}>Add item</button>
<table className="table table-striped">
<thead>
<tr>
{idSetting && <th>Id</th>}
{nameSetting && <th>Name</th>}
{descriptionSetting && <th>Description</th>}
<th>Created on</th>
<th></th>
</tr>
</thead>
<tbody>
{items && items.map((item) => (<tr className="tm_t" key={item.id}>
{idSetting && <td>{item.id}</td>}
{nameSetting && <td>{item.name}</td>}
{descriptionSetting && <td>{item.description}</td>}
{createdOnDateSetting && <td>{item.createdOnDate}</td>}
<td>
<button type="button" className="btn btn-sm" onClick={() => editItem(item)} title="Edit item">
<i className="glyphicon glyphicon-edit"></i>
</button>
<button type="button" className="btn btn-sm btn-danger" onClick={() => removeItem(item.id)} title="Remove item">
<i className="glyphicon glyphicon-remove"></i>
</button>
</td>
</tr >))}
</tbody >
</table >
{modal && <div className="modal fade in" id="myModal" tabIndex="-1" role="dialog" aria-labelledby="myModalLabel" style={{ display: "block" }}>
<div className="modal-dialog" role="document">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" onClick={cancelAdd} aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 className="modal-title" id="myModalLabel">Create Item</h4>
</div>
<div className="modal-body">
<div className="dnnForm dnnEditBasicSettings" id="dnnEditBasicSettings">
<fieldset>
<div className="dnnFormItem">
<div><label htmlFor="itemName">Name</label></div>
<input id="itemName" type="text" onChange={(e) => setName(e.target.value)} value={name} />
</div>
<div className="dnnFormItem">
<div><label htmlFor="itemDescription">Description</label></div>
<textarea id="itemDescription" cols="20" rows="5" onChange={(e) => setDescription(e.target.value)} value={description}></textarea>
</div>
<div className="dnnFormItem">
<div><label htmlFor="itemUser">AssignedUser</label></div>
<select onChange={(e) => setUser(e.target.value)}>
{users && users.map((user) => (
<option value={user.id} key={user.id}>
{user.name}
</option>
))
}
</select>
</div>
</fieldset>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" onClick={cancelAdd}>Close</button>
<button type="button" className="btn btn-primary" onClick={saveChanges}>Save changes</button>
</div>
</div>
</div>
</div>}
</div >);
};
export default Items;