richard/cyca
1
Fork 0
Code Issues Activity

Refresh

Browse Source
This commit is contained in:
Richard Dern
2022-01-12 00:35:37 +01:00
commit 400e3d01f1
1363 changed files with 57778 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

257
resources/js/components/GroupsBrowser/GroupForm.vue Executable file
View File

@@ -0,0 +1,257 @@
<template>
<article>
<header>
<h1>
{{ title }}
</h1>
</header>
<div class="body">
<div
v-if="group && group.description"
v-html="group.description"
></div>
<form
v-on:submit.prevent="onSubmit"
v-if="
!group ||
(group &&
(group.pivot.status === 'own' ||
group.pivot.status === 'created'))
"
>
<input type="hidden" name="id" v-model="id" />
<div class="form-group">
<input
type="text"
v-model="name"
v-bind:placeholder="__('Group name')"
/>
</div>
<div class="form-group">
<input
type="text"
v-model="description"
v-bind:placeholder="__('Description')"
/>
</div>
<div class="form-group">
<label class="my-0"
><input type="checkbox" v-model="inviteOnly" />
<span class="ml-2">{{ __("Invite only") }}</span>
</label>
</div>
<div class="form-group">
<label class="my-0"
><input type="checkbox" v-model="autoAcceptUsers" />
<span class="ml-2">{{ __("Auto-accept users") }}</span>
</label>
</div>
<div class="flex justify-between mt-4">
<button class="success" type="submit">
<svg fill="currentColor" width="16" height="16">
<use
v-bind:xlink:href="icon(!id ? 'add' : 'update')"
/>
</svg>
<span>
{{ !id ? __("Create group") : __("Update group") }}
</span>
</button>
<div v-if="id !== null" class="flex items-center space-x-2">
<button
class="secondary"
v-on:click.stop.prevent="$emit('unselect')"
>
<svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('cancel')" />
</svg>
<span>
{{ __("Cancel") }}
</span>
</button>
<button
v-if="group.pivot.status !== 'own'"
class="danger"
v-on:click.stop.prevent="
$emit('group-deleted', group)
"
>
<svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('trash')" />
</svg>
<span>
{{ __("Delete") }}
</span>
</button>
</div>
</div>
</form>
<form
v-if="
group &&
(group.pivot.status === 'own' ||
group.pivot.status === 'created')
"
v-on:submit.prevent="onInviteSubmit"
>
<div class="form-group">
<div class="input-group">
<input
type="text"
name="title"
v-model="inviteEmail"
v-bind:placeholder="__('E-Mail Address')"
/>
<button type="submit" class="info">
<svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('join')" />
</svg>
<span>
{{ __("Invite in group") }}
</span>
</button>
</div>
</div>
</form>
<div
v-if="group && group.pivot.status === 'invited'"
class="mt-4 flex items-center justify-between"
>
<button
class="success"
v-on:click="$emit('invitation-accepted', group)"
>
<svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('check')" />
</svg>
<span>
{{ __("Accept invitation") }}
</span>
</button>
<button
class="danger"
v-on:click="$emit('invitation-declined', group)"
>
<svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('cancel')" />
</svg>
<span>
{{ __("Decline invitation") }}
</span>
</button>
</div>
<div
v-if="
group &&
(group.pivot.status === 'accepted' ||
group.pivot.status === 'joining')
"
class="mt-4"
>
<button class="danger" v-on:click="$emit('leave', group)">
<svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('logout')" />
</svg>
<span>
{{ __("Leave the group") }}
</span>
</button>
</div>
</div>
</article>
</template>
<script>
export default {
props: ["group"],
data: function () {
return {
id: null,
name: null,
description: null,
inviteOnly: false,
autoAcceptUsers: false,
inviteEmail: null,
};
},
computed: {
title: function () {
if (this.group) {
return this.group.name;
}
return this.__("Create group");
},
},
watch: {
group: function (group) {
if (!group) {
this.id = null;
this.name = null;
this.description = null;
this.inviteOnly = false;
this.autoAcceptUsers = false;
} else {
this.id = group.id;
this.name = group.name;
this.description = group.description;
this.inviteOnly = group.invite_only;
this.autoAcceptUsers = group.auto_accept_users;
}
this.$forceUpdate();
},
},
methods: {
onSubmit: function () {
const self = this;
const properties = {
name: self.name,
description: self.description,
invite_only: self.inviteOnly,
auto_accept_users: self.autoAcceptUsers,
};
if (!properties.name) {
return;
}
if (self.id) {
properties["id"] = self.id;
self.$emit("group-updated", properties);
} else {
self.$emit("group-created", properties);
self.id = null;
self.name = null;
self.description = null;
self.inviteOnly = false;
self.autoAcceptUsers = false;
}
},
onInviteSubmit: function () {
const self = this;
if (!self.inviteEmail) {
return false;
}
api.post(route("group.invite_user", self.group), {
email: self.inviteEmail,
}).then(function (response) {
self.inviteEmail = null;
self.$emit("invitation-sent");
//TODO: Handle errors
});
},
},
};
</script>

121
resources/js/components/GroupsBrowser/GroupsBrowserItem.vue Executable file
View File

@@ -0,0 +1,121 @@
<template>
<div class="list-item">
<div class="handle">
<svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('move-v')" />
</svg>
</div>
<div class="flex-grow flex justify-between">
<div>
<h2 class="text-black dark:text-white">{{ group.name }}</h2>
<div v-if="group.creator" class="mb-1">
{{ __("Created by") }} {{ group.creator.name }}
</div>
<div class="mb-1">{{ group.description }}</div>
<div class="flex items-center space-x-1">
<span
v-if="group.pivot"
class="badge"
v-bind:class="'group-status-' + group.pivot.status"
>{{ status }}</span
>
<span
class="badge default"
v-bind:class="{
'group-invite-only': group.invite_only,
}"
v-if="group.invite_only"
>{{ __("Invite only") }}</span
>
<span
class="badge"
v-bind:class="{
success: group.auto_accept_users,
warning: !group.auto_accept_users,
}"
v-if="!group.invite_only"
>{{
group.auto_accept_users
? __("Auto-accept users")
: __("New users must be approved")
}}</span
>
</div>
</div>
</div>
<div class="badges">
<span
v-if="group.pending_users_count > 0"
class="badge warning"
v-bind:title="__('Pending users')"
><svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('group')" /></svg
>{{ group.pending_users_count }}</span
>
<span class="badge success" v-bind:title="__('Active users')"
><svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('group')" /></svg
>{{ group.active_users_count }}</span
>
<button
class="info"
v-if="group.pivot"
v-on:click="$emit('selected', group)"
>
<svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('update')" />
</svg>
<span>{{ __("Edit") }} </span>
</button>
<button
class="success"
v-if="!group.pivot"
v-on:click="$emit('join', group)"
>
<svg fill="currentColor" width="16" height="16">
<use v-bind:xlink:href="icon('join')" />
</svg>
<span
>{{ group.auto_accept_users ? __("Join") : __("Apply") }}
</span>
</button>
</div>
</div>
</template>
<script>
export default {
props: ["group", "movable"],
computed: {
status: function () {
const self = this;
if (!self.group.pivot) {
return;
}
switch (self.group.pivot.status) {
case "own":
return self.__("My own group");
case "created":
return self.__("Created by me");
case "invited":
return self.__("Invited to join");
case "accepted":
return self.__("Accepted");
case "rejected":
return self.__("Rejected");
case "left":
return self.__("Group left");
case "joining":
return self.__("Waiting for joining");
}
},
},
methods: {
select: function () {
this.$emit("selected");
},
},
};
</script>