Skip to content

Commit dc56408

Browse files
frankpaganfrankpagan
committed
feat: made the satge name and the card name contenteditable
1 parent 67fe967 commit dc56408

File tree

3 files changed

+49
-166
lines changed

3 files changed

+49
-166
lines changed

‎src/kanban-form.html

+9-50
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,10 @@
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
88
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
9-
<title>Payment Form | CoCreate</title>
9+
<title>Kanban Form | CoCreate</title>
1010
<link rel="stylesheet" href="../index.css" collection="files" document_id="60972231624235187e4d6979" name="src" type="text/css" save="true" parse="true" />
1111

1212
</head>
13-
<style type="text/css">
14-
.flex-half {
15-
flex-grow: 1;
16-
flex-basis: 50%;
17-
}
18-
19-
flex-basis-50precent {
20-
flex-basis: 50%;
21-
22-
}
23-
24-
.flex-half:nth-of-type(1) {
25-
padding-right: 10px;
26-
}
27-
28-
.flex-half:nth-of-type(2) {
29-
padding-left: 10px;
30-
}
31-
32-
.round-iconBtn {
33-
background-color: #dedede;
34-
color: grey;
35-
font-size: 20px;
36-
border-radius: 50px;
37-
width: 50px;
38-
height: 50px;
39-
display: flex;
40-
align-items: center;
41-
justify-content: center;
42-
}
43-
44-
.comment-content {
45-
padding: 10px;
46-
padding-right: 15px;
47-
border: 1px solid #dedede;
48-
border-radius: 3px 20px 20px 3px;
49-
}
50-
51-
.floating-label {
52-
margin: 10px;
53-
}
54-
</style>
5513

5614
<body>
5715
<!-- Modal Viewport -->
@@ -108,7 +66,7 @@
10866
<!-- Main Content -->
10967
<main class="padding:10px" content_id="content">
11068

111-
<form realtime="true" collection="module_activity" pass_id="form-fields">
69+
<form realtime="true" collection="testing" pass_id="form-fields">
11270

11371
<input type="hidden" name="module_id" pass-value_id="module_id" placeholder="Module Id">
11472

@@ -177,7 +135,8 @@ <h3 collection="module_activity" document_id="" name="name">Stage Name</h3>
177135
<div class="flex-grow:1 width:150px padding-right:10px">
178136
<cocreate-select class="sortable floating-label" name="status" document_id="status" placeholder="Status">
179137
<input placeholder="Search" template_id="status">
180-
<cc-options fetch-collection="module_activity" fetch-name="module_id" fetch-value="5e6d79f9d8cdbe53927a0443" template_id="status" class="overflow:auto">
138+
<div template_id="status" filter-name="type" filter-value="5ff747727005da1c272740ab"></div>
139+
<cc-options fetch-collection="tags" fetch-name="module_id" fetch-value="" template_id="status" pass_id="module_id" class="overflow:auto">
181140
<cc-option class="template" template_id="status" value="{{data._id}}">
182141
<h3 collection="modules" document_id="" name="name">Status Name</h3>
183142
</cc-option>
@@ -194,8 +153,8 @@ <h3 collection="modules" document_id="" name="name">Status Name</h3>
194153
<div id="tasklist" class="card template">
195154
<div class="margin:15px font-size:18px text-dark-gray">
196155
<span class="display:inline-block">
197-
<input collection="module_activity" document_id="" name="clone-name" id="stage-name" class="input_field" placeholder="Tasklist">
198-
</span>
156+
<input collection="module_activity" document_id="" name="clone-name" id="stage-name" class="input_field" placeholder="Tasklist">
157+
</span>
199158
<span class="float:right display:inline-block"><a clone_id="tasklist" class="deleteBtn"><i class="fas fa-times"></i></a></span>
200159
</div>
201160
<div class="border:bottom border-color-extra-medium-gray">
@@ -209,8 +168,8 @@ <h3 collection="modules" document_id="" name="name">Status Name</h3>
209168
<!-- sortable task item -->
210169
<div id="task-item" class="display:flex flex-wrap:wrap:nowrap align-items:center margin:0px_15px padding:10px_0px template">
211170
<label class="checkbox">
212-
<input type="checkbox" name="taskcheck"><span class="mark display:inline-block"></span>
213-
</label>
171+
<input type="checkbox" name="taskcheck"><span class="mark display:inline-block"></span>
172+
</label>
214173
<div class="flex-grow-1">
215174
<input class="floating-label" document_id="5d8c79e7e4be424681b5e48d" name="taskname" placeholder="Task Name">
216175
</div>
@@ -229,7 +188,7 @@ <h3 collection="modules" document_id="" name="name">Status Name</h3>
229188
</div>
230189
<!-- saveFetch -->
231190

232-
<div style=width="100%" class="noDrag">
191+
<div style="width:100%" class="noDrag">
233192
<input id="tasklist-name"><a clone_id="tasklist" class="cloneBtn noDrag" style="display: block" clone-name="tasklist-name">New Tasklist</a>
234193
</div>
235194

‎src/kanban.html

+40-50
Original file line numberDiff line numberDiff line change
@@ -5,10 +5,16 @@
55
<meta charset="utf-8">
66
<meta http-equiv="X-UA-Compatible" content="IE=edge">
77
<meta name="viewport" content="width=device-width, initial-scale=1">
8-
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16">
8+
<link rel="icon" href="https://cdn.cocreate.app/favicon.ico" type="image/ico" sizes="16x16" parse="true">
99
<title>Kanban | CoCreate</title>
1010
</head>
11-
11+
12+
<style type="text/css">
13+
#board{height: calc(100vh - 50px)}
14+
.card-container{height: calc(100vh - 170px)}
15+
.template{dsplay:none}
16+
</style>
17+
1218
<body>
1319
<div id="modal-viewport" hidden></div>
1420
<div class="nav display:flex align-items:center background:whitesmoke" content_id="content" scroll-effect="hide-nav" scroll-up="1" scroll-down="1">
@@ -28,55 +34,57 @@
2834
</li>
2935

3036
<!-- fullscreen toogle and icon transform-->
31-
<li class="margin-right:15px">
32-
<a fullscreen><i toggle="fa-compress, fa-expand" class="fas fa-expand"></i></a>
33-
</li>
37+
<li class="margin-right:15px"><a fullscreen><i toggle="fa-compress, fa-expand" class="fas fa-expand"></i></a></li>
3438

3539
<!-- delete document-->
3640
<li class="margin-right:15px">
37-
<a collection="modules" document_id="" pass_id="form-fields" class="btn-modal-close" actions="deleteDocument"><i class="far fa-trash-alt"></i></a>
41+
<a actions="deleteDocuments" collection="" pass_id="datatable" template_id="datatable"><i class="far fa-trash-alt"></i></a>
3842
</li>
3943
</ul>
4044
</div>
4145
<div content_id="content">
4246

43-
<div id="board" class="display:flex overflow:auto height:90vh">
47+
<div id="board" class="display:flex overflow:auto">
4448

45-
<div class="display:flex flex-wrap:nowrap flex-direction:row" dnd-group-name="stage" fetch-collection="module_activity" filter-name="module_id" filter-value="5e6d79f9d8cdbe53927a0443" filter-operator="$eq" fetch-count="" order-by="stage_position"
46-
order-type="asc" template_id="filter_test" render_id="stage" pass_id="fetch_value" droppable>
49+
<div class="display:flex flex-wrap:nowrap flex-direction:row" dnd-group-name="stage" fetch-collection="tags" filter-name="type" filter-value="60eb93a2b979b4001744b445" filter-operator="$eq" order-by="stage_position" order-type="asc" template_id="filter_test" render_id="stage" pass_id="fetch_value" droppable>
4750

4851
<!-- Stage Column -->
49-
<div class="template margin:10px background:whitesmoke max-width:300px" template_id="filter_test" eid="{{stage._id}}" document_id="{{stage._id}}" draggable>
50-
<div class="margin:15px font-size:18px color-dark-gray">
52+
<div class="template box-shadow-200 position:relative margin:10px background:whitesmoke width:300px" template_id="filter_test" eid="{{stage._id}}" document_id="{{stage._id}}" draggable>
53+
<div class="box-shadow-bottom position:sticky top:0 padding:15px font-size:18px z-index:1">
5154
<span class="display:inline-block">
52-
<input class="input_field"
53-
collection="module_activity"
54-
document_id="{{stage._id}}"
55-
name="name"
56-
id="stage-name"
57-
placeholder="Stage">
55+
<p collection="{{stage.collection}}" document_id="{{stage._id}}" name="name" contenteditable draggable="false"></p>
5856
</span>
5957
<span class="float:right display:inline-block">
60-
<a clone_id="stage" actions="deleteDocument" collection="module_activity" document_id="{{stage._id}}">
58+
<a actions="deleteDocument" collection="{{stage.collection}}" document_id="{{stage._id}}">
6159
<i class="fas fa-times"></i>
6260
</a>
6361
</span>
6462
</div>
65-
<div class="height:70vh padding:10px overflow:auto">
63+
<div class="card-container padding:10px overflow:auto z-index:0">
6664

67-
<div class="display:flex flex-direction:column height:100% sortable" dnd-group-name="card" fetch-collection="module_activity" filter-name="stage" filter-value="{{stage._id}}" filter-operator="$eq" fetch-count="" order-by="stage-index_position" order-type="asc" template_id="{{stage._id}}" droppable>
65+
<div filter-name="module_id" filter-value="60e73c8eb979b40017448c1b" filter-operator="$eq" template_id="{{stage._id}}"></div>
66+
<div class="display:flex flex-direction:column height:100% sortable" dnd-group-name="card" fetch-collection="module_activities" filter-name="stage" filter-value="{{stage._id}}" filter-operator="$eq" order-by="stage-index_position" order-type="asc" template_id="{{stage._id}}" droppable>
6867

6968
<!-- Card -->
70-
<div class="template card margin-bottom:10px padding:10px background:white" template_id="{{stage._id}}" value="{{data._id}}" document_id="{{data._id}}" draggable>
69+
<div class="template card position:relative margin-bottom:10px padding:10px background:white" template_id="{{stage._id}}" value="{{data._id}}" document_id="{{data._id}}" eid="{{data._id}}" draggable>
70+
<div id="editblock{{data._id}}" class="position:absolute top:8px right:8px font-size:11px display:none">
71+
<a target="modal" href="./form.html" modal-width="320px" modal-color="#229954">
72+
<i class="fas fa-pencil-alt"></i>
73+
<div pass-collection="{{collection}}" pass-document_id="{{data._id}}" pass_to="form-fields"></div>
74+
<div pass_id="form" pass-collection="" pass-document_id="" pass-name="" pass_to="render"></div>
75+
<div pass-value="{{data.module_id}}" pass-filter-value="{{data.module_id}}" pass_to="module_id"></div>
76+
<div pass-document_id="{{data.module_id}}" pass_to="module-form"></div>
77+
</a>
78+
</div>
7179
<div class="width:100%">
72-
<img collection="module_activity" document_id="{{data._id}}" name="image" src="https://via.placeholder.com/150" width="100%"></img>
80+
<img collection="module_activities" document_id="{{data._id}}" name="image" src="https://via.placeholder.com/150" width="100%"></img>
7381
</div>
7482
<div class="border-bottom:1px_solid_gray margin:0px_15px">
7583
<div class="display:flex margin:10px_0px">
7684
<span class="cocreate-badge round badge-danger margin-right:10px font-size:10px padding:0px_20px"></span>
7785
<span class="cocreate-badge round margin-right:10px font-size:10px padding:0px_20px"></span>
7886
</div>
79-
<p collection="module_activity" document_id="{{data._id}}" name="name">Card Name</p>
87+
<p collection="module_activities" document_id="{{data._id}}" name="name" contenteditable>Card Name</p>
8088
<div class="display:flex margin:10px_0px">
8189
<span class="cocreate-badge badge-danger margin-right:10px font-size:14px">
8290
<i class="far fa-clock"></i>
@@ -100,17 +108,6 @@
100108
<div class="avatar-status off"></div>
101109
</div>
102110

103-
<!-- Avatar -->
104-
<div class="avatar-wrapper margin:5px_0px margin-right:10px">
105-
<a class="avatar round" target="modal" href="render.html" pass-collection="modules" pass-prefix="" pass-module_id="5dd010bccbc25f0cdb1a4d9f" pass_to="render" modal-width="300px" modal-height="375px" modal-color="#229954">
106-
<span collection="users" document_id="" name="name" class="sessionUser_Id first-letter avatar-name">B</span>
107-
<span collection="users" document_id="" name="profile_image" class="sessionUser_Id avatar-image">
108-
<img src="/_static/Velazquez.jpg" onerror="this.style.display='none'"/>
109-
</span>
110-
</a>
111-
<div class="avatar-status off"></div>
112-
</div>
113-
114111
</div>
115112
</div>
116113
<div class="display:flex margin:15px">
@@ -124,9 +121,9 @@
124121

125122
</div>
126123
</div>
127-
<div class="margin:0px_15px padding:15px_0px">
128-
<!--<a clone_id="{{stage._id}}-card" actions="createClone" clone-name="card-name"><i class="fas fa-plus"></i> New Card</a>-->
129-
<form collection="module_activity">
124+
<div class="box-shadow-top position:absolute width:100% padding:15px" draggable="false">
125+
<form collection="module_activities" document_id="">
126+
<input type="hidden" document_id="" name="module_id" value="{{stage.module_id}}" pass_id="module_id"/>
130127
<input type="hidden" document_id="" name="stage" value="{{stage._id}}" />
131128
<a actions="save, reset"><i class="fas fa-plus"></i> New Card</a>
132129
</form>
@@ -136,26 +133,19 @@
136133
</div>
137134
</div>
138135

139-
<form collection="module_activity">
140-
<input type="hidden" pass_id="module_id" document_id="" name="module_id" value="5e6d79f9d8cdbe53927a0443" />
136+
<form collection="tags" document_id="">
137+
<input type="hidden" name="name" value="untitled"/>
138+
<input type="hidden" name="module_id" value="60e73c8eb979b40017448c1b" pass_id="module_id"/>
139+
<input type="hidden" name="type" value="60eb93a2b979b4001744b445"/>
141140
<button class="position:fixed bottom:15px right:15px background:dodgerblue border-radius:50% grow-hover" actions="save, reset">
142-
<i class="fas fa-plus"></i>
143-
</button>
141+
<i class="fas fa-plus"></i>
142+
</button>
144143
</form>
145144

146145
</div>
147146

148-
<script>
149-
var config = {
150-
apiKey: 'c2b08663-06e3-440c-ef6f-13978b42883a',
151-
organization_Id: '5de0387b12e200ea63204d6c',
152-
host: 'ws.cocreate.app'
153-
}
154-
</script>
155-
156147
<script src="../../../CoCreateJS/dist/CoCreate.js"></script>
157148

158-
159149
</body>
160150

161151
</html>

‎src/test-dnd.html

-66
This file was deleted.

0 commit comments

Comments
 (0)