ACDLを提唱します。その4

概要

ACDLとは、アプリは、クラウド、大切なデータは、ローカルです。
todoアプリ作ってみた。

サンプルコード

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data() {
    return {
     	headers: [{
    		text: "作業名",
		    sortable: true,
		    value: "task",
	    	width: "70%"
	    }, {
		    text: "優先順位",
		    sortable: true,
		    value: "assignee"
	    }, {
		    text: "操作",
		    sortable: false,
		    value: "control"
	    }, ],
	    items: [],
	    assignees: ["A", "B", "C", ],
	    task: "",
	    assignee: ""
    }
  },
  methods: {
    addTask: function() {
      if (!this.task || !this.assignee) 
	    {
     		alert("タスク名と作業者を入力してください。");
		    return;
	    }
      this.items.push({
		    "task": this.task,
		    "assignee": this.assignee,
	    });
	    this.task = "";
	    this.assignee = "";
    },
    deleteTask: function(item) {
      this.items.splice(this.items.indexOf(item), 1);
    },
    async loadLog(event) {
	    const files = event.target.files || event.dataTransfer.files;
   	  const file = files[0]
	    if (!this.checkFile(file)) 
	    {
		    alert("ファイルを読み込めませんでした")
		    return
	    }
	    const logData = await this.getFileData(file)
      //alert(logData);
	    var data = JSON.parse(logData);
			this.items = data.todo;
    }, 
    getFileData(file) {
	    return new Promise((resolve, reject) => {
		    const reader = new FileReader()
		    reader.readAsText(file)
		    reader.onload = () => resolve(reader.result)
		    reader.onerror = error => reject(error)
	    })
    },
    checkFile(file) {
	    if (!file) 
	    { 
		    return false
	    }
	    if (file.type !== 'application/json') 
	    {
		    return false
	    }
	    const SIZE_LIMIT = 5000000 
      if (file.size > SIZE_LIMIT) 
	    {
		    return false
	    }
	    return true
    },
    saveLog() {
			var line = {
			  "todo": this.items
			};
			var json = JSON.stringify(line); 
      //alert("ok1");
      var url = URL.createObjectURL(new Blob([json]) , { 
        type: "application/json" 
      });
      var a = document.createElement('A');
      a.download = 'todo.json';
      a.href = url;
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a);
    },
  }
})

成果物

以上。