chamilo
/
chamilo-lms
mirror of https://github.com/chamilo/chamilo-lms/tree/1.11.x
2
0
Fork 0
Code Issues Projects Releases Wiki Activity

Minor: Social: Format code

Browse Source
pull/4826/head
Angel Fernando Quiroz Campos 2 years ago
parent 5359c017aa
commit 9b2684080c
2 changed files with 322 additions and 255 deletions
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Show Stats Download Patch File Download Diff File
  1. 132
      assets/vue/views/userreluser/Add.vue
  2. 445
      assets/vue/views/userreluser/List.vue

132
assets/vue/views/userreluser/Add.vue
Unescape View File

@ -1,32 +1,33 @@
<template>
<ButtonToolbar>
<BaseButton
type="black"
icon="back"
type="black"
@click="goToBack"
/>
</ButtonToolbar>
<div class="flex flex-row pt-2">
<div class="w-full">
<div class="text-h4 q-mb-md" v-t="'Search'" />
<div
v-t="'Search'"
class="text-h4 q-mb-md"
/>
<VueMultiselect
:placeholder="t('Add')"
:loading="isLoadingSelect"
:options="users"
:multiple="true"
:searchable="true"
:internal-search="false"
@search-change="asyncFind"
@select="addFriend"
limit-text="3"
limit="3"
label="username"
track-by="id"
:internal-search="false"
:loading="isLoadingSelect"
:multiple="true"
:options="users"
:placeholder="t('Add')"
:searchable="true"
label="username"
limit="3"
limit-text="3"
track-by="id"
@select="addFriend"
@search-change="asyncFind"
/>
</div>
</div>
</template>
@ -34,73 +35,76 @@
<style src="vue-multiselect/dist/vue-multiselect.css"></style>
<script>
import { mapActions, mapGetters } from 'vuex';
import { mapFields } from 'vuex-map-fields';
import Toolbar from '../../components/Toolbar.vue';
import { useStore } from "vuex"
import VueMultiselect from 'vue-multiselect'
import { ref, reactive, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import axios from "axios";
import {ENTRYPOINT} from "../../config/entrypoint";
import useVuelidate from "@vuelidate/core";
import VueMultiselect from "vue-multiselect"
import { computed, ref } from "vue"
import axios from "axios"
import { ENTRYPOINT } from "../../config/entrypoint"
import useVuelidate from "@vuelidate/core"
import ButtonToolbar from "../../components/basecomponents/ButtonToolbar.vue"
import BaseButton from "../../components/basecomponents/BaseButton.vue"
import { useRouter } from "vue-router"
import { useI18n } from "vue-i18n"
export default {
name: 'UserRelUserAdd',
servicePrefix: 'userreluser',
name: "UserRelUserAdd",
servicePrefix: "userreluser",
components: {
BaseButton,
ButtonToolbar,
VueMultiselect
VueMultiselect,
},
setup() {
const users = ref([]);
const isLoadingSelect = ref(false);
const store = useStore();
const users = ref([])
const isLoadingSelect = ref(false)
const store = useStore()
const router = useRouter()
const { t } = useI18n()
const user = store.getters["security/getUser"];
const user = store.getters["security/getUser"]
function asyncFind (query) {
function asyncFind(query) {
if (query.toString().length < 3) {
return;
return
}
isLoadingSelect.value = true;
axios.get(ENTRYPOINT + 'users', {
params: {
username: query
}
}).then(response => {
isLoadingSelect.value = false;
let data = response.data;
users.value = data['hydra:member'];
}).catch(function (error) {
isLoadingSelect.value = false;
console.log(error);
});
isLoadingSelect.value = true
axios
.get(ENTRYPOINT + "users", {
params: {
username: query,
},
})
.then((response) => {
isLoadingSelect.value = false
let data = response.data
users.value = data["hydra:member"]
})
.catch(function (error) {
isLoadingSelect.value = false
console.log(error)
})
}
function addFriend(friend) {
axios.post(ENTRYPOINT + 'user_rel_users', {
user: user['@id'],
friend: friend['@id'],
relationType: 10,
}).then(response => {
console.log(response);
isLoadingSelect.value = false;
}).catch(function (error) {
isLoadingSelect.value = false;
console.log(error);
});
axios
.post(ENTRYPOINT + "user_rel_users", {
user: user["@id"],
friend: friend["@id"],
relationType: 10,
})
.then((response) => {
console.log(response)
isLoadingSelect.value = false
})
.catch(function (error) {
isLoadingSelect.value = false
console.log(error)
})
}
const goToBack = () => {
router.push({ name: 'UserRelUserList' })
router.push({ name: "UserRelUserList" })
}
const selectedItems = ref([])
@ -110,9 +114,9 @@ export default {
const item = ref({})
const submitted = ref(false)
const isAuthenticated = computed(() => store.getters['security/isAuthenticated'])
const isAdmin = computed(() => store.getters['security/isAdmin'])
const currentUser = computed(() => store.getters['security/getUser'])
const isAuthenticated = computed(() => store.getters["security/isAuthenticated"])
const isAdmin = computed(() => store.getters["security/isAdmin"])
const currentUser = computed(() => store.getters["security/getUser"])
return {
v$: useVuelidate(),
@ -131,7 +135,7 @@ export default {
isAuthenticated,
isAdmin,
currentUser,
};
}
},
};
}
</script>

445
assets/vue/views/userreluser/List.vue
Unescape View File

@ -1,128 +1,144 @@
<template>
<ButtonToolbar>
<BaseButton
type="black"
icon="user-add"
:disabled="isLoading"
:label="t('Add friend')"
icon="user-add"
type="black"
@click="goToAdd"
/>
<BaseButton
type="black"
icon="refresh"
:label="t('Refresh')"
:disabled="isLoading"
:label="t('Refresh')"
icon="refresh"
type="black"
@click="reloadHandler"
/>
<BaseButton
type="black"
icon="delete-multiple-user"
:label="t('Delete friends')"
:disabled="isLoading || !selectedItems.length"
:label="t('Delete friends')"
icon="delete-multiple-user"
type="black"
@click="confirmDeleteMultiple"
/>
</ButtonToolbar>
<div v-if="friendRequests.length">
<div
class="text-h4 mb-2"
v-t="'Requests'"
class="text-h4 mb-2"
/>
<div
v-for="(request, i) in friendRequests"
:key="i"
class="flex flex-row gap-2 items-center"
v-for="(request, i) in friendRequests"
:key="i"
class="flex flex-row gap-2 items-center"
>
<BaseUserAvatar
:image-url="request.user.illustrationUrl + '?w=80&h=80&fit=crop'"
/>
<BaseUserAvatar :image-url="request.user.illustrationUrl + '?w=80&h=80&fit=crop'" />
{{ request.user.username }}
<BaseButton
type="black"
icon="user-add"
only-icon
type="black"
@click="addFriend(request)"
/>
</div>
</div>
<div
v-for="(request, i) in waitingRequests"
:key="i"
v-for="(request, i) in waitingRequests"
:key="i"
>
<BaseUserAvatar
:image-url="request.friend.illustrationUrl + '?w=80&h=80&fit=crop'"
/>
<BaseUserAvatar :image-url="request.friend.illustrationUrl + '?w=80&h=80&fit=crop'" />
{{ request.friend.username }}
<BaseTag :label="t('Waiting')" type="info"/>
<BaseTag
:label="t('Waiting')"
type="info"
/>
</div>
<div class="flex flex-row pt-2">
<div class="w-full">
<div class="text-h4 q-mb-md">Friends</div>
<!-- :loading="isLoading"-->
<!-- :loading="isLoading"-->
<DataTable
class="p-datatable-sm"
:value="items"
v-model:selection="selectedItems"
dataKey="id"
v-model:filters="friendFilter"
sortBy="sendDate"
sortOrder="asc"
v-model:selection="selectedItems"
:lazy="true"
:paginator="false"
:rowsPerPageOptions="[5, 10, 20, 50]"
:totalRecords="totalItems"
@page="onPage($event)"
@sort="sortingChanged($event)"
:value="items"
class="p-datatable-sm"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
dataKey="id"
paginatorTemplate="CurrentPageReport FirstPageLink PrevPageLink PageLinks NextPageLink LastPageLink RowsPerPageDropdown"
:rowsPerPageOptions="[5, 10, 20, 50]"
responsiveLayout="scroll"
currentPageReportTemplate="Showing {first} to {last} of {totalRecords}"
sortBy="sendDate"
sortOrder="asc"
@page="onPage($event)"
@sort="sortingChanged($event)"
>
<Column selectionMode="multiple" style="width: 3rem" :exportable="false"></Column>
<Column field="sender" :header="$t('User')" :sortable="false">
<template #body="slotProps">
<q-avatar size="40px">
<img :src="slotProps.data.friend.illustrationUrl + '?w=80&h=80&fit=crop'" />
</q-avatar>
<Column
:exportable="false"
selectionMode="multiple"
style="width: 3rem"
></Column>
<Column
:header="$t('User')"
:sortable="false"
field="sender"
>
<template #body="slotProps">
<q-avatar size="40px">
<img :src="slotProps.data.friend.illustrationUrl + '?w=80&h=80&fit=crop'" />
</q-avatar>
{{ slotProps.data.friend.username }}
</template>
</Column>
<Column field="createdAt" :header="$t('Sent date')" :sortable="true">
<template #body="slotProps">
{{ $filters.relativeDatetime(slotProps.data.createdAt) }}
</template>
</Column>
<Column :exportable="false">
<template #body="slotProps">
<!-- class="flex flex-row gap-2"-->
<!-- <v-icon v-if="slotProps.data.relationType == 3" icon="mdi-check" />-->
<v-btn
tile
</template>
</Column>
<Column
:header="$t('Sent date')"
:sortable="true"
field="createdAt"
>
<template #body="slotProps">
{{ $filters.relativeDatetime(slotProps.data.createdAt) }}
</template>
</Column>
<Column :exportable="false">
<template #body="slotProps">
<!-- class="flex flex-row gap-2"-->
<!-- <v-icon v-if="slotProps.data.relationType == 3" icon="mdi-check" />-->
<v-btn
icon
@click="confirmDeleteItem(slotProps.data)" >
<v-icon icon="mdi-delete" />
</v-btn>
</template>
</Column>
</DataTable>
tile
@click="confirmDeleteItem(slotProps.data)"
>
<v-icon icon="mdi-delete" />
</v-btn>
</template>
</Column>
</DataTable>
</div>
</div>
<Dialog v-model:visible="itemDialog" :style="{width: '450px'}" :header="$t('New folder')" :modal="true" class="p-fluid">
<Dialog
v-model:visible="itemDialog"
:header="$t('New folder')"
:modal="true"
:style="{ width: '450px' }"
class="p-fluid"
>
<BaseInputText
id="title"
v-model.trim="item.title"
@ -130,48 +146,90 @@
/>
<template #footer>
<Button label="Cancel" icon="pi pi-times" class="p-button-text" @click="hideDialog"/>
<Button label="Save" icon="pi pi-check" class="p-button-text" @click="saveItem" />
<Button
class="p-button-text"
icon="pi pi-times"
label="Cancel"
@click="hideDialog"
/>
<Button
class="p-button-text"
icon="pi pi-check"
label="Save"
@click="saveItem"
/>
</template>
</Dialog>
<Dialog v-model:visible="deleteItemDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<Dialog
v-model:visible="deleteItemDialog"
:modal="true"
:style="{ width: '450px' }"
header="Confirm"
>
<div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
<span v-if="item">Are you sure you want to delete <b>{{item.title}}</b>?</span>
<i
class="pi pi-exclamation-triangle p-mr-3"
style="font-size: 2rem"
/>
<span v-if="item"
>Are you sure you want to delete <b>{{ item.title }}</b
>?</span
>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteItemDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteItemButton(item)" />
<Button
class="p-button-text"
icon="pi pi-times"
label="No"
@click="deleteItemDialog = false"
/>
<Button
class="p-button-text"
icon="pi pi-check"
label="Yes"
@click="deleteItemButton(item)"
/>
</template>
</Dialog>
<Dialog v-model:visible="deleteMultipleDialog" :style="{width: '450px'}" header="Confirm" :modal="true">
<Dialog
v-model:visible="deleteMultipleDialog"
:modal="true"
:style="{ width: '450px' }"
header="Confirm"
>
<div class="confirmation-content">
<i class="pi pi-exclamation-triangle p-mr-3" style="font-size: 2rem" />
<i
class="pi pi-exclamation-triangle p-mr-3"
style="font-size: 2rem"
/>
<span v-if="item">Are you sure you want to delete the selected items?</span>
</div>
<template #footer>
<Button label="No" icon="pi pi-times" class="p-button-text" @click="deleteMultipleDialog = false"/>
<Button label="Yes" icon="pi pi-check" class="p-button-text" @click="deleteMultipleItems" />
<Button
class="p-button-text"
icon="pi pi-times"
label="No"
@click="deleteMultipleDialog = false"
/>
<Button
class="p-button-text"
icon="pi pi-check"
label="Yes"
@click="deleteMultipleItems"
/>
</template>
</Dialog>
</template>
<script>
import { mapActions, mapGetters } from 'vuex';
import { mapFields } from 'vuex-map-fields';
import ListMixin from '../../mixins/ListMixin';
import ActionCell from '../../components/ActionCell.vue';
import ResourceFileLink from '../../components/documents/ResourceFileLink.vue';
import DataFilter from '../../components/DataFilter';
import DocumentsFilterForm from '../../components/documents/Filter';
import { ref, reactive, onMounted, computed } from 'vue';
import { useStore } from 'vuex';
import axios from "axios";
import {ENTRYPOINT} from "../../config/entrypoint";
import {RESOURCE_LINK_PUBLISHED} from "../../components/resource_links/visibility";
import { mapActions, mapGetters, useStore } from "vuex"
import { mapFields } from "vuex-map-fields"
import ListMixin from "../../mixins/ListMixin"
import { ref } from "vue"
import axios from "axios"
import { RESOURCE_LINK_PUBLISHED } from "../../components/resource_links/visibility"
import ButtonToolbar from "../../components/basecomponents/ButtonToolbar.vue"
import BaseButton from "../../components/basecomponents/BaseButton.vue"
import BaseUserAvatar from "../../components/basecomponents/BaseUserAvatar.vue"
@ -181,8 +239,8 @@ import { useI18n } from "vue-i18n"
import { useRouter } from "vue-router"
export default {
name: 'UserRelUserList',
servicePrefix: 'userreluser',
name: "UserRelUserList",
servicePrefix: "userreluser",
components: {
BaseInputText,
BaseTag,
@ -192,68 +250,71 @@ export default {
},
mixins: [ListMixin],
setup() {
const store = useStore();
const store = useStore()
const router = useRouter()
const { t } = useI18n()
const user = store.getters["security/getUser"];
const isLoadingSelect = ref(false);
const deleteItemDialog = ref(false);
const item = ref({});
const friendRequests = ref([]);
const waitingRequests = ref([]);
const user = store.getters["security/getUser"]
const isLoadingSelect = ref(false)
const deleteItemDialog = ref(false)
const item = ref({})
const friendRequests = ref([])
const waitingRequests = ref([])
const friendRequestFilter = {
friend: user.id,
relationType: 10 // friend request
};
relationType: 10, // friend request
}
const waitingFilter = {
user: user.id,
relationType: 10
};
relationType: 10,
}
const friendFilter = {
user: user.id,
relationType: 3, // friend status
};
}
function addFriend(friend) {
// Change from request to friend
axios.put(friend['@id'], {
relationType: 3,
}).then(response => {
console.log(response);
reloadHandler();
}).catch(function (error) {
console.log(error);
});
axios
.put(friend["@id"], {
relationType: 3,
})
.then((response) => {
console.log(response)
reloadHandler()
})
.catch(function (error) {
console.log(error)
})
}
function reloadHandler() {
store.dispatch('userreluser/resetList');
store.dispatch('userreluser/fetchAll', friendFilter);
store.dispatch('userreluser/findAll', friendRequestFilter).then(response => {
friendRequests.value = response;
});
store.dispatch('userreluser/findAll', waitingFilter).then(response => {
waitingRequests.value = response;
});
store.dispatch("userreluser/resetList")
store.dispatch("userreluser/fetchAll", friendFilter)
store.dispatch("userreluser/findAll", friendRequestFilter).then((response) => {
friendRequests.value = response
})
store.dispatch("userreluser/findAll", waitingFilter).then((response) => {
waitingRequests.value = response
})
}
function deleteItemButton(item) {
store.dispatch('userreluser/del', item);
deleteItemDialog.value = false;
reloadHandler();
store.dispatch("userreluser/del", item)
deleteItemDialog.value = false
reloadHandler()
}
reloadHandler();
reloadHandler()
const columns = ref([
{ label: t('User'), field: 'friend.username', name: 'friend', sortable: true},
{ label: t('Sent'), field: 'createdAt', name: 'createdAt', sortable: true},
{ label: t('Actions'), name: 'action', sortable: false}
{ label: t("User"), field: "friend.username", name: "friend", sortable: true },
{ label: t("Sent"), field: "createdAt", name: "createdAt", sortable: true },
{ label: t("Actions"), name: "action", sortable: false },
])
const pageOptions = ref([10, 20, 50, t('All')])
const pageOptions = ref([10, 20, 50, t("All")])
const selected = ref([])
const selectedItems = ref([])
const itemDialog = ref(false)
@ -261,7 +322,7 @@ export default {
const submitted = ref(false)
const goToAdd = () => {
router.push({ name: 'UserRelUserAdd' })
router.push({ name: "UserRelUserAdd" })
}
return {
@ -281,105 +342,107 @@ export default {
friendRequests,
waitingRequests,
friendFilter,
deleteItemDialog
deleteItemDialog,
}
},
computed: {
// From crud.js list function
...mapGetters('resourcenode', {
resourceNode: 'getResourceNode'
...mapGetters("resourcenode", {
resourceNode: "getResourceNode",
}),
...mapGetters({
'isAuthenticated': 'security/isAuthenticated',
'isAdmin': 'security/isAdmin',
'currentUser': 'security/getUser',
isAuthenticated: "security/isAuthenticated",
isAdmin: "security/isAdmin",
currentUser: "security/getUser",
}),
...mapGetters('userreluser', {
items: 'list',
...mapGetters("userreluser", {
items: "list",
}),
//...getters
// From ListMixin
...mapFields('userreluser', {
deletedItem: 'deleted',
error: 'error',
isLoading: 'isLoading',
resetList: 'resetList',
totalItems: 'totalItems',
view: 'view'
...mapFields("userreluser", {
deletedItem: "deleted",
error: "error",
isLoading: "isLoading",
resetList: "resetList",
totalItems: "totalItems",
view: "view",
}),
},
methods: {
// prime
onPage(event) {
this.options.itemsPerPage = event.rows;
this.options.page = event.page + 1;
this.options.sortBy = event.sortField;
this.options.sortDesc = event.sortOrder === -1;
this.options.itemsPerPage = event.rows
this.options.page = event.page + 1
this.options.sortBy = event.sortField
this.options.sortDesc = event.sortOrder === -1
this.filters = {
user: this.currentUser.id,
relationType: 3
};
this.onUpdateOptions(this.options);
relationType: 3,
}
this.onUpdateOptions(this.options)
},
sortingChanged(event) {
console.log('sortingChanged');
console.log(event);
this.options.sortBy = event.sortField;
this.options.sortDesc = event.sortOrder === -1;
console.log("sortingChanged")
console.log(event)
this.options.sortBy = event.sortField
this.options.sortDesc = event.sortOrder === -1
this.onUpdateOptions(this.options);
this.onUpdateOptions(this.options)
// ctx.sortBy ==> Field key for sorting by (or null for no sorting)
// ctx.sortDesc ==> true if sorting descending, false otherwise
},
hideDialog() {
this.itemDialog = false;
this.submitted = false;
this.itemDialog = false
this.submitted = false
},
saveItem() {
this.submitted = true;
this.submitted = true
if (this.item.title.trim()) {
if (this.item.id) {
} else {
//this.products.push(this.product);
this.item.filetype = 'folder';
this.item.parentResourceNodeId = this.$route.params.node;
this.item.resourceLinkList = JSON.stringify([{
gid: this.$route.query.gid,
sid: this.$route.query.sid,
cid: this.$route.query.cid,
visibility: RESOURCE_LINK_PUBLISHED, // visible by default
}]);
this.create(this.item);
this.showMessage('Saved');
this.item.filetype = "folder"
this.item.parentResourceNodeId = this.$route.params.node
this.item.resourceLinkList = JSON.stringify([
{
gid: this.$route.query.gid,
sid: this.$route.query.sid,
cid: this.$route.query.cid,
visibility: RESOURCE_LINK_PUBLISHED, // visible by default
},
])
this.create(this.item)
this.showMessage("Saved")
}
this.itemDialog = false;
this.item = {};
this.itemDialog = false
this.item = {}
}
},
editItem(item) {
this.item = {...item};
this.itemDialog = true;
this.item = { ...item }
this.itemDialog = true
},
confirmDeleteItem(item) {
this.item = item;
this.deleteItemDialog = true;
this.item = item
this.deleteItemDialog = true
},
confirmDeleteMultiple() {
this.deleteMultipleDialog = true;
this.deleteMultipleDialog = true
},
deleteMultipleItems() {
this.deleteMultipleAction(this.selectedItems);
this.deleteMultipleAction(this.selectedItems)
this.onRequest({
pagination: this.pagination,
});
this.deleteMultipleDialog = false;
this.selectedItems = null;
})
this.deleteMultipleDialog = false
this.selectedItems = null
//this.onUpdateOptions(this.options);
},
onRowSelected(items) {
@ -392,23 +455,23 @@ export default {
this.$refs.selectableTable.clearSelected()
},
async deleteSelected() {
this.deleteMultipleAction(this.selected);
this.deleteMultipleAction(this.selected)
this.onRequest({
pagination: this.pagination,
});
})
},
//...actions,
// From ListMixin
...mapActions('userreluser', {
getPage: 'fetchAll',
create: 'create',
update: 'update',
deleteItem: 'del',
deleteMultipleAction: 'delMultiple'
...mapActions("userreluser", {
getPage: "fetchAll",
create: "create",
update: "update",
deleteItem: "del",
deleteMultipleAction: "delMultiple",
}),
...mapActions('resourcenode', {
findResourceNode: 'findResourceNode',
...mapActions("resourcenode", {
findResourceNode: "findResourceNode",
}),
}
};
},
}
</script>

Write Preview
Loading…
Cancel
Save