lafrite/Sousmargot
1
0
Fork 0
Code Issues Pull Requests Packages Releases Wiki Activity

Compare commits

base: lafrite:passleouinj
Branches Tags
lafrite:master
lafrite:split_front_back
lafrite:dev
lafrite:passleouinj
..
compare: lafrite:master
Branches Tags
lafrite:split_front_back
lafrite:dev
lafrite:passleouinj
lafrite:master

No commits in common. "passleouinj" and "master" have entirely different histories.
passleouin ... master

19 changed files with 8462 additions and 10440 deletions
Show Stats Expand all files Collapse all files

0
jsconfig.json
View File

1627
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@ -14,12 +14,8 @@
"main": "background.js", "main": "background.js",
"dependencies": { "dependencies": {
"core-js": "^3.6.5", "core-js": "^3.6.5",
"date-fns": "^2.23.0",
"papaparse": "^5.3.1",
"vls": "^0.7.4",
"vue": "^3.0.0", "vue": "^3.0.0",
"vue-router": "^4.0.8", "vue-router": "^4.0.8"
"vuex": "^4.0.2"
}, },
"devDependencies": { "devDependencies": {
"@vue/cli-plugin-babel": "~4.5.0", "@vue/cli-plugin-babel": "~4.5.0",

130
src/components/CreateMonth.vue
View File

@ -1,130 +0,0 @@
<template>
<div id="create-month" >
<div class="month-presentation" id="new-month">
<div class="date">
<input type="month" v-model="monthDate">
</div>
<div class="datas">
<ul>
<li>
<label for="ca-theo">CA théorique</label>
<input type="number" v-model.number="monthCopy.ca_theo" id="ca-theo" class="value" >
</li>
<li>
<label for="ca-retro">CA rétrocession</label>
<input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" >
</li>
<li>
<label for="ca-react">CA réactualisé</label>
<input type="number" v-model.number="monthCopy.ca_react" id="ca-react" class="value" >
</li>
<li>
<label for="nbr-seances">Nombre de séances effectuées</label>
<input type="number" v-model.number="monthCopy.nbr_seances" id="nbr-seances" class="value" >
</li>
<li>
<label for="retro">Montant de la rétrocession</label>
<input type="number" v-model.number="monthCopy.retro" id="retro" class="value" >
</li>
<li>
<label for="remuneration">Rémunération effectuée</label>
<input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value">
</li>
</ul>
</div>
<div class="actions">
<button class="validate" @click="save"> Valider </button>
<button class="cancel" @click="cancel"> Annuler </button>
</div>
</div>
</div>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
const today = new Date();
function formatDate(date) {
var y = ''+date.getFullYear()
var m = ''+(date.getMonth()+1)
if (m.length < 2) { m = '0'+m}
return [y, m].join('-')
}
export default {
name: 'NewMonth',
props: {
},
components: {
},
data () {
return {
monthDate: formatDate(today),
monthCopy: Object,
}
},
mounted () {
this.monthCopy = this.theEmptyMonth
},
computed: {
...mapGetters('travail', {
'theEmptyMonth': 'TheEmptyMonth',
}),
},
methods: {
...mapActions('travail', {
'createMonth': 'createMonth',
}),
save: function () {
console.log("save")
console.log(this.monthCopy)
this.createMonth({date: this.monthDate, month: this.monthCopy})
},
cancel: function () {
this.monthCopy = this.theEmptyMonth
},
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.month-presentation {
display: inline-flex;
flex-direction: row;
background-color: palegreen;
align-items: center;
justify-content: space-between;
border-radius: 10px;
width: 100%;
}
.month-presentation > * {
margin: 20px;
}
.date > input {
font-size: 1.2em;
font-weight: bold;
display: inline-flex;
width: 6rem;
flex-wrap: wrap;
align-content: flex-start;
flex-direction: column;
align-items: flex-start;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-flow: row wrap;
}
li {
margin: 3px;
width: 30%;
display: flex;
flex-direction: column-reverse;
}
.value {
font-size: 1.5em;
font-weight: bold;
}
</style>

69
src/components/MonthForm.vue
View File

@ -1,69 +0,0 @@
<template>
<form>
<ul>
<li>
<label for="ca-theo">CA théorique</label>
<input type="number" id="ca-theo">
</li>
<li>
<label for="ca-retro">CA rétrocession</label>
<input type="number" id="ca-retro">
</li>
<li>
<label for="ca-react">CA réactualisé</label>
<input type="number" id="ca-react">
</li>
<li>
<label for="nbr-seance">Nombre de séances effectuées</label>
<input type="number" id="nbr-seance">
</li>
<li>
<label for="retro">Montant de la rétrocession</label>
<input type="number" id="retro">
</li>
<li>
<label for="remumeration">Rémunération effectuée</label>
<input type="number" id="remumeration">
</li>
</ul>
</form>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'MonthForm',
props: {
editMonth: {}
},
computed: {
...mapGetters({
TheEmpty: "travail/TheEmptyMonth",
})
},
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-flow: row wrap;
}
li {
margin: 3px;
width: 30%;
display: flex;
flex-direction: column-reverse;
}
li > label {
font-size: 0.8em;
}
input {
width: 4em;
font-size: 1.5em;
}
</style>

131
src/components/MonthPresentation.vue
View File

@ -1,131 +0,0 @@
<template>
<div class="month-presentation">
<div class="date">
{{ TheDate }}
</div>
<div id="display">
<ul>
<li>
<label for="ca-theo">CA "Séances effectuées"</label>
<span class="value" v-show="!editing">{{ TheMonth.ca_theo ?? "∅"}}€</span>
<input type="number" v-model.number="monthCopy.ca_theo" id="ca-theo" class="value" v-show="editing">
</li>
<li>
<label for="ca-retro">CA "Séances facturées"</label>
<span class="value" v-show="!editing">{{ TheMonth.ca_retro ?? "∅"}}€</span>
<input type="number" v-model.number="monthCopy.ca_retro" id="ca-retro" class="value" v-show="editing">
</li>
<li>
<label for="ca-react">CA "Séances facturées" réactualisé</label>
<span class="value" v-show="!editing">{{ TheMonth.ca_react ?? "∅"}}€</span>
<input type="number" v-model.number="monthCopy.ca_react" id="ca-react" class="value" v-show="editing">
</li>
<li>
<label for="nbr-seances">Nombre de séances effectuées</label>
<span class="value" v-show="!editing">{{ TheMonth.nbr_seances ?? "∅"}}</span>
<input type="number" v-model.number="monthCopy.nbr_seances" id="nbr-seances" class="value" v-show="editing">
</li>
<li>
<label for="retro">Montant de la rétrocession</label>
<span class="value" v-show="!editing">{{ TheMonth.retro ?? "∅"}}€</span>
<input type="number" v-model.number="monthCopy.retro" id="retro" class="value" v-show="editing">
</li>
<li>
<label for="remuneration">Rémunération </label>
<span class="value" v-show="!editing">{{ TheMonth.remuneration ?? "∅"}}€</span>
<input type="number" v-model.number="monthCopy.remuneration" id="remuneration" class="value" v-show="editing">
</li>
</ul>
</div>
<div class="actions">
<button class="edit" @click="toggleEdit" v-show="!editing"> Éditer </button>
<button class="validate" @click="save" v-show="editing"> Valider </button>
<button class="cancel" @click="cancel" v-show="editing"> Annuler </button>
</div>
</div>
</template>
<script>
import { mapActions } from 'vuex'
export default {
name: 'MonthPresentation',
props: {
TheDate: String,
TheMonth: {
type: Object,
}
},
data () {
return {
editing: false,
monthCopy: Object,
}
},
mounted: function () {
this.monthCopy = {...this.TheMonth}
},
computed: {
},
methods: {
...mapActions('travail', {
'updateMonth': 'updateMonth',
}),
...mapActions('config', {
'loadData': 'loadData',
}),
toggleEdit: function () {
this.editing = !this.editing
},
save: function () {
this.updateMonth({date: this.TheDate, month: {...this.monthCopy}})
this.toggleEdit()
},
cancel: function () {
this.monthCopy = {...this.TheMonth}
this.toggleEdit()
},
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.month-presentation {
display: inline-flex;
flex-direction: row;
background-color: mintcream;
align-items: center;
justify-content: space-between;
width: 100%;
border-radius: 10px;
}
.month-presentation > * {
margin: 20px;
}
.date {
font-size: 1.5em;
font-weight: bold;
}
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-flow: row wrap;
}
li {
margin: 3px;
width: 30%;
display: flex;
flex-direction: column-reverse;
}
.value {
font-size: 1.5em;
font-weight: bold;
}
.novisible {
display: None;
}
</style>

42
src/components/MonthsUl.vue
View File

@ -1,42 +0,0 @@
<template>
<ul>
<li v-for="date in dates" :key="date">
<month-presentation :TheDate=date :TheMonth=getMonth(date)></month-presentation>
</li>
</ul>
</template>
<script>
import { mapGetters } from 'vuex'
import MonthPresentation from "./MonthPresentation"
export default {
name: 'Months',
components: {
MonthPresentation: MonthPresentation
},
props: {
},
computed: {
...mapGetters({
dates: "travail/MonthsDate",
getMonth: "travail/getMonth",
})
},
}
</script>
<style scoped>
ul {
list-style-type: none;
padding: 0;
}
li {
padding-bottom: 10px;
}
li:last-of-type {
padding-bottom: 0;
}
</style>

80
src/components/hightlights.vue
View File

@ -1,80 +0,0 @@
<template>
<div id="hightlights">
<div class="hightlight">
<ul>
<li>{{ ca }}</li>
<li>CA</li>
</ul>
</div>
<div class="hightlight">
<ul>
<li>{{ caMean }}</li>
<li>CA moyen</li>
</ul>
</div>
<div class="hightlight">
<ul>
<li>{{ caTheo }}</li>
<li>CA des séances effectuées</li>
</ul>
</div>
<div class="hightlight">
<ul>
<li>{{ caTheo - ca }}</li>
<li>Non facturé</li>
</ul>
</div>
<div class="hightlight">
<ul>
<li>{{ remuneration }}</li>
<li>Rémunération</li>
</ul>
</div>
<div class="hightlight">
<ul>
<li>{{ remunerationMean }}</li>
<li>Rémunération moyenne</li>
</ul>
</div>
<div class="hightlight">
<ul>
<li>{{ retrocession }}</li>
<li>Rétrocession</li>
</ul>
</div>
<div class="hightlight">
<ul>
<li>{{ retrocessionMean }}</li>
<li>Rétrocession moyenne</li>
</ul>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
name: 'Hightlights',
components: {
},
data () {
return {}
},
computed: {
...mapGetters('travail', {
ca: "ca",
caMean: "caMean",
caTheo: "caTheo",
remuneration: "remuneration",
remunerationMean: "remunerationMean",
retrocession: "retrocession",
retrocessionMean: "retrocessionMean",
})
},
methods: {
},
}
</script>
<style scoped>
</style>

135
src/components/monthSelector.vue
View File

@ -1,135 +0,0 @@
<template>
<ul>
<li>
<h2>Période</h2>
</li>
<li>
<input type="month" @input="updateStart" v-model="start">
<input type="month" @input="updateEnd" v-model="end">
</li>
<li>
<button @click="setRangeFromJanuary" :active='selected=="january"'>Depuis le début de l'année</button>
<button @click="setRange1year" :active='selected=="year"'>Sur 1 an</button>
<button @click="setRangeAll" :active='selected=="all"'>Tout</button>
</li>
</ul>
</template>
<script>
import { mapGetters, mapActions } from 'vuex'
import { setMonth, addMonths, format, parseISO } from 'date-fns'
const today = new Date();
export default {
name: 'MonthSelector',
components: {
},
data () {
return {
selected: "",
start: "",
end: "",
}
},
computed: {
...mapGetters('travail', {
range: "range",
monthsDate: "MonthsDate",
})
},
watch: {
range: function () {
this.start = this.range.start
this.end = this.range.end
},
},
mounted () {
this.setRangeFromJanuary()
this.start = this.range.start
this.end = this.range.end
},
methods: {
...mapActions('travail', {
setRange: "setRange",
}),
updateStart: function () {
this.selected = "custom"
this.setRange({start: this.start, end: this.end})
},
updateEnd: function () {
this.selected = "custom"
this.setRange({start: this.start, end: this.end})
},
setRangeFromJanuary: function () {
const start = setMonth(today, 0)
const range = {
start: format(start, 'yyyy-MM'),
end: format(today, 'yyyy-MM'),
}
this.selected = "january"
this.setRange(range)
},
setRange1year: function () {
const start = addMonths(new Date(), -12)
const range = {
start: format(start, 'yyyy-MM'),
end: format(today, 'yyyy-MM'),
}
this.selected = "year"
this.setRange(range)
},
setRangeAll: function () {
const dates = this.monthsDate.map(a => parseISO(a, "yyyy-MM", new Date()))
const start = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? a: b))
const end = dates.reduce((a, b) => (a.MeasureDate > b.MeasureDate ? b: a))
const range = {
start: format(start, 'yyyy-MM'),
end: format(end, 'yyyy-MM'),
}
this.selected = "all"
this.setRange(range)
},
},
}
</script>
<style scoped>
ul {
list-style-type: none;
padding: 0;
display: flex;
flex-flow: column wrap;
}
ul > * {
margin-top: 10px;
}
li {
list-style-type: none;
display: flex;
flex-flow: row;
justify-content: space-around;
}
h2 {
margin: 0;
}
input {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
font-size: 16px;
border-radius: 5px;
color: black;
}
button {
flex-basis: 33%;
height: 3rem;
background-color: white;
}
</style>

3
src/main.js
View File

@ -1,11 +1,8 @@
import { createApp } from 'vue' import { createApp } from 'vue'
import App from '@/App.vue' import App from '@/App.vue'
import router from '@/router' import router from '@/router'
import store from '@/store'
import '@/style.css'
const app = createApp(App) const app = createApp(App)
app.use(router) app.use(router)
app.use(store)
app.mount('#app') app.mount('#app')

42
src/store/config/index.js
View File

@ -1,42 +0,0 @@
import path from 'path'
import Papa from 'papaparse'
const config = {
namespaced: true,
state() {
return {
//userDir: '~/.config/sousmargot/',
userDir: './userDir/',
dataFile: 'datas.csv'
}
},
getters: {
userDir (state) { return state.userDir },
dataFilePath (state) { return path.join(state.userDir, state.dataFile) },
},
mutations: {
},
actions: {
loadConfig (context) {
// load config file at ~/.config/sousmargot/config.json
return context.state.userDir
},
loadData (context) {
// load data in userDir on dataFile
console.log("Loading data")
console.log(context.getters.dataFilePath)
},
writeData (context) {
// overwrite the dataFile with months datas
console.log("Writing data")
console.log(context.getters.dataFilePath)
const months = context.rootGetters['travail/monthsAll']
console.log(Object.keys(months).map(k => {return { ...months[k], date: k}}))
const csv = Papa.unparse(context.rootGetters['travail/monthsAll'])
console.log(csv)
},
},
}
export default config

13
src/store/index.js
View File

@ -1,13 +0,0 @@
import { createStore } from 'vuex'
import travailStore from "./travail"
import configStore from "./config"
// Create a new store instance.
const store = createStore({
modules:{
travail: travailStore,
config: configStore,
}
})
export default store

202
src/store/travail/index.js
View File

@ -1,202 +0,0 @@
function monthCA(month) {
if (month.ca_react) {
return month.ca_react
} else {
return month.ca_retro
}
}
const travail = {
namespaced: true,
state() {
return {
empty: {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: null, // ca au moment de la rétrocession
ca_react: null, // ca réactualisé
retro: 0, // montant de la rétrocession
remuneration: 0, // rémunération décidée
},
months: {
"2021-01": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 6747, // ca au moment de la rétrocession
ca_react: null, // ca réactualisé
retro: 893, // montant de la rétrocession
remuneration: 2000, // rémunération décidée
},
"2021-02": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 5183, // ca au moment de la rétrocession
ca_react: null, // ca réactualisé
retro: 665, // montant de la rétrocession
remuneration: 1500, // rémunération décidée
},
"2021-03": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 7088, // ca au moment de la rétrocession
ca_react: null, // ca réactualisé
retro: 855, // montant de la rétrocession
remuneration: 2000, // rémunération décidée
},
"2021-04": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 4194, // ca au moment de la rétrocession
ca_react: 5630, // ca réactualisé
retro: 627, // montant de la rétrocession
remuneration: 2000, // rémunération décidée
},
"2021-05": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 5564, // ca au moment de la rétrocession
ca_react: 6335, // ca réactualisé
retro: 699, // montant de la rétrocession
remuneration: 2800, // rémunération décidée
},
"2021-06": {
ca_theo: null, // ca théorique basé sur les séances effectuées
nbr_seances: null, // Nombre de séances effectuées sur le mois
ca_retro: 5442, // ca au moment de la rétrocession
ca_react: 6335, // ca réactualisé
retro: 638, // montant de la rétrocession
remuneration: 2800, // rémunération décidée
},
},
range: {
start: "2021-01",
end: "2021-08",
},
}
},
getters: {
TheEmptyMonth(state) { return { ...state.empty } },
range(state) { return state.range },
MonthsDate(state) {
// Get months inside the range
return Object.keys(state.months).filter(date => (date >= state.range.start) && (date <= state.range.end)).sort().reverse()
},
MonthsAllDate(state) {
// Get all the months
return Object.keys(state.months).sort().reverse()
},
months: (state, getters) => {
// Get in range months
return Object.keys(state.months)
.filter(a => getters.MonthsDate.includes(a))
.reduce((acc, v) => {
acc[v] = state.months[v];
return acc;
}, {})
},
monthsAll: (state) => {
// Get in range months
return state.months
},
getMonth: (state) => (date) => {
return state.months[date]
},
count: (state, getters) => {
// Amount of mounts
return Object.keys(getters.months).length
},
ca: (state, getters) => {
// Total CA (ca_react if sets, ca_retro otherwise)
return Object.values(getters.months).map(a => monthCA(a)).reduce(
(acc, v) => acc + v,
0
)
},
caMean: (state, getters) => {
// Mean of CA
return Math.floor(Object.values(state.months).map(a => monthCA(a)).reduce(
(acc, v) => acc + v,
0
) / getters.count)
},
caTheo: (state, getters) => {
// Total theorical CA
return Object.values(getters.months).map(a => a.ca_theo).reduce(
(acc, v) => acc + v,
0
)
},
remuneration: (state, getters) => {
// Total remuneration
return Object.values(getters.months).map(a => a.remuneration).reduce(
(acc, v) => acc + v,
0
)
},
remunerationMean: (state, getters) => {
// Mean of remuneration
return Math.floor(Object.values(getters.months).map(a => a.remuneration).reduce(
(acc, v) => acc + v,
0
) / getters.count)
},
retrocession: (state, getters) => {
// Total retrocession
return Object.values(getters.months)
.map(a => a.retro)
.reduce(
(acc, v) => acc + v,
0
)
},
retrocessionMean: (state, getters) => {
// Mean of retrocession
return Math.floor(
Object.values(getters.months)
.map(a => a.retro)
.reduce(
(acc, v) => acc + v,
0
) / getters.count
)
},
},
mutations: {
updateMonth(state, { date, month }) {
state.months[date] = month
},
createMonth (state, { date, month }) {
state.months[date] = month
},
setRange(state, range) {
state.range = range
},
},
actions: {
updateMonth(context, { date, month }) {
// update month's datas
if (date in context.state.months) {
context.commit('updateMonth', { date, month })
} else {
console.log("This month does not exists")
}
},
createMonth(context, { date, month }) {
// Create a new month
if (!(date in context.state.months)) {
console.log(date)
context.commit('createMonth', { date, month })
console.log(context.state.months)
} else {
console.log("This month already exists")
}
},
setRange(context, range) {
context.commit("setRange", range)
},
},
}
export default travail

27
src/style.css
View File

@ -1,27 +0,0 @@
.actions {
display: inline-flex;
flex-direction: column;
width: 120px;
}
button {
border: none;
color: white;
padding: 15px 32px;
text-align: center;
display: inline-block;
width: 100%;
font-size: 16px;
border-radius: 5px;
color: black;
}
.validate {
background-color: green;
}
.cancel {
background-color: red;
}
.edit {
background-color: orange;
}

62
src/views/home.vue
View File

@ -1,65 +1,3 @@
<template> <template>
<h1>Home</h1> <h1>Home</h1>
<button @click="writeData" ></button>
<section id="selector">
<month-selector>
</month-selector>
</section>
<div id="content">
<section id="months">
<h2> Mois </h2>
<create-month></create-month>
<months-list></months-list>
</section>
<section id="stats">
<h2>Résumé</h2>
<highlights></highlights>
</section>
</div>
</template> </template>
<script>
import { mapActions } from 'vuex'
import MonthsList from '../components/MonthsUl.vue'
import CreateMonth from '../components/CreateMonth.vue'
import MonthSelector from '../components/monthSelector.vue'
import Highlights from '../components/hightlights.vue'
export default {
name: 'home',
components: {
MonthsList: MonthsList,
CreateMonth: CreateMonth,
MonthSelector: MonthSelector,
highlights: Highlights,
},
data () {
return {}
},
computed: {
},
methods: {
...mapActions('config', {
'loadData': 'loadData',
'writeData': 'writeData',
}),
},
mounted () {
this.loadData()
},
}
</script>
<style scoped>
#content {
display: inline-flex;
flex-direction: row;
background-color: red;
margin: 0;
}
#content > * {
margin: 10px;
}
#months {
flex-basis: 60%;
}
</style>

1
userDir/datas.csv
View File

@ -1 +0,0 @@
ca_theo, nbr_seances, ca_retro, ca_react, retro, remuneration,
1 ca_theo nbr_seances ca_retro ca_react retro remuneration

7
vue.config.js
View File

@ -1,7 +0,0 @@
module.exports = {
pluginOptions: {
electronBuilder: {
nodeIntegration: true
}
}
}

16323
yarn.lock
View File

File diff suppressed because it is too large Load Diff