native-script-app.js

<template>
	<Page class="page">
		<ActionBar title="My tasks" class="action-bar" />

		<TabView height="100%" tabTextFontSize="15">
			<TabViewItem title="Active" textTransform="uppercase">
				<StackLayout orientation="vertical" width="100%" height="100%">
					<GridLayout columns="2*,*" rows="*" width="100%" height="15%">
						<TextField col="0" row="0" v-model="textFieldValue" hint="Type new task..." editable="true" @returnPress="onButtonTap" />
						<Button col="1" row="0" text="Add item" @tap="onButtonTap" />
					</GridLayout>
					<TextView class="error" v-if="error" color="red">Please enter something valid!</TextView>
					<ListView class="list-group" for="todo in todos" @itemTap="onActiveTap" style="height:75%" separatorColor="transparent">
						<v-template>
							<Label id="active-task" class="list-group-item-heading">{{ todo }}</Label>
						</v-template>
					</ListView>
					<Label class="align-center">You currently have {{ activeItems }} active items.</Label>
					<Label class="align-center">You finished {{ doneItems }} tasks.</Label>
					<Progress :value="percentace" maxValue="100" />
				</StackLayout>
			</TabViewItem>
			<TabViewItem title="Done" textTransform="uppercase">
				<ListView class="list-group" for="done in dones" @itemTap="onDoneTap" style="height:75%" separatorColor="transparent">
					<v-template>
						<Label id="completed-task" class="list-group-item-heading">{{ done }}</Label>
					</v-template>
				</ListView>
			</TabViewItem>
		</TabView>
	</Page>
</template>

<script>
export default {
    data() {
        return {
            currentDay: new Date().getUTCDate(),
            currentMonth: new Date().getUTCMonth() + 1,
            currentYear: new Date().getUTCFullYear(),
            textFieldValue: "",
            todos: [],
            dones: [],
            error: false,
            progressValue: 80,
            array1: [1, 2, 3, 4, 5, 6],
            array2: [1, 2, 3, 4, 5]
        };
    },
    computed: {
        activeItems() {
            return this.todos.length;
        },
        doneItems() {
            return this.dones.length;
        },
        totalItems() {
            return this.dones.length + this.todos.length;
        },
        percentace() {
            return Math.ceil(
                (this.dones.length * 100) /
                    (this.dones.length + this.todos.length)
            );
        }
    },
    methods: {
        onActiveTap(args) {
            action("What do you want to do with this task?", "Cancel", [
                "Mark completed",
                "Delete"
            ]).then(result => {
                switch (result) {
                    case "Mark completed":
                        this.dones.unshift(args.item); // Places the tapped active task at the top of the completed tasks.
                        this.todos.splice(args.index, 1); // Removes the tapped active  task.
                        break;
                    case "Delete":
                        this.todos.splice(args.index, 1); // Removes the tapped active task.
                        break;
                    case "Cancel" || undefined: // Dismisses the dialog
                        break;
                }
            });
        },
        onDoneTap(args) {
            action("What do you want to do with this task?", "Cancel", [
                "Move to active",
                "Delete"
            ]).then(result => {
                switch (result) {
                    case "Move to active":
                        this.todos.unshift(args.item); // Places the tapped active task at the top of the completed tasks.
                        this.dones.splice(args.index, 1); // Removes the tapped active  task.
                        break;
                    case "Delete":
                        this.dones.splice(args.index, 1); // Removes the tapped active task.
                        break;
                    case "Cancel" || undefined: // Dismisses the dialog
                        break;
                }
            });
        },
        onButtonTap() {
            console.log(this.error);
            if (this.textFieldValue) {
                this.todos.push(this.textFieldValue);
                this.textFieldValue = "";
                this.error = false;
            } else {
                this.error = true;
            }
        }
    }
};
</script>

<style scoped>
	.list-group-item-heading {
		padding: 20px 25px;
		font-size: 18px;
		font-family: Arial;
		color: #000;
	}

	#active-task {
		font-size: 20;
		font-weight: bold;
		color: #53ba82;
		margin-left: 20;
		padding-top: 5;
		padding-bottom: 10;
	}

	#completed-task {
		font-size: 20;
		color: #d3d3d3;
		margin-left: 20;
		padding-top: 20;
		padding-bottom: 10;
		text-decoration: line-through;
	}

	.error {
		text-align: center;
		font-family: Arial;
		font-size: 16px;
		font-weight: bold;
		padding-bottom: 95px;
	}

	.home-panel {
		vertical-align: center;
		font-size: 20;
		margin: 15;
	}

	.description-label {
		margin-bottom: 15;
	}

	TextField {
		font-size: 22px;
		color: #53ba82;
		margin-top: 10;
		margin-bottom: 10;
		margin-right: 5;
		margin-left: 20;
	}

	Button {
		font-size: 16px;
		font-weight: bold;
		color: white;
		background-color: #53ba82;
		height: 40;
		margin-top: 10;
		margin-bottom: 10;
		margin-right: 10;
		margin-left: 10;
		border-radius: 20px;
	}

	.align-center {
		text-align: center;
	}
</style>