Bump @nextcloud/vue from 1.5.0 to 3.5.4

CHANGELOG.md

@@ -23,6 +23,8 @@
  [#546](https://github.com/nextcloud/cookbook/pull/546/) @seyfeb
 - Added icon for recipes in navigation pane, closes #550
  [#560](https://github.com/nextcloud/cookbook/pull/560/) @seyfeb
+- Bumped @nextcloud/vue to 3.5.4
+ [#561](https://github.com/nextcloud/cookbook/pull/561/) @seyfeb
 
 ### Fixed
 - Added some documentation how to install GH action generated builds

package.json

@@ -23,7 +23,7 @@
  "@nextcloud/axios": "^1.6.0",
  "@nextcloud/event-bus": "^1.2.0",
  "@nextcloud/moment": "^1.1.1",
- "@nextcloud/vue": "^1.5.0",
+ "@nextcloud/vue": "^3.5.4",
  "lozad": "^1.16.0",
  "v-markdown-editor": "^1.2.6",
  "node-sass": "^5.0.0",

src/components/AppMain.vue

@@ -1,23 +1,27 @@
 <template>
- <div id="app">
- <AppNavi id="app-navigation" :class="{'show-navigation': $store.state.appNavigation.visible}"/>
- <div id="app-content">
- <div id="app-content-wrapper">
+ <Content app-name="cookbook">
+ <AppNavi class="app-navigation" />
+ <AppContent>
+ <div>
  <AppControls />
  <router-view></router-view>
  </div>
- </div>
- </div>
+ </AppContent>
+ </Content>
 </template>
 
 <script>
+import AppContent from '@nextcloud/vue/dist/Components/AppContent'
 import AppControls from './AppControls'
 import AppNavi from './AppNavi'
+import Content from '@nextcloud/vue/dist/Components/Content'
 export default {
  name: 'Main',
  components: {
+ AppContent,
  AppControls,
  AppNavi,
+ Content
  },
  watch: {
  /* This is left here as an example in case the routes need to be debugged again
@@ -31,27 +35,16 @@ export default {
 
 <style>
 
-#app {
- width: 100%;
-}
-
-#app-content {
- min-width: calc(100% - 300px);
-}
-
-#app-content-wrapper {
- flex-wrap: wrap;
-}
-
 @media print {
- #app-content-wrapper {
+ #app-content-vue {
  display: block !important;
  padding: 0 !important;
  overflow: visible !important;
- }
- #app-content {
  margin-left: 0 !important;
  }
+ #app-navigation-vue {
+ display: none !important;
+ }
  #header {
  display: none !important;
  }

src/components/AppNavi.vue

@@ -1,17 +1,15 @@
 <template>
 <!-- This component should ideally not have a conflicting name with AppNavigation from the nextcloud/vue package -->
  <AppNavigation>
- <ActionButton
- id="hide-navigation"
- icon="icon-menu"
- class="action-button"
- :ariaLabel="t('cookbook', 'Open navigation')"
- @click="toggleNavigation()"
- >{{ t('cookbook', 'Hide navigation') }}</ActionButton>
  <router-link :to="'/recipe/create'">
- <AppNavigationNew class="create" :text="t('cookbook', 'Create recipe')" />
+ <AppNavigationNew class="create"
+ :text="t('cookbook', 'Create recipe')"
+ button-id="cookbook_new_cookbook"
+ :button-class="['create', 'icon-add']"
+ />
  </router-link>
- <ul>
+
+ <template slot="list">
  <ActionInput
  class="download"
  @submit="downloadRecipe"
@@ -23,29 +21,38 @@
  <AppNavigationItem :title="t('cookbook', 'All recipes')" icon="icon-category-organization" :to="'/'">
  <AppNavigationCounter slot="counter">{{ totalRecipeCount }}</AppNavigationCounter>
  </AppNavigationItem>
+
  <AppNavigationItem :title="t('cookbook', 'Uncategorized recipes')" icon="icon-category-organization" :to="'/category/_/'">
  <AppNavigationCounter slot="counter">{{ uncatRecipes }}</AppNavigationCounter>
  </AppNavigationItem>
- <AppNavigationCaption :title="t('cookbook', 'Categories')" >
+
+ <AppNavigationCaption
+ :title="t('cookbook', 'Categories')"
+ v-if="loading.categories || categories.length > 0"
+ :loading="loading.categories"
+ >
  <template slot="actions">
  <ActionButton icon="icon-rename" @click="toggleCategoryRenaming">
  {{ t('cookbook', 'Toggle editing') }}
  </ActionButton>
  </template>
  </AppNavigationCaption>
+
  <AppNavigationItem v-for="(cat,idx) in categories"
  :key="cat+idx"
  :ref="'app-navi-cat-'+idx"
  :title="cat.name"
- :icon="categoryUpdating[idx] ? 'icon-loading-small': 'icon-category-files'"
+ :icon="categoryUpdating[idx] ? '' : 'icon-category-files'"
+ :loading="categoryUpdating[idx]"
  :allowCollapse="true"
  :to="'/category/'+cat.name"
- @update:open="categoryOpen(idx)"
  :editable="catRenamingEnabled"
- :editPlaceholder="t('cookbook','Enter new category name')"
+ :edit-label="t('cookbook','Rename')"
+ :edit-placeholder="t('cookbook','Enter new category name')"
+ @update:open="categoryOpen(idx)"
  @update:title="(val) => { categoryUpdateName(idx,val) }"
  >
- <AppNavigationCounter slot="counter">{{ cat.recipeCount }}</AppNavigationCounter>
+ <AppNavigationCounter v-if="!catRenamingEnabled" slot="counter">{{ cat.recipeCount }}</AppNavigationCounter>
  <template>
  <AppNavigationItem class="recipe" v-for="(rec,idy) in cat.recipes"
  :key="idx+'-'+idy"
@@ -55,39 +62,11 @@
  />
  </template>
  </AppNavigationItem>
- </ul>
- <AppNavigationSettings :open="true">
- <div id="app-settings">
- <fieldset>
- <ul>
- <li>
- <ActionButton
- class="button"
- :icon="scanningLibrary ? 'icon-loading-small' : 'icon-history'"
- @click="reindex()"
- :title="t('cookbook', 'Rescan library')"
- />
- </li>
- <li>
- <label class="settings-input">{{ t('cookbook', 'Recipe folder') }}</label>
- <input type="text" :value="recipeFolder" @click="pickRecipeFolder" :placeholder="t('cookbook', 'Please pick a folder')">
- </li>
- <li>
- <label class="settings-input">
- {{ t('cookbook', 'Update interval in minutes') }}
- </label>
- <input type="number" class="input settings-input" v-model="updateInterval" placeholder="0">
- </li>
- <li>
- <input type="checkbox" class="checkbox" v-model="printImage" id="recipe-print-image">
- <label for="recipe-print-image">
- {{ t('cookbook', 'Print image with recipe') }}
- </label>
- </li>
- </ul>
- </fieldset>
- </div>
- </AppNavigationSettings>
+ </template>
+
+ <template slot="footer">
+ <AppSettings :scanningLibrary="scanningLibrary" @reindex="reindex" />
+ </template>
  </AppNavigation>
 </template>
 
@@ -101,6 +80,7 @@ import AppNavigationItem from '@nextcloud/vue/dist/Components/AppNavigationItem'
 import AppNavigationNew from '@nextcloud/vue/dist/Components/AppNavigationNew'
 import AppNavigationSettings from '@nextcloud/vue/dist/Components/AppNavigationSettings'
 import AppNavigationSpacer from '@nextcloud/vue/dist/Components/AppNavigationSpacer'
+import AppSettings from './AppSettings'
 import Vue from 'vue'
 
 import AppNavigationCaption from './AppNavigationCaption'
@@ -117,22 +97,17 @@ export default {
  AppNavigationNew,
  AppNavigationSettings,
  AppNavigationSpacer,
+ AppSettings
  },
  data () {
  return {
  catRenamingEnabled: false,
  categories: [],
  downloading: false,
  isCategoryUpdating: [],
- printImage: false,
- recipeFolder: "",
+ loading: { categories: true },
  scanningLibrary: false,
  uncatRecipes: 0,
- // By setting the reset value initially to true, it will skip one watch event
- // (the one when config is loaded at page load)
- resetInterval: true,
- resetPrintImage: true,
- updateInterval: 0,
  }
  },
  computed: {
@@ -153,51 +128,11 @@ export default {
  }
  },
  watch: {
- printImage: function(newVal, oldVal) {
- // Avoid infinite loop on page load and when reseting value after failed submit
- if (this.resetPrintImage) {
- this.resetPrintImage = false
- return
- }
- axios({
- url: this.$window.baseUrl + '/config',
- method: 'POST',
- data: { 'print_image': newVal ? 1 : 0 }
- })
- .then((response) => {
- // Should this check the response of the query? To catch some errors that redirect the page
- })
- .catch((e) => {
- alert(t('cookbook', 'Could not set preference for image printing'));
- this.resetPrintImage = true
- this.printImage = oldVal
- })
- },
  // Register a method hook for navigation refreshing
  refreshRequired: function(newVal, oldVal) {
  if (newVal != oldVal && newVal == true) {
  this.getCategories()
  }
- },
- updateInterval: function(newVal, oldVal) {
- // Avoid infinite loop on page load and when reseting value after failed submit
- if (this.resetInterval) {
- this.resetInterval = false
- return
- }
- axios({
- url: this.$window.baseUrl + '/config',
- method: 'POST',
- data: { 'update_interval': newVal }
- })
- .then((response) => {
- // Should this check the response of the query? To catch some errors that redirect the page
- })
- .catch((e) => {
- alert(t('cookbook', 'Could not set recipe update interval to {interval}', { interval: newVal }))
- this.resetInterval = true
- this.updateInterval = oldVal
- })
  }
  },
  methods: {
@@ -207,30 +142,6 @@ export default {
  toggleCategoryRenaming: function() {
  this.catRenamingEnabled = !this.catRenamingEnabled
  },
- /**
- * Initial setup
- */
- setup: function() {
- axios({
- url: this.$window.baseUrl + '/config',
- method: 'GET',
- data: null,
- })
- .then((response) => {
- let config = response.data
- this.resetPrintImage = false;
- if(config) {
- this.printImage = config['print_image'];
- this.updateInterval = config['update_interval'];
- this.recipeFolder = config['folder'];
- } else {
- alert(t('cookbook', 'Loading config failed'))
- }
- })
- .catch((e) => {
- alert(t('cookbook', 'Loading config failed'))
- })
- },
 
  /**
  * Opens a category
@@ -319,6 +230,7 @@ export default {
  */
  getCategories: function() {
  let $this = this
+ this.loading.categories = true
  axios.get(this.$window.baseUrl + '/categories')
  .then(function(response) {
  let json = response.data || []
@@ -360,31 +272,10 @@ export default {
  throw e
  }
  })
- },
-
- /**
- * Select a recipe folder using the Nextcloud file picker
- */
- pickRecipeFolder: function(e) {
- OC.dialogs.filepicker(
- t('cookbook', 'Path to your recipe collection'),
- (path) => {
- let $this = this
- this.$store.dispatch('updateRecipeDirectory', { dir: path })
- .then(() => {
- $this.recipeFolder = path
- if($this.$route.path != '/') {
- $this.$router.push('/')
- }
- })
- .catch((e) => {
- alert(t('cookbook', 'Could not set recipe folder to {path}', { path: path }))
- })
- },
- false,
- 'httpd/unix-directory',
- true
- )
+ .then(()=> {
+ // finally
+ $this.loading.categories = false
+ })
  },
 
  /**
@@ -431,7 +322,6 @@ export default {
  },
  },
  mounted () {
- this.setup()
  this.getCategories()
  },
 }
@@ -467,20 +357,6 @@ export default {
  box-shadow: inset 4px 0 var(--color-primary);
 }
 
-#app-settings .button {
- padding: 0;
- height: 44px;
- border-radius: var(--border-radius);
- z-index: 2;
-}
-
-#app-settings input[type="text"],
-#app-settings input[type="number"],
-#app-settings .button {
- width: 100%;
- display: block;
-}
-
 #hide-navigation {
  height: 44px;
  display: none;
@@ -501,3 +377,11 @@ export default {
 }
 
 </style>
+
+<style>
+
+@media(min-width: 1024px) { .app-navigation-toggle {
+ display: none;
+ }
+}
+</style>