STEMMechanics/Website
1
0
Fork 0
Code Issues 4 Pull Requests 1 Actions Packages Projects Releases 3 Wiki Activity

cleanup

Browse Source
This commit is contained in:
James Collins
2023-07-28 09:29:05 +10:00
parent 69623bd248
commit f8fe5c92aa
4 changed files with 53 additions and 48 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
resources/js/components/SMImageGallery.vue
View File

@@ -14,13 +14,13 @@
class="flex flex-col flex-justify-center relative sm-gallery-item p-1"
:key="index">
<img
:src="mediaGetVariantUrl(image as Media, 'small')"
:src="mediaGetThumbnail(image as Media, 'small')"
class="max-h-40 max-w-40 cursor-pointer"
@click="showGalleryModal(index)" />
<div
v-if="props.showEditor"
class="absolute rounded-5 bg-white -top-0.25 -right-0.25 hidden cursor-pointer item-delete"
@click="handleRemoveItem(image.id)">
@click="handleRemoveItem((image as Media).id)">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-6 w-6 block"
@@ -82,7 +82,7 @@
<script setup lang="ts">
import { onBeforeUnmount, onMounted, ref } from "vue";
import { Media } from "../helpers/api.types";
import { mediaGetVariantUrl } from "../helpers/media";
import { mediaGetThumbnail, mediaGetVariantUrl } from "../helpers/media";
import { openDialog } from "./SMDialog";
import SMDialogMedia from "./dialogs/SMDialogMedia.vue";

6
resources/js/components/SMSelectImage.vue
View File

@@ -1,10 +1,10 @@
<template>
<div class="flex flex-col flex-1 flex-align-center">
<label class="control-label" v-bind="{ for: id }">{{ label }}</label>
<div v-if="mediaUrl?.length > 0" class="text-center">
<div v-if="mediaUrl?.length > 0" class="text-center mb-4">
<img
class="max-w-48 max-h-48"
:src="mediaGetVariantUrl(value, 'medium')" />
:src="mediaGetThumbnail(value, 'medium')" />
</div>
<svg
v-else
@@ -32,7 +32,7 @@
import { inject, watch, ref, useSlots, computed } from "vue";
import { isEmpty, generateRandomElementId } from "../helpers/utils";
import { toTitleCase } from "../helpers/string";
import { mediaGetVariantUrl } from "../helpers/media";
import { mediaGetThumbnail } from "../helpers/media";
import { openDialog } from "./SMDialog";
import SMDialogMedia from "./dialogs/SMDialogMedia.vue";
import { Media } from "../helpers/api.types";

45
resources/js/views/dashboard/MediaEdit.vue
View File

@@ -12,11 +12,7 @@
@submit="handleSubmit"
@failed-validation="handleFailValidation">
<div>
<SMImage
v-if="!editMultiple"
class="mb-8"
:src="imageUrl" />
<SMImageStack v-else class="mb-8" :src="imageStackUrls" />
<SMImageGallery class="mb-8" :model-value="galleryItems" />
</div>
<SMSelectImage
v-if="!editMultiple"
@@ -61,17 +57,20 @@
type="static"
label="URL" />
<SMInput class="mb-8" textarea control="description" />
<div class="flex flex-justify-end gap-4">
<button
v-if="route.params.id"
type="button"
class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-red-600 hover:bg-red-500 text-white cursor-pointer"
@click="handleDelete">
{{ editMultiple ? "Delete All" : "Delete" }}
</button>
<input
role="button"
type="submit"
class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer"
:value="editMultiple ? 'Save All' : 'Save'" />
<button
v-if="route.params.id"
type="button"
@click="handleDelete">
{{ editMultiple ? "Delete All" : "Delete" }}
</button>
</div>
</SMForm>
</div>
</template>
@@ -83,7 +82,7 @@ import { useRoute, useRouter } from "vue-router";
import { api } from "../../helpers/api";
import { Form, FormControl } from "../../helpers/form";
import { bytesReadable } from "../../helpers/types";
import { And, FileSize, Required } from "../../helpers/validate";
import { And, Required } from "../../helpers/validate";
import { MediaResponse } from "../../helpers/api.types";
import { openDialog } from "../../components/SMDialog";
import DialogConfirm from "../../components/dialogs/SMDialogConfirm.vue";
@@ -92,17 +91,15 @@ import SMInput from "../../components/SMInput.vue";
import SMMastHead from "../../components/SMMastHead.vue";
import SMLoading from "../../components/SMLoading.vue";
import { useToastStore } from "../../store/ToastStore";
import SMImage from "../../components/SMImage.vue";
import SMImageStack from "../../components/SMImageStack.vue";
import SMPageStatus from "../../components/SMPageStatus.vue";
import SMSelectImage from "../../components/SMSelectImage.vue";
import { userHasPermission } from "../../helpers/utils";
import SMImageGallery from "../../components/SMImageGallery.vue";
const route = useRoute();
const router = useRouter();
const pageError = ref(200);
const pageLoading = ref(true);
const editMultiple = "id" in route.params && route.params.id.includes(",");
const pageHeading = route.params.id
? editMultiple
@@ -110,7 +107,7 @@ const pageHeading = route.params.id
: "Edit Media"
: "Upload Media";
const progressText = ref("");
const imageStackUrls = ref([]);
const galleryItems = ref([]);
const form = reactive(
Form({
@@ -124,7 +121,7 @@ const form = reactive(
const fileData = reactive({
url: "Not available",
mime_type: "--",
size: "--",
size: 0,
storage: "--",
status: "--",
dimensions: "--",
@@ -137,6 +134,8 @@ const handleLoad = async () => {
if (route.params.id) {
if (editMultiple === false) {
try {
form.loading(true);
let result = await api.get({
url: "/media/{id}",
params: {
@@ -146,7 +145,7 @@ const handleLoad = async () => {
const data = result.data as MediaResponse;
form.controls.file.value = data.medium.name;
form.controls.file.value = data.medium;
form.controls.title.value = data.medium.title;
form.controls.description.value = data.medium.description;
form.controls.permission.value = data.medium.permission;
@@ -162,10 +161,14 @@ const handleLoad = async () => {
imageUrl.value = fileData.url;
} catch (err) {
pageError.value = err.status;
} finally {
form.loading(false);
}
} else {
(route.params.id as string).split(",").forEach(async (id) => {
try {
form.loading(true);
let result = await api.get({
url: "/media/{id}",
params: {
@@ -174,15 +177,15 @@ const handleLoad = async () => {
});
const data = result.data as MediaResponse;
imageStackUrls.value.push(data.medium.url);
galleryItems.value.push(data.medium);
} catch (err) {
pageError.value = err.status;
} finally {
form.loading(false);
}
});
}
}
pageLoading.value = false;
};
const handleSubmit = async (enableFormCallBack) => {

22
resources/js/views/dashboard/MediaList.vue
View File

@@ -62,7 +62,7 @@
<SMTable
:headers="headers"
:items="items"
class="sm-table-media">
class="sm-table-media mb-4">
<template #item-select="item">
<SMCheckbox
v-model="itemsSelected[item.id]"
@@ -121,22 +121,24 @@
</button>
</template>
</SMTable>
<div class="align-items-center">
<div>
<button
type="button"
:disabled="computedSelectedCount == 0"
@click="handleDeleteSelected">
Delete Selected
</button>
<div class="flex flex-justify-start gap-4 flex-items-center">
<button
type="button"
class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-sky-600 hover:bg-sky-500 text-white cursor-pointer disabled:bg-gray-3 disabled:text-white disabled:cursor-not-allowed disabled:hover:shadow-none"
:disabled="computedSelectedCount == 0"
@click="handleEditSelected">
Edit Selected
</button>
<button
type="button"
class="font-medium px-6 py-1.5 rounded-md hover:shadow-md transition text-sm bg-red-600 hover:bg-red-500 text-white cursor-pointer disabled:bg-gray-3 disabled:text-white disabled:cursor-not-allowed disabled:hover:shadow-none"
:disabled="computedSelectedCount == 0"
@click="handleDeleteSelected">
Delete Selected
</button>
<div class="small">
{{ computedSelectedCount }} selected
</div>
<div>{{ computedSelectedCount }} selected</div>
</div>
</template>
</div>