From 9a7e87bed3b8a6551b66a64f10e4f8af01ebd704 Mon Sep 17 00:00:00 2001
From: YudhistiraA <aryarajasa0@gmail.com>
Date: Tue, 7 Jan 2025 11:23:59 +0800
Subject: [PATCH 1/4] overview & fix layout webpage

---
 .../CMS/Webpage/Overview/OverviewWorkshop.vue       | 13 ++++++++-----
 resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue  |  2 +-
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue b/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue
index ccbb8881f8..3b5a6a8be7 100644
--- a/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue
+++ b/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue
@@ -16,6 +16,8 @@ const props = defineProps<{
 	blockData: Object
 }>()
 
+console.log(props)
+
 const emits = defineEmits<{
 	(e: "autoSave"): void
 }>()
@@ -25,6 +27,8 @@ const activeTextIndex = ref(-1)
 const activeImageIndex = ref(-1)
 const activeImageIndexModal = ref(-1)
 const isModalGallery = ref(false)
+const _textRefs = ref([])
+const _imageRefs = ref([])
 
 function onDragImage({ top = 0, bottom = 0, left = 0, right = 0 }) {
 	props.modelValue.images[activeImageIndex.value].properties.position.top = `${top}px`
@@ -121,7 +125,7 @@ onBeforeUnmount(() => {
 				class="absolute"
 				:class="`text-${index}`"
 				@dblclick="activateMoveableText(index)"
-				ref="el => textRefs[index] = el"
+				:ref="el => _textRefs[index] = el"
 				:style="{
 					width: text?.properties?.width ? `${text?.properties?.width}` : 'auto',
 					height: text?.properties?.height ? `${text?.properties?.height}` : 'auto',
@@ -140,7 +144,7 @@ onBeforeUnmount(() => {
 			<Moveable
 				v-if="activeTextIndex === index"
 				class="moveable"
-				:target="[`.text-${index}`]"
+				:target="_textRefs[index]"
 				:draggable="true"
 				:scalable="true"
 				@drag="onDragText"
@@ -163,7 +167,7 @@ onBeforeUnmount(() => {
 					class="absolute"
 					:class="`image-${index}`"
 					@dblclick="activateMoveableImage(index)"
-					ref="el => imageRefs[index] = el"
+					:ref="el => _imageRefs[index] = el"
 					:style="{
 						width: image?.properties?.width ? `${image?.properties?.width}` : 'auto',
 						height: image?.properties?.height ? `${image?.properties?.height}` : 'auto',
@@ -174,7 +178,6 @@ onBeforeUnmount(() => {
 							? `${image?.properties?.position?.left}`
 							: 'auto',
 					}">
-					<!-- Tombol di pojok kiri atas -->
 					<button
 						@click="
 							() => {
@@ -192,7 +195,7 @@ onBeforeUnmount(() => {
 				<Moveable
 					v-if="activeImageIndex === index"
 					class="moveable"
-					:target="[`.image-${index}`]"
+					:target="_imageRefs[index]"
 					:draggable="true"
 					:scalable="true"
 					@drag="onDragImage"
diff --git a/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue b/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue
index b3a3a29fb1..ab39f067c9 100644
--- a/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue
+++ b/resources/js/Pages/Grp/Org/Web/WebpageWorkshop.vue
@@ -47,7 +47,7 @@ const props = defineProps<{
 	webpage: RootWebpage
 	webBlockTypes: Root
 }>()
-
+console.log(props)
 provide('isInWorkshop', true)
 
 const layout = inject('layout', layoutStructure)

From 351405a5c1e53dae910811ce44fe7f6edde89ad4 Mon Sep 17 00:00:00 2001
From: YudhistiraA <aryarajasa0@gmail.com>
Date: Tue, 7 Jan 2025 11:33:06 +0800
Subject: [PATCH 2/4] overviewUpload

---
 .../js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue  | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue b/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue
index 3b5a6a8be7..bae9ede6aa 100644
--- a/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue
+++ b/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue
@@ -16,7 +16,6 @@ const props = defineProps<{
 	blockData: Object
 }>()
 
-console.log(props)
 
 const emits = defineEmits<{
 	(e: "autoSave"): void
@@ -218,7 +217,9 @@ onBeforeUnmount(() => {
 			:maxSelected="1"
 			:uploadRoute="{
 				...webpageData.images_upload_route,
-				parameters: id,
+				parameters: {
+						modelHasWebBlocks: blockData.id
+					},
 			}"
 			:closePopup="() => (isModalGallery = false)"
 			@submitSelectedImages="onChangeImage" />

From 16cf155a3efd65e75f5c0ed8af57fd10b8048dab Mon Sep 17 00:00:00 2001
From: aqordeon <aqordivika@yahoo.co.id>
Date: Tue, 7 Jan 2025 11:50:09 +0800
Subject: [PATCH 3/4] #1290 fix: Permissions: organisations

---
 app/Actions/SysAdmin/User/UI/EditUser.php     |  2 +-
 app/Models/SysAdmin/User.php                  |  2 +-
 .../Forms/Fields/EmployeePosition.vue         | 37 +++++++++++-----
 .../Components/Forms/Fields/Permissions.vue   | 43 +++++++++++--------
 4 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/app/Actions/SysAdmin/User/UI/EditUser.php b/app/Actions/SysAdmin/User/UI/EditUser.php
index 87b606a94e..e3bc2c0a8f 100644
--- a/app/Actions/SysAdmin/User/UI/EditUser.php
+++ b/app/Actions/SysAdmin/User/UI/EditUser.php
@@ -97,7 +97,7 @@ class_basename(Warehouse::class) => Organisation::all()->map(function (Organisat
         $jobPositionsOrganisationsData = [];
         foreach ($this->group->organisations as $organisation) {
             $jobPositionsOrganisationData = GetJobPositionsOrganisationData::run($user, $organisation);
-            $jobPositionsOrganisationsData[] = $jobPositionsOrganisationData;
+            $jobPositionsOrganisationsData[$organisation->slug] = $jobPositionsOrganisationData;
         }
 
         $permissionsGroupData = GetPermissionGroupData::run($user, $this->group);
diff --git a/app/Models/SysAdmin/User.php b/app/Models/SysAdmin/User.php
index ce84c7e0e5..116292d996 100644
--- a/app/Models/SysAdmin/User.php
+++ b/app/Models/SysAdmin/User.php
@@ -278,7 +278,7 @@ public function timeSeries(): HasMany
     public function jobPositions(): BelongsToMany
     {
         return $this->belongsToMany(JobPosition::class, 'user_has_pseudo_job_positions')
-            ->using(UserHasPseudoJobPositions::class)->withTimestamps();
+            ->using(UserHasPseudoJobPositions::class)->withPivot(['scopes'])->withTimestamps();
     }
 
 
diff --git a/resources/js/Components/Forms/Fields/EmployeePosition.vue b/resources/js/Components/Forms/Fields/EmployeePosition.vue
index 76bfa3a574..b08e8bf41c 100644
--- a/resources/js/Components/Forms/Fields/EmployeePosition.vue
+++ b/resources/js/Components/Forms/Fields/EmployeePosition.vue
@@ -1,5 +1,5 @@
     <script setup lang="ts">
-import { computed, inject, onMounted, reactive, ref } from 'vue'
+import { computed, inject, onMounted, reactive, ref, watch } from 'vue'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
 import { faBullhorn,faCashRegister,faChessQueen,faCube,faStore, faInfoCircle, faCircle, faCrown, faBars, faAbacus, faCheckDouble, faQuestionCircle, faTimes, faCheckCircle as falCheckCircle } from '@fal'
 import { faBoxUsd,faHelmetBattle,faExclamationCircle, faCheckCircle as fasCheckCircle, faCrown as fasCrown } from '@fas'
@@ -69,8 +69,13 @@ interface optionsJob {
 const layout = inject('layout', layoutStructure)
 
 const props = defineProps<{
-    form?: any
-    fieldName: string
+    form: {
+        group: string[]
+        organisations: {
+            [key: string]: {}
+        }
+    }
+    fieldName: string  // organisation slug
     options: {
         positions: {
             data: {
@@ -109,7 +114,12 @@ const props = defineProps<{
     organisationId?: number
 }>()
 
-const newForm = props.saveButton ? useForm({[props.fieldName]: props.form[props.fieldName]} || {}) : reactive(props.form)
+const abcdef = {
+    [props.fieldName]: props.form.organisations[props.fieldName] || 'fffff'
+}
+console.log('pppp', props.form.organisations)
+const newForm = props.saveButton ? useForm(abcdef || {}) : reactive(props.form)
+console.log('bbbb', newForm)
 const onSubmitNewForm = () => {
     newForm
     .transform((data) => ({
@@ -561,14 +571,20 @@ onMounted(() => {
     }, 300)
 })
 
-const countPosition = computed(() => {
-    return Object.keys(newForm[props.fieldName] || {})?.length
-})
+const emits = defineEmits<{
+    (e: 'countPosition', value: number): void
+}>()
+watch(() => newForm, () => {
+    const xxx = Object.keys(newForm[props.fieldName]).length
+    // console.log('newForm', xxx)
+    emits('countPosition', xxx)
+}, { deep: true, immediate: true })
+
+
 </script>
 
 <template>
     <div class="relative">
-        <div class="bg-red-300">{{ countPosition }}ddddddd</div>
         <!-- authorised fulfilment: {{ fulfilmentsLength }} <br> authorised shop: {{ shopsLength }} <br> authorised warehouse: {{ warehousesLength }} <br> authorised production: {{ productionsLength }} -->
         <div class="relative flex flex-col text-xs divide-y-[1px]">
             <template v-if="isMounted">
@@ -643,7 +659,7 @@ const countPosition = computed(() => {
                                             <div class="flex flex-col gap-y-4 pt-4">
                                                 <template v-for="optionData, optionKey, optionIdx in optionsList" :key="optionKey + optionIdx">
                                                     <div v-if="jobGroup.subDepartment.some(subDep => subDep.optionsType?.includes(optionKey))" class="">
-                                                        <div class="text-white text-center bg-indigo-500 capitalize py-0.5">{{ optionKey }}</div>
+                                                        <div class="text-white text-center bg-gray-400 capitalize py-0.5">{{ optionKey }}</div>
                                                         <div class="flex flex-col gap-x-2 gap-y-0.5">
                                                             <!-- Section: Box radio -->
                                                             <div v-for="(shop, idxZXC) in optionData" class="grid grid-cols-4 items-center justify-start gap-x-6 min-h-6"
@@ -741,5 +757,6 @@ const countPosition = computed(() => {
 
     </div>
 
-    <pre>{{ newForm }}</pre>
+    Newform
+    <pre>{{ newForm[fieldName] }}</pre>
 </template>
diff --git a/resources/js/Components/Forms/Fields/Permissions.vue b/resources/js/Components/Forms/Fields/Permissions.vue
index 37b476c624..f4dfe95082 100644
--- a/resources/js/Components/Forms/Fields/Permissions.vue
+++ b/resources/js/Components/Forms/Fields/Permissions.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Ref, ref } from 'vue'
+import { computed, Ref, ref, watch } from 'vue'
 import { Collapse } from 'vue-collapsed'
 import CardPermissions from './Components/Permissions/Card.vue'
 import { get, set } from 'lodash'
@@ -170,11 +170,19 @@ const organisation = [
 ]
 const selectedOrganisation = ref<typeof organisation[number] | null>(organisation[0])
 
+const organisationPositionCounts = ref({})
+// watch(props.form, (newValue) => {
+//     console.log('vcxvcxvcxvcxvcxvcxvcx')
+//     organisationPositionCounts.value = {...newValue}.map((org) => {
+//         return {
+//             [org]: Object.keys(org).length
+//         }
+//     })
+// }, { deep: true })
 </script>
 
 <template>
     <div class="flex flex-col gap-y-6">
-
         <Fieldset legend="Group permissions">
             <div>
                 <template v-for="(jobGroup, departmentName, idxJobGroup) in groupPositionList" :key="departmentName + idxJobGroup">
@@ -232,9 +240,7 @@ const selectedOrganisation = ref<typeof organisation[number] | null>(organisatio
             <Button @click="submitGroupPermissions" full label="Save group permissions" class="mt-4" :disabled="!form.isDirty || form.processing" :loading="form.processing" />
         </Fieldset>
 
-        {{ props.form[props.fieldName].group }}
-
-        <!-- <div class="grid">
+        <div class="grid">
             <div class="flex justify-between px-2 border-b border-gray-300 py-2 mb-2">
                 <div>
                     Organisations
@@ -244,29 +250,30 @@ const selectedOrganisation = ref<typeof organisation[number] | null>(organisatio
                 </div>
             </div>
 
-            <div v-for="(review, slugReview) in props.fieldData.organisation_list.data"
+            <div v-for="(organisation, idxOrganisation) in props.fieldData.organisation_list.data"
                 class="border-l-2 border-indigo-500 pl-2 flex flex-col mb-1 gap-y-1"
             >
                 <div
-                    @click="selectedOrganisation?.slug == review.slug ? selectedOrganisation = null : selectedOrganisation = review"
+                    @click="selectedOrganisation?.slug == organisation.slug ? selectedOrganisation = null : selectedOrganisation = organisation"
                     class="rounded cursor-pointer py-1 px-2 flex justify-between"
-                    :class="review.slug === selectedOrganisation?.slug ? 'bg-indigo-100 text-indigo-500' : 'hover:bg-gray-200/70 '"
+                    :class="organisation.slug === selectedOrganisation?.slug ? 'bg-indigo-100 text-indigo-500' : 'hover:bg-gray-200/70 '"
                 >
-                    <div class="">{{ review.name }}</div>
-                    <div v-tooltip="trans('Number job positions')" class="pl-3 pr-2">0/{{ review.number_job_positions }}</div>
+                    <div class="">{{ organisation.name }}</div>
+                    <div v-tooltip="trans('Number job positions')" class="pl-3 pr-2 tabular-nums"><transition name="spin-to-right"><span :key="organisationPositionCounts[organisation.slug]">{{ organisationPositionCounts[organisation.slug] }}</span></transition>/{{ organisation.number_job_positions }}</div>
                 </div>
 
-                <Collapse as="section" :when="review.slug == selectedOrganisation?.slug">
-                    {{ form[fieldName] }}
-                    <div v-if="options?.[review.slug]" class="border border-gray-300 rounded-md mb-2">
+                <Collapse as="section" :when="organisation.slug == selectedOrganisation?.slug">
+                    <!-- {{ form[fieldName] }} -->
+                    <div v-if="options?.[organisation.slug]" class="border border-gray-300 rounded-md mb-2">
                         <EmployeePosition
-                            :key="'employeePosition' + review.slug "
+                            :key="'employeePosition' + organisation.slug "
                             :form="form[fieldName]"
                             :fieldData
-                            :fieldName="review.slug"
-                            :options="options?.[review.slug]"
+                            :fieldName="organisation.slug"
+                            :options="options?.[organisation.slug]"
                             saveButton
-                            :organisationId="review.id"
+                            :organisationId="organisation.id"
+                            @countPosition="(count: number) => set(organisationPositionCounts, organisation.slug, count)"
                         />
                     </div>
                     <div v-else class="text-center border border-gray-300 rounded-md mb-2">
@@ -274,7 +281,7 @@ const selectedOrganisation = ref<typeof organisation[number] | null>(organisatio
                     </div>
                 </Collapse>
             </div>
-        </div> -->
+        </div>
 
 
         <!-- <pre>{{ form }}</pre> -->

From a432439595ceff26a1963bb716e27a11690d1c32 Mon Sep 17 00:00:00 2001
From: YudhistiraA <aryarajasa0@gmail.com>
Date: Tue, 7 Jan 2025 11:56:58 +0800
Subject: [PATCH 4/4] fix upload image overview

---
 .../CMS/Webpage/Overview/OverviewWorkshop.vue | 32 ++++++++++++++++++-
 1 file changed, 31 insertions(+), 1 deletion(-)

diff --git a/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue b/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue
index bae9ede6aa..64438c88e3 100644
--- a/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue
+++ b/resources/js/Components/CMS/Webpage/Overview/OverviewWorkshop.vue
@@ -6,6 +6,7 @@ import Editor from "@/Components/Forms/Fields/BubleTextEditor/EditorV2.vue"
 import { getStyles } from "@/Composables/styles"
 import GalleryManagement from "@/Components/Utils/GalleryManagement/GalleryManagement.vue"
 import Modal from "@/Components/Utils/Modal.vue"
+import { notify } from "@kyvg/vue3-notification"
 
 import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome"
 import { faImage, faEdit } from "@far"
@@ -104,6 +105,33 @@ const onChangeImage = (image) => {
 	onSave()
 }
 
+
+const onUpload = async (files: File[], clear: Function) => {
+	try {
+		const formData = new FormData()
+		Array.from(files).forEach((file, index) => {
+			formData.append(`images[${index}]`, file)
+		})
+		const response = await axios.post(
+			route(props.webpageData?.images_upload_route.name, { modelHasWebBlocks: props.blockData.id }),
+			formData,
+			{
+				headers: {
+					"Content-Type": "multipart/form-data",
+				},
+			}
+		)
+		onChangeImage(response.data.data)
+	} catch (error) {
+		console.log(error)
+		notify({
+			title: "Failed",
+			text: "Error while uploading data",
+			type: "error",
+		})
+	}
+}
+
 onMounted(() => {
 	document.addEventListener("click", handleClickOutside)
 })
@@ -222,6 +250,8 @@ onBeforeUnmount(() => {
 					},
 			}"
 			:closePopup="() => (isModalGallery = false)"
-			@submitSelectedImages="onChangeImage" />
+			@submitSelectedImages="onChangeImage" 
+			:submitUpload="onUpload"
+			/>
 	</Modal>
 </template>