feat(frontend): cleared admin card
This commit is contained in:
Dimitrie Stefanescu
@@ -1,34 +0,0 @@
|
||||
<template>
|
||||
<v-card rounded="lg" class="pa-4 mb-4" elevation="3" v-bind="$attrs">
|
||||
<template slot="progress">
|
||||
<v-progress-linear indeterminate></v-progress-linear>
|
||||
</template>
|
||||
<v-card-title>
|
||||
<v-icon class="mr-2">{{ icon }}</v-icon>
|
||||
{{ title }}
|
||||
|
||||
<v-spacer />
|
||||
<span>
|
||||
<slot name="menu"></slot>
|
||||
</span>
|
||||
</v-card-title>
|
||||
|
||||
<v-card-subtitle>
|
||||
<span>
|
||||
<slot name="subtitle"></slot>
|
||||
</span>
|
||||
</v-card-subtitle>
|
||||
<v-card-text>
|
||||
<slot></slot>
|
||||
</v-card-text>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'AdminCard',
|
||||
props: ['title', 'icon']
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss"></style>
|
||||
File diff suppressed because one or more lines are too long
@@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<admin-card title="Server Info">
|
||||
<v-card title="Server Info">
|
||||
<template v-slot:menu>
|
||||
<v-btn small outlined rounded color="primary" v-if="!edit" @click="edit = !edit">
|
||||
<v-icon size="medium">mdi-pencil</v-icon>
|
||||
@@ -26,91 +26,100 @@
|
||||
<!-- </v-card-text>-->
|
||||
<!-- </div>-->
|
||||
<div key="viewPanel">
|
||||
<div class="d-flex align-center mb-2" v-for="(value,name) in serverDetails" :key="name">
|
||||
<span class="cover-fill primary white--text pa-2 rounded border-primary mr-2"
|
||||
disabled
|
||||
style="min-width: 25%">{{ value.label }}</span>
|
||||
<div class="d-flex align-center mb-2" v-for="(value, name) in serverDetails" :key="name">
|
||||
<span
|
||||
class="cover-fill primary white--text pa-2 rounded border-primary mr-2"
|
||||
disabled
|
||||
style="min-width: 25%"
|
||||
>
|
||||
{{ value.label }}
|
||||
</span>
|
||||
<div v-if="edit" class="flex-grow-1 rounded border-primary dashed primary--text">
|
||||
<span v-if="value.type == 'boolean'">
|
||||
<v-switch :disabled="!edit"
|
||||
hide-details
|
||||
flat
|
||||
v-model="serverModifications[name]"
|
||||
class="pa-1 ma-1 caption">
|
||||
<template v-slot:label>
|
||||
<span class="caption">{{ value.hint }}</span>
|
||||
</template>
|
||||
<span v-if="value.type == 'boolean'">
|
||||
<v-switch
|
||||
:disabled="!edit"
|
||||
hide-details
|
||||
flat
|
||||
v-model="serverModifications[name]"
|
||||
class="pa-1 ma-1 caption"
|
||||
>
|
||||
<template v-slot:label>
|
||||
<span class="caption">{{ value.hint }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
</span>
|
||||
<v-text-field dense
|
||||
v-else
|
||||
hide-details
|
||||
solo
|
||||
flat
|
||||
:hint="value.hint"
|
||||
v-model="serverModifications[name]"
|
||||
class="ma-0 body-2"></v-text-field>
|
||||
<v-text-field
|
||||
dense
|
||||
v-else
|
||||
hide-details
|
||||
solo
|
||||
flat
|
||||
:hint="value.hint"
|
||||
v-model="serverModifications[name]"
|
||||
class="ma-0 body-2"
|
||||
></v-text-field>
|
||||
</div>
|
||||
<span v-else class="pa-2 pl-3 border-primary flex-grow-1 rounded">
|
||||
<span v-if="value.type == 'boolean'">
|
||||
<v-switch :disabled="!edit"
|
||||
hide-details
|
||||
flat
|
||||
v-model="serverModifications[name]"
|
||||
class="pa-0 ma-0 caption">
|
||||
<template v-slot:label>
|
||||
<span class="caption">{{ value.hint }}</span>
|
||||
</template>
|
||||
<v-switch
|
||||
:disabled="!edit"
|
||||
hide-details
|
||||
flat
|
||||
v-model="serverModifications[name]"
|
||||
class="pa-0 ma-0 caption"
|
||||
>
|
||||
<template v-slot:label>
|
||||
<span class="caption">{{ value.hint }}</span>
|
||||
</template>
|
||||
</v-switch>
|
||||
</span>
|
||||
<span v-else>{{ serverInfo[name] || "-" }}</span>
|
||||
<span v-else>{{ serverInfo[name] || '-' }}</span>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</v-fade-transition>
|
||||
</div>
|
||||
</admin-card>
|
||||
</v-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AdminCard from "@/components/admin/AdminCard";
|
||||
import gql from "graphql-tag";
|
||||
import gql from 'graphql-tag'
|
||||
|
||||
export default {
|
||||
name: "ServerInfoAdminCard",
|
||||
components: { AdminCard },
|
||||
name: 'ServerInfoAdminCard',
|
||||
components: {},
|
||||
data() {
|
||||
return {
|
||||
edit: false,
|
||||
serverModifications: {},
|
||||
serverDetails: {
|
||||
name: {
|
||||
label: "Name",
|
||||
label: 'Name',
|
||||
hint: "This server's public name"
|
||||
},
|
||||
description: {
|
||||
label: "Description",
|
||||
hint: "A short description of this server"
|
||||
label: 'Description',
|
||||
hint: 'A short description of this server'
|
||||
},
|
||||
company: {
|
||||
label: "Company",
|
||||
hint: "The owner of this server"
|
||||
label: 'Company',
|
||||
hint: 'The owner of this server'
|
||||
},
|
||||
adminContact: {
|
||||
label: "Admin contact",
|
||||
hint: "The administrator of this server"
|
||||
label: 'Admin contact',
|
||||
hint: 'The administrator of this server'
|
||||
},
|
||||
termsOfService: {
|
||||
label: "Terms of service",
|
||||
hint: "Url pointing to the terms of service page"
|
||||
label: 'Terms of service',
|
||||
hint: 'Url pointing to the terms of service page'
|
||||
},
|
||||
inviteOnly: {
|
||||
label: "Invite-Only mode",
|
||||
hint: "Only users with an invitation will be able to join",
|
||||
type: "boolean"
|
||||
label: 'Invite-Only mode',
|
||||
hint: 'Only users with an invitation will be able to join',
|
||||
type: 'boolean'
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
},
|
||||
apollo: {
|
||||
serverInfo: {
|
||||
@@ -127,36 +136,38 @@ export default {
|
||||
}
|
||||
`,
|
||||
update(data) {
|
||||
console.log("got apollo data", data);
|
||||
delete data.serverInfo.__typename;
|
||||
this.serverModifications = Object.assign({}, data.serverInfo);
|
||||
return data.serverInfo;
|
||||
console.log('got apollo data', data)
|
||||
delete data.serverInfo.__typename
|
||||
this.serverModifications = Object.assign({}, data.serverInfo)
|
||||
return data.serverInfo
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
cancelEdit() {
|
||||
console.log("edit was cancelled");
|
||||
this.serverModifications = Object.assign({}, this.serverInfo);
|
||||
this.edit = false;
|
||||
this.loading = false;
|
||||
this.saving = false;
|
||||
console.log('edit was cancelled')
|
||||
this.serverModifications = Object.assign({}, this.serverInfo)
|
||||
this.edit = false
|
||||
this.loading = false
|
||||
this.saving = false
|
||||
},
|
||||
async saveEdit() {
|
||||
console.log("saving edits");
|
||||
console.log('saving edits')
|
||||
await this.$apollo.mutate({
|
||||
mutation: gql`mutation($info: ServerInfoUpdateInput!) {
|
||||
mutation: gql`
|
||||
mutation($info: ServerInfoUpdateInput!) {
|
||||
serverInfoUpdate(info: $info)
|
||||
}`,
|
||||
}
|
||||
`,
|
||||
variables: {
|
||||
info: this.serverModifications
|
||||
}
|
||||
});
|
||||
await this.$apollo.queries["serverInfo"].refetch();
|
||||
this.cancelEdit();
|
||||
})
|
||||
await this.$apollo.queries['serverInfo'].refetch()
|
||||
this.cancelEdit()
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
@@ -1,18 +1,17 @@
|
||||
<template>
|
||||
<div id="admin-settings">
|
||||
<server-info-admin-card/>
|
||||
<!-- <server-admins-card/>-->
|
||||
<server-info-admin-card />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ServerInfoAdminCard from "@/components/admin/ServerInfoCard";
|
||||
import ServerAdminsCard from "@/components/admin/ServerAdminsCard";
|
||||
import ServerInfoAdminCard from '@/components/admin/ServerInfoCard'
|
||||
import ServerAdminsCard from '@/components/admin/ServerAdminsCard'
|
||||
|
||||
export default {
|
||||
name: "AdminSettings",
|
||||
name: 'AdminSettings',
|
||||
components: { ServerAdminsCard, ServerInfoAdminCard }
|
||||
};
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -237,7 +237,6 @@ import webhooksQuery from '@/graphql/webhooks.gql'
|
||||
export default {
|
||||
name: 'Webhooks',
|
||||
components: {
|
||||
AdminCard: () => import('@/components/admin/AdminCard'),
|
||||
WebhookForm: () => import('@/components/settings/WebhookForm'),
|
||||
NoDataPlaceholder: () => import('@/components/NoDataPlaceholder'),
|
||||
ErrorPlaceholder: () => import('@/components/ErrorPlaceholder')
|
||||
|
||||
Reference in New Issue
Block a user