flagging unflagging cards

2020-11-24 14:07:10 +01:00
parent ffc4a88094
commit a38653f7ce
14 changed files with 476 additions and 81 deletions
--- a/web/themes/custom/materiotheme/assets/dist/main.css
+++ b/web/themes/custom/materiotheme/assets/dist/main.css
@@ -1631,6 +1631,37 @@ article.card {
      font-size: 0.693em;
      font-weight: 300;
      line-height: 1; }
+  article.card nav.tools {
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 21;
+    width: 1em;
+    background-color: #fff;
+    box-sizing: content-box;
+    padding: 0.3em 0.1em; }
+    article.card nav.tools > * {
+      overflow: visible;
+      position: relative; }
+      article.card nav.tools > * span.btn {
+        overflow: hidden;
+        font-size: 0.882em; }
+      article.card nav.tools > * .tool-content {
+        position: absolute;
+        top: 0px;
+        right: 100%;
+        width: 5em;
+        box-sizing: content-box;
+        padding: 0.3em;
+        background-color: #fff;
+        box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2); }
+    article.card nav.tools .tool.flags span.flag {
+      cursor: pointer;
+      font-size: 0.756em;
+      color: #bbb;
+      transition: color 0.3s ease-in-out; }
+      article.card nav.tools .tool.flags span.flag:hover, article.card nav.tools .tool.flags span.flag.isActive {
+        color: #1a1a1a; }
  article.card section.images {
    position: relative; }
    article.card section.images, article.card section.images * {
--- a/web/themes/custom/materiotheme/assets/dist/main.js
+++ b/web/themes/custom/materiotheme/assets/dist/main.js
--- a/web/themes/custom/materiotheme/assets/styles/main.scss
+++ b/web/themes/custom/materiotheme/assets/styles/main.scss
@@ -694,6 +694,45 @@ article.card{
      line-height: 1;
    }
  }
+  nav.tools{
+    position: absolute;
+    top: 0;
+    right: 0;
+    z-index: 21;
+    width: 1em;
+    background-color: #fff;
+    box-sizing: content-box;
+    padding: 0.3em 0.1em;
+    >*{
+      overflow: visible;
+      position: relative;
+      span.btn{
+        overflow: hidden;
+        font-size: 0.882em;
+      }
+      .tool-content{
+        position: absolute;
+        top: 0px;
+        right: 100%;
+        width: 5em;
+        box-sizing: content-box;
+        padding: 0.3em;
+        background-color: #fff;
+        box-shadow: -2px 3px 4px rgba(0, 0, 0, 0.2);
+      }
+    }
+    .tool.flags{
+      span.flag{
+        cursor: pointer;
+        font-size: 0.756em;
+        color: #bbb;
+        transition: color 0.3s ease-in-out;
+        &:hover, &.isActive{
+          color:#1a1a1a;
+        }
+      }
+    }
+  }
  section.images{
    position: relative;
    &, *{width: 100%; height:100%;}
--- a/web/themes/custom/materiotheme/vuejs/api/ma-axios.js
+++ b/web/themes/custom/materiotheme/vuejs/api/ma-axios.js
@@ -9,5 +9,6 @@ export const MA = axios.create({
  withCredentials: true,
  headers: {
    "Content-Type": "application/json"
+    // "X-CSRF-Token": "csrf_token"
  }
 })
--- a/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/Content/Card.vue
@@ -5,6 +5,27 @@
      <h4>{{ item.field_short_description }}</h4>
      <span class="ref">{{ item.field_reference }}</span>
    </header>
+    <nav class="tools">
+      <section class="tool flags">
+        <span class="btn mdi mdi-folder-outline"/>
+        <div class="tool-content">
+          <ul>
+            <li  v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
+              <span
+                class="flag mdi"
+                :class="[
+                  flagIsLoading(coll.id) ? 'mdi-loading mdi-spin' : flagIsActive(coll.id) ? 'mdi-close isActive' : 'mdi-plus'
+                ]"
+                :collid="coll.id"
+                @click.prevent="onFlagActionCard"
+              >
+                {{ coll.name }}
+              </span>
+            </li>
+          </ul>
+        </div>
+      </section>
+    </nav>
    <section class="images" v-switcher>
      <figure
        v-for="(img, index) in item.images"
@@ -23,15 +44,22 @@
 </template>

 <script>
+import { mapState, mapActions } from 'vuex'

 export default {
  name: "Card",
  props: ['item'],
  data() {
    return {
-      blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`
+      blanksrc:`${drupalSettings.path.themePath}/assets/img/blank.gif`,
+      loadingFlag: false
    }
  },
+  computed: {
+    ...mapState({
+      flagcolls: state => state.User.flagcolls
+    })
+  },
  directives: {
    lazy: {
      bind(img,binding){
@@ -79,6 +107,45 @@ export default {
        img.classList.remove('lazy')
      })
    }, {once : true})
+  },
+  methods: {
+    ...mapActions({
+      flag: 'User/flag',
+      unFlag: 'User/unFlag'
+    }),
+    flagIsActive(collid) {
+      // console.log(this.item.uuid);
+      // console.log(this.flagcolls[collid].items_uuids);
+      return this.flagcolls[collid].items_uuids.indexOf(this.item.uuid) !== -1;
+    },
+    flagIsLoading(collid) {
+      // console.log(this.item.uuid);
+      // console.log(this.flagcolls[collid].items_uuids);
+      return collid === this.loadingFlag;
+    },
+    onFlagActionCard (e) {
+      console.log("Card onFlagActionCard", isActive, e);
+      if (!this.loadingFlag) {
+        let collid = e.target.getAttribute('collid');
+        let isActive = this.flagIsActive(collid);
+        // console.log('collid', collid);
+        // console.log("this.item", this.item);
+        this.loadingFlag = collid;
+        if (isActive) {
+          this.unFlag({uuid: this.item.uuid, collid: collid})
+          .then(data => {
+            console.log("onFlagActionCard then", data);
+            this.loadingFlag = false;
+          })
+        }else{
+          this.flag({uuid: this.item.uuid, collid: collid})
+          .then(data => {
+            console.log("onFlagActionCard then", data);
+            this.loadingFlag = false;
+          })
+        }    
+      }
+    }
  }
 }

--- a/web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue
+++ b/web/themes/custom/materiotheme/vuejs/components/User/UserFlags.vue
@@ -4,14 +4,14 @@
      class="mdi mdi-folder-outline"
    >My folders</h2>
    <ul>
-      <li  v-if="flags" v-for="flag in flags" :key="flag.id">
-        <h5>{{ flag.name }}</h5>
+      <li  v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
+        <h5>{{ coll.name }} ({{ coll.items.length }})</h5>
        <div class="actions">
          <span
            class="delete-btn mdi"
            :class="flagDeletingClassObj"
-            :flagid="flag.id"
-            @click.prevent="onDeleteFlag"
+            :flagcollid="coll.id"
+            @click.prevent="onDeleteFlagColl"
          />
        </div>
      </li>
@@ -23,7 +23,7 @@
        <span
          class="add-btn mdi"
          :class="addFlagBtnClassObj"
-          @click.prevent="onCreateFlag"
+          @click.prevent="onCreateFlagColl"
        />
      </li>
    </ul>
@@ -43,7 +43,7 @@ export default {
  }),
  computed: {
    ...mapState({
-      flags: state => state.User.flags
+      flagcolls: state => state.User.flagcolls
    }),
    addFlagBtnClassObj() {
      return {
@@ -63,26 +63,26 @@ export default {
  },
  methods: {
    ...mapActions({
-      createFlag: 'User/createFlag',
-      deleteFlag: 'User/deleteFlag'
+      createFlagColl: 'User/createFlagColl',
+      deleteFlagColl: 'User/deleteFlagColl'
    }),
-    onCreateFlag () {
-      console.log("UserFlags onCreateFlag", this.new_folder_name)
+    onCreateFlagColl () {
+      console.log("UserFlags onCreateFlagColl", this.new_folder_name)
      this.is_creating_folder = true;
-      this.createFlag(this.new_folder_name)
+      this.createFlagColl(this.new_folder_name)
        .then(data => {
-          console.log("onCreateFlag then", data);
+          console.log("onCreateFlagColl then", data);
          this.new_folder_name = "";
          this.is_creating_folder = false;
        })
    },
-    onDeleteFlag (e) {
-      let flagid = e.target.getAttribute('flagid');
-      console.log("UserFlags onDeleteFlag", flagid);
-      this.is_deleting_folder = flagid;
-      this.deleteFlag(flagid)
+    onDeleteFlagColl (e) {
+      let flagcollid = e.target.getAttribute('flagcollid');
+      console.log("UserFlags onDeleteFlagColl", flagcollid);
+      this.is_deleting_folder = flagcollid;
+      this.deleteFlagColl(flagcollid)
        .then(() => {
-          // console.log("onDeleteFlag then", data);
+          // console.log("onDeleteFlagColl then", data);
          this.is_deleting_folder = false;
        })
    }
--- a/web/themes/custom/materiotheme/vuejs/store/modules/search.js
+++ b/web/themes/custom/materiotheme/vuejs/store/modules/search.js
@@ -103,6 +103,7 @@ export default {
    getItems({ dispatch, commit, state }, uuids) {
      let params = {
        // include: 'images', // no needs to include thanks to consumers_image_styles module
+        // include: 'drupal_internal__nid',
        'filter[uuids-groupe][group][conjunction]': 'OR'
      };
      for (var i = 0; i < uuids.length; i++) {
@@ -153,7 +154,7 @@ export default {

        // get images included values
        let img_src = relations.images.data
-        console.log('img_src', img_src);
+        // console.log('img_src', img_src);
        // this is a temporary deactivation of images
        // img_src = [];
        item.images = []
--- a/web/themes/custom/materiotheme/vuejs/store/modules/user.js
+++ b/web/themes/custom/materiotheme/vuejs/store/modules/user.js
@@ -11,15 +11,14 @@ export default {
    uid: null,
    // username: '',
    mail: "",
-    token: null,
-    csrftoken: null,
+    csrf_token: null,
    logout_token: null,
    isloggedin: false,
    isAdmin: false,
    isAdherent: false,
    canSearch: false,
    roles: [],
-    flags: false
+    flagcolls: false
  },

  // getters
@@ -28,13 +27,14 @@ export default {
  // mutations
  mutations: {
    SetCsrftoken(state, token) {
-      state.csrftoken = token;
+      console.log('SetCsrftoken', token);
+      state.csrf_token = token;
    },
    setToken(state, data) {
      state.uid = data.current_user.uid;
      // state.username = data.username;
      state.mail = data.current_user.mail;
-      state.token = data.csrf_token;
+      state.csrf_token = data.csrf_token;
      state.isloggedin = true;
      state.logout_token = data.logout_token;
    },
@@ -71,7 +71,7 @@ export default {
      console.log("setLoggedOut state", state);
      state.uid = null;
      state.mail = "";
-      state.token = null;
+      state.csrf_token = null;
      state.isloggedin = false;
      state.logout_token = null;
      if (state.isAdmin) {
@@ -81,9 +81,9 @@ export default {
      state.asAdmin = false;
      state.canSearch = false;
    },
-    setFlags(state, flags) {
-      console.log("User setFlags", flags);
-      state.flags = flags;
+    setFlagColls(state, flagcolls) {
+      console.log("User setFlagColls", flagcolls);
+      state.flagcolls = flagcolls;
    }
  },

@@ -134,25 +134,33 @@ export default {
        });
    },
    getUser({ dispatch, commit, state }) {
-      const params = {
-        token: state.token
-      };
-      return REST.get(`/user/${state.uid}?_format=json`, params)
-        .then(({ data }) => {
-          console.log("user REST getUser data", data);
-          console.log("roles", data.roles);
-          commit("setUser", data);
-          if (data.roles) {
-            commit("setRoles", data.roles);
-          }
-          dispatch("getUserFlags");
-        })
-        .catch(error => {
-          console.warn("Issue with getUser", error);
-          Promise.reject(error);
+      return new Promise((resolve, reject) => {
+        REST.get("/session/token").then(({ data }) => {
+          console.log('csrftoken', data);
+          commit("SetCsrftoken", data);
+          console.log('state.csrf_token', state.csrf_token);
+          const params = {
+            token: state.csrf_token
+          };
+          REST.get(`/user/${state.uid}?_format=json`, params)
+            .then(({ data }) => {
+              console.log("user REST getUser data", data);
+              console.log("roles", data.roles);
+              commit("setUser", data);
+              if (data.roles) {
+                commit("setRoles", data.roles);
+              }
+              dispatch("getUserFlagColls");
+              resolve();
+            })
+            .catch(error => {
+              console.warn("Issue with getUser", error);
+              Promise.reject(error);
+            });
        });
+      });
    },
-    getUserFlags({ dispatch, commit, state }) {
+    getUserFlagColls({ dispatch, commit, state }) {
      // flags
      // REST.get('/flagging_collection/1?_format=json')
      //   .then(( data ) => {
@@ -162,10 +170,11 @@ export default {
      //       console.warn('Issue USER TEST FLAG REST', error)
      //       Promise.reject(error)
      //   })
+
      return MA.get("materio_flag/user_flagging_collections")
        .then(({ data }) => {
          console.log("user MA getFlags data", data);
-          commit("setFlags", data);
+          commit("setFlagColls", data);
        })
        .catch(error => {
          console.warn("Issue USER MA getFlags", error);
@@ -173,17 +182,17 @@ export default {
        });
    },
    // https://drupal.stackexchange.com/questions/248539/cant-get-flagging-api-to-accept-post-request
-    createFlag({ dispatch, commit, state }, new_flag_name) {
-      console.log("user createFlag", new_flag_name);
+    createFlagColl({ dispatch, commit, state }, new_collection_name) {
+      console.log("user createFlagColl", new_collection_name);
      return new Promise((resolve, reject) => {
        const params = {
-          name: new_flag_name
+          name: new_collection_name
        };
        MA.post("materio_flag/create_user_flagging_collection", params)
          .then(({ data }) => {
-            console.log("user MA createFlag data", data);
+            console.log("user MA createFlagColl data", data);
            if (data.status) {
-              dispatch('getUserFlags').then(() => {
+              dispatch('getUserFlagColls').then(() => {
                resolve();
              })
            }
@@ -194,16 +203,16 @@ export default {
          });
      });
    },
-    deleteFlag({ dispatch, commit, state }, flagid) {
-      console.log("user deleteFlag", flagid);
+    deleteFlagColl({ dispatch, commit, state }, flagcollid) {
+      console.log("user deleteFlagColl", flagcollid);
      return new Promise((resolve, reject) => {
        const params = {
-          flagid: flagid
+          flagcollid: flagcollid
        };
        MA.post("materio_flag/delete_user_flagging_collection", params)
          .then(({ data }) => {
-            console.log("user MA deleteFlag data", data);
-            dispatch('getUserFlags').then(() =>{
+            console.log("user MA deleteFlagColl data", data);
+            dispatch('getUserFlagColls').then(() =>{
              resolve();
            });
          })
@@ -213,9 +222,43 @@ export default {
          });
      });
    },
+    flag({ dispatch, commit, state }, args) {
+      console.log("user flag", args.uuid, args.collid);
+      const params = {
+        flagid: state.flagcolls[args.collid].flag_id,
+        uuid: args.uuid,
+        flagcollid: args.collid
+      };
+      return MA.post(`materio_flag/flag`, params)
+        .then(({ data }) => {
+          console.log("user MA flag", data);
+          dispatch('getUserFlagColls')
+        })
+        .catch(error => {
+          console.warn("Issue USER MA flag", error);
+        });
+
+    },
+    unFlag({ dispatch, commit, state }, args) {
+      console.log("user unFlag", args.uuid, args.collid);
+      const params = {
+        flagid: state.flagcolls[args.collid].flag_id,
+        uuid: args.uuid,
+        flagcollid: args.collid
+      };
+      return MA.post(`materio_flag/unflag`, params)
+        .then(({ data }) => {
+          console.log("user MA unFlag", data);
+          dispatch('getUserFlagColls')
+        })
+        .catch(error => {
+          console.warn("Issue USER MA unFlag", error);
+        });
+
+    },
    userLogout({ commit, state }) {
      const credentials = qs.stringify({
-        token: state.token
+        token: state.csrf_token
      });
      REST.post("/user/logout", credentials)
        .then(resp => {