notice React Mix
Description
As an example of “Notice”, we excluded the user page as a page.
folder structure
react-mix1/
├── componets/
│ ├── NoticeAdminPage.js
│ ├── NoticeForm.js
│ └── NoticeList.js
├── service/
│ └── notice-admin-svc.js
├── app.js
└── admin.html
admin.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Notice Admin Page - React</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<div id="root"></div>
<script src="https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>
<!-- <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> -->
<!-- <script src="https://unpkg.com/logic-bind-model/dist/bindmodel.pack.min.js"></script> -->
<script src="/dist/bindmodel.pack.min.js"></script>
<script src="./App.js" type="module"></script>
</body>
</html>
app.js
import React from 'https://esm.sh/react';
import ReactDOM from 'https://esm.sh/react-dom';
import NoticeAdminPage from './components/NoticeAdminPage.js';
function App() {
return React.createElement(NoticeAdminPage);
}
ReactDOM.render(
React.createElement(App),
document.getElementById('root')
);
service/notice-admin-svc.js
class NoticeAdminService {
constructor(reactThis) {
const _this = this;
this.items = {
title: { required: true }
},
this.command = {
create: {
},
read: {
outputOption: 3,
},
update: {
cbBind(bind, cmd, setup) {
console.warn('Caution: Send to the test server, but the data is not reflected.', setup.data);
},
cbEnd(status, cmd, res) {
if (res) {
alert('The post has been modified.');
reactThis.handleList();
}
}
},
delete: {
cbValid(valid, cmd) {
if (confirm('Are you sure you want to delete it?')) return true;
},
cbBind(bind, cmd, setup) {
console.warn('Caution: Send to the test server, but the data is not reflected.', setup.data);
},
cbEnd(status, cmd, res) {
if (res) {
alert('The post has been deleted.');
reactThis.handleList();
}
}
},
list: {
outputOption: 1,
cbEnd(status, cmd, res) {
reactThis.setState({ selectedNotice: null });
}
}
};
this.mapping = {
ntc_idx: { read: ['bind', 'output'], update: 'bind', delete: ['valid', 'bind'] },
title: { read: 'output', update: ['valid', 'bind'], },
contents: { read: 'output', update: 'bind' },
top_yn: { read: 'output', update: ['valid', 'bind'], },
active_cd: { read: 'output', update: ['valid', 'bind'], },
create_dt: { read: 'output' },
};
this.fn = {
handleRead: async (idx) => {
_this.bindModel.cmd['read'].outputOption.index = Number(idx);
await _this.bindModel.cmd['read'].execute();
reactThis.setState({ selectedNotice: true });
},
};
}
}
export {
NoticeAdminService as default,
NoticeAdminService
}
components/NoticeAdminPage.js
import React, { Component } from 'https://esm.sh/react';
import NoticeList from './NoticeList.js';
import NoticeForm from './NoticeForm.js';
import NoticeAdminService from '../service/notice-admin-svc.js'
export default class NoticeAdminPage extends Component {
constructor(props) {
super(props);
this.bm = new _L.BindModel(new NoticeAdminService(this));
this.bm.url = '/notice/data/list.json';
this.state = { selectedNotice: null };
}
componentDidMount() {
this.bm.cmd['list'].execute();
}
handleList = () => {
this.setState({ selectedNotice: null });
};
handleChange = (e) => {
let { name, value, type, checked } = e.target;
if (type === 'checkbox') value = checked ? 'Y' : 'N';
this.bm.cols[name].value = value; // column value setting
this.forceUpdate(); // Forced screen rendering
};
render() {
const { selectedNotice } = this.state;
return (
React.createElement('div', { className: 'container mt-3' },
React.createElement('h2', null, 'Notice Admin Page'),
React.createElement('h5', null, 'Key Features: List inquiry/modification/deletion'),
React.createElement('p', null, 'Data is transmitted when modified or deleted from the test page, but it is not actually processed.'),
React.createElement(NoticeList, { bindModel: this.bm }),
!selectedNotice || (
React.createElement(NoticeForm, {
handleChange: this.handleChange,
bindModel: this.bm
})
)
)
);
}
}
components/NoticeForm.js
import React, { Component } from 'https://esm.sh/react';
export default class NoticeForm extends Component {
render() {
const { handleChange, bindModel } = this.props;
return (
React.createElement('div', { id: 'class-form' },
React.createElement('form', null,
React.createElement('div', { className: 'form-group' },
React.createElement('label', {}, '날짜'),
React.createElement('p', { id: 'create_dt' }, bindModel.cols.create_dt.value)
),
React.createElement('div', { className: 'form-group' },
React.createElement('label', { htmlFor: 'title' }, 'Title'),
React.createElement('input', {
type: 'text',
className: 'form-control',
id: 'title',
name: 'title',
value: bindModel.cols.title.value,
onChange: handleChange
})
),
React.createElement('div', { className: 'form-group' },
React.createElement('label', { htmlFor: 'contents' }, 'Content'),
React.createElement('textarea', {
className: 'form-control',
id: 'contents',
name: 'contents',
rows: '3',
value: bindModel.cols.contents.value,
onChange: handleChange
})
),
React.createElement('div', { className: 'row' },
React.createElement('div', { className: 'col' },
React.createElement('div', { className: 'form-check' },
React.createElement('input', {
type: 'checkbox',
className: 'form-check-input',
id: 'check1',
name: 'top_yn',
checked: bindModel.cols.top_yn.value === 'Y',
onChange: handleChange
}),
React.createElement('label', { className: 'form-check-label', htmlFor: 'check1' }, 'top notice')
)
),
React.createElement('div', { className: 'col' },
['D', 'A', 'H'].map(value => (
React.createElement('div', { className: 'form-check', key: value },
React.createElement('input', {
type: 'radio',
className: 'form-check-input',
id: `radio${value}`,
name: 'active_cd',
value: value,
checked: bindModel.cols.active_cd.value === value,
onChange: handleChange
}),
React.createElement('label', { className: 'form-check-label', htmlFor: `radio${value}` },
value === 'D' ? 'Standby' : value === 'A' ? 'Activation' : 'Hidden'
)
)
))
)
)
),
React.createElement('button', { type: 'button', className: 'btn btn-primary mt-3', onClick: ()=> bindModel.cmd['update'].execute() }, 'Update'),
React.createElement('button', { type: 'button', className: 'btn btn-primary mt-3', onClick: ()=> bindModel.cmd['delete'].execute() }, 'Delete'),
React.createElement('button', { type: 'button', className: 'btn btn-primary mt-3', onClick: ()=> bindModel.cmd['list'].execute() }, 'List')
)
);
}
}
components/NoticeList.js
import React, { Component } from 'https://esm.sh/react';
export default class NoticeList extends Component {
render() {
const { bindModel } = this.props;
const rows = bindModel.cmd.list.output.rows;
return (
React.createElement('table', { className: 'table' },
React.createElement('thead', null,
React.createElement('tr', null,
React.createElement('th', null, 'Title'),
React.createElement('th', null, 'Status'),
React.createElement('th', null, 'Date')
)
),
React.createElement('tbody', null,
rows.count > 0 ? (
rows.map((notice, i) => (
React.createElement('tr', { key: notice.ntc_idx },
React.createElement('td', null,
React.createElement('a', { href: '#', onClick: () => bindModel.fn.handleRead(i), className: 'btnNormal' },
notice.title
)
),
React.createElement('td', null, notice.active_cd),
React.createElement('td', null, notice.create_dt)
)
))
) : (
React.createElement('tr', null,
React.createElement('td', { colSpan: '3' }, 'There is no content.')
)
)
)
)
);
}
}