Vue fixes and Compositionification.
This commit is contained in:
Buster Neece
parent
1fa0ab618b
commit
c8e18a7324
|
|
@ -38,70 +38,69 @@
|
|||
</b-media>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import {onMounted, ref, watch} from "vue";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
import {useNotify} from "~/vendor/bootstrapVue";
|
||||
|
||||
export default {
|
||||
name: 'CustomAssetForm',
|
||||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
apiUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
caption: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
const props = defineProps({
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
loading: true,
|
||||
isUploaded: false,
|
||||
url: null,
|
||||
file: null,
|
||||
};
|
||||
apiUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
watch: {
|
||||
file(newFile) {
|
||||
if (null === newFile) {
|
||||
return;
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('file', this.file);
|
||||
|
||||
this.$wrapWithLoading(
|
||||
this.axios.post(this.apiUrl, formData)
|
||||
).finally(() => {
|
||||
this.relist();
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.relist();
|
||||
},
|
||||
methods: {
|
||||
relist() {
|
||||
this.file = null;
|
||||
this.loading = true;
|
||||
|
||||
this.axios.get(this.apiUrl).then((resp) => {
|
||||
this.isUploaded = resp.data.is_uploaded;
|
||||
this.url = resp.data.url;
|
||||
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
clear() {
|
||||
this.$wrapWithLoading(
|
||||
this.axios.delete(this.apiUrl)
|
||||
).finally(() => {
|
||||
this.relist();
|
||||
});
|
||||
},
|
||||
caption: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
const loading = ref(true);
|
||||
const isUploaded = ref(false);
|
||||
const url = ref(null);
|
||||
const file = ref(null);
|
||||
|
||||
const {axios} = useAxios();
|
||||
|
||||
const relist = () => {
|
||||
file.value = null;
|
||||
loading.value = true;
|
||||
|
||||
axios.get(this.apiUrl).then((resp) => {
|
||||
isUploaded.value = resp.data.is_uploaded;
|
||||
url.value = resp.data.url;
|
||||
|
||||
loading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(relist);
|
||||
|
||||
const {wrapWithLoading} = useNotify();
|
||||
|
||||
watch(file, (newFile) => {
|
||||
if (null === newFile) {
|
||||
return;
|
||||
}
|
||||
|
||||
let formData = new FormData();
|
||||
formData.append('file', newFile);
|
||||
|
||||
wrapWithLoading(
|
||||
axios.post(props.apiUrl, formData)
|
||||
).finally(() => {
|
||||
relist();
|
||||
});
|
||||
});
|
||||
|
||||
const clear = () => {
|
||||
wrapWithLoading(
|
||||
axios.delete(props.apiUrl)
|
||||
).finally(() => {
|
||||
relist();
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -26,7 +26,7 @@
|
|||
|
||||
<data-table
|
||||
id="permissions"
|
||||
ref="datatable"
|
||||
ref="$datatable"
|
||||
paginated
|
||||
:fields="fields"
|
||||
:api-url="listUrl"
|
||||
|
|
@ -71,7 +71,7 @@
|
|||
</b-card>
|
||||
|
||||
<edit-modal
|
||||
ref="editModal"
|
||||
ref="$editModal"
|
||||
:create-url="listUrl"
|
||||
:station-permissions="stationPermissions"
|
||||
:stations="stations"
|
||||
|
|
@ -80,80 +80,93 @@
|
|||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import DataTable from '~/components/Common/DataTable';
|
||||
import EditModal from './Permissions/EditModal';
|
||||
import Icon from '~/components/Common/Icon';
|
||||
import InfoCard from '~/components/Common/InfoCard';
|
||||
import {filter, get, map} from 'lodash';
|
||||
import {useTranslate} from "~/vendor/gettext";
|
||||
import {ref} from "vue";
|
||||
import {useNotify} from "~/vendor/bootstrapVue";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
import {useSweetAlert} from "~/vendor/sweetalert";
|
||||
|
||||
export default {
|
||||
name: 'AdminPermissions',
|
||||
components: {InfoCard, Icon, EditModal, DataTable},
|
||||
props: {
|
||||
listUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
stations: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
globalPermissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
stationPermissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
const props = defineProps({
|
||||
listUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{key: 'name', isRowHeader: true, label: this.$gettext('Role Name'), sortable: true},
|
||||
{key: 'permissions', label: this.$gettext('Permissions'), sortable: false},
|
||||
{key: 'actions', label: this.$gettext('Actions'), sortable: false, class: 'shrink'}
|
||||
]
|
||||
};
|
||||
stations: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
methods: {
|
||||
getGlobalPermissionNames(permissions) {
|
||||
return filter(map(permissions, (permission) => {
|
||||
return get(this.globalPermissions, permission, null);
|
||||
}));
|
||||
},
|
||||
getStationPermissionNames(permissions) {
|
||||
return filter(map(permissions, (permission) => {
|
||||
return get(this.stationPermissions, permission, null);
|
||||
}));
|
||||
},
|
||||
getStationName(stationId) {
|
||||
return get(this.stations, stationId, null);
|
||||
},
|
||||
relist() {
|
||||
this.$refs.datatable.refresh();
|
||||
},
|
||||
doCreate() {
|
||||
this.$refs.editModal.create();
|
||||
},
|
||||
doEdit(url) {
|
||||
this.$refs.editModal.edit(url);
|
||||
},
|
||||
doDelete(url) {
|
||||
this.$confirmDelete({
|
||||
title: this.$gettext('Delete Role?'),
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.$wrapWithLoading(
|
||||
this.axios.delete(url)
|
||||
).then((resp) => {
|
||||
this.$notifySuccess(resp.data.message);
|
||||
this.relist();
|
||||
});
|
||||
}
|
||||
globalPermissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
},
|
||||
stationPermissions: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const {$gettext} = useTranslate();
|
||||
|
||||
const fields = [
|
||||
{key: 'name', isRowHeader: true, label: $gettext('Role Name'), sortable: true},
|
||||
{key: 'permissions', label: $gettext('Permissions'), sortable: false},
|
||||
{key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}
|
||||
];
|
||||
|
||||
const getGlobalPermissionNames = (permissions) => {
|
||||
return filter(map(permissions, (permission) => {
|
||||
return get(props.globalPermissions, permission, null);
|
||||
}));
|
||||
};
|
||||
|
||||
const getStationPermissionNames = (permissions) => {
|
||||
return filter(map(permissions, (permission) => {
|
||||
return get(props.stationPermissions, permission, null);
|
||||
}));
|
||||
};
|
||||
|
||||
const getStationName = (stationId) => {
|
||||
return get(props.stations, stationId, null);
|
||||
};
|
||||
|
||||
const $datatable = ref(); // Template Ref
|
||||
|
||||
const relist = () => {
|
||||
$datatable.value.refresh();
|
||||
};
|
||||
|
||||
const $editModal = ref(); // Template Ref
|
||||
|
||||
const doCreate = () => {
|
||||
$editModal.value.create();
|
||||
};
|
||||
|
||||
const doEdit = (url) => {
|
||||
$editModal.value.edit(url);
|
||||
};
|
||||
|
||||
const {wrapWithLoading, notifySuccess} = useNotify();
|
||||
const {confirmDelete} = useSweetAlert();
|
||||
const {axios} = useAxios();
|
||||
|
||||
const doDelete = (url) => {
|
||||
confirmDelete({
|
||||
title: $gettext('Delete Role?'),
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
wrapWithLoading(
|
||||
axios.delete(url)
|
||||
).then((resp) => {
|
||||
notifySuccess(resp.data.message);
|
||||
relist();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<data-table
|
||||
id="stations"
|
||||
ref="datatable"
|
||||
ref="$datatable"
|
||||
paginated
|
||||
:fields="fields"
|
||||
:api-url="listUrl"
|
||||
|
|
@ -72,87 +72,103 @@
|
|||
</b-card>
|
||||
|
||||
<admin-stations-edit-modal
|
||||
v-bind="$props"
|
||||
ref="editModal"
|
||||
v-bind="pickProps(props, stationFormProps)"
|
||||
ref="$editModal"
|
||||
:create-url="listUrl"
|
||||
@relist="relist"
|
||||
/>
|
||||
|
||||
<admin-stations-clone-modal
|
||||
ref="cloneModal"
|
||||
ref="$cloneModal"
|
||||
@relist="relist"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import DataTable from '~/components/Common/DataTable';
|
||||
import Icon from '~/components/Common/Icon';
|
||||
import AdminStationsEditModal from "./Stations/EditModal";
|
||||
import {get} from "lodash";
|
||||
import AdminStationsCloneModal from "./Stations/CloneModal";
|
||||
import stationFormProps from "./Stations/stationFormProps";
|
||||
import {pickProps} from "~/functions/pickProps";
|
||||
import {useTranslate} from "~/vendor/gettext";
|
||||
import {ref} from "vue";
|
||||
import {useNotify} from "~/vendor/bootstrapVue";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
import {useSweetAlert} from "~/vendor/sweetalert";
|
||||
|
||||
export default {
|
||||
name: 'AdminPermissions',
|
||||
components: {AdminStationsCloneModal, AdminStationsEditModal, Icon, DataTable},
|
||||
props: {
|
||||
...stationFormProps,
|
||||
listUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
frontendTypes: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
backendTypes: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
const props = defineProps({
|
||||
...stationFormProps,
|
||||
listUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{key: 'name', isRowHeader: true, label: this.$gettext('Name'), sortable: true},
|
||||
{key: 'frontend_type', label: this.$gettext('Broadcasting'), sortable: false},
|
||||
{key: 'backend_type', label: this.$gettext('AutoDJ'), sortable: false},
|
||||
{key: 'actions', label: this.$gettext('Actions'), sortable: false, class: 'shrink'}
|
||||
]
|
||||
};
|
||||
frontendTypes: {
|
||||
type: Object,
|
||||
required: true
|
||||
},
|
||||
methods: {
|
||||
relist() {
|
||||
this.$refs.datatable.refresh();
|
||||
},
|
||||
doCreate() {
|
||||
this.$refs.editModal.create();
|
||||
},
|
||||
doEdit(url) {
|
||||
this.$refs.editModal.edit(url);
|
||||
},
|
||||
doClone(stationName, url) {
|
||||
this.$refs.cloneModal.create(stationName, url);
|
||||
},
|
||||
doDelete(url) {
|
||||
this.$confirmDelete({
|
||||
title: this.$gettext('Delete Station?'),
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.$wrapWithLoading(
|
||||
this.axios.delete(url)
|
||||
).then((resp) => {
|
||||
this.$notifySuccess(resp.data.message);
|
||||
this.relist();
|
||||
});
|
||||
}
|
||||
});
|
||||
},
|
||||
getFrontendName(frontend_type) {
|
||||
return get(this.frontendTypes, [frontend_type, 'name'], '');
|
||||
},
|
||||
getBackendName(backend_type) {
|
||||
return get(this.backendTypes, [backend_type, 'name'], '');
|
||||
}
|
||||
backendTypes: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const {$gettext} = useTranslate();
|
||||
|
||||
const fields = [
|
||||
{key: 'name', isRowHeader: true, label: $gettext('Name'), sortable: true},
|
||||
{key: 'frontend_type', label: $gettext('Broadcasting'), sortable: false},
|
||||
{key: 'backend_type', label: $gettext('AutoDJ'), sortable: false},
|
||||
{key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}
|
||||
];
|
||||
|
||||
const getFrontendName = (frontend_type) => {
|
||||
return get(props.frontendTypes, [frontend_type, 'name'], '');
|
||||
};
|
||||
|
||||
const getBackendName = (backend_type) => {
|
||||
return get(props.backendTypes, [backend_type, 'name'], '');
|
||||
};
|
||||
|
||||
const $datatable = ref(); // Template Ref
|
||||
|
||||
const relist = () => {
|
||||
$datatable.value.refresh();
|
||||
};
|
||||
|
||||
const $editModal = ref(); // Template Ref
|
||||
|
||||
const doCreate = () => {
|
||||
$editModal.value.create();
|
||||
};
|
||||
|
||||
const doEdit = (url) => {
|
||||
$editModal.value.edit(url);
|
||||
};
|
||||
|
||||
const $cloneModal = ref(); // Template Ref
|
||||
|
||||
const doClone = (stationName, url) => {
|
||||
$cloneModal.value.create(stationName, url);
|
||||
};
|
||||
|
||||
const {wrapWithLoading, notifySuccess} = useNotify();
|
||||
const {confirmDelete} = useSweetAlert();
|
||||
const {axios} = useAxios();
|
||||
|
||||
const doDelete = (url) => {
|
||||
confirmDelete({
|
||||
title: $gettext('Delete Station?'),
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
wrapWithLoading(
|
||||
axios.delete(url)
|
||||
).then((resp) => {
|
||||
notifySuccess(resp.data.message);
|
||||
relist();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -126,11 +126,3 @@ defineExpose({
|
|||
edit
|
||||
});
|
||||
</script>
|
||||
|
||||
<script>
|
||||
import {defineComponent} from "vue";
|
||||
|
||||
export default defineComponent({
|
||||
inheritAttrs: false,
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@
|
|||
|
||||
<data-table
|
||||
id="admin_storage_locations"
|
||||
ref="datatable"
|
||||
ref="$datatable"
|
||||
:show-toolbar="false"
|
||||
:fields="fields"
|
||||
:responsive="false"
|
||||
|
|
@ -87,130 +87,133 @@
|
|||
</b-card>
|
||||
|
||||
<edit-modal
|
||||
ref="editModal"
|
||||
ref="$editModal"
|
||||
:create-url="listUrl"
|
||||
:type="activeType"
|
||||
@relist="relist"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import DataTable from '~/components/Common/DataTable';
|
||||
import EditModal from './StorageLocations/EditModal';
|
||||
import Icon from '~/components/Common/Icon';
|
||||
import {computed, ref} from "vue";
|
||||
import {useTranslate} from "~/vendor/gettext";
|
||||
import {useNotify} from "~/vendor/bootstrapVue";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
import {useSweetAlert} from "~/vendor/sweetalert";
|
||||
|
||||
export default {
|
||||
name: 'AdminStorageLocations',
|
||||
components: {Icon, EditModal, DataTable},
|
||||
props: {
|
||||
listUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
const props = defineProps({
|
||||
listUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const activeType = ref('station_media');
|
||||
|
||||
const listUrlForType = computed(() => {
|
||||
return props.listUrl + '?type=' + activeType.value;
|
||||
});
|
||||
|
||||
const {$gettext} = useTranslate();
|
||||
|
||||
const fields = [
|
||||
{key: 'adapter', label: $gettext('Adapter'), sortable: false},
|
||||
{key: 'space', label: $gettext('Space Used'), class: 'text-nowrap', sortable: false},
|
||||
{key: 'stations', label: $gettext('Station(s)'), sortable: false},
|
||||
{key: 'actions', label: $gettext('Actions'), class: 'shrink', sortable: false}
|
||||
];
|
||||
|
||||
const tabs = [
|
||||
{
|
||||
type: 'station_media',
|
||||
title: $gettext('Station Media')
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
activeType: 'station_media',
|
||||
fields: [
|
||||
{key: 'adapter', label: this.$gettext('Adapter'), sortable: false},
|
||||
{key: 'space', label: this.$gettext('Space Used'), class: 'text-nowrap', sortable: false},
|
||||
{key: 'stations', label: this.$gettext('Station(s)'), sortable: false},
|
||||
{key: 'actions', label: this.$gettext('Actions'), class: 'shrink', sortable: false}
|
||||
]
|
||||
};
|
||||
{
|
||||
type: 'station_recordings',
|
||||
title: $gettext('Station Recordings')
|
||||
},
|
||||
computed: {
|
||||
tabs() {
|
||||
return [
|
||||
{
|
||||
type: 'station_media',
|
||||
title: this.$gettext('Station Media')
|
||||
},
|
||||
{
|
||||
type: 'station_recordings',
|
||||
title: this.$gettext('Station Recordings')
|
||||
},
|
||||
{
|
||||
type: 'station_podcasts',
|
||||
title: this.$gettext('Station Podcasts'),
|
||||
},
|
||||
{
|
||||
type: 'backup',
|
||||
title: this.$gettext('Backups')
|
||||
}
|
||||
]
|
||||
},
|
||||
listUrlForType() {
|
||||
return this.listUrl + '?type=' + this.activeType;
|
||||
}
|
||||
{
|
||||
type: 'station_podcasts',
|
||||
title: $gettext('Station Podcasts'),
|
||||
},
|
||||
methods: {
|
||||
setType (type) {
|
||||
this.activeType = type;
|
||||
this.relist();
|
||||
},
|
||||
getAdapterName (adapter) {
|
||||
switch (adapter) {
|
||||
case 'local':
|
||||
return this.$gettext('Local');
|
||||
{
|
||||
type: 'backup',
|
||||
title: $gettext('Backups')
|
||||
}
|
||||
];
|
||||
|
||||
case 's3':
|
||||
return this.$gettext('Remote: S3 Compatible');
|
||||
const $datatable = ref(); // Template Ref
|
||||
|
||||
case 'dropbox':
|
||||
return this.$gettext('Remote: Dropbox');
|
||||
|
||||
case 'sftp':
|
||||
return this.$gettext('Remote: SFTP');
|
||||
}
|
||||
},
|
||||
getSpaceUsed(item) {
|
||||
return (item.storageAvailable)
|
||||
? item.storageUsed + ' / ' + item.storageAvailable
|
||||
: item.storageUsed;
|
||||
},
|
||||
getProgressVariant(percent) {
|
||||
if (percent > 85) {
|
||||
return 'danger';
|
||||
} else if (percent > 65) {
|
||||
return 'warning';
|
||||
} else {
|
||||
return 'default';
|
||||
}
|
||||
},
|
||||
relist() {
|
||||
this.$refs.datatable.refresh();
|
||||
},
|
||||
doCreate() {
|
||||
this.$refs.editModal.create();
|
||||
},
|
||||
doEdit(url) {
|
||||
this.$refs.editModal.edit(url);
|
||||
},
|
||||
doModify(url) {
|
||||
this.$notify(this.$gettext('Applying changes...'), {
|
||||
variant: 'warning'
|
||||
});
|
||||
const relist = () => {
|
||||
$datatable.value.refresh();
|
||||
};
|
||||
|
||||
this.axios.put(url).then((resp) => {
|
||||
this.$notifySuccess(resp.data.message);
|
||||
this.relist();
|
||||
});
|
||||
},
|
||||
doDelete (url) {
|
||||
this.$confirmDelete({
|
||||
title: this.$gettext('Delete Storage Location?'),
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.$wrapWithLoading(
|
||||
this.axios.delete(url)
|
||||
).then((resp) => {
|
||||
this.$notifySuccess(resp.data.message);
|
||||
this.relist();
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
const $editModal = ref(); // Template Ref
|
||||
|
||||
const doCreate = () => {
|
||||
$editModal.value.create();
|
||||
};
|
||||
|
||||
const doEdit = (url) => {
|
||||
$editModal.value.edit(url);
|
||||
};
|
||||
|
||||
const setType = (type) => {
|
||||
activeType.value = type;
|
||||
relist();
|
||||
};
|
||||
|
||||
const getAdapterName = (adapter) => {
|
||||
switch (adapter) {
|
||||
case 'local':
|
||||
return $gettext('Local');
|
||||
|
||||
case 's3':
|
||||
return $gettext('Remote: S3 Compatible');
|
||||
|
||||
case 'dropbox':
|
||||
return $gettext('Remote: Dropbox');
|
||||
|
||||
case 'sftp':
|
||||
return $gettext('Remote: SFTP');
|
||||
}
|
||||
};
|
||||
|
||||
const getSpaceUsed = (item) => {
|
||||
return (item.storageAvailable)
|
||||
? item.storageUsed + ' / ' + item.storageAvailable
|
||||
: item.storageUsed;
|
||||
};
|
||||
|
||||
const getProgressVariant = (percent) => {
|
||||
if (percent > 85) {
|
||||
return 'danger';
|
||||
} else if (percent > 65) {
|
||||
return 'warning';
|
||||
} else {
|
||||
return 'default';
|
||||
}
|
||||
};
|
||||
|
||||
const {notifySuccess, wrapWithLoading} = useNotify();
|
||||
const {confirmDelete} = useSweetAlert();
|
||||
const {axios} = useAxios();
|
||||
|
||||
const doDelete = (url) => {
|
||||
confirmDelete({
|
||||
title: $gettext('Delete Storage Location?'),
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
wrapWithLoading(
|
||||
axios.delete(url)
|
||||
).then((resp) => {
|
||||
notifySuccess(resp.data.message);
|
||||
relist();
|
||||
});
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
|
||||
<data-table
|
||||
id="users"
|
||||
ref="datatable"
|
||||
ref="$datatable"
|
||||
paginated
|
||||
:fields="fields"
|
||||
:api-url="listUrl"
|
||||
|
|
@ -79,64 +79,75 @@
|
|||
</b-card>
|
||||
|
||||
<edit-modal
|
||||
ref="editModal"
|
||||
ref="$editModal"
|
||||
:create-url="listUrl"
|
||||
:roles="roles"
|
||||
@relist="relist"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
<script setup>
|
||||
import DataTable from '~/components/Common/DataTable';
|
||||
import EditModal from './Users/EditModal';
|
||||
import Icon from '~/components/Common/Icon';
|
||||
import {useTranslate} from "~/vendor/gettext";
|
||||
import {ref} from "vue";
|
||||
import {useNotify} from "~/vendor/bootstrapVue";
|
||||
import {useSweetAlert} from "~/vendor/sweetalert";
|
||||
import {useAxios} from "~/vendor/axios";
|
||||
|
||||
export default {
|
||||
name: 'AdminPermissions',
|
||||
components: {Icon, EditModal, DataTable},
|
||||
props: {
|
||||
listUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
roles: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
const props = defineProps({
|
||||
listUrl: {
|
||||
type: String,
|
||||
required: true
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
fields: [
|
||||
{key: 'name', isRowHeader: true, label: this.$gettext('User Name'), sortable: true},
|
||||
{key: 'roles', label: this.$gettext('Roles'), sortable: false},
|
||||
{key: 'actions', label: this.$gettext('Actions'), sortable: false, class: 'shrink'}
|
||||
]
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
relist() {
|
||||
this.$refs.datatable.refresh();
|
||||
},
|
||||
doCreate() {
|
||||
this.$refs.editModal.create();
|
||||
},
|
||||
doEdit(url) {
|
||||
this.$refs.editModal.edit(url);
|
||||
},
|
||||
doDelete(url) {
|
||||
this.$confirmDelete({
|
||||
title: this.$gettext('Delete User?'),
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
this.$wrapWithLoading(
|
||||
this.axios.delete(url)
|
||||
).then((resp) => {
|
||||
this.$notifySuccess(resp.data.message);
|
||||
this.relist();
|
||||
});
|
||||
}
|
||||
roles: {
|
||||
type: Object,
|
||||
required: true
|
||||
}
|
||||
});
|
||||
|
||||
const {$gettext} = useTranslate();
|
||||
|
||||
const fields = [
|
||||
{key: 'name', isRowHeader: true, label: $gettext('User Name'), sortable: true},
|
||||
{key: 'roles', label: $gettext('Roles'), sortable: false},
|
||||
{key: 'actions', label: $gettext('Actions'), sortable: false, class: 'shrink'}
|
||||
];
|
||||
|
||||
const $datatable = ref(); // Template Ref
|
||||
|
||||
const relist = () => {
|
||||
$datatable.value.refresh();
|
||||
};
|
||||
|
||||
const $editModal = ref(); // Template Ref
|
||||
|
||||
const doCreate = () => {
|
||||
$editModal.value.create();
|
||||
};
|
||||
|
||||
const doEdit = (url) => {
|
||||
$editModal.value.edit(url);
|
||||
};
|
||||
|
||||
const {wrapWithLoading, notifySuccess} = useNotify();
|
||||
const {confirmDelete} = useSweetAlert();
|
||||
const {axios} = useAxios();
|
||||
|
||||
const doDelete = (url) => {
|
||||
confirmDelete({
|
||||
title: $gettext('Delete User?'),
|
||||
}).then((result) => {
|
||||
if (result.value) {
|
||||
wrapWithLoading(
|
||||
axios.delete(url)
|
||||
).then((resp) => {
|
||||
notifySuccess(resp.data.message);
|
||||
relist();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -227,7 +227,7 @@ export default defineComponent({
|
|||
props: {
|
||||
id: {
|
||||
type: String,
|
||||
required: true
|
||||
default: null
|
||||
},
|
||||
apiUrl: {
|
||||
type: String,
|
||||
|
|
|
|||
|
|
@ -69,7 +69,7 @@ const props = defineProps({
|
|||
},
|
||||
name: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: null
|
||||
},
|
||||
field: {
|
||||
type: Object,
|
||||
|
|
|
|||
Loading…
Reference in New Issue