++ Added "Projects" (step 1b)

src/components/projects/SingleProject/SingleProject.scss

@@ -0,0 +1,413 @@
+
+
+$colcompleted: #a2a2a2;
+$heightitem: 32px;
+$heightothers: 32px;
+$heightBtn: 100%;
+$heightcounter: 26px;
+$heightdescr: 20px;
+
+.flex-item{
+   // background-color: #d5e2eb;
+  padding: 0px;
+  margin: 1px;
+  margin-left: 3px;
+  margin-right: 3px;
+  color: #000;
+  font-size: 1rem;
+  height: $heightBtn;
+  line-height: $heightBtn;
+  vertical-align: middle;
+  //flex: 0 0 100%;
+}
+
+
+.flex-container2 {
+  flex-flow: row wrap;
+  justify-content: space-between;
+  margin: 0px 1px 0px 1px;  // top right bottom left
+}
+
+// Set visibility: visible to the icon menu of pos-item-popover
+.flex-container2:hover .pos-item-popover, .flex-container2:hover .priority-item-popover{
+//.flex-container2:hover .pos-item-popover {
+  background-color: rgba(230, 230, 230, 0.8);
+  display: inline-block;
+  transition: all ease-in-out .3s;
+}
+
+.comp_selected {
+  display: inline-block !important;
+}
+
+.flex-container2:hover{
+  background-color: rgba(230, 230, 230, 0.8);
+}
+
+.rowselected {
+  border-width: 1px 0px 1px 0px;
+  border-style: solid;
+  border-color: rgba(49, 68, 240, 0.6);
+  background-color: rgba(160, 174, 255, 0.35) !important;
+}
+
+
+.btn-item {
+  max-width: 24px;
+}
+
+.counter-item {
+  margin: auto auto auto 2px;
+  padding: 2px;
+  vertical-align: middle;
+  text-align: left;
+  font-size: 1.10rem;
+  //color: blue !important;
+
+  //order: 2;
+  //height: 24px;
+  //line-height: 24px; /* same as height! */
+}
+
+.pos-item {
+  max-width: 24px;
+  min-width: 26px;
+  margin-left: 1px;
+  margin-right: 1px;
+  padding-left: 1px;
+  padding-right: 1px;
+  margin: 0px;
+  padding-top: 0px;
+  padding-bottom: 0px;
+  //height: $heightitem;
+  line-height: $heightitem;
+  min-height: $heightitem;
+  text-align: center;
+  // background-color: #ff4081;
+  font-size: 1rem;
+  order: 2;
+  flex: 1;
+
+}
+
+
+
+.titleLista-item {
+  max-width: 92px;
+  min-width: 92px;
+  margin: 0 auto;
+  height: $heightitem;
+  line-height: $heightitem;
+  text-align: center;
+  // background-color: #ff4081;
+  font-size: 1rem;
+  font-weight: bold;
+}
+
+
+.pos-item-popover{
+  max-width: 24px;
+  min-width: 24px;
+  padding: 0px;
+  text-align: center;
+  vertical-align: middle;
+  display: block;
+  @media screen and (min-width: 600px) {
+    display: none;
+  }
+  color: #939393;
+  height: $heightitem;
+  line-height: $heightitem;
+  //visibility: hidden;
+}
+
+//.q-menu.animate-scale {
+//  animation: none;
+//}
+
+.pos-item:hover, .pos-item-popover_cursor:hover {
+  cursor: grab;
+}
+
+.priority-item-popover {
+  max-width: 24px;
+  min-width: 24px;
+  padding: 0px;
+  text-align: center;
+  vertical-align: middle;
+  display: none;
+  height: 100%;
+  color: #777;
+}
+
+.completed-item-popover {
+  max-width: 24px;
+  min-width: 24px;
+  padding: 0px;
+  text-align: center;
+  vertical-align: middle;
+  display: inline-block;
+  height: $heightitem;
+  line-height: $heightitem;
+  color: #777;
+}
+
+.priority-item {
+  max-width: 24px;
+  min-width: 24px;
+}
+
+.completed-item {
+  max-width: 24px;
+  min-width: 24px;
+  height: $heightitem;
+  line-height: $heightitem;
+}
+
+.progress-item {
+  margin: 1px;
+  padding: 2px;
+  padding-top: 4px;
+  padding-bottom: 4px;
+  max-width: 36px;
+  min-width: 32px;
+  flex: 1;
+  order: 1;
+}
+
+.progrbar-item {
+  //height: 10px
+  padding-top: 7px;
+}
+
+.percProgress {
+  padding-top: 3px;
+  color: #888;
+  vertical-align: middle;
+  text-align: center;
+  //line-height: $heightitem;
+}
+
+.editProgress{
+  //height: 20px;
+}
+
+.colProgress {
+}
+
+.lowperc {
+  color: red;
+}
+.medperc {
+  color: blue;
+}
+.highperc {
+  color: green;
+}
+
+.percompleted {
+  color: $colcompleted
+}
+
+.myexpired {
+  padding-top: 5px;
+  padding-bottom: 3px;
+  font-size: 0.85rem;
+  vertical-align: middle;
+}
+
+.data-item {
+  font-size: 0.85rem;
+  max-width: 78px;
+  @media (max-width: 600px) {
+    max-width: 22px;
+  }
+
+  //min-width: 100px;
+  //display: flex;
+  //visibility: initial;
+  margin-right: 3px;
+  color: #585858;
+  order: 1;
+  flex: 1;
+  height: $heightitem;
+  line-height: $heightitem;
+  padding-left: 2px;
+  padding-right: 0px;
+
+  //height: $heightBtn;
+  //line-height: $heightBtn;
+}
+
+
+.data_string {
+  @media (max-width: 600px) {
+    display: none;
+  }
+
+}
+
+.data-item .q-input-target{
+  color:red !important;
+}
+
+
+/*
+@media screen and (max-width: 600px) {
+  .data-item {
+    display: none;
+    visibility: hidden;
+    content: "";
+  }
+}
+*/
+
+.divdescrTot, .divdescrTot > div > div > div > div > textarea {
+  font-size: 1rem;
+}
+
+.divdescrTot {
+  font-size: 1rem;
+  display: table;
+  flex: 1;
+  height:  $heightitem;
+  vertical-align: middle;
+}
+
+.div_descr, .div_descr_edit {
+  margin: auto auto auto 0px;
+  //padding: 2px;
+  min-width: 100px;
+  text-align: left;
+  color: blue !important;
+  overflow: hidden;
+
+  align-items: center;
+
+  vertical-align: middle;
+  line-height: 120%;
+
+  //background-color: #d50000;
+
+  //order: 2;
+
+  &.hide {
+    display: none !important;
+    visibility: hidden;
+  }
+  &.show {
+    visibility: visible;
+  }
+}
+
+.div_descr {
+  display: -webkit-box;
+  max-height: 45px;
+
+}
+
+
+.div_descr_edit {
+  //display: block;
+  max-height: 90px;
+  //line-height: 120%;
+  //max-height: 90px;
+  line-height: $heightitem;
+}
+
+.div_descr:hover {
+  //border-width: 1px 0px 1px 0px;
+  border-color: rgba(125, 255, 125, 0.5);
+  //padding: 1px;
+}
+
+
+.mycols{
+  margin: 1px;
+  padding: 2px;
+  //width: 40px;
+  // border-color: #8a8484;
+  // border-style: outset;
+  margin: auto;
+  // flex-grow: 1;
+}
+
+
+
+.mycols:hover{
+
+}
+
+.mybtn{
+  width: 18px;
+  height: 18px;
+}
+
+.icon_completed {
+  position: relative;
+  transform: translateY(0%);
+}
+
+.mydescr{
+}
+
+
+.icon_completed {
+  color: rgb(178, 235, 225);
+}
+
+.status_completed {
+  color: $colcompleted !important;
+}
+
+.menuTitlePriority {
+  background-color: blue;
+  color:white;
+  padding: 2px;
+  margin: 2px;
+  font-weight: bold;
+}
+
+.test{
+  color: fuchsia;
+  &.mio1{
+
+    background-color: red;
+  }
+}
+
+.after_textarea {
+  display: none;
+  visibility: hidden;
+}
+
+.after_textarea:hover {
+  visibility: visible;
+}
+
+
+
+/*
+.container {
+  background-color: #ccc;
+  padding: 10px;
+
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+
+}
+
+.item {
+  background-color: red;
+  padding: 10px;
+  color: white;
+
+}
+.i3{
+  order: 1;
+  flex: 1;
+}
+*/
+
+

src/components/projects/SingleProject/SingleProject.ts

@@ -0,0 +1,458 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+import { UserStore } from '@modules'
+import { tools } from '../../../store/Modules/tools'
+
+import { IProject } from '../../../model/index'
+
+import { SubMenusProj } from '../SubMenusProj'
+
+import { date } from 'quasar'
+import { askConfirm } from '../../../classes/routinestd'
+
+@Component({
+  components: { SubMenusProj },
+  name: 'SingleProject'
+})
+export default class SingleProject extends Vue {
+  public selectPriority: [] = []
+  public menuPopupProj: any[] = []
+  public classDescr: string = ''
+  public classDescrEdit: string = ''
+  public classExpiring: string = 'flex-item data-item shadow-1'
+  public classExpiringEx: string = ''
+  public iconPriority: string = ''
+  public classRow: string = ''
+  public sel: boolean = false
+  public attivaEdit: boolean = false
+  public inEdit: boolean = false
+  public precDescr: string = ''
+  public percProgress: string = 'percProgress'
+  public colProgress: string = 'blue'
+  public percentageProgress: number = 0
+  public itemprojectPrec: IProject
+  public clButtPopover: string = 'pos-item-popover'
+
+  public $q: any
+
+  @Prop({ required: true }) public itemproject: IProject
+
+  // @Watch('itemproject.completed') valueChanged() {
+  //   this.watchupdate('completed')
+  // }
+
+  @Watch('itemproject.enableExpiring') public valueChanged4() {
+    this.watchupdate('enableExpiring')
+  }
+
+  @Watch('itemproject.expiring_at') public valueChanged2() {
+    this.watchupdate('expiring_at')
+  }
+
+  @Watch('itemproject.descr') public valueChanged5() {
+    this.precDescr = this.itemproject.descr
+  }
+
+  @Watch('itemproject.progressCalc') public valueChanged6() {
+    console.log('itemproject.progressCalc')
+    this.updateClasses()
+
+    console.log('this.percentageProgress', this.percentageProgress, 'this.itemproject.progressCalc', this.itemproject.progressCalc)
+    this.watchupdate('progressCalc')
+  }
+
+/*
+  public dateToYYYYMMDD(date) {
+    // may have timezone caveats https://stackoverflow.com/a/29774197/1850609
+    return date && date.toISOString().split('T')[0]
+  }
+*/
+
+  // Computed:
+  get isSel() {
+    return this.sel
+  }
+
+  public isProject() {
+    return this.isProjectByElem(this.itemproject)
+  }
+
+  public isProjectByElem(elem) {
+    return elem.descr.slice(-1) !== ':'
+  }
+
+  public watchupdate(field = '') {
+    this.$emit('eventupdate', {myitem: this.itemproject, field } )
+    this.updateicon()
+  }
+
+  public updateClasses() {
+    // this.classCompleted = 'completed-item'
+    this.classDescr = 'flex-item div_descr show donotdrag'
+    this.classDescrEdit = 'flex-item div_descr_edit donotdrag'
+    if (!this.isProject()) {
+      this.classDescr += ' titleLista-item'
+      this.classDescrEdit += ' titleLista-item'
+    }
+
+    if (this.itemproject.progressCalc > 100)
+      this.itemproject.progressCalc = 100
+
+    this.classExpiring = 'flex-item data-item shadow-1'
+    this.classExpiringEx = ''
+
+    this.percentageProgress = this.itemproject.progressCalc
+
+    this.percProgress = 'percProgress'
+
+    let mycolcl = ''
+    if (this.itemproject.progressCalc < 33) {
+      mycolcl = ' lowperc'
+    } else if (this.itemproject.progressCalc < 66) {
+      mycolcl = ' medperc'
+    } else {
+      mycolcl = ' highperc'
+    }
+
+    this.colProgress = mycolcl
+
+    this.percProgress += mycolcl
+
+    this.clButtPopover = this.sel ? 'pos-item-popover comp_selected' : 'pos-item-popover'
+
+    if (!this.itemproject.completed) {
+      this.clButtPopover += ' pos-item-popover_cursor'
+    }
+
+
+    // this.getinputdescr = 'inputdescr' + this.itemproject._id
+
+    // console.log('classDescrEdit = ', this.classDescrEdit)
+    // console.log('classDescr', this.classDescr)
+
+    // console.log('UserStore.state.lang', UserStore.state.lang)
+    if (this.isProject()) {
+      this.menuPopupProj = tools.menuPopupProj[UserStore.state.lang]
+    }
+    else {
+      this.menuPopupProj = []
+      this.menuPopupProj.push(tools.menuPopupProj[UserStore.state.lang][tools.INDEX_MENU_DELETE])
+    }
+
+  }
+
+  public getstrDate(mytimestamp) {
+    return date.formatDate(mytimestamp, 'DD-MM-YY')
+  }
+
+  public created() {
+    this.precDescr = this.itemproject.descr
+    this.updateicon()
+
+    this.updateClasses()
+
+    this.selectPriority = tools.selectPriority[UserStore.state.lang]
+
+  }
+
+  public getClassRow() {
+    return 'row flex-container2 ' + this.classRow
+  }
+
+  public clickRiga(clickmenu: boolean = false) {
+    // console.log('CLICK RIGA ************')
+
+    if (!this.sel) {
+      if (!this.inEdit) {
+        this.attivaEdit = true
+        this.$emit('deselectAllRows', this.itemproject, true)
+
+        if (!this.sel) {
+          this.selectRiga()
+        } else {
+          this.deselectRiga()
+        }
+      }
+    }
+  }
+
+  public selectRiga() {
+    // console.log('selectRiga', this.itemproject.descr)
+    this.sel = true
+    this.classRow = 'rowselected'
+    this.updateClasses()
+    // console.log('FINE selectRiga', this.itemproject.descr)
+  }
+
+  public deselectRiga() {
+    // console.log('DeselectRiga', this.itemproject.descr)
+    this.sel = false
+    this.classRow = ''
+    this.inEdit = false
+    this.attivaEdit = false
+    this.updateClasses()
+  }
+
+  public deselectAndExitEdit() {
+    this.deselectRiga()
+    this.exitEdit()
+  }
+
+  public mouseUp() {
+    if (!this.inEdit) {
+      if (this.sel) {
+        this.selectRiga()
+      } else {
+        this.deselectRiga()
+      }
+    }
+  }
+
+  public clickRow() {
+    this.clickRiga()
+  }
+
+  public editProject() {
+    console.log('INIZIO - editProject')
+    if (this.attivaEdit) {
+      this.$emit('click')
+      this.precDescr = this.itemproject.descr
+      this.inEdit = true
+      if (!this.sel) {
+        this.selectRiga()
+      }
+      else {
+        this.updateClasses()
+      }
+
+      this.faiFocus('inputdescr')
+    }
+    // console.log('FINE - editProject')
+  }
+
+  public faiFocus(elem, isparent: boolean = false) {
+    setTimeout(() => {
+      let theField = null
+      if (isparent) {
+        theField = this.$parent.$parent.$parent.$parent.$refs[elem] as HTMLInputElement
+      }
+      else {
+        theField = this.$refs[elem] as HTMLInputElement
+      }
+
+      if (!!theField) {
+        theField.focus()
+      }
+      // console.log('focus()')
+    }, 100)
+  }
+
+  public exitEdit(singola: boolean = false) {
+    if (this.inEdit) {
+      if (this.precDescr !== this.itemproject.descr) {
+        this.updateTodo()
+      }
+      // console.log('exitEdit')
+      this.inEdit = false
+      this.attivaEdit = false
+      this.updateClasses()
+      this.$emit('deselectAllRows', this.itemproject, false, singola)
+    }
+  }
+
+  public keyDownRow(e) {
+    console.log('keyDownRow')
+    // Delete Key or Backspage
+    if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
+      e.preventDefault()
+      this.deselectRiga()
+      this.clickMenu(tools.MenuAction.DELETE)
+        .then(() => {
+          this.faiFocus('insertTask', true)
+          return
+        })
+    }
+
+  }
+
+  public keyDownArea(e) {
+    console.log('keyDownArea')
+/*
+    if ((e.key === 'ArrowUp') && !e.shiftKey) {
+      e.key = 'Tab'
+      e.shiftKey = true
+    }
+
+    if ((e.key === 'ArrowDown') && !e.shiftKey) {
+      let nextInput = inputs.get(inputs.index(this) + 1)
+      if (nextInput) {
+        nextInput.focus()
+      }
+    }
+*/
+    // Delete Key or Backspage
+    if (((e.keyCode === 8) || (e.keyCode === 46)) && (this.precDescr === '') && !e.shiftKey) {
+      e.preventDefault()
+      this.deselectRiga()
+      this.clickMenu(tools.MenuAction.DELETE)
+        .then(() => {
+          this.faiFocus('insertTask', true)
+          return
+        })
+    }
+
+    if (((e.key === 'Enter') || (e.key === 'Tab')) && !e.shiftKey) {
+      this.updateTodo()
+
+      if ((e.key === 'Tab') && !e.shiftKey) {
+
+      } else {
+        e.preventDefault()
+        this.deselectRiga()
+        this.faiFocus('insertTask', false)
+      }
+    }
+
+    // console.log('keyDownArea', e)
+    if (e.key === 'Escape') {
+      this.deselectRiga()
+      // this.faiFocus('insertTask', true)
+      console.log('LOAD this.precDescr', this.precDescr)
+      this.precDescr = this.itemproject.descr
+    }
+
+  }
+
+  public updateTodo() {
+    if (this.itemproject.descr === this.precDescr) {
+      return
+    }
+
+    this.itemproject.descr = this.precDescr
+    console.log('updateTodo', this.precDescr, this.itemproject.descr)
+    console.log('itemproject', this.itemproject)
+    console.log('Prec:', this.itemprojectPrec)
+
+    this.watchupdate('descr')
+    this.inEdit = false
+    this.attivaEdit = false
+    // this.precDescr = this.itemproject.descr
+    this.updateClasses()
+  }
+
+  public aggiornaProgress(value, initialval){
+    if (value !== initialval) {
+      this.itemproject.progressCalc = value
+      this.updatedata('progressCalc')
+      this.deselectAndExitEdit()
+    }
+  }
+
+  public setCompleted() {
+    // console.log('setCompleted')
+    this.itemproject.completed = !this.itemproject.completed
+
+    this.updateicon()
+
+    this.updatedata('completed')
+
+    this.deselectAndExitEdit()
+  }
+
+  public updatedata(field: string) {
+    // const myitem = tools.jsonCopy(this.itemproject)
+    console.log('calling this.$emit(eventupdate)', this.itemproject)
+    this.$emit('eventupdate', { myitem: this.itemproject, field } )
+  }
+
+  public updateicon() {
+    // console.log('updateicon')
+
+    if (this.itemproject.priority === tools.Priority.PRIORITY_HIGH) {
+      this.iconPriority = 'expand_less'
+    }  // expand_less
+    else if (this.itemproject.priority === tools.Priority.PRIORITY_NORMAL) {
+      this.iconPriority = 'remove'
+ }
+    else if (this.itemproject.priority === tools.Priority.PRIORITY_LOW) {
+      this.iconPriority = 'expand_more'
+ }  // expand_more
+
+    this.updateClasses()
+  }
+
+  public removeitem(id) {
+    this.$emit('deleteItem', id)
+  }
+
+  public enableExpiring() {
+    this.itemproject.enableExpiring = !this.itemproject.enableExpiring
+
+  }
+
+  public async clickMenu(action) {
+    console.log('click menu: ', action)
+    if (action === tools.MenuAction.DELETE) {
+      return await this.askConfirmDelete()
+    } else if (action === tools.MenuAction.TOGGLE_EXPIRING) {
+      return await this.enableExpiring()
+    } else if (action === tools.MenuAction.COMPLETED) {
+      return await this.setCompleted()
+    } else if (action === tools.MenuAction.PROGRESS_BAR) {
+      return await this.updatedata('progressCalc')
+    } else if (action === 0) {
+      this.deselectAndExitEdit()
+    }
+
+  }
+
+  public setPriority(newpriority) {
+
+    if (this.itemproject.priority !== newpriority) {
+      this.itemproject.priority = newpriority
+
+      this.updatedata('priority')
+
+      this.updateicon()
+    }
+
+  }
+
+  public async askConfirmDelete() {
+    const deletestr = this.$t('dialog.delete')
+    const cancelstr = this.$t('dialog.cancel')
+
+    const msg = this.$t('dialog.msg.deleteTask', {mytodo : this.itemproject.descr })
+
+    this.$q.dialog({
+      cancel: {
+        label: cancelstr
+      },
+      message: msg,
+      ok: {
+        label: deletestr,
+        push: true
+      },
+      title: this.$t('dialog.msg.titledeleteTask')
+    }).onOk(() => {
+      console.log('OK')
+      this.removeitem(this.itemproject._id)
+    }).onCancel(() => {
+      console.log('CANCEL')
+    })
+
+    /*
+        // return await askConfirm(this.$q, this.$t('dialog.msg.titledeleteTask'), msg, deletestr, cancelstr)
+          .then((ris) => {
+            console.log('ris', ris)
+            if (ris) {
+              this.removeitem(this.itemproject._id)
+            }
+          }).catch((err) => {
+
+        })
+    */
+  }
+
+}

src/components/projects/SingleProject/SingleProject.vue

@@ -0,0 +1,83 @@
+<template>
+    <div :class="getClassRow()" @click="clickRow">
+
+        <div class="flex-item donotdrag divdescrTot">
+            <q-input v-if="(sel)" hide-underline type="textarea" ref="inputdescr"
+                     v-model.trim="precDescr"
+                     autogrow
+                     borderless
+                     dense
+                     :class="classDescrEdit" :max-height="100"
+                     @keydown="keyDownArea" v-on:keydown.esc="exitEdit" @blur="exitEdit(true)" @click="editProject()"/>
+
+            <div v-else :class="classDescr"
+                 @keydown="keyDownRow">{{itemproject.descr}}
+            </div>
+
+        </div>
+
+        <div v-if="isProject()" class="flex-item progress-item shadow-1">
+            <q-linear-progress
+                    stripe
+                    rounded
+                    :value="percentageProgress / 100"
+                    class="progrbar-item"
+                    :color="colProgress"
+            >
+            </q-linear-progress>
+            <div :class="percProgress">
+                {{percentageProgress}}%
+            </div>
+        </div>
+
+
+        <div v-if="itemproject.enableExpiring" :class="classExpiring">
+            <span class="data_string">{{getstrDate(itemproject.expiring_at)}}</span>
+            <q-icon name="event" class="cursor-pointer" style="padding: 2px;">
+                <q-popup-proxy>
+                    <q-date v-model="itemproject.expiring_at" today-btn/>
+                </q-popup-proxy>
+            </q-icon>
+            <!--<q-icon name="event" class="cursor-pointer" />-->
+            <!--<q-popup-edit v-model="itemproject.expiring_at"-->
+            <!--title="Edit"-->
+            <!--buttons class="">-->
+            <!--<q-input-->
+            <!--filled-->
+            <!--v-model="itemproject.expiring_at"-->
+            <!--type="date"-->
+            <!--class="myexpired"-->
+            <!--format="DD/MM/YYYY"-->
+            <!--&gt;-->
+            <!--</q-input>-->
+            <!--</q-popup-edit>-->
+        </div>
+        <div v-if="isProject()" class="flex-item pos-item " @mousedown="clickRiga">
+            <q-btn flat
+                   :class="clButtPopover"
+                   icon="menu">
+                <q-menu ref="popmenu" self="top right">
+                    <SubMenusProj :menuPopupProj="menuPopupProj" :itemproject="itemproject" @clickMenu="clickMenu"
+                              @setPriority="setPriority"></SubMenusProj>
+                </q-menu>
+
+            </q-btn>
+        </div>
+        <!--clButtPopover: {{ clButtPopover }}-->
+        <!--Sel: {{ sel }}-->
+        <!--<div class="flex-item btn-item">-->
+        <!--{{itemproject.expiring_at}}-->
+        <!--</div>-->
+        <!--<div class="flex-item btn-item">-->
+        <!--<q-btn class="mybtn" round color="" icon="delete" @click.native="removeitem(itemproject._id)"></q-btn>-->
+        <!--</div>-->
+    </div>
+
+</template>
+
+<script lang="ts" src="./SingleProject.ts">
+</script>
+
+<style lang="scss" scoped>
+    @import './SingleProject.scss';
+</style>

src/components/projects/SingleProject/index.ts

@@ -0,0 +1 @@
+export {default as SingleProject} from './SingleProject.vue'