audiobookshelf/client/components/modals/libraries/EditLibrary.vue

<template>
  <div class="w-full h-full px-4 py-2 mb-4">
    <div v-show="showDirectoryPicker" class="flex items-center py-1 mb-2">
      <span class="material-icons text-3xl cursor-pointer hover:text-gray-300" @click="backArrowPress">arrow_back</span>
      <p class="px-4 text-xl">{{ title }}</p>
    </div>

    <div v-if="!showDirectoryPicker" class="w-full h-full py-4">
      <div class="flex flex-wrap md:flex-nowrap -mx-1">
        <div class="w-full md:flex-grow px-1 py-1 md:py-0">
          <ui-text-input-with-label v-model="name" label="Library Name" />
        </div>
        <div class="w-1/2 md:w-72 px-1 py-1 md:py-0">
          <ui-media-category-picker v-model="mediaCategory" />
        </div>
        <div class="w-1/2 md:w-72 px-1 py-1 md:py-0">
          <ui-dropdown v-model="provider" :items="providers" label="Metadata Provider" small />
        </div>
      </div>

      <div class="w-full py-4">
        <p class="px-1 text-sm font-semibold">Folders</p>
        <div v-for="(folder, index) in folders" :key="index" class="w-full flex items-center py-1 px-2">
          <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
          <ui-editable-text v-model="folder.fullPath" readonly type="text" class="w-full" />
          <span v-show="folders.length > 1" class="material-icons ml-2 cursor-pointer hover:text-error" @click="removeFolder(folder)">close</span>
        </div>
        <!-- <p v-if="!folders.length" class="text-sm text-gray-300 px-1 py-2">No folders</p> -->

        <div class="flex py-1 px-2 items-center w-full">
          <span class="material-icons bg-opacity-50 mr-2 text-yellow-200" style="font-size: 1.2rem">folder</span>
          <ui-editable-text v-model="newFolderPath" placeholder="New folder path" type="text" class="w-full" />
        </div>

        <ui-btn class="w-full mt-2" color="primary" @click="showDirectoryPicker = true">Browse for Folder</ui-btn>
      </div>
      <div class="absolute bottom-0 left-0 w-full py-4 px-4">
        <div class="flex items-center">
          <div class="flex-grow" />
          <ui-btn v-show="!disableSubmit" color="success" :disabled="disableSubmit" @click="submit">{{ library ? 'Update Library' : 'Create Library' }}</ui-btn>
        </div>
      </div>
    </div>

    <modals-libraries-folder-chooser v-else :paths="folderPaths" @select="selectFolder" />

    <div v-if="!showDirectoryPicker">
      <div class="flex items-center pt-2">
        <ui-toggle-switch v-if="!globalWatcherDisabled" v-model="disableWatcher" />
        <ui-toggle-switch v-else disabled :value="false" />
        <p class="pl-4 text-lg">Disable folder watcher for library</p>
      </div>
      <p v-if="globalWatcherDisabled" class="text-xs text-warning">*Watcher is disabled globally in server settings</p>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    library: {
      type: Object,
      default: () => null
    },
    processing: Boolean
  },
  data() {
    return {
      name: '',
      provider: 'google',
      mediaCategory: '',
      folders: [],
      showDirectoryPicker: false,
      disableWatcher: false,
      newFolderPath: ''
    }
  },
  computed: {
    title() {
      if (this.showDirectoryPicker) return 'Choose a Folder'
      return ''
    },
    folderPaths() {
      return this.folders.map((f) => f.fullPath)
    },
    disableSubmit() {
      if (!this.library) {
        return false
      }
      var newfolderpaths = this.folderPaths.join(',')
      var origfolderpaths = this.library.folders.map((f) => f.fullPath).join(',')

      return newfolderpaths === origfolderpaths && this.name === this.library.name && this.provider === this.library.provider && this.disableWatcher === this.library.disableWatcher && this.mediaCategory === this.library.mediaCategory && !this.newFolderPath
    },
    providers() {
      return this.$store.state.scanners.providers
    },
    globalWatcherDisabled() {
      return this.$store.getters['getServerSetting']('scannerDisableWatcher')
    }
  },
  methods: {
    removeFolder(folder) {
      this.folders = this.folders.filter((f) => f.fullPath !== folder.fullPath)
    },
    backArrowPress() {
      if (this.showDirectoryPicker) {
        this.showDirectoryPicker = false
      }
    },
    init() {
      this.name = this.library ? this.library.name : ''
      this.provider = this.library ? this.library.provider : 'google'
      this.folders = this.library ? this.library.folders.map((p) => ({ ...p })) : []
      this.disableWatcher = this.library ? !!this.library.disableWatcher : false
      this.mediaCategory = this.library ? this.library.mediaCategory : 'default'
      this.showDirectoryPicker = false
    },
    selectFolder(fullPath) {
      this.folders.push({ fullPath })
      this.showDirectoryPicker = false
    },
    submit() {
      if (this.newFolderPath) {
        this.folders.push({ fullPath: this.newFolderPath })
      }

      if (this.library) {
        this.updateLibrary()
      } else {
        this.createLibrary()
      }
    },
    updateLibrary() {
      if (!this.name) {
        this.$toast.error('Library must have a name')
        return
      }
      if (!this.folders.length) {
        this.$toast.error('Library must have at least 1 path')
        return
      }
      var newLibraryPayload = {
        name: this.name,
        provider: this.provider,
        folders: this.folders,
        mediaCategory: this.mediaCategory,
        icon: this.mediaCategory,
        disableWatcher: this.disableWatcher
      }

      this.$emit('update:processing', true)
      this.$axios
        .$patch(`/api/libraries/${this.library.id}`, newLibraryPayload)
        .then((res) => {
          this.$emit('update:processing', false)
          this.$emit('close')
          this.$toast.success(`Library "${res.name}" updated successfully`)
        })
        .catch((error) => {
          console.error(error)
          if (error.response && error.response.data) {
            this.$toast.error(error.response.data)
          } else {
            this.$toast.error('Failed to update library')
          }
          this.$emit('update:processing', false)
        })
    },
    createLibrary() {
      if (!this.name) {
        this.$toast.error('Library must have a name')
        return
      }
      if (!this.folders.length) {
        this.$toast.error('Library must have at least 1 path')
        return
      }
      var newLibraryPayload = {
        name: this.name,
        provider: this.provider,
        folders: this.folders,
        mediaCategory: this.mediaCategory,
        icon: this.mediaCategory,
        disableWatcher: this.disableWatcher
      }

      this.$emit('update:processing', true)
      this.$axios
        .$post('/api/libraries', newLibraryPayload)
        .then((res) => {
          this.$emit('update:processing', false)
          this.$emit('close')
          this.$toast.success(`Library "${res.name}" created successfully`)
        })
        .catch((error) => {
          console.error(error)
          if (error.response && error.response.data) {
            this.$toast.error(error.response.data)
          } else {
            this.$toast.error('Failed to create library')
          }
          this.$emit('update:processing', false)
        })
    }
  },
  mounted() {
    this.init()
  }
}
</script>