Ember App without mixin dependency

components.create-issue\.js

import Component from '@ember/component';
import $ from 'jquery';
import { run } from '@ember/runloop';

export default Component.extend({

  classNames: ['create-issue-container'],
  
  didInsertElement(){
    
    this._super(...arguments);
    
    run.later(function() {
	    $('.create-issue-container input').focus();
    },100)
  },
  
  actions: {
  
    createTicket(){
		  
      let self = this;
      self.triggerAction('createIssue', self.bugtrackerService);
    },
    
    closeDialog(){

      let self = this;
      self.triggerAction('hideDialog', self.bugtrackerService);
    }
  }
  
});
  

components.issue-list\.js

import Component from '@ember/component';
import { get, set } from '@ember/object';

export default Component.extend({

  classNames: ['issue'],
  
  detail: '',

  hoveredOnIssue: false,
  
  mouseEnter(){
  	
    set(this, 'hoveredOnIssue', true);
  },
  
  mouseLeave(){
   
    set(this, 'hoveredOnIssue', false);
  },
  
  actions: {
    
    closeTicket(){
    	
      let self = this;
      self.triggerAction('closeIssue', self.issueDetail);
    },
    
    reopenTicket(){
     
      let self = this;
      self.triggerAction('reopenIssue', self.issueDetail);
    }
    
  }
  
});

controllers.application\.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';	// No I18N
import { set } from '@ember/object';

export default Controller.extend( {

  appName: 'Without Mixin',
  
  bugtracker: service(),
  
  actions: {
	 
    showIssueCreateDialog(){
      
      let self = this;
      
      set(self.bugtracker, 'showCreateIssueDialog', true);
    }
  }

});

services.bugtracker\.js

import Service from '@ember/service';
import { A } from '@ember/array';
import object, { get, set } from '@ember/object';

import BugManager from '../utils/bugmanager';

export default Service.extend({
  
  issueList: A(),
  
  newIssueObj: object.create({
  	issueTitle: '',
    isOpenIssue: true 
  }),
  
  showCreateIssueDialog: false,
  
  triggerUtilAction(actionName, params){
    
    BugManager[actionName](params);
  }
  
});

templates.application\.hbs

<div class={{if bugtracker.showCreateIssueDialog 'dimmer' ''}}>

<h1>Bug tracker </h1> ( Ember App without mixin dependency ) 

<br><br>
<div class='divider'></div>
<br>

All issues : {{bugtracker.issueList.length}}

<span class='create-issue' {{action 'showIssueCreateDialog'}}> + Create </span>

<br><br>
<div class='divider'></div>
<br><br>
	
  {{#each bugtracker.issueList as |issueObj| }}
      
      {{issue-list 
      	issueDetail=issueObj 
        triggerAction=bugtracker.triggerUtilAction }}   

	{{else}}
	
  	{{#unless bugtracker.showCreateIssueDialog}}	
		  <center class='no-issue'>	No issues! </center>
    {{/unless}}
  
  {{/each}}

</div>

	{{#if bugtracker.showCreateIssueDialog}}
	  {{create-issue 
    	newIssueObj=bugtracker.newIssueObj
      bugtrackerService=bugtracker
    	triggerAction=bugtracker.triggerUtilAction}}
	{{/if}}


{{outlet}}<br><br>





{{!-- #################### CSS START #################### --}}

<style>

		.create-issue {
        position: relative;
        left: 400px;
        color: darkgreen;
        border: 0.10px solid green;
        padding: 5px 8px 5px 8px;
    }
    
    .issue {
        border: 0.10px solid black;
        padding: 10px 0px 10px 20px;
        margin-bottom: 30px;
        border-radius: 5px;
    }

		.issue:hover {
	    background: aliceblue;
		}
    
		.issue b {
   	    padding: 10px 10px;
        margin-left: -20px;
        background: lightgrey;
        border-radius: 4px 0px 0px 4px;
        opacity: 0.5;
    }
    
    .issue-detail {
    	    margin-left: 20px;
    }
    
		.divider{
    	border-bottom: 0.5px solid rgba(0,0,0,.6);
    }
    
		.dimmer {
    	width: 1000px;
      height: 1000px;
	    justify-content: center;
      background-color: rgba(0,0,0,.6);
      z-index: 10000;
      user-select: none;
    }
    
		.create-issue-container{
      width: 500px;
      height: 195px;
      border: 0.10px solid black;
      z-index: 10000;
      background: white;
      position: fixed;
    	left: 50px;
    	top: 250px;
    }
    
    .create-issue-header {
    	font-size: 18px;
    	padding: 20px 0px 10px 20px;
    }
    
    .issue-name{
    		padding: 30px 0px 20px 20px;
    		margin-left: 15px;
    }
    
    .issue-name input{
      	width:325px;
        margin-left: 5px; 
				padding: 5px 2px;
			  display: inline-block;
			  border: 1px solid #ccc;
			  border-radius: 4px;
			  box-sizing: border-box;
    }
    
    i.close {
        position: absolute;
        right: 23px;
        color: red;
        cursor: pointer;
    }

    .create-issue-button {
        position: relative;
        left: 400px;
        top:10px;
        color: darkgreen;
        border: 0.10px solid green;
        border-radius: 2px;
        padding: 5px 15px 5px 15px;
        background: #3595375e;
        cursor: pointer;
    }
    
    .create-issue:hover {
      background: #3595375e;
      cursor: pointer;
    }
    
    .dialog-close-icon {
    	 position: relative;
       left: 350px;
       font-size: 22px;
       cursor: pointer;
    }
    
    .no-issue {
      margin-top: 100px;
		}
</style>

{{!-- #################### CSS END #################### --}}

templates.components.create-issue\.hbs

<div class='create-issue-header'>	
	Create Issue 
  <span class='dialog-close-icon' title='Close' {{action 'closeDialog'}}>&times;</span> 
</div>
<hr>

<div class='issue-name'>Enter the issue  
	{{input value=newIssueObj.issueTitle escape-press=(action 'closeDialog') enter=(action 'createTicket')}} 
</div>

<span class='create-issue-button' {{action 'createTicket'}}> Create </span>

templates.components.issue-list\.hbs

{{#if issueDetail.isOpenIssue}}
	<b> Issue : </b> 
{{else}}
	<b class='closed'> Closed : </b> 
{{/if}}

<span class='issue-detail'> {{issueDetail.issueTitle}} </span> 

{{#if hoveredOnIssue}}
	
  {{#if issueDetail.isOpenIssue}}
    	<i class='close' {{action 'closeTicket'}}> Close </i>
  {{else}}
    	<i class='close' {{action 'reopenTicket'}}> Re-open </i>
  {{/if}}
  
{{/if}}

twiddle\.json

{
  "version": "0.17.1",
  "EmberENV": {
    "FEATURES": {},
    "_TEMPLATE_ONLY_GLIMMER_COMPONENTS": false,
    "_APPLICATION_TEMPLATE_WRAPPER": true,
    "_JQUERY_INTEGRATION": true
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.js",
    "ember": "3.18.1",
    "ember-template-compiler": "3.18.1",
    "ember-testing": "3.18.1"
  },
  "addons": {
    "@glimmer/component": "1.0.0"
  }
}

utils.bugmanager\.js

import object, { get, set } from '@ember/object';

export default object.create({
  
//   Show the Create issue dialog in UI
  
  showDialog(bugtrackerService){
    
    let self = this;
		set(bugtrackerService, 'showCreateIssueDialog', true);
  },
  
  
//   Hide the Create issue dialog from UI
  
  hideDialog(bugtrackerService){ 
    let self = this;
  
    set(bugtrackerService.newIssueObj, 'issueTitle', '');
    set(bugtrackerService, 'showCreateIssueDialog', false);
  },
  
  
//   Create an Issue and push it to the issue list & close the dialog.
  
  createIssue(bugtrackerService){ 
   
    let self = this,
        issueObj = object.create({
					issueTitle: bugtrackerService.newIssueObj.issueTitle,
          isOpenIssue: true
        });
    
    if ( bugtrackerService.newIssueObj.issueTitle ){
	   
      bugtrackerService.issueList.pushObject(issueObj);
    }
    
    self.hideDialog(bugtrackerService);
  },
  
  
  
// Change the issue status to Close
  
  closeIssue(issueObj){
    
    let self = this;
    set(issueObj, 'isOpenIssue', false);
  },
  
  
// Change the issue status to Re-open 
  
  reopenIssue(issueObj){
    
    let self = this;
    set(issueObj, 'isOpenIssue', true);
  }
  
  
});