CoCalc Logo Icon
StoreFeaturesDocsShareSupportNewsAboutSign UpSign In
sagemathinc

Real-time collaboration for Jupyter Notebooks, Linux Terminals, LaTeX, VS Code, R IDE, and more,
all in one place.

GitHub Repository: sagemathinc/cocalc
 Path: blob/master/src/packages/next/components/licenses/editable-license.tsx
Views: 687
1
import { Alert, Input } from "antd";

2
import { useEffect, useState } from "react";

3
import apiPost from "lib/api/post";

4
import { capitalize } from "@cocalc/util/misc";

5


6
export function EditableTitle({

7
  license_id,

8
  title,

9
  onChange,

10
}: {

11
  license_id: string;

12
  title: string;

13
  onChange?: () => void;

14
}) {

15
  return (

16
    <EditableTextField

17
      license_id={license_id}

18
      field="title"

19
      value={title}

20
      onChange={onChange}

21
    />

22
  );

23
}

24


25
export function EditableDescription({

26
  license_id,

27
  description,

28
  onChange,

29
}: {

30
  license_id: string;

31
  description: string;

32
  onChange?: () => void;

33
}) {

34
  return (

35
    <EditableTextField

36
      license_id={license_id}

37
      field="description"

38
      value={description}

39
      rows={3}

40
      onChange={onChange}

41
    />

42
  );

43
}

44


45
function EditableTextField({

46
  license_id,

47
  field,

48
  value,

49
  rows,

50
  onChange,

51
}: {

52
  license_id: string;

53
  field: "title" | "description";

54
  value?: string;

55
  rows?: number;

56
  onChange?: () => void;

57
}) {

58
  const [edit, setEdit] = useState<boolean>(false);

59
  const [value2, setValue] = useState<string>(value ?? "");

60
  const [error, setError] = useState<string>("");

61


62
  useEffect(() => {

63
    setValue(value ?? "");

64
    setEdit(false);

65
    setError("");

66
  }, [value]);

67


68
  async function save(value: string): Promise<void> {

69
    setEdit(false);

70
    setError("");

71
    const query = { manager_site_licenses: { id: license_id, [field]: value } };

72
    try {

73
      await apiPost("/user-query", { query });

74
      onChange?.();

75
    } catch (err) {

76
      setError(err.message);

77
    }

78
  }

79


80
  return (

81
    <div style={{ cursor: "pointer" }} onClick={() => setEdit(true)}>

82
      {error && (

83
        <Alert type="error" message={`Error saving ${field} - ${error}`} />

84
      )}

85
      {capitalize(field)}:{" "}

86
      {edit &&

87
        (rows ? (

88
          <Input.TextArea

89
            autoFocus

90
            value={value2}

91
            onChange={(e) => setValue(e.target.value)}

92
            onBlur={() => save(value2)}

93
            rows={rows}

94
          />

95
        ) : (

96
          <Input

97
            autoFocus

98
            value={value2}

99
            onChange={(e) => setValue(e.target.value)}

100
            onBlur={() => save(value2)}

101
            onPressEnter={() => save(value2)}

102
          />

103
        ))}

104
      {!edit && <>{value2.trim() ? value2 : `(set ${field}...)`}</>}

105
    </div>

106
  );

107
}

108


109