Add applink dialog in apps view
This commit is contained in:
Johannes Zellner
192
dashboard/src/components/ApplinkDialog.vue
Normal file
192
dashboard/src/components/ApplinkDialog.vue
Normal file
@@ -0,0 +1,192 @@
|
||||
<template>
|
||||
<Dialog ref="applinkDialog"
|
||||
:title="$t('app.editApplinkDialog.title')"
|
||||
:reject-label="$t('main.dialog.cancel')"
|
||||
:confirm-label="$t('main.dialog.save')"
|
||||
confirm-style="success"
|
||||
:confirm-active="isValid"
|
||||
:confirm-busy="busy"
|
||||
@confirm="submit()"
|
||||
>
|
||||
<form @submit="submit()" autocomplete="off">
|
||||
<fieldset :disabled="busy">
|
||||
<input style="display: none;" type="submit" :disabled="!isValid" />
|
||||
|
||||
<p class="has-error" v-show="error.generic">{{ error.generic }}</p>
|
||||
|
||||
<FormGroup :class="{ 'has-error': error.upstreamUri }">
|
||||
<label for="applinkUpstreamUri">{{ $t('app.applinks.upstreamUri') }}</label>
|
||||
<TextInput id="applinkUpstreamUri" v-model="upstreamUri" required />
|
||||
<span class="text-danger" v-show="error.upstreamUri">{{ error.upstreamUri }}</span>
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label for="applinkLabel">{{ $t('app.applinks.label') }}</label>
|
||||
<TextInput id="applinkLabel" v-model="label" />
|
||||
</FormGroup>
|
||||
|
||||
<div>
|
||||
<div>
|
||||
<label for="previewIcon">{{ $t('app.display.icon') }}</label>
|
||||
</div>
|
||||
<div id="previewIcon" class="app-custom-icon" @click="showCustomIconSelector()">
|
||||
<img :src="iconSrc" />
|
||||
<i class="picture-edit-indicator fa fa-pencil-alt"></i>
|
||||
</div>
|
||||
<span style="cursor: pointer;" @click="resetCustomIcon()">{{ $t('app.applinks.clearIconAction') }}</span> - <span class="text-small">{{ $t('app.applinks.clearIconDescription') }}</span>
|
||||
<input type="file" ref="iconFileInput" style="display: none" accept="image/png" @change="onIconFileInputChanged($event)"/>
|
||||
</div>
|
||||
|
||||
<FormGroup>
|
||||
<label for="applinkTags">{{ $t('app.display.tags') }}</label>
|
||||
<TagInput id="applinkTags" :placeholder="$t('app.display.tagsPlaceholder')" v-model="tags" v-tooltip="$t('app.display.tagsTooltip')" />
|
||||
</FormGroup>
|
||||
|
||||
<FormGroup>
|
||||
<label>{{ $t('app.accessControl.userManagement.dashboardVisibility') }} <sup><a href="https://docs.cloudron.io/apps/#dashboard-visibility" class="help" target="_blank"><i class="fa fa-question-circle"></i></a></sup></label>
|
||||
<Radiobutton v-model="accessRestrictionOption" value="any" :label="$t('app.accessControl.userManagement.visibleForAllUsers')"/>
|
||||
<Radiobutton v-model="accessRestrictionOption" value="groups" :label="$t('app.accessControl.userManagement.visibleForSelected')"/>
|
||||
<!-- <span class="label label-danger"v-show="accessRestrictionOption === 'groups' && !isAccessRestrictionValid(applinkDialogData)">{{ $t('appstore.installDialog.errorUserManagementSelectAtLeastOne') }}</span> -->
|
||||
</FormGroup>
|
||||
|
||||
<div v-if="accessRestrictionOption === 'groups'">
|
||||
<div style="margin-left: 20px; display: flex;">
|
||||
<div>
|
||||
{{ $t('appstore.installDialog.users') }}: <MultiSelect v-model="accessRestriction.users" :options="users" option-label="username" />
|
||||
</div>
|
||||
<div>
|
||||
{{ $t('appstore.installDialog.groups') }}: <MultiSelect v-model="accessRestriction.groups" :options="groups" option-label="name" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</fieldset>
|
||||
</form>
|
||||
</Dialog>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import { Dialog, FormGroup, MultiSelect, Radiobutton, TagInput, TextInput } from 'pankow';
|
||||
|
||||
import ApplinksModel from '../models/ApplinksModel.js';
|
||||
import UsersModel from '../models/UsersModel.js';
|
||||
import GroupsModel from '../models/GroupsModel.js';
|
||||
|
||||
const API_ORIGIN = import.meta.env.VITE_API_ORIGIN ? import.meta.env.VITE_API_ORIGIN : window.location.origin;
|
||||
const accessToken = localStorage.token;
|
||||
|
||||
const applinksModel = ApplinksModel.create(API_ORIGIN, accessToken);
|
||||
const usersModel = UsersModel.create(API_ORIGIN, accessToken);
|
||||
const groupsModel = GroupsModel.create(API_ORIGIN, accessToken);
|
||||
|
||||
export default {
|
||||
name: 'ApplinkDialog',
|
||||
components: {
|
||||
Dialog,
|
||||
FormGroup,
|
||||
MultiSelect,
|
||||
Radiobutton,
|
||||
TagInput,
|
||||
TextInput,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
API_ORIGIN,
|
||||
users: [],
|
||||
groups: [],
|
||||
busy: false,
|
||||
error: {},
|
||||
mode: '',
|
||||
id: '',
|
||||
upstreamUri: '',
|
||||
label: '',
|
||||
tags: [],
|
||||
icon: {},
|
||||
iconUrl: '',
|
||||
accessRestrictionOption: '',
|
||||
accessRestriction: {
|
||||
users: [],
|
||||
groups: [],
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
isValid() {
|
||||
if (!this.label) return false;
|
||||
if (!this.upstreamUri) return false;
|
||||
|
||||
return true;
|
||||
},
|
||||
iconSrc() {
|
||||
if (this.icon.data === '__original__') { // user clicked reset
|
||||
// https://png-pixel.com/ white pixel placeholder
|
||||
return 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8/x8AAwMCAO+ip1sAAAAASUVORK5CYII=';
|
||||
} else if (this.icon.data) { // user uploaded icon
|
||||
return this.icon.data;
|
||||
} else if (this.iconUrl) { // current icon
|
||||
return API_ORIGIN + this.iconUrl;
|
||||
} else {
|
||||
return API_ORIGIN + 'img/appicon_fallback.png';
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
resetCustomIcon() {
|
||||
this.icon.data = '__original__';
|
||||
},
|
||||
showCustomIconSelector() {
|
||||
this.$refs.iconFileInput.click();
|
||||
},
|
||||
onIconFileInputChanged(event) {
|
||||
const fr = new FileReader();
|
||||
fr.onload = () => this.icon.data = fr.result;
|
||||
fr.readAsDataURL(event.target.files[0]);
|
||||
},
|
||||
async open(applink) {
|
||||
this.mode = applink ? 'edit' : 'new';
|
||||
this.id = applink ? applink.id : '';
|
||||
this.upstreamUri = applink ? applink.upstreamUri : '';
|
||||
this.label = applink ? applink.label : '';
|
||||
this.iconUrl = applink ? applink.iconUrl : '';
|
||||
this.tags = applink ? applink.tags : [];
|
||||
this.accessRestrictionOption = applink && applink.accessRestriction ? 'groups' : 'any';
|
||||
this.accessRestriction = applink && applink.accessRestriction ? applink.accessRestriction : { users: [], groups: [] };
|
||||
|
||||
// fetch users and groups
|
||||
this.users = await usersModel.list();
|
||||
this.groups = await groupsModel.list();
|
||||
|
||||
this.$refs.applinkDialog.open();
|
||||
},
|
||||
async submit() {
|
||||
this.busy = true;
|
||||
|
||||
const data = {
|
||||
label: this.label,
|
||||
upstreamUri: this.upstreamUri,
|
||||
tags: this.tags,
|
||||
};
|
||||
|
||||
data.accessRestriction = null;
|
||||
if (this.accessRestrictionOption === 'groups') {
|
||||
data.accessRestriction = { users: [], groups: [] };
|
||||
data.accessRestriction.users = this.accessRestriction.users.map(function (u) { return u.id; });
|
||||
data.accessRestriction.groups = this.accessRestriction.groups.map(function (g) { return g.id; });
|
||||
}
|
||||
|
||||
if (this.icon.data === '__original__') { // user reset the icon
|
||||
data.icon = '';
|
||||
} else if (this.icon.data) { // user loaded custom icon
|
||||
data.icon = this.icon.data.replace(/^data:image\/[a-z]+;base64,/, '');
|
||||
}
|
||||
|
||||
await applinksModel.update(this.id, data);
|
||||
|
||||
this.busy = false;
|
||||
|
||||
this.$refs.applinkDialog.close();
|
||||
},
|
||||
},
|
||||
};
|
||||
|
||||
</script>
|
||||
Reference in New Issue
Block a user