Ajout d'un système de publication

assets/main.scss

@@ -465,6 +465,10 @@ strong {
   }
 }
 
+.inset-box-shadow {
+  box-shadow: inset 0 0 10px 1px rgba(0, 0, 0, 0.2)
+}
+
 @media only screen and (max-width: 959px) {
   .page-header-sheet {
     position: sticky;

components/alerts/AlertCard.vue

@@ -1,7 +1,8 @@
 <template>
-  <div
-    class="oblyk-alert"
-    :class="`oblyk-alert-${alert.alert_type}`"
+  <v-alert
+    :icon="false"
+    text
+    :type="alertType()"
   >
     <div class="d-flex">
       <div
@@ -45,7 +46,7 @@
         </v-btn>
       </div>
     </client-only>
-  </div>
+  </v-alert>
 </template>
 
 <script>
@@ -83,32 +84,21 @@ export default {
             this.getAlerts()
           })
       }
+    },
+
+    alertType () {
+      if (this.alert.alert_type === 'good') {
+        return 'success'
+      } else if (this.alert.alert_type === 'warning') {
+        return 'warning'
+      } else if (this.alert.alert_type === 'info') {
+        return 'info'
+      } else if (this.alert.alert_type === 'bad') {
+        return 'error'
+      } else if (this.alert.alert_type === 'omega_roc') {
+        return 'warning'
+      }
     }
   }
 }
 </script>
-
-<style scoped lang="scss">
-.oblyk-alert {
-  border-left-style: solid;
-  border-width: 4px;
-  padding: 1px 15px;
-  &.oblyk-alert-good {
-    border-color: #4caf50;
-    color: #388e3c;
-  }
-  &.oblyk-alert-warning {
-    border-color: #ffc107;
-  }
-  &.oblyk-alert-omega_roc {
-    border-color: #f5aa34;
-  }
-  &.oblyk-alert-info {
-    border-color: #03a9f4;
-  }
-  &.oblyk-alert-bad {
-    border-color: #d32f2f;
-    color: #ef5350;
-  }
-}
-</style>

components/articles/layouts/ArticleHead.vue

@@ -24,6 +24,7 @@
             class="ml-1"
             :likeable-id="article.id"
             likeable-type="Article"
+            dark
             :initial-like-count="article.likes_count"
           />
           <span

components/ascentGymRoutes/AscentGymMultiCheckItem.vue

@@ -9,6 +9,7 @@
           :likeable-id="gymRoute.id"
           likeable-type="GymRoute"
           :small="false"
+          icon
         />
         <div class="rounded-pill sheet-background-color mx-1">
           <v-menu>

components/ascentGymRoutes/forms/AscentGymRouteForm.vue

@@ -23,17 +23,18 @@
     />
 
     <!-- Real favorite -->
-    <div class="border --current-color-border rounded mb-7 px-3 py-1">
+    <div class="border --current-color-border rounded mb-7 px-3 py-1 d-flex align-center">
       <like-btn
         ref="btnLike"
         class="vertical-align-sub"
         :likeable-id="gymRoute.id"
         likeable-type="GymRoute"
         :small="false"
+        icon
         @click.stop=""
       />
       <strong
-        class="hoverable"
+        class="hoverable ml-1"
         @click="$refs.btnLike.likeOrUnlike()"
       >
         {{ $t('components.like.isRealFavorite') }}

components/climbingSessions/ClimbingSession.vue

@@ -6,6 +6,7 @@
       :climbing-session="session"
       :gym-references="gyms"
       :crag-references="crags"
+      :column-mode="columnMode"
       class="mb-7"
     />
     <loading-more
@@ -17,19 +18,19 @@
     <p
       v-if="sessions.length === 0 && !loadingClimbingSessions"
       class="text-center mt-4"
-      v-html="$t('components.climbingSession.empty')"
+      v-html="guestMode ? $t('components.climbingSession.guestEmpty') : $t('components.climbingSession.empty')"
     />
   </div>
 </template>
 
 <script>
 import { LoadingMoreHelpers } from '@/mixins/LoadingMoreHelpers'
-import LoadingMore from '~/components/layouts/LoadingMore.vue'
-import ClimbingSessionApi from '~/services/oblyk-api/ClimbingSessionApi'
+import LoadingMore from '~/components/layouts/LoadingMore'
+import ClimbingSessionItem from '~/components/climbingSessions/ClimbingSessionItem'
 import ClimbingSession from '~/models/ClimbingSession'
-import ClimbingSessionItem from '~/components/climbingSessions/ClimbingSessionItem.vue'
 import Crag from '~/models/Crag'
 import Gym from '~/models/Gym'
+import OblykApi from '~/services/oblyk-api/OblykApi'
 
 export default {
   name: 'ClimbingSession',
@@ -40,14 +41,22 @@ export default {
     filters: {
       type: Object,
       default: null
+    },
+    columnMode: {
+      type: Boolean,
+      default: false
+    },
+    guestMode: {
+      type: Boolean,
+      default: false
     }
   },
 
   data () {
     return {
       sessions: [],
       loadingClimbingSessions: true,
-      climbingSessionApi: new ClimbingSessionApi(this.$axios, this.$auth),
+      climbingSessionApi: new OblykApi(this.$axios, this.$auth),
       crags: [],
       gyms: [],
 
@@ -84,7 +93,17 @@ export default {
       this.moreIsBeingLoaded()
 
       this.climbingSessionApi
-        .list(this.page, this.filters)
+        .get(
+          '/current_users/climbing_sessions',
+          {
+            page: this.page,
+            gym_ids: this.filters?.gym_ids,
+            crag_ids: this.filters?.crag_ids,
+            only_crag: this.filters?.only_crag || false,
+            only_gym: this.filters?.only_gym || false,
+            user_uuid: this.filters?.user_uuid
+          }
+        )
         .then((resp) => {
           // Parse climbing session
           for (const session of resp.data.sessions) {

components/climbingSessions/ClimbingSessionDetail.vue

@@ -1,36 +1,40 @@
 <template>
   <div>
-    <div
-      v-if="sessionDetail.description"
-      class="mt-2 mb-5"
-    >
-      <p class="mb-1 subtitle-2">
-        <v-icon left small color="primary" class="vertical-align-text-top">
-          {{ mdiText }}
-        </v-icon>
-        {{ $t('components.ascentCragRoute.myCommentaire') }}
-      </p>
-      <markdown-text
-        :text="sessionDetail.description"
-        class="px-3 pt-2 pb-1 rounded-sm back-app-color"
-      />
-      <div class="text-right pt-1">
-        <edit-climbing-session-btn
-          :climbing-session="sessionDetail"
-          :callback="getClimbingSession"
+    <div v-if="climbingSession.for_current_user">
+      <div
+        v-if="sessionDetail.description"
+        class="mt-2 mb-5"
+      >
+        <p class="mb-1 subtitle-2">
+          <v-icon left small color="primary" class="vertical-align-text-top">
+            {{ mdiText }}
+          </v-icon>
+          {{ $t('components.ascentCragRoute.myCommentaire') }}
+        </p>
+        <markdown-text
+          :text="sessionDetail.description"
+          class="px-3 pt-2 pb-1 rounded-sm back-app-color"
         />
+        <div class="text-right pt-1">
+          <edit-climbing-session-btn
+            :climbing-session="sessionDetail"
+            :callback="getClimbingSession"
+          />
+        </div>
       </div>
-    </div>
-    <div v-if="!sessionDetail.description">
       <edit-climbing-session-btn
+        v-if="!sessionDetail.description"
         :climbing-session="climbingSession"
         :callback="getClimbingSession"
       />
     </div>
 
     <!-- Ascents -->
     <div class="mt-4">
-      <p class="pb-1 mb-1 subtitle-2">
+      <p
+        v-if="climbingSession.for_current_user"
+        class="pb-1 mb-1 subtitle-2"
+      >
         <v-icon left small color="primary" class="vertical-align-text-top">
           {{ mdiCheckAll }}
         </v-icon>
@@ -91,7 +95,7 @@
         <v-icon left small color="primary" class="vertical-align-text-top">
           {{ mdiMapMarker }}
         </v-icon>
-        {{ $t('components.climbingSession.climbingPlaces') }}
+        {{ $t(`components.climbingSession.${climbingSession.for_current_user ? 'climbingPlaces' : 'climbingPlacesGuest'}`) }}
       </p>
       <crag-small-card
         v-for="(crag, cragIndex) in crags"

components/climbingSessions/ClimbingSessionItem.vue

@@ -1,19 +1,15 @@
 <template>
-  <v-row>
-    <v-col
-      cols="12"
-      md="2"
-      class="pr-0 pb-0"
-    >
+  <div :class="columnMode ? null : 'd-md-flex'">
+    <div class="text-no-wrap">
       <p
-        :class="$vuetify.breakpoint.mobile ? 'mb-1 font-italic pl-1' : 'border-bottom mb-1 font-italic'"
+        class="mb-1 font-italic pr-3"
+        :class="$vuetify.breakpoint.mobile || columnMode ? 'pl-1' : 'border-bottom'"
       >
         {{ dateFromToday(climbingSession.session_date) }}
       </p>
-    </v-col>
-    <v-col
-      cols="12"
-      md="9"
+    </div>
+    <div
+      class="flex-grow-1"
       :class="$vuetify.breakpoint.mobile ? 'pt-1' : 'pl-0'"
     >
       <v-hover v-slot="{ hover }">
@@ -27,7 +23,8 @@
             :active="loadingSessionDetail"
             color="primary"
           />
-          <!-- Climbing Session resume -->
+
+          <!-- CLIMBING SESSION RESUME -->
           <div
             v-if="!sessionDetail"
             class="mt-2 mt-4 px-4"
@@ -137,18 +134,23 @@
                 bordered
               />
             </div>
-            <p class="text-right mb-0 text--disabled">
+            <p
+              v-if="climbingSession.for_current_user"
+              class="text-right mb-0 text--disabled"
+            >
               <small>{{ $t('common.at') }} {{ humanizeDate(climbingSession.session_date) }}</small>
             </p>
           </div>
 
-          <!-- Climbing session detail -->
+          <!-- CLIMBING SESSION DETAIL -->
           <div
             v-if="sessionDetail"
             class="py-3 px-4"
           >
             <h3 class="">
-              {{ $t('components.climbingSession.title', { date: humanizeDate(sessionDetail.session_date) }) }}
+              <span v-if="climbingSession.for_current_user">
+                {{ $t('components.climbingSession.title', { date: humanizeDate(sessionDetail.session_date) }) }}
+              </span>
               <v-btn
                 icon
                 class="float-right"
@@ -168,20 +170,20 @@
           </div>
         </v-sheet>
       </v-hover>
-    </v-col>
-  </v-row>
+    </div>
+  </div>
 </template>
 
 <script>
 import { mdiCircle, mdiClose } from '@mdi/js'
 import { DateHelpers } from '~/mixins/DateHelpers'
 import { GradeMixin } from '~/mixins/GradeMixin'
-import MarkdownText from '~/components/ui/MarkdownText.vue'
-import CragSmallCard from '~/components/crags/CragSmallCard.vue'
-import GymSmallCard from '~/components/gyms/GymSmallCard.vue'
-import ClimbingSessionApi from '~/services/oblyk-api/ClimbingSessionApi'
 import ClimbingSession from '~/models/ClimbingSession'
-import ClimbingSessionDetail from '~/components/climbingSessions/ClimbingSessionDetail.vue'
+import OblykApi from '~/services/oblyk-api/OblykApi'
+import MarkdownText from '~/components/ui/MarkdownText'
+import CragSmallCard from '~/components/crags/CragSmallCard'
+import GymSmallCard from '~/components/gyms/GymSmallCard'
+import ClimbingSessionDetail from '~/components/climbingSessions/ClimbingSessionDetail'
 
 export default {
   name: 'ClimbingSessionItem',
@@ -199,6 +201,10 @@ export default {
     cragReferences: {
       type: Array,
       required: true
+    },
+    columnMode: {
+      type: Boolean,
+      default: false
     }
   },
 
@@ -243,8 +249,11 @@ export default {
       if (this.sessionDetail) { return null }
 
       this.loadingSessionDetail = true
-      new ClimbingSessionApi(this.$axios, this.$auth)
-        .find(this.climbingSession.session_date)
+      new OblykApi(this.$axios, this.$auth)
+        .get(
+          `/current_users/climbing_sessions/${this.climbingSession.session_date}`,
+          { user_id: this.climbingSession.user_id }
+        )
         .then((resp) => {
           this.sessionDetail = new ClimbingSession({ attributes: resp.data })
         })