Skip to content

Commit ccbc546

Browse files
shuartshuart
committed
add panels to grid view
1 parent 8725c04 commit ccbc546

File tree

6 files changed

+333
-6
lines changed

6 files changed

+333
-6
lines changed

‎src/js/modules/common_selectors/evaluators_selector.js

Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
import createEntityManagement from "../common_project_management/entity_management.js"
2+
import createEvaluatorsManagement from "../common_project_management/evaluators_management.js"
3+
import createDialogue from "../common_select_dialogue/common_dialogue.js"
4+
5+
var selectedArrayToObject = function (selectedArray) {
6+
var obj = {}
7+
for (let i = 0; i < selectedArray.length; i++) {
8+
obj[ selectedArray[i].uuid || selectedArray[i] ] =true; //works if an object or an id
9+
}
10+
return obj
11+
}
12+
13+
export function showEvaluatorsSelector ({
14+
selected=[], //uuid of selected items or object with uuid as prop names
15+
multipleSelection= true,
16+
customOptions= false,
17+
onChange=(e)=>console.log(e),
18+
}={}) {
19+
console.log(selected);
20+
21+
var options= undefined
22+
23+
if (!customOptions) {
24+
var repo = createEvaluatorsManagement()
25+
var evals = repo.getAll()
26+
27+
options = evals.map(e=>{
28+
return {name:e.name, uuid:e.uuid, iconPath:e.attributes.iconPath}
29+
})
30+
}else{
31+
options = customOptions
32+
}
33+
34+
35+
var showSelectionDialogue = function () {
36+
createDialogue({
37+
fields:[
38+
// {type:"text", name:"text",config:{
39+
// label:"Property Name",
40+
// value:"Property Name",
41+
// autofocus:true,
42+
// }
43+
// },
44+
{type:"selection", name:"selection", config:{
45+
multipleSelection:multipleSelection,
46+
label:"Property Type",
47+
list: options,
48+
selected:selected,
49+
}
50+
},
51+
],
52+
onConfirm:(result)=>{
53+
var added = []
54+
var removed = []
55+
var newSelection = result.selection
56+
if (Array.isArray(selected)) {
57+
selected = selectedArrayToObject(selected)
58+
}
59+
if (Array.isArray(result.selection)) {
60+
newSelection = selectedArrayToObject(result.selection)
61+
}
62+
for (const key in selected) {
63+
if (Object.hasOwnProperty.call(selected, key)) {
64+
const originalUuid = selected[key];
65+
if(!newSelection[key]){
66+
removed.push(key)
67+
}
68+
}
69+
}
70+
for (const key in newSelection) {
71+
if (Object.hasOwnProperty.call(newSelection, key)) {
72+
const newUuid = newSelection[key];
73+
if(!selected[key]){
74+
added.push(key)
75+
}
76+
}
77+
}
78+
var change = {added, removed} //TODO check here
79+
onChange(result, change)
80+
}
81+
})
82+
}
83+
84+
showSelectionDialogue()
85+
86+
}

‎src/js/modules/project_views/project_views_components_list.js

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
var componentList = {
2+
table:{name:"Table", icon:"table",},
3+
folder:{name:"Folder", icon:"table",},
4+
graph:{name:"Graph", icon:"git-merge",},
5+
instanceCard:{name:"Title Card", icon:"credit-card",},
6+
propertiesList:{name:"Properties", icon:"credit-card",},
7+
textEditor:{name:"Text Editor", icon:"credit-card",},
8+
}
9+
10+
export {componentList}

‎src/js/modules/project_views/view_grid_headers.js

Lines changed: 143 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,143 @@
1+
import {createAdler} from "../../vendor/adler.js"
2+
import { componentList } from "./project_views_components_list.js"
3+
import createEvaluatorsManagement from "../common_project_management/evaluators_management.js"
4+
import state from "../common_state/state_manager.js"
5+
import projectManagement from "../common_project_management/project_management.js";
6+
import mainPopup from "../common_ui_components/mainPopup/mainPopup.js"
7+
import select from "../common_ui_components/select/select.js"
8+
import { showEvaluatorsSelector } from "../common_selectors/evaluators_selector.js";
9+
10+
var goToEvaluator = function(event){
11+
var evaluator = event.target.dataset.id
12+
state.goTo("/:/evaluators/"+evaluator)
13+
}
14+
15+
var setUpSettingsEvent = function (self, event, domElement, currentUuid, uuid, callback){
16+
var compPos = [event.target.dataset.rowId,event.target.dataset.colId,event.target.dataset.compId,]
17+
var projectId = projectManagement.getCurrent().id
18+
var entities = projectManagement.getProjectStore(projectId,"evaluators").getAll()
19+
20+
showEvaluatorsSelector({
21+
multipleSelection:false,
22+
selected : [currentUuid],
23+
onChange: (e,f)=> {
24+
// console.log(f.added);
25+
// alert(f.added)
26+
if (f.added) {
27+
self.editEvaluatorCallback(uuid, f.added)
28+
}
29+
30+
// data.addEntities(f.added)
31+
// data.removeEntities(f.removed)
32+
// showCollections(self)
33+
},
34+
})
35+
36+
37+
38+
// alert(JSON.stringify(currentSchema))
39+
// instance.props.schema.set(currentSchema); instance.update();
40+
}
41+
42+
var renderMenu = function (self, comp) {
43+
var areaIcon = componentList[comp.componentType].icon
44+
var areaName = componentList[comp.componentType].name
45+
var rowId =1
46+
var colId =1
47+
var index =1
48+
var uuid =comp.uuid
49+
50+
var evaluatorUuid = comp.evaluatorUuid || undefined
51+
var evaluatorName = " no evaluator"
52+
if (evaluatorUuid && evaluatorUuid !="undefined") {
53+
console.log(evaluatorUuid);
54+
var evaluatorRepo = createEvaluatorsManagement()
55+
evaluatorName =evaluatorRepo.getById(evaluatorUuid).name
56+
}
57+
58+
var menuHtml = /*html*/`
59+
<div class="media">
60+
<div class="media-left">
61+
<figure class="image is-32x32" style="margin:23%">
62+
<img class="darkModeCompatibleIcons" src="./img/icons/${areaIcon}.svg" alt="Placeholder image">
63+
</figure>
64+
</div>
65+
<div class="media-content">
66+
<p class="is-4">${areaName} <button data-row-id="${rowId}" data-col-id="${colId}" data-comp-id="${index}" data-id="${uuid}" class="delete is-danger action-view-settings-delete-comp"></button> </p>
67+
<div class="tags has-addons">
68+
<span data-id="${evaluatorUuid}" class="tag is-link action-view-settings-goto-evaluator">Using ${evaluatorName }</span>
69+
<a data-row-id="${rowId}" data-col-id="${colId}" data-comp-id="${index}" data-id="${uuid}" class="tag action-view-settings-edit-evaluator"><img data-row-id="${rowId}" data-col-id="${colId}" data-comp-id="${index}" data-id="${uuid}" style="height:15px" class="darkModeCompatibleIcons" src="./img/icons/edit-2.svg" alt="Placeholder image"></a>
70+
</div>
71+
</div>
72+
73+
`
74+
var domElement = document.createElement("div")
75+
domElement.innerHTML =menuHtml
76+
domElement.querySelector(".action-view-settings-goto-evaluator").addEventListener("click",goToEvaluator )
77+
domElement.querySelector(".action-view-settings-edit-evaluator").addEventListener("click",function (event) {
78+
setUpSettingsEvent(self,event,domElement, evaluatorUuid, uuid )
79+
80+
} )
81+
82+
return domElement
83+
84+
}
85+
86+
var gridViewHeaders = createAdler({
87+
tag:'eph-grid-view-headers',
88+
props:{
89+
component: undefined,
90+
editEvaluatorCallback: ()=> alert("eval")
91+
// currentPageId:undefined,
92+
// currentArea:undefined,
93+
// calledFromInstance:undefined,
94+
// cols:4,
95+
// rows:4,
96+
// schema:[],
97+
// showSettings:false,
98+
},
99+
attributes:[
100+
],
101+
events : [
102+
// ["click", '.action_grid_add', addComp],
103+
// ["click", '.action-grid-save', saveNewLayout],
104+
// ["click", '.action-grid-add-left', addCompLeft],
105+
// ["click", '.action-grid-toggle-edit', toogleSettings],
106+
],
107+
html:()=>/*html*/`
108+
<link rel="stylesheet" href="css/bulma.min.css">
109+
<link rel="stylesheet" href="css/bulma.dark.css">
110+
111+
<link rel="stylesheet" href="css/main.css">
112+
113+
114+
<div class="card">
115+
<header class="card-header">
116+
<div class="card-menu"></div>
117+
118+
119+
120+
<p class="card-header-title">
121+
Card header
122+
</p>
123+
<button class="card-header-icon" aria-label="more options">
124+
<span class="icon">
125+
<i class="fas fa-angle-down" aria-hidden="true"></i>
126+
</span>
127+
</button>
128+
</header>
129+
</div>
130+
131+
`,
132+
onRender:(self) =>{
133+
// updateView(self)
134+
135+
var editMenu = renderMenu(self, self.component)
136+
self.query(".card-menu").append(editMenu)
137+
},
138+
css:`
139+
140+
`,
141+
})
142+
143+
export default gridViewHeaders

‎src/js/modules/project_views/view_grid_settings.js

Lines changed: 40 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ import propertiesViewport from "../viewports/properties_viewport/properties_view
1414
import { renderPlaceholder } from "./view_grid_helpers.js";
1515
import folder_viewport from "../viewports/folder_viewport/folder_viewport.js";
1616

17+
import gridViewHeaders from "./view_grid_headers.js";
18+
1719

1820
function sortable(self, section, onUpdate){
1921
var dragEl, nextEl, newPos, dragGhost;
@@ -134,13 +136,33 @@ var renderItems = function (self) {
134136
var vsize = comp.vsize || 2
135137
var hsize = comp.hsize || 2
136138
domElement.style.gridArea = `span ${vsize}/span ${hsize}`
139+
if (self.showHeaders) {
140+
var header = renderItemHeader(self, comp)
141+
domElement.append(header)
142+
domElement.classList.add("viewGridElementWithHeader")
143+
}
137144
view.mount(domElement)
138145
// view.mount(self.query('.viewGridArea'))
139146
self.query('.viewGridArea').append(domElement)
140147
}
141148
}
142149
}
143150

151+
var renderItemHeader = function (self, comp) {
152+
var viewHeader = gridViewHeaders.instance()
153+
viewHeader.component = comp
154+
viewHeader.editEvaluatorCallback = function (compId, evalId) {
155+
for (let i = 0; i < self.schema.length; i++) {
156+
if (self.schema[i].uuid == compId){
157+
self.schema[i].evaluatorUuid = evalId;
158+
pushLayoutToDb(self, self.schema)//modify and save new schema
159+
updateView(self)
160+
}
161+
}
162+
}
163+
return viewHeader
164+
}
165+
144166
var renderItem = function (self, comp) {
145167
var instanceType = availableViewports[comp.componentType]
146168
var evaluatorId = comp.settings?.evaluatorUuid || comp.evaluatorUuid
@@ -201,12 +223,15 @@ var getSchemaFromGrid = function (self) {
201223

202224
var saveNewLayout = function (event,self) {
203225
var newSchema = getSchemaFromGrid(self)
226+
pushLayoutToDb(self, newSchema)
227+
updateSchema(self)
228+
}
229+
var pushLayoutToDb = function (self, schema) {
204230
var projectId = projectManagement.getCurrent().id
205231
if (self.currentPageId) {
206-
projectManagement.getProjectStore(projectId,"views").add({uuid:self.currentPageId, layout:JSON.stringify(newSchema) ,theTime:Date.now()})
232+
projectManagement.getProjectStore(projectId,"views").add({uuid:self.currentPageId, layout:JSON.stringify(schema) ,theTime:Date.now()})
207233
console.log(projectManagement.getProjectStore(projectId,"views").getAll())
208234
}
209-
updateSchema(self)
210235
}
211236

212237
var showAddMenu = function(event, self, area){
@@ -281,6 +306,10 @@ var toogleSettings = function (event, self) {
281306
self.showSettings = !self.showSettings
282307
updateView(self)
283308
}
309+
var toogleHeaders = function (event, self) {
310+
self.showHeaders = !self.showHeaders
311+
updateView(self)
312+
}
284313

285314
var gridView = createAdler({
286315
tag:'eph-grid-view',
@@ -292,6 +321,7 @@ var gridView = createAdler({
292321
rows:4,
293322
schema:[],
294323
showSettings:false,
324+
showHeaders: true,
295325
},
296326
attributes:[
297327
],
@@ -300,6 +330,7 @@ var gridView = createAdler({
300330
["click", '.action-grid-save', saveNewLayout],
301331
["click", '.action-grid-add-left', addCompLeft],
302332
["click", '.action-grid-toggle-edit', toogleSettings],
333+
["click", '.action-grid-toggle-headers', toogleHeaders],
303334
],
304335
html:()=>/*html*/`
305336
<link rel="stylesheet" href="css/bulma.min.css">
@@ -309,7 +340,8 @@ var gridView = createAdler({
309340
310341
311342
<div class="area container is-widescreen">
312-
<div class="button action-grid-toggle-edit">edit</div>
343+
<div class="button action-grid-toggle-edit">Reorganize</div>
344+
<div class="button action-grid-toggle-headers">edit</div>
313345
<button class="button action_grid_add only_settings">add</button>
314346
<div class="button action-grid-save only_settings">Save</div>
315347
<div class="button action-grid-add-left only_settings">Add to Left Panel</div>
@@ -400,6 +432,11 @@ var gridView = createAdler({
400432
top: 64px;
401433
left: -26%;
402434
}
435+
.viewGridElementWithHeader {
436+
border-style: solid;
437+
border-color: #8a8a8a29;
438+
border-radius: 7px;
439+
}
403440
`,
404441
})
405442

0 commit comments

Comments
 (0)