Merge pull request #266 from harena-lab/development

Major fixes in loading icon and case editor. New change password feature
harena-lab · Oct 26, 2020 · 2ea499b · 2ea499b
2 parents 82724a0 + 547c577
commit 2ea499b
Show file tree

Hide file tree

Showing 28 changed files with 486 additions and 234 deletions.
diff --git a/src/adonisjs/public/author/create/case/index.html b/src/adonisjs/public/author/create/case/index.html
@@ -72,6 +72,7 @@
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
               <!-- <li class="breadcrumb-item"><a href="home.html">Home</a></li> -->
+							<li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Create</li>
             </ol>

diff --git a/src/adonisjs/public/author/create/index.html b/src/adonisjs/public/author/create/index.html
@@ -19,6 +19,7 @@
     <script src="../../infra/basic.js"></script>
     <script src="../../infra/dcc-common-server-proxy.js"></script>
     <script src="../../infra/dcc-common-server-address.js"></script>
+    <script src="../../infra/simple-page-tasks.js"></script>
     <script src="../../infra/token-validator.js"></script>
 
     <script src="../../dccs/dcc.js"></script>
@@ -75,6 +76,7 @@
         <div class="mr-auto author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Create</li>
             </ol>

diff --git a/src/adonisjs/public/author/drafts/category/cases/index.html b/src/adonisjs/public/author/drafts/category/cases/index.html
@@ -74,6 +74,7 @@
         <div class="mr-auto author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Drafts</li>
             </ol>

diff --git a/src/adonisjs/public/author/drafts/category/index.html b/src/adonisjs/public/author/drafts/category/index.html
@@ -73,6 +73,7 @@
         <div class="mr-auto zindex-fixed author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href='/author/home'>Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Drafts</li>
             </ol>

diff --git a/src/adonisjs/public/author/drafts/index.html b/src/adonisjs/public/author/drafts/index.html
@@ -73,6 +73,7 @@
         <div class="mr-auto author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Drafts</li>
             </ol>
@@ -85,7 +86,26 @@
             <p>Continue editing your drafted cases.</p>
           </div>
           <div id="case-boxes" class="container-fluid h-100 scroll-y draft-scroll-container">
-
+            <dcc-rest id="harena-cases" bind="harena-cases"></dcc-rest>
+            <dcc-dhtml id="harena-dhtml-cases" connect="harena-cases:service/request/get:retrieve">
+              {{@foreach . cases}}
+              <div id="b{{cases.id}}" class="row draft-author-case-container">
+                <div class="col draft-case-title">
+                  {{cases.title}}
+                  <div class="row">
+                    <h6>Created by {{cases.author_grade}}: {{cases.username}}</h6>
+                  </div>
+                </div>
+
+                <div class="d-flex justify-content-end justify-content-center buttons-container">
+                  <div id="e{{cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">EDIT</div>
+                  <div id="p{{cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">PREVIEW</div>
+                  <div id="d{{cases.id}}" class="col author-panel-button align-self-center pt-2 pb-2">DELETE</div>
+                </div>
+              </div>
+              {{@endfor}}
+              <end-dcc></end-dcc>
+            </dcc-dhtml>
           </div>
         </div>
       </div>

diff --git a/src/adonisjs/public/author/drafts/quest/cases/index.html b/src/adonisjs/public/author/drafts/quest/cases/index.html
@@ -72,6 +72,7 @@
         <div class="mr-auto author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Drafts</li>
             </ol>

diff --git a/src/adonisjs/public/author/drafts/quest/index.html b/src/adonisjs/public/author/drafts/quest/index.html
@@ -72,6 +72,7 @@
         <div class="mr-auto zindex-fixed author-breadcrumb" >
           <nav aria-label="breadcrumb">
             <ol class="breadcrumb">
+              <li class="breadcrumb-item"><a href="/">Welcome</a></li>
               <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
               <li class="breadcrumb-item active" aria-current="page">Drafts</li>
             </ol>

diff --git a/src/adonisjs/public/author/home/index.html b/src/adonisjs/public/author/home/index.html
@@ -67,9 +67,19 @@
 	  <!-- Login/logout header -->
 	  <dcc-include src="/author/partials/header.html"></dcc-include>
 	  <!-- Create a section to place page content -->
+
 	  <main role="main">
 	    <div class="d-flex flex-column vh-100 vw-100 home-author-padding hidden-overflow">
-
+				<!-- Create breadcrumbs -->
+				<div class="ml-4 mr-auto zindex-fixed author-breadcrumb" >
+					<nav aria-label="breadcrumb">
+						<ol class="breadcrumb">
+							<li class="breadcrumb-item"><a href="/">Welcome</a></li>
+							<li class="breadcrumb-item active" aria-current="page">Home</li>
+						</ol>
+					</nav>
+				</div>
+				<!-- End of breadcrumbs -->
 	      <div class="h-100 w-100 home-content-padding">
 	        <div class="home-text mb-5">
 	          <p>Hello!</p>

diff --git a/src/adonisjs/public/author/index.html b/src/adonisjs/public/author/index.html
@@ -197,6 +197,7 @@ <h3>Settings</h3>
         <nav aria-label="breadcrumb">
           <ol class="breadcrumb">
             <!-- <li class="breadcrumb-item"><a href="//home.html">Home</a></li> -->
+            <li class="breadcrumb-item"><a href="/">Welcome</a></li>
             <li class="breadcrumb-item"><a href="/author/home">Home</a></li>
             <li class="breadcrumb-item">
               <div style="height: 15px;">

diff --git a/src/adonisjs/public/author/js/author.js b/src/adonisjs/public/author/js/author.js
@@ -717,68 +717,25 @@ class AuthorManager {
 
   elementSelected (topic, message) {
     const dccId = MessageBus.extractLevel(topic, 3)
-    /*
-    console.log('=== level 3')
-    console.log(dccId)
-    */
-
     this._collectEditableDCCs()
-
-    /*
-    console.log('=== editable DCCs')
-    console.log(this._editableDCCs)
-
-    console.log('=== knot selected')
-    console.log(this._knots[this._knotSelected].content)
-    */
-
     const elSeq = parseInt(dccId.substring(3))
-    // console.log(elSeq)
     let el = -1
     for (el = 0; el < this._knots[this._knotSelected].content.length &&
-                   this._knots[this._knotSelected].content[el].seq != elSeq; el++)
+                 this._knots[this._knotSelected].content[el].seq != elSeq; el++)
     /* nothing */;
 
     if (el != -1) {
-      /*
-         const presentationId = (message == null) ? null : message.presentationId;
-         let dcc = (presentationId != null)
-            ? this._editableDCCs[presentationId]
-            : this._editableDCCs[dccId];
-         */
-      let dcc = this._editableDCCs[dccId]
-
-      /*
-      console.log('=== dcc to edit')
-      console.log(dcc)
-      */
+      for (let edcc in this._editableDCCs)
+        if (this._editableDCCs[edcc].deactivateAuthor)
+          this._editableDCCs[edcc].deactivateAuthor()
 
+      let dcc = this._editableDCCs[dccId]
       const element = this._knots[this._knotSelected].content[el]
-      /*
-         console.log("=== element properties");
-         console.log(element);
-         console.log("presentation-dcc-" + message);
-         console.log(Object.keys(this._editableDCCs));
-         */
-      // check if there is an option (trigger) element inside an input dcc
-      /*
-         let roleEdit = message;
-         if (element.type == "input" && element.subtype == "choice" &&
-             element.exclusive && message != "text" &&
-             this._editableDCCs["presentation-dcc-" + message]) {
-            dcc = this._editableDCCs["presentation-dcc-" + message];
-            roleEdit = null;
-            console.log("=== new dcc");
-            console.log(dcc);
-         }
-         this._elementSelected = el;
-         */
 
-      if (this._previousEditedDCC) { this._previousEditedDCC.reactivateAuthor() }
+      // if (this._previousEditedDCC) { this._previousEditedDCC.reactivateAuthor() }
 
       const role = (message != null) ? message.role : null
 
-      // dcc.edit((presentationId != null) ? null : role);
       dcc.edit(role)
 
       this._previousEditedDCC = dcc

diff --git a/src/adonisjs/public/author/js/create.js b/src/adonisjs/public/author/js/create.js
@@ -36,6 +36,7 @@ class TemplateManager {
         }
       )
     }
+    MessageBus.ext.publish('control/dhtml/ready')
   }
 }
 

diff --git a/src/adonisjs/public/author/js/draft.js b/src/adonisjs/public/author/js/draft.js
@@ -20,8 +20,9 @@ class DraftManager {
     this._draftCategoryCasesSelect = this._draftCategoryCasesSelect.bind(this)
     this._boxesPanel = document.querySelector('#case-boxes')
     // this._draftSelect(authorState.userid, advanced);
-    document.getElementsByClassName('buttons-container').length > 0
-      ? MessageBus.ext.subscribe('control/dhtml/ready', this._draftCategoryCasesSelect) : this._draftSelect(advanced)
+    // document.getElementsByClassName('buttons-container').length > 0
+    //   ? MessageBus.ext.subscribe('control/dhtml/ready', this._draftCategoryCasesSelect) : this._draftSelect(advanced)
+    MessageBus.ext.subscribe('control/dhtml/ready', this._draftCategoryCasesSelect)
   }
 
   async _draftSelect (advanced) {
@@ -78,7 +79,7 @@ class DraftManager {
   }
 
   async _draftCategoryCasesSelect (advanced) {
-    console.log('Drafting cases by category')
+    // console.log('Drafting cases by category')
     // const cases = await MessageBus.ext.request('data/case/*/list')
     // {user: userid});
 

diff --git a/src/adonisjs/public/author/js/template-case.js b/src/adonisjs/public/author/js/template-case.js
@@ -16,8 +16,8 @@ class TemplateToCase {
           document.querySelector('#template').value = _url.searchParams.get('template').replace(/__/ig, '/')
           document.querySelector('#category').value = _url.searchParams.get('category')
 
-          const params = new FormData(document.querySelector('form'))
-
+          const params = new FormData(document.querySelector('#create-case-form'))
+          console.log(params);
           console.log(params.get('template'));
           /*
           // params.set('template', _url.searchParams.get('template').replace(/__/ig, "/"))

diff --git a/src/adonisjs/public/author/partials/header.html b/src/adonisjs/public/author/partials/header.html
@@ -1,15 +1,41 @@
 <div class="fixed-top">
+  <dcc-rest id="harena-login" bind="harena-login"></dcc-rest>
   <nav>
-      <div class="d-flex overflow-hidden pt-3 mr-4" id="harena-header">
-      <span class="inline-flex mr-4 rounded-md shadow ml-auto bg-white" id="header-login">
-        <div id="login-block" >
-          <a href="/login" class="inline-flex items-center px-4 py-2 text-base bg-white">
+      <div class="d-flex overflow-hidden pt-2 mr-4" id="harena-header">
+      <span class="inline-flex mr-4 rounded-md ml-auto " id="header-login">
+        <div id="login-block">
+          <!-- <a href="/login" class="inline-flex items-center px-4 py-2 text-base bg-white">
             Log in
-          </a>
+          </a> -->
+          <!-- <div class="dropdown"> -->
+            <button id="loginDropdownBtn" class="btn btn-light shadow text-primary pl-4 pt-1 dropdown-toggle " type="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+              Login
+            </button>
+            <form class="dropdown-menu p-4 mr-5">
+              <div class="form-group">
+                <label for="email">Email address</label>
+                <input type="email" class="form-control" id="email" name="email" placeholder="email@example.com">
+              </div>
+              <div class="form-group">
+                <label for="password">Password</label>
+                <input type="password" class="form-control" id="password" name="password" placeholder="Password">
+              </div>
+              <dcc-submit bind="submit-login" label="Login" xstyle="btn btn-outline-primary" connect="harena-login:service/request/post:submit">
+            </form>
+          <!-- </div> -->
         </div>
         <div id="logout-block" style="display: none;">
           <dcc-rest id="harena-logout" bind="harena-logout"></dcc-rest>
-          <dcc-submit xstyle="inline-flex items-center px-4 py-2 text-base bg-white text-primary" id="logout-button" bind="submit-logout" label="Logout" connect="harena-logout:service/request/post:submit">
+          <button id="logoutDropdownBtn" class="btn btn-light shadow text-primary pl-4 pt-1 dropdown-toggle " type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
+            Logout
+          </button>
+          <div class="dropdown-menu mr-5" aria-labelledby="logoutDropdownBtn">
+            <a class="dropdown-item" href="/user/settings">Change Password</a>
+            <div class="dropdown-divider"></div>
+
+            <dcc-submit xstyle="dropdown-item" id="logout-button" bind="submit-logout" label="Logout" connect="harena-logout:service/request/post:submit">
+
+            </div>
         </div>
       </span>
     </div>

diff --git a/src/adonisjs/public/author/partials/template-min.html b/src/adonisjs/public/author/partials/template-min.html
@@ -10,9 +10,9 @@
 
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
 
-  <script src="../lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
-  <script src="../lib/popper-1-15-0/popper.min.js"></script>
-  <script src="../lib/bootstrap-4.4.1/js/bootstrap.min.js"></script>
+  <script src="./lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
+  <script src="./lib/popper-1-15-0/popper.min.js"></script>
+  <script src="./lib/bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>
 
   <script src="../config/config.js"></script>
   <script src="../infra/bus.js"></script>

diff --git a/src/adonisjs/public/dccs/components/dcc-visual.js b/src/adonisjs/public/dccs/components/dcc-visual.js
@@ -53,14 +53,19 @@ class DCCVisual extends DCCBase {
   _activateAuthorPresentation (presentation, listener) {
     presentation.style.cursor = 'pointer'
     presentation.dccid = this.id
-    // presentation.addEventListener('click', listener.selectListener)
-    /*
-    console.log('=== mouse over')
-    console.log(listener)
-    */
     presentation.addEventListener('mouseover', listener.mouseoverListener)
   }
 
+  deactivateAuthor () {
+    if (this._presentation)
+      this._deactivateAuthorPresentation (this._presentation, this)
+  }
+
+  _deactivateAuthorPresentation (presentation, listener) {
+    presentation.removeEventListener('mouseover', listener.mouseoverListener)
+    presentation.style.cursor = 'default'
+  }
+
   hide () {
     if (this._presentationReady) { this._hideReady() } else { this._pendingHide = true }
   }
@@ -109,10 +114,7 @@ class DCCVisual extends DCCBase {
   }
 
   _editPresentation (presentation, listener) {
-    // presentation.removeEventListener('click', listener.selectListener)
-    presentation.removeEventListener('mouseover', listener.mouseoverListener)
-    // presentation.removeEventListener('mouseout', listener.mouseoutListener)
-    presentation.style.cursor = 'default'
+    this.deactivateAuthor()
     // check for a DCC inside a DCC
     if (presentation.tagName.toLowerCase().startsWith('dcc-')) {
       presentation.edit()
@@ -313,15 +315,16 @@ class DCCMultiVisual extends DCCVisual {
 
   checkActivateAuthor () {
     if (this.author) {
-      /*
-      console.log('=== check activate')
-      console.log(this._presentationSet)
-      */
       for (const pr of this._presentationSet) {
         this._activateAuthorPresentation(pr._presentation, pr) }
     }
   }
 
+  deactivateAuthor () {
+    for (const pr of this._presentationSet) {
+      this._deactivateAuthorPresentation(pr._presentation, pr) }
+  }
+
   _hideReady () {
     for (const pr of this._presentationSet) { pr._presentation.style.display = 'none' }
   }
@@ -444,10 +447,10 @@ class PresentationDCC {
   DCCVisual.selectedBorderStyle = '3px dashed #000000'
 
   DCCVisual.templateHTML =
-`<div style="position: relative; top: {top}px; left: {left}px; width: 75px; height: 50px; background: rgba(0, 0, 0, 0.5); text-align: left" id="panel-presentation">
-  <div id="bt-edit-element" style="width: 16px; height: 16px; display: inline-block; margin-left: 10px; margin-right: 10px; color: white">{edit}</div>
-  <div id="bt-expand-element" style="width: 16px; height: 16px; display: inline-block; color: white">{expand}</div>
+`<div style="position: relative; top: {top}px; left: {left}px; width: 45px; height: 50px; background: rgba(0, 0, 0, 0.5); text-align: left" id="panel-presentation">
+  <div id="bt-edit-element" style="width: 100%; height: 100%; padding: 5px; display: inline-block; color: white">{edit}</div>
 </div>`
+//  <div id="bt-expand-element" style="width: 16px; height: 16px; display: inline-block; color: white">{expand}</div>
 
   // pen https://fontawesome.com/icons/pen?style=solid
   DCCVisual.buttonEditSVG =

diff --git a/src/adonisjs/public/index.html b/src/adonisjs/public/index.html
@@ -10,12 +10,10 @@
 
   <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
   <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
-  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
-  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
 
-  <script src="lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
-  <script src="lib/popper-1-15-0/popper.min.js"></script>
-  <script src="lib/bootstrap-4.4.1/js/bootstrap.min.js"></script>
+  <script src="./lib/jquery-3-4-1/jquery-3.4.1.slim.min.js"></script>
+  <script src="./lib/popper-1-15-0/popper.min.js"></script>
+  <script src="./lib/bootstrap-4.4.1/js/bootstrap.bundle.min.js"></script>
 
   <script src="config/config.js"></script>
   <script src="infra/bus.js"></script>