bibliography improvment #1257

assets/css/app.scss

@@ -31,8 +31,8 @@ that is currently Firefox-only */
 
 body{
   color: #1a1a1a;
-  background-image: url('/static/img/grille-ligne-de-base.png');
-  background-repeat: repeat;
+  // background-image: url('/static/img/grille-ligne-de-base.png');
+  // background-repeat: repeat;
 }
 
 #root{
@@ -927,14 +927,88 @@ section[role="main-content"]{
       padding:0;
       li{
         padding:0;
-        margin:0 0 1.5em 0;
+        margin:0 0 $base-line 0;
         h2{
           margin:0;
-          @include title2black;
+          @include title1black;
         }
         p{
           margin:0;
         }
+
+        span.date{
+          @include title2black;
+          font-weight: 600;
+        }
+        
+        aside{
+          overflow: hidden;
+          h5{
+            @include title2black;
+            margin: $base-line / 2 0;
+            cursor: pointer;
+            // padding-left: 1em;
+            // position: relative;
+            &:before{
+              cursor: pointer;
+              content:"\2304";
+              position: relative;
+              display: inline-block;
+              top: -4px;
+              // transform-origin: center;
+              // transform: rotateZ(-90deg);
+            }
+          }
+          ul{
+            max-height: 1px;
+            transition: all 0.3s ease-in-out;
+            padding-left: 1em;
+            li{
+              margin-bottom: $base-line / 2;
+            }
+          }
+          
+          &.opened{
+            h5{
+              &:before{
+                top: 4px;
+                content:"\2303";
+                // transform: rotateZ(90deg);
+              }
+            }
+            ul{
+              max-height: 100em;
+            }
+
+          } 
+        }
+      }
+      &.manifestations{
+        li{
+          max-height: 0.2px;
+          margin-bottom:0;
+          overflow: hidden;
+          transition: all 1s ease-in-out;
+          &.active{
+            max-height: 10em;
+          }
+          .wrapper{
+            margin-bottom: $base-line;
+          }
+        }
+      }
+    }
+    ul.authors-filters{
+      li{
+        @include title4black;
+        line-height: $base-line / 2;
+        span{
+          cursor: pointer;
+          color: $gris;
+          &.active{
+            color: $grisfonce;
+          }
+        }
       }
     }
   }

assets/css/base/_fonts.scss

@@ -55,6 +55,15 @@ footer[role="tools"] .row>nav{
   line-height: $base-line / 2;
 }
 
+@mixin title2blue {
+  @include fontserif;
+  font-size: 1.134em;
+  color: $grisfonce;
+  font-weight: 400;
+  margin:0;
+  line-height: $base-line / 2;
+}
+
 @mixin title3black {
   @include fontserif;
   font-size: 1em;

src/pages/Bibliographie.vue

@@ -28,39 +28,94 @@
     </template>
 
     <!-- default slot -->
-    <!-- expressions or manifestations list -->
-    <template v-if="!uuid">
+    <!-- expressions list -->
+    <template v-if="!uuid && type === 'expressions'">
       <ul class="item-list">
-        <li v-for="item in content" :key="item.uuid">
+        <li v-for="item in expressions" :key="item.uuid">
           <h2>
             <router-link
+              v-if="item.authors"
               :to="{ name:'bibliographieItem', params:{ type:type, uuid:item.uuid } }"
             >
               {{ item.authors }}
             </router-link>
+            <span v-else>/!\ No authors /!\</span>
           </h2>
           <p class="date">{{ item.dates }}</p>
-          <p class="titles">{{ item.titles }}</p>
+          <em class="titles">{{ item.titles }}</em>
+          <aside v-if="item.manifestations.length">
+            <h5
+              @click.prevent="onToggleManifs"
+              @keyup.enter="onToggleManifs"
+            >Manifestations</h5>
+            <ul>
+              <li v-for="manif in item.manifestations" :key="manif.uuid">
+                <span class="date">{{ manif.dates }} </span>
+                <router-link
+                  :to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:manif.uuid } }"
+                >
+                  <em>{{ manif.titles }}</em>
+                </router-link>
+              </li>
+            </ul>
+          </aside>
+        </li>
+      </ul>
+    </template>
+    <!-- manifestations list -->
+    <template v-if="!uuid && type === 'manifestations'">
+      <ul class="item-list manifestations">
+        <li
+          v-for="item in manifestations" :key="item.uuid"
+          :class="isInActiveAuthors(item.authors)"
+        >
+          <div class="wrapper">
+            <span class="date">{{ item.dates }} </span>
+            <router-link
+              :to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:item.uuid } }"
+            >
+              <em class="titles">{{ item.titles }}</em>
+            </router-link>
+            <!-- <p class="authors">{{ item.authors }}</p> -->
+          </div>
         </li>
       </ul>
     </template>
     <!-- or item -->
     <template v-else>
       <div class="biblio-item">
-        <h2>{{ content.authors }}</h2>
-        <p v-if="content.dates" class="date">{{ content.dates }}</p>
-        <p class="titles">{{ content.titles }}</p>
-        <ul vi-if="content.manifestations.length" class="item-list">
-          <li v-for="item in content.manifestations" :key="item.uuid">
+        <h2>{{ item.authors }}</h2>
+        <p v-if="item.dates" class="date">{{ item.dates }}</p>
+        <p class="titles">{{ item.titles }}</p>
+        <p class="tei">{{ item.tei }}</p>
+        <ul vi-if="item.manifestations.length" class="item-list">
+          <li v-for="manif in item.manifestations" :key="manif.uuid">
             <router-link
-              :to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:item.uuid } }"
-              v-html="item.tei"
+              :to="{ name:'bibliographieItem', params:{ type:'manifestations', uuid:manif.uuid } }"
+              v-html="manif.tei"
             />
           </li>
         </ul>
+        <ul vi-if="item.idno.length" class="item-list">
+          <li v-for="id in item.idno" :key="id.url">
+            <a :href="id.url">{{ id.type }}: {{ id.url }}</a>
+          </li>
+        </ul>
       </div>
     </template>
-    <template #nav />
+    <template #nav>
+      <ul v-if="!uuid && type === 'manifestations'" class="authors-filters">
+        <li
+          v-for="author in authors" :key="author"
+        >
+          <span
+            :class="isInActiveAuthors(author)"
+            @click.prevent="onToggleAuthors(author)"
+            @keyup.enter="onToggleAuthors(author)"
+          >{{ author }}</span>
+        </li>
+      </ul>
+    </template>
   </MainContentLayout>
 </template>
 
@@ -82,32 +137,145 @@ export default {
     uuid: String
   },
   data: () => ({
-    content: Array
+    content: Array,
+    manifestations: Array,
+    expressions: Array,
+    authors: Array,
+    activeAuthors: Array,
+    item: Array
   }),
+  computed: {
+  },
   watch: {
     $route (to, from) {
-      this.getContent()
+      console.log('watch $route to', to)
+      // this.getContent()
+      if (to.params.uuid) {
+        this.getItem(to.params.type, to.params.uuid)
+      }
     }
   },
   created () {
     // this.type = this.$route.params.type || 'expressions'
     // this.uuid = this.$route.params.id || null
+    this.activeAuthors = []
     this.getContent()
+    if (this.$route.params.uuid) {
+      this.getItem(this.$route.params.type, this.$route.params.uuid)
+    }
   },
   methods: {
     getContent () {
-      // ?_format=json
-      REST.get(`${window.apipath}/bibliography/${this.type}/${this.uuid || ''}`, {})
+      REST.get(`${window.apipath}/bibliography/expressions`, {})
         .then(({ data }) => {
-          console.log('Biblio REST: data', data)
+          console.log('Biblio REST expressions: data', data)
           if (data.content) {
-            this.content = data.content
+            this.expressions = data.content
+            REST.get(`${window.apipath}/bibliography/manifestations`, {})
+              .then(({ data }) => {
+                console.log('Biblio REST manifestations: data', data)
+                if (data.content) {
+                  this.manifestations = data.content
+                }
+                this.parseContents()
+              })
+              .catch((error) => {
+                console.warn('Issue with bibliographie manifestations', error)
+                Promise.reject(error)
+              })
           }
         })
         .catch((error) => {
-          console.warn('Issue with bibliographie', error)
+          console.warn('Issue with bibliographie expressions', error)
           Promise.reject(error)
         })
+      // // ?_format=json
+      // REST.get(`${window.apipath}/bibliography/${this.type}/${this.uuid || ''}`, {})
+      //   .then(({ data }) => {
+      //     console.log('Biblio REST: data', data)
+      //     if (data.content) {
+      //       this.content = data.content
+      //     }
+      //   })
+      //   .catch((error) => {
+      //     console.warn('Issue with bibliographie', error)
+      //     Promise.reject(error)
+      //   })
+    },
+    getItem (type, uuid) {
+      REST.get(`${window.apipath}/bibliography/${type}/${uuid}`, {})
+        .then(({ data }) => {
+          console.log('Biblio REST item: data', data)
+          if (data.content) {
+            this.item = data.content
+          }
+        })
+        .catch((error) => {
+          console.warn('Issue with bibliographie get item', error)
+          Promise.reject(error)
+        })
+    },
+    parseContents () {
+      this.expressions = this.expressions.sort((a, b) => {
+        let Adate = parseInt(a.dates)
+        let Bdate = parseInt(b.dates)
+        if (Adate < Bdate) {
+          return -1
+        } else if (Adate > Bdate) {
+          return 1
+        } else {
+          return 0
+        }
+      })
+      this.manifestations = this.manifestations.sort((a, b) => {
+        let Adate = parseInt(a.dates)
+        let Bdate = parseInt(b.dates)
+        if (Adate < Bdate) {
+          return -1
+        } else if (Adate > Bdate) {
+          return 1
+        } else {
+          return 0
+        }
+      })
+
+      this.authors = []
+      this.manifestations.forEach(manif => {
+        // console.log('this.authors', this.authors)
+        if (this.authors.indexOf(manif.authors) === -1) {
+          this.authors.push(manif.authors)
+          this.activeAuthors.push(manif.authors)
+        }
+        // console.log('authors', this.authors)
+      })
+
+      this.expressions.forEach((expr, i) => {
+        let manifs = []
+        this.manifestations.forEach((manif, j) => {
+          if (manif.authors !== '' && manif.authors === expr.authors) {
+            manifs.push(manif)
+          }
+        })
+        this.expressions[i].manifestations = manifs
+      })
+      this.content = this.expressions
+      // console.log(this.expressions)
+    },
+    onToggleManifs (e) {
+      console.log('togle manifs', e)
+      let aside = e.originalTarget.parentNode
+      // console.log('aside', aside)
+      aside.classList.toggle('opened')
+    },
+    isInActiveAuthors (authors) {
+      return this.activeAuthors.indexOf(authors) !== -1 ? 'active' : null
+    },
+    onToggleAuthors (author) {
+      if (this.activeAuthors.indexOf(author) === -1) {
+        this.activeAuthors.push(author)
+      } else {
+        this.activeAuthors.splice(this.activeAuthors.indexOf(author), 1)
+      }
     }
   }
 }