From c70ab5231a9f327afebb263fad147b22f0bff483 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Timoth=C3=A9e=20Poussard?= <tpoussard@neogeo.fr>
Date: Mon, 23 Aug 2021 18:36:47 +0200
Subject: [PATCH] Add template for project members, post to do
---
src/components/Dropdown.vue | 5 +-
src/main.js | 1 +
src/store/index.js | 12 ++
src/views/project/Project_members.vue | 168 ++++++++++++--------------
4 files changed, 91 insertions(+), 95 deletions(-)
diff --git a/src/components/Dropdown.vue b/src/components/Dropdown.vue
index 0ed967ec..bcd926b4 100644
--- a/src/components/Dropdown.vue
+++ b/src/components/Dropdown.vue
@@ -18,7 +18,7 @@
v-model="input"
:placeholder="placeholder"
/>
- <!-- <div class="default text">{{ selected }}</div> -->
+ <div v-if="!placeholder" class="default text">{{ selected }}</div>
<i
:class="['dropdown icon', { clear: search && selected }]"
@click="clear"
@@ -61,7 +61,6 @@ export default {
return {
isOpen: false,
input: "",
- // placeholder: "Choisissez une couche",
};
},
methods: {
@@ -74,7 +73,6 @@ export default {
}, 500);
this.$emit("update:selection", this.options[index]);
this.input = "";
- // this.placeholder = this.selected;
},
searchOptions(options) {
return options.filter((el) =>
@@ -99,7 +97,6 @@ export default {
created() {
window.addEventListener("mousedown", this.clickOutsideDropdown);
- // if (this.selected) this.placeholder = this.selected;
},
beforeDestroy() {
diff --git a/src/main.js b/src/main.js
index 1603b301..1680f107 100644
--- a/src/main.js
+++ b/src/main.js
@@ -11,6 +11,7 @@ Vue.config.productionTip = false
axios.all([store.dispatch("USER_INFO"),
store.dispatch("GET_ALL_PROJECTS"),
store.dispatch("GET_STATIC_PAGES"),
+store.dispatch("GET_USERS"),
store.dispatch("GET_USER_LEVEL_PROJECTS") // * mock en attendant endpoint ou autre
]).then(axios.spread(function () {
new Vue({
diff --git a/src/store/index.js b/src/store/index.js
index 80fecbb1..457a3258 100644
--- a/src/store/index.js
+++ b/src/store/index.js
@@ -33,6 +33,7 @@ export default new Vuex.Store({
state: {
logged: false,
user: false,
+ users: [],
project_slug: null,
projectMembers: null,
projects: [],
@@ -54,6 +55,9 @@ export default new Vuex.Store({
SET_USER(state, payload) {
state.user = payload;
},
+ SET_USERS(state, payload) {
+ state.users = payload;
+ },
SET_COOKIE(state, cookie) {
state.cookie = cookie
},
@@ -101,6 +105,14 @@ export default new Vuex.Store({
throw error;
});
},
+ async GET_USERS({ commit }) {
+ await axios
+ .get(`${DJANGO_API_BASE}users/`)
+ .then((response) => (commit("SET_USERS", response.data)))
+ .catch((error) => {
+ throw error;
+ });
+ },
LOGIN({ commit, dispatch }, payload) {
if (payload.username && payload.password) {
axios
diff --git a/src/views/project/Project_members.vue b/src/views/project/Project_members.vue
index 17fb6660..9e83c515 100644
--- a/src/views/project/Project_members.vue
+++ b/src/views/project/Project_members.vue
@@ -9,68 +9,68 @@
enctype="multipart/form-data"
class="ui form"
>
-
- {{ formset.non_form_errors }}
+ <!-- {{ formset.non_form_errors }} -->
<table class="ui red table">
+ <thead>
+ <tr>
+ <th>Membre</th>
+ <th>Niveau d'autorisation</th>
+ </tr>
+ </thead>
+ <!-- <div id="formsets-members"> -->
<tbody>
- <thead>
+ <div v-frag v-for="member in memberForms" :key="member.username">
<tr>
- <th>Membre</th>
- <th>{{ formset.empty_form.level.label }}</th>
- </tr>
- </thead>
- <div id="formsets-members">
- {{ formset.management_form }}
- <!-- {% for form in formset %} {% if not form.DELETE.value %} {% for
- hidden in form.hidden_fields %} -->
- // ! À adapter une fois défini comment faire le formulaire
- <!-- <div v-frag v-for="form in Object.entries(formset)" :key="form.level.id_for_label">
- <div v-frag v-if="!form.DELETE.value">
- <span v-for="hidden in form.hidden_fields" :key="hidden">
- {{ hidden }}
- </span>
- <tr>
- <td>
- {{ form.last_name.value }} {{ form.first_name.value
- }}<br /><i>{{ form.username.value }}</i>
- </td>
- <td>
- <div class="required field">
- <div class="ui selection search dropdown">
- <input
- type="hidden"
- :name="form.level.html_name"
- :id="form.level.id_for_label"
- :value="form.level.value"
- />
- <div class="default text"></div>
- <i class="dropdown icon"></i>
- <div class="menu">
- {% for x,y in form.level.field.choices %}
- <div
- v-for="(x, y) in form.level.field.choices"
- :key="y"
- class="item"
- :data-value="x"
- :selected="form.level.value === x"
- >
- {{ y }}
- </div>
+ <td>
+ {{ member.full_name }}<br /><i>{{ member.username }}</i>
+ </td>
+ <td>
+ <!-- :selection.sync="memberForms[index].userLevel" -->
+ <div class="required field">
+ <Dropdown
+ :options="levelOptions"
+ :selected="member.userLevel"
+ :selection.sync="member.userLevel"
+ :search="true"
+ />
+ <!-- <div class="ui selection search dropdown">
+ <input
+ type="hidden"
+ name="level"
+ id="level"
+ v-model="member.level"
+ />
+ <div class="default text"></div>
+ <i class="dropdown icon"></i>
+ <div class="menu">
+ {% for x,y in form.level.field.choices %}
+ <div
+ v-for="(x, y) in form.level.field.choices"
+ :key="y"
+ class="item"
+ :data-value="x"
+ :selected="form.level.value === x"
+ >
+ {{ y }}
</div>
</div>
- {{ form.level.errors }}
</div>
- </td>
- </tr>
- </div>
- </div> -->
+ {{ form.level.errors }} -->
+ </div>
+ </td>
+ </tr>
+ <!-- </div> -->
</div>
</tbody>
</table>
<div class="ui divider"></div>
- <button type="submit" class="ui teal icon button">
+ <button
+ @click="validateMembers"
+ type="button"
+ class="ui teal icon button"
+ >
<i class="white save icon"></i> Enregistrer les changements
</button>
</form>
@@ -79,6 +79,8 @@
<script>
import frag from "vue-frag";
+import { mapState } from "vuex";
+import Dropdown from "@/components/Dropdown.vue";
export default {
name: "Project_members",
@@ -86,51 +88,35 @@ export default {
directives: {
frag,
},
+ components: {
+ Dropdown,
+ },
+
+ computed: {
+ ...mapState(["users"]),
+ },
data() {
return {
- formset: {
- non_form_errors: null,
- empty_form: {
- level: {
- label: null,
- },
- non_form_errors: null,
- management_form: null,
- forms: [
- {
- title: {
- value: "test",
- },
- },
- ],
- prefix: null,
- hidden_fields: null,
- title: {
- id_for_label: null,
- field: {
- max_length: null,
- },
- },
- nested: {
- management_form: null,
- },
- },
- management_form: null,
- forms: [],
- prefix: null,
- hidden_fields: null,
- title: {
- id_for_label: null,
- field: {
- max_length: null,
- },
- },
- nested: {
- management_form: null,
- },
- },
+ memberForms: [],
+ levelOptions: [
+ "Utilisateur connecté",
+ "Contributeur",
+ "Modérateur",
+ "Administrateur projet",
+ ],
};
},
+ methods: {
+ validateMembers() {
+ console.log("POST ", this.memberForms);
+ },
+ },
+
+ created() {
+ this.memberForms = this.users.map((el) => {
+ return { userLevel: null, ...el };
+ });
+ },
};
</script>
\ No newline at end of file
--
GitLab