Mark important function to set priority

package.json

@@ -51,10 +51,12 @@
     "@vue/cli-plugin-eslint": "3.10.0",
     "@vue/cli-plugin-unit-mocha": "3.10.0",
     "@vue/cli-service": "3.10.0",
+    "@vue/devtools": "^5.3.3",
     "@vue/test-utils": "1.0.0-beta.29",
     "babel-eslint": "^10.0.1",
     "chai": "^4.2.0",
     "electron": "6.0.2",
+    "electron-devtools-installer": "^3.1.1",
     "electron-icon-builder": "1.0.1",
     "eslint": "6.1.0",
     "eslint-plugin-vue": "5.2.3",

src/App.vue

@@ -1,82 +1,142 @@
 <template>
   <div id="app">
     <top-bar></top-bar>
-    <MainPage></MainPage>
-    <global-keybindings></global-keybindings>
+    <div v-if="authenticated === true">
+      <MainPage></MainPage>
+      <global-keybindings></global-keybindings>
+    </div>
+    <div v-else>
+      <div class="parent">
+        <form class="login" inline>
+          <Input
+            on-enter="submit"
+            type="password"
+            v-model="Password"
+            placeholder="Please Enter Your Password"
+            style="width: 300px"
+            @keyup.native.enter="submit"
+          />
+          <Button type="primary" @click="submit" class="ml-10">Unlock</Button>
+        </form>
+      </div>
+    </div>
   </div>
 </template>
 
 <script>
-  import MainPage from "./components/MainPage";
-  import TopBar from "./components/TopBar";
-  import "./theme/default-theme.less";
-  import GlobalKeybindings from "./components/GlobalKeyBindings";
-  import cloudMixin from "./cloudMixin";
+import MainPage from "./components/MainPage";
+import TopBar from "./components/TopBar";
+import "./theme/default-theme.less";
+import GlobalKeybindings from "./components/GlobalKeyBindings";
+import cloudMixin from "./cloudMixin";
 
-  export default {
-    name: "backlog",
-    components: {GlobalKeybindings, TopBar, MainPage},
-    mixins: [cloudMixin],
-    created() {
-      this.$store.dispatch("setupKeyBindings");
-      this.$store.dispatch("fetchRawBoards");
-    }
-  };
+export default {
+  name: "backlog",
+  components: { GlobalKeybindings, TopBar, MainPage },
+  mixins: [cloudMixin],
+  data() {
+    return {
+      Password: "",
+    };
+  },
+  computed: {
+    authenticated() {
+      return this.$store.state.settings.authenticated;
+    },
+  },
+  watch: {
+    authenticated(val) {
+      if (!val) {
+        this.Password = "";
+      }
+    },
+  },
+  methods: {
+    submit() {
+      if (this.Password == "0000") {
+        this.$store.commit("SET_AUTHENTICATED", true);
+      } else {
+        this.$Message.error("wrong password");
+        this.Password = "";
+      }
+    },
+  },
+  created() {
+    this.$store.dispatch("setupKeyBindings");
+    this.$store.dispatch("fetchRawBoards");
+  },
+};
 </script>
 
 <style>
-  @import url('~animate.css');
+@import url("~animate.css");
 
-  * {
-    box-sizing: border-box;
-    margin: 0;
-    padding: 0;
-  }
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
 
-  html {
-  }
+html {
+}
 
-  body {
-    overflow: hidden;
-  }
+body {
+  overflow: hidden;
+}
 
-  .invisible {
-    opacity: 0;
-    transition: opacity .3s;
-  }
+.invisible {
+  opacity: 0;
+  transition: opacity 0.3s;
+}
 
-  .visible {
-    opacity: 1;
-  }
+.visible {
+  opacity: 1;
+}
 
-  a {
-    color: #58BB73;
-  }
+a {
+  color: #58bb73;
+}
 
-  a:hover {
-    color: #338a62;
-  }
+a:hover {
+  color: #338a62;
+}
 
-  .sync-animate {
-    animation: spin 1.5s cubic-bezier(0.4, 0, 1, 1) infinite;
-    height: 1px;
-    width: 1px;
-    transform-origin: 50% 53%;
-  }
+.sync-animate {
+  animation: spin 1.5s cubic-bezier(0.4, 0, 1, 1) infinite;
+  height: 1px;
+  width: 1px;
+  transform-origin: 50% 53%;
+}
 
-  @keyframes spin {
-    from {
-      transform: rotate(0deg);
-    }
-    50% {
-      transform: rotate(-180deg);
-    }
-    to {
-      transform: rotate(-360deg);
-    }
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
   }
-
-  .uppercase {
-    text-transform: uppercase;
+  50% {
+    transform: rotate(-180deg);
   }
+  to {
+    transform: rotate(-360deg);
+  }
+}
+
+.uppercase {
+  text-transform: uppercase;
+}
+.parent {
+  text-align: center;
+}
+.login {
+  /* width: 200px; */
+  height: 100px;
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  margin: auto;
+}
+.ml-10 {
+  margin-left: 10px;
+}
 </style>

src/background.js

@@ -4,12 +4,17 @@
 import {app, BrowserWindow, Menu, protocol} from 'electron';
 import {createProtocol, installVueDevtools} from 'vue-cli-plugin-electron-builder/lib';
 import windowRepository from './windowRepository';
+import installExtension from 'electron-devtools-installer';
+
+
+
 
 const path = require('path');
 
+
 require('electron-context-menu')();
 
-const isDevelopment = process.env.NODE_ENV !== 'production';
+const isDevelopment = process.env.NODE_ENV !== 'development';
 
 const windowSettings = windowRepository(path.join(app.getPath('userData'), 'window.json'));
 
@@ -34,6 +39,8 @@ function createWindow() {
   win = new BrowserWindow(windowConfig);
   win.userDataPath = path.join(app.getPath('userData'), 'backlog.json');
 
+
+
   if (process.platform === 'darwin') {
     Menu.setApplicationMenu(createMenuOnMac());
   } else {
@@ -81,19 +88,16 @@ app.on('activate', () => {
   }
 });
 
+
 // This method will be called when Electron has finished
 // initialization and is ready to create browser windows.
 // Some APIs can only be used after this event occurs.
-app.on('ready', async() => {
-  if (isDevelopment && !process.env.IS_TEST) {
-    // Install Vue Devtools
-    try {
-      await installVueDevtools();
-    } catch (e) {
-      console.error('Vue Devtools failed to install:', e.toString());
-    }
-  }
+app.on('ready', () => {
+  installExtension('nhdogjmejiglipccpnnnanhbledajbpd')
+        .then((name) => console.log(`Added Extension:  ${name}`))
+        .catch((err) => console.log('An error occurred: ', err));
   createWindow();
+
 });
 
 // Exit cleanly on request from parent process in development mode.

src/components/board/BoardContent.vue

@@ -39,6 +39,7 @@
                       :key="item.id"
                       :itemId="item.id"
                       :isDone="item.isDone"
+                      :isImportant="item.isImportant"
                       :text="item.text"
                       :created="item.created"
                       :ref="item.id"

src/components/board/item/ActionButtons.vue

@@ -1,8 +1,7 @@
 <template>
-  <span class="icon-more">
+  <span class="icon-more" >
     <Dropdown @on-click="handleClick" :transfer="true">
     <Icon type="ios-more-outline" size="24"/>
-
     <DropdownMenu slot="list" class="dropdown-menu">
       <DropdownItem name="moveToTop">
        <Icon type="ios-arrow-dropup"/>
@@ -12,6 +11,14 @@
         <Icon type="ios-arrow-dropdown"/>
           {{$t("item.move_to_bottom")}}
       </DropdownItem>
+      <DropdownItem v-if="!isImportant" name="markImportant">
+       <Icon type="ios-add" />
+          {{$t("item.mark_important")}}
+      </DropdownItem>
+      <DropdownItem v-if="isImportant" name="markUnimportant">
+       <Icon type="ios-close" />
+          {{$t("item.mark_unimportant")}}
+      </DropdownItem>
       <DropdownItem class="delete-btn" name="remove">
         <Icon type="ios-trash-outline"/>
           {{$t("item.delete")}}
@@ -24,6 +31,12 @@
 <script>
   export default {
     name: "ActionButtons",
+    props: ['isImportant'],
+    data(){
+      return{
+        localisImportant: this.isImportant
+      }
+    },
     methods: {
       handleClick(val) {
         switch (val) {
@@ -36,8 +49,22 @@
           case "moveToBottom":
             this.moveToBottom();
             break;
+          case "markUnimportant":
+            this.Important = true;
+            this.changeToFalse();
+            break;
+          case "markImportant":
+            this.Important = false;
+            this.changeToTure();
+            break;
         }
       },
+      changeToTure(){
+        this.$emit("changeImportant", true)
+      },
+      changeToFalse(){
+        this.$emit("changeImportant", false)
+      },
       remove() {
         this.$emit("remove");
       },
@@ -46,9 +73,10 @@
       },
       moveToBottom() {
         this.$emit("moveToBottom");
-      }
-    }
+      },
+    },
   };
+
 </script>
 
 <style>