Feat: prepare editing page

src/App.vue

@@ -1,6 +1,8 @@
 <template>
   <Nav></Nav>
-  <router-view></router-view>
+  <div class="content">
+        <router-view></router-view>
+  </div>
 </template>
 
 <script>
@@ -14,4 +16,5 @@ export default {
 }
 </script>
 
-<style></style>
+<style>
+</style>

src/background.js

@@ -7,77 +7,78 @@ const isDevelopment = process.env.NODE_ENV !== 'production'
 
 // Scheme must be registered before the app is ready
 protocol.registerSchemesAsPrivileged([
-  { scheme: 'app', privileges: { secure: true, standard: true } }
+    { scheme: 'app', privileges: { secure: true, standard: true } }
 ])
 
 async function createWindow() {
-  // Create the browser window.
-  const win = new BrowserWindow({
-    width: 800,
-    height: 600,
-    webPreferences: {
-      
-      // Use pluginOptions.nodeIntegration, leave this alone
-      // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
-      nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
-      contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
-    }
-  })
+    // Create the browser window.
+    const win = new BrowserWindow({
+        width: 800,
+        height: 600,
+        autoHideMenuBar: true,
+        webPreferences: {
 
-  if (process.env.WEBPACK_DEV_SERVER_URL) {
-    // Load the url of the dev server if in development mode
-    await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
-    if (!process.env.IS_TEST) win.webContents.openDevTools()
-  } else {
-    createProtocol('app')
-    // Load the index.html when not in development
-    win.loadURL('app://./index.html')
-  }
+            // Use pluginOptions.nodeIntegration, leave this alone
+            // See nklayman.github.io/vue-cli-plugin-electron-builder/guide/security.html#node-integration for more info
+            nodeIntegration: process.env.ELECTRON_NODE_INTEGRATION,
+            contextIsolation: !process.env.ELECTRON_NODE_INTEGRATION
+        }
+    })
+
+    if (process.env.WEBPACK_DEV_SERVER_URL) {
+        // Load the url of the dev server if in development mode
+        await win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
+        if (!process.env.IS_TEST) win.webContents.openDevTools()
+    } else {
+        createProtocol('app')
+        // Load the index.html when not in development
+        win.loadURL('app://./index.html')
+    }
 }
 
 // Quit when all windows are closed.
 app.on('window-all-closed', () => {
-  // On macOS it is common for applications and their menu bar
-  // to stay active until the user quits explicitly with Cmd + Q
-  if (process.platform !== 'darwin') {
-    app.quit()
-  }
+    // On macOS it is common for applications and their menu bar
+    // to stay active until the user quits explicitly with Cmd + Q
+    if (process.platform !== 'darwin') {
+        app.quit()
+    }
 })
 
 app.on('activate', () => {
-  // On macOS it's common to re-create a window in the app when the
-  // dock icon is clicked and there are no other windows open.
-  if (BrowserWindow.getAllWindows().length === 0) createWindow()
+    // On macOS it's common to re-create a window in the app when the
+    // dock icon is clicked and there are no other windows open.
+    if (BrowserWindow.getAllWindows().length === 0) createWindow()
 })
 
 // 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 installExtension(VUEJS_DEVTOOLS)
-        // vuedev tools for vue3
-        await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')
-    } catch (e) {
-      console.error('Vue Devtools failed to install:', e.toString())
+    if (isDevelopment && !process.env.IS_TEST) {
+        // Install Vue Devtools
+        try {
+            //await installExtension(VUEJS_DEVTOOLS)
+            // vuedev tools for vue3
+            await installExtension('ljjemllljcmogpfapbkkighbhhppjdbg')
+        } catch (e) {
+            console.error('Vue Devtools failed to install:', e.toString())
+        }
     }
-  }
-  createWindow()
+    createWindow()
 })
 
 // Exit cleanly on request from parent process in development mode.
 if (isDevelopment) {
-  if (process.platform === 'win32') {
-    process.on('message', (data) => {
-      if (data === 'graceful-exit') {
-        app.quit()
-      }
-    })
-  } else {
-    process.on('SIGTERM', () => {
-      app.quit()
-    })
-  }
+    if (process.platform === 'win32') {
+        process.on('message', (data) => {
+            if (data === 'graceful-exit') {
+                app.quit()
+            }
+        })
+    } else {
+        process.on('SIGTERM', () => {
+            app.quit()
+        })
+    }
 }

src/components/nav.vue

@@ -1,11 +1,20 @@
 <template>
-    <h1>Sous Margot</h1>
-    <!--
     <nav>
-        <router-link to="/"> Home </router-link>
-        <router-link to="/config"> Config </router-link>
+        <h1><router-link to="/"> Sous Margot </router-link></h1>
+        <div class="nav-link">
+        <router-link to="/edit"> 
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-edit" class="svg-inline--fa fa-user-edit fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width='25px' height="25px">
+            <path fill="currentColor" d="M224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm89.6 32h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h274.9c-2.4-6.8-3.4-14-2.6-21.3l6.8-60.9 1.2-11.1 7.9-7.9 77.3-77.3c-24.5-27.7-60-45.5-99.9-45.5zm45.3 145.3l-6.8 61c-1.1 10.2 7.5 18.8 17.6 17.6l60.9-6.8 137.9-137.9-71.7-71.7-137.9 137.8zM633 268.9L595.1 231c-9.3-9.3-24.5-9.3-33.8 0l-37.8 37.8-4.1 4.1 71.8 71.7 41.8-41.8c9.3-9.4 9.3-24.5 0-33.9z"></path>
+        </svg>
+        </router-link>
+        <router-link to="/config"> 
+        <svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="user-cog" class="svg-inline--fa fa-user-cog fa-w-20" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 512" width='25px' height="25px">
+            <path fill="black" d="M610.5 373.3c2.6-14.1 2.6-28.5 0-42.6l25.8-14.9c3-1.7 4.3-5.2 3.3-8.5-6.7-21.6-18.2-41.2-33.2-57.4-2.3-2.5-6-3.1-9-1.4l-25.8 14.9c-10.9-9.3-23.4-16.5-36.9-21.3v-29.8c0-3.4-2.4-6.4-5.7-7.1-22.3-5-45-4.8-66.2 0-3.3.7-5.7 3.7-5.7 7.1v29.8c-13.5 4.8-26 12-36.9 21.3l-25.8-14.9c-2.9-1.7-6.7-1.1-9 1.4-15 16.2-26.5 35.8-33.2 57.4-1 3.3.4 6.8 3.3 8.5l25.8 14.9c-2.6 14.1-2.6 28.5 0 42.6l-25.8 14.9c-3 1.7-4.3 5.2-3.3 8.5 6.7 21.6 18.2 41.1 33.2 57.4 2.3 2.5 6 3.1 9 1.4l25.8-14.9c10.9 9.3 23.4 16.5 36.9 21.3v29.8c0 3.4 2.4 6.4 5.7 7.1 22.3 5 45 4.8 66.2 0 3.3-.7 5.7-3.7 5.7-7.1v-29.8c13.5-4.8 26-12 36.9-21.3l25.8 14.9c2.9 1.7 6.7 1.1 9-1.4 15-16.2 26.5-35.8 33.2-57.4 1-3.3-.4-6.8-3.3-8.5l-25.8-14.9zM496 400.5c-26.8 0-48.5-21.8-48.5-48.5s21.8-48.5 48.5-48.5 48.5 21.8 48.5 48.5-21.7 48.5-48.5 48.5zM224 256c70.7 0 128-57.3 128-128S294.7 0 224 0 96 57.3 96 128s57.3 128 128 128zm201.2 226.5c-2.3-1.2-4.6-2.6-6.8-3.9l-7.9 4.6c-6 3.4-12.8 5.3-19.6 5.3-10.9 0-21.4-4.6-28.9-12.6-18.3-19.8-32.3-43.9-40.2-69.6-5.5-17.7 1.9-36.4 17.9-45.7l7.9-4.6c-.1-2.6-.1-5.2 0-7.8l-7.9-4.6c-16-9.2-23.4-28-17.9-45.7.9-2.9 2.2-5.8 3.2-8.7-3.8-.3-7.5-1.2-11.4-1.2h-16.7c-22.2 10.2-46.9 16-72.9 16s-50.6-5.8-72.9-16h-16.7C60.2 288 0 348.2 0 422.4V464c0 26.5 21.5 48 48 48h352c10.1 0 19.5-3.2 27.2-8.5-1.2-3.8-2-7.7-2-11.8v-9.2z"></path>
+        </svg>
+        </router-link>
+
+        </div>
     </nav>
-    -->
 </template>
 
 <script>

src/router.js

@@ -2,6 +2,7 @@ import { createRouter, createWebHistory } from 'vue-router'
 
 import Home from "@/views/home.vue"
 import Config from "@/views/config.vue"
+import Edit from "@/views/edit.vue"
 
 const routes = [
     {
@@ -9,6 +10,11 @@ const routes = [
         name: 'home',
         component: Home
     },
+    {
+        path: '/edit',
+        name: 'edit',
+        component: Edit
+    },
     {
         path: '/config',
         name: 'config',

src/store/config/index.js

@@ -136,9 +136,13 @@ const config = {
             return state.descAll 
         },
         descEditable (state) { 
-            // All description of attributes for months
+            // All description of attributes for months that are editable
             return state.descAll.filter(d => d.type == 'editable')
         },
+        descComputed (state) { 
+            // All description of attributes for months that are computed
+            return state.descAll.filter(d => d.type != 'editable')
+        },
         descOf: (state) => (desc) => {
             return state.descAll.filter(d => d.name == desc)[0]
         },

src/style.css

@@ -1,46 +1,68 @@
 body {
-    background-color: whitesmoke;
+  background-color: whitesmoke;
+  margin: 0;
+}
+
+nav {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 20px;
+  padding: 0 20px;
+  color: black;
+}
+nav h1 {
+  font-size: 2em;
+  border-bottom: 1px solid #000;
+}
+nav a {
+  color: black;
+  text-decoration: none;
+}
+
+.content {
+  margin: 10px;
 }
 
 button {
-    color: black;
-    padding: 4px;
-    box-shadow: 1px 1px 2px gray;
-    text-align: center;
-    display: inline-block;
-    border-radius: 5px;
-    background-color: white;
-    margin-top: 5px;
-    font-size: 0.8em;
-    width: auto;
-    transition: all 0.2s ease-out;
+  color: black;
+  padding: 4px;
+  box-shadow: 1px 1px 2px gray;
+  text-align: center;
+  display: inline-block;
+  border-radius: 5px;
+  background-color: white;
+  margin-top: 5px;
+  font-size: 0.8em;
+  width: auto;
+  transition: all 0.2s ease-out;
 }
 
 button:hover {
-    background-color: black;
-    color: white;
-    transition: all 0.2s ease-out;
+  background-color: black;
+  color: white;
+  transition: all 0.2s ease-out;
 }
 
 .validate {
-    border: 2px solid green;
-    color: green;
+  border: 2px solid green;
+  color: green;
 }
 .validate:hover {
-    background-color: green;
-    color: white;
+  background-color: green;
+  color: white;
 }
 .cancel {
-    border: 2px solid red;
-    color: red;
+  border: 2px solid red;
+  color: red;
 }
 .cancel:hover {
   background-color: red;
   color: white;
 }
 .edit {
-    border: 2px solid orange;
-    color: orange;
+  border: 2px solid orange;
+  color: orange;
 }
 .edit:hover {
   background-color: orange;
@@ -48,41 +70,41 @@ button:hover {
 }
 
 .boxed {
-    box-shadow: 2px 2px 5px gray;
-    border-left: 1rem solid black;
-    border-radius: 10px;
-    background-color: white;
+  box-shadow: 2px 2px 5px gray;
+  border-left: 1rem solid black;
+  border-radius: 10px;
+  background-color: white;
 }
 
 .boxed-green {
-    box-shadow: 2px 2px 5px gray;
-    border-left: 1rem solid green;
-    border-radius: 10px;
-    background-color: white;
+  box-shadow: 2px 2px 5px gray;
+  border-left: 1rem solid green;
+  border-radius: 10px;
+  background-color: white;
 }
 
 .hightlights {
-    display: grid;
-    grid-template-columns: repeat(3, 1fr);
-    grid-gap: 20px;
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  grid-gap: 20px;
 }
-.hightlight > ul{
-    list-style-type: none;
-    display: flex;
-    flex-flow: column wrap;
-    padding-inline-start: 0;
-    margin-block-start: 0;
-    margin-block-end: 0;
+.hightlight > ul {
+  list-style-type: none;
+  display: flex;
+  flex-flow: column wrap;
+  padding-inline-start: 0;
+  margin-block-start: 0;
+  margin-block-end: 0;
 }
 .hightlight > ul > li {
-    margin: 5px;
-    flex-direction: column-reverse;
+  margin: 5px;
+  flex-direction: column-reverse;
 }
-.hightlight > ul  :first-child{
-    font-size: 2rem;
-    font-weight: bold;
-    text-align: center;
+.hightlight > ul :first-child {
+  font-size: 2rem;
+  font-weight: bold;
+  text-align: center;
 }
-.hightlight > ul  :last-child{
-    text-align: end;
+.hightlight > ul :last-child {
+  text-align: end;
 }

src/views/config.vue

@@ -1,3 +1,40 @@
 <template>
 <h1>Config</h1>
+
+<h2> Données </h2>
+<h3>Données éditables</h3>
+<ul>
+    <li v-for="param in descEditable" :key='param.name'>
+        {{ param }}
+    </li>
+</ul>
+<h3>Données calculées</h3>
+<ul>
+    <li v-for="param in descComputed" :key='param.name'>
+        {{ param }}
+    </li>
+</ul>
+
 </template>
+
+<script>
+import { mapGetters } from 'vuex'
+export default {
+    name: 'config',
+
+    data () {
+        return {}
+    },
+    computed: {
+        ...mapGetters('config', {
+            'descEditable': 'descEditable',
+            'descComputed': 'descComputed',
+        }),
+    },
+    methods: {
+    },
+    mounted () {
+    }, 
+     
+}
+</script>

src/views/edit.vue

@@ -0,0 +1,22 @@
+<template>
+<h1>Edition</h1>
+
+
+</template>
+
+<script>
+export default {
+    name: 'edit',
+
+    data () {
+        return {}
+    },
+    computed: {
+    },
+    methods: {
+    },
+    mounted () {
+    }, 
+     
+}
+</script>

src/views/home.vue

@@ -1,14 +1,14 @@
 <template>
-<div id="content">
+  <div id="content">
     <section id="months">
-        <create-month/>
-        <months-list/>
+      <create-month />
+      <months-list />
     </section>
     <section id="stats">
-        <ca-on-period/>
-        <ca-repartition/>
+      <ca-on-period />
+      <ca-repartition />
     </section>
-</div>
+  </div>
 </template>
 
 <script>
@@ -43,16 +43,15 @@ export default {
 
 <style scoped>
 #content {
-    display: grid;
-    grid-template-columns: minmax(580px, 2fr) minmax(450px, 1fr);
-    grid-template-areas: 
-        "stats months";
-    gap: 1em; 
+  display: grid;
+  grid-template-columns: minmax(580px, 2fr) minmax(450px, 1fr);
+  grid-template-areas: "stats months";
+  gap: 1em;
 }
 #stats {
-    grid-area: stats;
+  grid-area: stats;
 }
 #months {
-    grid-area: months;
+  grid-area: months;
 }
 </style>