strated to displaying falgcollection on the left of results

2020-11-26 22:45:46 +01:00
parent ed9e62718c
commit 6d9d18b7ba
13 changed files with 4627 additions and 38 deletions
@@ -26,6 +26,7 @@ import router from 'vuejs/route'
 import VUserBlock from 'vuejs/components/Block/UserBlock'
 import VMainContent from 'vuejs/components/Content/MainContent'
 import VSearchBlock from 'vuejs/components/Block/SearchBlock'
+import VLeftContent from 'vuejs/components/Content/LeftContent'

 import { mapState } from 'vuex'

@@ -36,7 +37,7 @@ import 'theme/assets/styles/main.scss'
  const MaterioTheme = function () {
    let _v_sitebranding_block, _v_user_block, _v_header_menu,
      _v_pagetitle_block, _v_search_block,
-      _v_main_content
+      _v_main_content, _v_left_content
    const _is_front = drupalSettings.path.isFront

    console.log('drupalSettings', drupalSettings)
@@ -71,6 +72,7 @@ import 'theme/assets/styles/main.scss'
        initVHeaderMenu()
        initVMainContent()
        initVSearchBlock()
+        initVLeftContent()
      }
      initVUserBlock()
    }
@@ -268,7 +270,15 @@ import 'theme/assets/styles/main.scss'
        render: h => h(VSearchBlock, { props: { blockid: id, formhtml: formhtml } })
      }).$mount('#' + id)
    }
-
+    function initVLeftContent () {
+      const id = 'content-left'
+      const $leftContent = document.getElementById(id)
+      // in any case create the vue
+      _v_left_content = new Vue({
+        store,
+        render: h => h(VLeftContent, { props: { id: id } })
+      }).$mount('#' + id)
+    }
    init()
  } // end MaterioTheme()

@@ -93,10 +93,22 @@ main[role="main"]{
  flex:1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
-  &>.wrapper{
+  >.scroller{
    width:100vw;
-    &>*{
+    >.wrapper{
      @extend %grided-width;
+      display: flex;
+      flex-direction: row-reverse;
+      #content-left{
+        flex-basis: $column_width*2+$column_goutiere;
+        // width:$column_width*2+$column_goutiere;
+        >*{
+          width:$column_width*2+$column_goutiere;
+        }
+      }
+      #content-center{
+        flex-basis: $column_width*10+$column_goutiere*9;
+      }
    }
  }
 }
@@ -390,6 +390,20 @@ aside.messages{
 // }


+//   ___         _           _       _         __ _
+//  / __|___ _ _| |_ ___ _ _| |_ ___| |   ___ / _| |_
+// | (__/ _ \ ' \  _/ -_) ' \  _|___| |__/ -_)  _|  _|
+//  \___\___/_||_\__\___|_||_\__|   |____\___|_|  \__|
+#content-left{
+  max-width:1px;
+  overflow-x: hidden;
+  transition: all 0.3s ease-in-out;
+  &.opened{
+    max-width: 500px;
+  }
+}
+
+
 //   __             _
 //  / _|_ _ ___ _ _| |_
 // |  _| '_/ _ \ ' \  _|
@@ -13,6 +13,7 @@ regions:
  header_left: 'Header left'
  header_right: 'Header right'
  header_bottom: 'Header bottom'
+  content_left: 'Content Left'
  content_top: 'Content Top'
  content: Content
  footer_left: 'Footer Left'
@@ -58,19 +58,28 @@
  </header>

  <main role="main">
-    <div class="wrapper">
-      {% if page.content.messages %}
-        <aside class="messages">
-          {{ page.content.messages }}
-        </aside>
-      {% endif %}
+    <div class="scroller">
+      <div class="wrapper">
+        <div id="content-left">
+          {% if page.content_left %}
+            {{ page.content_left }}
+          {% endif %}
+        </div>
+        <div id="content-center">
+          {% if page.content.messages %}
+            <aside class="messages">
+              {{ page.content.messages }}
+            </aside>
+          {% endif %}

-      <div id="content-top">
-        {{ page.content_top }}
+          <div id="content-top">
+            {{ page.content_top }}
+          </div>
+          <div id="main-content">
+            {{ page.content|without('messages') }}
+          </div>{# /.layout-content #}
+        </div>
      </div>
-      <div id="main-content">
-        {{ page.content|without('messages') }}
-      </div>{# /.layout-content #}
    </div>
  </main>

@@ -138,7 +138,6 @@ export default {
            this.loadingFlag = false;
          })
        }else{
-          
          this.flag({uuid: this.item.uuid, collid: collid})
          .then(data => {
            console.log("onFlagActionCard then", data);
@@ -0,0 +1,49 @@
+<template lang="html">
+  <div
+    :id="id"
+    :class="{opened: isopened}"
+  >
+    <FlagCollection v-if='openedCollid' :collection='flagcolls[openedCollid]'/>
+  </div>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+import { MA } from 'vuejs/api/ma-axios'
+import router from 'vuejs/route'
+
+import FlagCollection from 'vuejs/components/User/FlagCollection'
+
+export default {
+  router,
+  props:['id'],
+  data() {
+    return {
+      // isOpened: false
+    }
+  },
+  computed: {
+    ...mapState({
+      flagcolls: state => state.User.flagcolls,
+      openedCollid: state => state.User.openedCollid
+    }),
+    isopened () {
+      return this.openedCollid
+    }
+  },
+  beforeMount() {
+
+  },
+  methods: {
+
+  },
+  components: {
+    FlagCollection
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>
@@ -0,0 +1,60 @@
+<template>
+  <section class="flag-collection">
+    <h3>{{collection.name}}</h3>
+    <ul v-if="loadedItems">
+      <li
+        v-for="item in loadedItems"
+        :key="item.id"
+      >{{item.attributes.title}}</li>
+    </ul>
+    <span v-else class="loading">Loading</span>
+  </section>
+</template>
+
+<script>
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: "FlagCollection",
+  props: ['collection'],
+  data: () => ({
+    loadedItems: false
+  }),
+  computed: {
+    ...mapState({
+      flagcolls: state => state.User.flagcolls
+      // openedCollid: state => state.User.openedCollid
+    })
+  },
+  // watch: {
+  //   flagcolls (newv, oldv) {
+  //     console.log('watching flagcolls');
+  //     if( typeof this.flagcolls[this.collection.id].loadedItems !== 'undefined' ) {
+  //       this.loadedItems = this.flagcolls[this.collection.id].loadedItems
+  //     }
+  //   }
+  // },
+  created() {
+    this.unsubscribe = this.$store.subscribe((mutation, state) => {
+      if (mutation.type === 'User/setLoadedCollItems') {
+        this.loadedItems = state.User.flagcolls[this.collection.id].loadedItems
+      }
+    });
+  },
+  beforeDestroy() {
+    this.unsubscribe()
+  },
+  // beforeMount () {
+  //   if (typeof this.flagcolls[collection.id].loadedItems === 'undefined') {
+  //     this.
+  //   }
+  // },
+  // methods: {
+  //   ...mapActions({
+  //     loadFlagCollItems: 'User/loadFlagCollItems'
+  //   })
+  // }
+}
+</script>
+<style lang="scss" scoped>
+</style>
@@ -4,8 +4,11 @@
      class="mdi mdi-folder-outline"
    >My folders</h2>
    <ul>
-      <li  v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
-        <h5>{{ coll.name }} ({{ coll.items.length }})</h5>
+      <li v-if="flagcolls" v-for="coll in flagcolls" :key="coll.id">
+        <h5
+          :flagcollid="coll.id"
+          @click.prevent="onOpenFlagColl"
+        >{{ coll.name }} ({{ coll.items.length }})</h5>
        <div class="actions">
          <span
            class="delete-btn mdi"
@@ -64,7 +67,8 @@ export default {
  methods: {
    ...mapActions({
      createFlagColl: 'User/createFlagColl',
-      deleteFlagColl: 'User/deleteFlagColl'
+      deleteFlagColl: 'User/deleteFlagColl',
+      openFlagColl: 'User/openFlagColl'
    }),
    onCreateFlagColl () {
      console.log("UserFlags onCreateFlagColl", this.new_folder_name)
@@ -77,7 +81,7 @@ export default {
        })
    },
    onDeleteFlagColl (e) {
-      let flagcollid = e.target.getAttribute('flagcollid');
+      const flagcollid = e.target.getAttribute('flagcollid');
      console.log("UserFlags onDeleteFlagColl", flagcollid);
      this.is_deleting_folder = flagcollid;
      this.deleteFlagColl(flagcollid)
@@ -85,6 +89,14 @@ export default {
          // console.log("onDeleteFlagColl then", data);
          this.is_deleting_folder = false;
        })
+    },
+    onOpenFlagColl (e) {
+      const flagcollid = e.target.getAttribute('flagcollid');
+      console.log("UserFlags onDeleteFlagColl", flagcollid);
+      this.openFlagColl(flagcollid)
+        .then(() => {
+          // console.log("onDeleteFlagColl then", data);
+        })
    }
  }
 }
@@ -18,7 +18,7 @@ Vue.use(VueRouter)
 // const languages = ['en', 'fr'];
 // console.log('path aliases', (() => languages.map(l => `/${l}/base`))() );

-let basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix;
+const basePath = drupalSettings.path.baseUrl + drupalSettings.path.pathPrefix

 const routes = [
  {
@@ -32,11 +32,11 @@ const routes = [
    // }
  },
  {
-    name:'base',
+    name: 'base',
    path: `${basePath}base`,
    // path: `/base`,
    // alias: (() => languages.map(l => `/${l}/base`))(),
-    component: Base,
+    component: Base
    // components: {
    //   'base': Base
    // }
@@ -53,20 +53,20 @@ const routes = [
  //   ]
  // }
  {
-    name:'blabla',
+    name: 'blabla',
    path: `${basePath}blabla`,
    component: Blabla
  },
  {
-    name:'article',
+    name: 'article',
    path: `${basePath}blabla/:alias`,
-    component: Article,
+    component: Article
    // meta: { uuid:null }
  },
  {
-    name:'showrooms',
+    name: 'showrooms',
    path: `${basePath}showrooms`,
-    component: Showrooms,
+    component: Showrooms
    // meta: { uuid:null }
  },
  // {
@@ -77,7 +77,7 @@ const routes = [
  //   }
  // },
  {
-    name:'pricing',
+    name: 'pricing',
    path: `${basePath}pricing`,
    component: Pricing
  }
@@ -1,5 +1,5 @@
 import { REST } from 'vuejs/api/rest-axios'
-// import { JSONAPI } from 'vuejs/api/json-axios';
+import { JSONAPI } from 'vuejs/api/json-axios'
 import { MA } from 'vuejs/api/ma-axios'
 import qs from 'querystring-es3'

@@ -18,7 +18,8 @@ export default {
    isAdherent: false,
    canSearch: false,
    roles: [],
-    flagcolls: false
+    flagcolls: false,
+    openedCollid: null
  },

  // getters
@@ -84,6 +85,13 @@ export default {
    setFlagColls (state, flagcolls) {
      console.log('User setFlagColls', flagcolls)
      state.flagcolls = flagcolls
+    },
+    openFlagColl (state, collid) {
+      state.openedCollid = collid
+    },
+    setLoadedCollItems (state, data) {
+      console.log('setLoadedCollItems', data)
+      state.flagcolls[data.collid].loadedItems = data.items
    }
  },

@@ -262,6 +270,39 @@ export default {
          })
      })
    },
+    openFlagColl ({ commit, dispatch }, collid) {
+      console.log('user openFlagColl', collid)
+      commit('openFlagColl', collid)
+      dispatch('loadFlagCollItems', collid)
+    },
+    loadFlagCollItems ({ commit, state }, collid) {
+      console.log('loadFlagCollItems', state.flagcolls[collid].items_uuids)
+      const params = {
+        'filter[uuids-groupe][group][conjunction]': 'OR'
+      }
+      const uuids = state.flagcolls[collid].items_uuids
+      // console.log('uuids', uuids)
+      for (let i = 0; i < uuids.length; i++) {
+        let uuid = uuids[i]
+        // console.log('uuid', uuid)
+        params[`filter[${uuid}][condition][path]`] = 'id'
+        params[`filter[${uuid}][condition][value]`] = uuid
+        params[`filter[${uuid}][condition][operator]`] = '='
+        params[`filter[${uuid}][condition][memberOf]`] = 'uuids-groupe'
+      }
+      console.log('search JSONAPI params', params);
+      const q = qs.stringify(params)
+      return JSONAPI.get('node/materiau?' + q)
+        .then(({ data }) => {
+          console.log('user loadFlagCollItems data', data)
+          // dispatch('parseItems', { data: data.data, uuids: uuids })
+          commit('setLoadedCollItems', {collid: collid, items: data.data})
+        })
+        .catch((error) => {
+          console.warn('Issue with loadFlagCollItems', error)
+          Promise.reject(error)
+        })
+    },
    userLogout ({ commit, state }) {
      const credentials = qs.stringify({
        token: state.csrf_token