Trying to implement Ember-DATA

app/adapters/task.js

@@ -0,0 +1,10 @@
+import RESTAdapter from '@ember-data/adapter/json-api';
+
+export default class TaskAdapter extends RESTAdapter {
+    host = "https://devploy.herokuapp.com";
+    pathForType() {
+        return 'data';
+    }
+
+
+}

app/components/auth/fields.hbs

@@ -1,5 +1,4 @@
 <div  class="flex flex-col w-1/3">
-    <h1 class="text-white">hey - {{this.model}}</h1>
     <div class="flex flex-col items-center justify-center my-3">
         <img class="h-10" src="/assets/zoho_logo.png" alt="">
     </div>
@@ -20,9 +19,11 @@
 
 
         <div class="flex justify-center">
-        <button class="pl-3.5 text-gray-200 mt-10 shadow-md rounded-full transform transition duration-100 hover:font-bold hover:scale-110 focus:outline-none bg-cliq-body-dark h-12 w-12">
-            <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
-        </button>
+        <LinkTo @route='home'>
+            <button class="pl-3.5 text-gray-200 mt-10 shadow-md rounded-full transform transition duration-100 hover:font-bold hover:scale-110 focus:outline-none bg-cliq-body-dark h-12 w-12">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
+            </button>
+        </LinkTo>
         </div>
 
         <div class="flex justify-center my-3">
@@ -33,4 +34,5 @@
             <h1 class="text-sm text-gray-400">New user ? <i {{ on 'click' this.authModeToggle.signupMode}} class="font-semibold cursor-pointer">sign up</i></h1>
             {{/if}}                        
         </div>
+
 </div>

app/components/details/popup.hbs

@@ -0,0 +1,6 @@
+<div class="absolute top-1/4 w-full {{if this.optionsPopup.show "flex" "hidden"}} justify-center bg-transparent ">
+     <div class="bg-gray-500 opacity-90 text-white flex justify-center items-center h-10 rounded-md w-2/5 ">
+        {{this.optionsPopup.popupNote}}
+        <span class="text-green-500 pl-3">✔</span>
+     </div>
+</div>

app/components/details/popup.js

@@ -0,0 +1,7 @@
+import Component from '@glimmer/component';
+import { inject } from '@ember/service';
+
+
+export default class DetailsPopupComponent extends Component {
+    @inject optionsPopup;    
+}

app/components/details/test-list-options.hbs

@@ -0,0 +1,9 @@
+<div class="relative" {{on 'click' this.menuOptionToggle}}>
+    <svg  class="w-4 h-4 text-gray-400 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
+
+    <div class="bg-gray-100 p-2 z-10 absolute {{if this.open "" "hidden"}}">
+        <p class="cursor-pointer hover:bg-gray-200 px-0.5 rounded-sm" {{on 'click' this.optionsPopup.edit}}>edit</p>
+        <p class="cursor-pointer hover:bg-gray-200 px-0.5 rounded-sm" {{on 'click' this.optionsPopup.pause}}>pause</p>
+        <p class="cursor-pointer hover:bg-gray-200 px-0.5 rounded-sm" {{on 'click' this.optionsPopup.cancel}}>cancel</p>
+    </div>
+</div>

app/components/details/test-list-options.js

@@ -0,0 +1,17 @@
+import Component from '@glimmer/component';
+import {tracked} from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { inject } from '@ember/service';
+
+
+export default class DetailsTestListOptionsComponent extends Component {
+
+    @inject optionsPopup;    
+
+    @tracked open = false;
+
+    @action menuOptionToggle(){
+        this.open = !this.open;
+    }
+
+}

app/components/details/tests.hbs

@@ -0,0 +1,62 @@
+<div class="relative">
+
+     <Details::Popup />
+
+    {{#each @test as |test_type|}}
+    <div class="flex items-center justify-between mt-5 mb-2">
+        <div class="flex items-center justify-between">
+            <svg class="w-3 h-3 text-gray-600 mr-1" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+            <h1 class="font-bold font-nunito">{{test_type.title}}</h1>
+        </div>
+        {{!-- run and setting div --}}
+        <div class="flex bg-gray-300 rounded-sm" style="padding: .5px;">
+            <div class="w-max px-1.5 text-xs rounded-sm  text-green-500 bg-white cursor-pointer font-nunito font-semibold">
+                Run
+            </div>
+            <div class="bg-white px-2 ml-0.5 cursor-pointer">
+                <svg class="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z"></path><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"></path></svg>
+            </div>
+
+        </div>
+    </div>
+
+    <div class=" ml-4">
+        {{#each test_type.test as |test_item|}}
+        <div class=" grid sm:grid-flow-col grid-cols-2 sm:grid-cols-7 p-0.5">
+            <div class="task-detail-item"> <p class="text-cyan-dark font-semibold text-xs flex items-center pl-3 h-full">{{test_item.id}}</p> </div>
+            <div class="task-detail-item "> <p class="w-max h-max rounded font-semibold text-xs text-gray-700 bg-sky-blue px-2">{{test_item.branch}}</p> </div>
+
+            {{#if (eq test_item.status "passed")}}
+            <div class="col-span-1 sm:col-span-1 bg-gray-50 p-1 flex items-center text-xs font-semibold text-green-500"> <p>Tests {{test_item.status}}</p> </div>
+            {{else}}
+            <div class="col-span-1 sm:col-span-1 bg-gray-50 p-1 flex items-center text-xs font-semibold text-red-600"> <p>Tests {{test_item.status}}</p> </div>
+            {{/if}}
+
+
+            <div class="task-detail-item text-cyan-darker font-semibold font-nunito"> <p>{{test_item.creator}}</p> </div>
+            <div class="task-detail-item text-gray-500"> <p>{{test_item.platform}}</p> </div>
+            <div class="bg-gray-50 p-1 text-xs flex items-center sm:col-span-1 text-gray-500 font-semibold"> <p>{{test_item.toc}}</p> </div>
+            <div class="bg-gray-50 p-1 flex items-center justify-around sm:col-span-1 col-span-2" >
+                <svg class="w-4 h-4 text-gray-400 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 7v10c0 2.21 3.582 4 8 4s8-1.79 8-4V7M4 7c0 2.21 3.582 4 8 4s8-1.79 8-4M4 7c0-2.21 3.582-4 8-4s8 1.79 8 4m0 5c0 2.21-3.582 4-8 4s-8-1.79-8-4"></path></svg>
+
+                <Details::TestListOptions/>
+                {{!-- <div class="relative">
+                    <svg  class="w-4 h-4 text-gray-400 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z"></path></svg>
+
+                    <div class="bg-red-100 z-10 absolute">
+                        <p>pause</p>
+                        <p>edit</p>
+                        <p>cancel</p>
+                    </div>
+                </div> --}}
+
+
+            </div>
+
+
+        </div>
+        {{/each}}
+
+    </div>
+    {{/each}}
+</div>

app/components/details/tests.js

@@ -0,0 +1,14 @@
+import Component from '@glimmer/component';
+import { action } from '@ember/object';
+export default class DetailsTestsComponent extends Component {
+    @action async loading(){
+        console.log("loading check")
+    }
+
+    // get obj()
+    // {
+    //     let obj = this.args.test;
+    //     console.log(obj)
+    //     return obj[0].title;
+    // }
+}

app/components/home/layout.hbs

@@ -1,3 +1,3 @@
-<div class="h-90vh p-2" {{on 'click' this.toggle}}>
+<div class="h-full pt-0.5 pb-2 px-2" {{on 'click' this.toggle}}>
 {{yield}}
 </div>

app/components/home/left.hbs

@@ -1,5 +1,22 @@
 <div>
-    <h1 class="text-lg my-10 px-3 font-semibold">LIST OF THE TASKS GOES HERES</h1>
-    <Lorem />
+    <div class="flex items-center">
+        <svg class="w-4 h-4 font-bold" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
+        <h1 class="text-base my-5 pl-1 font-nunito font-bold text-gray-700">PROJECTS</h1>
+
+    </div>
+
+    {{#each @model as |task|}}
+    <div>
+        <LinkTo @route="home.details" @model= {{ task }} @activeClass="project-active-item">
+            <div class="py-1 px-3 rounded-md hover:bg-gray-100 flex items-center cursor-pointer transform transition duration-200 hover:translate-x-0.5">
+                <svg class="w-5 h-5 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M20 7l-8-4-8 4m16 0l-8 4m8-4v10l-8 4m0-10L4 7m8 4v10M4 7v10l8 4"></path></svg>
+                <h1> {{task.title}}</h1>            
+            </div>
+
+            {{!-- <h1>{{task.desc}}</h1> --}}
+        </LinkTo>
+    </div>        
+    {{/each}}
     {{yield}}
+
 </div>

app/components/home/right.hbs

@@ -4,12 +4,13 @@
     <div class="ml-10">
         <h1 class="text-base font-semibold">Features and Pages done</h1>
         <ul class="mb-10">
+            <li>✔ auth page</li>
             <li>✔ home page</li>
+            <li>✔ Tasks-details page</li>
             <li>✔ contact page</li>
             <li>✔ about page</li>
             <li>✔ 404 page</li>
         </ul>
     </div>
-    <Lorem />
     {{yield}}
 </div>

app/components/search-box.hbs

@@ -1,9 +1,9 @@
 <div class=" m-2 flex justify-between items-center flex-grow">
     <div>
-        <Input class="ml-4 px-4 py-1 outline-none rounded-full border-gray-300 border-2 h-8 w-full" placeholder="search for tasks" @value={{this.query}} @enter={{this.print}} />
+        <Input class="ml-4 px-4 py-1 outline-none rounded-full border-gray-300 border-1 bg-gray-100 h-8 w-full" placeholder="search for tasks" @value={{this.query}} @enter={{this.print}} />
     </div>
     <div class="mx-5">
-        <svg class="w-6 h-6 text-gray-400 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
+        <svg class="w-6 h-6 text-gray-500 cursor-pointer" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z"></path></svg>
     </div>
 </div>
 

app/components/site-header.hbs

@@ -1,11 +1,11 @@
   {{!-- header -begin --}}
-  <div class="menu bg-headerbg sticky top-0"> 
+  <div class="menu bg-headerbg sticky top-0 z-20"> 
 
     <div class="md:flex">
       <div class="flex flex-grow md:flex-none justify-between bg-darkHeaderBg py-1.5 px-5">
-      <div class="flex items-center opacity-95">
+      <div class="flex items-center opacity-95 md:h-7">
       {{#link-to "index"}}
-          <h1 class="rounded-full text-gray-200 hover:text-gray-100 transform hover:scale-95 py-1 px-4 overflow-hidden text-lg font-bold font-nunito bg-headerbg">Devploy</h1>
+          <h1 class="rounded-full text-gray-200 hover:text-gray-100 transform hover:scale-95 py-1 px-4 overflow-hidden text-sm font-semibold font-nunito bg-headerbg">EMS Testing Automation</h1>
       {{/link-to}}      
       </div>   
 
@@ -52,6 +52,14 @@
                     Signup
                 {{/link-to}}
             </li>
+
+            <div class="flex justify-center">
+                <div class="p-1 mt-2 sm:mt-0 sm:ml-7 h-7 w-7 bg-headerbg rounded-full transform transition duration-100 hover:scale-110 cursor-pointer text-gray-400 hover:text-white">
+                <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"></path></svg>
+            </div>
+            </div>
+
+
             </ul>
         </div>
 

app/controllers/auth.js

@@ -0,0 +1,5 @@
+import Controller from '@ember/controller';
+// import { inject } from '@ember/service';
+export default class AuthController extends Controller {
+    // @inject authModeToggle;
+}

app/models/task.js

@@ -0,0 +1,8 @@
+import Model, { attr } from '@ember-data/model';
+
+export default class TaskModel extends Model {
+    @attr title;
+    @attr desc;
+    // @attr branches;
+    // @attr tests;
+}

app/models/test.js

@@ -0,0 +1,6 @@
+import Model, { attr,belongsTo } from '@ember-data/model';
+
+export default class TestModel extends Model {
+    // @belongsTo('task') tasks;
+    // @attr
+}

app/router.js

@@ -6,12 +6,19 @@ export default class Router extends EmberRouter {
   rootURL = config.rootURL;
 }
 
-Router.map(function () {  
+Router.map(function () {
   this.route('auth');
   this.route('home', function() {
-    this.route('right');
+    // here you can even remove the "right" from the right/:right_id
+    //  but, then should give the url as "home/<model or id>" in the browser 
+    this.route('details', {path : 'details/:details_id'});
+    this.route('loading');
   });
   this.route('about');
   this.route('contact');
+  this.route('loading');
   this.route('page-not-found', { path: '/*wildcard' });
+
+  this.route('error');
+  this.route('new-task');
 });

app/routes/error.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class ErrorRoute extends Route {
+}

app/routes/home.js

@@ -1,18 +1,20 @@
 import Route from '@ember/routing/route';
+import { action } from '@ember/object';
 
-export default class HomeRoute extends Route {
 
-  //  PAssing another model not working !!!!!! 
+export default class HomeRoute extends Route {
 
-  // usermodel() {
-  //   return {
-  //           title : "hmd",
-  //           customDescription : "formidable"
-  //         }
-  // }
+//   @action async loading(){
+//     console.log("loading check - home")
+// }
 
   async model() {
-    var tem =  await fetch("https://devploy.herokuapp.com/tasks").then((k) => k.json());
-    return {tem};
+    var modelData =  await fetch("https://devploy.herokuapp.com/tasks").then((k) => k.json());
+    // var modelData = await this.store.findAll('task');
+    var {data} = modelData;
+
+    console.log(modelData);
+    console.log(data);
+    return data;
   }
 }

app/routes/home/details.js

@@ -0,0 +1,17 @@
+import Route from '@ember/routing/route';
+
+export default class HomeDetailsRoute extends Route {
+
+    async model(params){
+        // console.log(params);
+        var list =  await fetch("https://devploy.herokuapp.com/tasks").then((k) => k.json());
+        // console.log(list);
+        for(var project of list.data){
+            // console.log(project);
+            if(project.id==params.details_id){
+                console.log(project);
+                return project;
+            }
+        }
+    }
+}

app/routes/home/index.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class HomeIndexRoute extends Route {
+}

app/routes/home/loading.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class HomeLoadingRoute extends Route {
+}

app/routes/index.js

@@ -2,6 +2,6 @@ import Route from '@ember/routing/route';
 
 export default class IndexRoute extends Route {
     beforeModel(){
-        this.replaceWith('home');
+        this.replaceWith('auth');
     }
 }

app/routes/loading.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class LoadingRoute extends Route {
+}

app/routes/new-task.js

@@ -0,0 +1,4 @@
+import Route from '@ember/routing/route';
+
+export default class NewTaskRoute extends Route {
+}