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

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

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

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

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

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

@@ -62,7 +62,7 @@
<SMTable <SMTable
:headers="headers" :headers="headers"
:items="items" :items="items"
class="sm-table-media"> class="sm-table-media mb-4">
<template #item-select="item"> <template #item-select="item">
<SMCheckbox <SMCheckbox
v-model="itemsSelected[item.id]" v-model="itemsSelected[item.id]"
@@ -121,22 +121,24 @@
</button> </button>
</template> </template>
</SMTable> </SMTable>
<div class="align-items-center"> <div class="flex flex-justify-start gap-4 flex-items-center">
<div> <button
<button type="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" :disabled="computedSelectedCount == 0"
@click="handleDeleteSelected"> @click="handleEditSelected">
Delete Selected Edit Selected
</button> </button>
<button <button
type="button" type="button"
:disabled="computedSelectedCount == 0" 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"
@click="handleEditSelected"> :disabled="computedSelectedCount == 0"
Edit Selected @click="handleDeleteSelected">
</button> Delete Selected
</button>
<div class="small">
{{ computedSelectedCount }} selected
</div> </div>
<div>{{ computedSelectedCount }} selected</div>
</div> </div>
</template> </template>
</div> </div>