@cocreate/organizations
Version:
A simple organizations component in vanilla javascript. Easily configured using HTML5 attributes and/or JavaScript API.
145 lines (140 loc) • 4.3 kB
HTML
<html lang="en">
<head>
<title>Industry Datatables | CoCreateJS</title>
<!-- CoCreate Favicon -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="../assets/favicon.ico" />
<link rel="manifest" href="/manifest.webmanifest" />
</head>
<body class="width:fit-content overflow:auto">
<!-- Main Content -->
<div content_id="content" class="padding:5px">
<table class="width:100% border-collapse:collapse">
<tr class="border-bottom:1px_solid_darkgray">
<td
class="position:sticky top:0 background:white padding:0px_10px_10px">
<input
type="text"
class="floating-label"
filter-query-key="name"
filter-query="$closest table; tbody"
placeholder="Industry Name" />
<span
class="position:absolute bottom:22px right:20px float:right z-index:6">
<!-- need a solution to update toggle value="desc|asc" and define and upadte icons... show hide works great but to much html and orderby only has 2 values -->
<a
filter-sort-key="name"
filter-sort-toggle
filter-query="$closest table; tbody">
<i></i>
</a>
</span>
</td>
<td
class="position:sticky top:0 background:white padding:0px_10px_10px">
<input
type="text"
class="floating-label"
filter-query-key="_id"
filter-query="$closest table; tbody"
placeholder="Industry_id" />
<span
class="position:absolute bottom:22px right:20px float:right z-index:6">
<a
filter-sort-key="_id"
value=""
filter-sort-direction="asc"
click-value="desc, asc"
click-attribute="filter-sort-direction"
filter-query="$closest table; tbody">
</a>
</span>
</td>
</tr>
<tbody
array="industries"
key=""
filter-query-value=""
filter-sort-key="name"
filter-sort-direction="asc"
render-query="[template]">
<tr template class="border-bottom:1px_solid_darkgray">
<td class="padding:10px">
<div class="min-width:200px">
<div class="icon-wrapper">
<span state_id="me1234" key="icon"></span>
</div>
<div>
<a
actions="state, openModal"
modal-src="render.html"
state-array="module_activity"
state-object="{{object._id}}"
state_to="form-fields"
modal-width="320px"
modal-color="#229954">
<h4
array="{{object.array}}"
state-object="{{object._id}}"
key="name">
Name
</h4>
<div
state-array="modules"
state-object=""
state_to="render"
state_id="render"></div>
</a>
<h5
array="{{object.array}}"
state-object="{{object._id}}"
key="description"></h5>
</div>
</div>
</td>
<td class="padding:10px">
<a
actions="state, openModal"
modal-src="render.html"
state-object=""
state-array="module_activity"
state_to="form-fields"
modal-width="320px"
modal-color="#229954">
<b
array="{{object.array}}"
state-object="{{object._id}}"
key="_id"
>Industry Id</b
>
<div
state-array="module_activity"
state-object=""
state_to="render"></div>
</a>
</td>
</tr>
</tbody>
</table>
</div>
<button
actions="state, openModal"
modal-src="render.html"
state-array="modules"
state-object=""
state_to="render"
modal-width="320px"
modal-height="100%"
modal-color="#229954"
class="position:fixed bottom:15px right:15px padding:15px background:dodgerblue color:#fff font-size:1.5rem grow-hover border-radius:50% border-width:0 box-shadow:0px_2px_10px_0px_rgba(0,_0,_0,_0.4) z-index:8"
state_id="render">
<i src="/assets/svg/plus.svg"></i>
</button>
<!-- CoCreate JS CDN -->
<script src="https://cdn.cocreate.app/organizations/latest/CoCreate-organizations.min.js"></script>
</body>
</html>