nextcloud-side_menu/src/pages/UserSettings.vue

<!--
@license GNU AGPL version 3 or any later version

This program is free software: you can redistribute it and/or modify
it under the terms of the GNU Affero General Public License as
published by the Free Software Foundation, either version 3 of the
License, or (at your option) any later version.

This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU Affero General Public License for more details.

You should have received a copy of the GNU Affero General Public License
along with this program. If not, see <http://www.gnu.org/licenses/>.
-->
<template>
  <NcContent
    v-if="config"
    app-name="side_menu"
  >
    <NcAppContent class="side-menu-setting-app" v-if="config['force']">
      <TableContainer>
        <TableLabel label="You do not have permission to change the settings." />
      </TableContainer>
    </NcAppContent>
    <NcAppContent v-else class="side-menu-setting-app side-menu-setting-app--user">
      <TableContainer>
        <SectionTitle label="Menu" />

        <TableRow>
          <TableLabel
            label="Enable the custom menu"
            :middle="true"
          />
          <TableValue>
            <FormYesNo v-model="config['enabled']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Applications kept in the top menu"
            help="If there is no selection then the global configuration is applied."
            :middle="true"
          />
          <TableValue>
            <FormAppPicker v-model="config['top-menu-apps']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Applications kept in the top menu but also shown in side menu"
            help="These applications must be selected in the previous option."
            help2="If there is no selection then the global configuration is applied"
            :middle="true"
          />
          <TableValue>
            <FormAppPicker v-model="config['top-side-menu-apps']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Open apps in new tab"
            :middle="true"
          />
          <TableValue>
            <FormSelect v-model="config['target-blank-mode']" :options="[
              {id: 1, label: 'Use the global setting'},
              {id: 2, label: 'Use my selection'},
            ]" />
            <FormAppPicker v-if="config['target-blank-mode'] === 2" v-model="config['target-blank-apps']" />
          </TableValue>
        </TableRow>
        <TableRow>
          <TableLabel
            label="Customize sorting"
            :top="true"
          />
          <TableValue>
            <FormAppSort v-model="config['apps-order']" />
          </TableValue>
        </TableRow>
      </TableContainer>

       <TableContainer>
        <SectionTitle label="Support" />

        <TableRow>
          <TableLabel
            label="You like this app and you want to support me?"
            :middle="true"
          />
          <TableValue>
            <a
              target="_blank"
              href="https://www.buymeacoffee.com/deblan"
              rel="noopener"
            >
              <NcButton variant="secondary">{{ trans('Buy me a coffee ☕') }}</NcButton>
            </a>
          </TableValue>
        </TableRow>

        <UserSaveButton :config="config" />
      </TableContainer>
    </NcAppContent>
  </NcContent>
</template>

<script setup>
import { NcContent, NcAppContent, NcButton } from '@nextcloud/vue'
import { ref, onMounted } from 'vue'
import { useConfigStore } from '../store/config.js'

import TableContainer from '../components/settings/TableContainer'
import TableRow from '../components/settings/TableRow'
import TableLabel from '../components/settings/TableLabel'
import TableValue from '../components/settings/TableValue'
import SectionTitle from '../components/settings/SectionTitle'
import UserSaveButton from '../components/settings/UserSaveButton'
import FormYesNo from '../components/settings/form/FormYesNo'
import FormAppPicker from '../components/settings/form/FormAppPicker'
import FormAppSort from '../components/settings/form/FormAppSort'
import FormSelect from '../components/settings/form/FormSelect'

const config = ref(null)
const configStore = useConfigStore()

const trans = (value) => {
  return t('side_menu', value)
}

onMounted(async () => {
  config.value = await configStore.getUserConfig()
})
</script>

<style scoped>
.hidden {
  display: none;
}

.button-inline button {
  display: inline-block;
  margin-right: 5px;
}

.config {
  width: 100%;
  height: 30vh;
}

.modal__content {
  padding: 20px;
}

.modal__footer {
  margin-top: 20px;
  text-align: right;
}

.modal__footer button {
  display: inline-block;
  margin-right: 5px;
}

.save {
  display: block;
  float: right
}
</style>