redesigned index nominum item page

assets/css/app.scss

@@ -312,73 +312,139 @@ section[role="main-content"]{
         color: $bleuroilight;
         font-size: 0.7em;
       }
+
+      .attested-forms{
+        ul{
+          // >li{
+          //   margin: 0 0 1em 0;
+          //   li{
+          //     margin: 0 0 0.5em 0;
+          //   }
+          // }
+        }
+        a{
+          @include title4grey;
+          color: $grisfonce;
+          font-weight: 400;
+        }
+      }
+    }
+    .tabs{
+      border-bottom: 1px solid $bleuroilight;
+      margin-bottom: $base-line / 2;
+      .tab{
+        cursor: pointer;
+        border-radius: 5px 5px 0 0;
+        z-index: 10;
+        display: inline-block;
+        margin-bottom: -2px;
+        padding: 0.3em 0.5em;
+        border: 1px solid $bleuroilight;
+        &.active{
+          border-bottom: 2px solid white;
+        }
+      }
     }
     .occurences{
       >ul{
         >li{
-          padding:0 0 2em 0;
+          padding:0 0 $base-line / 2 0;
           h3{
             @include title2black;
-            padding:0 0 0.5em 0;
+            padding:0 0 $base-line / 2 0;
             color: $bleuroi;
           }
           >ul{
             >li{
-              padding:0 0 0.5em 0;
+              // padding:0 0 0.5em 0;
               section{
                 h4{
                   @include title3black;
                   display: inline-block;
-                }
+                  a{
-                span.open-close{
+                    span.form{
-                  cursor: pointer;
+                      font-style: italic;
-                  display: inline-block;
-                  svg{
-                    transform: rotate(-90deg) scale(0.8);
-                    transition: transform 0.3s ease-in-out;
-                    path{
-                      fill:$bleuroi;
                     }
                   }
                 }
-                div.text{
+                // ? c'est quoi ça ?
-                  max-height: 0;
+                // span.open-close{
-                  transition: max-height 0.3s ease-in-out;
+                //   cursor: pointer;
-                  overflow: hidden;
+                //   display: inline-block;
-                  box-sizing: content-box;
+                //   svg{
-                  p, h1, h2, h3, h4, h5, h6{
+                //     transform: rotate(-90deg) scale(0.8);
-                    margin: 0.5em 0 0 0;
+                //     transition: transform 0.3s ease-in-out;
-                  }
+                //     path{
-                }
+                //       fill:$bleuroi;
-                a.lire-plus{
+                //     }
-                  color: $bleuroi;
+                //   }
-                  opacity: 0;
+                // }
-                  display: inline-block;
+                // div.text{
-                  height: 0;
+                //   max-height: 0;
-                  overflow: hidden;
+                //   transition: max-height 0.3s ease-in-out;
-                  transition: height, opacity 0.3s ease-in-out;
+                //   overflow: hidden;
-                }
+                //   box-sizing: content-box;
-                &.opened{
+                //   p, h1, h2, h3, h4, h5, h6{
-                  span.open-close{
+                //     margin: 0.5em 0 0 0;
-                    cursor: pointer;
+                //   }
-                    display: inline-block;
+                // }
-                    svg{
+                // a.lire-plus{
-                      transform: scale(0.8) rotate(0);
+                //   color: $bleuroi;
-                    }
+                //   opacity: 0;
-                  }
+                //   display: inline-block;
-                  div.text{
+                //   height: 0;
-                    max-height:100px;
+                //   overflow: hidden;
-                  }
+                //   transition: height, opacity 0.3s ease-in-out;
-                  a.lire-plus{
+                // }
-                    opacity: 1;
+                // &.opened{
-                    height:1em;
+                //   span.open-close{
-                  }
+                //     cursor: pointer;
+                //     display: inline-block;
+                //     svg{
+                //       transform: scale(0.8) rotate(0);
+                //     }
+                //   }
+                //   div.text{
+                //     max-height:100px;
+                //   }
+                //   a.lire-plus{
+                //     opacity: 1;
+                //     height:1em;
+                //   }
+                // }
+              }
+            }
+          }
+        }
+      }
+    }
+    .attested-forms-occurences{
+      ul{
+        >li{
+          margin: 0 0 1em 0;
+          h3{
+            @include title2black;
+            padding:0 0 $base-line / 2 0;
+          }
+          li{
+            margin: 0 0 0.5em 0;
+            h4{
+              @include title3black;
+              display: inline-block;
+              a{
+                span.edition{
+                  font-style: italic;
                 }
               }
             }
           }
         }
       }
+      a{
+        @include title4grey;
+        color: $grisfonce;
+        font-weight: 400;
+      }
     }
     nav{
       h3{
@@ -390,21 +456,6 @@ section[role="main-content"]{
         margin:0 0 0.5em;
         color: $bleuroi;
       }
-      .attested-forms{
-        ul{
-          >li{
-            margin: 0 0 1em 0;
-            li{
-              margin: 0 0 0.5em 0;
-            }
-          }
-        }
-        a{
-          @include title4grey;
-          color: $grisfonce;
-          font-weight: 400;
-        }
-      }
     }
   }
 

assets/css/base/_fonts.scss

@@ -51,6 +51,7 @@ footer[role="tools"] .row>nav{
   color: $grisfonce;
   font-weight: 400;
   margin:0;
+  line-height: $base-line / 2;
 }
 
 @mixin title3black {
@@ -59,6 +60,7 @@ footer[role="tools"] .row>nav{
   color: $grisfonce;
   font-weight: 400;
   margin:0;
+  line-height: $base-line / 2;
 }
 
 @mixin title4black {

src/components/Content/Forme.vue

@@ -0,0 +1,128 @@
+<template>
+  <section :class="{opened: isopened}">
+    <h4>
+      <a
+        v-if="oc.title"
+        :href="'/edition/'+oc.ed.uuid+'/'+oc.uuid+'/'+form"
+        :uuid="oc.uuid"
+        :eduuid="oc.ed.uuid"
+        :form="form"
+        @click.prevent="onGoToText"
+        @keyup.enter="onGoToText"
+      >
+        {{ oc.title }} <span v-if="oc.ed.uuid" class="edition">( {{ editionTitle }} )</span>
+        <!-- <span v-if="oc.form" class="form">( "{{ oc.form }}" )</span> -->
+      </a>
+    </h4>
+    <!-- <span
+      class="open-close"
+      @click.prevent="onOpenPreview"
+      @keyup.enter="onOpenPreview"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" width="14" height="10" role="presentation" class="vs__open-indicator">
+        <path d="M9.211364 7.59931l4.48338-4.867229c.407008-.441854.407008-1.158247 0-1.60046l-.73712-.80023c-.407008-.441854-1.066904-.441854-1.474243 0L7 5.198617 2.51662.33139c-.407008-.441853-1.066904-.441853-1.474243 0l-.737121.80023c-.407008.441854-.407008 1.158248 0 1.600461l4.48338 4.867228L7 10l2.211364-2.40069z" />
+      </svg>
+    </span> -->
+    <!-- <div v-if="content" class="text" v-html="tei" /> -->
+    <!-- <a
+      v-if="content"
+      class="lire-plus"
+      :href="'/edition/'+ed.item+'/'+oc.uuid"
+      :uuid="oc.uuid"
+      :eduuid="ed.item"
+      @click.prevent="onGoToText"
+      @keyup.enter="onGoToText"
+    >
+      lire plus
+    </a> -->
+  </section>
+</template>
+<script>
+
+// import { REST } from 'api/rest-axios'
+import { mapState, mapActions } from 'vuex'
+
+export default {
+  name: 'Occurence',
+  props: {
+    form: String,
+    oc: Object
+  },
+  data: () => ({
+    content: null,
+    isopened: false,
+    tei: ''
+  }),
+  computed: {
+    ...mapState({
+      editionsbyuuid: state => state.Corpus.editionsbyuuid
+    }),
+    editionTitle () {
+      return this.editionsbyuuid[this.oc.ed.uuid].title
+    }
+  },
+  created () {
+    console.log('occurence beforeCreate')
+    // REST.get(`${window.apipath}/items/` + this.oc.uuid, {})
+    //   .then(({ data }) => {
+    //     console.log('occurence text REST: data', data)
+    //     if (data.content) {
+    //       this.content = data.content
+    //       const subString = this.content.tei.substr(0, 500)
+    //       this.tei = subString.substr(0, subString.lastIndexOf(' ')) + ' &hellip;'
+    //     }
+    //   })
+    //   .catch((error) => {
+    //     console.warn('Issue with nominum', error)
+    //     Promise.reject(error)
+    //   })
+  },
+  methods: {
+    ...mapActions({
+      addHistoryItem: 'History/addItem'
+    }),
+    onGoToText (e) {
+      console.log('clicked on text occurence', e, this.oc.title, this.oc.ed)
+
+      if (e.target.getAttribute('eduuid')) {
+        this.addHistoryItem({
+          id: e.target.getAttribute('eduuid'),
+          textid: e.target.getAttribute('uuid'),
+          title: this.oc.title,
+          editionTitle: this.editionTitle
+        })
+        // if (e.target.getAttribute('form')) {
+        //   this.$router.push({
+        //     name: `editiontext`,
+        //     params: {
+        //       id: e.target.getAttribute('eduuid'),
+        //       textid: e.target.getAttribute('uuid')
+        //     }
+        //   })
+        // } else {
+        this.$router.push({
+          name: `editiontextextract`,
+          params: {
+            id: e.target.getAttribute('eduuid'),
+            textid: e.target.getAttribute('uuid'),
+            extract: e.target.getAttribute('form')
+          }
+        })
+        // }
+      } else {
+        this.$router.push({
+          name: `edition`,
+          params: {
+            id: e.target.getAttribute('uuid')
+          }
+        })
+      }
+    },
+    onOpenPreview (e) {
+      this.isopened = !this.isopened
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>

src/components/Content/IndexItemOcurrences.vue

@@ -1,55 +1,90 @@
 <template>
-  <section class="occurences">
+  <div>
-    <ul>
+    <div class="tabs">
-      <li
+      <span
-        v-for="ed in content.occurences"
+        v-if="content.occurences"
-        :key="ed.item"
+        class="tab"
-      >
+        :class="{ active: tab === 'occurences' }"
-        <h3>
+        @click.prevent="onclickTab('occurences')"
-          <a
+        @keyup.enter="onclickTab('occurences')"
-            :href="'/edition/'+ed.item"
+      >Occurences</span>
-            :uuid="ed.item"
+      <span
-            @click.prevent="onclick"
+        v-if="content.attestedForms"
-            @keyup.enter="onclick"
+        class="tab"
-            v-html="ed.biblio"
+        :class="{ active: tab === 'formes' }"
-          />
+        @click.prevent="onclickTab('formes')"
-        </h3>
+        @keyup.enter="onclickTab('formes')"
-        <ul>
+      >Formes attestées</span>
-          <li
+    </div>
-            v-for="oc in ocAsArray(ed.occurences)"
+    <section v-if="content.occurences" v-show="tab === 'occurences'" class="occurences">
-            :key="oc.id"
+      <ul>
-          >
+        <li
-            <!-- <li
+          v-for="ed in content.occurences"
-              v-for="oc in ed.occurences"
+          :key="ed.item"
-              :key="oc.uuid"
+        >
-            > -->
+          <h3>
-            <occurence :ed="ed" :oc="oc" />
+            <a
-          </li>
+              :href="'/edition/'+ed.item"
-        </ul>
+              :uuid="ed.item"
-      </li>
+              v-html="ed.biblio"
-    </ul>
+            />
-  </section>
+          </h3>
+          <ul>
+            <li
+              v-for="oc in ocAsArray(ed.occurences)"
+              :key="oc.id"
+            >
+              <!-- <li
+                v-for="oc in ed.occurences"
+                :key="oc.uuid"
+              > -->
+              <occurence v-if="oc.title" :ed="ed" :oc="oc" />
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+    <section v-if="content.attestedForms" v-show="tab === 'formes'" class="attested-forms-occurences">
+      <!-- <h3>Attested forms</h3> -->
+      <ul>
+        <li v-for="(af, i) in content.attestedForms" :key="i">
+          <h3 class="form">{{ af.title }}</h3>
+          <ul>
+            <li v-for="(oc, j) in af.occurences" :key="j">
+              <forme :form="af.title" :oc="oc" />
+            </li>
+          </ul>
+        </li>
+      </ul>
+    </section>
+
+  </div>
 </template>
 
 <script>
 import Occurence from './Occurence'
+import Forme from './Forme'
 
 export default {
   name: 'IndexItemOcurrences',
   components: {
-    Occurence
+    Occurence,
+    Forme
   },
   props: {
     content: Object
   },
   data: () => ({
-
+    tab: 'occurences'
   }),
   methods: {
     ocAsArray (oc) {
       // not necesseary anymore (KB #758)
       console.log('Array.isArray(oc)', Array.isArray(oc))
       return Array.isArray(oc) ? oc : [oc]
+    },
+    onclickTab (tab) {
+      this.tab = tab
     }
   }
 }

src/components/Content/Occurence.vue

@@ -9,7 +9,7 @@
         @click.prevent="onGoToText"
         @keyup.enter="onGoToText"
       >
-        {{ oc.title }}
+        {{ oc.title }} <span v-if="oc.form" class="form">( "{{ oc.form }}" )</span>
       </a>
     </h4>
     <!-- <span

src/pages/Nominum.vue

@@ -16,11 +16,16 @@
         <div v-for="(note, i) in content.note" :key="i" class="note" v-html="note" />
       </section>
 
-      <section v-if="content.autorities.length" class="autorities">
+      <section v-if="content.attestedForms" class="attested-forms">
-        <h3>Autorities</h3>
+        <h3>formes attestées</h3>
         <ul>
-          <li v-for="(aut, i) in content.autorities" :key="i">
+          <li v-for="(af, i) in content.attestedForms" :key="i">
-            <a :href="aut.identifier" target="_blanck">{{ aut.autority }}</a>
+            <span class="form">{{ af.title }}</span>
+            <!-- <ul>
+              <li v-for="(uuid, j) in af.uuid" :key="j">
+                <a href="#">{{ uuid }}</a>
+              </li>
+            </ul> -->
           </li>
         </ul>
       </section>
@@ -30,16 +35,11 @@
     <IndexItemOcurrences v-if="content" :content="content" />
 
     <template v-if="content" v-slot:nav>
-      <section v-if="content.attestedForms" class="attested-forms">
+      <section v-if="content.autorities.length" class="autorities">
-        <h3>Attested forms</h3>
+        <h3>Autorities</h3>
         <ul>
-          <li v-for="(af, i) in content.attestedForms" :key="i">
+          <li v-for="(aut, i) in content.autorities" :key="i">
-            <h4>{{ af.title }}</h4>
+            <a :href="aut.identifier" target="_blanck">{{ aut.autority }}</a>
-            <ul>
-              <li v-for="(uuid, j) in af.uuid" :key="j">
-                <a href="#">{{ uuid }}</a>
-              </li>
-            </ul>
           </li>
         </ul>
       </section>
@@ -88,6 +88,7 @@ export default {
   methods: {
     parseOccurences (content) {
       console.log('parseOccurences', content)
+      // ! parsing occurences
       for (let i = 0; i < content.occurences.length; i++) {
         let ed = content.occurences[i]
         for (let j = 0; j < ed.occurences.length; j++) {
@@ -104,6 +105,34 @@ export default {
           }
         }
       }
+      // ! parsing attested-forms
+      for (let f = 0; f < content.attestedForms.length; f++) {
+        let form = content.attestedForms[f]
+        content.attestedForms[f].occurences = []
+        for (let u = 0; u < form.uuid.length; u++) {
+          // ? some UUID are duplicate
+          let oc = {
+            uuid: form.uuid[u]
+          }
+          for (let e = 0; e < content.occurences.length; e++) {
+            let ed = content.occurences[e]
+            for (let o = 0; o < ed.occurences.length; o++) {
+              let occ = ed.occurences[o]
+              if (oc.uuid === occ.uuid && occ.title) {
+                oc.title = occ.title
+                oc.ed = {
+                  uuid: ed.item,
+                  title: ed.biblio
+                }
+                content.attestedForms[f].occurences.push(oc)
+                // content.attestedForms[f].uuid[u] = oc
+                break
+              }
+            }
+            if (oc.title) break
+          }
+        }
+      }
       this.content = content
     }
   }