Feature/wn 275

database/migrations/2025_03_11_204046_add_permission_api_stats_view_to_permissions_table.php

@@ -0,0 +1,40 @@
+<?php
+
+use Illuminate\Database\Migrations\Migration;
+use Illuminate\Support\Facades\DB;
+
+class AddPermissionApiStatsViewToPermissionsTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        DB::table('permissions')->insert([
+            'id' => 18,
+            'name' => 'api-stats-view',
+            'display_name' => 'API Stats View',
+            'sort' => 18,
+            'created_at' => now(),
+            'updated_at' => now(),
+        ]);
+
+        DB::table('role_permissions')->insert([
+            ['role_id' => 4, 'permission_id' => 18],
+            ['role_id' => 3, 'permission_id' => 18]
+        ]);
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        DB::table('role_permissions')->where('permission_id', 18)->whereIn('role_id', [3, 4])->delete();
+        DB::table('permissions')->where('id', 18)->delete();
+    }
+}

resources/assets/js/components/Sidebar.vue

@@ -39,7 +39,7 @@
       </b-collapse>
 
       <!-- API usage and management -->
-      <b-nav-item class="pl-1 w-100 nav-toggle" v-if="can(user, permissions.USERS_LIST)" v-b-toggle.collapse3>
+      <b-nav-item class="pl-1 w-100 nav-toggle" v-if="can(user, permissions.USERS_LIST) || can(user, permissions.API_STATS_VIEW)" v-b-toggle.collapse3>
         <div class="d-flex align-items-center">
           <div class="sidebar__icon mr-1 ml-1">
             <svg fill="white" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 512 512" enable-background="new 0 0 512 512" xml:space="preserve"><g><path d="M484.6,2H27.4C13.4,2,2,13.4,2,27.4V383c0,14,11.4,25.4,25.4,25.4h116.8c5.6,0,10.2,4.5,10.2,10.2V449   c0,5.6-4.5,10.2-10.2,10.2h-34.4c-3.8,0-7.4,2.2-9.1,5.6l-15.2,30.5c-3.4,6.8,1.5,14.7,9.1,14.7h322.7c7.6,0,12.5-7.9,9.1-14.7   l-15.2-30.5c-1.7-3.4-5.2-5.6-9.1-5.6h-34.4c-5.6,0-10.2-4.5-10.2-10.2v-30.5c0-5.6,4.5-10.2,10.2-10.2h116.8   c14,0,25.4-11.4,25.4-25.4V27.4C510,13.4,498.6,2,484.6,2z M459.2,322c0,5.6-4.5,10.2-10.2,10.2H63c-5.6,0-10.2-4.5-10.2-10.2V63   c0-5.6,4.5-10.2,10.2-10.2H449c5.6,0,10.2,4.5,10.2,10.2V322z"></path><path d="M169.6,205.2h-30.5c-5.6,0-10.2,4.5-10.2,10.2v55.9c0,5.6,4.5,10.2,10.2,10.2h30.5c5.6,0,10.2-4.5,10.2-10.2v-55.9   C179.8,209.7,175.3,205.2,169.6,205.2z"></path><path d="M271.2,154.4h-30.5c-5.6,0-10.2,4.5-10.2,10.2v106.7c0,5.6,4.5,10.2,10.2,10.2h30.5c5.6,0,10.2-4.5,10.2-10.2V164.6   C281.4,158.9,276.9,154.4,271.2,154.4z"></path><path d="M372.8,103.6h-30.5c-5.6,0-10.2,4.5-10.2,10.2v157.5c0,5.6,4.5,10.2,10.2,10.2h30.5c5.6,0,10.2-4.5,10.2-10.2V113.8   C383,108.1,378.5,103.6,372.8,103.6z"></path></g></svg>
@@ -50,7 +50,7 @@
         </div>
       </b-nav-item>
       <b-collapse id="collapse3" visible accordion="my-accordion" role="tabpanel">
-        <b-nav-item class="pl-4 w-100" v-if="can(user, permissions.USERS_LIST)" :to="{ name: 'api-usage.api-stats', params: {} }" exact-active-class>{{ $t('sidebar.api_stats') }}</b-nav-item>
+        <b-nav-item class="pl-4 w-100" v-if="can(user, permissions.API_STATS_VIEW)" :to="{ name: 'api-usage.api-stats', params: {} }" exact-active-class>{{ $t('sidebar.api_stats') }}</b-nav-item>
         <b-nav-item class="pl-4 w-100" v-if="can(user, permissions.USERS_LIST)" :to="{ name: 'api-usage.api-users', params: {} }" exact-active-class>{{ $t('sidebar.api_users') }}</b-nav-item>
         <b-nav-item class="pl-4 w-100" v-if="can(user, permissions.TERMS_UPDATE)" :to="{ name: 'api-usage.terms-conditions', params: {} }" exact-active-class>{{ $t('sidebar.terms_conditions') }}</b-nav-item>
       </b-collapse>

resources/assets/js/pages/content/simpleSocietyPicker.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-select :dir="isLangRTL(locale) ? 'rtl' : 'ltr'" :value="value" @input="$emit('input', $event)" class="w-100 v-select-custom" :options="list" label="name" :disabled="list.length === 0" :placeholder="$t('content.whatnow.no_soc')">
+  <v-select :clearable="false" :dir="isLangRTL(locale) ? 'rtl' : 'ltr'" :value="value" @input="$emit('input', $event)" class="w-100 v-select-custom" :options="list" label="name" :disabled="list.length === 0" :placeholder="$t('content.whatnow.no_soc')">
     <template slot="option" slot-scope="option">
       <div class="ml-2 rtl-mr-2 dropdown-option">
         {{ option.name }}

resources/assets/js/pages/content/whatnow.vue

@@ -18,15 +18,15 @@
       <b-col>
         <b-nav tabs class="whatnow-message-editor-tabs">
           <b-nav-item v-for="lang in currentLanguages" :key="lang" class="wn-item" @click="selectedLanguage = lang"
-            :active="selectedLanguage === lang">
+            :active="selectedLanguage === lang" :disabled="addingNewLanguage && selectedLanguage !== lang" :class="{ 'disabled-class': addingNewLanguage && selectedLanguage !== lang }">
             <div class="nav-link-wrapper text-center h-100" v-if="lang">
               {{ lang | uppercase }} -
               <small v-if="languages[lang]">{{ truncate(languages[lang].name, 8) }}</small>
             </div>
           </b-nav-item>
           <b-nav-item class="add-lang-btn ml-2" v-b-tooltip.hover
             :title="selectingLanguage ? null : $t('content.whatnow.add_language')" @click="selectingLanguage = true"
-            v-if="can(user, permissions.CONTENT_CREATE)">
+            v-if="can(user, permissions.CONTENT_CREATE)" :disabled="addingNewLanguage" :class="{ 'disabled-class': addingNewLanguage }">
             <fa :icon="['fas', 'plus']" />
           </b-nav-item>
         </b-nav>
@@ -164,7 +164,7 @@
     <b-row>
       <b-col>
         <whatnow-list :selectedSoc="selectedSoc" :selectedRegion="selectedRegion" :selectedLanguage="selectedLanguage"
-          v-if="selectedLanguage && selectedSoc"></whatnow-list>
+          v-if="selectedLanguage && selectedSoc" :disabled="addingNewLanguage"></whatnow-list>
       </b-col>
     </b-row>
 
@@ -189,7 +189,7 @@
         <p v-if="attributionTranslation">
           {{ attributionTranslation.name }} - {{ selectedLanguage | uppercase }}
         </p>
-        <b-card class="whatnow-org-publish-modal">
+        <b-card class="whatnow-org-publish-modal" v-if="attributionTranslation">
           <div class="whatnow-publish-header">
             <h4>{{ attributionTranslation.publish_summary_title }}</h4>
           </div>
@@ -314,7 +314,7 @@ export default {
       }
     },
     selectedSoc() {
-      if (this.countryCode !== this.selectedSoc.countryCode) {
+      if (this.countryCode !== this.selectedSoc.countryCode && this.selectedSoc) {
         this.$router.push({ name: 'content.whatnow', params: { countryCode: this.selectedSoc.countryCode, regionSlug: this.selectedRegion?.title } })
       }
     },
@@ -400,7 +400,9 @@ export default {
       }
     },
     setLocalStorage() {
-      localStorage.setItem('lang', this.selectedLanguage)
+      if (!this.addingNewLanguage) {
+        localStorage.setItem('lang', this.selectedLanguage)
+      }
     },
     attributionExists(key) {
       const attributionTranslation = this.attribution.translations.find(translation => translation.languageCode === this.selectedLanguage)
@@ -461,12 +463,10 @@ export default {
         this.previousLanguage = this.selectedLanguage
         this.selectedLanguage = this.languageToAdd
         this.addingNewLanguage = true
+        this.setCurrentLanguages([...this.currentLanguages, this.languageToAdd])
         this.showEditAttribution = true
         this.selectingLanguage = false
       }
-
-      this.currentLanguages.push(this.languageToAdd)
-      this.selectingLanguage = false
     },
     async publishAttribution(fireEvent = false) {
       if (fireEvent) {
@@ -839,6 +839,11 @@ export default {
   border-bottom: none;
   position: relative;
 
+  .disabled-class {
+    pointer-events: none;
+    opacity: 0.5;
+  }
+
   &::after {
     content: '';
     position: absolute;

resources/assets/js/pages/content/whatnowContentItem.vue

@@ -21,11 +21,11 @@
     <b-col lg="2" class="whatnow-col-item--message_editor">
       <b-button variant="outline-primary" size="sm" class="mb-1 mr-1" :to="editLink"
         v-if="(can(user, permissions.CONTENT_EDIT) || can(user, permissions.CONTENT_VIEW))"
-        :disabled="deletingContentTranslation === content.id">
+        :disabled="deletingContentTranslation === content.id || disabled">
         {{ can(user, permissions.CONTENT_EDIT) ? $t('common.edit') : $t('common.view_content') }}
       </b-button>
       <b-button variant="outline-primary" size="sm" class="mb-1" v-if="can(user, permissions.CONTENT_DELETE) && !forceCreate"
-        :disabled="deletingContentTranslation === content.id" @click="deleteContentTranslation(content.id)">
+        :disabled="deletingContentTranslation === content.id || disabled" @click="deleteContentTranslation(content.id)">
         <font-awesome-icon :icon="['fas', 'spinner']" spin v-show="deletingContentTranslation === content.id" />
         {{ $t('common.delete') }}
       </b-button>
@@ -116,7 +116,7 @@ import swal from 'sweetalert2'
 import WhatnowMessageCard from './whatnowMessageCard'
 
 export default {
-  props: ['selectedLanguage', 'content', 'isPromo', 'regionSlug', 'forceCreate', 'selectedSoc'],
+  props: ['selectedLanguage', 'content', 'isPromo', 'regionSlug', 'forceCreate', 'selectedSoc', 'disabled'],
   components: {
     WhatnowMessageCard,
   },

resources/assets/js/pages/content/whatnowList.vue

@@ -7,6 +7,7 @@
             size="sm"
             variant="outline-primary"
             v-if="user && can(user, permissions.CONTENT_CREATE) && selectedSoc && !isPromo"
+            :disabled="disabled"
             :to="{ name: 'content.create', params: { organisation: selectedSoc.countryCode, langCode: this.selectedLanguage, regionSlug: this.selectedRegion?.title } }">
             {{ $t('content.message_editor.create_btn') }}
           </b-button>
@@ -44,7 +45,9 @@
             :isPromo="isPromo"
             v-on:languageChange="languageChange"
             :regionSlug="selectedRegion?.title"
-            :selectedSoc="selectedSoc">
+            :selectedSoc="selectedSoc"
+            :disabled="disabled"
+            >
           </whatnow-content-item>
           <whatnow-content-item
             v-for="content in uncreatedTranslations"
@@ -56,7 +59,9 @@
             v-on:languageChange="languageChange"
             :regionSlug="selectedRegion?.title"
             :forceCreate="true"
-            :selectedSoc="selectedSoc">
+            :selectedSoc="selectedSoc"
+            :disabled="disabled"
+            >
           </whatnow-content-item>
         </transition-group>
 
@@ -93,7 +98,7 @@ import * as permissionsList from '../../store/permissions'
 import Spooky from '~/components/global/Spooky'
 
 export default {
-  props: ['selectedSoc', 'selectedLanguage', 'isPromo', 'selectedHazard', 'selectedRegion'],
+  props: ['selectedSoc', 'selectedLanguage', 'isPromo', 'selectedHazard', 'selectedRegion', 'disabled'],
   components: {
     Spooky,
     WhatnowContentItem

resources/assets/js/store/permissions.js

@@ -22,3 +22,4 @@ export const CONTENT_VIEW = 'content-view'
 export const HAZARD_TYPE_CREATE = 'hz-type-create'
 export const ALL_ORGANISATIONS = 'organisations_all'
 export const TERMS_UPDATE = 'terms-update'
+export const API_STATS_VIEW = 'api-stats-view'

resources/assets/sass/components/_whatnow.scss

@@ -36,7 +36,7 @@
   .vs__search {
     color: #495057;
     line-height: 1.42;
-    font-size: 1em;
+    font-size: 12px;
     font-weight: 400;
   }
 
@@ -202,3 +202,13 @@
   border-radius: em(8.4);
   border: solid 4px rgba(109, 110, 112, 0.3);
 }
+
+.v-select-custom {
+  .vs__search {
+    font-size: 12px;
+
+    &:focus {
+      font-size: 12px;
+    }
+  }
+}

resources/assets/sass/elements/_buttons.scss

@@ -77,6 +77,11 @@
   }
 }
 
+.btn-outline-primary.disabled {
+  background-color: $bg-disabled;
+  color: $bg-primary;
+}
+
 .show > .btn-outline-primary.dropdown-toggle {
   background-color: $bg-primary;
   color: $white;