- todo: added priority, expired, pos fields.

- todo: delete item.
- sorted by fields.

src/components/todos/SingleTodo/SingleTodo.scss

@@ -0,0 +1,37 @@
+.flex-container {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+
+  -ms-box-orient: horizontal;
+  display: -webkit-box;
+  display: -moz-box;
+  display: -ms-flexbox;
+  display: -moz-flex;
+  display: -webkit-flex;
+  display: flex;
+}
+
+
+#appsingletodo {
+  color: white;
+  font-size: 1.1rem;
+  display: flex;
+  margin: 2px;
+  padding: 3px;
+  border: 2px;
+  background-color: #9db6ff;
+}
+
+.mycols{
+  padding: 2px;
+  margin: 1px;
+  border-color: #8a8484;
+  border-style: outset;
+  /* background-color: green; */
+}
+
+.mybtn{
+  width: 18px;
+  height: 18px;
+}

src/components/todos/SingleTodo/SingleTodo.ts

@@ -0,0 +1,36 @@
+import Vue from 'vue'
+import { Component, Prop, Watch } from 'vue-property-decorator'
+
+require('./SingleTodo.scss')
+
+import { rescodes } from '../../../store/Modules/rescodes'
+import { UserStore } from '@modules'
+
+import { ITodo } from '../../../model/index'
+
+@Component({
+  name: 'SingleTodo'
+})
+export default class SingleTodo extends Vue {
+  public selectPriority: []
+  @Prop({required: true}) itemtodo: ITodo
+
+  @Watch('itemtodo.completed') valueChanged() {
+    this.$emit('eventupdate', this.itemtodo)
+  }
+  @Watch('itemtodo.expiring_at') valueChanged2() {
+    this.$emit('eventupdate', this.itemtodo)
+  }
+  @Watch('itemtodo.priority') valueChanged3() {
+    this.$emit('eventupdate', this.itemtodo)
+  }
+
+  created() {
+    this.selectPriority = rescodes.selectPriority[UserStore.state.lang]
+  }
+
+  remove(id) {
+    this.$emit('event', id)
+  }
+
+}

src/components/todos/SingleTodo/SingleTodo.vue

@@ -0,0 +1,30 @@
+<template>
+    <div id="appsingletodo" class="flex-container">
+
+        <div class="doc-container">
+            <div class="row">
+                <div class="flex-item mycols">P: {{ itemtodo.pos }}</div>
+                <q-checkbox class="flex-item mycols" v-model="itemtodo.completed" :label="itemtodo.descr" />
+                <div class="flex-item mycols">
+                <q-select
+                        v-model="itemtodo.priority"
+                        float-label=""
+                        radio
+                        :options="selectPriority"
+                />
+                </div>
+
+                <div class="flex-item mycols"><q-datetime
+                        v-model="itemtodo.expiring_at"/></div>
+                <div class="flex-item mycols">
+                    <q-btn class="mybtn" round color="" icon="delete" @click="remove(itemtodo.id)"></q-btn>
+                </div>
+
+            </div>
+        </div>
+
+    </div>
+</template>
+
+<script lang="ts" src="./SingleTodo.ts">
+</script>

src/components/todos/SingleTodo/index.ts

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