Changes to phone view, fixed infinity scroll issues with page refresh, updated design a bit
This commit is contained in:
Simon Pocrnjič
@@ -25,6 +25,7 @@ import {
|
||||
} from "@/Components/ui/select";
|
||||
import { Switch } from "@/Components/ui/switch";
|
||||
import { Button } from "@/Components/ui/button";
|
||||
import { ScrollArea } from "@/Components/ui/scroll-area";
|
||||
|
||||
const props = defineProps({
|
||||
show: { type: Boolean, default: false },
|
||||
@@ -452,11 +453,57 @@ const open = computed({
|
||||
</DialogDescription>
|
||||
</DialogHeader>
|
||||
|
||||
<form @submit.prevent="onSubmit" class="space-y-4">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField v-slot="{ value, handleChange }" name="profile_id">
|
||||
<ScrollArea class="max-h-[65vh] pr-1">
|
||||
<form @submit.prevent="onSubmit" class="space-y-4 pr-3">
|
||||
<div class="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<FormField v-slot="{ value, handleChange }" name="profile_id">
|
||||
<FormItem>
|
||||
<FormLabel>Profil</FormLabel>
|
||||
<Select :model-value="value" @update:model-value="handleChange">
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="—" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem :value="null">—</SelectItem>
|
||||
<SelectItem v-for="p in pageSmsProfiles" :key="p.id" :value="p.id">
|
||||
{{ p.name || "Profil #" + p.id }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="sender_id">
|
||||
<FormItem>
|
||||
<FormLabel>Pošiljatelj</FormLabel>
|
||||
<Select :model-value="value" @update:model-value="handleChange">
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="—" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem :value="null">—</SelectItem>
|
||||
<SelectItem
|
||||
v-for="s in sendersForSelectedProfile"
|
||||
:key="s.id"
|
||||
:value="s.id"
|
||||
>
|
||||
{{ s.name || s.phone || "Sender #" + s.id }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="contract_uuid">
|
||||
<FormItem>
|
||||
<FormLabel>Profil</FormLabel>
|
||||
<FormLabel>Pogodba</FormLabel>
|
||||
<Select :model-value="value" @update:model-value="handleChange">
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
@@ -465,18 +512,22 @@ const open = computed({
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem :value="null">—</SelectItem>
|
||||
<SelectItem v-for="p in pageSmsProfiles" :key="p.id" :value="p.id">
|
||||
{{ p.name || "Profil #" + p.id }}
|
||||
<SelectItem v-for="c in contractsForCase" :key="c.uuid" :value="c.uuid">
|
||||
{{ c.reference || c.uuid }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p class="mt-1 text-xs text-gray-500">
|
||||
Uporabi podatke pogodbe (in računa) za zapolnitev {contract.*} in
|
||||
{account.*} mest.
|
||||
</p>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="sender_id">
|
||||
<FormField v-slot="{ value, handleChange }" name="template_id">
|
||||
<FormItem>
|
||||
<FormLabel>Pošiljatelj</FormLabel>
|
||||
<FormLabel>Predloga</FormLabel>
|
||||
<Select :model-value="value" @update:model-value="handleChange">
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
@@ -485,125 +536,77 @@ const open = computed({
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem :value="null">—</SelectItem>
|
||||
<SelectItem
|
||||
v-for="s in sendersForSelectedProfile"
|
||||
:key="s.id"
|
||||
:value="s.id"
|
||||
>
|
||||
{{ s.name || s.phone || "Sender #" + s.id }}
|
||||
<SelectItem v-for="t in pageSmsTemplates" :key="t.id" :value="t.id">
|
||||
{{ t.name || "Predloga #" + t.id }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</div>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="contract_uuid">
|
||||
<FormItem>
|
||||
<FormLabel>Pogodba</FormLabel>
|
||||
<Select :model-value="value" @update:model-value="handleChange">
|
||||
<FormField v-slot="{ componentField }" name="message">
|
||||
<FormItem>
|
||||
<FormLabel>Vsebina sporočila</FormLabel>
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="—" />
|
||||
</SelectTrigger>
|
||||
<Textarea
|
||||
rows="4"
|
||||
placeholder="Vpišite SMS vsebino..."
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem :value="null">—</SelectItem>
|
||||
<SelectItem v-for="c in contractsForCase" :key="c.uuid" :value="c.uuid">
|
||||
{{ c.reference || c.uuid }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<p class="mt-1 text-xs text-gray-500">
|
||||
Uporabi podatke pogodbe (in računa) za zapolnitev {contract.*} in
|
||||
{account.*} mest.
|
||||
</p>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="template_id">
|
||||
<FormItem>
|
||||
<FormLabel>Predloga</FormLabel>
|
||||
<Select :model-value="value" @update:model-value="handleChange">
|
||||
<FormControl>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="—" />
|
||||
</SelectTrigger>
|
||||
</FormControl>
|
||||
<SelectContent>
|
||||
<SelectItem :value="null">—</SelectItem>
|
||||
<SelectItem v-for="t in pageSmsTemplates" :key="t.id" :value="t.id">
|
||||
{{ t.name || "Predloga #" + t.id }}
|
||||
</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<FormField v-slot="{ componentField }" name="message">
|
||||
<FormItem>
|
||||
<FormLabel>Vsebina sporočila</FormLabel>
|
||||
<FormControl>
|
||||
<Textarea
|
||||
rows="4"
|
||||
placeholder="Vpišite SMS vsebino..."
|
||||
v-bind="componentField"
|
||||
/>
|
||||
</FormControl>
|
||||
<FormMessage />
|
||||
</FormItem>
|
||||
</FormField>
|
||||
|
||||
<!-- Live counters -->
|
||||
<div class="text-xs text-gray-600 flex flex-col gap-1">
|
||||
<div>
|
||||
<span class="font-medium">Znakov:</span>
|
||||
<span class="font-mono">{{ charCount }}</span>
|
||||
<span class="mx-2">|</span>
|
||||
<span class="font-medium">Kodiranje:</span>
|
||||
<span>{{ smsEncoding }}</span>
|
||||
<span class="mx-2">|</span>
|
||||
<span class="font-medium">Deli SMS:</span>
|
||||
<span class="font-mono">{{ segments }}</span>
|
||||
<span class="mx-2">|</span>
|
||||
<span class="font-medium">Krediti:</span>
|
||||
<span class="font-mono">{{ creditsNeeded }}</span>
|
||||
</div>
|
||||
<div>
|
||||
<span class="font-medium">Omejitev:</span>
|
||||
<span class="font-mono">{{ maxAllowed }}</span>
|
||||
<span class="mx-2">|</span>
|
||||
<span class="font-medium">Preostanek:</span>
|
||||
<span class="font-mono" :class="{ 'text-red-600': remaining === 0 }">
|
||||
{{ remaining }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-gray-500 leading-snug">
|
||||
Dolžina 160 znakov velja samo pri pošiljanju sporočil, ki vsebujejo znake, ki
|
||||
ne zahtevajo enkodiranja. Če npr. želite pošiljati šumnike, ki niso del
|
||||
7-bitne abecede GSM, morate uporabiti Unicode enkodiranje (UCS‑2). V tem
|
||||
primeru je največja dolžina enega SMS sporočila 70 znakov (pri daljših
|
||||
sporočilih 67 znakov na del), medtem ko je pri GSM‑7 160 znakov (pri daljših
|
||||
sporočilih 153 znakov na del). Razširjeni znaki (^{{ "{" }}}}\\[]~| in €)
|
||||
štejejo dvojno. Največja dovoljena dolžina po ponudniku: 640 (GSM‑7) oziroma
|
||||
320 (UCS‑2) znakov.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="delivery_report">
|
||||
<FormItem class="flex flex-row items-start space-x-3 space-y-0">
|
||||
<FormControl>
|
||||
<Switch :model-value="value" @update:model-value="handleChange" />
|
||||
</FormControl>
|
||||
<div class="space-y-1 leading-none">
|
||||
<FormLabel>Zahtevaj poročilo o dostavi</FormLabel>
|
||||
<!-- Live counters -->
|
||||
<div class="text-xs text-gray-600 flex flex-col gap-1">
|
||||
<div>
|
||||
<span class="font-medium">Znakov:</span>
|
||||
<span class="font-mono">{{ charCount }}</span>
|
||||
<span class="mx-2">|</span>
|
||||
<span class="font-medium">Kodiranje:</span>
|
||||
<span>{{ smsEncoding }}</span>
|
||||
<span class="mx-2">|</span>
|
||||
<span class="font-medium">Deli SMS:</span>
|
||||
<span class="font-mono">{{ segments }}</span>
|
||||
<span class="mx-2">|</span>
|
||||
<span class="font-medium">Krediti:</span>
|
||||
<span class="font-mono">{{ creditsNeeded }}</span>
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</form>
|
||||
<div>
|
||||
<span class="font-medium">Omejitev:</span>
|
||||
<span class="font-mono">{{ maxAllowed }}</span>
|
||||
<span class="mx-2">|</span>
|
||||
<span class="font-medium">Preostanek:</span>
|
||||
<span class="font-mono" :class="{ 'text-red-600': remaining === 0 }">
|
||||
{{ remaining }}
|
||||
</span>
|
||||
</div>
|
||||
<p class="text-[11px] text-gray-500 leading-snug">
|
||||
Dolžina 160 znakov velja samo pri pošiljanju sporočil, ki vsebujejo znake,
|
||||
ki ne zahtevajo enkodiranja. Če npr. želite pošiljati šumnike, ki niso del
|
||||
7-bitne abecede GSM, morate uporabiti Unicode enkodiranje (UCS‑2). V tem
|
||||
primeru je največja dolžina enega SMS sporočila 70 znakov (pri daljših
|
||||
sporočilih 67 znakov na del), medtem ko je pri GSM‑7 160 znakov (pri daljših
|
||||
sporočilih 153 znakov na del). Razširjeni znaki (^{{ "{" }}}}\\[]~| in €)
|
||||
štejejo dvojno. Največja dovoljena dolžina po ponudniku: 640 (GSM‑7) oziroma
|
||||
320 (UCS‑2) znakov.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<FormField v-slot="{ value, handleChange }" name="delivery_report">
|
||||
<FormItem class="flex flex-row items-start space-x-3 space-y-0">
|
||||
<FormControl>
|
||||
<Switch :model-value="value" @update:model-value="handleChange" />
|
||||
</FormControl>
|
||||
<div class="space-y-1 leading-none">
|
||||
<FormLabel>Zahtevaj poročilo o dostavi</FormLabel>
|
||||
</div>
|
||||
</FormItem>
|
||||
</FormField>
|
||||
</form>
|
||||
</ScrollArea>
|
||||
|
||||
<DialogFooter>
|
||||
<Button variant="outline" @click="closeSmsDialog" :disabled="processing">
|
||||
|
||||
Reference in New Issue
Block a user